From 81538a54463384ca30069901d7f9c672338560d6 Mon Sep 17 00:00:00 2001 From: Teo Date: Mon, 14 Apr 2025 15:48:25 +0800 Subject: [PATCH] feat: update icons in Inputbar and related components for consistency --- .../src/components/QuickPanel/view.tsx | 20 ++++++-- .../src/pages/home/Inputbar/Inputbar.tsx | 51 +++++++++++-------- .../home/Inputbar/KnowledgeBaseButton.tsx | 8 ++- .../pages/home/Inputbar/MCPToolsButton.tsx | 11 ++-- .../home/Inputbar/MentionModelsButton.tsx | 5 +- .../home/Inputbar/QuickPhrasesButton.tsx | 7 ++- .../pages/home/Messages/MessageMenubar.tsx | 7 ++- 7 files changed, 64 insertions(+), 45 deletions(-) diff --git a/src/renderer/src/components/QuickPanel/view.tsx b/src/renderer/src/components/QuickPanel/view.tsx index 4612715b..52c33450 100644 --- a/src/renderer/src/components/QuickPanel/view.tsx +++ b/src/renderer/src/components/QuickPanel/view.tsx @@ -1,10 +1,11 @@ -import { CheckOutlined, RightOutlined } from '@ant-design/icons' +import { RightOutlined } from '@ant-design/icons' import { isMac } from '@renderer/config/constant' import { classNames } from '@renderer/utils' import { Flex } from 'antd' import { theme } from 'antd' import Color from 'color' import { t } from 'i18next' +import { Check } from 'lucide-react' import React, { use, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react' import styled from 'styled-components' import * as tinyPinyin from 'tiny-pinyin' @@ -444,7 +445,7 @@ export const QuickPanelView: React.FC = ({ setInputText }) => { {item.suffix ? ( item.suffix ) : item.isSelected ? ( - + ) : ( item.isMenu && !item.disabled && )} @@ -632,8 +633,16 @@ const QuickPanelItemLeft = styled.div` ` const QuickPanelItemIcon = styled.span` - font-size: 12px; + font-size: 13px; color: var(--color-text-3); + display: flex; + align-items: center; + justify-content: center; + > svg { + width: 1em; + height: 1em; + color: var(--color-text-3); + } ` const QuickPanelItemLabel = styled.span` @@ -669,4 +678,9 @@ const QuickPanelItemSuffixIcon = styled.span` align-items: center; justify-content: flex-end; gap: 3px; + > svg { + width: 1em; + height: 1em; + color: var(--color-text-3); + } ` diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx index 93d31e1a..c08fa49a 100644 --- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx +++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx @@ -1,12 +1,4 @@ -import { - CodeOutlined, - FileSearchOutlined, - HolderOutlined, - PaperClipOutlined, - PauseCircleOutlined, - ThunderboltOutlined, - TranslationOutlined -} from '@ant-design/icons' +import { HolderOutlined } from '@ant-design/icons' import { QuickPanelListItem, QuickPanelView, useQuickPanel } from '@renderer/components/QuickPanel' import TranslateButton from '@renderer/components/TranslateButton' import { isGenerateImageModel, isVisionModel, isWebSearchModel } from '@renderer/config/models' @@ -39,7 +31,22 @@ import TextArea, { TextAreaRef } from 'antd/es/input/TextArea' import dayjs from 'dayjs' import Logger from 'electron-log/renderer' import { debounce, isEmpty } from 'lodash' -import { Globe, Maximize, MessageSquareDiff, Minimize, PaintbrushVertical } from 'lucide-react' +import { + AtSign, + CirclePause, + FileSearch, + FileText, + Globe, + Languages, + LucideSquareTerminal, + Maximize, + MessageSquareDiff, + Minimize, + PaintbrushVertical, + Paperclip, + Upload, + Zap +} from 'lucide-react' import React, { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router-dom' @@ -261,7 +268,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = label: fileContent.origin_name || fileContent.name, description: formatFileSize(fileContent.size) + ' ยท ' + dayjs(fileContent.created_at).format('YYYY-MM-DD HH:mm'), - icon: , + icon: , isSelected: files.some((f) => f.path === fileContent.path), action: async ({ item }) => { item.isSelected = !item.isSelected @@ -292,7 +299,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = { label: t('chat.input.upload.upload_from_local'), description: '', - icon: , + icon: , action: () => { attachmentButtonRef.current?.openQuickPanel() } @@ -304,7 +311,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = return { label: base.name, description: `${length} ${t('files.count')}`, - icon: , + icon: , disabled: length === 0, isMenu: true, action: () => openKnowledgeFileList(base) @@ -320,7 +327,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = { label: t('settings.quickPhrase.title'), description: '', - icon: , + icon: , isMenu: true, action: () => { quickPhrasesButtonRef.current?.openQuickPanel() @@ -329,7 +336,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = { label: t('agents.edit.model.select.title'), description: '', - icon: '@', + icon: , isMenu: true, action: () => { mentionModelsButtonRef.current?.openQuickPanel() @@ -338,7 +345,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = { label: t('chat.input.knowledge_base'), description: '', - icon: , + icon: , isMenu: true, disabled: files.length > 0, action: () => { @@ -348,7 +355,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = { label: t('settings.mcp.title'), description: t('settings.mcp.not_support'), - icon: , + icon: , isMenu: true, action: () => { mcpToolsButtonRef.current?.openQuickPanel() @@ -357,7 +364,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = { label: `MCP ${t('settings.mcp.tabs.prompts')}`, description: '', - icon: , + icon: , isMenu: true, action: () => { mcpToolsButtonRef.current?.openPromptList() @@ -366,7 +373,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = { label: `MCP ${t('settings.mcp.tabs.resources')}`, description: '', - icon: , + icon: , isMenu: true, action: () => { mcpToolsButtonRef.current?.openResourcesList() @@ -375,14 +382,14 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = { label: isVisionModel(model) ? t('chat.input.upload') : t('chat.input.upload.document'), description: '', - icon: , + icon: , isMenu: true, action: openSelectFileMenu }, { label: t('translate.title'), description: t('translate.menu.description'), - icon: , + icon: , action: () => { if (!text) return translate() @@ -1009,7 +1016,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = {loading && ( - + )} diff --git a/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx b/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx index a32be944..67cef746 100644 --- a/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx +++ b/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx @@ -1,10 +1,8 @@ -import { FileSearchOutlined } from '@ant-design/icons' -import { PlusOutlined } from '@ant-design/icons' import { QuickPanelListItem, useQuickPanel } from '@renderer/components/QuickPanel' import { useAppSelector } from '@renderer/store' import { KnowledgeBase } from '@renderer/types' import { Tooltip } from 'antd' -import { FileSearch } from 'lucide-react' +import { FileSearch, Plus } from 'lucide-react' import { FC, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router' @@ -49,13 +47,13 @@ const KnowledgeBaseButton: FC = ({ ref, selectedBases, onSelect, disabled const newList: QuickPanelListItem[] = knowledgeState.bases.map((base) => ({ label: base.name, description: `${base.items.length} ${t('files.count')}`, - icon: , + icon: , action: () => handleBaseSelect(base), isSelected: selectedBases?.some((selected) => selected.id === base.id) })) newList.push({ label: t('knowledge.add.title') + '...', - icon: , + icon: , action: () => navigate('/knowledge'), isSelected: false }) diff --git a/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx b/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx index df947dd3..bf6b2742 100644 --- a/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx +++ b/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx @@ -1,9 +1,8 @@ -import { CodeOutlined, PlusOutlined } from '@ant-design/icons' import { QuickPanelListItem, useQuickPanel } from '@renderer/components/QuickPanel' import { useMCPServers } from '@renderer/hooks/useMCPServers' import { MCPPrompt, MCPResource, MCPServer } from '@renderer/types' import { Form, Input, Modal, Tooltip } from 'antd' -import { SquareTerminal } from 'lucide-react' +import { Plus, SquareTerminal } from 'lucide-react' import { FC, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router' @@ -46,14 +45,14 @@ const MCPToolsButton: FC = ({ const newList: QuickPanelListItem[] = activedMcpServers.map((server) => ({ label: server.name, description: server.description || server.baseUrl, - icon: , + icon: , action: () => toggelEnableMCP(server), isSelected: enabledMCPs.some((s) => s.id === server.id) })) newList.push({ label: t('settings.mcp.addServer') + '...', - icon: , + icon: , action: () => navigate('/settings/mcp') }) return newList @@ -271,7 +270,7 @@ const MCPToolsButton: FC = ({ return prompts.map((prompt) => ({ label: prompt.name, description: prompt.description, - icon: , + icon: , action: () => handlePromptSelect(prompt) })) }, [handlePromptSelect, enabledMCPs]) @@ -373,7 +372,7 @@ const MCPToolsButton: FC = ({ resources.map((resource) => ({ label: resource.name, description: resource.description, - icon: , + icon: , action: () => handleResourceSelect(resource) })) ) diff --git a/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx b/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx index df4fafea..78ec72a9 100644 --- a/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx +++ b/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx @@ -1,4 +1,3 @@ -import { PlusOutlined } from '@ant-design/icons' import ModelTagsWithLabel from '@renderer/components/ModelTagsWithLabel' import { useQuickPanel } from '@renderer/components/QuickPanel' import { QuickPanelListItem } from '@renderer/components/QuickPanel/types' @@ -10,7 +9,7 @@ import { Model } from '@renderer/types' import { Avatar, Tooltip } from 'antd' import { useLiveQuery } from 'dexie-react-hooks' import { first, sortBy } from 'lodash' -import { AtSign } from 'lucide-react' +import { AtSign, Plus } from 'lucide-react' import { FC, useCallback, useImperativeHandle, useMemo } from 'react' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router' @@ -101,7 +100,7 @@ const MentionModelsButton: FC = ({ ref, mentionModels, onMentionModel, To items.push({ label: t('settings.models.add.add_model') + '...', - icon: , + icon: , action: () => navigate('/settings/provider'), isSelected: false }) diff --git a/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx b/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx index 7fd9a2ea..dd6221d0 100644 --- a/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx +++ b/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx @@ -1,10 +1,9 @@ -import { PlusOutlined, ThunderboltOutlined } from '@ant-design/icons' import { useQuickPanel } from '@renderer/components/QuickPanel' import { QuickPanelListItem, QuickPanelOpenOptions } from '@renderer/components/QuickPanel/types' import QuickPhraseService from '@renderer/services/QuickPhraseService' import { QuickPhrase } from '@renderer/types' import { Tooltip } from 'antd' -import { Zap } from 'lucide-react' +import { Plus, Zap } from 'lucide-react' import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { useNavigate } from 'react-router' @@ -61,12 +60,12 @@ const QuickPhrasesButton = ({ ref, setInputValue, resizeTextArea, ToolbarButton const newList: QuickPanelListItem[] = quickPhrasesList.map((phrase) => ({ label: phrase.title, description: phrase.content, - icon: , + icon: , action: () => handlePhraseSelect(phrase) })) newList.push({ label: t('settings.quickPhrase.add') + '...', - icon: , + icon: , action: () => navigate('/settings/quickPhrase') }) return newList diff --git a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx index 7ea2bc4c..b936dd0c 100644 --- a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx +++ b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx @@ -34,7 +34,6 @@ import { Save, Share, Split, - ThumbsDown, ThumbsUp, Trash } from 'lucide-react' @@ -438,7 +437,11 @@ const MessageMenubar: FC = (props) => { {isAssistantMessage && isGrouped && ( - {message.useful ? : } + {message.useful ? ( + + ) : ( + + )} )}