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

- Updated UserMessage to accept a new `parts` prop for handling different message types, including images.
- Refactored image handling to extract and display images from the parts array, ensuring proper rendering of image content.
- Adjusted the layout and styling of the UserMessage component for better visual presentation.

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>
   );