fix: properly render DALL-E/gpt-image responses in request drawer (#5542)

- Add `role: "assistant"` to response messages so ChatOnlyView displays them
- Add `request.messages` array with user prompt for proper Chat component rendering
- Add `data:image/png;base64,` prefix for base64 images so ImageContent can process them

The DALL-E mapper was not properly structuring messages for the UI:
1. Response messages lacked a `role` field, causing them to be filtered out
2. Request didn't include a `messages` array, so the user prompt wasn't shown
3. Raw base64 strings from OpenAI's `b64_json` weren't being recognized as images

Co-authored-by: Justin Torre <justin@Justins-MacBook-Pro.local>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: 3 people

packages/__tests__/llm-mapper/dalle.test.ts

@@ -35,14 +35,22 @@ describe("mapDalleRequest", () => {
         json_schema: {},
       },
       size: "1024x1024",
+      messages: [
+        {
+          role: "user",
+          content: "A beautiful image of a cat",
+          _type: "message",
+        },
+      ],
     });
 
     // Test response schema
     expect(result.schema.response!.messages![0]).toEqual({
+      role: "assistant",
       content:
         "Render a detailed image of a majestic cat poised gracefully on a sun-dappled garden path...",
       _type: "image",
-      image_url: "iVB=",
+      image_url: "data:image/png;base64,iVB=",
     });
 
     // Test preview
@@ -61,7 +69,7 @@ describe("mapDalleRequest", () => {
         "Render a detailed image of a majestic cat poised gracefully on a sun-dappled garden path...",
       role: "assistant",
       _type: "image",
-      image_url: "iVB=",
+      image_url: "data:image/png;base64,iVB=",
     });
   });
 
@@ -98,6 +106,7 @@ describe("mapDalleRequest", () => {
     expect(result.preview.request).toBe("");
     expect(result.preview.response).toBe("");
     expect(result.schema.response!.messages![0]).toEqual({
+      role: "assistant",
       content: "",
       _type: "image",
       image_url: "",

packages/llm-mapper/mappers/openai/dalle.ts

@@ -32,6 +32,15 @@ export const mapDalleRequest: MapperFn<DalleRequestBody, any> = ({
   statusCode = 200,
   model,
 }) => {
+  // Format the image URL properly - add data URL prefix for base64 images
+  const rawImageData =
+    response?.data?.[0]?.b64_json || response?.data?.[0]?.url || "";
+  const imageUrl = rawImageData
+    ? rawImageData.startsWith("http://") || rawImageData.startsWith("https://")
+      ? rawImageData
+      : `data:image/png;base64,${rawImageData}`
+    : "";
+
   const llmSchema: LlmSchema = {
     request: {
       model: request.model,
@@ -44,14 +53,24 @@ export const mapDalleRequest: MapperFn<DalleRequestBody, any> = ({
             json_schema: {},
           }
         : undefined,
+      // Add messages array for proper UI rendering
+      messages: request.prompt
+        ? [
+            {
+              role: "user",
+              content: request.prompt,
+              _type: "message",
+            },
+          ]
+        : [],
     },
     response: {
       messages: [
         {
+          role: "assistant",
           content: response?.data?.[0]?.revised_prompt || "",
           _type: "image",
-          image_url:
-            response?.data?.[0]?.b64_json || response?.data?.[0]?.url || "",
+          image_url: imageUrl,
         },
       ],
       model: model,
@@ -73,8 +92,7 @@ export const mapDalleRequest: MapperFn<DalleRequestBody, any> = ({
           content: response?.data?.[0]?.revised_prompt || "",
           role: "assistant",
           _type: "image",
-          image_url:
-            response?.data?.[0]?.b64_json || response?.data?.[0]?.url || "",
+          image_url: imageUrl,
         },
       ],
     },