refactor: Improve code reusability and model service logic

- Improved code reusability in ModelSettings component by utilizing the hasModel function and Memoization.
- Refactored model service to include logic for checking if a model exists and retrieving its unique ID.

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

@@ -1,11 +1,11 @@
 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 { getModelUniqId, hasModel } from '@renderer/services/model'
 import { Model } from '@renderer/types'
 import { Select } from 'antd'
 import { find, sortBy, upperFirst } from 'lodash'
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingContainer, SettingDivider, SettingTitle } from '.'
@@ -28,6 +28,21 @@ const ModelSettings: FC = () => {
       }))
     }))
 
+  const defaultModelValue = useMemo(
+    () => (hasModel(defaultModel) ? getModelUniqId(defaultModel) : undefined),
+    [defaultModel]
+  )
+
+  const defaultTopicNamingModel = useMemo(
+    () => (hasModel(topicNamingModel) ? getModelUniqId(topicNamingModel) : undefined),
+    [topicNamingModel]
+  )
+
+  const defaultTranslateModel = useMemo(
+    () => (hasModel(translateModel) ? getModelUniqId(translateModel) : undefined),
+    [translateModel]
+  )
+
   return (
     <SettingContainer>
       <SettingTitle>
@@ -38,10 +53,12 @@ const ModelSettings: FC = () => {
       </SettingTitle>
       <SettingDivider />
       <Select
-        defaultValue={getModelUniqId(defaultModel)}
+        value={defaultModelValue}
+        defaultValue={defaultModelValue}
         style={{ width: 360 }}
         onChange={(value) => setDefaultModel(find(allModels, JSON.parse(value)) as Model)}
         options={selectOptions}
+        placeholder={t('settings.models.empty')}
       />
       <div style={{ height: 30 }} />
       <SettingTitle>
@@ -52,10 +69,12 @@ const ModelSettings: FC = () => {
       </SettingTitle>
       <SettingDivider />
       <Select
-        defaultValue={topicNamingModel.id}
+        value={defaultTopicNamingModel}
+        defaultValue={defaultTopicNamingModel}
         style={{ width: 360 }}
-        onChange={(id) => setTopicNamingModel(find(allModels, { id }) as Model)}
+        onChange={(value) => setTopicNamingModel(find(allModels, JSON.parse(value)) as Model)}
         options={selectOptions}
+        placeholder={t('settings.models.empty')}
       />
       <div style={{ height: 30 }} />
       <SettingTitle>
@@ -66,9 +85,10 @@ const ModelSettings: FC = () => {
       </SettingTitle>
       <SettingDivider />
       <Select
-        defaultValue={translateModel?.id}
+        value={defaultTranslateModel}
+        defaultValue={defaultTranslateModel}
         style={{ width: 360 }}
-        onChange={(id) => setTranslateModel(find(allModels, { id }) as Model)}
+        onChange={(value) => setTranslateModel(find(allModels, JSON.parse(value)) as Model)}
         options={selectOptions}
         placeholder={t('settings.models.empty')}
       />

src/renderer/src/services/model.ts

@@ -1,6 +1,16 @@
+import store from '@renderer/store'
 import { Model } from '@renderer/types'
 import { pick } from 'lodash'
 
-export const getModelUniqId = (m: Model) => {
-  return JSON.stringify(pick(m, ['id', 'provider']))
+export const getModelUniqId = (m?: Model) => {
+  return m?.id ? JSON.stringify(pick(m, ['id', 'provider'])) : ''
+}
+
+export const hasModel = (m?: Model) => {
+  const allModels = store
+    .getState()
+    .llm.providers.map((p) => p.models)
+    .flat()
+
+  return allModels.find((model) => model.id === m?.id)
 }