feat: update icons in Inputbar and related components for consistency

2025-04-14 15:48:25 +08:00 · 2025-04-14 15:48:25 +08:00 · 81538a5446
commit 81538a5446
parent e6b325dd88
7 changed files with 64 additions and 45 deletions
--- 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<Props> = ({ setInputText }) => {
                  {item.suffix ? (
                    item.suffix
                  ) : item.isSelected ? (
-                    <CheckOutlined />
+                    <Check />
                  ) : (
                    item.isMenu && !item.disabled && <RightOutlined />
                  )}
@ -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);
+  }
 `
--- 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<Props> = ({ 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: <FileSearchOutlined />,
+              icon: <FileText />,
              isSelected: files.some((f) => f.path === fileContent.path),
              action: async ({ item }) => {
                item.isSelected = !item.isSelected
@ -292,7 +299,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
        {
          label: t('chat.input.upload.upload_from_local'),
          description: '',
-          icon: <PaperClipOutlined />,
+          icon: <Upload />,
          action: () => {
            attachmentButtonRef.current?.openQuickPanel()
          }
@ -304,7 +311,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
          return {
            label: base.name,
            description: `${length} ${t('files.count')}`,
-            icon: <FileSearchOutlined />,
+            icon: <FileSearch />,
            disabled: length === 0,
            isMenu: true,
            action: () => openKnowledgeFileList(base)
@ -320,7 +327,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      {
        label: t('settings.quickPhrase.title'),
        description: '',
-        icon: <ThunderboltOutlined />,
+        icon: <Zap />,
        isMenu: true,
        action: () => {
          quickPhrasesButtonRef.current?.openQuickPanel()
@ -329,7 +336,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      {
        label: t('agents.edit.model.select.title'),
        description: '',
-        icon: '@',
+        icon: <AtSign />,
        isMenu: true,
        action: () => {
          mentionModelsButtonRef.current?.openQuickPanel()
@ -338,7 +345,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      {
        label: t('chat.input.knowledge_base'),
        description: '',
-        icon: <FileSearchOutlined />,
+        icon: <FileSearch />,
        isMenu: true,
        disabled: files.length > 0,
        action: () => {
@ -348,7 +355,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      {
        label: t('settings.mcp.title'),
        description: t('settings.mcp.not_support'),
-        icon: <CodeOutlined />,
+        icon: <LucideSquareTerminal />,
        isMenu: true,
        action: () => {
          mcpToolsButtonRef.current?.openQuickPanel()
@ -357,7 +364,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      {
        label: `MCP ${t('settings.mcp.tabs.prompts')}`,
        description: '',
-        icon: <CodeOutlined />,
+        icon: <LucideSquareTerminal />,
        isMenu: true,
        action: () => {
          mcpToolsButtonRef.current?.openPromptList()
@ -366,7 +373,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      {
        label: `MCP ${t('settings.mcp.tabs.resources')}`,
        description: '',
-        icon: <CodeOutlined />,
+        icon: <LucideSquareTerminal />,
        isMenu: true,
        action: () => {
          mcpToolsButtonRef.current?.openResourcesList()
@ -375,14 +382,14 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
      {
        label: isVisionModel(model) ? t('chat.input.upload') : t('chat.input.upload.document'),
        description: '',
-        icon: <PaperClipOutlined />,
+        icon: <Paperclip />,
        isMenu: true,
        action: openSelectFileMenu
      },
      {
        label: t('translate.title'),
        description: t('translate.menu.description'),
-        icon: <TranslationOutlined />,
+        icon: <Languages />,
        action: () => {
          if (!text) return
          translate()
@ -1009,7 +1016,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
              {loading && (
                <Tooltip placement="top" title={t('chat.input.pause')} arrow>
                  <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>
-                    <PauseCircleOutlined style={{ color: 'var(--color-error)', fontSize: 20 }} />
+                    <CirclePause style={{ color: 'var(--color-error)', fontSize: 20 }} />
                  </ToolbarButton>
                </Tooltip>
              )}
--- 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<Props> = ({ ref, selectedBases, onSelect, disabled
    const newList: QuickPanelListItem[] = knowledgeState.bases.map((base) => ({
      label: base.name,
      description: `${base.items.length} ${t('files.count')}`,
-      icon: <FileSearchOutlined />,
+      icon: <FileSearch />,
      action: () => handleBaseSelect(base),
      isSelected: selectedBases?.some((selected) => selected.id === base.id)
    }))
    newList.push({
      label: t('knowledge.add.title') + '...',
-      icon: <PlusOutlined />,
+      icon: <Plus />,
      action: () => navigate('/knowledge'),
      isSelected: false
    })
--- 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<Props> = ({
    const newList: QuickPanelListItem[] = activedMcpServers.map((server) => ({
      label: server.name,
      description: server.description || server.baseUrl,
-      icon: <CodeOutlined />,
+      icon: <SquareTerminal />,
      action: () => toggelEnableMCP(server),
      isSelected: enabledMCPs.some((s) => s.id === server.id)
    }))

    newList.push({
      label: t('settings.mcp.addServer') + '...',
-      icon: <PlusOutlined />,
+      icon: <Plus />,
      action: () => navigate('/settings/mcp')
    })
    return newList
@ -271,7 +270,7 @@ const MCPToolsButton: FC<Props> = ({
    return prompts.map((prompt) => ({
      label: prompt.name,
      description: prompt.description,
-      icon: <CodeOutlined />,
+      icon: <SquareTerminal />,
      action: () => handlePromptSelect(prompt)
    }))
  }, [handlePromptSelect, enabledMCPs])
@ -373,7 +372,7 @@ const MCPToolsButton: FC<Props> = ({
        resources.map((resource) => ({
          label: resource.name,
          description: resource.description,
-          icon: <CodeOutlined />,
+          icon: <SquareTerminal />,
          action: () => handleResourceSelect(resource)
        }))
      )
--- 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<Props> = ({ ref, mentionModels, onMentionModel, To

    items.push({
      label: t('settings.models.add.add_model') + '...',
-      icon: <PlusOutlined />,
+      icon: <Plus />,
      action: () => navigate('/settings/provider'),
      isSelected: false
    })
--- 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: <ThunderboltOutlined />,
+      icon: <Zap />,
      action: () => handlePhraseSelect(phrase)
    }))
    newList.push({
      label: t('settings.quickPhrase.add') + '...',
-      icon: <PlusOutlined />,
+      icon: <Plus />,
      action: () => navigate('/settings/quickPhrase')
    })
    return newList
--- 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> = (props) => {
      {isAssistantMessage && isGrouped && (
        <Tooltip title={t('chat.message.useful')} mouseEnterDelay={0.8}>
          <ActionButton className="message-action-button" onClick={onUseful}>
-            {message.useful ? <ThumbsUp size={16} /> : <ThumbsDown size={16} />}
+            {message.useful ? (
+              <ThumbsUp size={17.5} fill="var(--color-primary)" strokeWidth={0} />
+            ) : (
+              <ThumbsUp size={16} />
+            )}
          </ActionButton>
        </Tooltip>
      )}