Fix event type on imageOutput SSE

Author: chriscarrollsmith

routers/chat.py

@@ -247,9 +247,9 @@ async def handle_assistant_stream(
                                     elif output.type == "image" and output.image and output.image.file_id:
                                         logger.debug(f"Image Output - File ID: {output.image.file_id}")
                                         # Create the image HTML on the backend
-                                        image_html = f'<img src="/assistants/{assistant_id}/messages/{thread_id}/files/{output.image.file_id}/content" class="code-interpreter-image">'
+                                        image_html = f'<img src="/assistants/{assistant_id}/files/{output.image.file_id}/content" class="code-interpreter-image">'
                                         yield sse_format(
-                                            f"toolDelta{step_id}",
+                                            f"imageOutput",
                                             image_html
                                         )
 
@@ -362,28 +362,3 @@ async def event_generator() -> AsyncGenerator[str, None]:
             "Connection": "keep-alive",
         }
     )
-
-# Route to serve image files from OpenAI API
-@router.get("/files/{file_id}/content")
-async def get_file_content(
-    file_id: str,
-    client: AsyncOpenAI = Depends(lambda: AsyncOpenAI())
-) -> StreamingResponse:
-    """
-    Streams file content from OpenAI API.
-    This route is used to serve images and other files generated by the code interpreter.
-    """
-    try:
-        # Get the file content from OpenAI
-        file_content = await client.files.content(file_id)
-        file_bytes = file_content.read()  # Remove await since read() returns bytes directly
-        
-        # Return the file content as a streaming response
-        # Note: In a production environment, you might want to add caching
-        return StreamingResponse(
-            content=iter([file_bytes]),
-            media_type="image/png"  # You might want to make this dynamic based on file type
-        )
-    except Exception as e:
-        logger.error(f"Error getting file content: {e}")
-        raise HTTPException(status_code=500, detail=str(e))

routers/files.py

@@ -105,3 +105,27 @@ async def delete_file(
     vector_store_id = await get_or_create_vector_store(assistant_id, client)
     await client.beta.vector_stores.files.delete(vector_store_id=vector_store_id, file_id=fileId)
     return {"message": "File deleted successfully"}
+
+@router.get("/{file_id}/content")
+async def get_file_content(
+    file_id: str,
+    client: AsyncOpenAI = Depends(lambda: AsyncOpenAI())
+) -> StreamingResponse:
+    """
+    Streams file content from OpenAI API.
+    This route is used to serve images and other files generated by the code interpreter.
+    """
+    try:
+        # Get the file content from OpenAI
+        file_content = await client.files.content(file_id)
+        file_bytes = file_content.read()  # Remove await since read() returns bytes directly
+        
+        # Return the file content as a streaming response
+        # Note: In a production environment, you might want to add caching
+        return StreamingResponse(
+            content=iter([file_bytes]),
+            media_type="image/png"  # You might want to make this dynamic based on file type
+        )
+    except Exception as e:
+        logger.error(f"Error getting file content: {e}")
+        raise HTTPException(status_code=500, detail=str(e))

templates/components/assistant-run.html

@@ -2,7 +2,7 @@
 <div class="assistant-run" hx-swap="beforeend" 
      hx-ext="sse"     
      sse-connect="/assistants/{{ assistant_id }}/messages/{{ thread_id }}/receive" 
-     sse-swap="messageCreated,toolCallCreated,toolOutput,codeInterpreterOutput" 
+     sse-swap="messageCreated,toolCallCreated,toolOutput,imageOutput,fileOutput" 
      sse-close="endStream"
      data-assistant-id="{{ assistant_id }}"
      data-thread-id="{{ thread_id }}">