From b1a9fbc6fd0437838c5a93f6f9bc878bf235d598 Mon Sep 17 00:00:00 2001 From: one Date: Wed, 3 Sep 2025 18:02:53 +0800 Subject: [PATCH] refactor: tooltip icons (#9841) * refactor: add HelpTooltip, group tooltip icons * refactor: add a tip for preview tools * refactor: use HelpTooltip in SettingsTab --- .../components/TooltipIcons/HelpTooltip.tsx | 20 +++++++ .../{ => TooltipIcons}/InfoTooltip.tsx | 2 +- .../{ => TooltipIcons}/WarnTooltip.tsx | 0 .../__tests__/InfoTooltip.test.tsx | 0 .../__snapshots__/InfoTooltip.test.tsx.snap | 0 .../src/components/TooltipIcons/index.ts | 3 ++ src/renderer/src/i18n/locales/en-us.json | 5 +- src/renderer/src/i18n/locales/ja-jp.json | 5 +- src/renderer/src/i18n/locales/ru-ru.json | 5 +- src/renderer/src/i18n/locales/zh-cn.json | 5 +- src/renderer/src/i18n/locales/zh-tw.json | 5 +- .../src/pages/home/Tabs/SettingsTab.tsx | 53 +++++++++---------- .../__tests__/AdvancedSettingsPanel.test.tsx | 4 +- .../__tests__/GeneralSettingsPanel.test.tsx | 4 +- .../AdvancedSettingsPanel.tsx | 2 +- .../GeneralSettingsPanel.tsx | 2 +- .../src/pages/memory/settings-modal.tsx | 2 +- .../DocProcessSettings/OcrSystemSettings.tsx | 2 +- .../OcrTesseractSettings.tsx | 2 +- .../src/pages/settings/GeneralSettings.tsx | 2 +- .../settings/ModelSettings/ModelSettings.tsx | 2 +- .../ApiOptionsSettings/ApiOptionsSettings.tsx | 2 +- .../EditModelPopup/ModelEditContent.tsx | 2 +- .../CustomLanguageModal.tsx | 2 +- 24 files changed, 83 insertions(+), 48 deletions(-) create mode 100644 src/renderer/src/components/TooltipIcons/HelpTooltip.tsx rename src/renderer/src/components/{ => TooltipIcons}/InfoTooltip.tsx (89%) rename src/renderer/src/components/{ => TooltipIcons}/WarnTooltip.tsx (100%) rename src/renderer/src/components/{ => TooltipIcons}/__tests__/InfoTooltip.test.tsx (100%) rename src/renderer/src/components/{ => TooltipIcons}/__tests__/__snapshots__/InfoTooltip.test.tsx.snap (100%) create mode 100644 src/renderer/src/components/TooltipIcons/index.ts diff --git a/src/renderer/src/components/TooltipIcons/HelpTooltip.tsx b/src/renderer/src/components/TooltipIcons/HelpTooltip.tsx new file mode 100644 index 0000000000..6ce75d5140 --- /dev/null +++ b/src/renderer/src/components/TooltipIcons/HelpTooltip.tsx @@ -0,0 +1,20 @@ +import { Tooltip, TooltipProps } from 'antd' +import { HelpCircle } from 'lucide-react' + +type InheritedTooltipProps = Omit + +interface HelpTooltipProps extends InheritedTooltipProps { + iconColor?: string + iconSize?: string | number + iconStyle?: React.CSSProperties +} + +const HelpTooltip = ({ iconColor = 'var(--color-text-2)', iconSize = 14, iconStyle, ...rest }: HelpTooltipProps) => { + return ( + + + + ) +} + +export default HelpTooltip diff --git a/src/renderer/src/components/InfoTooltip.tsx b/src/renderer/src/components/TooltipIcons/InfoTooltip.tsx similarity index 89% rename from src/renderer/src/components/InfoTooltip.tsx rename to src/renderer/src/components/TooltipIcons/InfoTooltip.tsx index 02c64c4d2d..7a0e608a31 100644 --- a/src/renderer/src/components/InfoTooltip.tsx +++ b/src/renderer/src/components/TooltipIcons/InfoTooltip.tsx @@ -9,7 +9,7 @@ interface InfoTooltipProps extends InheritedTooltipProps { iconStyle?: React.CSSProperties } -const InfoTooltip = ({ iconColor = 'var(--color-text-3)', iconSize = 14, iconStyle, ...rest }: InfoTooltipProps) => { +const InfoTooltip = ({ iconColor = 'var(--color-text-2)', iconSize = 14, iconStyle, ...rest }: InfoTooltipProps) => { return ( diff --git a/src/renderer/src/components/WarnTooltip.tsx b/src/renderer/src/components/TooltipIcons/WarnTooltip.tsx similarity index 100% rename from src/renderer/src/components/WarnTooltip.tsx rename to src/renderer/src/components/TooltipIcons/WarnTooltip.tsx diff --git a/src/renderer/src/components/__tests__/InfoTooltip.test.tsx b/src/renderer/src/components/TooltipIcons/__tests__/InfoTooltip.test.tsx similarity index 100% rename from src/renderer/src/components/__tests__/InfoTooltip.test.tsx rename to src/renderer/src/components/TooltipIcons/__tests__/InfoTooltip.test.tsx diff --git a/src/renderer/src/components/__tests__/__snapshots__/InfoTooltip.test.tsx.snap b/src/renderer/src/components/TooltipIcons/__tests__/__snapshots__/InfoTooltip.test.tsx.snap similarity index 100% rename from src/renderer/src/components/__tests__/__snapshots__/InfoTooltip.test.tsx.snap rename to src/renderer/src/components/TooltipIcons/__tests__/__snapshots__/InfoTooltip.test.tsx.snap diff --git a/src/renderer/src/components/TooltipIcons/index.ts b/src/renderer/src/components/TooltipIcons/index.ts new file mode 100644 index 0000000000..6c32f23c48 --- /dev/null +++ b/src/renderer/src/components/TooltipIcons/index.ts @@ -0,0 +1,3 @@ +export { default as HelpTooltip } from './HelpTooltip' +export { default as InfoTooltip } from './InfoTooltip' +export { default as WarnTooltip } from './WarnTooltip' diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json index 02dfccbd05..7277772667 100644 --- a/src/renderer/src/i18n/locales/en-us.json +++ b/src/renderer/src/i18n/locales/en-us.json @@ -538,7 +538,10 @@ "tip": "The run button will be displayed in the toolbar of executable code blocks, please do not execute dangerous code!", "title": "Code Execution" }, - "code_image_tools": "Enable preview tools", + "code_image_tools": { + "label": "Enable preview tools", + "tip": "Enable preview tools for images rendered from code blocks such as mermaid" + }, "code_wrappable": "Code block wrappable", "context_count": { "label": "Context", diff --git a/src/renderer/src/i18n/locales/ja-jp.json b/src/renderer/src/i18n/locales/ja-jp.json index 66d8a20e94..0707af3a22 100644 --- a/src/renderer/src/i18n/locales/ja-jp.json +++ b/src/renderer/src/i18n/locales/ja-jp.json @@ -538,7 +538,10 @@ "tip": "実行可能なコードブロックのツールバーには実行ボタンが表示されます。危険なコードを実行しないでください！", "title": "コード実行" }, - "code_image_tools": "プレビューツールを有効にする", + "code_image_tools": { + "label": "プレビューツールを有効にする", + "tip": "mermaid などのコードブロックから生成された画像に対してプレビューツールを有効にする" + }, "code_wrappable": "コードブロック折り返し", "context_count": { "label": "コンテキスト", diff --git a/src/renderer/src/i18n/locales/ru-ru.json b/src/renderer/src/i18n/locales/ru-ru.json index 8161f6626c..dc9aa30d7f 100644 --- a/src/renderer/src/i18n/locales/ru-ru.json +++ b/src/renderer/src/i18n/locales/ru-ru.json @@ -538,7 +538,10 @@ "tip": "Выполнение кода в блоке кода возможно, но не рекомендуется выполнять опасный код!", "title": "Выполнение кода" }, - "code_image_tools": "Включить инструменты предпросмотра", + "code_image_tools": { + "label": "Включить инструменты предпросмотра", + "tip": "Включить инструменты предпросмотра для изображений, сгенерированных из блоков кода (например mermaid)" + }, "code_wrappable": "Блок кода можно переносить", "context_count": { "label": "Контекст", diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json index 6f693c130e..cde07a4f56 100644 --- a/src/renderer/src/i18n/locales/zh-cn.json +++ b/src/renderer/src/i18n/locales/zh-cn.json @@ -538,7 +538,10 @@ "tip": "可执行的代码块工具栏中会显示运行按钮，注意不要执行危险代码！", "title": "代码执行" }, - "code_image_tools": "启用预览工具", + "code_image_tools": { + "label": "启用预览工具", + "tip": "为 mermaid 等代码块渲染后的图像启用预览工具" + }, "code_wrappable": "代码块可换行", "context_count": { "label": "上下文数", diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json index 63e30d1104..aa9780c3be 100644 --- a/src/renderer/src/i18n/locales/zh-tw.json +++ b/src/renderer/src/i18n/locales/zh-tw.json @@ -538,7 +538,10 @@ "tip": "可執行的程式碼塊工具欄中會顯示運行按鈕，注意不要執行危險程式碼！", "title": "程式碼執行" }, - "code_image_tools": "啟用預覽工具", + "code_image_tools": { + "label": "啟用預覽工具", + "tip": "為 mermaid 等程式碼區塊渲染後的圖像啟用預覽工具" + }, "code_wrappable": "程式碼區塊可自動換行", "context_count": { "label": "上下文", diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx index 5e38824500..c04aaf6138 100644 --- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx +++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx @@ -2,6 +2,7 @@ import EditableNumber from '@renderer/components/EditableNumber' import { HStack } from '@renderer/components/Layout' import Scrollbar from '@renderer/components/Scrollbar' import Selector from '@renderer/components/Selector' +import { HelpTooltip } from '@renderer/components/TooltipIcons' import { DEFAULT_CONTEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant' import { isOpenAIModel } from '@renderer/config/models' import { UNKNOWN } from '@renderer/config/translate' @@ -48,8 +49,8 @@ import { import { Assistant, AssistantSettings, CodeStyleVarious, MathEngine, ThemeMode } from '@renderer/types' import { modalConfirm } from '@renderer/utils' import { getSendMessageShortcutLabel } from '@renderer/utils/input' -import { Button, Col, InputNumber, Row, Slider, Switch, Tooltip } from 'antd' -import { CircleHelp, Settings2 } from 'lucide-react' +import { Button, Col, InputNumber, Row, Slider, Switch } from 'antd' +import { Settings2 } from 'lucide-react' import { FC, useCallback, useEffect, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -193,10 +194,10 @@ const SettingsTab: FC = (props) => { }> - {t('chat.settings.temperature.label')} - - - + + {t('chat.settings.temperature.label')} + + = (props) => { )} - {t('chat.settings.context_count.label')} - - - + + {t('chat.settings.context_count.label')} + + @@ -256,10 +257,10 @@ const SettingsTab: FC = (props) => { - {t('chat.settings.max_tokens.label')} - - - + + {t('chat.settings.max_tokens.label')} + + = (props) => { {t('chat.settings.thought_auto_collapse.label')} - - - + = (props) => { - {t('settings.math.single_dollar.label')}{' '} - - - + {t('settings.math.single_dollar.label')} + = (props) => { {t('chat.settings.code_execution.title')} - - - + = (props) => { {t('chat.settings.code_execution.timeout_minutes.label')} - - - + = (props) => { - {t('chat.settings.code_image_tools')} + + {t('chat.settings.code_image_tools.label')} + + ` diff --git a/src/renderer/src/pages/knowledge/__tests__/AdvancedSettingsPanel.test.tsx b/src/renderer/src/pages/knowledge/__tests__/AdvancedSettingsPanel.test.tsx index d4c4358cb8..8bb50c250f 100644 --- a/src/renderer/src/pages/knowledge/__tests__/AdvancedSettingsPanel.test.tsx +++ b/src/renderer/src/pages/knowledge/__tests__/AdvancedSettingsPanel.test.tsx @@ -25,8 +25,8 @@ const mocks = vi.hoisted(() => { } }) -vi.mock('@renderer/components/InfoTooltip', () => ({ - default: ({ title }: { title: string }) =>
{mocks.i18n.t(title)}
+vi.mock('@renderer/components/TooltipIcons', () => ({ + InfoTooltip: ({ title }: { title: string }) =>
{mocks.i18n.t(title)}
})) vi.mock('react-i18next', () => ({ diff --git a/src/renderer/src/pages/knowledge/__tests__/GeneralSettingsPanel.test.tsx b/src/renderer/src/pages/knowledge/__tests__/GeneralSettingsPanel.test.tsx index 4aca536098..b31b75042f 100644 --- a/src/renderer/src/pages/knowledge/__tests__/GeneralSettingsPanel.test.tsx +++ b/src/renderer/src/pages/knowledge/__tests__/GeneralSettingsPanel.test.tsx @@ -31,8 +31,8 @@ const mocks = vi.hoisted(() => ({ })) // Mock InfoTooltip component -vi.mock('@renderer/components/InfoTooltip', () => ({ - default: ({ title, placement }: { title: string; placement: string }) => ( +vi.mock('@renderer/components/TooltipIcons', () => ({ + InfoTooltip: ({ title, placement }: { title: string; placement: string }) => ( ℹ️ diff --git a/src/renderer/src/pages/knowledge/components/KnowledgeSettings/AdvancedSettingsPanel.tsx b/src/renderer/src/pages/knowledge/components/KnowledgeSettings/AdvancedSettingsPanel.tsx index cf4d95d08f..d8682f7fb7 100644 --- a/src/renderer/src/pages/knowledge/components/KnowledgeSettings/AdvancedSettingsPanel.tsx +++ b/src/renderer/src/pages/knowledge/components/KnowledgeSettings/AdvancedSettingsPanel.tsx @@ -1,4 +1,4 @@ -import InfoTooltip from '@renderer/components/InfoTooltip' +import { InfoTooltip } from '@renderer/components/TooltipIcons' import { KnowledgeBase } from '@renderer/types' import { Alert, InputNumber } from 'antd' import { TriangleAlert } from 'lucide-react' diff --git a/src/renderer/src/pages/knowledge/components/KnowledgeSettings/GeneralSettingsPanel.tsx b/src/renderer/src/pages/knowledge/components/KnowledgeSettings/GeneralSettingsPanel.tsx index 2a234aff60..0da2be374f 100644 --- a/src/renderer/src/pages/knowledge/components/KnowledgeSettings/GeneralSettingsPanel.tsx +++ b/src/renderer/src/pages/knowledge/components/KnowledgeSettings/GeneralSettingsPanel.tsx @@ -1,6 +1,6 @@ -import InfoTooltip from '@renderer/components/InfoTooltip' import InputEmbeddingDimension from '@renderer/components/InputEmbeddingDimension' import ModelSelector from '@renderer/components/ModelSelector' +import { InfoTooltip } from '@renderer/components/TooltipIcons' import { DEFAULT_KNOWLEDGE_DOCUMENT_COUNT } from '@renderer/config/constant' import { isEmbeddingModel, isRerankModel } from '@renderer/config/models' import { useProviders } from '@renderer/hooks/useProvider' diff --git a/src/renderer/src/pages/memory/settings-modal.tsx b/src/renderer/src/pages/memory/settings-modal.tsx index 2ebce72ab4..bbfb68f170 100644 --- a/src/renderer/src/pages/memory/settings-modal.tsx +++ b/src/renderer/src/pages/memory/settings-modal.tsx @@ -1,8 +1,8 @@ import { loggerService } from '@logger' import AiProvider from '@renderer/aiCore' -import InfoTooltip from '@renderer/components/InfoTooltip' import InputEmbeddingDimension from '@renderer/components/InputEmbeddingDimension' import ModelSelector from '@renderer/components/ModelSelector' +import { InfoTooltip } from '@renderer/components/TooltipIcons' import { isEmbeddingModel, isRerankModel } from '@renderer/config/models' import { useModel } from '@renderer/hooks/useModel' import { useProviders } from '@renderer/hooks/useProvider' diff --git a/src/renderer/src/pages/settings/DocProcessSettings/OcrSystemSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/OcrSystemSettings.tsx index c597db55dc..8032b7e291 100644 --- a/src/renderer/src/pages/settings/DocProcessSettings/OcrSystemSettings.tsx +++ b/src/renderer/src/pages/settings/DocProcessSettings/OcrSystemSettings.tsx @@ -1,6 +1,6 @@ // import { loggerService } from '@logger' -import InfoTooltip from '@renderer/components/InfoTooltip' import { SuccessTag } from '@renderer/components/Tags/SuccessTag' +import { InfoTooltip } from '@renderer/components/TooltipIcons' import { isMac, isWin } from '@renderer/config/constant' import { useOcrProvider } from '@renderer/hooks/useOcrProvider' import useTranslate from '@renderer/hooks/useTranslate' diff --git a/src/renderer/src/pages/settings/DocProcessSettings/OcrTesseractSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/OcrTesseractSettings.tsx index b0ad67232d..4c0b5eb805 100644 --- a/src/renderer/src/pages/settings/DocProcessSettings/OcrTesseractSettings.tsx +++ b/src/renderer/src/pages/settings/DocProcessSettings/OcrTesseractSettings.tsx @@ -1,6 +1,6 @@ // import { loggerService } from '@logger' -import InfoTooltip from '@renderer/components/InfoTooltip' import CustomTag from '@renderer/components/Tags/CustomTag' +import { InfoTooltip } from '@renderer/components/TooltipIcons' import { TESSERACT_LANG_MAP } from '@renderer/config/ocr' import { useOcrProvider } from '@renderer/hooks/useOcrProvider' import useTranslate from '@renderer/hooks/useTranslate' diff --git a/src/renderer/src/pages/settings/GeneralSettings.tsx b/src/renderer/src/pages/settings/GeneralSettings.tsx index 8bc7354837..76be5987b0 100644 --- a/src/renderer/src/pages/settings/GeneralSettings.tsx +++ b/src/renderer/src/pages/settings/GeneralSettings.tsx @@ -1,7 +1,7 @@ import { InfoCircleOutlined } from '@ant-design/icons' -import InfoTooltip from '@renderer/components/InfoTooltip' import { HStack } from '@renderer/components/Layout' import Selector from '@renderer/components/Selector' +import { InfoTooltip } from '@renderer/components/TooltipIcons' import { useTheme } from '@renderer/context/ThemeProvider' import { useEnableDeveloperMode, useSettings } from '@renderer/hooks/useSettings' import { useTimer } from '@renderer/hooks/useTimer' diff --git a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx index b0a0453a90..e7b9ebb729 100644 --- a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx +++ b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx @@ -1,7 +1,7 @@ import { RedoOutlined } from '@ant-design/icons' -import InfoTooltip from '@renderer/components/InfoTooltip' import { HStack } from '@renderer/components/Layout' import ModelSelector from '@renderer/components/ModelSelector' +import { InfoTooltip } from '@renderer/components/TooltipIcons' import { isEmbeddingModel, isRerankModel, isTextToImageModel } from '@renderer/config/models' import { TRANSLATE_PROMPT } from '@renderer/config/prompts' import { useTheme } from '@renderer/context/ThemeProvider' diff --git a/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx index 0df268980e..ae2cb1dda0 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx @@ -1,5 +1,5 @@ -import InfoTooltip from '@renderer/components/InfoTooltip' import { HStack } from '@renderer/components/Layout' +import { InfoTooltip } from '@renderer/components/TooltipIcons' import { useProvider } from '@renderer/hooks/useProvider' import { Provider } from '@renderer/types' import { Flex, Switch } from 'antd' diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx index fce4ad0637..b09e44e43c 100644 --- a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx +++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx @@ -7,7 +7,7 @@ import { VisionTag, WebSearchTag } from '@renderer/components/Tags/Model' -import WarnTooltip from '@renderer/components/WarnTooltip' +import { WarnTooltip } from '@renderer/components/TooltipIcons' import { endpointTypeOptions } from '@renderer/config/endpointTypes' import { isEmbeddingModel, diff --git a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx b/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx index 3c8ca22baa..fc50b5ed15 100644 --- a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx +++ b/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx @@ -1,6 +1,6 @@ import { loggerService } from '@logger' import EmojiPicker from '@renderer/components/EmojiPicker' -import InfoTooltip from '@renderer/components/InfoTooltip' +import { InfoTooltip } from '@renderer/components/TooltipIcons' import useTranslate from '@renderer/hooks/useTranslate' import { addCustomLanguage, updateCustomLanguage } from '@renderer/services/TranslateService' import { CustomTranslateLanguage } from '@renderer/types'