From 4c2dddb1015b457845c75e2ffcafd7353204002e Mon Sep 17 00:00:00 2001
From: Yipeng Wang <reg20170621@163.com>
Date: Sun, 12 Apr 2026 00:30:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BE=A7=E6=A0=8F=E3=80=81?=
 =?UTF-8?q?=E5=BA=95=E6=A0=8F=E4=B8=8E=E7=8A=B6=E6=80=81=E6=8C=87=E7=A4=BA?=
 =?UTF-8?q?=E5=99=A8=E5=A4=9A=E9=A1=B9=E4=BD=93=E9=AA=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 侧栏：摄像头/屏幕/浏览器 Tab 与预览区对齐；直播/会话标签移入预览框内
- 底栏：压缩输入区高度；Footer 间距与折叠按钮布局；麦克风/举手按钮点击反馈
- 字幕：毛玻璃背景
- 状态：WebSocket 与 AI 状态文案更明确；AI 指示器与连接状态并排、颜色随状态变化
- 聊天：主容器居中对称，为收起按钮保留完整宽度
- 侧栏：Chakra Tooltip 与 Mode Menu 冲突，模式按钮改回 title
- 国际化：tooltip、wsStatus、aiState 等中英文更新

Made-with: Cursor
---
 package-lock.json                             |   4 +-
 src/renderer/src/App.tsx                      |   6 +-
 .../src/components/canvas/canvas-styles.tsx   |   8 +-
 .../components/footer/ai-state-indicator.tsx  |  28 +++-
 .../src/components/footer/footer-styles.tsx   |  26 +--
 src/renderer/src/components/footer/footer.tsx | 105 +++++++-----
 .../src/components/sidebar/browser-panel.tsx  |  11 +-
 .../src/components/sidebar/camera-panel.tsx   |   9 +-
 .../src/components/sidebar/screen-panel.tsx   |   9 +-
 .../src/components/sidebar/sidebar-styles.tsx |  15 +-
 .../src/components/sidebar/sidebar.tsx        | 157 ++++++++++--------
 src/renderer/src/locales/en/translation.json  |  33 +++-
 src/renderer/src/locales/zh/translation.json  |  33 +++-
 13 files changed, 271 insertions(+), 173 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6bd2ca1f..1cbf70c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "open-llm-vtuber",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "open-llm-vtuber",
-      "version": "1.2.0",
+      "version": "1.2.1",
       "hasInstallScript": true,
       "dependencies": {
         "@chakra-ui/react": "^3.2.3",
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 9fb874ec..f689112c 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -27,6 +27,7 @@ import { BrowserProvider } from "./context/browser-context";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 import Background from "./components/canvas/background";
 import WebSocketStatus from "./components/canvas/ws-status";
+import AIStateIndicator from "./components/footer/ai-state-indicator";
 import Subtitle from "./components/canvas/subtitle";
 import { ModeProvider, useMode } from "./context/mode-context";
 
@@ -121,9 +122,10 @@ function AppContent(): JSX.Element {
             </Box>
             <Box {...layoutStyles.mainContent}>
               <Background />
-              <Box position="absolute" top="20px" left="20px" zIndex={10}>
+              <Flex position="absolute" top="20px" left="20px" zIndex={10} gap={2} alignItems="center">
                 <WebSocketStatus />
-              </Box>
+                <AIStateIndicator />
+              </Flex>
               <Box
                 position="absolute"
                 bottom={isFooterCollapsed ? "39px" : "135px"}
diff --git a/src/renderer/src/components/canvas/canvas-styles.tsx b/src/renderer/src/components/canvas/canvas-styles.tsx
index 2462d9ae..063c8a67 100644
--- a/src/renderer/src/components/canvas/canvas-styles.tsx
+++ b/src/renderer/src/components/canvas/canvas-styles.tsx
@@ -38,11 +38,15 @@ export const canvasStyles = {
   },
   subtitle: {
     container: {
-      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      backgroundColor: 'rgba(0, 0, 0, 0.35)',
+      backdropFilter: 'blur(16px) saturate(180%)',
+      WebkitBackdropFilter: 'blur(16px) saturate(180%)',
+      border: '1px solid rgba(255, 255, 255, 0.12)',
       padding: '15px 30px',
-      borderRadius: '12px',
+      borderRadius: '16px',
       minWidth: '60%',
       maxWidth: '95%',
+      boxShadow: '0 4px 30px rgba(0, 0, 0, 0.15)',
     },
     text: {
       color: 'white',
diff --git a/src/renderer/src/components/footer/ai-state-indicator.tsx b/src/renderer/src/components/footer/ai-state-indicator.tsx
index 6d4192cf..164fd239 100644
--- a/src/renderer/src/components/footer/ai-state-indicator.tsx
+++ b/src/renderer/src/components/footer/ai-state-indicator.tsx
@@ -1,16 +1,34 @@
 import { Box, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { useAiState } from '@/context/ai-state-context';
-import { footerStyles } from './footer-styles';
+import { useAiState, AiStateEnum } from '@/context/ai-state-context';
+
+const stateColors: Record<string, string> = {
+  [AiStateEnum.IDLE]: 'gray.500',
+  [AiStateEnum.THINKING_SPEAKING]: '#7C5CFF',
+  [AiStateEnum.INTERRUPTED]: 'orange.500',
+  [AiStateEnum.LOADING]: 'yellow.500',
+  [AiStateEnum.LISTENING]: 'blue.400',
+  [AiStateEnum.WAITING]: 'gray.500',
+};
 
 function AIStateIndicator(): JSX.Element {
   const { t } = useTranslation();
   const { aiState } = useAiState();
-  const styles = footerStyles.aiIndicator;
+  const color = stateColors[aiState] || 'gray.500';
 
   return (
-    <Box {...styles.container}>
-      <Text {...styles.text}>{t(`aiState.${aiState}`)}</Text>
+    <Box
+      padding="8px 16px"
+      borderRadius="20px"
+      fontSize="14px"
+      fontWeight="medium"
+      color="white"
+      backgroundColor={color}
+      transition="all 0.3s"
+      userSelect="none"
+      whiteSpace="nowrap"
+    >
+      <Text fontSize="14px">{t(`aiState.${aiState}`)}</Text>
     </Box>
   );
 }
diff --git a/src/renderer/src/components/footer/footer-styles.tsx b/src/renderer/src/components/footer/footer-styles.tsx
index 49769a18..86400ec6 100644
--- a/src/renderer/src/components/footer/footer-styles.tsx
+++ b/src/renderer/src/components/footer/footer-styles.tsx
@@ -21,15 +21,18 @@ export const footerStyles: {
     container: (isCollapsed) => ({
       bg: isCollapsed ? 'transparent' : 'gray.800',
       borderTopRadius: isCollapsed ? 'none' : 'lg',
-      transform: isCollapsed ? 'translateY(calc(100% - 24px))' : 'translateY(0)',
+      transform: isCollapsed ? 'translateY(calc(100% - 20px))' : 'translateY(0)',
       transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
       height: '100%',
       position: 'relative',
       overflow: isCollapsed ? 'visible' : 'hidden',
-      pb: '4',
     }),
     toggleButton: {
-      height: '24px',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '20px',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -38,19 +41,20 @@ export const footerStyles: {
       _hover: { color: 'white' },
       bg: 'transparent',
       transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+      zIndex: 1,
     },
     actionButton: {
       borderRadius: '12px',
-      width: '50px',
-      height: '50px',
-      minW: '50px',
+      width: '44px',
+      height: '44px',
+      minW: '44px',
     },
     input: {
       bg: 'gray.700',
       border: 'none',
-      height: '80px',
+      height: '50px',
       borderRadius: '12px',
-      fontSize: '18px',
+      fontSize: '16px',
       pl: '12',
       pr: '4',
       color: 'whiteAlpha.900',
@@ -62,12 +66,12 @@ export const footerStyles: {
         bg: 'gray.700',
       },
       resize: 'none',
-      minHeight: '80px',
-      maxHeight: '80px',
+      minHeight: '50px',
+      maxHeight: '50px',
       py: '0',
       display: 'flex',
       alignItems: 'center',
-      paddingTop: '28px',
+      paddingTop: '14px',
       lineHeight: '1.4',
     },
     attachButton: {
diff --git a/src/renderer/src/components/footer/footer.tsx b/src/renderer/src/components/footer/footer.tsx
index 7c058614..600e9c45 100644
--- a/src/renderer/src/components/footer/footer.tsx
+++ b/src/renderer/src/components/footer/footer.tsx
@@ -7,9 +7,9 @@ import { IoHandRightSharp } from 'react-icons/io5';
 import { FiChevronDown } from 'react-icons/fi';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Tooltip } from '@/components/ui/tooltip';
 import { InputGroup } from '@/components/ui/input-group';
 import { footerStyles } from './footer-styles';
-import AIStateIndicator from './ai-state-indicator';
 import { useFooter } from '@/hooks/footer/use-footer';
 
 // Type definitions
@@ -38,40 +38,58 @@ interface MessageInputProps {
 }
 
 // Reusable components
-const ToggleButton = memo(({ isCollapsed, onToggle }: ToggleButtonProps) => (
-  <Box
-    {...footerStyles.footer.toggleButton}
-    onClick={onToggle}
-    color="whiteAlpha.500"
-    style={{
-      transform: isCollapsed ? 'rotate(180deg)' : 'rotate(0deg)',
-    }}
-  >
-    <FiChevronDown />
-  </Box>
-));
+const ToggleButton = memo(({ isCollapsed, onToggle }: ToggleButtonProps) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip content={isCollapsed ? t('tooltip.expandInput') : t('tooltip.collapseInput')} showArrow openDelay={300}>
+      <Box
+        {...footerStyles.footer.toggleButton}
+        onClick={onToggle}
+        color="whiteAlpha.500"
+        style={{
+          transform: isCollapsed ? 'rotate(180deg)' : 'rotate(0deg)',
+        }}
+      >
+        <FiChevronDown />
+      </Box>
+    </Tooltip>
+  );
+});
 
 ToggleButton.displayName = 'ToggleButton';
 
-const ActionButtons = memo(({ micOn, onMicToggle, onInterrupt }: ActionButtonsProps) => (
-  <HStack gap={2}>
-    <IconButton
-      bg={micOn ? 'green.500' : 'red.500'}
-      {...footerStyles.footer.actionButton}
-      onClick={onMicToggle}
-    >
-      {micOn ? <BsMicFill /> : <BsMicMuteFill />}
-    </IconButton>
-    <IconButton
-      aria-label="Raise hand"
-      bg="yellow.500"
-      {...footerStyles.footer.actionButton}
-      onClick={onInterrupt}
-    >
-      <IoHandRightSharp size="24" />
-    </IconButton>
-  </HStack>
-));
+const ActionButtons = memo(({ micOn, onMicToggle, onInterrupt }: ActionButtonsProps) => {
+  const { t } = useTranslation();
+  return (
+    <HStack gap={2}>
+      <Tooltip content={micOn ? t('tooltip.micOn') : t('tooltip.micOff')} showArrow openDelay={300}>
+        <IconButton
+          bg={micOn ? 'green.500' : 'red.500'}
+          {...footerStyles.footer.actionButton}
+          onClick={onMicToggle}
+          transition="all 0.15s ease"
+          _hover={{ bg: micOn ? 'green.400' : 'red.400', transform: 'scale(1.05)' }}
+          _active={{ bg: micOn ? 'green.600' : 'red.600', transform: 'scale(0.88)', boxShadow: micOn ? '0 0 12px rgba(34, 197, 94, 0.6)' : '0 0 12px rgba(239, 68, 68, 0.6)' }}
+        >
+          {micOn ? <BsMicFill /> : <BsMicMuteFill />}
+        </IconButton>
+      </Tooltip>
+      <Tooltip content={t('tooltip.raiseHand')} showArrow openDelay={300}>
+        <IconButton
+          aria-label="Raise hand"
+          bg="yellow.500"
+          {...footerStyles.footer.actionButton}
+          onClick={onInterrupt}
+          transition="all 0.15s ease"
+          _hover={{ bg: 'yellow.400', transform: 'scale(1.05)' }}
+          _active={{ bg: 'yellow.600', transform: 'scale(0.88)', boxShadow: '0 0 12px rgba(234, 179, 8, 0.6)' }}
+        >
+          <IoHandRightSharp size="24" />
+        </IconButton>
+      </Tooltip>
+    </HStack>
+  );
+});
 
 ActionButtons.displayName = 'ActionButtons';
 
@@ -87,13 +105,15 @@ const MessageInput = memo(({
   return (
     <InputGroup flex={1}>
       <Box position="relative" width="100%">
-        <IconButton
-          aria-label="Attach file"
-          variant="ghost"
-          {...footerStyles.footer.attachButton}
-        >
-          <BsPaperclip size="24" />
-        </IconButton>
+        <Tooltip content={t('tooltip.attachFile')} showArrow openDelay={300}>
+          <IconButton
+            aria-label="Attach file"
+            variant="ghost"
+            {...footerStyles.footer.attachButton}
+          >
+            <BsPaperclip size="24" />
+          </IconButton>
+        </Tooltip>
         <Textarea
           value={value}
           onChange={onChange}
@@ -127,12 +147,9 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
     <Box {...footerStyles.footer.container(isCollapsed)}>
       <ToggleButton isCollapsed={isCollapsed} onToggle={onToggle} />
 
-      <Box pt="0" px="4">
-        <HStack width="100%" gap={4}>
+      <Box pt="24px" pb="24px" px="4">
+        <HStack width="100%" gap={3} alignItems="center">
           <Box>
-            <Box mb="1.5">
-              <AIStateIndicator />
-            </Box>
             <ActionButtons
               micOn={micOn}
               onMicToggle={handleMicToggle}
diff --git a/src/renderer/src/components/sidebar/browser-panel.tsx b/src/renderer/src/components/sidebar/browser-panel.tsx
index 3260491f..22eb9cfc 100644
--- a/src/renderer/src/components/sidebar/browser-panel.tsx
+++ b/src/renderer/src/components/sidebar/browser-panel.tsx
@@ -36,12 +36,6 @@ function BrowserPanel(): JSX.Element {
 
   return (
     <Box {...sidebarStyles.browserPanel.container}>
-      <Box {...sidebarStyles.browserPanel.header}>
-        {browserViewData && (
-          <Text fontSize="sm" color="blue.300">{t('sidebar.browserSession')}</Text>
-        )}
-      </Box>
-
       <Tooltip
         showArrow
         content={
@@ -57,6 +51,11 @@ function BrowserPanel(): JSX.Element {
           onMouseLeave={handleMouseLeave}
           position="relative"
         >
+          {browserViewData && (
+            <Box position="absolute" top="8px" left="10px" zIndex={1}>
+              <Text fontSize="sm" color="blue.300">{t('sidebar.browserSession')}</Text>
+            </Box>
+          )}
           {browserViewData ? (
             <iframe
               src={browserViewData.debuggerFullscreenUrl}
diff --git a/src/renderer/src/components/sidebar/camera-panel.tsx b/src/renderer/src/components/sidebar/camera-panel.tsx
index 4307f911..67103bbb 100644
--- a/src/renderer/src/components/sidebar/camera-panel.tsx
+++ b/src/renderer/src/components/sidebar/camera-panel.tsx
@@ -78,10 +78,6 @@ function CameraPanel(): JSX.Element {
 
   return (
     <Box {...sidebarStyles.cameraPanel.container}>
-      <Box {...sidebarStyles.cameraPanel.header}>
-        {isStreaming && <LiveIndicator />}
-      </Box>
-
       <Tooltip
         showArrow
         content={isStreaming ? t('footer.cameraStopping') : t('footer.cameraControl')}
@@ -98,6 +94,11 @@ function CameraPanel(): JSX.Element {
             bg: 'whiteAlpha.100',
           }}
         >
+          {isStreaming && (
+            <Box position="absolute" top="8px" left="10px" zIndex={1}>
+              <LiveIndicator />
+            </Box>
+          )}
           {error ? (
             <Text color="red.300" fontSize="sm" textAlign="center">
               {error}
diff --git a/src/renderer/src/components/sidebar/screen-panel.tsx b/src/renderer/src/components/sidebar/screen-panel.tsx
index 78823745..f58d2038 100644
--- a/src/renderer/src/components/sidebar/screen-panel.tsx
+++ b/src/renderer/src/components/sidebar/screen-panel.tsx
@@ -76,10 +76,6 @@ function ScreenPanel(): JSX.Element {
 
   return (
     <Box {...sidebarStyles.screenPanel.container}>
-      <Box {...sidebarStyles.screenPanel.header}>
-        {isStreaming && <ScreenIndicator />}
-      </Box>
-
       <Tooltip
         showArrow
         content={
@@ -100,6 +96,11 @@ function ScreenPanel(): JSX.Element {
             bg: "whiteAlpha.100",
           }}
         >
+          {isStreaming && (
+            <Box position="absolute" top="8px" left="10px" zIndex={1}>
+              <ScreenIndicator />
+            </Box>
+          )}
           {error ? (
             <Text color="red.300" fontSize="sm" textAlign="center">
               {error}
diff --git a/src/renderer/src/components/sidebar/sidebar-styles.tsx b/src/renderer/src/components/sidebar/sidebar-styles.tsx
index 8631d1b4..e6e8b552 100644
--- a/src/renderer/src/components/sidebar/sidebar-styles.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-styles.tsx
@@ -239,9 +239,8 @@ export const sidebarStyles = {
 
   cameraPanel: {
     container: {
-      width: '97%',
+      width: '100%',
       overflow: 'hidden',
-      px: 4,
       minH: '240px',
     },
     header: {
@@ -273,9 +272,8 @@ export const sidebarStyles = {
 
   screenPanel: {
     container: {
-      width: '97%',
+      width: '100%',
       overflow: 'hidden',
-      px: 4,
       minH: '240px',
     },
     header: {
@@ -307,9 +305,8 @@ export const sidebarStyles = {
   // Add Browser Panel Styles
   browserPanel: {
     container: {
-      width: '97%',
+      width: '100%',
       overflow: 'hidden',
-      px: 4,
       minH: '240px',
     },
     header: {
@@ -343,7 +340,7 @@ export const sidebarStyles = {
 
   bottomTab: {
     container: {
-      width: '97%',
+      width: '100%',
       px: 4,
       position: 'relative' as const,
       zIndex: 0,
@@ -519,8 +516,8 @@ export const chatPanelStyles = css`
   .cs-main-container {
     border: none !important;
     background: transparent !important;
-    width: calc(100% - 24px) !important;
-    margin-left: 0 !important;
+    width: calc(100% - 48px) !important;
+    margin: 0 auto !important;
   }
 
   .cs-message__sender {
diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx
index afb705aa..5e4fdfce 100644
--- a/src/renderer/src/components/sidebar/sidebar.tsx
+++ b/src/renderer/src/components/sidebar/sidebar.tsx
@@ -4,6 +4,8 @@ import {
   FiSettings, FiClock, FiPlus, FiChevronLeft, FiUsers, FiLayers
 } from 'react-icons/fi';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from '@/components/ui/tooltip';
 import { sidebarStyles } from './sidebar-styles';
 import SettingUI from './setting/setting-ui';
 import ChatHistoryPanel from './chat-history-panel';
@@ -31,17 +33,22 @@ interface HeaderButtonsProps {
 const ToggleButton = memo(({ isCollapsed, onToggle }: {
   isCollapsed: boolean
   onToggle: () => void
-}) => (
-  <Box
-    {...sidebarStyles.sidebar.toggleButton}
-    style={{
-      transform: isCollapsed ? 'rotate(180deg)' : 'rotate(0deg)',
-    }}
-    onClick={onToggle}
-  >
-    <FiChevronLeft />
-  </Box>
-));
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip content={isCollapsed ? t('tooltip.expandSidebar') : t('tooltip.collapseSidebar')} showArrow openDelay={300} positioning={{ placement: 'right' }}>
+      <Box
+        {...sidebarStyles.sidebar.toggleButton}
+        style={{
+          transform: isCollapsed ? 'rotate(180deg)' : 'rotate(0deg)',
+        }}
+        onClick={onToggle}
+      >
+        <FiChevronLeft />
+      </Box>
+    </Tooltip>
+  );
+});
 
 ToggleButton.displayName = 'ToggleButton';
 
@@ -49,64 +56,82 @@ const ModeMenu = memo(({ setMode, currentMode, isElectron }: {
   setMode: (mode: ModeType) => void
   currentMode: ModeType
   isElectron: boolean
-}) => (
-  <Menu.Root>
-    <Menu.Trigger as={Button} aria-label="Mode Menu" title="Change Mode">
-      <FiLayers />
-    </Menu.Trigger>
-    <Menu.Positioner>
-      <Menu.Content>
-        <Menu.RadioItemGroup value={currentMode}>
-          <Menu.RadioItem value="window" onClick={() => setMode('window')}>
-            <Menu.ItemIndicator />
-            Live Mode
-          </Menu.RadioItem>
-          <Menu.RadioItem 
-            value="pet" 
-            onClick={() => {
-              if (isElectron) {
-                setMode('pet');
-              }
-            }}
-            disabled={!isElectron}
-            title={!isElectron ? "Pet mode is only available in desktop app" : undefined}
-          >
-            <Menu.ItemIndicator />
-            Pet Mode
-          </Menu.RadioItem>
-        </Menu.RadioItemGroup>
-      </Menu.Content>
-    </Menu.Positioner>
-  </Menu.Root>
-));
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Menu.Root>
+      <Menu.Trigger as={Button} aria-label="Mode Menu" title={t('tooltip.changeMode')}>
+        <FiLayers />
+      </Menu.Trigger>
+      <Menu.Positioner>
+        <Menu.Content>
+          <Menu.RadioItemGroup value={currentMode}>
+            <Menu.RadioItem value="window" onClick={() => setMode('window')}>
+              <Menu.ItemIndicator />
+              Live Mode
+            </Menu.RadioItem>
+            <Menu.RadioItem 
+              value="pet" 
+              onClick={() => {
+                if (isElectron) {
+                  setMode('pet');
+                }
+              }}
+              disabled={!isElectron}
+              title={!isElectron ? "Pet mode is only available in desktop app" : undefined}
+            >
+              <Menu.ItemIndicator />
+              Pet Mode
+            </Menu.RadioItem>
+          </Menu.RadioItemGroup>
+        </Menu.Content>
+      </Menu.Positioner>
+    </Menu.Root>
+  );
+});
 
 ModeMenu.displayName = 'ModeMenu';
 
-const HeaderButtons = memo(({ onSettingsOpen, onNewHistory, setMode, currentMode, isElectron }: HeaderButtonsProps) => (
-  <Box display="flex" gap={1}>
-    <Button onClick={onSettingsOpen}>
-      <FiSettings />
-    </Button>
-
-    <GroupDrawer>
-      <Button>
-        <FiUsers />
-      </Button>
-    </GroupDrawer>
-
-    <HistoryDrawer>
-      <Button>
-        <FiClock />
-      </Button>
-    </HistoryDrawer>
-
-    <Button onClick={onNewHistory}>
-      <FiPlus />
-    </Button>
-
-    <ModeMenu setMode={setMode} currentMode={currentMode} isElectron={isElectron} />
-  </Box>
-));
+const HeaderButtons = memo(({ onSettingsOpen, onNewHistory, setMode, currentMode, isElectron }: HeaderButtonsProps) => {
+  const { t } = useTranslation();
+  return (
+    <Box display="flex" gap={1}>
+      <Tooltip content={t('tooltip.settings')} showArrow openDelay={300}>
+        <Button onClick={onSettingsOpen}>
+          <FiSettings />
+        </Button>
+      </Tooltip>
+
+      <GroupDrawer>
+        <Box as="span" display="inline-flex">
+          <Tooltip content={t('tooltip.group')} showArrow openDelay={300}>
+            <Button>
+              <FiUsers />
+            </Button>
+          </Tooltip>
+        </Box>
+      </GroupDrawer>
+
+      <HistoryDrawer>
+        <Box as="span" display="inline-flex">
+          <Tooltip content={t('tooltip.chatHistory')} showArrow openDelay={300}>
+            <Button>
+              <FiClock />
+            </Button>
+          </Tooltip>
+        </Box>
+      </HistoryDrawer>
+
+      <Tooltip content={t('tooltip.newChat')} showArrow openDelay={300}>
+        <Button onClick={onNewHistory}>
+          <FiPlus />
+        </Button>
+      </Tooltip>
+
+      <ModeMenu setMode={setMode} currentMode={currentMode} isElectron={isElectron} />
+    </Box>
+  );
+});
 
 HeaderButtons.displayName = 'HeaderButtons';
 
diff --git a/src/renderer/src/locales/en/translation.json b/src/renderer/src/locales/en/translation.json
index 96cb2c82..3eed997f 100644
--- a/src/renderer/src/locales/en/translation.json
+++ b/src/renderer/src/locales/en/translation.json
@@ -124,16 +124,31 @@
     "vadMisfire": "Voice detected but too brief. Try speaking louder/longer, or adjust settings (lower speech threshold, lower negative threshold, reduce redemption frames)."
   },
   "aiState": {
-    "idle": "idle",
-    "thinking-speaking": "thinking/speaking",
-    "interrupted": "interrupted",
-    "loading": "loading",
-    "listening": "listening",
-    "waiting": "waiting"
+    "idle": "AI Idle",
+    "thinking-speaking": "AI Speaking",
+    "interrupted": "AI Interrupted",
+    "loading": "AI Loading",
+    "listening": "AI Listening",
+    "waiting": "AI Waiting"
   },
   "wsStatus": {
-    "connected": "Connected",
-    "connecting": "Connecting",
-    "clickToReconnect": "Click to Reconnect"
+    "connected": "Server Connected",
+    "connecting": "Server Connecting...",
+    "clickToReconnect": "Disconnected. Click to Reconnect"
+  },
+  "tooltip": {
+    "settings": "Settings",
+    "group": "Group Management",
+    "chatHistory": "Chat History",
+    "newChat": "New Chat",
+    "changeMode": "Change Mode",
+    "collapseSidebar": "Collapse Sidebar",
+    "expandSidebar": "Expand Sidebar",
+    "micOn": "Microphone On (click to mute)",
+    "micOff": "Microphone Off (click to unmute)",
+    "raiseHand": "Raise Hand / Interrupt",
+    "attachFile": "Attach File",
+    "collapseInput": "Collapse Input",
+    "expandInput": "Expand Input"
   }
 } 
\ No newline at end of file
diff --git a/src/renderer/src/locales/zh/translation.json b/src/renderer/src/locales/zh/translation.json
index 575a7e93..87ec90e3 100644
--- a/src/renderer/src/locales/zh/translation.json
+++ b/src/renderer/src/locales/zh/translation.json
@@ -121,16 +121,31 @@
     "vadMisfire": "检测到语音但过于简短，请尝试提高音量或说得更久一些，或调整识别设置（降低语音识别阈值、降低负面语音阈值、减少验证帧数）"
   },
   "aiState": {
-    "idle": "空闲",
-    "thinking-speaking": "思考/说话中",
-    "interrupted": "已打断",
-    "loading": "加载中",
-    "listening": "聆听中",
-    "waiting": "等待中"
+    "idle": "AI 空闲",
+    "thinking-speaking": "AI 说话中",
+    "interrupted": "AI 已打断",
+    "loading": "AI 加载中",
+    "listening": "AI 聆听中",
+    "waiting": "AI 等待中"
   },
   "wsStatus": {
-    "connected": "已连接",
-    "connecting": "连接中",
-    "clickToReconnect": "点击重新连接"
+    "connected": "服务器已连接",
+    "connecting": "服务器连接中...",
+    "clickToReconnect": "连接断开，点击重连"
+  },
+  "tooltip": {
+    "settings": "设置",
+    "group": "群组管理",
+    "chatHistory": "聊天历史",
+    "newChat": "新建对话",
+    "changeMode": "切换模式",
+    "collapseSidebar": "收起侧栏",
+    "expandSidebar": "展开侧栏",
+    "micOn": "麦克风已开启（点击关闭）",
+    "micOff": "麦克风已关闭（点击开启）",
+    "raiseHand": "举手 / 打断",
+    "attachFile": "添加附件",
+    "collapseInput": "收起输入栏",
+    "expandInput": "展开输入栏"
   }
 } 
\ No newline at end of file