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..5f3995d9 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,17 @@ 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
+      ? '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 7c058614..0293ad69 100644
--- a/src/renderer/src/components/footer/footer.tsx
+++ b/src/renderer/src/components/footer/footer.tsx
@@ -1,18 +1,33 @@
 /* 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 { BsMicFill, BsMicMuteFill, BsPaperclip, BsX } from 'react-icons/bs';
 import { IoHandRightSharp } from 'react-icons/io5';
 import { FiChevronDown } from 'react-icons/fi';
-import { memo } from 'react';
+import { memo, useEffect, useMemo, 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';
 
-// 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
@@ -35,9 +50,10 @@ interface MessageInputProps {
   onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
   onCompositionStart: () => void
   onCompositionEnd: () => void
+  onAttachFiles: (files: FileList | null) => void
+  attachedCount: number
 }
 
-// Reusable components
 const ToggleButton = memo(({ isCollapsed, onToggle }: ToggleButtonProps) => (
   <Box
     {...footerStyles.footer.toggleButton}
@@ -81,55 +97,172 @@ const MessageInput = memo(({
   onKeyDown,
   onCompositionStart,
   onCompositionEnd,
+  onAttachFiles,
+  attachedCount,
 }: MessageInputProps) => {
   const { t } = useTranslation();
+  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}
-        >
-          <BsPaperclip size="24" />
-        </IconButton>
-        <Textarea
-          value={value}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-          onCompositionStart={onCompositionStart}
-          onCompositionEnd={onCompositionEnd}
-          placeholder={t('footer.typeYourMessage')}
-          {...footerStyles.footer.input}
-        />
-      </Box>
-    </InputGroup>
+    <Box flex={1} minW="clamp(280px, 42vw, 760px)" 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()}
+          >
+            <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, max: MAX_ATTACHMENTS })}
+            </Box>
+          )}
+        </Box>
+      </InputGroup>
+    </Box>
   );
 });
 
 MessageInput.displayName = 'MessageInput';
 
-// Main component
 function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
+  const { t } = useTranslation();
   const {
     inputValue,
     handleInputChange,
     handleKeyPress,
     handleCompositionStart,
     handleCompositionEnd,
+    handleAttachFiles,
+    attachedImages,
+    handleRemoveAttachment,
     handleInterrupt,
     handleMicToggle,
     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)}>
+    <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"
+            overflowX="hidden"
+          >
+            <HStack gap={`${THUMBNAIL_GAP}px`} flexWrap="nowrap" align="center">
+              {attachedImages.map((image, index) => (
+                <Box
+                  key={`${image.data}-${index}`}
+                  position="relative"
+                  borderRadius="md"
+                  overflow="hidden"
+                  border="1px solid"
+                  borderColor="whiteAlpha.300"
+                  cursor="zoom-in"
+                  role="button"
+                  tabIndex={0}
+                  flex={`0 0 ${thumbnailSize}px`}
+                  onClick={() => setPreviewImage(image.data)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault();
+                      setPreviewImage(image.data);
+                    }
+                  }}
+                >
+                  <Image
+                    src={image.data}
+                    alt={t('footer.attachFile')}
+                    boxSize={`${thumbnailSize}px`}
+                    objectFit="cover"
+                  />
+                  <IconButton
+                    aria-label={t('footer.removeAttachment')}
+                    w={`${removeButtonSize}px`}
+                    h={`${removeButtonSize}px`}
+                    minW={`${removeButtonSize}px`}
+                    p="0"
+                    fontSize={`${Math.max(10, Math.floor(removeButtonSize * 0.66))}px`}
+                    position="absolute"
+                    top="1"
+                    right="1"
+                    borderRadius="full"
+                    bg="blackAlpha.700"
+                    color="whiteAlpha.900"
+                    _hover={{ bg: 'blackAlpha.800' }}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleRemoveAttachment(index);
+                    }}
+                  >
+                    <BsX />
+                  </IconButton>
+                </Box>
+              ))}
+            </HStack>
+          </Box>
+        )}
+        <HStack width="100%" gap={4} align="flex-start">
+          <Box flexShrink={0}>
             <Box mb="1.5">
               <AIStateIndicator />
             </Box>
@@ -146,9 +279,34 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
             onKeyDown={handleKeyPress}
             onCompositionStart={handleCompositionStart}
             onCompositionEnd={handleCompositionEnd}
+            onAttachFiles={handleAttachFiles}
+            attachedCount={attachedImages.length}
           />
         </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/components/sidebar/chat-history-panel.tsx b/src/renderer/src/components/sidebar/chat-history-panel.tsx
index 89e70358..941b2426 100644
--- a/src/renderer/src/components/sidebar/chat-history-panel.tsx
+++ b/src/renderer/src/components/sidebar/chat-history-panel.tsx
@@ -5,8 +5,8 @@
 /* eslint-disable import/order */
 /* 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 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';
 import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
@@ -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,8 +30,10 @@ 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
      (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 +104,13 @@ 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,
+                      message: hasImages ? '' : messageText,
                       sentTime: msg.timestamp,
                       sender: msg.role === 'ai'
                         ? (msg.name || confName || 'AI')
@@ -133,6 +143,45 @@ function ChatHistoryPanel(): JSX.Element {
                         userName[0].toUpperCase()
                       )}
                     </ChatAvatar>
+                    {hasImages && (
+                      <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"
+                                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}
+                                  alt={t('sidebar.imageMessage')}
+                                  boxSize="128px"
+                                  objectFit="cover"
+                              />
+                            </Box>
+                          ))}
+                          </Box>
+                          {msg.content && (
+                            <Text fontSize="sm" color="whiteAlpha.900" whiteSpace="pre-wrap">
+                              {msg.content}
+                            </Text>
+                          )}
+                        </Box>
+                      </ChatMessage.CustomContent>
+                    )}
                   </ChatMessage>
                 );
               })
@@ -140,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/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-footer.ts b/src/renderer/src/hooks/footer/use-footer.ts
index 34865fac..47ce1e18 100644
--- a/src/renderer/src/hooks/footer/use-footer.ts
+++ b/src/renderer/src/hooks/footer/use-footer.ts
@@ -14,6 +14,9 @@ export const useFooter = () => {
     handleKeyPress: handleKey,
     handleCompositionStart,
     handleCompositionEnd,
+    handleAttachFiles,
+    attachedImages,
+    handleRemoveAttachment,
   } = useTextInput();
 
   const { interrupt } = useInterrupt();
@@ -49,6 +52,9 @@ export const useFooter = () => {
     handleKeyPress,
     handleCompositionStart,
     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 d2499ffa..6e2664e7 100644
--- a/src/renderer/src/hooks/footer/use-text-input.tsx
+++ b/src/renderer/src/hooks/footer/use-text-input.tsx
@@ -1,14 +1,21 @@
-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 { 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('');
   const [isComposing, setIsComposing] = useState(false);
+  const [attachedImages, setAttachedImages] = useState<ImagePayload[]>([]);
   const wsContext = useWebSocket();
   const { aiState } = useAiState();
   const { interrupt } = useInterrupt();
@@ -20,23 +27,91 @@ 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 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 filesToProcess) {
+      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]);
+    }
+  }, [attachedImages.length, 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];
+    const trimmedText = inputText.trim();
+    const messageText = trimmedText || (images.length > 0 ? t('sidebar.imageMessage') : '');
 
-    appendHumanMessage(inputText.trim());
+    if (messageText) {
+      appendHumanMessage(messageText, images);
+    }
     wsContext.sendMessage({
       type: 'text-input',
-      text: inputText.trim(),
+      text: trimmedText,
       images,
     });
 
     if (autoStopMic) stopMic();
     setInputText('');
+    setAttachedImages([]);
   };
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -51,12 +126,19 @@ 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,
     handleSend,
+    handleAttachFiles,
     handleKeyPress,
     handleCompositionStart,
     handleCompositionEnd,
+    attachedImages,
+    handleRemoveAttachment,
   };
 }
diff --git a/src/renderer/src/hooks/utils/use-media-capture.tsx b/src/renderer/src/hooks/utils/use-media-capture.tsx
index 19170d08..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>;
 }
 
-interface ImageData {
-  source: 'camera' | 'screen';
-  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 96cb2c82..b223c9ab 100644
--- a/src/renderer/src/locales/en/translation.json
+++ b/src/renderer/src/locales/en/translation.json
@@ -71,13 +71,19 @@
     "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}}/{{max}} attachment(s)",
+    "removeAttachment": "Remove attachment",
+    "previewAttachment": "Preview attachment"
   },
   "sidebar": {
     "camera": "Camera",
     "screen": "Screen",
     "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"
@@ -119,9 +125,12 @@
     "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)."
+    "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",
@@ -136,4 +145,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..8c584883 100644
--- a/src/renderer/src/locales/zh/translation.json
+++ b/src/renderer/src/locales/zh/translation.json
@@ -68,13 +68,19 @@
     "cameraControl": "点击启动摄像头",
     "cameraStopping": "点击停止摄像头",
     "screenControl": "点击开始屏幕共享",
-    "screenStopping": "点击停止屏幕共享"
+    "screenStopping": "点击停止屏幕共享",
+    "attachFile": "上传文件",
+    "attachmentsCount": "已添加{{count}}/{{max}}个附件",
+    "removeAttachment": "移除附件",
+    "previewAttachment": "预览附件"
   },
   "sidebar": {
     "camera": "摄像头",
     "screen": "屏幕",
     "browser": "浏览器",
     "live": "直播",
+    "imageMessage": "图片附件",
+    "previewImage": "预览图片",
     "noMessages": "暂无消息。开始对话吧！",
     "noBrowserSession": "无活跃浏览器会话",
     "browserSession": "浏览器会话"
@@ -116,9 +122,12 @@
     "enterValidUuid": "请输入有效的UUID",
     "cannotDeleteCurrentHistory": "无法删除当前聊天记录",
     "failedCapture": "捕获{{source}}帧失败",
+    "failedReadFile": "读取附件{{filename}}失败",
     "failedParseWebSocket": "解析WebSocket消息失败",
+    "unsupportedFileType": "仅支持上传图片文件",
     "websocketNotOpen": "WebSocket未连接",
-    "vadMisfire": "检测到语音但过于简短，请尝试提高音量或说得更久一些，或调整识别设置（降低语音识别阈值、降低负面语音阈值、减少验证帧数）"
+    "vadMisfire": "检测到语音但过于简短，请尝试提高音量或说得更久一些，或调整识别设置（降低语音识别阈值、降低负面语音阈值、减少验证帧数）",
+    "maxAttachmentsExceeded": "最多只能上传{{max}}个附件"
   },
   "aiState": {
     "idle": "空闲",
@@ -133,4 +142,4 @@
     "connecting": "连接中",
     "clickToReconnect": "点击重新连接"
   }
-} 
\ No newline at end of file
+}
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;
+}