From 13eca24da8e732d14bbfb733d7bd158475279647 Mon Sep 17 00:00:00 2001
From: XnneHang <XnneHang@gmail.com>
Date: Wed, 4 Feb 2026 18:40:10 +0800
Subject: [PATCH 1/7] feat: Add file attachment handling for chat input (#1)

---
 src/renderer/src/components/footer/footer.tsx | 35 ++++++++++-
 src/renderer/src/hooks/footer/use-footer.ts   |  4 ++
 .../src/hooks/footer/use-text-input.tsx       | 63 +++++++++++++++++--
 .../src/hooks/utils/use-media-capture.tsx     |  4 +-
 src/renderer/src/locales/en/translation.json  |  8 ++-
 src/renderer/src/locales/zh/translation.json  |  8 ++-
 6 files changed, 110 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/components/footer/footer.tsx b/src/renderer/src/components/footer/footer.tsx
index 7c058614..ab584526 100644
--- a/src/renderer/src/components/footer/footer.tsx
+++ b/src/renderer/src/components/footer/footer.tsx
@@ -5,7 +5,7 @@ import {
 import { BsMicFill, BsMicMuteFill, BsPaperclip } from 'react-icons/bs';
 import { IoHandRightSharp } from 'react-icons/io5';
 import { FiChevronDown } from 'react-icons/fi';
-import { memo } from 'react';
+import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InputGroup } from '@/components/ui/input-group';
 import { footerStyles } from './footer-styles';
@@ -35,6 +35,8 @@ interface MessageInputProps {
   onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
   onCompositionStart: () => void
   onCompositionEnd: () => void
+  onAttachFiles: (files: FileList | null) => void
+  attachedCount: number
 }
 
 // Reusable components
@@ -81,8 +83,11 @@ const MessageInput = memo(({
   onKeyDown,
   onCompositionStart,
   onCompositionEnd,
+  onAttachFiles,
+  attachedCount,
 }: MessageInputProps) => {
   const { t } = useTranslation();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   return (
     <InputGroup flex={1}>
@@ -91,9 +96,22 @@ const MessageInput = memo(({
           aria-label="Attach file"
           variant="ghost"
           {...footerStyles.footer.attachButton}
+          onClick={() => fileInputRef.current?.click()}
         >
           <BsPaperclip size="24" />
         </IconButton>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          style={{ display: 'none' }}
+          onChange={(event) => {
+            onAttachFiles(event.target.files);
+            event.target.value = '';
+          }}
+          aria-label={t('footer.attachFile')}
+        />
         <Textarea
           value={value}
           onChange={onChange}
@@ -103,6 +121,17 @@ const MessageInput = memo(({
           placeholder={t('footer.typeYourMessage')}
           {...footerStyles.footer.input}
         />
+        {attachedCount > 0 && (
+          <Box
+            position="absolute"
+            top="2"
+            right="2"
+            fontSize="xs"
+            color="whiteAlpha.700"
+          >
+            {t('footer.attachmentsCount', { count: attachedCount })}
+          </Box>
+        )}
       </Box>
     </InputGroup>
   );
@@ -118,6 +147,8 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
     handleKeyPress,
     handleCompositionStart,
     handleCompositionEnd,
+    handleAttachFiles,
+    attachedImages,
     handleInterrupt,
     handleMicToggle,
     micOn,
@@ -146,6 +177,8 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
             onKeyDown={handleKeyPress}
             onCompositionStart={handleCompositionStart}
             onCompositionEnd={handleCompositionEnd}
+            onAttachFiles={handleAttachFiles}
+            attachedCount={attachedImages.length}
           />
         </HStack>
       </Box>
diff --git a/src/renderer/src/hooks/footer/use-footer.ts b/src/renderer/src/hooks/footer/use-footer.ts
index 34865fac..7f9f4e2c 100644
--- a/src/renderer/src/hooks/footer/use-footer.ts
+++ b/src/renderer/src/hooks/footer/use-footer.ts
@@ -14,6 +14,8 @@ export const useFooter = () => {
     handleKeyPress: handleKey,
     handleCompositionStart,
     handleCompositionEnd,
+    handleAttachFiles,
+    attachedImages,
   } = useTextInput();
 
   const { interrupt } = useInterrupt();
@@ -49,6 +51,8 @@ export const useFooter = () => {
     handleKeyPress,
     handleCompositionStart,
     handleCompositionEnd,
+    handleAttachFiles,
+    attachedImages,
     handleInterrupt,
     handleMicToggle,
     micOn,
diff --git a/src/renderer/src/hooks/footer/use-text-input.tsx b/src/renderer/src/hooks/footer/use-text-input.tsx
index d2499ffa..8f69a8b0 100644
--- a/src/renderer/src/hooks/footer/use-text-input.tsx
+++ b/src/renderer/src/hooks/footer/use-text-input.tsx
@@ -1,14 +1,18 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useWebSocket } from '@/context/websocket-context';
 import { useAiState } from '@/context/ai-state-context';
 import { useInterrupt } from '@/components/canvas/live2d';
 import { useChatHistory } from '@/context/chat-history-context';
 import { useVAD } from '@/context/vad-context';
-import { useMediaCapture } from '@/hooks/utils/use-media-capture';
+import { toaster } from '@/components/ui/toaster';
+import { useMediaCapture, ImageData } from '@/hooks/utils/use-media-capture';
 
 export function useTextInput() {
+  const { t } = useTranslation();
   const [inputText, setInputText] = useState('');
   const [isComposing, setIsComposing] = useState(false);
+  const [attachedImages, setAttachedImages] = useState<ImageData[]>([]);
   const wsContext = useWebSocket();
   const { aiState } = useAiState();
   const { interrupt } = useInterrupt();
@@ -20,15 +24,61 @@ export function useTextInput() {
     setInputText(e.target.value);
   };
 
+  const readFileAsDataUrl = useCallback((file: File) => new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  }), []);
+
+  const handleAttachFiles = useCallback(async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+
+    const newImages: ImageData[] = [];
+    for (const file of Array.from(files)) {
+      if (!file.type.startsWith('image/')) {
+        toaster.create({
+          title: t('error.unsupportedFileType'),
+          type: 'error',
+          duration: 2000,
+        });
+        continue;
+      }
+
+      try {
+        const dataUrl = await readFileAsDataUrl(file);
+        newImages.push({
+          source: 'upload',
+          data: dataUrl,
+          mime_type: file.type || 'image/*',
+        });
+      } catch (error) {
+        console.error('Failed to read attachment:', error);
+        toaster.create({
+          title: t('error.failedReadFile', { filename: file.name }),
+          type: 'error',
+          duration: 2000,
+        });
+      }
+    }
+
+    if (newImages.length > 0) {
+      setAttachedImages((prev) => [...prev, ...newImages]);
+    }
+  }, [readFileAsDataUrl, t]);
+
   const handleSend = async () => {
-    if (!inputText.trim() || !wsContext) return;
+    if (!wsContext) return;
+    if (!inputText.trim() && attachedImages.length === 0) return;
     if (aiState === 'thinking-speaking') {
       interrupt();
     }
 
-    const images = await captureAllMedia();
+    const images = [...(await captureAllMedia()), ...attachedImages];
 
-    appendHumanMessage(inputText.trim());
+    if (inputText.trim()) {
+      appendHumanMessage(inputText.trim());
+    }
     wsContext.sendMessage({
       type: 'text-input',
       text: inputText.trim(),
@@ -37,6 +87,7 @@ export function useTextInput() {
 
     if (autoStopMic) stopMic();
     setInputText('');
+    setAttachedImages([]);
   };
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -55,8 +106,10 @@ export function useTextInput() {
     inputText,
     setInputText: handleInputChange,
     handleSend,
+    handleAttachFiles,
     handleKeyPress,
     handleCompositionStart,
     handleCompositionEnd,
+    attachedImages,
   };
 }
diff --git a/src/renderer/src/hooks/utils/use-media-capture.tsx b/src/renderer/src/hooks/utils/use-media-capture.tsx
index 19170d08..c4c4c905 100644
--- a/src/renderer/src/hooks/utils/use-media-capture.tsx
+++ b/src/renderer/src/hooks/utils/use-media-capture.tsx
@@ -19,8 +19,8 @@ declare class ImageCapture {
   grabFrame(): Promise<ImageBitmap>;
 }
 
-interface ImageData {
-  source: 'camera' | 'screen';
+export interface ImageData {
+  source: 'camera' | 'screen' | 'upload';
   data: string;
   mime_type: string;
 }
diff --git a/src/renderer/src/locales/en/translation.json b/src/renderer/src/locales/en/translation.json
index 96cb2c82..c91c4ab8 100644
--- a/src/renderer/src/locales/en/translation.json
+++ b/src/renderer/src/locales/en/translation.json
@@ -71,7 +71,9 @@
     "cameraControl": "Click to start camera",
     "cameraStopping": "Click to stop camera",
     "screenControl": "Click to start screen capture",
-    "screenStopping": "Click to stop screen capture"
+    "screenStopping": "Click to stop screen capture",
+    "attachFile": "Attach file",
+    "attachmentsCount": "{{count}} attachment(s)"
   },
   "sidebar": {
     "camera": "Camera",
@@ -119,7 +121,9 @@
     "enterValidUuid": "Please enter a valid UUID",
     "cannotDeleteCurrentHistory": "Cannot delete current chat history",
     "failedCapture": "Failed to capture {{source}} frame",
+    "failedReadFile": "Failed to read attachment {{filename}}",
     "failedParseWebSocket": "Failed to parse WebSocket message",
+    "unsupportedFileType": "Only image files can be attached.",
     "websocketNotOpen": "WebSocket is not open.",
     "vadMisfire": "Voice detected but too brief. Try speaking louder/longer, or adjust settings (lower speech threshold, lower negative threshold, reduce redemption frames)."
   },
@@ -136,4 +140,4 @@
     "connecting": "Connecting",
     "clickToReconnect": "Click to Reconnect"
   }
-} 
\ 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..e3e6cbd7 100644
--- a/src/renderer/src/locales/zh/translation.json
+++ b/src/renderer/src/locales/zh/translation.json
@@ -68,7 +68,9 @@
     "cameraControl": "点击启动摄像头",
     "cameraStopping": "点击停止摄像头",
     "screenControl": "点击开始屏幕共享",
-    "screenStopping": "点击停止屏幕共享"
+    "screenStopping": "点击停止屏幕共享",
+    "attachFile": "上传文件",
+    "attachmentsCount": "已添加{{count}}个附件"
   },
   "sidebar": {
     "camera": "摄像头",
@@ -116,7 +118,9 @@
     "enterValidUuid": "请输入有效的UUID",
     "cannotDeleteCurrentHistory": "无法删除当前聊天记录",
     "failedCapture": "捕获{{source}}帧失败",
+    "failedReadFile": "读取附件{{filename}}失败",
     "failedParseWebSocket": "解析WebSocket消息失败",
+    "unsupportedFileType": "仅支持上传图片文件",
     "websocketNotOpen": "WebSocket未连接",
     "vadMisfire": "检测到语音但过于简短，请尝试提高音量或说得更久一些，或调整识别设置（降低语音识别阈值、降低负面语音阈值、减少验证帧数）"
   },
@@ -133,4 +137,4 @@
     "connecting": "连接中",
     "clickToReconnect": "点击重新连接"
   }
-} 
\ No newline at end of file
+} 

From 0e49cb456d654d3954eeeb4ec98b8a4032b8dc82 Mon Sep 17 00:00:00 2001
From: XnneHang <XnneHang@gmail.com>
Date: Wed, 4 Feb 2026 21:45:21 +0800
Subject: [PATCH 2/7] Move attachment previews above input and wire image
 attachments into chat history (#2)

* Move attachment previews above input

* Allow footer to grow for attachments

* Style attachment preview container

* Prevent attachment preview from shrinking

* Move attachment previews to dedicated row and lift footer when attachments present (#3)

* Adjust footer attachment layout

* Refine footer lift and default window size
---
 src/main/window-manager.ts                    |  16 ++-
 .../src/components/footer/footer-styles.tsx   |   8 +-
 src/renderer/src/components/footer/footer.tsx | 127 +++++++++++-------
 .../components/sidebar/chat-history-panel.tsx |  26 +++-
 .../src/context/chat-history-context.tsx      |   6 +-
 .../src/hooks/footer/use-text-input.tsx       |  15 ++-
 .../src/hooks/utils/use-media-capture.tsx     |   9 +-
 src/renderer/src/layout.tsx                   |   3 +-
 src/renderer/src/locales/en/translation.json  |   1 +
 src/renderer/src/locales/zh/translation.json  |   1 +
 .../src/services/websocket-service.tsx        |   2 +
 src/renderer/src/types/media.ts               |   5 +
 12 files changed, 148 insertions(+), 71 deletions(-)
 create mode 100644 src/renderer/src/types/media.ts

diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts
index 3161feeb..683f8269 100644
--- a/src/main/window-manager.ts
+++ b/src/main/window-manager.ts
@@ -23,6 +23,14 @@ export class WindowManager {
   // Track if mouse events are forcibly ignored
   private forceIgnoreMouse = false;
 
+  private getDefaultWindowSize(): { width: number; height: number } {
+    const { width, height } = screen.getPrimaryDisplay().workArea;
+    return {
+      width: Math.round(width * 0.5),
+      height: Math.round(height * 0.6),
+    };
+  }
+
   constructor() {
     ipcMain.on('renderer-ready-for-mode-change', (_event, newMode) => {
       if (newMode === 'pet') {
@@ -54,9 +62,10 @@ export class WindowManager {
   }
 
   createWindow(options: Electron.BrowserWindowConstructorOptions): BrowserWindow {
+    const { width, height } = this.getDefaultWindowSize();
     this.window = new BrowserWindow({
-      width: 900,
-      height: 670,
+      width,
+      height,
       show: false,
       transparent: true,
       backgroundColor: '#ffffff',
@@ -168,7 +177,8 @@ export class WindowManager {
     if (this.windowedBounds) {
       this.window.setBounds(this.windowedBounds);
     } else {
-      this.window.setSize(900, 670);
+      const { width, height } = this.getDefaultWindowSize();
+      this.window.setSize(width, height);
       this.window.center();
     }
 
diff --git a/src/renderer/src/components/footer/footer-styles.tsx b/src/renderer/src/components/footer/footer-styles.tsx
index 49769a18..1a292cb8 100644
--- a/src/renderer/src/components/footer/footer-styles.tsx
+++ b/src/renderer/src/components/footer/footer-styles.tsx
@@ -1,7 +1,7 @@
 import { SystemStyleObject } from '@chakra-ui/react';
 
 interface FooterStyles {
-  container: (isCollapsed: boolean) => SystemStyleObject
+  container: (isCollapsed: boolean, hasAttachments: boolean) => SystemStyleObject
   toggleButton: SystemStyleObject
   actionButton: SystemStyleObject
   input: SystemStyleObject
@@ -18,13 +18,15 @@ export const footerStyles: {
   aiIndicator: AIIndicatorStyles
 } = {
   footer: {
-    container: (isCollapsed) => ({
+    container: (isCollapsed, hasAttachments) => ({
       bg: isCollapsed ? 'transparent' : 'gray.800',
       borderTopRadius: isCollapsed ? 'none' : 'lg',
       transform: isCollapsed ? 'translateY(calc(100% - 24px))' : 'translateY(0)',
       transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      height: '100%',
+      height: 'auto',
+      minHeight: isCollapsed ? 'auto' : { base: '100px', md: '120px' },
       position: 'relative',
+      bottom: !isCollapsed && hasAttachments ? '5vh' : '0',
       overflow: isCollapsed ? 'visible' : 'hidden',
       pb: '4',
     }),
diff --git a/src/renderer/src/components/footer/footer.tsx b/src/renderer/src/components/footer/footer.tsx
index ab584526..6376bba8 100644
--- a/src/renderer/src/components/footer/footer.tsx
+++ b/src/renderer/src/components/footer/footer.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/require-default-props */
 import {
-  Box, Textarea, IconButton, HStack,
+  Box, Textarea, IconButton, HStack, Image,
 } from '@chakra-ui/react';
 import { BsMicFill, BsMicMuteFill, BsPaperclip } from 'react-icons/bs';
 import { IoHandRightSharp } from 'react-icons/io5';
@@ -90,50 +90,52 @@ const MessageInput = memo(({
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   return (
-    <InputGroup flex={1}>
-      <Box position="relative" width="100%">
-        <IconButton
-          aria-label="Attach file"
-          variant="ghost"
-          {...footerStyles.footer.attachButton}
-          onClick={() => fileInputRef.current?.click()}
-        >
-          <BsPaperclip size="24" />
-        </IconButton>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          multiple
-          style={{ display: 'none' }}
-          onChange={(event) => {
-            onAttachFiles(event.target.files);
-            event.target.value = '';
-          }}
-          aria-label={t('footer.attachFile')}
-        />
-        <Textarea
-          value={value}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-          onCompositionStart={onCompositionStart}
-          onCompositionEnd={onCompositionEnd}
-          placeholder={t('footer.typeYourMessage')}
-          {...footerStyles.footer.input}
-        />
-        {attachedCount > 0 && (
-          <Box
-            position="absolute"
-            top="2"
-            right="2"
-            fontSize="xs"
-            color="whiteAlpha.700"
+    <Box flex={1} minW="0" display="flex" flexDirection="column" gap="2">
+      <InputGroup>
+        <Box position="relative" width="100%">
+          <IconButton
+            aria-label="Attach file"
+            variant="ghost"
+            {...footerStyles.footer.attachButton}
+            onClick={() => fileInputRef.current?.click()}
           >
-            {t('footer.attachmentsCount', { count: attachedCount })}
-          </Box>
-        )}
-      </Box>
-    </InputGroup>
+            <BsPaperclip size="24" />
+          </IconButton>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            style={{ display: 'none' }}
+            onChange={(event) => {
+              onAttachFiles(event.target.files);
+              event.target.value = '';
+            }}
+            aria-label={t('footer.attachFile')}
+          />
+          <Textarea
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            onCompositionStart={onCompositionStart}
+            onCompositionEnd={onCompositionEnd}
+            placeholder={t('footer.typeYourMessage')}
+            {...footerStyles.footer.input}
+          />
+          {attachedCount > 0 && (
+            <Box
+              position="absolute"
+              top="2"
+              right="2"
+              fontSize="xs"
+              color="whiteAlpha.700"
+            >
+              {t('footer.attachmentsCount', { count: attachedCount })}
+            </Box>
+          )}
+        </Box>
+      </InputGroup>
+    </Box>
   );
 });
 
@@ -141,6 +143,7 @@ MessageInput.displayName = 'MessageInput';
 
 // Main component
 function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
+  const { t } = useTranslation();
   const {
     inputValue,
     handleInputChange,
@@ -155,12 +158,42 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
   } = useFooter();
 
   return (
-    <Box {...footerStyles.footer.container(isCollapsed)}>
+    <Box {...footerStyles.footer.container(isCollapsed, attachedImages.length > 0)}>
       <ToggleButton isCollapsed={isCollapsed} onToggle={onToggle} />
 
       <Box pt="0" px="4">
-        <HStack width="100%" gap={4}>
-          <Box>
+        {attachedImages.length > 0 && (
+          <Box
+            width="100%"
+            minW="0"
+            bg="gray.700"
+            borderRadius="12px"
+            px="3"
+            py="2"
+            mb="3"
+          >
+            <HStack spacing="2" flexWrap="wrap">
+              {attachedImages.map((image, index) => (
+                <Box
+                  key={`${image.data}-${index}`}
+                  borderRadius="md"
+                  overflow="hidden"
+                  border="1px solid"
+                  borderColor="whiteAlpha.300"
+                >
+                  <Image
+                    src={image.data}
+                    alt={t('footer.attachFile')}
+                    boxSize="64px"
+                    objectFit="cover"
+                  />
+                </Box>
+              ))}
+            </HStack>
+          </Box>
+        )}
+        <HStack width="100%" gap={4} align="flex-start">
+          <Box flexShrink={0}>
             <Box mb="1.5">
               <AIStateIndicator />
             </Box>
diff --git a/src/renderer/src/components/sidebar/chat-history-panel.tsx b/src/renderer/src/components/sidebar/chat-history-panel.tsx
index 89e70358..0ba438a2 100644
--- a/src/renderer/src/components/sidebar/chat-history-panel.tsx
+++ b/src/renderer/src/components/sidebar/chat-history-panel.tsx
@@ -6,7 +6,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/require-default-props */
 import React, { useEffect } from 'react';
-import { Box, Spinner, Flex, Text, Icon } from '@chakra-ui/react';
+import { Box, Spinner, Flex, Text, Icon, Image } from '@chakra-ui/react';
 import { sidebarStyles, chatPanelStyles } from './sidebar-styles';
 import { MainContainer, ChatContainer, MessageList as ChatMessageList, Message as ChatMessage, Avatar as ChatAvatar } from '@chatscope/chat-ui-kit-react';
 import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
@@ -26,6 +26,7 @@ function ChatHistoryPanel(): JSX.Element {
   const userName = "Me";
 
   const validMessages = messages.filter((msg) => msg.content || // Keep messages with content
+     (msg.images && msg.images.length > 0) || // Keep messages with images
      (msg.type === 'tool_call_status' && msg.status === 'running') || // Keep running tools
      (msg.type === 'tool_call_status' && msg.status === 'completed') || // Keep completed tools
      (msg.type === 'tool_call_status' && msg.status === 'error'), // Keep error tools
@@ -96,11 +97,12 @@ function ChatHistoryPanel(): JSX.Element {
                   );
                 } 
                 // Render Standard Chat Message (human or ai text)
+                const hasImages = msg.images && msg.images.length > 0;
                 return (
                   <ChatMessage
                     key={msg.id}
                     model={{
-                      message: msg.content,
+                      message: msg.content || (hasImages ? t('sidebar.imageMessage') : ''),
                       sentTime: msg.timestamp,
                       sender: msg.role === 'ai'
                         ? (msg.name || confName || 'AI')
@@ -133,6 +135,26 @@ function ChatHistoryPanel(): JSX.Element {
                         userName[0].toUpperCase()
                       )}
                     </ChatAvatar>
+                    {hasImages && (
+                      <Box mt="2" display="flex" flexWrap="wrap" gap="2">
+                        {msg.images?.map((image, index) => (
+                          <Box
+                            key={`${msg.id}-image-${index}`}
+                            borderRadius="md"
+                            overflow="hidden"
+                            border="1px solid"
+                            borderColor="whiteAlpha.300"
+                          >
+                            <Image
+                              src={image.data}
+                              alt={t('sidebar.imageMessage')}
+                              boxSize="120px"
+                              objectFit="cover"
+                            />
+                          </Box>
+                        ))}
+                      </Box>
+                    )}
                   </ChatMessage>
                 );
               })
diff --git a/src/renderer/src/context/chat-history-context.tsx b/src/renderer/src/context/chat-history-context.tsx
index 890806d3..eec4d87b 100644
--- a/src/renderer/src/context/chat-history-context.tsx
+++ b/src/renderer/src/context/chat-history-context.tsx
@@ -3,6 +3,7 @@ import {
   createContext, useContext, useState, useMemo, useCallback,
 } from 'react';
 import { Message } from '@/services/websocket-service';
+import { ImagePayload } from '@/types/media';
 import { HistoryInfo } from './websocket-context';
 
 /**
@@ -13,7 +14,7 @@ interface ChatHistoryState {
   messages: Message[]; // Use the unified Message type
   historyList: HistoryInfo[];
   currentHistoryUid: string | null;
-  appendHumanMessage: (content: string) => void;
+  appendHumanMessage: (content: string, images?: ImagePayload[]) => void;
   appendAIMessage: (content: string, name?: string, avatar?: string) => void;
   appendOrUpdateToolCallMessage: (toolMessageData: Partial<Message>) => void; // Accept partial data
   setMessages: (messages: Message[]) => void; // Use the unified Message type
@@ -65,13 +66,14 @@ export function ChatHistoryProvider({ children }: { children: React.ReactNode })
    * Append a human message to the chat history
    * @param content - Message content
    */
-  const appendHumanMessage = useCallback((content: string) => {
+  const appendHumanMessage = useCallback((content: string, images?: ImagePayload[]) => {
     const newMessage: Message = {
       id: Date.now().toString(),
       content,
       role: 'human',
       type: 'text', // Explicitly set type for human messages
       timestamp: new Date().toISOString(),
+      images,
     };
     setMessages((prevMessages) => [...prevMessages, newMessage]);
   }, []);
diff --git a/src/renderer/src/hooks/footer/use-text-input.tsx b/src/renderer/src/hooks/footer/use-text-input.tsx
index 8f69a8b0..11c063fc 100644
--- a/src/renderer/src/hooks/footer/use-text-input.tsx
+++ b/src/renderer/src/hooks/footer/use-text-input.tsx
@@ -6,13 +6,14 @@ import { useInterrupt } from '@/components/canvas/live2d';
 import { useChatHistory } from '@/context/chat-history-context';
 import { useVAD } from '@/context/vad-context';
 import { toaster } from '@/components/ui/toaster';
-import { useMediaCapture, ImageData } from '@/hooks/utils/use-media-capture';
+import { useMediaCapture } from '@/hooks/utils/use-media-capture';
+import { ImagePayload } from '@/types/media';
 
 export function useTextInput() {
   const { t } = useTranslation();
   const [inputText, setInputText] = useState('');
   const [isComposing, setIsComposing] = useState(false);
-  const [attachedImages, setAttachedImages] = useState<ImageData[]>([]);
+  const [attachedImages, setAttachedImages] = useState<ImagePayload[]>([]);
   const wsContext = useWebSocket();
   const { aiState } = useAiState();
   const { interrupt } = useInterrupt();
@@ -34,7 +35,7 @@ export function useTextInput() {
   const handleAttachFiles = useCallback(async (files: FileList | null) => {
     if (!files || files.length === 0) return;
 
-    const newImages: ImageData[] = [];
+    const newImages: ImagePayload[] = [];
     for (const file of Array.from(files)) {
       if (!file.type.startsWith('image/')) {
         toaster.create({
@@ -75,13 +76,15 @@ export function useTextInput() {
     }
 
     const images = [...(await captureAllMedia()), ...attachedImages];
+    const trimmedText = inputText.trim();
+    const messageText = trimmedText || (images.length > 0 ? t('sidebar.imageMessage') : '');
 
-    if (inputText.trim()) {
-      appendHumanMessage(inputText.trim());
+    if (messageText) {
+      appendHumanMessage(messageText, images);
     }
     wsContext.sendMessage({
       type: 'text-input',
-      text: inputText.trim(),
+      text: trimmedText,
       images,
     });
 
diff --git a/src/renderer/src/hooks/utils/use-media-capture.tsx b/src/renderer/src/hooks/utils/use-media-capture.tsx
index c4c4c905..723bcc65 100644
--- a/src/renderer/src/hooks/utils/use-media-capture.tsx
+++ b/src/renderer/src/hooks/utils/use-media-capture.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useCamera } from '@/context/camera-context';
 import { useScreenCaptureContext } from '@/context/screen-capture-context';
 import { toaster } from "@/components/ui/toaster";
+import { ImagePayload } from '@/types/media';
 import {
   IMAGE_COMPRESSION_QUALITY_KEY,
   DEFAULT_IMAGE_COMPRESSION_QUALITY,
@@ -19,12 +20,6 @@ declare class ImageCapture {
   grabFrame(): Promise<ImageBitmap>;
 }
 
-export interface ImageData {
-  source: 'camera' | 'screen' | 'upload';
-  data: string;
-  mime_type: string;
-}
-
 export function useMediaCapture() {
   const { t } = useTranslation();
   const { stream: cameraStream } = useCamera();
@@ -99,7 +94,7 @@ export function useMediaCapture() {
   }, [t, getCompressionQuality, getImageMaxWidth]);
 
   const captureAllMedia = useCallback(async () => {
-    const images: ImageData[] = [];
+    const images: ImagePayload[] = [];
 
     // Capture camera frame
     if (cameraStream) {
diff --git a/src/renderer/src/layout.tsx b/src/renderer/src/layout.tsx
index ed325638..35f9fb5d 100644
--- a/src/renderer/src/layout.tsx
+++ b/src/renderer/src/layout.tsx
@@ -52,7 +52,8 @@ export const layoutStyles = {
   },
   footer: {
     width: '100%',
-    height: { base: '100px', md: '120px' },
+    height: 'auto',
+    minHeight: { base: '100px', md: '120px' },
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     willChange: 'transform',
     position: 'relative',
diff --git a/src/renderer/src/locales/en/translation.json b/src/renderer/src/locales/en/translation.json
index c91c4ab8..8e8c1c1a 100644
--- a/src/renderer/src/locales/en/translation.json
+++ b/src/renderer/src/locales/en/translation.json
@@ -80,6 +80,7 @@
     "screen": "Screen",
     "browser": "Browser",
     "live": "Live",
+    "imageMessage": "Image attachment",
     "noMessages": "No messages yet. Start a conversation!",
     "noBrowserSession": "No active browser session",
     "browserSession": "Browser Session"
diff --git a/src/renderer/src/locales/zh/translation.json b/src/renderer/src/locales/zh/translation.json
index e3e6cbd7..fa8ca3f8 100644
--- a/src/renderer/src/locales/zh/translation.json
+++ b/src/renderer/src/locales/zh/translation.json
@@ -77,6 +77,7 @@
     "screen": "屏幕",
     "browser": "浏览器",
     "live": "直播",
+    "imageMessage": "图片附件",
     "noMessages": "暂无消息。开始对话吧！",
     "noBrowserSession": "无活跃浏览器会话",
     "browserSession": "浏览器会话"
diff --git a/src/renderer/src/services/websocket-service.tsx b/src/renderer/src/services/websocket-service.tsx
index ad2b79f3..b47acddd 100644
--- a/src/renderer/src/services/websocket-service.tsx
+++ b/src/renderer/src/services/websocket-service.tsx
@@ -6,6 +6,7 @@ import { ModelInfo } from '@/context/live2d-config-context';
 import { HistoryInfo } from '@/context/websocket-context';
 import { ConfigFile } from '@/context/character-config-context';
 import { toaster } from '@/components/ui/toaster';
+import { ImagePayload } from '@/types/media';
 
 export interface DisplayText {
   text: string;
@@ -34,6 +35,7 @@ export interface Message {
   timestamp: string;
   name?: string;
   avatar?: string;
+  images?: ImagePayload[];
 
   // Fields for different message types (make optional)
   type?: 'text' | 'tool_call_status'; // Add possible types, default to 'text' if omitted
diff --git a/src/renderer/src/types/media.ts b/src/renderer/src/types/media.ts
new file mode 100644
index 00000000..92e1fa65
--- /dev/null
+++ b/src/renderer/src/types/media.ts
@@ -0,0 +1,5 @@
+export interface ImagePayload {
+  source: 'camera' | 'screen' | 'upload';
+  data: string;
+  mime_type: string;
+}

From 6a80af40900657dd5e5b1140d9057ad0008b916c Mon Sep 17 00:00:00 2001
From: XnneHang <XnneHang@gmail.com>
Date: Wed, 4 Feb 2026 22:56:28 +0800
Subject: [PATCH 3/7] Add remove button for uploaded attachments in footer (#4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add attachment remove control

* make image larger, rise by 0.1vh

* 采用反向算法
---
 .../src/components/footer/footer-styles.tsx   |  4 +++-
 src/renderer/src/components/footer/footer.tsx | 24 +++++++++++++++++--
 .../components/sidebar/chat-history-panel.tsx |  2 +-
 src/renderer/src/hooks/footer/use-footer.ts   |  2 ++
 .../src/hooks/footer/use-text-input.tsx       |  5 ++++
 src/renderer/src/locales/en/translation.json  |  3 ++-
 src/renderer/src/locales/zh/translation.json  |  3 ++-
 7 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/components/footer/footer-styles.tsx b/src/renderer/src/components/footer/footer-styles.tsx
index 1a292cb8..5f3995d9 100644
--- a/src/renderer/src/components/footer/footer-styles.tsx
+++ b/src/renderer/src/components/footer/footer-styles.tsx
@@ -26,7 +26,9 @@ export const footerStyles: {
       height: 'auto',
       minHeight: isCollapsed ? 'auto' : { base: '100px', md: '120px' },
       position: 'relative',
-      bottom: !isCollapsed && hasAttachments ? '5vh' : '0',
+      bottom: !isCollapsed && hasAttachments
+      ? 'clamp(1vh, calc(110px - 5vh), 1000vh)'
+      : '0px',
       overflow: isCollapsed ? 'visible' : 'hidden',
       pb: '4',
     }),
diff --git a/src/renderer/src/components/footer/footer.tsx b/src/renderer/src/components/footer/footer.tsx
index 6376bba8..5174fa1a 100644
--- a/src/renderer/src/components/footer/footer.tsx
+++ b/src/renderer/src/components/footer/footer.tsx
@@ -2,7 +2,7 @@
 import {
   Box, Textarea, IconButton, HStack, Image,
 } from '@chakra-ui/react';
-import { BsMicFill, BsMicMuteFill, BsPaperclip } from 'react-icons/bs';
+import { BsMicFill, BsMicMuteFill, BsPaperclip, BsX } from 'react-icons/bs';
 import { IoHandRightSharp } from 'react-icons/io5';
 import { FiChevronDown } from 'react-icons/fi';
 import { memo, useRef } from 'react';
@@ -152,6 +152,7 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
     handleCompositionEnd,
     handleAttachFiles,
     attachedImages,
+    handleRemoveAttachment,
     handleInterrupt,
     handleMicToggle,
     micOn,
@@ -176,6 +177,7 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
               {attachedImages.map((image, index) => (
                 <Box
                   key={`${image.data}-${index}`}
+                  position="relative"
                   borderRadius="md"
                   overflow="hidden"
                   border="1px solid"
@@ -184,9 +186,27 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
                   <Image
                     src={image.data}
                     alt={t('footer.attachFile')}
-                    boxSize="64px"
+                    boxSize="128px"
                     objectFit="cover"
                   />
+                  <IconButton
+                    aria-label={t('footer.removeAttachment')}
+                    icon={<BsX />}
+                    size="xs"          // 先用 xs 当基准
+                    w="18px"
+                    h="18px"
+                    minW="18px"        // IconButton 默认有 minW，不设会缩不下去
+                    p="0"
+                    fontSize="12px"    // 控制图标大小（icon 会吃到 fontSize）
+                    position="absolute"
+                    top="1"
+                    right="1"
+                    borderRadius="full"
+                    bg="blackAlpha.700"
+                    color="whiteAlpha.900"
+                    _hover={{ bg: 'blackAlpha.800' }}
+                    onClick={() => handleRemoveAttachment(index)}
+                  />
                 </Box>
               ))}
             </HStack>
diff --git a/src/renderer/src/components/sidebar/chat-history-panel.tsx b/src/renderer/src/components/sidebar/chat-history-panel.tsx
index 0ba438a2..eddb5d6b 100644
--- a/src/renderer/src/components/sidebar/chat-history-panel.tsx
+++ b/src/renderer/src/components/sidebar/chat-history-panel.tsx
@@ -148,7 +148,7 @@ function ChatHistoryPanel(): JSX.Element {
                             <Image
                               src={image.data}
                               alt={t('sidebar.imageMessage')}
-                              boxSize="120px"
+                              boxSize="128px"
                               objectFit="cover"
                             />
                           </Box>
diff --git a/src/renderer/src/hooks/footer/use-footer.ts b/src/renderer/src/hooks/footer/use-footer.ts
index 7f9f4e2c..47ce1e18 100644
--- a/src/renderer/src/hooks/footer/use-footer.ts
+++ b/src/renderer/src/hooks/footer/use-footer.ts
@@ -16,6 +16,7 @@ export const useFooter = () => {
     handleCompositionEnd,
     handleAttachFiles,
     attachedImages,
+    handleRemoveAttachment,
   } = useTextInput();
 
   const { interrupt } = useInterrupt();
@@ -53,6 +54,7 @@ export const useFooter = () => {
     handleCompositionEnd,
     handleAttachFiles,
     attachedImages,
+    handleRemoveAttachment,
     handleInterrupt,
     handleMicToggle,
     micOn,
diff --git a/src/renderer/src/hooks/footer/use-text-input.tsx b/src/renderer/src/hooks/footer/use-text-input.tsx
index 11c063fc..8a296188 100644
--- a/src/renderer/src/hooks/footer/use-text-input.tsx
+++ b/src/renderer/src/hooks/footer/use-text-input.tsx
@@ -105,6 +105,10 @@ export function useTextInput() {
   const handleCompositionStart = () => setIsComposing(true);
   const handleCompositionEnd = () => setIsComposing(false);
 
+  const handleRemoveAttachment = useCallback((indexToRemove: number) => {
+    setAttachedImages((prev) => prev.filter((_, index) => index !== indexToRemove));
+  }, []);
+
   return {
     inputText,
     setInputText: handleInputChange,
@@ -114,5 +118,6 @@ export function useTextInput() {
     handleCompositionStart,
     handleCompositionEnd,
     attachedImages,
+    handleRemoveAttachment,
   };
 }
diff --git a/src/renderer/src/locales/en/translation.json b/src/renderer/src/locales/en/translation.json
index 8e8c1c1a..4e64b293 100644
--- a/src/renderer/src/locales/en/translation.json
+++ b/src/renderer/src/locales/en/translation.json
@@ -73,7 +73,8 @@
     "screenControl": "Click to start screen capture",
     "screenStopping": "Click to stop screen capture",
     "attachFile": "Attach file",
-    "attachmentsCount": "{{count}} attachment(s)"
+    "attachmentsCount": "{{count}} attachment(s)",
+    "removeAttachment": "Remove attachment"
   },
   "sidebar": {
     "camera": "Camera",
diff --git a/src/renderer/src/locales/zh/translation.json b/src/renderer/src/locales/zh/translation.json
index fa8ca3f8..d699f093 100644
--- a/src/renderer/src/locales/zh/translation.json
+++ b/src/renderer/src/locales/zh/translation.json
@@ -70,7 +70,8 @@
     "screenControl": "点击开始屏幕共享",
     "screenStopping": "点击停止屏幕共享",
     "attachFile": "上传文件",
-    "attachmentsCount": "已添加{{count}}个附件"
+    "attachmentsCount": "已添加{{count}}个附件",
+    "removeAttachment": "移除附件"
   },
   "sidebar": {
     "camera": "摄像头",

From ee1aa69a64009c29a8d8006d7e29254160a5f0bd Mon Sep 17 00:00:00 2001
From: XnneHang <XnneHang@gmail.com>
Date: Thu, 5 Feb 2026 09:56:50 +0800
Subject: [PATCH 4/7] Add attachment preview modal for image thumbnails (#5)

* Add attachment preview modal

* Use dialog for attachment preview
---
 src/renderer/src/components/footer/footer.tsx | 53 +++++++++++++++++--
 src/renderer/src/locales/en/translation.json  |  3 +-
 src/renderer/src/locales/zh/translation.json  |  3 +-
 3 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/components/footer/footer.tsx b/src/renderer/src/components/footer/footer.tsx
index 5174fa1a..4eb5cd34 100644
--- a/src/renderer/src/components/footer/footer.tsx
+++ b/src/renderer/src/components/footer/footer.tsx
@@ -1,13 +1,23 @@
 /* eslint-disable react/require-default-props */
 import {
-  Box, Textarea, IconButton, HStack, Image,
+  Box,
+  Textarea,
+  IconButton,
+  HStack,
+  Image,
 } from '@chakra-ui/react';
 import { BsMicFill, BsMicMuteFill, BsPaperclip, BsX } from 'react-icons/bs';
 import { IoHandRightSharp } from 'react-icons/io5';
 import { FiChevronDown } from 'react-icons/fi';
-import { memo, useRef } from 'react';
+import { memo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InputGroup } from '@/components/ui/input-group';
+import {
+  DialogRoot,
+  DialogContent,
+  DialogCloseTrigger,
+  DialogBody,
+} from '@/components/ui/dialog';
 import { footerStyles } from './footer-styles';
 import AIStateIndicator from './ai-state-indicator';
 import { useFooter } from '@/hooks/footer/use-footer';
@@ -157,6 +167,7 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
     handleMicToggle,
     micOn,
   } = useFooter();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
 
   return (
     <Box {...footerStyles.footer.container(isCollapsed, attachedImages.length > 0)}>
@@ -182,6 +193,16 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
                   overflow="hidden"
                   border="1px solid"
                   borderColor="whiteAlpha.300"
+                  cursor="zoom-in"
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setPreviewImage(image.data)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault();
+                      setPreviewImage(image.data);
+                    }
+                  }}
                 >
                   <Image
                     src={image.data}
@@ -205,7 +226,10 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
                     bg="blackAlpha.700"
                     color="whiteAlpha.900"
                     _hover={{ bg: 'blackAlpha.800' }}
-                    onClick={() => handleRemoveAttachment(index)}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleRemoveAttachment(index);
+                    }}
                   />
                 </Box>
               ))}
@@ -235,6 +259,29 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
           />
         </HStack>
       </Box>
+      <DialogRoot
+        open={Boolean(previewImage)}
+        onOpenChange={(details) => {
+          if (!details.open) {
+            setPreviewImage(null);
+          }
+        }}
+      >
+        <DialogContent bg="gray.900" maxW="80vw" w="fit-content">
+          <DialogCloseTrigger />
+          <DialogBody p="4">
+            {previewImage && (
+              <Image
+                src={previewImage}
+                alt={t('footer.previewAttachment')}
+                maxH="80vh"
+                maxW="80vw"
+                objectFit="contain"
+              />
+            )}
+          </DialogBody>
+        </DialogContent>
+      </DialogRoot>
     </Box>
   );
 }
diff --git a/src/renderer/src/locales/en/translation.json b/src/renderer/src/locales/en/translation.json
index 4e64b293..84cc4a0e 100644
--- a/src/renderer/src/locales/en/translation.json
+++ b/src/renderer/src/locales/en/translation.json
@@ -74,7 +74,8 @@
     "screenStopping": "Click to stop screen capture",
     "attachFile": "Attach file",
     "attachmentsCount": "{{count}} attachment(s)",
-    "removeAttachment": "Remove attachment"
+    "removeAttachment": "Remove attachment",
+    "previewAttachment": "Preview attachment"
   },
   "sidebar": {
     "camera": "Camera",
diff --git a/src/renderer/src/locales/zh/translation.json b/src/renderer/src/locales/zh/translation.json
index d699f093..ef2814ff 100644
--- a/src/renderer/src/locales/zh/translation.json
+++ b/src/renderer/src/locales/zh/translation.json
@@ -71,7 +71,8 @@
     "screenStopping": "点击停止屏幕共享",
     "attachFile": "上传文件",
     "attachmentsCount": "已添加{{count}}个附件",
-    "removeAttachment": "移除附件"
+    "removeAttachment": "移除附件",
+    "previewAttachment": "预览附件"
   },
   "sidebar": {
     "camera": "摄像头",

From ec3d8b5856a30dab61ebe29efce0fa948d3cb229 Mon Sep 17 00:00:00 2001
From: XnneHang <XnneHang@gmail.com>
Date: Thu, 5 Feb 2026 10:26:19 +0800
Subject: [PATCH 5/7] Show image thumbnails in chat history (#6)

* Show image thumbnails in chat history

* Show text with thumbnails in chat history

* Place image thumbnails above text in history
---
 .../components/sidebar/chat-history-panel.tsx | 46 +++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/renderer/src/components/sidebar/chat-history-panel.tsx b/src/renderer/src/components/sidebar/chat-history-panel.tsx
index eddb5d6b..a69bf3c1 100644
--- a/src/renderer/src/components/sidebar/chat-history-panel.tsx
+++ b/src/renderer/src/components/sidebar/chat-history-panel.tsx
@@ -98,11 +98,12 @@ function ChatHistoryPanel(): JSX.Element {
                 } 
                 // Render Standard Chat Message (human or ai text)
                 const hasImages = msg.images && msg.images.length > 0;
+                const messageText = msg.content || (hasImages ? t('sidebar.imageMessage') : '');
                 return (
                   <ChatMessage
                     key={msg.id}
                     model={{
-                      message: msg.content || (hasImages ? t('sidebar.imageMessage') : ''),
+                      message: hasImages ? '' : messageText,
                       sentTime: msg.timestamp,
                       sender: msg.role === 'ai'
                         ? (msg.name || confName || 'AI')
@@ -136,24 +137,33 @@ function ChatHistoryPanel(): JSX.Element {
                       )}
                     </ChatAvatar>
                     {hasImages && (
-                      <Box mt="2" display="flex" flexWrap="wrap" gap="2">
-                        {msg.images?.map((image, index) => (
-                          <Box
-                            key={`${msg.id}-image-${index}`}
-                            borderRadius="md"
-                            overflow="hidden"
-                            border="1px solid"
-                            borderColor="whiteAlpha.300"
-                          >
-                            <Image
-                              src={image.data}
-                              alt={t('sidebar.imageMessage')}
-                              boxSize="128px"
-                              objectFit="cover"
-                            />
+                      <ChatMessage.CustomContent>
+                        <Box mt="2" display="flex" flexDirection="column" gap="2">
+                          <Box display="flex" flexWrap="wrap" gap="2">
+                            {msg.images?.map((image, index) => (
+                              <Box
+                                key={`${msg.id}-image-${index}`}
+                                borderRadius="md"
+                                overflow="hidden"
+                                border="1px solid"
+                                borderColor="whiteAlpha.300"
+                              >
+                                <Image
+                                  src={image.data}
+                                  alt={t('sidebar.imageMessage')}
+                                  boxSize="128px"
+                                  objectFit="cover"
+                              />
+                            </Box>
+                          ))}
                           </Box>
-                        ))}
-                      </Box>
+                          {msg.content && (
+                            <Text fontSize="sm" color="whiteAlpha.900" whiteSpace="pre-wrap">
+                              {msg.content}
+                            </Text>
+                          )}
+                        </Box>
+                      </ChatMessage.CustomContent>
                     )}
                   </ChatMessage>
                 );

From 885675470ed9e30da22d40d2a80815d9feeeb506 Mon Sep 17 00:00:00 2001
From: XnneHang <XnneHang@gmail.com>
Date: Thu, 5 Feb 2026 10:41:02 +0800
Subject: [PATCH 6/7] Add image preview dialog for chat history thumbnails (#7)

---
 .../components/sidebar/chat-history-panel.tsx | 42 ++++++++++++++++++-
 src/renderer/src/locales/en/translation.json  |  1 +
 src/renderer/src/locales/zh/translation.json  |  1 +
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/components/sidebar/chat-history-panel.tsx b/src/renderer/src/components/sidebar/chat-history-panel.tsx
index a69bf3c1..941b2426 100644
--- a/src/renderer/src/components/sidebar/chat-history-panel.tsx
+++ b/src/renderer/src/components/sidebar/chat-history-panel.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable react/require-default-props */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Box, Spinner, Flex, Text, Icon, Image } from '@chakra-ui/react';
 import { sidebarStyles, chatPanelStyles } from './sidebar-styles';
 import { MainContainer, ChatContainer, MessageList as ChatMessageList, Message as ChatMessage, Avatar as ChatAvatar } from '@chatscope/chat-ui-kit-react';
@@ -16,6 +16,12 @@ import { useConfig } from '@/context/character-config-context';
 import { useWebSocket } from '@/context/websocket-context';
 import { FaTools, FaCheck, FaTimes } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
+import {
+  DialogRoot,
+  DialogContent,
+  DialogCloseTrigger,
+  DialogBody,
+} from '@/components/ui/dialog';
 
 // Main component
 function ChatHistoryPanel(): JSX.Element {
@@ -24,6 +30,7 @@ function ChatHistoryPanel(): JSX.Element {
   const { confName } = useConfig();
   const { baseUrl } = useWebSocket();
   const userName = "Me";
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
 
   const validMessages = messages.filter((msg) => msg.content || // Keep messages with content
      (msg.images && msg.images.length > 0) || // Keep messages with images
@@ -147,6 +154,16 @@ function ChatHistoryPanel(): JSX.Element {
                                 overflow="hidden"
                                 border="1px solid"
                                 borderColor="whiteAlpha.300"
+                                cursor="zoom-in"
+                                role="button"
+                                tabIndex={0}
+                                onClick={() => setPreviewImage(image.data)}
+                                onKeyDown={(event) => {
+                                  if (event.key === 'Enter' || event.key === ' ') {
+                                    event.preventDefault();
+                                    setPreviewImage(image.data);
+                                  }
+                                }}
                               >
                                 <Image
                                   src={image.data}
@@ -172,6 +189,29 @@ function ChatHistoryPanel(): JSX.Element {
           </ChatMessageList>
         </ChatContainer>
       </MainContainer>
+      <DialogRoot
+        open={Boolean(previewImage)}
+        onOpenChange={(details) => {
+          if (!details.open) {
+            setPreviewImage(null);
+          }
+        }}
+      >
+        <DialogContent bg="gray.900" maxW="80vw" w="fit-content">
+          <DialogCloseTrigger />
+          <DialogBody p="4">
+            {previewImage && (
+              <Image
+                src={previewImage}
+                alt={t('sidebar.previewImage')}
+                maxH="80vh"
+                maxW="80vw"
+                objectFit="contain"
+              />
+            )}
+          </DialogBody>
+        </DialogContent>
+      </DialogRoot>
     </Box>
   );
 }
diff --git a/src/renderer/src/locales/en/translation.json b/src/renderer/src/locales/en/translation.json
index 84cc4a0e..72b6d56f 100644
--- a/src/renderer/src/locales/en/translation.json
+++ b/src/renderer/src/locales/en/translation.json
@@ -83,6 +83,7 @@
     "browser": "Browser",
     "live": "Live",
     "imageMessage": "Image attachment",
+    "previewImage": "Preview image",
     "noMessages": "No messages yet. Start a conversation!",
     "noBrowserSession": "No active browser session",
     "browserSession": "Browser Session"
diff --git a/src/renderer/src/locales/zh/translation.json b/src/renderer/src/locales/zh/translation.json
index ef2814ff..618829a3 100644
--- a/src/renderer/src/locales/zh/translation.json
+++ b/src/renderer/src/locales/zh/translation.json
@@ -80,6 +80,7 @@
     "browser": "浏览器",
     "live": "直播",
     "imageMessage": "图片附件",
+    "previewImage": "预览图片",
     "noMessages": "暂无消息。开始对话吧！",
     "noBrowserSession": "无活跃浏览器会话",
     "browserSession": "浏览器会话"

From 584eae1480ef37a06baea1b1cb592104711b583f Mon Sep 17 00:00:00 2001
From: XnneHang <XnneHang@gmail.com>
Date: Sun, 8 Feb 2026 20:37:34 +0800
Subject: [PATCH 7/7] fix: Improve attachment preview layout responsiveness
 (MrXnneHang/Open-LLM-VTuber-Web-Dev#1)

---
 src/renderer/src/components/footer/footer.tsx | 55 ++++++++++++++-----
 .../src/hooks/footer/use-text-input.tsx       | 25 ++++++++-
 src/renderer/src/locales/en/translation.json  |  7 ++-
 src/renderer/src/locales/zh/translation.json  |  7 ++-
 4 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/src/renderer/src/components/footer/footer.tsx b/src/renderer/src/components/footer/footer.tsx
index 4eb5cd34..0293ad69 100644
--- a/src/renderer/src/components/footer/footer.tsx
+++ b/src/renderer/src/components/footer/footer.tsx
@@ -9,7 +9,7 @@ import {
 import { BsMicFill, BsMicMuteFill, BsPaperclip, BsX } from 'react-icons/bs';
 import { IoHandRightSharp } from 'react-icons/io5';
 import { FiChevronDown } from 'react-icons/fi';
-import { memo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InputGroup } from '@/components/ui/input-group';
 import {
@@ -22,7 +22,12 @@ import { footerStyles } from './footer-styles';
 import AIStateIndicator from './ai-state-indicator';
 import { useFooter } from '@/hooks/footer/use-footer';
 
-// Type definitions
+const MIN_THUMBNAIL_SIZE = 32;
+const MAX_THUMBNAIL_SIZE = 72;
+const THUMBNAIL_GAP = 8;
+const REMOVE_BUTTON_RATIO = 0.34;
+const MAX_ATTACHMENTS = 20;
+
 interface FooterProps {
   isCollapsed?: boolean
   onToggle?: () => void
@@ -49,7 +54,6 @@ interface MessageInputProps {
   attachedCount: number
 }
 
-// Reusable components
 const ToggleButton = memo(({ isCollapsed, onToggle }: ToggleButtonProps) => (
   <Box
     {...footerStyles.footer.toggleButton}
@@ -100,7 +104,7 @@ const MessageInput = memo(({
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   return (
-    <Box flex={1} minW="0" display="flex" flexDirection="column" gap="2">
+    <Box flex={1} minW="clamp(280px, 42vw, 760px)" display="flex" flexDirection="column" gap="2">
       <InputGroup>
         <Box position="relative" width="100%">
           <IconButton
@@ -140,7 +144,7 @@ const MessageInput = memo(({
               fontSize="xs"
               color="whiteAlpha.700"
             >
-              {t('footer.attachmentsCount', { count: attachedCount })}
+              {t('footer.attachmentsCount', { count: attachedCount, max: MAX_ATTACHMENTS })}
             </Box>
           )}
         </Box>
@@ -151,7 +155,6 @@ const MessageInput = memo(({
 
 MessageInput.displayName = 'MessageInput';
 
-// Main component
 function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
   const { t } = useTranslation();
   const {
@@ -168,6 +171,26 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
     micOn,
   } = useFooter();
   const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [viewportWidth, setViewportWidth] = useState(() => (typeof window !== 'undefined' ? window.innerWidth : 1280));
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const handleResize = () => setViewportWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const thumbnailSize = useMemo(() => {
+    const count = Math.max(attachedImages.length, 1);
+    const minimumInputWidth = Math.max(320, Math.floor(viewportWidth * 0.28));
+    const estimatedRailWidth = Math.max(240, viewportWidth - minimumInputWidth - 300);
+    const availableWidth = Math.max(estimatedRailWidth, 180);
+    const totalGapWidth = THUMBNAIL_GAP * (count - 1);
+    const size = Math.floor((availableWidth - totalGapWidth) / count);
+    return Math.min(MAX_THUMBNAIL_SIZE, Math.max(MIN_THUMBNAIL_SIZE, size));
+  }, [attachedImages.length, viewportWidth]);
+
+  const removeButtonSize = Math.max(14, Math.floor(thumbnailSize * REMOVE_BUTTON_RATIO));
 
   return (
     <Box {...footerStyles.footer.container(isCollapsed, attachedImages.length > 0)}>
@@ -183,8 +206,9 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
             px="3"
             py="2"
             mb="3"
+            overflowX="hidden"
           >
-            <HStack spacing="2" flexWrap="wrap">
+            <HStack gap={`${THUMBNAIL_GAP}px`} flexWrap="nowrap" align="center">
               {attachedImages.map((image, index) => (
                 <Box
                   key={`${image.data}-${index}`}
@@ -196,6 +220,7 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
                   cursor="zoom-in"
                   role="button"
                   tabIndex={0}
+                  flex={`0 0 ${thumbnailSize}px`}
                   onClick={() => setPreviewImage(image.data)}
                   onKeyDown={(event) => {
                     if (event.key === 'Enter' || event.key === ' ') {
@@ -207,18 +232,16 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
                   <Image
                     src={image.data}
                     alt={t('footer.attachFile')}
-                    boxSize="128px"
+                    boxSize={`${thumbnailSize}px`}
                     objectFit="cover"
                   />
                   <IconButton
                     aria-label={t('footer.removeAttachment')}
-                    icon={<BsX />}
-                    size="xs"          // 先用 xs 当基准
-                    w="18px"
-                    h="18px"
-                    minW="18px"        // IconButton 默认有 minW，不设会缩不下去
+                    w={`${removeButtonSize}px`}
+                    h={`${removeButtonSize}px`}
+                    minW={`${removeButtonSize}px`}
                     p="0"
-                    fontSize="12px"    // 控制图标大小（icon 会吃到 fontSize）
+                    fontSize={`${Math.max(10, Math.floor(removeButtonSize * 0.66))}px`}
                     position="absolute"
                     top="1"
                     right="1"
@@ -230,7 +253,9 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
                       event.stopPropagation();
                       handleRemoveAttachment(index);
                     }}
-                  />
+                  >
+                    <BsX />
+                  </IconButton>
                 </Box>
               ))}
             </HStack>
diff --git a/src/renderer/src/hooks/footer/use-text-input.tsx b/src/renderer/src/hooks/footer/use-text-input.tsx
index 8a296188..6e2664e7 100644
--- a/src/renderer/src/hooks/footer/use-text-input.tsx
+++ b/src/renderer/src/hooks/footer/use-text-input.tsx
@@ -9,6 +9,8 @@ import { toaster } from '@/components/ui/toaster';
 import { useMediaCapture } from '@/hooks/utils/use-media-capture';
 import { ImagePayload } from '@/types/media';
 
+const MAX_ATTACHMENTS = 20;
+
 export function useTextInput() {
   const { t } = useTranslation();
   const [inputText, setInputText] = useState('');
@@ -35,8 +37,27 @@ export function useTextInput() {
   const handleAttachFiles = useCallback(async (files: FileList | null) => {
     if (!files || files.length === 0) return;
 
+    const remainingSlots = MAX_ATTACHMENTS - attachedImages.length;
+    if (remainingSlots <= 0) {
+      toaster.create({
+        title: t('error.maxAttachmentsExceeded', { max: MAX_ATTACHMENTS }),
+        type: 'warning',
+        duration: 2500,
+      });
+      return;
+    }
+
+    const filesToProcess = Array.from(files).slice(0, remainingSlots);
+    if (files.length > remainingSlots) {
+      toaster.create({
+        title: t('error.maxAttachmentsExceeded', { max: MAX_ATTACHMENTS }),
+        type: 'warning',
+        duration: 2500,
+      });
+    }
+
     const newImages: ImagePayload[] = [];
-    for (const file of Array.from(files)) {
+    for (const file of filesToProcess) {
       if (!file.type.startsWith('image/')) {
         toaster.create({
           title: t('error.unsupportedFileType'),
@@ -66,7 +87,7 @@ export function useTextInput() {
     if (newImages.length > 0) {
       setAttachedImages((prev) => [...prev, ...newImages]);
     }
-  }, [readFileAsDataUrl, t]);
+  }, [attachedImages.length, readFileAsDataUrl, t]);
 
   const handleSend = async () => {
     if (!wsContext) return;
diff --git a/src/renderer/src/locales/en/translation.json b/src/renderer/src/locales/en/translation.json
index 72b6d56f..b223c9ab 100644
--- a/src/renderer/src/locales/en/translation.json
+++ b/src/renderer/src/locales/en/translation.json
@@ -73,7 +73,7 @@
     "screenControl": "Click to start screen capture",
     "screenStopping": "Click to stop screen capture",
     "attachFile": "Attach file",
-    "attachmentsCount": "{{count}} attachment(s)",
+    "attachmentsCount": "{{count}}/{{max}} attachment(s)",
     "removeAttachment": "Remove attachment",
     "previewAttachment": "Preview attachment"
   },
@@ -129,7 +129,8 @@
     "failedParseWebSocket": "Failed to parse WebSocket message",
     "unsupportedFileType": "Only image files can be attached.",
     "websocketNotOpen": "WebSocket is not open.",
-    "vadMisfire": "Voice detected but too brief. Try speaking louder/longer, or adjust settings (lower speech threshold, lower negative threshold, reduce redemption frames)."
+    "vadMisfire": "Voice detected but too brief. Try speaking louder/longer, or adjust settings (lower speech threshold, lower negative threshold, reduce redemption frames).",
+    "maxAttachmentsExceeded": "You can attach up to {{max}} files."
   },
   "aiState": {
     "idle": "idle",
@@ -144,4 +145,4 @@
     "connecting": "Connecting",
     "clickToReconnect": "Click to Reconnect"
   }
-} 
+}
diff --git a/src/renderer/src/locales/zh/translation.json b/src/renderer/src/locales/zh/translation.json
index 618829a3..8c584883 100644
--- a/src/renderer/src/locales/zh/translation.json
+++ b/src/renderer/src/locales/zh/translation.json
@@ -70,7 +70,7 @@
     "screenControl": "点击开始屏幕共享",
     "screenStopping": "点击停止屏幕共享",
     "attachFile": "上传文件",
-    "attachmentsCount": "已添加{{count}}个附件",
+    "attachmentsCount": "已添加{{count}}/{{max}}个附件",
     "removeAttachment": "移除附件",
     "previewAttachment": "预览附件"
   },
@@ -126,7 +126,8 @@
     "failedParseWebSocket": "解析WebSocket消息失败",
     "unsupportedFileType": "仅支持上传图片文件",
     "websocketNotOpen": "WebSocket未连接",
-    "vadMisfire": "检测到语音但过于简短，请尝试提高音量或说得更久一些，或调整识别设置（降低语音识别阈值、降低负面语音阈值、减少验证帧数）"
+    "vadMisfire": "检测到语音但过于简短，请尝试提高音量或说得更久一些，或调整识别设置（降低语音识别阈值、降低负面语音阈值、减少验证帧数）",
+    "maxAttachmentsExceeded": "最多只能上传{{max}}个附件"
   },
   "aiState": {
     "idle": "空闲",
@@ -141,4 +142,4 @@
     "connecting": "连接中",
     "clickToReconnect": "点击重新连接"
   }
-} 
+}