Missing channelData on (GET .../activities) results, and Setting it to createStore({activities},...) Throws error

[RamonDonadeu]

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

const store = window.WebChat.createStore(
        {
          activities
        },...

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:

channelData: {
  'webchat:sequence-id': 1701695998289
}

on each message.

Do you see any errors in console log?

webchat.js:2 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)
da @ webchat.js:2
Aa.i.componentDidCatch.r.callback @ webchat.js:2
ia @ webchat.js:2
oa @ webchat.js:2
Ya @ webchat.js:2
Wa @ webchat.js:2
(anonymous) @ webchat.js:2
t.unstable_runWithPriority @ webchat.js:2
Ds @ webchat.js:2
ks @ webchat.js:2
xs @ webchat.js:2
Is @ webchat.js:2
ts @ webchat.js:2
Us @ webchat.js:2
Vs @ webchat.js:2
Gs.render @ webchat.js:2
(anonymous) @ webchat.js:2
Bs @ webchat.js:2
qs @ webchat.js:2
render @ webchat.js:2
t.default @ webchat.js:2
webChatScript.onload @ WebChat.vue:224
load (async)
(anonymous) @ WebChat.vue:75
(anonymous) @ runtime-core.esm-bundler.js:2675
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2655
flushPostFlushCbs @ runtime-core.esm-bundler.js:325
flushJobs @ runtime-core.esm-bundler.js:363
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:270
queueJob @ runtime-core.esm-bundler.js:264
reload @ runtime-core.esm-bundler.js:464
(anonymous) @ runtime-core.esm-bundler.js:494
(anonymous) @ WebChat.vue?t=1701698707137:311
(anonymous) @ client.ts:435
(anonymous) @ client.ts:351
(anonymous) @ client.ts:206
queueUpdate @ client.ts:206
await in queueUpdate (async)
(anonymous) @ client.ts:74
handleMessage @ client.ts:72
(anonymous) @ client.ts:45

botframework-webchat: Uncaught exception {error: TypeError: Cannot read properties of undefined (reading 'has')
    at https://cdn.botframework.com/…}

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

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

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:

const activities = [
        {
          type: 'message',
          id: 'Gii1iZbkiIOJHMv15obBic-fr|0000000',
          timestamp: '2023-12-04T14:01:54.2827331Z',
          localTimestamp: '2023-12-04T15:01:54.126+01:00',
          localTimezone: 'Europe/Madrid',
          serviceUrl: 'https://directline.botframework.com/',
          channelId: 'webchat',
          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: {
            clientActivityID: 'k0tz585kfil',
            
          }
        },
        {
          type: 'message',
          id: 'Gii1iZbkiIOJHMv15obBic-fr|0000001',
          timestamp: '2023-12-04T14:01:54.9070388Z',
          localTimestamp: '2023-12-04T15:01:54.812+01:00',
          localTimezone: 'Europe/Madrid',
          serviceUrl: 'https://directline.botframework.com/',
          channelId: 'webchat',
          from: {
            id: 'YOUR_USER_ID',
            name: 'sergiy-test',
            role: 'user'
          },
          conversation: {
            id: 'Gii1iZbkiIOJHMv15obBic-fr'
          },
          textFormat: 'plain',
          locale: 'es',
          text: 'hola',
          attachments: [],
          channelData: {
            clientActivityID: 'csv02ro4e25',
           
          }
        },
        {
          type: 'message',
          id: 'Gii1iZbkiIOJHMv15obBic-fr|0000002',
          timestamp: '2023-12-04T14:01:55.2415979Z',
          channelId: 'webchat',
          from: {
            id: 'test-ramon-bot',
            name: 'test-ramon-bot'
          },
          conversation: {
            id: 'Gii1iZbkiIOJHMv15obBic-fr'
          },
          locale: 'es',
          text: 'alguna respuesta de texto',
          inputHint: 'acceptingInput',
          attachments: [],
          entities: [],
          replyToId: 'Gii1iZbkiIOJHMv15obBic-fr|0000000'
        },
        {
          type: 'message',
          id: 'Gii1iZbkiIOJHMv15obBic-fr|0000003',
          timestamp: '2023-12-04T14:01:56.017105Z',
          channelId: 'webchat',
          from: {
            id: 'test-ramon-bot',
            name: 'test-ramon-bot'
          },
          conversation: {
            id: 'Gii1iZbkiIOJHMv15obBic-fr'
          },
          locale: 'es',
          text: 'alguna respuesta de texto',
          inputHint: 'acceptingInput',
          attachments: [],
          entities: [],
          replyToId: 'Gii1iZbkiIOJHMv15obBic-fr|0000001'
        }
      ]

[RamonDonadeu]

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

[RamonDonadeu]

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.

[stevkan]

@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.

[RamonDonadeu]

@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!