Feature/83694 streaming markdown handling

[dshire]

Success criteria

Please describe what should be possible after this change. List all individual items on a separate line.

This PR adds support for markdown rendering and streaming messages (animation + message chunk collation) to the chat components. There is a new view on the demo page as well.

• Markdown rendering can be used without the cognigy PR, but might have issues, please only test with the related cognigy repo PR (issues would be due to some trim() logic in cognigy that was happening before, which breaks valid markdown in some situations)

How to test

Please describe the individual steps on how a peer can test your change.

For testing, checkout the chat-components branch of the same name with the PR linked here: Cognigy/chat-components#106
npm ci && npm pack in chat-components repo,
then npm i ../chat-components/cognigy-chat-components-0.38.0.tgz && npm run dev in (this) Webchat repo (correct path if it is somewhere else for you)

In the local Webchat index.html you need to enable
behavior: {
collateStreamedOutputs: true,
progressiveStreaming: true,
renderMarkdown: false,
}
or test the settings in the Endpoint settings

Please test directly with the related PR in cognigy AI (coming up)

Security

• Possible injection vector
• Authentication/Access controls touched
• Sensitive Data could be exposed
• XSS
• Logging/Monitoring touched
• Exchanges data with external systems
• No security implications

Additional considerations

• This PR might have performance implications

Documentation Considerations

These are hints for the documentation team to help write the docs.

[sushmi21]

The chat does not auto scroll to bottom anymore. Was the scroll button implemented as a work-around for this?

Update: The scroll behavior is not consistent. It behaves differently every time
Screencast from 27.01.2025 16:11:37.webm

[sushmi21]

Scrolling works as expected with the new setting :)

[mastasky]

When using collated streamed messages and leaving the window, you get a sound for every incoming "chunk". We should probably only emit one chunk per "message ID".

[mastasky]

In addition, when closing the webchat, we get previews for every message and markdown isnt rendered in the preview.

[mastasky]

A marker on the webchat shows the number of missed messages. this marker is never reset. It remains on whatever number was reached and only ever increases.

[dshire]

A marker on the webchat shows the number of missed messages. this marker is never reset. It remains on whatever number was reached and only ever increases.

this is a general regression and should be handled separately. I forwarded this to the PO and he created a ticket https://cognigy.visualstudio.com/Boron/_workitems/edit/91476

[dshire]

When using collated streamed messages and leaving the window, you get a sound for every incoming "chunk". We should probably only emit one chunk per "message ID".

fixed

[dshire]

In addition, when closing the webchat, we get previews for every message and markdown isnt rendered in the preview.

Fixed:

• only the first chunk is previewed
• markdown characters are now removed. adding markdown rendering in the teaser message is blocked by updating the React version in the webchat to v18, which I won't do in this PR. created a follow up to add markdown rendering in teaser. (https://cognigy.visualstudio.com/Team%20X/_workitems/edit/91479)