feat: add openrouter provider

src/renderer/src/config/models.ts

@@ -311,6 +311,48 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       defaultEnabled: true
     }
   ],
+  openrouter: [
+    {
+      id: 'google/gemma-2-9b-it:free',
+      provider: 'openrouter',
+      name: 'Google: Gemma 2 9B',
+      group: 'Gemma',
+      temperature: 0.7,
+      defaultEnabled: true
+    },
+    {
+      id: 'microsoft/phi-3-mini-128k-instruct:free',
+      provider: 'openrouter',
+      name: 'Phi-3 Mini 128K Instruct',
+      group: 'Phi',
+      temperature: 0.7,
+      defaultEnabled: true
+    },
+    {
+      id: 'microsoft/phi-3-medium-128k-instruct:free',
+      provider: 'openrouter',
+      name: 'Phi-3 Medium 128K Instruct',
+      group: 'Phi',
+      temperature: 0.7,
+      defaultEnabled: true
+    },
+    {
+      id: 'meta-llama/llama-3-8b-instruct:free',
+      provider: 'openrouter',
+      name: 'Meta: Llama 3 8B Instruct',
+      group: 'Llama3',
+      temperature: 0.7,
+      defaultEnabled: true
+    },
+    {
+      id: 'mistralai/mistral-7b-instruct:free',
+      provider: 'openrouter',
+      name: 'Mistral: Mistral 7B Instruct',
+      group: 'Mistral',
+      temperature: 0.7,
+      defaultEnabled: true
+    }
+  ],
   groq: [
     {
       id: 'llama3-8b-8192',

src/renderer/src/pages/home/components/Navigation.tsx

@@ -32,7 +32,7 @@ const Navigation: FC<Props> = ({ activeAssistant }) => {
   return (
     <NavbarCenter style={{ border: 'none' }}>
       {activeAssistant?.name}
-      <DropdownMenu menu={{ items }} trigger={['click']}>
+      <DropdownMenu menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' } }} trigger={['click']}>
         <Button size="small" type="primary" ghost style={{ fontSize: '11px' }}>
           {model ? model.name : 'Select Model'}
         </Button>

src/renderer/src/pages/settings/components/ModelListPopup.tsx

@@ -67,7 +67,9 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
               return (
                 <ListItem key={model.id}>
                   <ListItemHeader>
-                    <Avatar src={getModelLogo(model.id)} size={24} />
+                    <Avatar src={getModelLogo(model.id)} size={24}>
+                      {model.name[0].toUpperCase()}
+                    </Avatar>
                     <ListItemName>{model.name}</ListItemName>
                   </ListItemHeader>
                   {hasModel ? (

src/renderer/src/pages/settings/components/ProviderSetting.tsx

@@ -49,7 +49,7 @@ const ProviderSetting: FC<Props> = ({ provider }) => {
         <Switch
           defaultValue={provider.enabled}
           key={provider.id}
-          onChange={(enabled) => updateProvider({ ...provider, enabled })}
+          onChange={(enabled) => updateProvider({ ...provider, apiKey, apiHost, enabled })}
         />
       </SettingTitle>
       <Divider style={{ width: '100%', margin: '10px 0' }} />
@@ -74,7 +74,7 @@ const ProviderSetting: FC<Props> = ({ provider }) => {
           {modelGroups[group].map((model) => (
             <ModelListItem key={model.id}>
               <Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }}>
-                {model.name[0]}
+                {model.name[0].toUpperCase()}
               </Avatar>
               {model.name}
             </ModelListItem>

src/renderer/src/services/provider.ts

@@ -6,6 +6,7 @@ import GroqProviderLogo from '@renderer/assets/images/providers/groq.png'
 import ZhipuProviderLogo from '@renderer/assets/images/providers/zhipu.png'
 import OllamaProviderLogo from '@renderer/assets/images/providers/ollama.png'
 import MoonshotProviderLogo from '@renderer/assets/images/providers/moonshot.jpeg'
+import OpenRouterProviderLogo from '@renderer/assets/images/providers/openrouter.png'
 import ChatGPTModelLogo from '@renderer/assets/images/models/chatgpt.jpeg'
 import ChatGLMModelLogo from '@renderer/assets/images/models/chatglm.jpeg'
 import DeepSeekModelLogo from '@renderer/assets/images/models/deepseek.png'
@@ -15,6 +16,7 @@ import YiModelLogo from '@renderer/assets/images/models/yi.svg'
 import LlamaModelLogo from '@renderer/assets/images/models/llama.jpeg'
 import MixtralModelLogo from '@renderer/assets/images/models/mixtral.jpeg'
 import MoonshotModelLogo from '@renderer/assets/images/providers/moonshot.jpeg'
+import MicrosoftModelLogo from '@renderer/assets/images/models/microsoft.png'
 
 export function getProviderLogo(providerId: string) {
   switch (providerId) {
@@ -34,6 +36,8 @@ export function getProviderLogo(providerId: string) {
       return OllamaProviderLogo
     case 'moonshot':
       return MoonshotProviderLogo
+    case 'openrouter':
+      return OpenRouterProviderLogo
     default:
       return undefined
   }
@@ -49,7 +53,9 @@ export function getModelLogo(modelId: string) {
     'yi-': YiModelLogo,
     llama: LlamaModelLogo,
     mixtral: MixtralModelLogo,
-    moonshot: MoonshotModelLogo
+    mistral: MixtralModelLogo,
+    moonshot: MoonshotModelLogo,
+    phi: MicrosoftModelLogo
   }
 
   for (const key in logoMap) {

src/renderer/src/store/index.ts

@@ -19,7 +19,7 @@ const persistedReducer = persistReducer(
   {
     key: 'cherry-studio',
     storage,
-    version: 5,
+    version: 6,
     blacklist: ['runtime'],
     migrate
   },

src/renderer/src/store/llm.ts

@@ -67,6 +67,15 @@ const initialState: LlmState = {
       isSystem: true,
       enabled: false
     },
+    {
+      id: 'openrouter',
+      name: 'OpenRouter',
+      apiKey: '',
+      apiHost: 'https://openrouter.ai/api/v1/',
+      models: SYSTEM_MODELS.openrouter.filter((m) => m.defaultEnabled),
+      isSystem: true,
+      enabled: false
+    },
     {
       id: 'groq',
       name: 'Groq',

src/renderer/src/store/migrate.ts

@@ -82,6 +82,26 @@ const migrate = createMigrate({
         ]
       }
     }
+  },
+  // @ts-ignore store type is unknown
+  '6': (state: RootState) => {
+    return {
+      ...state,
+      llm: {
+        ...state.llm,
+        providers: [
+          ...state.llm.providers,
+          {
+            id: 'openrouter',
+            name: 'OpenRouter',
+            apiKey: '',
+            apiHost: 'https://openrouter.ai/api/v1/',
+            models: SYSTEM_MODELS.openrouter.filter((m) => m.defaultEnabled),
+            isSystem: true
+          }
+        ]
+      }
+    }
   }
 })