Closed RamonDonadeu closed 9 months ago
I have an automatic message that displays a card. That works always, i can restart the chat 50 times and there will be 50 cards, but arround the 20th message, if i write something. the next time i reload the chat it throws the error.
I got the last 4 messages where the message written by me is:
{
"type": "message",
"id": "DyO0QkdgqHg49WD7sw3RVo-fr|0000029",
"timestamp": "2023-12-04T16:13:03.6784072Z",
"channelId": "webchat",
"from": {
"id": "test-ramon-bot",
"name": "test-ramon-bot"
},
"conversation": {
"id": "DyO0QkdgqHg49WD7sw3RVo-fr"
},
"locale": "es",
"text": "Ramón, Bienvenido/a al Bot de Soporte de.",
"inputHint": "acceptingInput",
"attachments": [],
"entities": [],
"replyToId": "DyO0QkdgqHg49WD7sw3RVo-fr|0000028",
"channelData": {}
},
{
"type": "message",
"id": "DyO0QkdgqHg49WD7sw3RVo-fr|0000030",
"timestamp": "2023-12-04T16:13:03.7537216Z",
"channelId": "webchat",
"from": {
"id": "test-ramon-bot",
"name": "test-ramon-bot"
},
"conversation": {
"id": "DyO0QkdgqHg49WD7sw3RVo-fr"
},
"attachmentLayout": "list",
"locale": "es",
"inputHint": "acceptingInput",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"backgroundImage": "",
"body": [
{
"type": "TextBlock",
"text": "Selecciona una opción:",
"weight": "bolder",
"size": "medium"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Iniciar conversación con un departamento",
"data": {
"action": "startConversation"
}
},
{
"type": "Action.Submit",
"title": "Enviar un formulario",
"data": {
"action": "startForm"
}
}
]
}
}
],
"entities": [],
"replyToId": "DyO0QkdgqHg49WD7sw3RVo-fr|0000028",
"channelData": {}
},
{
"type": "message",
"id": "DyO0QkdgqHg49WD7sw3RVo-fr|0000031",
"timestamp": "2023-12-04T16:13:08.6588667Z",
"localTimestamp": "2023-12-04T17:13:08.536+01:00",
"localTimezone": "Europe/Madrid",
"serviceUrl": "https://directline.botframework.com/",
"channelId": "webchat",
"from": {
"id": "YOUR_USER_ID",
"name": "sergiy-test",
"role": "user"
},
"conversation": {
"id": "DyO0QkdgqHg49WD7sw3RVo-fr"
},
"textFormat": "plain",
"locale": "es",
"text": "hola",
"attachments": [],
"channelData": {}
},
{
"type": "message",
"id": "DyO0QkdgqHg49WD7sw3RVo-fr|0000032",
"timestamp": "2023-12-04T16:13:08.9682547Z",
"channelId": "webchat",
"from": {
"id": "test-ramon-bot",
"name": "test-ramon-bot"
},
"conversation": {
"id": "DyO0QkdgqHg49WD7sw3RVo-fr"
},
"locale": "es",
"text": "alguna respuesta de texto",
"inputHint": "acceptingInput",
"attachments": [],
"entities": [],
"replyToId": "DyO0QkdgqHg49WD7sw3RVo-fr|0000031",
"channelData": {}
}
]
and it says:
TypeError: Cannot read properties of undefined (reading 'has')
at webchat.js:2:2288754
at Object.useMemo (webchat.js:2:3136213)
at useMemo (webchat.js:2:3196895)
at y (webchat.js:2:2288012)
at Qo (webchat.js:2:3132665)
at webchat.js:2:3166054
at Ka (webchat.js:2:3170044)
at $a (webchat.js:2:3170426)
at ks (webchat.js:2:3177452)
at xs (webchat.js:2:3176832)
If the third activitie is deleted it works correctly, it is the message written by me. I can't see the error because the code for webchat is minified
UPDATE
After looking which messages throw an error I started looking for which key throws the error also.
const activities = [
{
type: 'message',
id: '1px0sZT1bJHKtlOFQWHIo1-fr|0000003',
timestamp: '2023-12-05T07:21:40.7720429Z',
localTimestamp: '2023-12-05T08:11:40.485+01:00',
localTimezone: 'Europe/Madrid',
serviceUrl: 'https://directline.botframework.com/',
channelId: 'webchat',
from: {
id: 'YOUR_USER_ID',
name: 'sergiy-test',
role: 'user'
},
conversation: {
id: '1px0sZT1bJHKtlOFQWHIo1-fr'
},
textFormat: 'plain',
locale: 'es',
text: 'hola',
attachments: [],
channelData: {
clientActivityID: '5r9btokkyma'
}
}
]
In this case if in localTimestamp I remove the +01:00 and set it to +00:00 it works, i can delete the entire line and it works too. If i delete channelData it stills throws error.
@RamonDonadeu - Thank you for your patience. So, the first thing you should understand is that Web Chat uses a message type called WebChatActivity
which isn't all that different from the Activity
type used in the bot. Primarily, it is a streamlined version of the Activity
as Web Chat doesn't require all the properties that are present there. However, it does add some properties that Web Chat, specifically, needs. Originally, Web Chat relied on using the bot's Activity
. Converting back and forth to the WebChatActivity
is a relatively new feature, which brings up the next point.
The activities that are passed into the Web Chat store need to conform to the WebChatActivity
type, linked above. Using the list of activities you included in your initial post here, I can pass those into Web Chat successfully as long as I observe these three points:
1) The channelData
property is required. Additionally, it cannot be an empty object ({}
). Excluding channelData
or passing in an empty object will generate the Cannot read properties of undefined (reading 'has')
error.
2) channelData
(or, rather, Web Chat) requires the webchat:fallback-text
property to be present. It takes a string value which can be empty.
3) If there is a clientActivityID
property present in channelData
, remove this. Web Chat, thru its own mechanisms, attempts to use some part of this property's value to generate the key assigned to the underlying React element. If the value is the same across multiple activities, it will render each activity in the transcript window, but it will also generate a React error in the developer's console. And, as these activities are historical and only being fed thru, their removal should have no impact in Web Chat.
Regarding the localTimestamp
property, I don't get an error in the dev console, but including it in the activity does trigger Web Chat to report the activity's status. As you indicated, you can remove the property and just not report when the activity was sent.
Alternatively, you can keep it and adjust the logic used for the activity status by updating and passing into Web Chat the activityStatusMiddleware
middleware. This sample, 05.custom-components/g.activity-status, demonstrates how you can affect the activity status. As I haven't tested this middleware while also passing in conversation history, it's also worth mentioning that any middleware may only apply to activities processed as part of a current conversation. Activities passed in as conversation history may bypass that logic, altogether, and just get displayed.
Here is an example of an activity that would be included in the activities
array. Note localTmestamp
has been removed and the updated channelData
property.
{
type: 'message',
id: 'Gii1iZbkiIOJHMv15obBic-fr|0000000',
serviceUrl: 'https://directline.botframework.com/',
channelId: 'directline',
from: {
id: 'YOUR_USER_ID',
name: 'sergiy-test',
role: 'user'
},
conversation: {
id: 'Gii1iZbkiIOJHMv15obBic-fr'
},
textFormat: 'plain',
locale: 'es',
text: 'hola',
attachments: [],
entities: [
{
type: 'ClientCapabilities',
requiresBotState: true,
supportsListening: true,
supportsTts: true
}
],
channelData: {
"webchat:fallback-text": ""
}
}
Also, please note, there may be other properties that will need to be added, changed, or removed depending on the activities being passed in as conversation history. The changes I mentioned above are only specific to the activities
array used in your initial post.
Give these changes a go and let me know how it works for you.
Regarding the '50 messages' issue you mentioned, try the above and let me know if it had an affect one way or the other. If it resolves it, great. If not, I would ask you to open that as a new issue in this repo.
@stevkan thanks for your response.
First of all, I made it work doing only this:
await axios(
'https://directline.botframework.com/v3/directline/conversations/' +
conversationId +
'/activities?watermark=' +
watermark,
{ headers: { Authorization: 'Bearer ' + token } }
).then((response) => {
for (let i = 0; i < response.data.activities.length; i++) {
if (
!Object.keys(response.data.activities[i]).includes('channelData')
) {
response.data.activities[i].channelData = {}
}
response.data.activities[i].localTimestamp = ''
activities.push(response.data.activities[i])
}
})
Anyway, I added the updates you told me:
if (
!Object.keys(response.data.activities[i]).includes('channelData')
) {
response.data.activities[i].channelData = {
'webchat:fallback-text': ''
}
} else {
response.data.activities[i].channelData.clientActivityID = ''
}
Regarding localTimestamp
, if I remove
response.data.activities[i].localTimestamp = ''
It throws this error:
VM4804 webchat.js:2 botframework-webchat: Failed to post activity to chat adapter. Error: timed out while waiting for outgoing message to echo back
at VM4804 webchat.js:2:2877023
at p (VM4804 webchat.js:2:3319218)
at Generator._invoke (VM4804 webchat.js:2:3318971)
at Generator.next (VM4804 webchat.js:2:3319581)
at h (VM4804 webchat.js:2:2985525)
at s (VM4804 webchat.js:2:2985842)
And the webchat won't load any message.
As I said before, i managed to make it work, so you can close this issue.
Thanks!
Is it an issue related to Adaptive Cards?
No
Is this an accessibility issue?
No
What version of Web Chat are you using?
Unrelated
Which distribution are you using Web Chat from?
Unrelated
Which hosting environment does this issue primarily affect?
Web apps
Which browsers and platforms do the issue happened?
Browser: Chrome (latest)
Which area does this issue affect?
Chat history
What is the public URL for the website?
No response
Please describe the bug
I'm trying to implement the webchat into a vue project. I'm storing conversation Id in cookies and when loading the page I retrieve the Id, and call https://directline.botframework.com/v3/directline/conversations/{conversationId}/activities
to retrieve the sent messages in the past.
Then i'm setting them into
So they can be viewed by the user, but it throws an error. ( Specified in 'Do you see any errors in console log?' )
I compared the activities object with the activities stored in the store if no activities ara passed and it's missing:
on each message.
Do you see any errors in console log?
How to reproduce the issue?
1.- Create a new conversation 2.- Write some messages 3.- Get the conversationId 4.- Call 'https://directline.botframework.com/v3/directline/conversations/' + conversationId + '/activities 5.- Get activities and set them into createStore
6.- Reload the page so it creates a webchat with set activities and it throws an error ( at least for me )
What do you expect?
The recieved activities to be rendered in the webchat
What actually happened?
Activities are not displayed due an error
Do you have any screenshots or recordings to repro the issue?
No response
Adaptive Card JSON
No response
Additional context
I'll give you mi activities so you can skip 4 steps to reproduce: