Below is a simplified chat bubble for an conversation with an LLM.
This template is written in Templ and uses htmx to fill the
chat bubble with incoming content. The incoming content is sent with SSE using
the v2 version r3labs/sse Server
Sent Events server. This version supports SplitData
which makes it easier to
sent the HTML for htmx. Adding a <span></span>
around every token helps with
the spaces in the tokens.
templ StreamingChatBubble(url string, message string) {
<div>
<span>user</span>
<div>{{message}}</div>
</div>
<div
hx-ext="sse"
sse-connect={ url }
sse-swap="done"
hx-swap="outerHTML"
>
<span>assistant</span>
<div
sse-swap="message"
hx-swap="beforeend"
></div>
</div>
}
templ StreamingChatComplete(message string) {
<div class="...">
<span>assistant</span>
<div>{{message}}</div>
</div>
}
The url
contains the SSE url with a stream
parameter. The Go web server uses
the code to find the right channel for updates. The updates to the channel are
sent to the frontend. Each of the messages has a type. The messages with partial
LLM response have the type message
. And then when all partial responses are
sent, the done
message is sent with the complete chat bubble. This also
removes the connection to the message channel.