Search code examples
javascriptbotframeworkazure-language-understandingweb-chat

LUIS does not work when I integrate bot framework v4 with js in any browser

I created a chatbot in C# .net Core SDK v4 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 diretcline

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:

        // Configure adapters
        // DefaultAdapter is for all regular channels that use Http transport
        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.

Solution

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

    I changed the code to this:

    <html>
<body>
<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 ({
file: ''
}),
locale: 'en-US',
},
document.getElementById ('webchat')
);
</script>
</body>
</html>

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

    Thank you very much everyone, how kind