fixing mobile page

cuappdev · Dec 20, 2024 · 0c926be · 0c926be
1 parent 6b82af7
commit 0c926be
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 137 deletions.
diff --git a/src/app/chat/[chatId]/page.tsx b/src/app/chat/[chatId]/page.tsx
@@ -10,10 +10,10 @@ import {
   Message,
 } from '@/types/chat';
 import Protected from '@/app/components/Protected';
-import ChatHistoryNavbar from '@/app/components/ChatHistoryNavbar';
-import ChatHeader from '@/app/components/ChatHeader';
+import ChatHistoryNavbar from '@/app/components/chatHistory/ChatHistoryNavbar';
+import ChatHeader from '@/app/components/chat/ChatHeader';
 import InputField from '@/app/components/InputField';
-import ChatMessage from '@/app/chat/[chatId]/ChatMessage';
+import ChatMessage from '@/app/components/chat/ChatMessage';
 
 export default function ChatPage() {
   const { user } = useAuth();
@@ -67,138 +67,110 @@ export default function ChatPage() {
   const sendStreamedMessage = async (message: string) => {
     const body = createChatCompletionRequestBody(message);
     try {
-      const initialResponse = await fetch(`/api/models`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(body),
-      });
-
-      if (!initialResponse.ok || !initialResponse.body) {
-        const data = await initialResponse.json();
-        throw new Error(data.error || 'Failed to send message.');
-      }
-
-      const reader = initialResponse.body.getReader();
-      const decoder = new TextDecoder('utf-8');
-      let buffer = '';
-      let done = false;
-
-      while (!done) {
-        const { value, done: streamDone } = await reader.read();
-        done = streamDone;
-        buffer += decoder.decode(value, { stream: true });
-
-        const lines = buffer.split(/\r?\n/);
-        buffer = lines.pop() || '';
-
-        for (const line of lines) {
-          if (line.trim()) {
-            try {
-              const response: ChatStreamCompletionResponse = JSON.parse(line);
-              setMessages((prevMessages) => {
-                const lastMessage = prevMessages[prevMessages.length - 1];
-                if (lastMessage && lastMessage.sender !== user!.displayName!) {
-                  lastMessage.content += response!.message!.content;
-                  return [
-                    ...prevMessages.slice(0, -1),
-                    {
-                      ...lastMessage,
-                      content: lastMessage.content + response!.message!.content,
-                    },
-                  ];
-                } else {
-                  return [
-                    ...prevMessages,
-                    {
-                      id: `${messages.length + 1}`,
-                      chatId: chatId,
-                      content: response!.message!.content,
-                      timestamp: new Date().toLocaleString(),
-                      sender: selectedModel,
-                    },
-                  ];
-                }
-              });
-
-              if (response.done) {
-                done = true;
-                break;
-              }
-            } catch (error) {
-              const errorMessage = {
-                id: `${messages.length + 1}`,
-                chatId: chatId,
-                content: `The following error occurred while processing your request:\n${error}\n Please try again.`,
-                timestamp: new Date().toLocaleString(),
-                sender: selectedModel,
-              };
-              setMessages((prevMessages) => [...prevMessages, errorMessage]);
+      const reader = await fetchChatResponse(body);
+      await processStreamedResponse(reader);
+    } catch (error: unknown) {
+      displayError(error);
+    } finally {
+      setMessageStreaming(false);
+    }
+  };
+
+  const fetchChatResponse = async (body: ChatCompletionRequest) => {
+    const response = await fetch(`/api/models`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok || !response.body) {
+      const data = await response.json();
+      throw new Error(data.error || 'Failed to send message.');
+    }
+
+    return response.body.getReader();
+  };
+
+  const processStreamedResponse = async (reader: ReadableStreamDefaultReader) => {
+    const decoder = new TextDecoder('utf-8');
+    let buffer = '';
+    let done = false;
+
+    while (!done) {
+      const { value, done: streamDone } = await reader.read();
+      done = streamDone;
+      buffer += decoder.decode(value, { stream: true });
+
+      const lines = buffer.split(/\r?\n/);
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        if (line.trim()) {
+          try {
+            const response: ChatStreamCompletionResponse = JSON.parse(line);
+            updateMessages(response);
+            if (response.done) {
               done = true;
-            } finally {
-              setMessageStreaming(false);
+              break;
             }
-
+          } catch (error) {
+            displayError(error);
+            done = true;
           }
         }
       }
-
-      if (buffer.trim()) {
-        try {
-          const response: ChatStreamCompletionResponse =
-            JSON.parse(buffer);
-            setMessages((prevMessages) => {
-              const lastMessage = prevMessages[prevMessages.length - 1];
-              if (lastMessage && lastMessage.sender !== user!.displayName!) {
-                lastMessage.content += response!.message!.content;
-                return [
-                  ...prevMessages.slice(0, -1),
-                  {
-                    ...lastMessage,
-                    content: lastMessage.content + response!.message!.content,
-                  },
-                ];
-              } else {
-                return [
-                  ...prevMessages,
-                  {
-                    id: `${messages.length + 1}`,
-                    chatId: chatId,
-                    content: response!.message!.content,
-                    timestamp: new Date().toLocaleString(),
-                    sender: selectedModel,
-                  },
-                ];
-              }
-            });
-        } catch (parseError: unknown) {
-          if (parseError instanceof Error) {
-            const errorMessage = {
-              id: `${messages.length + 1}`,
-              chatId: chatId,
-              content: `The following error occurred while processing your request:\n${parseError.message}\n Please try again.`,
-              timestamp: new Date().toLocaleString(),
-              sender: selectedModel,
-            };
-            setMessages((prevMessages) => [...prevMessages, errorMessage]);
-          }
-        }
+    }
+
+    if (buffer.trim()) {
+      try {
+        const response: ChatStreamCompletionResponse = JSON.parse(buffer);
+        updateMessages(response);
+      } catch (error) {
+        displayError(error);
       }
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-          const errorMessage = {
+    }
+  };
+
+  const updateMessages = (response: ChatStreamCompletionResponse) => {
+    setMessages((prevMessages) => {
+      const lastMessage = prevMessages[prevMessages.length - 1];
+      if (lastMessage && lastMessage.sender !== user!.displayName!) {
+        return [
+          ...prevMessages.slice(0, -1),
+          {
+            ...lastMessage,
+            content: lastMessage.content + response.message!.content,
+          },
+        ];
+      } else {
+        return [
+          ...prevMessages,
+          {
             id: `${messages.length + 1}`,
             chatId: chatId,
-            content: `The following error occurred while processing your request:\n${error.message}\n Please try again.`,
+            content: response.message!.content,
             timestamp: new Date().toLocaleString(),
             sender: selectedModel,
-          };
-          setMessages((prevMessages) => [...prevMessages, errorMessage]);
+          },
+        ];
       }
-    }
+    });
+  };
 
-    };
+  const displayError = (error: unknown) => {
+    if (error instanceof Error) {
+      const errorMessage = {
+        id: `${messages.length + 1}`,
+        chatId: chatId,
+        content: `The following error occurred while processing your request:\n${error.message}\nPlease try again.`,
+        timestamp: new Date().toLocaleString(),
+        sender: selectedModel,
+      };
+      setMessages((prevMessages) => [...prevMessages, errorMessage]);
+    }
+  };
 
   const processSubmit = async (message: string) => {
     const userMessage: Message = {

diff --git a/src/app/components/InitialChatPage.tsx b/src/app/components/InitialChatPage.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import ChatHistoryNavbar from '@/app/components/ChatHistoryNavbar';
-import ChatHeader from './ChatHeader';
+import ChatHistoryNavbar from '@/app/components/chatHistory/ChatHistoryNavbar';
+import ChatHeader from './chat/ChatHeader';
 import InputField from './InputField';
 import { useAuth } from '@/contexts/AuthContext';
 import { useState } from 'react';

diff --git a/src/app/components/LoginPage.tsx b/src/app/components/LoginPage.tsx
@@ -6,7 +6,7 @@ export default function LoginPage() {
   const { signInWithGoogle, error } = useAuth();
 
   return (
-    <main className="flex flex-col items-center justify-center gap-10 h-screen">
+    <main className="flex flex-col items-center justify-center gap-10 h-svh">
       <div>
         <svg
           width="66"

diff --git a/src/app/components/Protected.tsx b/src/app/components/Protected.tsx
@@ -20,7 +20,7 @@ export default function Protected({ children }: ProtectedProps) {
   if (loading) {
     return (
       <div className="h-screen w-screen flex align-middle justify-center">
-        <Spinner width='8' height='8' />
+        <Spinner width='4' height='4' />
       </div>
     );
   }

diff --git a/src/app/components/ChatHeader.tsx → src/app/components/chat/ChatHeader.tsx b/src/app/components/ChatHeader.tsx → src/app/components/chat/ChatHeader.tsx
@@ -1,9 +1,9 @@
 import { useModel } from '@/contexts/ModelContext';
 import { AllModelsResponse } from '@/types/model';
 import { useState, useEffect, useRef } from 'react';
-import Modal from './Modal';
-import ModelInfoModal from './ModelInfoModal';
-import Spinner from './Spinner';
+import Modal from '../modals/Modal';
+import ModelInfoModal from '../modals/ModelInfoModal';
+import Spinner from '../Spinner';
 
 export default function ChatHeader() {
   const { selectedModel, setSelectedModel } = useModel();

diff --git a/src/app/chat/[chatId]/ChatMessage.tsx → src/app/components/chat/ChatMessage.tsx b/src/app/chat/[chatId]/ChatMessage.tsx → src/app/components/chat/ChatMessage.tsx
diff --git a/src/app/components/ChatHistory.tsx → ...pp/components/chatHistory/ChatHistory.tsx b/src/app/components/ChatHistory.tsx → ...pp/components/chatHistory/ChatHistory.tsx
diff --git a/src/app/components/ChatHistoryNavbar.tsx → ...ponents/chatHistory/ChatHistoryNavbar.tsx b/src/app/components/ChatHistoryNavbar.tsx → ...ponents/chatHistory/ChatHistoryNavbar.tsx
@@ -3,11 +3,11 @@ import { useState, useEffect } from 'react';
 import { ChatHistory as History } from '@/types/chat';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
-import Spinner from './Spinner';
+import Spinner from '../Spinner';
 import ChatHistory from './ChatHistory';
-import ModelModal from './ModelModal';
-import EmbedModal from './EmbedModal';
-import Modal from './Modal';
+import ModelModal from '../modals/ModelModal';
+import EmbedModal from '../modals/EmbedModal';
+import Modal from '../modals/Modal';
 
 // TODO: Fix page extending beyond the viewport
 // TODO: Fetch chat history from the server

diff --git a/src/app/components/EmbedModal.tsx → src/app/components/modals/EmbedModal.tsx b/src/app/components/EmbedModal.tsx → src/app/components/modals/EmbedModal.tsx
diff --git a/src/app/components/Modal.tsx → src/app/components/modals/Modal.tsx b/src/app/components/Modal.tsx → src/app/components/modals/Modal.tsx
diff --git a/src/app/components/ModelInfoModal.tsx → src/app/components/modals/ModelInfoModal.tsx b/src/app/components/ModelInfoModal.tsx → src/app/components/modals/ModelInfoModal.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useModel } from '@/contexts/ModelContext';
 import { ModelInfoResponse } from '@/types/model';
-import Spinner from './Spinner';
+import Spinner from '../Spinner';
 
 export default function ModelInfoModal() {
   const { selectedModel } = useModel();

diff --git a/src/app/components/ModelModal.tsx → src/app/components/modals/ModelModal.tsx b/src/app/components/ModelModal.tsx → src/app/components/modals/ModelModal.tsx
@@ -6,7 +6,7 @@ import {
   PullModelResponse,
 } from '@/types/model';
 import { useState, useRef } from 'react';
-import Spinner from './Spinner';
+import Spinner from '../Spinner';
 
 interface ModelModalProps {
   loading: boolean;

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -12,7 +12,7 @@ export default function Home() {
   if (loading) {
     return (
       <div className="h-screen w-screen flex align-middle justify-center">
-        <Spinner width='8' height='8' />
+        <Spinner width='5' height='5' />
       </div>
     );
   }

diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
@@ -63,6 +63,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     setError(null);
     await firebaseSignOut(auth)
       .then(() => {
+        setUser(null);
         router.push('/');
       })
       .catch((error) => {