Livestream and markdownRespectCRLF

[HesselWellema]

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

No response

Which area does this issue affect?

Others or unrelated

Which theme pack does this issue affect?

I did not test it on other theme packs

What is the public URL for the website?

No response

Please describe the bug

Linefeeds are ignored when the typing events are rendered into a LiveStream bubble. You will notice if if you ask openAI api to create a poem.

Logging the typing events in the console will show

First line Poem, Second line Poem

Third line Poem, Fourth line Poem

The chatbubble will show

First line Poem, Second line Poem

Third line Poem, Fourth line Poem

I reproduced it in sample a.minimizable-web-chat with and without markdownRespectCRLF: true in stylingOptions

Do you see any errors in console log?

No

How to reproduce the issue?

Create a chatbot that streams chunks of an answer from openai api to frontend Install sample a.minimizable-web-chat

add this code to the store

else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          if (action.payload.activity.from.role === 'bot') {
            const { activity } = action.payload;
            setNewMessage(true);
            if (activity.type === 'typing') {
              if (activity.text) {
                const visibleCRLFValue = activity.text.replace(/[\r\n]+/g, '\\r\\n');
                console.log('Event activity with visible CRLF:', visibleCRLFValue);
              }
            }
          }
        }

Ask the LLM to write a Poem You will notice the linefeeds in the console You will notice the they are ignored when rendered in chatbubble

What do you expect?

linefeeds to be respected

What actually happened?

linefeeds are ignored

Do you have any screenshots or recordings to repro the issue?

No response

Adaptive Card JSON

No response

Additional context

I will replace all linefeeds myself by markdown linefeeds as a workaround.

[OEvgeny]

@HesselWellema could you provide more details? We'd need the following to verify:

• transcript of the conversation
• screenshot of the webchat message
• the message html code

We have a way to configure line breaks, as well as some tests covering such cases.

[HesselWellema]

transcript

last typing event in console

html code message

<div class="webchat__bubble__content"><div class="webchat__text-content webchat__text-content--is-markdown webchat--css-knlok-1gi36dr"><div class="webchat__text-content__markdown webchat--css-knlok-kdgeig"><div xmlns="http://www.w3.org/1999/xhtml" class="webchat__render-markdown webchat__render-markdown--message-activity webchat--css-knlok-kdgeig"><p>In a world of ones and zeroes, a titan stands,
Gates opened wide, with skillful hands.
From a garage dream to a global stage,
Microsoft’s tale, page by page.</p><p>Windows to the soul of machines we trust,
Office suites that turn our thoughts to dust.
Azure skies of cloud above, so vast,
Where data streams in torrents, fast.</p><p>Xbox realms where players meet and fight,
In digital worlds, both day and night.
Surface thoughts on tablets sleek and fine,
Where pixels dance and design lines align.</p><p>A legacy built on codes and keys,
A future forged in binary seas.
In silicon and software, it finds its might,
This empire born from a blinking light.</p></div>
</div></div></div>

[HesselWellema]

Additional info "botframework-webchat": "^4.17.1-main.20240603.157a8cb",

in Minimizable webchat

  const styleSet = useMemo(
    () =>
      createStyleSet({
        backgroundColor: 'Transparent',
        markdownRespectCRLF: true,
      }),
    []
  );

  <WebChat
            className="react-web-chat"
            onFetchToken={handleFetchToken}
            store={store}
            styleSet={styleSet}
            token={token}
          />