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/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>