Data Streaming - Visual Cue Element

[asuwebdesign]

When consumers configure their AI models to use data streaming (vs waiting for the entire response), the chatbot should provide a visual cue element that trails the incoming response, as it renders.

State [Initial / Waiting]: Bot response container will render and display the processing visual element (animated 3 dots) while the UI waits for data to be streamed.

State [Data streaming]: Once data is streaming in and being rendered, display the visual element (blue cursor) at the end of the incoming response. Data will likely be streamed word by word.

State [Data streaming complete] Once data has finished streaming and the complete response has been rendered, the visual element (blue cursor) will disappear. Also, if the response has been configured to display the quick actions (row of icons), it can appear after the data has finished streaming.

Example design:

[rebeccaalpert]

• Need to add visual element to trail message
• Message always requires content - I think we should make it optional
• We'll also need a way to control the response actions, sources, etc. when it stops "typing." Maybe a showActions props that they can toggle when the streaming ends.
• Mark also suggests some animations; see https://redhat.enterprise.slack.com/files/U02GECWK4JJ/F07RLR28M7A/chatbot-data-streaming.mov.