From 0ab334126a9520907a58383f36209cfa8208bfbd Mon Sep 17 00:00:00 2001
From: Andrew Trokhymenko <atrokhym@gmail.com>
Date: Mon, 2 Dec 2024 14:08:41 -0500
Subject: [PATCH] adding to display the image in the chat conversation. and
 paste image too. tnx to @Stijnus

---
 app/components/chat/BaseChat.tsx    | 30 +++++++++++++++++++++++
 app/components/chat/UserMessage.tsx | 38 +++++++++++++++++++++++------
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index f004b3d..5c086d4 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -190,6 +190,35 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       input.click();
     };
 
+    const handlePaste = async (e: React.ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+
+      if (!items) {
+        return;
+      }
+
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault();
+
+          const file = item.getAsFile();
+
+          if (file) {
+            const reader = new FileReader();
+
+            reader.onload = (e) => {
+              const base64Image = e.target?.result as string;
+              setUploadedFiles?.([...uploadedFiles, file]);
+              setImageDataList?.([...imageDataList, base64Image]);
+            };
+            reader.readAsDataURL(file);
+          }
+
+          break;
+        }
+      }
+    };
+
     const baseChat = (
       <div
         ref={ref}
@@ -286,6 +315,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     onChange={(event) => {
                       handleInputChange?.(event);
                     }}
+                    onPaste={handlePaste}
                     style={{
                       minHeight: TEXTAREA_MIN_HEIGHT,
                       maxHeight: TEXTAREA_MAX_HEIGHT,
diff --git a/app/components/chat/UserMessage.tsx b/app/components/chat/UserMessage.tsx
index 167ce87..3e6485b 100644
--- a/app/components/chat/UserMessage.tsx
+++ b/app/components/chat/UserMessage.tsx
@@ -6,10 +6,39 @@ import { MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
 import { Markdown } from './Markdown';
 
 interface UserMessageProps {
-  content: string;
+  content: string | Array<{ type: string; text?: string; image?: string }>;
 }
 
 export function UserMessage({ content }: UserMessageProps) {
+  if (Array.isArray(content)) {
+    const textItem = content.find((item) => item.type === 'text');
+    const textContent = sanitizeUserMessage(textItem?.text || '');
+    const images = content.filter((item) => item.type === 'image' && item.image);
+
+    return (
+      <div className="overflow-hidden pt-[4px]">
+        <div className="flex items-start gap-4">
+          <div className="flex-1">
+            <Markdown limitedMarkdown>{textContent}</Markdown>
+          </div>
+          {images.length > 0 && (
+            <div className="flex-shrink-0 w-[160px]">
+              {images.map((item, index) => (
+                <div key={index} className="relative">
+                  <img
+                    src={item.image}
+                    alt={`Uploaded image ${index + 1}`}
+                    className="w-full h-[160px] rounded-lg object-cover border border-bolt-elements-borderColor"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   const textContent = sanitizeUserMessage(content);
 
   return (
@@ -19,11 +48,6 @@ export function UserMessage({ content }: UserMessageProps) {
   );
 }
 
-function sanitizeUserMessage(content: string | Array<{ type: string; text?: string; image_url?: { url: string } }>) {
-  if (Array.isArray(content)) {
-    const textItem = content.find((item) => item.type === 'text');
-    return textItem?.text?.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '') || '';
-  }
-
+function sanitizeUserMessage(content: string) {
   return content.replace(MODEL_REGEX, '').replace(PROVIDER_REGEX, '');
 }