From eb832cc25a359bd2df8fefa58640309248b4ba00 Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Fri, 13 Jun 2025 23:27:46 +0800
Subject: [PATCH] refactor(AddKnowledgePopup, KnowledgeSettingsPopup,
 ModelSettings): enhance select components with consistent icons

- Updated Select components in AddKnowledgePopup and KnowledgeSettingsPopup to include a ChevronDown icon for improved visual consistency.
- Refactored ModelSettings to add ChevronDown icon to Select components, enhancing the overall UI experience.
- Simplified Slider component usage by removing unnecessary styling for a cleaner layout.
---
 .../components/AddKnowledgePopup.tsx          | 23 +++++++-----
 .../components/KnowledgeSettingsPopup.tsx     | 36 ++++++++++---------
 .../settings/ModelSettings/ModelSettings.tsx  |  6 +++-
 3 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx b/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx
index 50c9c80fa1..528f64f41a 100644
--- a/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx
+++ b/src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx
@@ -13,6 +13,7 @@ import { KnowledgeBase, Model } from '@renderer/types'
 import { getErrorMessage } from '@renderer/utils/error'
 import { Flex, Form, Input, InputNumber, Modal, Select, Slider, Switch } from 'antd'
 import { find, sortBy } from 'lodash'
+import { ChevronDown } from 'lucide-react'
 import { nanoid } from 'nanoid'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -182,7 +183,12 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
           label={t('models.embedding_model')}
           tooltip={{ title: t('models.embedding_model_tooltip'), placement: 'right' }}
           rules={[{ required: true, message: t('message.error.enter.model') }]}>
-          <Select style={{ width: '100%' }} options={embeddingSelectOptions} placeholder={t('settings.models.empty')} />
+          <Select
+            style={{ width: '100%' }}
+            options={embeddingSelectOptions}
+            placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
+          />
         </Form.Item>
 
         <Form.Item
@@ -190,7 +196,12 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
           label={t('models.rerank_model')}
           tooltip={{ title: t('models.rerank_model_tooltip'), placement: 'right' }}
           rules={[{ required: false, message: t('message.error.enter.model') }]}>
-          <Select style={{ width: '100%' }} options={rerankSelectOptions} placeholder={t('settings.models.empty')} />
+          <Select
+            style={{ width: '100%' }}
+            options={rerankSelectOptions}
+            placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
+          />
         </Form.Item>
         <SettingHelpText style={{ marginTop: -15, marginBottom: 20 }}>
           {t('models.rerank_model_not_support_provider', {
@@ -202,13 +213,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
           label={t('knowledge.document_count')}
           initialValue={DEFAULT_KNOWLEDGE_DOCUMENT_COUNT} // 设置初始值
           tooltip={{ title: t('knowledge.document_count_help') }}>
-          <Slider
-            style={{ width: '100%' }}
-            min={1}
-            max={30}
-            step={1}
-            marks={{ 1: '1', 6: t('knowledge.document_count_default'), 30: '30' }}
-          />
+          <Slider min={1} max={30} step={1} marks={{ 1: '1', 6: t('knowledge.document_count_default'), 30: '30' }} />
         </Form.Item>
         <Form.Item
           name="autoDims"
diff --git a/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx b/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx
index d994fa9ee1..bd652680ce 100644
--- a/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx
+++ b/src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx
@@ -1,4 +1,4 @@
-import { DownOutlined, WarningOutlined } from '@ant-design/icons'
+import { WarningOutlined } from '@ant-design/icons'
 import { TopView } from '@renderer/components/TopView'
 import { DEFAULT_KNOWLEDGE_DOCUMENT_COUNT } from '@renderer/config/constant'
 import { getEmbeddingMaxContext } from '@renderer/config/embedings'
@@ -10,8 +10,9 @@ import { useProviders } from '@renderer/hooks/useProvider'
 import { SettingHelpText } from '@renderer/pages/settings'
 import { getModelUniqId } from '@renderer/services/ModelService'
 import { KnowledgeBase } from '@renderer/types'
-import { Alert, Form, Input, InputNumber, Modal, Select, Slider } from 'antd'
+import { Alert, Button, Form, Input, InputNumber, Modal, Select, Slider } from 'antd'
 import { sortBy } from 'lodash'
+import { ChevronDown } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -140,7 +141,13 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
           initialValue={getModelUniqId(base.model)}
           tooltip={{ title: t('models.embedding_model_tooltip'), placement: 'right' }}
           rules={[{ required: true, message: t('message.error.enter.model') }]}>
-          <Select style={{ width: '100%' }} options={selectOptions} placeholder={t('settings.models.empty')} disabled />
+          <Select
+            style={{ width: '100%' }}
+            options={selectOptions}
+            placeholder={t('settings.models.empty')}
+            disabled
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
+          />
         </Form.Item>
 
         <Form.Item
@@ -154,6 +161,7 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
             options={rerankSelectOptions}
             placeholder={t('settings.models.empty')}
             allowClear
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
         </Form.Item>
         <SettingHelpText style={{ marginTop: -15, marginBottom: 20 }}>
@@ -166,27 +174,21 @@ const PopupContainer: React.FC<Props> = ({ base: _base, resolve }) => {
           name="documentCount"
           label={t('knowledge.document_count')}
           tooltip={{ title: t('knowledge.document_count_help') }}>
-          <Slider
-            style={{ width: '100%' }}
-            min={1}
-            max={30}
-            step={1}
-            marks={{ 1: '1', 6: t('knowledge.document_count_default'), 30: '30' }}
-          />
+          <Slider min={1} max={30} step={1} marks={{ 1: '1', 6: t('knowledge.document_count_default'), 30: '30' }} />
         </Form.Item>
 
-        <AdvancedSettingsButton onClick={() => setShowAdvanced(!showAdvanced)}>
-          <DownOutlined
+        <Button color="default" variant="filled" onClick={() => setShowAdvanced(!showAdvanced)}>
+          {t('common.advanced_settings')}
+          <ChevronDown
+            size={16}
             style={{
               transform: showAdvanced ? 'rotate(180deg)' : 'rotate(0deg)',
-              transition: 'transform 0.3s',
-              marginRight: 8
+              transition: 'transform 0.3s'
             }}
           />
-          {t('common.advanced_settings')}
-        </AdvancedSettingsButton>
+        </Button>
 
-        <div style={{ display: showAdvanced ? 'block' : 'none' }}>
+        <div style={{ display: showAdvanced ? 'block' : 'none', marginTop: 16 }}>
           <Form.Item
             name="chunkSize"
             label={t('knowledge.chunk_size')}
diff --git a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
index 1003c011d0..f7ff16f517 100644
--- a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
@@ -13,7 +13,7 @@ import { setTranslateModelPrompt } from '@renderer/store/settings'
 import { Model } from '@renderer/types'
 import { Button, Select, Tooltip } from 'antd'
 import { find, sortBy } from 'lodash'
-import { FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
+import { ChevronDown, FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -110,6 +110,7 @@ const ModelSettings: FC = () => {
             options={selectOptions}
             showSearch
             placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
           <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={DefaultAssistantSettings.show} />
         </HStack>
@@ -131,6 +132,7 @@ const ModelSettings: FC = () => {
             options={selectOptions}
             showSearch
             placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
           <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={TopicNamingModalPopup.show} />
         </HStack>
@@ -152,6 +154,7 @@ const ModelSettings: FC = () => {
             options={selectOptions}
             showSearch
             placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
           <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={onUpdateTranslateModel} />
           {translateModelPrompt !== TRANSLATE_PROMPT && (
@@ -178,6 +181,7 @@ const ModelSettings: FC = () => {
             options={selectOptions}
             showSearch
             placeholder={t('settings.models.empty')}
+            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
         </HStack>
         <SettingDescription>{t('settings.models.quick_assistant_model_description')}</SettingDescription>