feat: image support

add the ability to add images to your prompt

app/components/chat/UserMessage.tsx

@@ -1,14 +1,37 @@
 import { modificationsRegex } from '~/utils/diff';
 import { Markdown } from './Markdown';
 
+interface MessageContent {
+  type: string;
+  text?: string;
+  image?: string;
+}
+
 interface UserMessageProps {
-  content: string;
+  content: string | MessageContent[];
 }
 
 export function UserMessage({ content }: UserMessageProps) {
   return (
     <div className="overflow-hidden pt-[4px]">
-      <Markdown limitedMarkdown>{sanitizeUserMessage(content)}</Markdown>
+      {Array.isArray(content) ? (
+        <div className="flex flex-col gap-4">
+          {content.map((item, index) => {
+            if (item.type === 'text') {
+              return <Markdown key={index} limitedMarkdown>{sanitizeUserMessage(item.text || '')}</Markdown>;
+            } else if (item.type === 'image') {
+              return (
+                <div key={index} className="max-w-[300px]">
+                  <img src={item.image} alt="User uploaded" className="rounded-lg" />
+                </div>
+              );
+            }
+            return null;
+          })}
+        </div>
+      ) : (
+        <Markdown limitedMarkdown>{sanitizeUserMessage(content)}</Markdown>
+      )}
     </div>
   );
 }