From 6a187fd370ffef9013c504b5c48266442123b6a7 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Mon, 17 Mar 2025 15:28:45 +0800
Subject: [PATCH] refactor: update AttachmentButton styling and integrate into
 Inputbar

- Adjusted the font size of the PaperClipOutlined icon in the AttachmentButton for better visibility.
- Integrated the AttachmentButton into the Inputbar component, replacing the TranslateButton in one instance for improved functionality.
---
 .../src/components/TranslateButton.tsx        | 42 ++-----------------
 .../pages/home/Inputbar/AttachmentButton.tsx  |  2 +-
 .../src/pages/home/Inputbar/Inputbar.tsx      |  9 +++-
 3 files changed, 11 insertions(+), 42 deletions(-)

diff --git a/src/renderer/src/components/TranslateButton.tsx b/src/renderer/src/components/TranslateButton.tsx
index afd153bb..ffc53e9d 100644
--- a/src/renderer/src/components/TranslateButton.tsx
+++ b/src/renderer/src/components/TranslateButton.tsx
@@ -4,10 +4,9 @@ import { useSettings } from '@renderer/hooks/useSettings'
 import { fetchTranslate } from '@renderer/services/ApiService'
 import { getDefaultTopic, getDefaultTranslateAssistant } from '@renderer/services/AssistantService'
 import { getUserMessage } from '@renderer/services/MessagesService'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface Props {
   text?: string
@@ -15,9 +14,10 @@ interface Props {
   disabled?: boolean
   style?: React.CSSProperties
   isLoading?: boolean
+  ToolbarButton: any
 }
 
-const TranslateButton: FC<Props> = ({ text, onTranslated, disabled, style, isLoading }) => {
+const TranslateButton: FC<Props> = ({ text, onTranslated, disabled, style, isLoading, ToolbarButton }) => {
   const { t } = useTranslation()
   const { translateModel } = useDefaultModel()
   const [isTranslating, setIsTranslating] = useState(false)
@@ -88,40 +88,4 @@ const TranslateButton: FC<Props> = ({ text, onTranslated, disabled, style, isLoa
   )
 }
 
-const ToolbarButton = styled(Button)`
-  min-width: 30px;
-  height: 30px;
-  font-size: 16px;
-  border-radius: 50%;
-  transition: all 0.3s ease;
-  color: var(--color-icon);
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  &.anticon,
-  &.iconfont {
-    transition: all 0.3s ease;
-    color: var(--color-icon);
-  }
-  &:hover {
-    background-color: var(--color-background-soft);
-    .anticon,
-    .iconfont {
-      color: var(--color-text-1);
-    }
-  }
-  &.active {
-    background-color: var(--color-primary) !important;
-    .anticon,
-    .iconfont {
-      color: var(--color-white-soft);
-    }
-    &:hover {
-      background-color: var(--color-primary);
-    }
-  }
-`
-
 export default TranslateButton
diff --git a/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx b/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx
index 49c391e3..7fd6c5e9 100644
--- a/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx
@@ -42,7 +42,7 @@ const AttachmentButton: FC<Props> = ({ model, files, setFiles, ToolbarButton, di
       title={isVisionModel(model) ? t('chat.input.upload') : t('chat.input.upload.document')}
       arrow>
       <ToolbarButton type="text" className={files.length ? 'active' : ''} onClick={onSelectFile} disabled={disabled}>
-        <PaperClipOutlined style={{ rotate: '135deg' }} />
+        <PaperClipOutlined style={{ fontSize: 17 }} />
       </ToolbarButton>
     </Tooltip>
   )
diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
index 605ef775..35963f1b 100644
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -707,6 +707,7 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
           </DragHandle>
           <Toolbar>
             <ToolbarMenu>
+              <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
               <MentionModelsButton
                 mentionModels={mentionModels}
                 onMentionModel={(model) => onMentionModel(model, mentionFromKeyboard)}
@@ -734,7 +735,6 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
                   ToolbarButton={ToolbarButton}
                 />
               )}
-              <TranslateButton text={text} onTranslated={onTranslated} isLoading={isTranslating} />
               <Tooltip placement="top" title={t('chat.input.clear', { Command: cleanTopicShortcut })} arrow>
                 <Popconfirm
                   title={t('chat.input.clear.content')}
@@ -770,7 +770,12 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
               />
             </ToolbarMenu>
             <ToolbarMenu>
-              <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
+              <TranslateButton
+                text={text}
+                onTranslated={onTranslated}
+                isLoading={isTranslating}
+                ToolbarButton={ToolbarButton}
+              />
               {loading && (
                 <Tooltip placement="top" title={t('chat.input.pause')} arrow>
                   <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>