Instead of splitting the SSE stream, use a consolidated stream with oob swap for some events

Author: chriscarrollsmith

routers/chat.py

@@ -1,5 +1,4 @@
 import logging
-import time
 from datetime import datetime
 from typing import AsyncGenerator, Optional, Union
 from fastapi.templating import Jinja2Templates
@@ -113,16 +112,19 @@ async def handle_assistant_stream(
                         "messageCreated",
                         templates.get_template("components/assistant-step.html").render(
                             step_type="assistantMessage",
-                            stream_name=f"textDelta{step_id}"
+                            step_id=step_id
                         )
                     )
 
                 if isinstance(event, ThreadMessageDelta) and event.data.delta.content:
                     content: MessageContentDelta = event.data.delta.content[0]
                     if isinstance(content, TextDeltaBlock) and content.text and content.text.value:
+                        step_id = event.data.id
+                        text_value = content.text.value
+                        sse_data = f'<span hx-swap-oob="beforeend:#step-{step_id}">{text_value}</span>'
                         yield sse_format(
-                            f"textDelta{step_id}",
-                            content.text.value
+                            "textDelta",
+                            sse_data
                         )
 
                 if isinstance(event, ThreadRunStepCreated) and event.data.type == "tool_calls":

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,imageOutput,fileOutput" 
+     sse-swap="messageCreated,toolCallCreated,toolOutput,imageOutput,fileOutput,textDelta" 
      sse-close="endStream"
      data-assistant-id="{{ assistant_id }}"
      data-thread-id="{{ thread_id }}">

templates/components/assistant-step.html

@@ -1,2 +1,2 @@
 <!-- assistant-step.html -->
-<div class="{{ step_type }}" sse-swap="{{ stream_name }}"></div>
+<div class="{{ step_type }}" id="step-{{ step_id }}"></div>