Show image previews in optimistic user messages

packages/app/src/screens/agent/draft-agent-screen.tsx

@@ -37,8 +37,11 @@ import { useCreateFlowStore } from "@/stores/create-flow-store";
 import { MAX_CONTENT_WIDTH } from "@/constants/layout";
 import { WelcomeScreen } from "@/components/welcome-screen";
 import type { Agent } from "@/contexts/session-context";
-import type { StreamItem } from "@/types/stream";
-import { generateMessageId } from "@/types/stream";
+import {
+  generateMessageId,
+  type StreamItem,
+  type UserMessageImageAttachment,
+} from "@/types/stream";
 import { encodeImages } from "@/utils/encode-images";
 import type {
   AgentProvider,
@@ -259,6 +262,7 @@ export function DraftAgentScreen({
     messageId: string;
     text: string;
     timestamp: Date;
+    images?: UserMessageImageAttachment[];
   };
 
   type DraftAgentMachineState =
@@ -727,6 +731,9 @@ export function DraftAgentScreen({
         id: machine.attempt.messageId,
         text: machine.attempt.text,
         timestamp: machine.attempt.timestamp,
+        ...(machine.attempt.images && machine.attempt.images.length > 0
+          ? { images: machine.attempt.images }
+          : {}),
       },
     ];
   }, [machine]);
@@ -789,7 +796,7 @@ export function DraftAgentScreen({
       images,
     }: {
       text: string;
-      images?: Array<{ uri: string; mimeType: string }>;
+      images?: UserMessageImageAttachment[];
     }) => {
       if (isSubmitting) {
         throw new Error("Already loading");
@@ -848,6 +855,7 @@ export function DraftAgentScreen({
         messageId: generateMessageId(),
         text: trimmedPrompt,
         timestamp: new Date(),
+        ...(images && images.length > 0 ? { images } : {}),
       };
       setPendingCreateAttempt({
         serverId: selectedServerId,
@@ -855,6 +863,9 @@ export function DraftAgentScreen({
         messageId: attempt.messageId,
         text: attempt.text,
         timestamp: attempt.timestamp.getTime(),
+        ...(attempt.images && attempt.images.length > 0
+          ? { images: attempt.images }
+          : {}),
       });
       const modeId =
         modeOptions.length > 0 && selectedMode !== "" ? selectedMode : undefined;