Botframework-webchat: LUIS does not work when I integrate bot with webchat.js in any browser

[guadalupejaime]

Hello, I created a chatbot in C# with my virtual assistant template and the web chat works fine with the iframe

<iframe src='https://webchat.botframework.com/embed/NAME_OF_BOT?s=YOUR_SECRET_HERE'  style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>

but LUIS doesn't work when I integrate it with js in any browser

<div id="webchat" role="main"></div>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <script>
     window.WebChat.renderWebChat(
        {
           directLine: window.WebChat.createDirectLine({
              secret: 'YOUR_DIRECT_LINE_SECRET'
           }),
        },
        document.getElementById('webchat')
     );
</script>

What can I do for this to work? I already tried to make it work by adding the secrets of webchat and directline.

This is the location of the error it send me:

public class DefaultAdapter : BotFrameworkHttpAdapter`
   {
        public DefaultAdapter(
            BotSettings settings,
            ICredentialProvider credentialProvider,
            IBotTelemetryClient telemetryClient,
            BotStateSet botStateSet)
            : base(credentialProvider)
        {
            OnTurnError = async (turnContext, exception) =>
            {
                await turnContext.SendActivityAsync(new Activity(type: ActivityTypes.Trace, text: $"{exception.Message}"));
                await turnContext.SendActivityAsync(new Activity(type: ActivityTypes.Trace, text: $"{exception.StackTrace}"));
                await turnContext.SendActivityAsync(MainStrings.ERROR);
                telemetryClient.TrackException(exception);
            };`

            Use(new TranscriptLoggerMiddleware(new AzureBlobTranscriptStore(settings.BlobStorage.ConnectionString, settings.BlobStorage.Container)));
            Use(new TelemetryLoggerMiddleware(telemetryClient, logPersonalInformation: true));
            Use(new ShowTypingMiddleware());
            Use(new SetLocaleMiddleware(settings.DefaultLocale ?? "en-us"));
            Use(new EventDebuggerMiddleware());
            Use(new AutoSaveStateMiddleware(botStateSet));
        }
    }

which is in the startup.cs file:

services.AddSingleton<IBotFrameworkHttpAdapter, DefaultAdapter>();

the bot responds to me well when it enters the user data request flow (which does not need LUIS nor QnA) But it sends me the error when I send a message that needs to use LUIS and QnA

(Edited by @compulim for code formatting)

[lauren-mills]

I'm going to transfer this over to the webchat repo because it doesn't seem VA specific.

[tdurnford]

@guadalupejaime Does your bot work in the Test in Web Chat blade in the Azure portal? I don’t think Web Chat would affect your LUIS configuration at all.

[guadalupejaime]

@tdurnford yes, the bot work in Test in Web Chat

[compulim]

What happened when it is not working? Do you see something strange/red in the developer tool console?

FYI, "Test in Web Chat" blade should be using Web Chat 4.3.0.

[tdurnford]

This also looks like a duplicate of this Stack Overflow question. @guadalupejaime can you try @stevkan's recommendations and let us know if his answer resolves your issue?

[guadalupejaime]

Stevkan's suggestion didn't work for me.
This is the location of the error it send me:

public class DefaultAdapter : BotFrameworkHttpAdapter
   {
        public DefaultAdapter(
            BotSettings settings,
            ICredentialProvider credentialProvider,
            IBotTelemetryClient telemetryClient,
            BotStateSet botStateSet)
            : base(credentialProvider)
        {
            OnTurnError = async (turnContext, exception) =>
            {
                await turnContext.SendActivityAsync(new Activity(type: ActivityTypes.Trace, text: $"{exception.Message}"));
                await turnContext.SendActivityAsync(new Activity(type: ActivityTypes.Trace, text: $"{exception.StackTrace}"));
                await turnContext.SendActivityAsync(MainStrings.ERROR);
                telemetryClient.TrackException(exception);
            };

            Use(new TranscriptLoggerMiddleware(new AzureBlobTranscriptStore(settings.BlobStorage.ConnectionString, settings.BlobStorage.Container)));
            Use(new TelemetryLoggerMiddleware(telemetryClient, logPersonalInformation: true));
            Use(new ShowTypingMiddleware());
            Use(new SetLocaleMiddleware(settings.DefaultLocale ?? "en-us"));
            Use(new EventDebuggerMiddleware());
            Use(new AutoSaveStateMiddleware(botStateSet));
        }
    }

which is in the startup.cs file:

services.AddSingleton<IBotFrameworkHttpAdapter, DefaultAdapter>();

the bot responds to me well when it enters the user data request flow (which does not need LUIS nor QnA) But it sends me the error when I send a message that needs to use LUIS and QnA

(Edited by @compulim for code formatting)

[compulim]

@guadalupejaime

Could you send us the error message? Do you get the error in C#, or in a browser?

[guadalupejaime]

@compulim in all browsers

[guadalupejaime]

locally and in the test in webchat it work fine

[guadalupejaime]

and I created another chatbot with the virtual assistant template from scratch and it doesn't work with webchat.js

[compulim]

Can you send us the error to look at?

Also, I am quite confused with your last 3 messages.

You said you received the error "in all browsers". And Web Chat "works locally and in the test in webchat". And you created another VA bot and "it doesn't work with Web Chat". Is that correct?

[guadalupejaime]

it not work when I integrate bot with webchat.js, only in js

[guadalupejaime]

I don't know how to debug it from the browser but the error code that it sends is the one I put above

[compulim]

I didn't see any error or error code above.

[guadalupejaime]

the bot works in https://webchat.botframework.com/embed/NAME_OF_BOT?s=YOUR_SECRET_HERE but not with
<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script> window.WebChat.renderWebChat( { directLine: window.WebChat.createDirectLine({ secret: 'YOUR_DIRECT_LINE_SECRET' }), }, document.getElementById('webchat') ); </script>

[guadalupejaime]

every time I try to send a message the bot enters the following code:

public class DefaultAdapter : BotFrameworkHttpAdapter
   {
        public DefaultAdapter(
            BotSettings settings,
            ICredentialProvider credentialProvider,
            IBotTelemetryClient telemetryClient,
            BotStateSet botStateSet)
            : base(credentialProvider)
        {
            OnTurnError = async (turnContext, exception) =>
            {
                await turnContext.SendActivityAsync(new Activity(type: ActivityTypes.Trace, text: $"{exception.Message}"));
                await turnContext.SendActivityAsync(new Activity(type: ActivityTypes.Trace, text: $"{exception.StackTrace}"));
                await turnContext.SendActivityAsync(MainStrings.ERROR);
                telemetryClient.TrackException(exception);
            };

            Use(new TranscriptLoggerMiddleware(new AzureBlobTranscriptStore(settings.BlobStorage.ConnectionString, settings.BlobStorage.Container)));
            Use(new TelemetryLoggerMiddleware(telemetryClient, logPersonalInformation: true));
            Use(new ShowTypingMiddleware());
            Use(new SetLocaleMiddleware(settings.DefaultLocale ?? "en-us"));
            Use(new EventDebuggerMiddleware());
            Use(new AutoSaveStateMiddleware(botStateSet));
        }
    }

which is in the startup.cs file:

services.AddSingleton<IBotFrameworkHttpAdapter, DefaultAdapter>();

[compulim]

What is the error? How do you know it failed? Did it say anything?

[guadalupejaime]

await turnContext.SendActivityAsync (MainStrings.ERROR); I know that the bot is entering this line because I changed the "ERROR" message to another one that I edited

[compulim]

Now I understand.

Could you send us the content of the exception object you got in OnTurnError? I.e. the exception object on this line.

OnTurnError = async (turnContext, exception) =>

[guadalupejaime]

Appication Insights send me this Error: The given key 'es' was not present in the dictionary.

[compulim]

Do you have the full exception object? The stack trace inside the exception object would be helpful to find out which line asking for the key "es".

[guadalupejaime]

Could it be the language? when I use the bot at webchat.botframework.com/embed / ... I receive the message "" write your message ... and when I integrate it with js it appears in Spanish "Escribe tu mensaje..."
How can i change it to english?

[guadalupejaime]

Could it be "Es" of "Español"?

[guadalupejaime]

I changed the code to this:
```

```
to change the language and the bot already work well in webchat.js

Thank you very much everyone, how kind

[compulim]

If you found out the offending code (finding key "es") is actually on Web Chat, Bot Builder SDK or VA. Please feel free to reopen this bug and point us to it. Happy to fix. 😉