Merge pull request #1863 from xKevIsDev/main

fix: enhance UserMessage component to support image parts and improve rendering

app/components/chat/Chat.client.tsx

@@ -589,6 +589,8 @@ export const ChatImpl = memo(
       textareaRef.current?.blur();
     };
 
+    console.log(messages);
+
     /**
      * Handles the change event for the textarea and updates the input state.
      * @param event - The change event from the textarea.

app/components/chat/Messages.client.tsx

@@ -71,7 +71,7 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
                 >
                   <div className="grid grid-col-1 w-full">
                     {isUserMessage ? (
-                      <UserMessage content={content} />
+                      <UserMessage content={content} parts={parts} />
                     ) : (
                       <AssistantMessage
                         content={content}

app/components/chat/UserMessage.tsx

@@ -6,17 +6,34 @@ import { MODEL_REGEX, PROVIDER_REGEX } from '~/utils/constants';
 import { Markdown } from './Markdown';
 import { useStore } from '@nanostores/react';
 import { profileStore } from '~/lib/stores/profile';
+import type {
+  TextUIPart,
+  ReasoningUIPart,
+  ToolInvocationUIPart,
+  SourceUIPart,
+  FileUIPart,
+  StepStartUIPart,
+} from '@ai-sdk/ui-utils';
 
 interface UserMessageProps {
   content: string | Array<{ type: string; text?: string; image?: string }>;
+  parts:
+    | (TextUIPart | ReasoningUIPart | ToolInvocationUIPart | SourceUIPart | FileUIPart | StepStartUIPart)[]
+    | undefined;
 }
 
-export function UserMessage({ content }: UserMessageProps) {
+export function UserMessage({ content, parts }: UserMessageProps) {
+  const profile = useStore(profileStore);
+
+  // Extract images from parts - look for file parts with image mime types
+  const images =
+    parts?.filter(
+      (part): part is FileUIPart => part.type === 'file' && 'mimeType' in part && part.mimeType.startsWith('image/'),
+    ) || [];
+
   if (Array.isArray(content)) {
     const textItem = content.find((item) => item.type === 'text');
     const textContent = stripMetadata(textItem?.text || '');
-    const images = content.filter((item) => item.type === 'image' && item.image);
-    const profile = useStore(profileStore);
 
     return (
       <div className="overflow-hidden flex flex-col gap-3 items-center ">
@@ -43,7 +60,7 @@ export function UserMessage({ content }: UserMessageProps) {
           {images.map((item, index) => (
             <img
               key={index}
-              src={item.image}
+              src={`data:${item.mimeType};base64,${item.data}`}
               alt={`Image ${index + 1}`}
               className="max-w-full h-auto rounded-lg"
               style={{ maxHeight: '512px', objectFit: 'contain' }}
@@ -57,7 +74,22 @@ export function UserMessage({ content }: UserMessageProps) {
   const textContent = stripMetadata(content);
 
   return (
-    <div className="overflow-hidden pt-[4px]">
+    <div className="flex flex-col bg-accent-500/10 backdrop-blur-sm px-5 p-3.5 w-auto rounded-lg ml-auto">
+      <div className="flex gap-3.5 mb-4">
+        {images.map((item, index) => (
+          <div className="relative flex rounded-lg border border-bolt-elements-borderColor overflow-hidden">
+            <div className="h-16 w-16 bg-transparent outline-none">
+              <img
+                key={index}
+                src={`data:${item.mimeType};base64,${item.data}`}
+                alt={`Image ${index + 1}`}
+                className="h-full w-full rounded-lg"
+                style={{ objectFit: 'fill' }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
       <Markdown html>{textContent}</Markdown>
     </div>
   );