Conversation retention : user messages are returned as Bot message

[venkatx5]

On Conversation retention, user messages are returned as Bot messages on first refresh, so the UI is not differentiating bot message vs user message

Screenshots

Highlighted are user messages entered before refresh. The last message is entered by user after refresh, user messages should appear in this style.

Version

webchat es5 version 4.13.0
https://cdn.botframework.com/botframework-webchat/4.13.0/webchat-es5.js
Integrating the CDN version js directly on the page using script tag (No Iframe). Testing on Desktop/Mobile browsers (Chrome/Safari)

<meta name="botframework-directlinespeech:version" content="4.13.0">
<meta name="botframework-webchat:bundle:variant" content="full-es5">
<meta name="botframework-webchat:bundle:version" content="4.13.0">
<meta name="botframework-webchat:core:version" content="4.13.0">
<meta name="botframework-webchat:ui:version" content="4.13.0">

Describe the bug

We enabled conversation retention with webchat, so that the bot will show the messages even after page refresh or navigating to different page in same site. The user entered messages are coming as Bot messages after first refresh. if user entering message after refresh then those messages are appearing as user messages even after refresh. But the first set of messages always shown as Bot messages. This will create confusion to user as all the messages displayed as bot messages.
We apply styling to the user messages using CSS ".webchat__bubble--from-user, .webchat__bubble--from-user .webchat__bubble__content". But the user messages are rendering without these classes after refresh, so not able to applying styling.

Steps to reproduce

1. Enable conversation retention (By providing same conversation token in the same window after refresh).
2. Enter few message to bot.
3. Refresh the page and continue the conversation.
4. Observe how the user messages are rendering. (It should be right aligned, but it'll render as left aligned)
5. Enter more message.
6. Refresh the page and observe. (First set of messages are left aligned including user messages. The users messages entered after first refresh are rendered properly - right aligned)

Expected behavior

User messages should appear as right aligned and bot messages should be left aligned.

Additional context

The user messages should be rendered with webchat__bubble--from-user class.

[Bug]

[stevkan]

Hi @venkatx5, I'm not able to repro the issue you are experiencing. Are you able to include the Web Chat code you are running so I can look it over and try repro'ing with?

[venkatx5]

@stevkan The conversation is coming from Web App Bot and it's being rendered on Frontend with webchat.js.
For the first conversation, the entire messages coming as Bot Message when refresh (All user message coming as Bot message). But the further conversation messages are appearing fine. We are not clear the issue is on Webchat.js end or web app bot code.
Not sure what web chat code we have to provide to investigate. if you have same demo url which shows this functionality, please share.

[venkatx5]

Any update on this?

[venkatx5]

@stevkan Due to this UI issue, we are holding the conversation retention feature on Production release. Any help would be appreciated greatly.

[stevkan]

@venkatx5, apologies for the delay in response. Please try the sample code I have provided in the attached .zip file. Note that I connect to a locally hosted "token" server for generating a token. You will want to change this to match your setup. In the sample, I am simply applying an orange background color to the same classes you specified in your description.

Please give it a try and let me know if the issue persists or not.

basic-persistence.zip

[venkatx5]

Thanks. Will give a try.

[stevkan]

Closing due to lack of activity. If the problem persists, please feel free to reopen the issue.

[venkatx5]

@stevkan The issue now got resolved. But often we are getting websocket error (Screenshot below)..
This occurs when we keep the bot idle for 1-2 minutes then refresh. Can you please advice? Much appreciate the assistance.