feat: Improved model selection and unique id generation

- Improved dropdown menu selection logic for models.
- Changes improve ModelSettings component to use getModelUniqId function for model identifiers.
- Added modeling service functionality to generate unique model identifiers.

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

@@ -1,5 +1,6 @@
 import { getModelLogo } from '@renderer/config/provider'
 import { useProviders } from '@renderer/hooks/useProvider'
+import { getModelUniqId } from '@renderer/services/model'
 import { Model } from '@renderer/types'
 import { Avatar, Dropdown, DropdownProps, MenuProps } from 'antd'
 import { first, reverse, sortBy, upperFirst } from 'lodash'
@@ -23,9 +24,9 @@ const SelectModelDropdown: FC<Props & PropsWithChildren> = ({ children, model, o
       label: p.isSystem ? t(`provider.${p.id}`) : p.name,
       type: 'group',
       children: reverse(sortBy(p.models, 'name')).map((m) => ({
-        key: m?.id,
+        key: getModelUniqId(m),
         label: upperFirst(m?.name),
-        defaultSelectedKeys: [model?.id],
+        defaultSelectedKeys: model ? [getModelUniqId(model)] : [],
         icon: (
           <Avatar src={getModelLogo(m?.id || '')} size={24}>
             {first(m?.name)}
@@ -37,7 +38,11 @@ const SelectModelDropdown: FC<Props & PropsWithChildren> = ({ children, model, o
 
   return (
     <DropdownMenu
-      menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' }, selectedKeys: model ? [model.id] : [] }}
+      menu={{
+        items,
+        style: { maxHeight: '80vh', overflow: 'auto' },
+        selectedKeys: model ? [getModelUniqId(model)] : []
+      }}
       trigger={['click']}
       arrow
       placement="bottom"

src/renderer/src/pages/settings/ModelSettings.tsx

@@ -1,6 +1,7 @@
 import { EditOutlined, MessageOutlined, TranslationOutlined } from '@ant-design/icons'
 import { useDefaultModel } from '@renderer/hooks/useAssistant'
 import { useProviders } from '@renderer/hooks/useProvider'
+import { getModelUniqId } from '@renderer/services/model'
 import { Model } from '@renderer/types'
 import { Select } from 'antd'
 import { find, sortBy, upperFirst } from 'lodash'
@@ -23,12 +24,10 @@ const ModelSettings: FC = () => {
       title: p.name,
       options: sortBy(p.models, 'name').map((m) => ({
         label: upperFirst(m.name),
-        value: m.id
+        value: getModelUniqId(m)
       }))
     }))
 
-  const iconStyle = { fontSize: 16, marginRight: 8 }
-
   return (
     <SettingContainer>
       <SettingTitle>
@@ -39,9 +38,9 @@ const ModelSettings: FC = () => {
       </SettingTitle>
       <SettingDivider />
       <Select
-        defaultValue={defaultModel.id}
+        defaultValue={getModelUniqId(defaultModel)}
         style={{ width: 360 }}
-        onChange={(id) => setDefaultModel(find(allModels, { id }) as Model)}
+        onChange={(value) => setDefaultModel(find(allModels, JSON.parse(value)) as Model)}
         options={selectOptions}
       />
       <div style={{ height: 30 }} />
@@ -77,4 +76,6 @@ const ModelSettings: FC = () => {
   )
 }
 
+const iconStyle = { fontSize: 16, marginRight: 8 }
+
 export default ModelSettings

src/renderer/src/services/model.ts

@@ -0,0 +1,6 @@
+import { Model } from '@renderer/types'
+import { pick } from 'lodash'
+
+export const getModelUniqId = (m: Model) => {
+  return JSON.stringify(pick(m, ['id', 'provider']))
+}