feat: update icons in Inputbar and related components for consistency

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);
+  }
 `

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -1,12 +1,4 @@
-import {
+import { HolderOutlined } from '@ant-design/icons'
-  CodeOutlined,
-  FileSearchOutlined,
-  HolderOutlined,
-  PaperClipOutlined,
-  PauseCircleOutlined,
-  ThunderboltOutlined,
-  TranslationOutlined
-} 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>
               )}

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
     })

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)
         }))
       )

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
     })

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

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>
       )}