Response from web chat is not visible in the chat history

[MaheshSripada]

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?

PowerApps

Which browsers and platforms do the issue happened?

Others or unrelated

Which area does this issue affect?

Chat history

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

Hi Team,

I have created a Power Apps Component (PCF) using the WebChat.renderWebChat. Facing an issue like the div webchat_bubble_content is empty and the response from the Bot is not visible / hidden. Can you please look into this and suggest us. This is blocking our development.

I noticed some errors in the browser console from the botframework js

Thanks in Advance, Mahesh Sripada

Do you see any errors in console log?

1. botframework-webchat: render of activity status botframework-webchat-api.mjs:164 TypeError: Illegal invocation at mo (botframework-webchat-component.mjs:47:34076) at eval (botframework-webchat-component.mjs:52:51185) at mountMemo (react-dom.development.js:2792:669) at Object.useMemo (react-dom.development.js:2850:3120) at useMemo (react.development.js:1459:25) at eval (botframework-webchat-component.mjs:52:51180) at renderWithHooks (react-dom.development.js:2656:157) at updateFunctionComponent (react-dom.development.js:3228:388) at updateSimpleMemoComponent (react-dom.development.js:3205:33) at updateMemoComponent (react-dom.development.js:3153:134) at beginWork (react-dom.development.js:3638:117) at beginWork$1 (react-dom.development.js:4692:93) at performUnitOfWork (react-dom.development.js:4518:270) at workLoopSync (react-dom.development.js:4504:30) at renderRootSync (react-dom.development.js:4500:159) at performSyncWorkOnRoot (react-dom.development.js:4434:63)

2. botframework-webchat: render of attachment botframework-webchat-api.mjs:164 TypeError: Illegal invocation at mo (botframework-webchat-component.mjs:47:34076) at eval (botframework-webchat-component.mjs:49:804) at mountMemo (react-dom.development.js:2792:669) at Object.useMemo (react-dom.development.js:2850:3120) at useMemo (react.development.js:1459:25) at eval (botframework-webchat-component.mjs:49:799) at renderWithHooks (react-dom.development.js:2656:157) at updateFunctionComponent (react-dom.development.js:3228:388) at updateSimpleMemoComponent (react-dom.development.js:3205:33) at updateMemoComponent (react-dom.development.js:3153:134) at beginWork (react-dom.development.js:3638:117) at beginWork$1 (react-dom.development.js:4692:93) at performUnitOfWork (react-dom.development.js:4518:270) at workLoopSync (react-dom.development.js:4504:30) at renderRootSync (react-dom.development.js:4500:159) at performSyncWorkOnRoot (react-dom.development.js:4434:63)

How to reproduce the issue?

Hi Team,

I have created a Power Apps Component (PCF) using the WebChat.renderWebChat. Facing an issue like the div webchat_bubble_content is empty and the response from the Bot is not visible / hidden. Can you please look into this and suggest us. This is blocking our development.

I noticed some errors in the browser console from the botframework js

What do you expect?

Responses from the bot should be visible.

What actually happened?

Responses from the bot are not visible as shown in the screenshots.

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

Adaptive Card JSON

No response

Additional context

No response

[stevkan]

@MaheshSripada - Thank you for your patience. Are you still experiencing an issue with this?

If so, I will need more information before I can provide any sort of help. Are you able to download/export a copy of your code or Power App Component that you could zip and post here for me to test against? Or, if not, can you list exact steps on how you created your component so that I may try and replicate it?

If there is a doc or instructions you were following, please include that, as well.

[patilravikiran]

Hi @stevkan, Yes, we are still experiencing this issue mainly in Model-Driven App. Please check below copy of code.

ChatBot.zip

[stevkan]

@patilravikiran - Unfortunately, I am not able to reproduce the issue you are experiencing. I have populated UserQuery with 'Hi', TokenEndpoint with the Mobile app channel token endpoint, and StyleOptions with {} (passing in no options). The chat session renders correctly, and I am able to interact with the Copilot agent as expected.

For clarity, I am running this locally on my machine as I was not able to find a way to import the project into Power Apps online. I also made no changes to the code other than running npm i.

Can you tell me what the content is of those two responses that aren't generating? For instance, are they simple text messages, adaptive cards, or something else?

With respect to the above, if you are comfortable exporting your Copilot/chat bot (removing any secrets/keys), I can try importing it into my environment and then run the client using that bot instead of my own. If yes, you can zip and attach that here, as well.

[patilravikiran]

This is only happening within model-driven application (see image for reference). Only simple messages are not getting rendered. Please import attached PCF control within Model driven application (anywhere in the application) with sample token endpoint and user query.

This issue is not related to Copilot/chat bot. It's happening for every chat bot.

This is how it looks like in Model-driven application.

This is how it looks like in Power Apps studio or on local machine.

Managed Solution for PCF Control: ChatBotSolution.zip

We have observed below errors in browser console.

[OEvgeny]

Works locally for me after mocking directline. I added fluent theme pack as well to check if it works.

[patilravikiran]

I am able to resolve this issue by using plain text messages as per below, but I am still getting below errors in the browser console.

Code:

React.useEffect(() => {
    if (directLine && userQuery) {
      directLine
        .postActivity({
          type: "message",
          text: userQuery,
          textFormat: "plain",
        })
        .subscribe({
          error: (err: any) => {
            setError(`Failed to send message: ${err.message}`);
          },
        });

      // Listen for incoming messages and convert them to plain text
      directLine.activity$.subscribe((activity: any) => {
        if (activity.type === "message" && activity.textFormat === "markdown") {
          activity.text = activity.text.replace(/[*_~`#>[\]()!-]/g, ""); // Remove Markdown syntax
          activity.textFormat = "plain"; // Update the text format
        }
      });
    }
  }, [directLine, userQuery]);

  return (
    <div className="webChatContainer">
      {error ? (
        <MessageBar intent="error">
          <MessageBarBody>{error}</MessageBarBody>
        </MessageBar>
      ) : directLine ? (
        <ReactWebChat
          directLine={directLine}
        />
      ) : (
        <Spinner label="Loading..." className="loadingSpinner" />
      )}
    </div>
  );

Error Messages:

[OEvgeny]

We do some things using Worker/postMessage. But our postMessage calls are wrapped in try {...} catch {}:

      let worker;

      try {
        worker = await createWorker('function(){postMessage("ready")}');
      } catch (err) {
        return false;
      }

      worker.terminate();

1. Power Apps might block Web Workers entirely
2. The CSP (Content Security Policy) in Power Apps may restrict Worker creation