[Demo] Add an example with streaming

[valtzu]

Q	A
Bug fix?	no
New feature?	no
Docs?	no
License	MIT

I'm proposing to add an example which uses streaming via Turbo Streams / SSE since symfony/ux-turbo is already included, yet no demo app is using streaming.

This demo does not use a custom Stimulus controller at all, but solely relies on vendor-provided live & turbo_stream controllers, making it ideal for those afraid of JS :)

sequenceDiagram
    participant frontend
    participant backend
    participant platform

    frontend->>backend: Live action: submit with message
    activate backend
    backend-->>backend: Store the message<br>but do nothing else
    backend-->>frontend: Response with placeholder message element + <turbo-stream-source id="stream" src="/stream/assistant-reply">
    deactivate backend

    frontend->>backend: turbo_stream_controller.js starts consuming /stream/assistant-reply as SSE source
    activate backend
    backend->>platform: Make platform call with stream: true
    activate platform
    platform-->>backend: first chunk received
    Note over backend,frontend: Clear out "Thinking..." after receiving the first chunk
    backend-->>frontend: data: <turbo-stream action="update" target="placeholder"></turbo-stream>
    backend-->>frontend: data: <turbo-stream action="append" target="placeholder">{{ chunk }}</turbo-stream>
    loop until end of stream
        platform-->>backend: nth chunk received
        backend-->>frontend: data: <turbo-stream action="append" target="placeholder">{{ chunk }}</turbo-stream>
    end
    deactivate platform
    backend-->>frontend: data: <turbo-stream action="remove" target="stream"></turbo-stream>
    frontend-->>backend: turbo_stream_controller.js closes the stream since the <turbo-stream-source> was removed
    deactivate backend

Loading

---

A couple of observations made while doing this:

1. Symfony\AI\Agent\Chat is not compatible at all with async/streaming flow.
2. As I recall, Message IDs were designed/added "for the frontend". If that's still true, then it'd nice if you could pass the message id from the outside, because it could be needed in the frontend to render the placeholder message ("thinking...") which happens before we have an instance of AssistantMessage. Or alternatively, AssistantMessage would need to be non-readonly (or have withContent) so that the message object could be created earlier and appended with content later. At the end, I didn't end up needing the IDs here since they didn't solve the "duplicate messages" (one from turbo, another from live component) problem I had at some point.

[OskarStark]

INstead of an image, could you paste the mermaid code for the diagram to the PR header?

[chr-hertel]

This looks great - even tho I'm not sure I get it all - but will give it a try 👍 Thanks already!

[chr-hertel]

Works great - thanks a lot! :)
Was thinking if we'd just use that for all examples instead of typed.js and being an extra demo - what do you think?

If extra demo, we'd need to update the top menu please as well, and the image in the readme:

[chr-hertel]

Suggested change

	<p class="card-text">Simple demonstration of text streaming capabilities.</p>
	<p class="card-text">Simple demonstration of text streaming capabilities based on Turbo and SSE.</p>

[chr-hertel]

let's use the same icon on both pages:

Suggested change

	{{ ux_icon('tabler:activity', { height: '150px', width: '150px' }) }}
	{{ ux_icon('mdi:car-turbocharger', { height: '150px', width: '150px' }) }}

[valtzu]

Was thinking if we'd just use that for all examples instead of typed.js and being an extra demo - what do you think?

I did consider that, but not sure if it's a good idea since the LLM calls don't show up in the profiler when using streaming. Maybe you know if there's something to do about that?

[chr-hertel]

LLM calls don't show up in the profiler when using streaming

oh, wasn't aware, but true, i think having that profiler insights is important for the demo - let's keep it as a separate one - good call 👍

[valtzu]

Did the suggested changes

Created an issue for the profiler bug and I have an idea for the fix too, if it'll work, then maybe we could use streaming for all demos instead of this separate one

[chr-hertel]

Great work again, thanks!