How to display saved Bot Transcripts on the bot? How to retrieve the right transcript for user?

Question

I am trying to implement Blob transcript storage(https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-howto-v4-storage?view=azure-bot-service-4.0&tabs=csharp#blob-transcript-storage-implementation). I am able to implement and see the stored transcripts in Azure blob storage under container as json files. Now the issue I am facing is how do I display them properly. If I use SendActivityasync then it displays both bot and user messages as if bot is typing it (on the bot side-left side).

1. Is there a way to dump the transcript in one go? Just to display the whole conversation or is it supposed to be done one by one? Is there a function that allows this?

2. Since these transcripts are saved using conversation ids, how do I use this sample to get only the user who's using the bot and not all? If the conversation ids are new for each conversation and user ids according to sample is generated using 'Guid.NewGuid()' it will be random everytime. Are these being saved to keep track of users? Is there any sample to see the whole thing?

I have seen a lot of samples mentioning this being used for debugging. Has anyone implemented this and if so what samples are you following?

Thanks

Answer 1

This is answered in this GitHub Issue. The original issue is pretty old, but there's an updated answer in the linked comment.

Basically, you need to:

1. Load all of your activities from storage (maybe use the Blob REST API for this)
2. Pass the activities in to the createStore() method
3. Pass the store into the renderWebChat() method. For example:

// This is just an example. You'll want to populate history with
// an array of activities from your storage.
const history = [
  {
          type: "message",
          id: "******************",
          timestamp: "2020-10-30T20:45:52.7120529Z",
          channelId: "webchat",
          from: {
            id: "******************",
            name: "******************",
            role: "bot",
          },
          conversation: {
            id: "******************",
          },
          locale: "en-US",
          text: "THIS IS A PREVIOUS MESSAGE",
          inputHint: "acceptingInput",
          attachments: [
          ],
          entities: [
          ],
          replyToId: "******************",
        }
]

[...]

const store = window.WebChat.createStore({ activities: history}, ({ dispatch }) => next => action => {
    return next(action);
});

window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ secret: token }),
    store
    }, 
    document.getElementById('webchat'));

[...]