style(antd): Optimize antd components through patch method (#7683)

* fix(dependencies): update antd to patch version 5.24.7 and apply custom patch

* refactor(AddAgentPopup): remove unused ChevronDown import

* feat(AntdProvider): add paddingXS to Dropdown component for improved layout

.yarn/patches/antd-npm-5.24.7-356a553ae5.patch

@@ -0,0 +1,69 @@
+diff --git a/es/dropdown/dropdown.js b/es/dropdown/dropdown.js
+index 986877a762b9ad0aca596a8552732cd12d2eaabb..1f18aa2ea745e68950e4cee16d4d655f5c835fd5 100644
+--- a/es/dropdown/dropdown.js
++++ b/es/dropdown/dropdown.js
+@@ -2,7 +2,7 @@
+ 
+ import * as React from 'react';
+ import LeftOutlined from "@ant-design/icons/es/icons/LeftOutlined";
+-import RightOutlined from "@ant-design/icons/es/icons/RightOutlined";
++import { ChevronRight } from 'lucide-react';
+ import classNames from 'classnames';
+ import RcDropdown from 'rc-dropdown';
+ import useEvent from "rc-util/es/hooks/useEvent";
+@@ -158,8 +158,10 @@ const Dropdown = props => {
+         className: `${prefixCls}-menu-submenu-arrow`
+       }, direction === 'rtl' ? (/*#__PURE__*/React.createElement(LeftOutlined, {
+         className: `${prefixCls}-menu-submenu-arrow-icon`
+-      })) : (/*#__PURE__*/React.createElement(RightOutlined, {
+-        className: `${prefixCls}-menu-submenu-arrow-icon`
++      })) : (/*#__PURE__*/React.createElement(ChevronRight, {
++        size: 16,
++        strokeWidth: 1.8,
++        className: `${prefixCls}-menu-submenu-arrow-icon lucide-custom`
+       }))),
+       mode: "vertical",
+       selectable: false,
+diff --git a/es/dropdown/style/index.js b/es/dropdown/style/index.js
+index 768c01783002c6901c85a73061ff6b3e776a60ce..39b1b95a56cdc9fb586a193c3adad5141f5cf213 100644
+--- a/es/dropdown/style/index.js
++++ b/es/dropdown/style/index.js
+@@ -240,7 +240,8 @@ const genBaseStyle = token => {
+               marginInlineEnd: '0 !important',
+               color: token.colorTextDescription,
+               fontSize: fontSizeIcon,
+-              fontStyle: 'normal'
++              fontStyle: 'normal',
++              marginTop: 3,
+             }
+           }
+         }),
+diff --git a/es/select/useIcons.js b/es/select/useIcons.js
+index 959115be936ef8901548af2658c5dcfdc5852723..c812edd52123eb0faf4638b1154fcfa1b05b513b 100644
+--- a/es/select/useIcons.js
++++ b/es/select/useIcons.js
+@@ -4,10 +4,10 @@ import * as React from 'react';
+ import CheckOutlined from "@ant-design/icons/es/icons/CheckOutlined";
+ import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled";
+ import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined";
+-import DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
+ import LoadingOutlined from "@ant-design/icons/es/icons/LoadingOutlined";
+ import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";
+ import { devUseWarning } from '../_util/warning';
++import { ChevronDown } from 'lucide-react';
+ export default function useIcons(_ref) {
+   let {
+     suffixIcon,
+@@ -56,8 +56,10 @@ export default function useIcons(_ref) {
+           className: iconCls
+         }));
+       }
+-      return getSuffixIconNode(/*#__PURE__*/React.createElement(DownOutlined, {
+-        className: iconCls
++      return getSuffixIconNode(/*#__PURE__*/React.createElement(ChevronDown, {
++        size: 16,
++        strokeWidth: 1.8,
++        className: `${iconCls} lucide-custom`
+       }));
+     };
+   }

package.json

@@ -135,7 +135,7 @@
     "@vitest/ui": "^3.1.4",
     "@vitest/web-worker": "^3.1.4",
     "@xyflow/react": "^12.4.4",
-    "antd": "^5.22.5",
+    "antd": "patch:antd@npm%3A5.24.7#~/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch",
     "archiver": "^7.0.1",
     "async-mutex": "^0.5.0",
     "axios": "^1.7.3",

src/renderer/src/assets/styles/index.scss

@@ -170,7 +170,7 @@ ul {
   }
 }
 
-.lucide {
+.lucide:not(.lucide-custom) {
   color: var(--color-icon);
 }
 

src/renderer/src/context/AntdProvider.tsx

@@ -79,7 +79,8 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
           Dropdown: {
             controlPaddingHorizontal: 8,
             borderRadiusLG: 10,
-            borderRadiusSM: 8
+            borderRadiusSM: 8,
+            paddingXS: 4
           },
           Popover: {
             borderRadiusLG: 10

src/renderer/src/pages/agents/components/AddAgentPopup.tsx

@@ -14,7 +14,6 @@ import { Agent, KnowledgeBase } from '@renderer/types'
 import { getLeadingEmoji, uuid } from '@renderer/utils'
 import { Button, Form, FormInstance, Input, Modal, Popover, Select, SelectProps } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
-import { ChevronDown } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import stringWidth from 'string-width'
@@ -213,7 +212,6 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
                   .toLowerCase()
                   .includes(input.toLowerCase())
               }
-              suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
             />
           </Form.Item>
         )}

src/renderer/src/pages/knowledge/components/AddKnowledgePopup.tsx

@@ -13,7 +13,6 @@ 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'
@@ -183,12 +182,7 @@ 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
+          <Select style={{ width: '100%' }} options={embeddingSelectOptions} placeholder={t('settings.models.empty')} />
-            style={{ width: '100%' }}
-            options={embeddingSelectOptions}
-            placeholder={t('settings.models.empty')}
-            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
-          />
         </Form.Item>
 
         <Form.Item
@@ -196,12 +190,7 @@ 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
+          <Select style={{ width: '100%' }} options={rerankSelectOptions} placeholder={t('settings.models.empty')} />
-            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', {

src/renderer/src/pages/knowledge/components/KnowledgeSettingsPopup.tsx

@@ -140,13 +140,7 @@ 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
+          <Select style={{ width: '100%' }} options={selectOptions} placeholder={t('settings.models.empty')} disabled />
-            style={{ width: '100%' }}
-            options={selectOptions}
-            placeholder={t('settings.models.empty')}
-            disabled
-            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
-          />
         </Form.Item>
 
         <Form.Item
@@ -160,7 +154,6 @@ 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 }}>

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

@@ -3,7 +3,7 @@ import { Box } from '@renderer/components/Layout'
 import { useAppSelector } from '@renderer/store'
 import { Assistant, AssistantSettings } from '@renderer/types'
 import { Row, Segmented, Select, SelectProps, Tooltip } from 'antd'
-import { ChevronDown, CircleHelp } from 'lucide-react'
+import { CircleHelp } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -46,7 +46,6 @@ const AssistantKnowledgeBaseSettings: React.FC<Props> = ({ assistant, updateAssi
             .toLowerCase()
             .includes(input.toLowerCase())
         }
-        suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
       />
       <Row align="middle" style={{ marginTop: 10 }}>
         <Label>{t('assistants.settings.knowledge_base.recognition')}</Label>

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

@@ -10,7 +10,6 @@ import { Assistant, AssistantSettingCustomParameters, AssistantSettings } from '
 import { modalConfirm } from '@renderer/utils'
 import { Button, Col, Divider, Input, InputNumber, Row, Select, Slider, Switch, Tooltip } from 'antd'
 import { isNull } from 'lodash'
-import { ChevronDown } from 'lucide-react'
 import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -118,7 +117,6 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
               { label: 'true', value: true },
               { label: 'false', value: false }
             ]}
-            suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
           />
         )
       case 'json':
@@ -437,8 +435,7 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
             <Select
               value={param.type}
               onChange={(value) => onUpdateCustomParameter(index, 'type', value)}
-              style={{ width: '100%' }}
+              style={{ width: '100%' }}>
-              suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}>
               <Select.Option value="string">{t('models.parameter_type.string')}</Select.Option>
               <Select.Option value="number">{t('models.parameter_type.number')}</Select.Option>
               <Select.Option value="boolean">{t('models.parameter_type.boolean')}</Select.Option>

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

@@ -16,7 +16,7 @@ import { setTranslateModelPrompt } from '@renderer/store/settings'
 import { Model } from '@renderer/types'
 import { Button, Select, Tooltip } from 'antd'
 import { find, sortBy } from 'lodash'
-import { ChevronDown, CircleHelp, FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
+import { CircleHelp, FolderPen, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -104,7 +104,6 @@ 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>
@@ -126,7 +125,6 @@ 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>
@@ -148,7 +146,6 @@ 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 && (
@@ -194,8 +191,7 @@ const ModelSettings: FC = () => {
               value={quickAssistantId || defaultAssistant.id}
               style={{ width: 360 }}
               onChange={(value) => dispatch(setQuickAssistantId(value))}
-              placeholder={t('settings.models.quick_assistant_selection')}
+              placeholder={t('settings.models.quick_assistant_selection')}>
-              suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}>
               <Select.Option key={defaultAssistant.id} value={defaultAssistant.id}>
                 <AssistantItem>
                   <ModelAvatar model={defaultAssistant.model || defaultModel} size={18} />

src/renderer/src/pages/settings/ProviderSettings/ModelEditContent.tsx

@@ -238,7 +238,6 @@ const ModelEditContent: FC<ModelEditContentProps> = ({ model, onUpdateModel, ope
                   }
                 }}
                 dropdownMatchSelectWidth={false}
-                suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
               />
             </Form.Item>
 

src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/CutoffSettings.tsx

@@ -1,7 +1,7 @@
 import { useWebSearchSettings } from '@renderer/hooks/useWebSearchProviders'
 import { SettingRow, SettingRowTitle } from '@renderer/pages/settings'
 import { Input, Select, Space, Tooltip } from 'antd'
-import { ChevronDown, Info } from 'lucide-react'
+import { Info } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 const INPUT_BOX_WIDTH = '200px'
@@ -50,7 +50,6 @@ const CutoffSettings = () => {
           style={{ minWidth: '40%' }}
           onChange={handleCutoffUnitChange}
           options={unitOptions}
-          suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
         />
       </Space.Compact>
     </SettingRow>

src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/RagSettings.tsx

@@ -10,7 +10,7 @@ import { getModelUniqId } from '@renderer/services/ModelService'
 import { Model } from '@renderer/types'
 import { Button, InputNumber, Select, Slider, Tooltip } from 'antd'
 import { find, sortBy } from 'lodash'
-import { ChevronDown, Info, RefreshCw } from 'lucide-react'
+import { Info, RefreshCw } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -131,7 +131,6 @@ const RagSettings = () => {
           onChange={handleEmbeddingModelChange}
           allowClear={false}
           showSearch
-          suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
         />
       </SettingRow>
       <SettingDivider />
@@ -173,7 +172,6 @@ const RagSettings = () => {
           onChange={handleRerankModelChange}
           allowClear
           showSearch
-          suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
         />
       </SettingRow>
       <SettingDivider />

src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/index.tsx

@@ -1,7 +1,6 @@
 import { useWebSearchSettings } from '@renderer/hooks/useWebSearchProviders'
 import { SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '@renderer/pages/settings'
 import { Select } from 'antd'
-import { ChevronDown } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 import CutoffSettings from './CutoffSettings'
@@ -33,7 +32,6 @@ const CompressionSettings = () => {
           style={{ width: '200px' }}
           onChange={handleCompressionMethodChange}
           options={compressionMethodOptions}
-          suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
         />
       </SettingRow>
       <SettingDivider />

src/renderer/src/pages/translate/TranslatePage.tsx

@@ -23,7 +23,7 @@ import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
 import dayjs from 'dayjs'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { find, isEmpty, sortBy } from 'lodash'
-import { ChevronDown, HelpCircle, Settings2, TriangleAlert } from 'lucide-react'
+import { HelpCircle, Settings2, TriangleAlert } from 'lucide-react'
 import { FC, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
@@ -126,7 +126,6 @@ const TranslateSettings: FC<{
               }}
               options={selectOptions}
               showSearch
-              suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
             />
           </HStack>
           {!translateModel && (
@@ -188,7 +187,6 @@ const TranslateSettings: FC<{
                       </Space.Compact>
                     )
                   }))}
-                  suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
                 />
                 <span>⇆</span>
                 <Select
@@ -206,7 +204,6 @@ const TranslateSettings: FC<{
                       </Space.Compact>
                     )
                   }))}
-                  suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
                 />
               </Flex>
             )}
@@ -455,7 +452,6 @@ const TranslatePage: FC = () => {
             </Space.Compact>
           )
         }))}
-        suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
       />
     )
   }
@@ -555,7 +551,6 @@ const TranslatePage: FC = () => {
                     )
                   }))
                 ]}
-                suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
               />
               <Button
                 type="text"

yarn.lock

@@ -5710,7 +5710,7 @@ __metadata:
     "@vitest/ui": "npm:^3.1.4"
     "@vitest/web-worker": "npm:^3.1.4"
     "@xyflow/react": "npm:^12.4.4"
-    antd: "npm:^5.22.5"
+    antd: "patch:antd@npm%3A5.24.7#~/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch"
     archiver: "npm:^7.0.1"
     async-mutex: "npm:^0.5.0"
     axios: "npm:^1.7.3"
@@ -6001,7 +6001,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"antd@npm:^5.22.5":
+"antd@npm:5.24.7":
   version: 5.24.7
   resolution: "antd@npm:5.24.7"
   dependencies:
@@ -6061,6 +6061,66 @@ __metadata:
   languageName: node
   linkType: hard
 
+"antd@patch:antd@npm%3A5.24.7#~/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch":
+  version: 5.24.7
+  resolution: "antd@patch:antd@npm%3A5.24.7#~/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch::version=5.24.7&hash=ff9154"
+  dependencies:
+    "@ant-design/colors": "npm:^7.2.0"
+    "@ant-design/cssinjs": "npm:^1.23.0"
+    "@ant-design/cssinjs-utils": "npm:^1.1.3"
+    "@ant-design/fast-color": "npm:^2.0.6"
+    "@ant-design/icons": "npm:^5.6.1"
+    "@ant-design/react-slick": "npm:~1.1.2"
+    "@babel/runtime": "npm:^7.26.0"
+    "@rc-component/color-picker": "npm:~2.0.1"
+    "@rc-component/mutate-observer": "npm:^1.1.0"
+    "@rc-component/qrcode": "npm:~1.0.0"
+    "@rc-component/tour": "npm:~1.15.1"
+    "@rc-component/trigger": "npm:^2.2.6"
+    classnames: "npm:^2.5.1"
+    copy-to-clipboard: "npm:^3.3.3"
+    dayjs: "npm:^1.11.11"
+    rc-cascader: "npm:~3.33.1"
+    rc-checkbox: "npm:~3.5.0"
+    rc-collapse: "npm:~3.9.0"
+    rc-dialog: "npm:~9.6.0"
+    rc-drawer: "npm:~7.2.0"
+    rc-dropdown: "npm:~4.2.1"
+    rc-field-form: "npm:~2.7.0"
+    rc-image: "npm:~7.11.1"
+    rc-input: "npm:~1.8.0"
+    rc-input-number: "npm:~9.5.0"
+    rc-mentions: "npm:~2.20.0"
+    rc-menu: "npm:~9.16.1"
+    rc-motion: "npm:^2.9.5"
+    rc-notification: "npm:~5.6.3"
+    rc-pagination: "npm:~5.1.0"
+    rc-picker: "npm:~4.11.3"
+    rc-progress: "npm:~4.0.0"
+    rc-rate: "npm:~2.13.1"
+    rc-resize-observer: "npm:^1.4.3"
+    rc-segmented: "npm:~2.7.0"
+    rc-select: "npm:~14.16.6"
+    rc-slider: "npm:~11.1.8"
+    rc-steps: "npm:~6.0.1"
+    rc-switch: "npm:~4.1.0"
+    rc-table: "npm:~7.50.4"
+    rc-tabs: "npm:~15.5.2"
+    rc-textarea: "npm:~1.10.0"
+    rc-tooltip: "npm:~6.4.0"
+    rc-tree: "npm:~5.13.1"
+    rc-tree-select: "npm:~5.27.0"
+    rc-upload: "npm:~4.8.1"
+    rc-util: "npm:^5.44.4"
+    scroll-into-view-if-needed: "npm:^3.1.0"
+    throttle-debounce: "npm:^5.0.2"
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: 10c0/e46e36f151ba0f2eef1190aaf772cbe2ab947de7d832aef2d872f6a28203a134e4ee71aa6f7a7c4c57979bf1955f1b4adfae733aca06f0e740a6b54a59d45a19
+  languageName: node
+  linkType: hard
+
 "app-builder-bin@npm:5.0.0-alpha.12":
   version: 5.0.0-alpha.12
   resolution: "app-builder-bin@npm:5.0.0-alpha.12"