abstracting logic

Author: Aayush-Agnihotri

src/app/api/chat/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  // const { uuid, message } = await request.json();
+  // if (!uuid || !message) {
+  //   return NextResponse.json({ message: "Invalid request" }, { status: 400 });
+  // }
+  console.log(request);
+  return NextResponse.json({ success: true });
+}

src/app/chat/[chatId]/page.tsx

@@ -32,6 +32,19 @@ export default function ChatPage() {
     }
   }, [messages]);
 
+  // useEffect(() => {
+  //   const fetchChat = async (chatId: string) => {
+  //     const response = await fetch(`/api/chat/${chatId}`);
+  //     if (!response.ok) {
+  //       notFound();
+  //       return;
+  //     }
+  //     const data = await response.json();
+  //     setMessages(data.messages);
+  //   };
+  //   fetchChat(chatId);
+  // }, [chatId]);
+
   // TODO: Figure out which models become active and when
   // const displayToast = async () => {
   //   const activeModels = await fetchActiveModels();

src/app/components/InitialChatPage.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import ChatMenuNavbar from './chat/ChatMenuNavbar';
 import ChatHeader from './chat/ChatHeader';
 import InputField from './InputField';
@@ -12,11 +10,26 @@ export default function InitialChatPage() {
   const firstName = user!.displayName!.split(' ')[0];
   const router = useRouter();
 
-  const handleInitialSendMessage = (message: string) => {
-    // TODO: Add the chat and message to the database
+  const createChat = async (uuid: string, message: string) => {
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        uuid,
+        message,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to create chat');
+    }
+  };
+
+  const handleInitialSendMessage = async (message: string) => {
     const chatId = uuidv4();
-    // Delete, needed for linter
-    console.log(`Message: ${message}`);
+    await createChat(chatId, message);
     router.push(`/chat/${chatId}`);
   };
 
@@ -34,7 +47,7 @@ export default function InitialChatPage() {
         </div>
 
         <div className="mb-10">
-          <InputField messageStreaming={false} onSubmit={handleInitialSendMessage} />
+          <InputField onSubmit={handleInitialSendMessage} messageStreaming={false} />
         </div>
       </div>
     </div>

src/app/components/Protected.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useEffect } from 'react';
 import { useAuth } from '@/contexts/AuthContext';
 import { useRouter } from 'next/navigation';
-import Spinner from './Spinner';
 
 interface ProtectedProps {
   children: ReactNode;
@@ -17,13 +16,5 @@ export default function Protected({ children }: ProtectedProps) {
     }
   }, [user, loading, router]);
 
-  if (loading) {
-    return (
-      <div className="flex h-screen w-screen justify-center align-middle">
-        <Spinner width="5" height="5" />
-      </div>
-    );
-  }
-
   return <>{user ? children : <></>}</>;
 }

src/app/components/chat/ChatHistoryEntry.tsx

@@ -0,0 +1,25 @@
+import { Chat } from '@/types/chat';
+
+interface ChatHistoryEntryProps {
+  chat: Chat;
+}
+
+export default function ChatHistoryEntry({ chat }: ChatHistoryEntryProps) {
+  return (
+    <div className="no-scrollbar mt-5 flex-1 flex-col justify-start overflow-y-auto">
+      <div key={chat.id} className="m-auto flex w-11/12 flex-row justify-between p-3">
+        <div className="flex flex-row gap-2">
+          {/* <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="size-6 text-white">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
+          </svg> */}
+          <span className="text-sm text-white">{chat.summary}</span>
+        </div>
+        {/* <div>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="size-6 text-white">
+            <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+          </svg>
+        </div> */}
+      </div>
+    </div>
+  );
+}

src/app/components/chat/ChatMenu.tsx

@@ -1,13 +1,13 @@
 import { useAuth } from '@/contexts/AuthContext';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { ChatHistory as History } from '@/types/chat';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import Spinner from '../Spinner';
 import ModelModal from '../modals/ModelModal';
 import EmbedModal from '../modals/EmbedModal';
 import Modal from '../modals/Modal';
-import ChatMenu from './ChatMenu';
+import ChatMenu from './ChatHistoryEntry';
 
 export default function ChatMenuNavbar() {
   const { user, signOut } = useAuth();
@@ -17,6 +17,7 @@ export default function ChatMenuNavbar() {
   const router = useRouter();
   const [chatHistory, setChatHistory] = useState<History>({ chats: [] });
   const [loadingHistory, setLoadingHistory] = useState(true);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   // TODO: Fetch chat history from the server
   console.log(setChatHistory);
@@ -25,6 +26,23 @@ export default function ChatMenuNavbar() {
     setIsNavbarOpen(!isNavbarOpen);
   };
 
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      window.innerWidth < 768 &&
+      menuRef.current &&
+      !menuRef.current.contains(event.target as Node)
+    ) {
+      setIsNavbarOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  });
+
   useEffect(() => {
     const fetchChatHistory = async () => {
       setLoadingHistory(false);
@@ -35,6 +53,7 @@ export default function ChatMenuNavbar() {
   return (
     <>
       <div
+        ref={menuRef}
         className={`flex-shrink-0 overscroll-none bg-black transition-all duration-300 ${isNavbarOpen ? 'w-64' : 'w-0'}`}
       >
         <div className="flex h-full flex-col justify-between">
@@ -123,7 +142,7 @@ export default function ChatMenuNavbar() {
                 <Spinner width="5" height="5" />
               </div>
             ) : (
-              <ChatMenu chats={chatHistory.chats} />
+              chatHistory.chats.map((chat) => <ChatMenu key={chat.id} chat={chat} />)
             ))}
 
           {isNavbarOpen && (

src/app/components/chat/ChatMenuNavbar.tsx

@@ -1,10 +1,25 @@
+'use client';
+
+import { useAuth } from '@/contexts/AuthContext';
+import Spinner from '../components/Spinner';
+import Protected from '../components/Protected';
+
 export default function HelpPage() {
-  // TODO: finish
+  const { loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="flex h-screen w-screen justify-center align-middle">
+        <Spinner width="5" height="5" />
+      </div>
+    );
+  }
 
   return (
-    <div>
+    // TODO: Finish
+    <Protected>
       <h1>Help</h1>
       <p>Here is some help text</p>
-    </div>
+    </Protected>
   );
 }

src/app/help/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/contexts/AuthContext';
+import ChatMenuNavbar from '@/app/components/chat/ChatMenuNavbar';
+import ChatHeader from '@/app/components/chat/ChatHeader';
+import Spinner from './components/Spinner';
+import Protected from './components/Protected';
+
+export default function NotFoundPage() {
+  const { loading } = useAuth();
+  const router = useRouter();
+  const [timer, setTimer] = useState(5);
+
+  if (loading) {
+    return (
+      <div className="flex h-screen w-screen justify-center align-middle">
+        <Spinner width="5" height="5" />
+      </div>
+    );
+  }
+
+  setTimeout(() => {
+    setTimer(timer - 1);
+    if (timer === 0) {
+      router.push('/');
+    }
+  }, 1000);
+
+  return (
+    <Protected>
+      <div className="flex h-svh flex-row gap-0">
+        <ChatMenuNavbar />
+        <div className="flex w-full flex-col">
+          <ChatHeader />
+          <div className="m-auto mt-10 flex w-4/5 flex-grow flex-col gap-3">
+            <span className="text-7xl font-semibold">404 - Not Found</span>
+            <span className="text-3xl font-semibold text-primaryColor">
+              The requested page could not be found.
+            </span>
+            {timer > 0 ? (
+              <span>Redirecting home in {timer} seconds.</span>
+            ) : (
+              <span>Redirecting...</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </Protected>
+  );
+}

src/app/not-found.tsx

@@ -1,4 +1,4 @@
-// TODO: Fix 'use client' directives - only put where needed
+// TODO: Fix 'use client' directives - only put where needed (needed at top of pages, not components)
 'use client';
 
 import { useAuth } from '@/contexts/AuthContext';