Mobile Streaming and other UI questions

Dash Python
, ,
1

Hi all,

I created a nice mobile Dash app which has an interactive dashboard, database and (most importantly) chat which includes a few agents, including text2sql, charting, web search and more.

Here is my problem: In my chat, I added streaming for when there are no agents triggered. The sreaming works really well, This is but for some reason, SSE by dash extensions doesn’t recognize ‘\n’ no matter what I tried and the summaries aren’t as nice as for the none-streaming responses.

I added a video to illustrate these examples, would love anybody’s advice on how I can pull it off, my feeling is that I’m missing something.

Thanks for your help!

2

Hi @odedloe87 ,

Can you provide a mre? And are you rendering into a Div or Markdown? With markdown it shouldnt be a problem but if that is the case I would guess its a problem with SSE itself because \n\n is part of the protocol indicating the end of an event.

Hope this helps and try to provide a mre if you are already using markdown.

Best regards,

Christian

3

Hi @Datenschubse, I tried both dcc.markdown (in the example) and with a div with style={‘whiteSpace’: ‘pre-wrap’}. Here is my MRE, thanks for your help, much appreciated

payload = {"model": model_used, "messages": [{'role':'user','content':'tell me a story'}]}
dmc.Paper([
SSE(
id="sse1",
url="/stream-openai",
options=sse_options(json.dumps(payload)),
concat=True,
animate_chunk=5,
animate_delay=10,
),
dcc.Markdown(id="last_response",style={'font-size':15})
])

@app.server.post("/stream-openai")
def stream_openai():
    # Accept either raw text or JSON body (sse_options handles both)
    data = json.loads(request.data.decode("utf-8"))
    if data is None:
        # fallback: raw text (not used here, but keeps parity with your example)
        data = {"messages": [{"role": "user", "content": request.data.decode("utf-8")}]}

    messages = data.get("messages", [])
    model = data.get("model")

    def eventStream():
        for piece in stream_text(model_name=model, hist=[{'role':'user','content':'tell me a story'}]}):
            
            yield sse_message(piece)

        yield sse_message("[DONE]")

    return Response(eventStream(), mimetype="text/event-stream")

app.clientside_callback(
    "function(x){return x;}",
    Output("last_response", "children"),
    Input("sse1", "animation"),
)