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>