Merge pull request #88 from animalnots/dev

v1.17.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "better-chatgpt",
   "private": true,
-  "version": "1.16.0",
+  "version": "1.17.0",
   "type": "module",
   "homepage": "./",
   "main": "electron/index.cjs",

public/locales/en/model.json

@@ -31,5 +31,30 @@
     "low": "low",
     "high": "high",
     "auto": "auto"
+  },
+  "customModels": {
+    "title": "Custom Models",
+    "addModel": "Add Model",
+    "modelId": "Model ID (e.g. gpt4)",
+    "modelName": "Model Name",
+    "modality": "Model Type",
+    "textOnly": "Text Only",
+    "textAndImage": "Text + Image",
+    "yourCustomModels": "Your Custom Models",
+    "noModels": "No custom models added yet",
+    "remove": "Remove",
+    "advancedSettings": "Advanced Settings",
+    "showAdvanced": "Show Advanced Settings",
+    "hideAdvanced": "Hide Advanced Settings",
+    "contextLength": "Context Length (max tokens)",
+    "maxCompletionTokens": "Max Completion Tokens",
+    "pricing": "Pricing (USD)",
+    "promptPrice": "Prompt Price (per token)",
+    "completionPrice": "Completion Price (per token)",
+    "imagePrice": "Image Price (per image)",
+    "requestPrice": "Request Base Price",
+    "customLabel": "(custom)",
+    "streamSupported": "Stream Support",
+    "streamSupportedDescription": "Enable streaming for real-time response generation"
   }
 }

src/components/Chat/ChatContent/ChatTitle.tsx

@@ -8,6 +8,7 @@ import { _defaultChatConfig } from '@constants/chat';
 
 const ChatTitle = React.memo(() => {
   const { t } = useTranslation('model');
+  const customModels = useStore((state) => state.customModels);
   const chat = useStore(
     (state) =>
       state.chats &&
@@ -38,6 +39,15 @@ const ChatTitle = React.memo(() => {
     setChats(updatedChats);
   };
 
+  const getModelDisplayName = (modelId: string) => {
+    const isCustom = customModels.some(m => m.id === modelId);
+    if (isCustom) {
+      const customModel = customModels.find(m => m.id === modelId);
+      return `${customModel?.name} ${t('customModels.customLabel', { ns: 'model' })}`;
+    }
+    return modelId;
+  };
+
   // for migrating from old ChatInterface to new ChatInterface (with config)
   useEffect(() => {
     const chats = useStore.getState().chats;
@@ -57,7 +67,7 @@ const ChatTitle = React.memo(() => {
         }}
       >
         <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
-          {t('model')}: {chat.config.model}
+          {t('model')}: {getModelDisplayName(chat.config.model)}
         </div>
         <div className='text-center p-1 rounded-md bg-gray-300/20 dark:bg-gray-900/10 hover:bg-gray-300/50 dark:hover:bg-gray-900/50'>
           {t('token.label')}: {chat.config.max_tokens}

src/components/ConfigMenu/ConfigMenu.tsx

@@ -5,6 +5,7 @@ import { ConfigInterface, ImageDetail } from '@type/chat';
 import Select from 'react-select';
 import { modelOptions, modelMaxToken } from '@constants/modelLoader';
 import { ModelOptions } from '@utils/modelReader';
+import useStore from '@store/store';
 
 const ConfigMenu = ({
   setIsModalOpen,
@@ -94,12 +95,26 @@ export const ModelSelector = ({
   _setModel: React.Dispatch<React.SetStateAction<ModelOptions>>;
   _label: string;
 }) => {
-  const { t } = useTranslation('model');
+  const { t } = useTranslation(['main', 'model']);
+  const [localModelOptions, setLocalModelOptions] = useState<string[]>(modelOptions);
+  const customModels = useStore((state) => state.customModels);
+
+  // Update model options when custom models change
+  useEffect(() => {
+    const customModelIds = customModels.map(model => model.id);
+    const defaultModelIds = modelOptions.filter(id => !customModelIds.includes(id));
+    setLocalModelOptions([...customModelIds, ...defaultModelIds]);
+  }, [customModels]);
+
+  const modelOptionsFormatted = localModelOptions.map((model) => {
+    const isCustom = customModels.some(m => m.id === model);
+    const customModel = customModels.find(m => m.id === model);
+    return {
+      value: model,
+      label: isCustom ? `${customModel?.name} ${t('customModels.customLabel', { ns: 'model' })}` : model,
+    };
+  });
 
-  const modelOptionsFormatted = modelOptions.map((model) => ({
-    value: model,
-    label: model,
-  }));
   const customStyles = {
     control: (provided: any) => ({
       ...provided,
@@ -138,7 +153,12 @@ export const ModelSelector = ({
         {_label}
       </label>
       <Select
-        value={{ value: _model, label: _model }}
+        value={{
+          value: _model,
+          label: customModels.some(m => m.id === _model) 
+            ? `${customModels.find(m => m.id === _model)?.name} ${t('customModels.customLabel', { ns: 'model' })}` 
+            : _model,
+        }}
         onChange={(selectedOption) =>
           _setModel(selectedOption?.value as ModelOptions)
         }