Add GPT-4 support (#25)

* mobile ui updates

* fixes sidebar btn

* return if null

* mobile input blur

* handle mobile enter key

* new convo name

* new delete mechanism

* test height

* revert

* change padding

* remove overflow

* check relative

* padding

* done

* retry

* test

* test

* should work now

* test

* test

* more

* max h

* revert

* done

pages/api/chat.ts

@@ -1,5 +1,5 @@
 import { Message, OpenAIModel } from "@/types";
-import { OpenAIStream } from "@/utils";
+import { OpenAIStream } from "@/utils/server";
 
 export const config = {
   runtime: "edge"
@@ -23,7 +23,7 @@ const handler = async (req: Request): Promise<Response> => {
         break;
       }
       charCount += message.content.length;
-      messagesToSend = [message, ...messagesToSend]
+      messagesToSend = [message, ...messagesToSend];
     }
 
     const stream = await OpenAIStream(model, key, messagesToSend);

pages/api/models.ts

@@ -0,0 +1,46 @@
+import { OpenAIModel, OpenAIModelID, OpenAIModels } from "@/types";
+
+export const config = {
+  runtime: "edge"
+};
+
+const handler = async (req: Request): Promise<Response> => {
+  try {
+    const { key } = (await req.json()) as {
+      key: string;
+    };
+
+    const response = await fetch("https://api.openai.com/v1/models", {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${key ? key : process.env.OPENAI_API_KEY}`
+      }
+    });
+
+    if (response.status !== 200) {
+      throw new Error("OpenAI API returned an error");
+    }
+
+    const json = await response.json();
+
+    const models: OpenAIModel[] = json.data
+      .map((model: any) => {
+        for (const [key, value] of Object.entries(OpenAIModelID)) {
+          if (value === model.id) {
+            return {
+              id: model.id,
+              name: OpenAIModels[value].name
+            };
+          }
+        }
+      })
+      .filter(Boolean);
+
+    return new Response(JSON.stringify(models), { status: 200 });
+  } catch (error) {
+    console.error(error);
+    return new Response("Error", { status: 500 });
+  }
+};
+
+export default handler;

pages/index.tsx

@@ -1,7 +1,8 @@
 import { Chat } from "@/components/Chat/Chat";
 import { Navbar } from "@/components/Mobile/Navbar";
 import { Sidebar } from "@/components/Sidebar/Sidebar";
-import { Conversation, Message, OpenAIModel } from "@/types";
+import { Conversation, Message, OpenAIModel, OpenAIModelID, OpenAIModels } from "@/types";
+import { cleanConversationHistory, cleanSelectedConversation } from "@/utils/app";
 import { IconArrowBarLeft, IconArrowBarRight } from "@tabler/icons-react";
 import Head from "next/head";
 import { useEffect, useState } from "react";
@@ -10,7 +11,7 @@ export default function Home() {
   const [conversations, setConversations] = useState<Conversation[]>([]);
   const [selectedConversation, setSelectedConversation] = useState<Conversation>();
   const [loading, setLoading] = useState<boolean>(false);
-  const [model, setModel] = useState<OpenAIModel>(OpenAIModel.GPT_3_5);
+  const [models, setModels] = useState<OpenAIModel[]>([]);
   const [lightMode, setLightMode] = useState<"dark" | "light">("dark");
   const [messageIsStreaming, setMessageIsStreaming] = useState<boolean>(false);
   const [showSidebar, setShowSidebar] = useState<boolean>(true);
@@ -33,7 +34,7 @@ export default function Home() {
           "Content-Type": "application/json"
         },
         body: JSON.stringify({
-          model,
+          model: updatedConversation.model,
           messages: updatedConversation.messages,
           key: apiKey
         })
@@ -47,6 +48,8 @@ export default function Home() {
       const data = response.body;
 
       if (!data) {
+        setLoading(false);
+        setMessageIsStreaming(false);
         return;
       }
 
@@ -144,13 +147,35 @@ export default function Home() {
     localStorage.setItem("selectedConversation", JSON.stringify(updatedConversation));
   };
 
+  const handleChangeModel = (conversation: Conversation, model: OpenAIModel) => {
+    const updatedConversation = {
+      ...conversation,
+      model
+    };
+
+    const updatedConversations = conversations.map((c) => {
+      if (c.id === updatedConversation.id) {
+        return updatedConversation;
+      }
+
+      return c;
+    });
+
+    setConversations(updatedConversations);
+    localStorage.setItem("conversationHistory", JSON.stringify(updatedConversations));
+
+    setSelectedConversation(updatedConversation);
+    localStorage.setItem("selectedConversation", JSON.stringify(updatedConversation));
+  };
+
   const handleNewConversation = () => {
     const lastConversation = conversations[conversations.length - 1];
 
     const newConversation: Conversation = {
       id: lastConversation ? lastConversation.id + 1 : 1,
       name: `Conversation ${lastConversation ? lastConversation.id + 1 : 1}`,
-      messages: []
+      messages: [],
+      model: OpenAIModels[OpenAIModelID.GPT_3_5]
     };
 
     const updatedConversations = [...conversations, newConversation];
@@ -160,7 +185,6 @@ export default function Home() {
     setSelectedConversation(newConversation);
     localStorage.setItem("selectedConversation", JSON.stringify(newConversation));
 
-    setModel(OpenAIModel.GPT_3_5);
     setLoading(false);
   };
 
@@ -181,7 +205,8 @@ export default function Home() {
       setSelectedConversation({
         id: 1,
         name: "New conversation",
-        messages: []
+        messages: [],
+        model: OpenAIModels[OpenAIModelID.GPT_3_5]
       });
       localStorage.removeItem("selectedConversation");
     }
@@ -192,6 +217,27 @@ export default function Home() {
     localStorage.setItem("apiKey", apiKey);
   };
 
+  const fetchModels = async () => {
+    setLoading(true);
+
+    const response = await fetch("/api/models", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        key: apiKey
+      })
+    });
+    const data = await response.json();
+
+    if (data) {
+      setModels(data);
+    }
+
+    setLoading(false);
+  };
+
   useEffect(() => {
     const theme = localStorage.getItem("theme");
     if (theme) {
@@ -208,21 +254,27 @@ export default function Home() {
     }
 
     const conversationHistory = localStorage.getItem("conversationHistory");
-
     if (conversationHistory) {
-      setConversations(JSON.parse(conversationHistory));
+      const parsedConversationHistory: Conversation[] = JSON.parse(conversationHistory);
+      const cleanedConversationHistory = cleanConversationHistory(parsedConversationHistory);
+      setConversations(cleanedConversationHistory);
     }
 
     const selectedConversation = localStorage.getItem("selectedConversation");
     if (selectedConversation) {
-      setSelectedConversation(JSON.parse(selectedConversation));
+      const parsedSelectedConversation: Conversation = JSON.parse(selectedConversation);
+      const cleanedSelectedConversation = cleanSelectedConversation(parsedSelectedConversation);
+      setSelectedConversation(cleanedSelectedConversation);
     } else {
       setSelectedConversation({
         id: 1,
         name: "New conversation",
-        messages: []
+        messages: [],
+        model: OpenAIModels[OpenAIModelID.GPT_3_5]
       });
     }
+
+    fetchModels();
   }, []);
 
   return (
@@ -242,7 +294,6 @@ export default function Home() {
           href="/favicon.ico"
         />
       </Head>
-
       {selectedConversation && (
         <div className={`flex flex-col h-screen w-screen text-white ${lightMode}`}>
           <div className="sm:hidden w-full fixed top-0">
@@ -283,13 +334,13 @@ export default function Home() {
             )}
 
             <Chat
+              conversation={selectedConversation}
               messageIsStreaming={messageIsStreaming}
-              model={model}
-              messages={selectedConversation.messages}
+              models={models}
               loading={loading}
               lightMode={lightMode}
               onSend={handleSend}
-              onSelect={setModel}
+              onModelChange={handleChangeModel}
             />
           </div>
         </div>