Chatbot Textbox missing with /latest/webchat.js (working with 4.14.1/webchat.js)

[rbertazzo]

Screenshots

With latest

With 4.14.1

Version

The issue is with latest. We have downgraded to 4.14.1 and is working as expected
"<meta name="botframework-directlinespeech:version" content="4.14.1">
<meta name="botframework-webchat:bundle:variant" content="full">
<meta name="botframework-webchat:bundle:version" content="4.14.1">
<meta name="botframework-webchat:core:version" content="4.14.1">
<meta name="botframework-webchat:ui:version" content="4.14.1">"

Describe the bug

Text box to send message is missing with the latest release
We are now using the previous version: here the change:
this row is commented out --> <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
We are using this instead:
<script src="https://cdn.botframework.com/botframework-webchat/4.14.1/webchat.js"></script>

Other code:

var styleOptions = {
hideUploadButton: true
};

        window.WebChat.renderWebChat({
            directLine: botConnection,
            userID: name,
            styleOptions: styleOptions,}, document.getElementById('webchat'));

        document.querySelector('#webchat > *').focus();

[stevkan]

@rbertazzo, unfortunately, I am unable to repro the issue using 4.15.1. Do you have webchat embedded somewhere or do you have custom images or components loaded? The image you posted doesn't look typical.

If there are additional changes you have applied, could you share those changes. Or, could you attach your Web Chat code as a file that I may repro with?

[rbertazzo]

Hi @stevkan
first of all I missed in my description an error in console which appears only with the not working version: Ruleset ignored due to bad selector. botchat.css:538:28

The chatbot is embedded in a cshtml page with backend calls, shared layout...
Source code was developed by another person so unfortunately I don't know all the reasons about the stuff
This the head and body part of cshtml (I've removed some not related parts: it's the working version with latest commented out as you can see):
head

<title>Customer</title>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated%7Calways&callback=launchBot"></script>
@*<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>*@
<script src="https://cdn.botframework.com/botframework-webchat/4.14.1/webchat.js"></script>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat-es5.js"></script>
<script type="text/javascript" src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
<meta name="react-film" content="version=1.2.1-master.db29968">
<meta name="botframework-webchat:bundle:variant" content="full-es5">
<meta name="botframework-webchat:bundle:version" content="4.3.1-master.98c662f">
<meta name="botframework-webchat:core:version" content="4.3.1-master.98c662f">
<meta name="botframework-webchat:ui:version" content="4.3.1-master.98c662f">

<script type="text/javascript">
    var reengageSent = false;
    var botConnection;
    var dati;
    var tokenUrl = "@Configuration.GetSection("WebUrls")["WebApiUrl"]" + "getToken";
    var username;
    var name;
    var email;
    var token;

	@{

		var AccessToken = await HttpContext.GetTokenAsync("id_token");


	}

	if ("@User.Identity.IsAuthenticated" == "True") {

		username = "";
		name = "@User.Claims.Where(c => c.Type == "name").FirstOrDefault().Value.ToString()";
		email = "@User.Claims.Where(e => e.Type == "preferred_username").FirstOrDefault().Value.ToString()";
		token = "@AccessToken.ToString()";

	}
</script>
<script src="~/js/site.js"></script>

end head

body

<div>
    <div id="webchatMobileBg"></div>
    <div id="webchat" role="main" class="webchat-show"></div>
    <button id="webchat_icon"><img id="avatar" src="~/images/bot_icon_big.png"></button>
</div>

end body

The render Webchat part (in my previous message) is in the site.js

css attached
site.zip
Let me know if this can help. Thanks

[stevkan]

@rbertazzo, I'm still unable to repro your issue. I have tried recreating your project based on the bits you provided above, but I'm not 100% it is exactly like yours. If you are able to provide the whole project (as it relates to embedding web chat) in an attached .zip file, that would be great.

One thing I would like to address and may be the cause is your list of CDN script files and meta tags. The botchat.css link and botchat-es5.js script are the files used for rendering our older v3 "Bot Chat" library. The v4 "Web Chat" library is the replacement for Bot Chat. However, you are loading both which could be the source of your issue as they may be conflicting.

Additionally, Web Chat has styling baked into it whereas Bot Chat utilizes a separate CSS file. The styling of both may be colliding. That being said, Web Chat uses custom naming that is auto-generated. The class names, as well as the architecture, are subject to change. Relying on them could cause a breaking change in your Web Chat instance (though, necessity sometimes requires it). Just be aware to the possibility.

Lastly, there are four "botframework-webchat" <meta> tags defined. Three reference a specific version and build. Presumably, the "full-es5" one does, as well. When the Web Chat library is loaded, it automatically includes the associated meta tags. This shouldn't have any affect on the performance of the page as they are largely informational. But, I wanted to point that out. Here is what my generated html looks like when I import the 'latest' Web Chat library.

My recommendation would be to remove the CDN references to the JS and CSS Bot Chat files and the meta tags discussed above. Then try, again.

One other question, do you have any other 'styleOptions' defined other than hideUploadButton?

[rbertazzo]

Thanks @stevkan
no changes so far. As I've said not my code and I'm not a frontend developer but I don't see any other styleOptions. Here the project with some modifications to remove keys and auth.
WebAppBot.zip

[stevkan]

@rbertazzo, thank you for your patience. Unfortunately, I am unable to run the project your uploaded as I am hitting a CORS issue. However, looking at the code in site.js, on line 90, I see:

botConnection = window.WebChat.createDirectLine({ //doesn't work with latest after removing botchat.js

Just verifying that window.WebChat.createDirectLine() is not working with botchat.js removed, correct? If so, can you verify that the WebChat library exists in the window object at that point? Is it possible that the window object isn't getting loaded properly because the site.js script is being imported into the index.cshtml file? Could you try placing the site.js script directly into index.cshtml to see if that makes any difference?

Also, can you tell me how the createDirectLine() method is not working (and include any generated errors)? Is it just not present or is something else going on? Can you verify that a token is being returned from the fetch?

[rbertazzo]

@stevkan For the CORS issue can you please change your local configuration to use the port in the attachment? Or you can give me yours.
I've tried your suggestion putting js script code inside index.cshtml: I still have the issue but now window.WebChat.createDirectLine doesn't give me errors and I think you're correct: it was not loaded properly

I see undefined for window.Webchat but as I said I see no errors in console and the botConnection object seems fine and token too. See attachment please. The second screenshot is how I see popup with 4.14.1/webchat.js. Could it be something related to css?

[stevkan]

@rbertazzo, I was able to get your project up and running and, yes, I believe this is a CSS issue unrelated to WebChat.

In the following three images you can see that the Web Chat's border has been disabled and the padding is enabled. However, as you demonstrated in a previous image, the sendbox is still present. In the second image, I enabled the border which reveals the wide application of padding to the element. With the border enabled, you can see that it overlaps the Web Chat control button on the page. And, in the third image, if I disable the padding the Web Chat component covers the button.

I believe the previous developer was trying to not have the Web Chat component cover the button by extending the padding and disabling the border. Since the Web Chat component and the page background are both white, it gives the impression the sendbox has somehow been affected.

You can fix this by simply moving the position of the Web Chat component. Then, it won't overlap the button, you can enable to the border, and reduce the padding.

The CSS affecting this is located in your site.css file, line 119.

As this should solve your issue (and because this doesn't appear to be an actual Web Chat bug), I am going to close this.

[rbertazzo]

Sorry @stevkan
I miss something here. You're showing me screenshots about the working webchat with 4.14 and overlapping of the activation button (I understand but not my issue here).
My problem is if I use latest: send box is not present in that case. This is how webchat looks like with latest and the border activated (no send box at all):

Maybe is related to css but it depends on some changes in the latest version of the library and I cannot find where is the problem. I put the second screenshot in my previous post only to show you the difference between latest (first screenshot) and 4.1.4 (second screenshot)

[rbertazzo]

Hi @stevkan I've finally found the problem and resolved the issue.

With this configuration in index.cshtml (line 22 that I think was commented out in your code when you tried)

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

I have to change one single line in site.jss
line 263: var targetNodes = document.querySelectorAll("#webchat ul");
changes to
var targetNodes = document.querySelectorAll("#webchat");

Now it works
Thanks for your help