I have a MVC application in which I am attempting to embed my chat bot into.
My MVC application is used by internal staff. They will be using the web chat when a customer has asked to speak with a human after having an initial conversation with the bot. I want to be able to render the web chat with chat history from this previous conversation that the bot has been having with a customer.
I am trying to do this by creating a store with the activities from the previous conversation and passing this into my renderWebChat call like so (simplified example with IDs scrambled, activities are actually being pulled via the direct line API)
<div id="webchat" role="main"></div>
@section Scripts {
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
const history = [
{
"type": "message",
"id": "DHKDFYTDVDUYHG3pNihdH-au|0000000",
"timestamp": "2024-04-23T00:44:04.1202119+00:00",
"localTimestamp": "2024-04-23T10:43:59.116+10:00",
"localTimezone": "Australia/Sydney",
"serviceUrl": "https://directline.botframework.com/",
"channelId": "directline",
"from": {
"id": "dl_12a0062b-cbff-450f-ad29-b10a00a68857",
"name": "",
"aadObjectId": null,
"role": null
},
"conversation": {
"isGroup": null,
"conversationType": null,
"id": "DHKqOSRTSDCG3pNihdH-au",
"name": null,
"aadObjectId": null,
"role": null,
"tenantId": null
},
"recipient": {
"id": "20a68920-caac-42f4-a7d0-665f79030dcd@M3-KDTYFDVYG",
"name": "Jac Test",
"aadObjectId": null,
"role": null
},
"textFormat": "plain",
"attachmentLayout": null,
"membersAdded": null,
"membersRemoved": null,
"reactionsAdded": null,
"reactionsRemoved": null,
"topicName": null,
"historyDisclosed": null,
"locale": "en-AU",
"text": "Hello",
"speak": null,
"inputHint": null,
"summary": null,
"suggestedActions": null,
"attachments": [],
"entities": [
{
"type": "ClientCapabilities",
"requiresBotState": true,
"supportsListening": true,
"supportsTts": true
}
],
"channelData": {
"clientActivityID": "lbdkoa947y"
},
"action": null,
"replyToId": null,
"label": null,
"valueType": null,
"value": null,
"name": null,
"relatesTo": null,
"code": null,
"expiration": null,
"importance": null,
"deliveryMode": null,
"listenFor": null,
"textHighlights": null,
"semanticAction": null,
"callerId": null
},
{
"type": "message",
"id": "DHKqRDTRDRFTGNihdH-au|0000001",
"timestamp": "2024-04-23T00:44:04.600965+00:00",
"localTimestamp": null,
"localTimezone": null,
"serviceUrl": null,
"channelId": "directline",
"from": {
"id": "20a68920-caac-42f4-a7d0-5619689648d",
"name": "Jac Test",
"aadObjectId": null,
"role": "bot"
},
"conversation": {
"isGroup": null,
"conversationType": null,
"id": "DHKqINIJNJa3pNihdH-au",
"name": null,
"aadObjectId": null,
"role": null,
"tenantId": null
},
"recipient": null,
"textFormat": "markdown",
"attachmentLayout": null,
"membersAdded": [],
"membersRemoved": [],
"reactionsAdded": [],
"reactionsRemoved": [],
"topicName": null,
"historyDisclosed": null,
"locale": "en-AU",
"text": "Hello, how can I help you today?",
"speak": "Hello, \u003cbreak strength\u003d\"medium\" /\u003e how can I help?",
"inputHint": "acceptingInput",
"summary": null,
"suggestedActions": null,
"attachments": [],
"entities": [],
"channelData": null,
"action": null,
"replyToId": "DHKqBJHHBHF6Gva3pNihdH-au|0000000",
"label": null,
"valueType": null,
"value": null,
"name": null,
"relatesTo": null,
"code": null,
"expiration": null,
"importance": null,
"deliveryMode": null,
"listenFor": [],
"textHighlights": [],
"semanticAction": null,
"callerId": null
}
];
const store = window.WebChat.createStore({ activities: history}, ({ dispatch }) => next => action => {
return next(action);
});
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({
token: '@Model.ChatBotToken' // Use the token from the model
}),
store: store
}, document.getElementById('webchat'));
</script>
}
When loading my Razor view I get the following error
Is anyone able to assist?