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

components/Chat/Chat.tsx

@@ -1,4 +1,4 @@
-import { Message, OpenAIModel, OpenAIModelNames } from "@/types";
+import { Conversation, Message, OpenAIModel } from "@/types";
 import { FC, useEffect, useRef } from "react";
 import { ChatInput } from "./ChatInput";
 import { ChatLoader } from "./ChatLoader";
@@ -6,16 +6,16 @@ import { ChatMessage } from "./ChatMessage";
 import { ModelSelect } from "./ModelSelect";
 
 interface Props {
-  model: OpenAIModel;
-  messages: Message[];
+  conversation: Conversation;
+  models: OpenAIModel[];
   messageIsStreaming: boolean;
   loading: boolean;
   lightMode: "light" | "dark";
   onSend: (message: Message) => void;
-  onSelect: (model: OpenAIModel) => void;
+  onModelChange: (conversation: Conversation, model: OpenAIModel) => void;
 }
 
-export const Chat: FC<Props> = ({ model, messages, messageIsStreaming, loading, lightMode, onSend, onSelect }) => {
+export const Chat: FC<Props> = ({ conversation, models, messageIsStreaming, loading, lightMode, onSend, onModelChange }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {
@@ -24,27 +24,28 @@ export const Chat: FC<Props> = ({ model, messages, messageIsStreaming, loading,
 
   useEffect(() => {
     scrollToBottom();
-  }, [messages]);
+  }, [conversation.messages]);
 
   return (
     <div className="flex-1 overflow-scroll dark:bg-[#343541]">
       <div>
-        {messages.length === 0 ? (
+        {conversation.messages.length === 0 ? (
           <>
             <div className="flex justify-center pt-8">
               <ModelSelect
-                model={model}
-                onSelect={onSelect}
+                model={conversation.model}
+                models={models}
+                onModelChange={(model) => onModelChange(conversation, model)}
               />
             </div>
 
-            <div className="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">Chatbot UI</div>
+            <div className="text-4xl text-center text-neutral-600 dark:text-neutral-200 pt-[160px] sm:pt-[280px]">{loading ? "Loading..." : "Chatbot UI"}</div>
           </>
         ) : (
           <>
-            <div className="flex justify-center py-2 text-neutral-500 bg-neutral-100 dark:bg-[#444654] dark:text-neutral-200 text-sm border border-b-neutral-300 dark:border-none">Model: {OpenAIModelNames[model]}</div>
+            <div className="flex justify-center py-2 text-neutral-500 bg-neutral-100 dark:bg-[#444654] dark:text-neutral-200 text-sm border border-b-neutral-300 dark:border-none">Model: {conversation.model.name}</div>
 
-            {messages.map((message, index) => (
+            {conversation.messages.map((message, index) => (
               <ChatMessage
                 key={index}
                 message={message}

components/Chat/ModelSelect.tsx

@@ -1,27 +1,30 @@
-import { OpenAIModel, OpenAIModelNames } from "@/types";
+import { OpenAIModel } from "@/types";
 import { FC } from "react";
 
 interface Props {
   model: OpenAIModel;
-  onSelect: (model: OpenAIModel) => void;
+  models: OpenAIModel[];
+  onModelChange: (model: OpenAIModel) => void;
 }
 
-export const ModelSelect: FC<Props> = ({ model, onSelect }) => {
+export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
   return (
     <div className="flex flex-col">
       <label className="text-left mb-2 dark:text-neutral-400 text-neutral-700">Model</label>
       <select
         className="w-[300px] p-3 dark:text-white dark:bg-[#343541] border border-neutral-500 rounded-lg appearance-none focus:shadow-outline text-neutral-900 cursor-pointer"
         placeholder="Select a model"
-        value={model}
-        onChange={(e) => onSelect(e.target.value as OpenAIModel)}
+        value={model.id}
+        onChange={(e) => {
+          onModelChange(models.find((model) => model.id === e.target.value) as OpenAIModel);
+        }}
       >
-        {Object.entries(OpenAIModelNames).map(([value, name]) => (
+        {models.map((model) => (
           <option
-            key={value}
-            value={value}
+            key={model.id}
+            value={model.id}
           >
-            {name}
+            {model.name}
           </option>
         ))}
       </select>