Enable Custom Models

src/components/ConfigMenu/ConfigMenu.tsx

@@ -79,6 +79,15 @@ export const ModelSelector = ({
   _setModel: React.Dispatch<React.SetStateAction<ModelOptions>>;
 }) => {
   const [dropDown, setDropDown] = useState<boolean>(false);
+  const [customModel, setCustomModel] = useState<string>('');
+
+  const handleCustomModelSubmit = () => {
+    if (customModel.trim()) {
+      _setModel(customModel);
+      setDropDown(false);
+      setCustomModel(''); // Clear input after setting model
+    }
+  };
 
   return (
     <div className='mb-4'>
@@ -111,8 +120,21 @@ export const ModelSelector = ({
               key={m}
             >
               {m}
-            </li>
+            </li> 
           ))}
+          <li className='px-4 py-2'>
+            <input
+              type="text"
+              value={customModel}
+              placeholder="Enter custom model..."
+              onChange={(e) => setCustomModel(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleCustomModelSubmit()}
+              className="border rounded w-full py-2 px-3"
+            />
+            <button onClick={handleCustomModelSubmit} className="mt-2">
+              Submit
+            </button>
+          </li>
         </ul>
       </div>
     </div>
@@ -150,7 +172,9 @@ export const MaxTokenSlider = ({
           _setMaxToken(Number(e.target.value));
         }}
         min={0}
-        max={modelMaxToken[_model]}
+
+
+        max={modelMaxToken[_model as keyof typeof modelMaxToken]}
         step={1}
         className='w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer'
       />

src/components/TokenCount/TokenCount.tsx

@@ -21,11 +21,14 @@ const TokenCount = React.memo(() => {
   );
 
   const cost = useMemo(() => {
-    const price =
-      modelCost[model].prompt.price *
-      (tokenCount / modelCost[model].prompt.unit);
-    return price.toPrecision(3);
+    const currentModelCost = modelCost[model as keyof typeof modelCost];
+    if (currentModelCost && currentModelCost.prompt) {
+      const price = currentModelCost.prompt.price * (tokenCount / currentModelCost.prompt.unit);
+      return price.toPrecision(3);
+    }
+    return "0";
   }, [model, tokenCount]);
+
 
   useEffect(() => {
     if (!generating) setTokenCount(countTokens(messages, model));

src/constants/chat.ts

@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
-import { ChatInterface, ConfigInterface, ModelOptions } from '@type/chat';
+import { ChatInterface, ConfigInterface, ModelOptions, ModelMaxToken  } from '@type/chat';
 import useStore from '@store/store';
 
 const date = new Date();
@@ -29,7 +29,7 @@ export const modelOptions: ModelOptions[] = [
 
 export const defaultModel = 'gpt-3.5-turbo';
 
-export const modelMaxToken = {
+export const modelMaxToken: ModelMaxToken = {
   'gpt-3.5-turbo': 4096,
   'gpt-3.5-turbo-0301': 4096,
   'gpt-3.5-turbo-0613': 4096,

src/types/chat.ts

@@ -49,11 +49,16 @@ export interface Folder {
   color?: string;
 }
 
-export type ModelOptions = 'gpt-4' | 'gpt-4-32k' | 'gpt-3.5-turbo' | 'gpt-3.5-turbo-16k' ;
+export type ModelOptions = 'gpt-4' | 'gpt-4-32k' | 'gpt-3.5-turbo' | 'gpt-3.5-turbo-16k' | string;
 // | 'gpt-3.5-turbo-0301';
 // | 'gpt-4-0314'
 // | 'gpt-4-32k-0314'
 
+export type ModelMaxToken = {
+  [key in ModelOptions]: number;
+};
+
+
 export type TotalTokenUsed = {
   [model in ModelOptions]?: {
     promptTokens: number;