Add screenshot paste support (#2679)

ui/desktop/src/components/UserMessage.tsx

@@ -1,6 +1,8 @@
 import React, { useRef, useMemo } from 'react';
 import LinkPreview from './LinkPreview';
+import ImagePreview from './ImagePreview';
 import { extractUrls } from '../utils/urlUtils';
+import { extractImagePaths, removeImagePathsFromText } from '../utils/imageUtils';
 import MarkdownContent from './MarkdownContent';
 import { Message, getTextContent } from '../types/message';
 import MessageCopyLink from './MessageCopyLink';
@@ -16,11 +18,17 @@ export default function UserMessage({ message }: UserMessageProps) {
   // Extract text content from the message
   const textContent = getTextContent(message);
 
+  // Extract image paths from the message
+  const imagePaths = extractImagePaths(textContent);
+
+  // Remove image paths from text for display
+  const displayText = removeImagePathsFromText(textContent, imagePaths);
+
   // Memoize the timestamp
   const timestamp = useMemo(() => formatMessageTimestamp(message.created), [message.created]);
 
   // Extract URLs which explicitly contain the http:// or https:// protocol
-  const urls = extractUrls(textContent, []);
+  const urls = extractUrls(displayText, []);
 
   return (
     <div className="flex justify-end mt-[16px] w-full opacity-0 animate-[appear_150ms_ease-in_forwards]">
@@ -29,17 +37,27 @@ export default function UserMessage({ message }: UserMessageProps) {
           <div className="flex bg-slate text-white rounded-xl rounded-br-none py-2 px-3">
             <div ref={contentRef}>
               <MarkdownContent
-                content={textContent}
+                content={displayText}
                 className="text-white prose-a:text-white user-message"
               />
             </div>
           </div>
+
+          {/* Render images if any */}
+          {imagePaths.length > 0 && (
+            <div className="flex flex-wrap gap-2 mt-2">
+              {imagePaths.map((imagePath, index) => (
+                <ImagePreview key={index} src={imagePath} alt={`Pasted image ${index + 1}`} />
+              ))}
+            </div>
+          )}
+
           <div className="relative h-[22px] flex justify-end">
             <div className="absolute right-0 text-xs text-textSubtle pt-1 transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0">
               {timestamp}
             </div>
             <div className="absolute right-0 pt-1">
-              <MessageCopyLink text={textContent} contentRef={contentRef} />
+              <MessageCopyLink text={displayText} contentRef={contentRef} />
             </div>
           </div>
         </div>