feat: update system tray icon functionality and ui

src/renderer/src/i18n/locales/en-us.json

@@ -332,7 +332,7 @@
       "about.license.button": "License",
       "about.contact.button": "Email",
       "proxy.title": "Proxy Address",
-      "tray.title": "Tray Icon",
+      "tray.title": "Enable System Tray Icon",
       "theme.title": "Theme",
       "theme.dark": "Dark",
       "theme.light": "Light",

src/renderer/src/i18n/locales/zh-cn.json

@@ -320,7 +320,7 @@
       "about.license.button": "查看",
       "about.contact.button": "邮件",
       "proxy.title": "代理地址",
-      "tray.title": "任务栏图标",
+      "tray.title": "启用系统托盘图标",
       "theme.title": "主题",
       "theme.dark": "深色主题",
       "theme.light": "浅色主题",

src/renderer/src/i18n/locales/zh-tw.json

@@ -320,7 +320,7 @@
       "about.license.button": "查看",
       "about.contact.button": "郵件",
       "proxy.title": "代理地址",
-      "tray.title": "工作列圖示",
+      "tray.title": "啟用系統托盤圖標",
       "theme.title": "主題",
       "theme.dark": "深色主題",
       "theme.light": "淺色主題",

src/renderer/src/pages/settings/AssistantSettings.tsx

@@ -1,15 +1,16 @@
 import { QuestionCircleOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
+import { TopView } from '@renderer/components/TopView'
 import { DEFAULT_CONTEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { AssistantSettings as AssistantSettingsType } from '@renderer/types'
-import { Button, Col, Input, InputNumber, Row, Slider, Switch, Tooltip } from 'antd'
+import { Button, Col, Input, InputNumber, Modal, Row, Slider, Switch, Tooltip } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { Dispatch, FC, SetStateAction, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import { SettingContainer, SettingDivider, SettingSubtitle, SettingTitle } from '.'
+import { SettingContainer, SettingSubtitle } from '.'
 
 const AssistantSettings: FC = () => {
   const { defaultAssistant, updateDefaultAssistant } = useDefaultAssistant()
@@ -66,9 +67,7 @@ const AssistantSettings: FC = () => {
   }
 
   return (
-    <SettingContainer>
-      <SettingTitle>{t('settings.assistant.title')}</SettingTitle>
-      <SettingDivider />
+    <SettingContainer style={{ height: 'auto' }}>
       <SettingSubtitle style={{ marginTop: 0 }}>{t('common.name')}</SettingSubtitle>
       <Input
         placeholder={t('common.assistant') + t('common.name')}
@@ -202,6 +201,61 @@ const AssistantSettings: FC = () => {
   )
 }
 
+interface Props {
+  resolve: (data: any) => void
+}
+
+const PopupContainer: React.FC<Props> = ({ resolve }) => {
+  const [open, setOpen] = useState(true)
+  const { t } = useTranslation()
+
+  const onOk = () => {
+    setOpen(false)
+  }
+
+  const onCancel = () => {
+    setOpen(false)
+  }
+
+  const onClose = () => {
+    resolve({})
+  }
+
+  return (
+    <Modal
+      title={t('settings.assistant.title')}
+      open={open}
+      onOk={onOk}
+      onCancel={onCancel}
+      afterClose={onClose}
+      centered
+      width={800}
+      footer={null}>
+      <AssistantSettings />
+    </Modal>
+  )
+}
+
+export default class AssistantSettingsPopup {
+  static topviewId = 0
+  static hide() {
+    TopView.hide('AssistantSettingsPopup')
+  }
+  static show() {
+    return new Promise<any>((resolve) => {
+      TopView.show(
+        <PopupContainer
+          resolve={(v) => {
+            resolve(v)
+            this.hide()
+          }}
+        />,
+        'AssistantSettingsPopup'
+      )
+    })
+  }
+}
+
 const Label = styled.p`
   margin: 0;
   font-size: 14px;
@@ -213,5 +267,3 @@ const QuestionIcon = styled(QuestionCircleOutlined)`
   cursor: pointer;
   color: var(--color-text-3);
 `
-
-export default AssistantSettings

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

@@ -1,14 +1,16 @@
-import { EditOutlined, MessageOutlined, TranslationOutlined } from '@ant-design/icons'
+import { EditOutlined, MessageOutlined, SettingOutlined, TranslationOutlined } from '@ant-design/icons'
+import { HStack } from '@renderer/components/Layout'
 import { useDefaultModel } from '@renderer/hooks/useAssistant'
 import { useProviders } from '@renderer/hooks/useProvider'
 import { getModelUniqId, hasModel } from '@renderer/services/ModelService'
 import { Model } from '@renderer/types'
-import { Select } from 'antd'
+import { Button, Select } from 'antd'
 import { find, sortBy } from 'lodash'
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingContainer, SettingDivider, SettingTitle } from '.'
+import AssistantSettingsPopup from './AssistantSettings'
 
 const ModelSettings: FC = () => {
   const { defaultModel, topicNamingModel, translateModel, setDefaultModel, setTopicNamingModel, setTranslateModel } =
@@ -52,14 +54,17 @@ const ModelSettings: FC = () => {
         </div>
       </SettingTitle>
       <SettingDivider />
-      <Select
-        value={defaultModelValue}
-        defaultValue={defaultModelValue}
-        style={{ width: 360 }}
-        onChange={(value) => setDefaultModel(find(allModels, JSON.parse(value)) as Model)}
-        options={selectOptions}
-        placeholder={t('settings.models.empty')}
-      />
+      <HStack alignItems="center">
+        <Select
+          value={defaultModelValue}
+          defaultValue={defaultModelValue}
+          style={{ width: 360 }}
+          onChange={(value) => setDefaultModel(find(allModels, JSON.parse(value)) as Model)}
+          options={selectOptions}
+          placeholder={t('settings.models.empty')}
+        />
+        <Button icon={<SettingOutlined />} style={{ marginLeft: 8 }} onClick={() => AssistantSettingsPopup.show()} />
+      </HStack>
       <div style={{ height: 30 }} />
       <SettingTitle>
         <div>

src/renderer/src/pages/settings/SettingsPage.tsx

@@ -1,11 +1,4 @@
-import {
-  CloudOutlined,
-  InfoCircleOutlined,
-  MacCommandOutlined,
-  MessageOutlined,
-  SaveOutlined,
-  SettingOutlined
-} from '@ant-design/icons'
+import { CloudOutlined, InfoCircleOutlined, MacCommandOutlined, SaveOutlined, SettingOutlined } from '@ant-design/icons'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { isLocalAi } from '@renderer/config/env'
 import { FC } from 'react'
@@ -14,7 +7,6 @@ import { Link, Route, Routes, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
 
 import AboutSettings from './AboutSettings'
-import AssistantSettings from './AssistantSettings'
 import DataSettings from './DataSettings/DataSettings'
 import GeneralSettings from './GeneralSettings'
 import ModelSettings from './ModelSettings'
@@ -50,12 +42,6 @@ const SettingsPage: FC = () => {
               </MenuItemLink>
             </>
           )}
-          <MenuItemLink to="/settings/assistant">
-            <MenuItem className={isRoute('/settings/assistant')}>
-              <MessageOutlined />
-              {t('settings.assistant')}
-            </MenuItem>
-          </MenuItemLink>
           <MenuItemLink to="/settings/general">
             <MenuItem className={isRoute('/settings/general')}>
               <SettingOutlined />
@@ -85,7 +71,6 @@ const SettingsPage: FC = () => {
           <Routes>
             <Route path="provider" element={<ProvidersList />} />
             <Route path="model" element={<ModelSettings />} />
-            <Route path="assistant" element={<AssistantSettings />} />
             <Route path="general/*" element={<GeneralSettings />} />
             <Route path="data/*" element={<DataSettings />} />
             <Route path="shortcut" element={<ShortcutSettings />} />