From 19c854c876fd47ec41a8456fa4d359bb96ab32c9 Mon Sep 17 00:00:00 2001
From: Dragon <sdrinf@gmail.com>
Date: Fri, 3 Oct 2025 04:11:01 -0700
Subject: [PATCH] Adds support for image pasting from clipboard, and multiple
 file attachments.

---
 src/renderer/src/components/footer/footer.tsx | 21 ++++++++-
 src/renderer/src/hooks/footer/use-footer.ts   |  6 +++
 .../src/hooks/footer/use-text-input.tsx       | 47 +++++++++++++++++--
 .../src/hooks/utils/use-media-capture.tsx     |  4 +-
 4 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/renderer/src/components/footer/footer.tsx b/src/renderer/src/components/footer/footer.tsx
index 7c058614..0dc75277 100644
--- a/src/renderer/src/components/footer/footer.tsx
+++ b/src/renderer/src/components/footer/footer.tsx
@@ -35,6 +35,9 @@ interface MessageInputProps {
   onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
   onCompositionStart: () => void
   onCompositionEnd: () => void
+  onPaste: (e: React.ClipboardEvent<HTMLTextAreaElement>) => void
+  attachmentsCount: number
+  onClearAttachments: () => void
 }
 
 // Reusable components
@@ -81,6 +84,9 @@ const MessageInput = memo(({
   onKeyDown,
   onCompositionStart,
   onCompositionEnd,
+  onPaste,
+  attachmentsCount,
+  onClearAttachments,
 }: MessageInputProps) => {
   const { t } = useTranslation();
 
@@ -88,21 +94,26 @@ const MessageInput = memo(({
     <InputGroup flex={1}>
       <Box position="relative" width="100%">
         <IconButton
-          aria-label="Attach file"
+          aria-label="Clear attachments"
           variant="ghost"
           {...footerStyles.footer.attachButton}
+          onClick={onClearAttachments}
         >
+          {attachmentsCount > 0 && (<>
+            {attachmentsCount}
+          </>)}
           <BsPaperclip size="24" />
         </IconButton>
         <Textarea
           value={value}
           onChange={onChange}
           onKeyDown={onKeyDown}
+          onPaste={onPaste}
           onCompositionStart={onCompositionStart}
           onCompositionEnd={onCompositionEnd}
           placeholder={t('footer.typeYourMessage')}
           {...footerStyles.footer.input}
-        />
+        />      
       </Box>
     </InputGroup>
   );
@@ -118,6 +129,9 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
     handleKeyPress,
     handleCompositionStart,
     handleCompositionEnd,
+    handlePaste,
+    attachmentsCount,
+    clearAttachments,
     handleInterrupt,
     handleMicToggle,
     micOn,
@@ -146,6 +160,9 @@ function Footer({ isCollapsed = false, onToggle }: FooterProps): JSX.Element {
             onKeyDown={handleKeyPress}
             onCompositionStart={handleCompositionStart}
             onCompositionEnd={handleCompositionEnd}
+            onPaste={handlePaste}
+            attachmentsCount={attachmentsCount}
+            onClearAttachments={clearAttachments}
           />
         </HStack>
       </Box>
diff --git a/src/renderer/src/hooks/footer/use-footer.ts b/src/renderer/src/hooks/footer/use-footer.ts
index 34865fac..e3e5ac55 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,
+    handlePaste,
+    attachmentsCount,
+    clearAttachments,
   } = useTextInput();
 
   const { interrupt } = useInterrupt();
@@ -49,6 +52,9 @@ export const useFooter = () => {
     handleKeyPress,
     handleCompositionStart,
     handleCompositionEnd,
+    handlePaste,
+    attachmentsCount,
+    clearAttachments,
     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..200c55e5 100644
--- a/src/renderer/src/hooks/footer/use-text-input.tsx
+++ b/src/renderer/src/hooks/footer/use-text-input.tsx
@@ -4,11 +4,15 @@ 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 { ImageData, useMediaCapture } from '@/hooks/utils/use-media-capture';
 
 export function useTextInput() {
   const [inputText, setInputText] = useState('');
   const [isComposing, setIsComposing] = useState(false);
+  const [attachedImages, setAttachedImages] = useState<ImageData[]>([]);
+  const clearAttachments = () => setAttachedImages([]);
+
+
   const wsContext = useWebSocket();
   const { aiState } = useAiState();
   const { interrupt } = useInterrupt();
@@ -20,13 +24,46 @@ export function useTextInput() {
     setInputText(e.target.value);
   };
 
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { items } = e.clipboardData;
+    let foundImage = false;
+
+    for (let i = 0; i < items.length; i += 1) {
+      const item = items[i];
+      if (item.type.startsWith('image/')) {
+        const file = item.getAsFile();
+        if (file) {
+          foundImage = true;
+          const reader = new FileReader();
+          reader.onload = () => {
+            setAttachedImages(prev => [
+              ...prev,
+              {
+                source: 'clipboard',
+                data: reader.result as string,
+                mime_type: file.type,
+              },
+            ]);
+          };
+          reader.readAsDataURL(file);
+        }
+      }
+    }
+    // Prevent the raw image from being inserted as text
+    if (foundImage) e.preventDefault();
+  };
+
   const handleSend = async () => {
-    if (!inputText.trim() || !wsContext) return;
+    if (!inputText.trim() && attachedImages.length === 0) return;
+    if (!wsContext) return;
+
     if (aiState === 'thinking-speaking') {
       interrupt();
     }
 
-    const images = await captureAllMedia();
+    const captured = await captureAllMedia();
+    const images = [...attachedImages, ...captured];
+
 
     appendHumanMessage(inputText.trim());
     wsContext.sendMessage({
@@ -37,6 +74,7 @@ export function useTextInput() {
 
     if (autoStopMic) stopMic();
     setInputText('');
+    setAttachedImages([]);
   };
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -58,5 +96,8 @@ export function useTextInput() {
     handleKeyPress,
     handleCompositionStart,
     handleCompositionEnd,
+    handlePaste,
+    attachmentsCount: attachedImages.length,
+    clearAttachments,
   };
 }
diff --git a/src/renderer/src/hooks/utils/use-media-capture.tsx b/src/renderer/src/hooks/utils/use-media-capture.tsx
index 19170d08..ef8e2bed 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' | 'clipboard';
   data: string;
   mime_type: string;
 }