Integration of Webchat Js with VueJS code

[nareshkyady]

Is it an issue related to Adaptive Cards?

Yes, this is an Adaptive Card issue, however it only repro on Web Chat.

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

Bundle (webchat.js)

Which hosting environment does this issue primarily affect?

PowerApps

Which browsers and platforms do the issue happened?

Browser: Firefox (latest)

Which area does this issue affect?

Chat history

What is the public URL for the website?

No response

Please describe the bug

Hi Team

I wanted to integrate webchat js in vuejs application but once the below code is run.

window.WebChat.renderWebChat({ directLine: directLine, store, userID: userID, styleOptions }, document.getElementById('webchat') ); It throws this error.

Invariant Violation: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Please let me know if we can integrate webchat js with vuejs application? if yes, please provide solutions same as react js integration

Thank you!

Do you see any errors in console log?

No response

How to reproduce the issue?

1. Navigate to ...
2. Click on ...
3. Type "..." in the send box

What do you expect?

Successful integration of webchat in vuejs application

What actually happened?

vuejs has no npm libraries to integrate the webchat js.

Do you have any screenshots or recordings to repro the issue?

No response

Adaptive Card JSON

No response

Additional context

No response

[stevkan]

@nkydrwr - Is this still an issue for you? If so, can you please provide your code, preferably as an attachment? I can then take a look at your implementation and determine if there is a possible solution for you.

[stevkan]

Closing due to inactivity.

[RamonDonadeu]

This is closed by I managed to integrate WebChat into Vue3, I've seen some solutions on using it with vuera, but it is outdated, there is no need on using react implementation of WebChat

I've created a component, with

<template>
    <div id="webchat" role="main" class="webchat"></div>
</template>

And on Script mainly to run the webchat:

onMounted(() => {
  const webChatScript = document.createElement('script')
  webChatScript.setAttribute(
    'src',
    'https://cdn.botframework.com/botframework-webchat/latest/webchat.js'
  )
  document.head.appendChild(webChatScript)
  const userInitials =
    userStore.user.user.name[0] + userStore.user.user.lastName[0]
  //   Set style options.
  const styleOptions = {
    botAvatarInitials: 'K',
    userAvatarInitials: userInitials.toUpperCase()
  }
  webChatScript.onload = () => {
    const d1 = window.WebChat.createDirectLine({
      token: 'YOUR_TOKEN'
    })
    const store = window.WebChat.createStore(
      {},
      ({ dispatch }) =>
        (next) =>
          (action) => {
            if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
              dispatch({
                type: 'WEB_CHAT/SEND_EVENT',
                payload: {
                  name: 'webchat/join'
                }
              })
              console.log(action)
            }

            return next(action)
          }
    )
    window.WebChat.renderWebChat(
      {
        directLine: Object.assign({}, d1, {
          postActivity: (activity) => {
            const newActivity = Object.assign({}, activity)

            newActivity.channelData.token = userStore.user.AccessToken
            return d1.postActivity(newActivity)
          }
        }),
        store,
        // userID: localStorage.getItem("user").accessToken,
        userID: 'YOUR_USER_ID',
        username: 'Name-test',
        locale: userStore.user.user.languageId,
        styleOptions
      },
      document.getElementById('webchat')
    )
  }
})```