WebChat Frozen on send message for webchat integrated with Omnichannel-SDK

[ilmartin]

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

Dynamics 365 Omnichannel

Which browsers and platforms do the issue happened?

Browser: Chrome (latest)

Which area does this issue affect?

Send box

Which theme pack does this issue affect?

I did not test it on other theme packs

What is the public URL for the website?

No response

Please describe the bug

I have a react web app containing a webchat widget, the webchat widget is integrated with Omnichannel SDK. The Chat loaded up correctly, displaying the pre-chat survey, I can complete the survey and submit works find. Then, the webchat received incoming welcoming message correctly. I can type message on textfield, however the screen turn frozen when I press the send button, as in nothing is clickable or reacting on the screen, seems like the app is crashed. I have also try clicking on buttons in an adaptive card from the welcome message, and it is exactly the same result.

This is package.json I used:
{ "name": "omnichannel-chat", "version": "0.1.0", "private": true, "dependencies": { "@microsoft/omnichannel-chat-sdk": "1.11.0", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/react": "16.3.0", "@testing-library/user-event": "13.5.0", "@types/jest": "27.5.2", "@types/node": "16.18.126", "@types/react-dom": "19.1.6", "adaptivecards": "^3.0.5", "axios": "0.27.2", "botframework-webchat": "4.18.0", "react": "18.3.1", "react-dom": "18.3.1", "react-feather": "2.0.10", "react-loader-spinner": "6.1.6", "react-scripts": "5.0.1", "typescript": "4.9.5", "web-vitals": "2.1.4" }, "overrides": { "axios": "0.27.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/react": "^19.1.8" } }

Do you see any errors in console log?

There are no error message logged to console related to botframework-webchat. There is a warning message from react, but it does not seems related: 

react-dom.development.js:86 Warning: zd: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    at zd (http://localhost:3000/static/js/bundle.js:148220:31)
    at Yd (http://localhost:3000/static/js/bundle.js:148699:31)
    at Qd (http://localhost:3000/static/js/bundle.js:148735:15)
    at Kn (http://localhost:3000/static/js/bundle.js:109531:15)
    at ST (http://localhost:3000/static/js/bundle.js:109535:7)
    at O_ (http://localhost:3000/static/js/bundle.js:109567:13)
    at div
    at div
    at Hr (http://localhost:3000/static/js/bundle.js:121259:18)
    at div
    at div
    at div
    at div
    at $i (http://localhost:3000/static/js/bundle.js:121778:15)
    at Kn (http://localhost:3000/static/js/bundle.js:109531:15)
    at ST (http://localhost:3000/static/js/bundle.js:109535:7)
    at O_ (http://localhost:3000/static/js/bundle.js:109567:13)
    at div
    at div
    at ir (http://localhost:3000/static/js/bundle.js:118727:13)
    at article
    at http://localhost:3000/static/js/bundle.js:118909:15
    at x1 (http://localhost:3000/static/js/bundle.js:118979:26)
    at section
    at div
    at Panel (http://localhost:3000/static/js/bundle.js:313771:23)
    at Xl (http://localhost:3000/static/js/bundle.js:119332:13)
    at div
    at http://localhost:3000/static/js/bundle.js:119074:28
    at Composer (http://localhost:3000/static/js/bundle.js:313169:29)
    at Bl (http://localhost:3000/static/js/bundle.js:118480:13)
    at bi (http://localhost:3000/static/js/bundle.js:119470:16)
    at div
    at yi (http://localhost:3000/static/js/bundle.js:119532:13)
    at _i (http://localhost:3000/static/js/bundle.js:119598:16)
    at av (http://localhost:3000/static/js/bundle.js:123233:15)
    at http://localhost:3000/static/js/bundle.js:123337:13
    at Provider (http://localhost:3000/static/js/bundle.js:272651:5)
    at __webpack_modules__../node_modules/botframework-webchat-api/dist/botframework-webchat-api.decorator.mjs.p (http://localhost:3000/static/js/bundle.js:101009:15)
    at div
    at http://localhost:3000/static/js/bundle.js:127461:13
    at Composer (http://localhost:3000/static/js/bundle.js:311058:70)
    at Do (http://localhost:3000/static/js/bundle.js:127477:13)
    at jT (http://localhost:3000/static/js/bundle.js:123165:15)
    at Provider (http://localhost:3000/static/js/bundle.js:272651:5)
    at Provider (http://localhost:3000/static/js/bundle.js:272651:5)
    at ar (http://localhost:3000/static/js/bundle.js:109352:13)
    at Rn (http://localhost:3000/static/js/bundle.js:109236:15)
    at http://localhost:3000/static/js/bundle.js:108348:15
    at p_ (http://localhost:3000/static/js/bundle.js:116156:23)
    at tA (http://localhost:3000/static/js/bundle.js:108192:15)
    at aA (http://localhost:3000/static/js/bundle.js:108283:15)
    at Provider (http://localhost:3000/static/js/bundle.js:308771:20)
    at OT (http://localhost:3000/static/js/bundle.js:116378:16)
    at o_ (http://localhost:3000/static/js/bundle.js:109403:13)
    at Kn (http://localhost:3000/static/js/bundle.js:109531:15)
    at ST (http://localhost:3000/static/js/bundle.js:109535:7)
    at M_ (http://localhost:3000/static/js/bundle.js:116414:27)
    at hc (http://localhost:3000/static/js/bundle.js:127588:23)
    at bc (http://localhost:3000/static/js/bundle.js:127668:16)
    at Cx (http://localhost:3000/static/js/bundle.js:147476:30)
    at M0 (http://localhost:3000/static/js/bundle.js:149554:29)
    at L0
    at div
    at WebChat (http://localhost:3000/static/js/bundle.js:353958:56)
    at StateProvider (http://localhost:3000/static/js/bundle.js:355737:78)
    at div
    at App

How to reproduce the issue?

1. Turn on webchat
2. Start Conversation
3. Fill and submit pre-chat survey
4. Type "..." in the send box
5. Press send

What do you expect?

Message should have sent out, and receive a respond from omnichannel

What actually happened?

Message is not send out, screen is frozen or crashed.

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

Adaptive Card JSON

Additional context

No response

[OEvgeny]

Due to heavy customization on the OmniChannel side, could you open the issue with them, or at least provide the reproduction utilizing Web Chat directly?

[ilmartin]

Thanks for replying @OEvgeny, I am not sure what do you mean by heavy customization on the OmniChannel side, I will open an issue with them. I have attached the code for the bug I am facing, if you don't mind to have a look. The .env file requires the orgId, orgUrl, widgetId from Omnichannel to run, I cannot provide them for you, I wish you have an environment you can use to replicate. Many thanks.

code.zip