From 0bb8535475f1bf3d759944b5c0fd436452fb8f01 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sat, 15 Mar 2025 16:30:51 +0800
Subject: [PATCH] refactor: optimize Inputbar debounce logic and enhance
 NewTopicButton styling

- Simplified the debounce implementation in the Inputbar component by removing an unnecessary wrapper.
- Updated the NewTopicButton to utilize theme context for dynamic styling based on the current theme.
---
 src/renderer/src/pages/home/Inputbar/Inputbar.tsx    | 12 +++++-------
 .../src/pages/home/Messages/NewTopicButton.tsx       | 11 +++++++----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
index e746729eaa..1977abdb2e 100644
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -106,22 +106,20 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
 
   const [mentionFromKeyboard, setMentionFromKeyboard] = useState(false)
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedEstimate = useCallback(
-    (newText: string) => {
+    debounce((newText) => {
       if (showInputEstimatedTokens) {
         const count = estimateTxtTokens(newText) || 0
         setTokenCount(count)
       }
-    },
+    }, 500),
     [showInputEstimatedTokens]
   )
 
-  const debouncedEstimateWithDelay = debounce(debouncedEstimate, 500)
-
   useEffect(() => {
-    debouncedEstimateWithDelay(text)
-    return () => debouncedEstimateWithDelay.cancel()
-  }, [text, debouncedEstimateWithDelay])
+    debouncedEstimate(text)
+  }, [text, debouncedEstimate])
 
   const inputTokenCount = showInputEstimatedTokens ? tokenCount : 0
 
diff --git a/src/renderer/src/pages/home/Messages/NewTopicButton.tsx b/src/renderer/src/pages/home/Messages/NewTopicButton.tsx
index 7b41faa001..9ec74cca93 100644
--- a/src/renderer/src/pages/home/Messages/NewTopicButton.tsx
+++ b/src/renderer/src/pages/home/Messages/NewTopicButton.tsx
@@ -1,6 +1,8 @@
 import { FormOutlined } from '@ant-design/icons'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { EventEmitter } from '@renderer/services/EventService'
 import { EVENT_NAMES } from '@renderer/services/EventService'
+import { ThemeMode } from '@renderer/types'
 import { Button as AntdButton } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,6 +10,7 @@ import styled from 'styled-components'
 
 const NewTopicButton: FC = () => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
 
   const addNewTopic = () => {
     EventEmitter.emit(EVENT_NAMES.ADD_NEW_TOPIC)
@@ -15,7 +18,7 @@ const NewTopicButton: FC = () => {
 
   return (
     <Container>
-      <Button size="small" color="primary" icon={<FormOutlined />} onClick={addNewTopic}>
+      <Button size="small" color="primary" icon={<FormOutlined />} onClick={addNewTopic} $theme={theme}>
         {t('chat.topics.new')}
       </Button>
     </Container>
@@ -28,18 +31,18 @@ const Container = styled.div`
   align-items: center;
 `
 
-const Button = styled(AntdButton)`
+const Button = styled(AntdButton)<{ $theme: ThemeMode }>`
   border-radius: 20px;
   padding: 0 12px;
   height: 34px !important;
   font-size: 12px;
   opacity: 0.8;
   transition: all 0.3s ease;
-  background-color: var(--color-background-soft);
+  background-color: ${(props) => (props.$theme === ThemeMode.dark ? 'var(--color-background-soft)' : '')};
   color: var(--color-text-2);
   &:hover {
     opacity: 0.9;
-    background-color: var(--color-background-mute) !important;
+    background-color: ${(props) => (props.$theme === ThemeMode.dark ? 'var(--color-background-mute)' : '')} !important;
     color: var(--color-text-1) !important;
     border-color: var(--color-border-mute) !important;
   }