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

Question

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.

score 1 · Answer 1 · answered Aug 07 '19 at 21:27

1

Just to confirm the WebChat YOUR_SECRET_HERE and DirectLine YOUR_DIRECT_LINE_SECRET should be two different values.

Before you will be able to retrieve the value for YOUR_DIRECT_LINE_SECRET you will need to connect your bot to the Direct Line channel via Azure Portal > MyBot Resource > Channels, detailed instructions on how to do this are available here.

As an aside

In the future it would be extremely helpful if you could post a detailed error message (from the console logs of Developer tools in this instance) which demonstrates the error that you are encountering, rather than just saying "it doesn't work".

There are question guidelines available here.

answered Aug 07 '19 at 21:27

Matt Stannett

2,700
1
15
36

I'm sorry, it's LUIS who doesn't work when I integrate the chatbot with js – Gaudalupe Jaime Aug 08 '19 at 15:49
Does it work when you run your bot locally? How about webchat with and iFrame? Does LUIS work in the test in webchat functionality in the Azure portal? Have you set the LUIS keys against the web app? We need more information about what you’ve tried. – Matt Stannett Aug 08 '19 at 18:51
Also see my answer [here](https://stackoverflow.com/questions/56797743/bot-works-in-bot-framework-emulator-on-local-computer-but-not-after-its-deploy/56841835#56841835) on how to debug production channels. – Matt Stannett Aug 08 '19 at 19:05
yes, the bot work locally, in the test in web chat and the iframe, and i have the keys in the web app: LuisAPIHostName, LuisAPIKey and LuisAppId – Gaudalupe Jaime Aug 08 '19 at 19:38
I would suggest looking at my comment above on how to debug production channels, it should give you some more inside on what is going on. – Matt Stannett Aug 08 '19 at 20:07

Steven Kanberg · Answer 2 · 2019-08-12T06:22:29.063

This is the current implementation for including BotFramework-WebChat in an html page, if not using an iframe. The page shouldn't block your use of LUIS as one is not dependent on the other. What is being returned to the bot from the page may be a sticking point resulting in an LUIS error if it can't read the returned data.

The code below can be found here. There are many samples to reference in the repo.

Please note, I am exchanging my direct line secret for a token by running an API service locally. You shouldn't include your direct line secret on your page as it is accessible by anyone creating a security risk.

If you continue to have LUIS errors after setting up this page, then I would return to your LUIS settings in either the cognitivemodels.json, skills.json, or .dispatch files.

Hope of help!

<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Web Chat: Custom attachment with GitHub Stargazers</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--
      For simplicity and code clarity, we are using Babel and React from unpkg.com.
    -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16.5.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.5.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <style>
    html,
    body {
      height: 100%
    }

    body {
      margin: 0
    }

    #webchat {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="webchat" role="main"></div>
  <script type="text/babel">
      (async function () {
        'use strict';

        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
        // You should never put the Direct Line secret in the browser or client app.
        // https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication

        const res = await fetch( 'http://localhost:3500/directline/token', { method: 'POST' } );
        const { token } = await res.json();
        const { ReactWebChat } = window.WebChat;

        window.ReactDOM.render(
          <ReactWebChat
            directLine={ window.WebChat.createDirectLine({ token }) }
            locale='en-US'
          />,
          document.getElementById('webchat')
        );

        document.querySelector('#webchat > *').focus();
      })().catch(err => console.error(err));
    </script>
</body>

</html>

I updated the code to reflect `locale`. My apologies as I missed that. I would **strongly** recommend you figure out why this code does not work for you. This is official implementation and, thus, best practice. Your code, reflected in your answer, may work now but you run the risk of some feature(s) breaking or being unavailable should something in the SDK or your requirements change in the future. — Steven Kanberg, Aug 12 '19 at 06:28

score 0 · Accepted Answer · answered Aug 11 '19 at 03:45

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

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

3 Answers3