Removed some of the calls to process.env; Used server props instead

ui/app/c/[chatId]/page.tsx

@@ -1,7 +1,31 @@
 import ChatWindow from '@/components/ChatWindow';
+import { FC } from 'react';
+import process from 'process';
+import { GetServerSideProps } from 'next';
 
-const Page = ({ params }: { params: { chatId: string } }) => {
-  return <ChatWindow id={params.chatId} />;
+interface PageProps {
+  backendApiUrl: string;
+  params: {
+    chatId: string;
+  };
+}
+
+export async function getServerSideProps(context): GetServerSideProps<PageProps> {
+  const backendApiUrl = process.env.BACKEND_API_URL;
+  const { chatId } = context.params || {};
+
+  return {
+    props: {
+      backendApiUrl,
+      params: {
+        chatId: chatId || '',
+      },
+    },
+  };
+}
+
+const Page: FC<PageProps> = ({ params, backendApiUrl }) => {
+  return <ChatWindow id={params.chatId} backendApiUrl={backendApiUrl} />;
 };
 
 export default Page;

ui/app/library/page.tsx

@@ -4,8 +4,9 @@ import DeleteChat from '@/components/DeleteChat';
 import { formatTimeDifference } from '@/lib/utils';
 import { BookOpenText, ClockIcon, Delete, ScanEye } from 'lucide-react';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, FC } from 'react';
 import process from 'process';
+import { GetServerSideProps } from 'next';
 
 export interface Chat {
   id: string;
@@ -14,7 +15,21 @@ export interface Chat {
   focusMode: string;
 }
 
-const Page = () => {
+interface PageProps {
+  backendApiUrl: string;
+}
+
+export async function getServerSideProps(): GetServerSideProps<PageProps> {
+  const backendApiUrl = process.env.BACKEND_API_URL;
+
+  return {
+    props: {
+      backendApiUrl,
+    },
+  };
+}
+
+const Page: FC<PageProps> = ({ backendApiUrl }) => {
   const [chats, setChats] = useState<Chat[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -22,7 +37,7 @@ const Page = () => {
     const fetchChats = async () => {
       setLoading(true);
 
-      const res = await fetch(`${process.env.BACKEND_API_URL}/chats`, {
+      const res = await fetch(`${backendApiUrl}/chats`, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
@@ -98,6 +113,7 @@ const Page = () => {
                   chatId={chat.id}
                   chats={chats}
                   setChats={setChats}
+                  backendApiUrl={backendApiUrl}
                 />
               </div>
             </div>

ui/components/ChatWindow.tsx

@@ -260,7 +260,7 @@ const loadMessages = async (
   setIsMessagesLoaded(true);
 };
 
-const ChatWindow = ({ id }: { id?: string }) => {
+const ChatWindow = ({ id, backendApiUrl }: { id?: string, backendApiUrl: string }) => {
   const searchParams = useSearchParams();
   const initialMessage = searchParams.get('q');
 
@@ -434,7 +434,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
           lastMsg.sources.length > 0 &&
           !lastMsg.suggestions
         ) {
-          const suggestions = await getSuggestions(messagesRef.current);
+          const suggestions = await getSuggestions(messagesRef.current, backendApiUrl);
           setMessages((prev) =>
             prev.map((msg) => {
               if (msg.messageId === lastMsg.messageId) {

ui/components/DeleteChat.tsx

@@ -9,10 +9,12 @@ const DeleteChat = ({
   chatId,
   chats,
   setChats,
+  backendApiUrl
 }: {
   chatId: string;
   chats: Chat[];
   setChats: (chats: Chat[]) => void;
+  backendApiUrl: string
 }) => {
   const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -21,7 +23,7 @@ const DeleteChat = ({
     setLoading(true);
     try {
       const res = await fetch(
-        `${process.env.BACKEND_API_URL}/chats/${chatId}`,
+        `${backendApiUrl}/chats/${chatId}`,
         {
           method: 'DELETE',
           headers: {

ui/lib/actions.ts

@@ -1,11 +1,10 @@
 import { Message } from '@/components/ChatWindow';
-import process from 'process';
 
-export const getSuggestions = async (chatHisory: Message[]) => {
+export const getSuggestions = async (chatHisory: Message[], backendApiUrl: string) => {
   const chatModel = localStorage.getItem('chatModel');
   const chatModelProvider = localStorage.getItem('chatModelProvider');
 
-  const res = await fetch(`${process.env.BACKEND_API_URL}/suggestions`, {
+  const res = await fetch(`${backendApiUrl}/suggestions`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',