Botframework-webchat: showing special character (’) instead of ‘ (apostrophe) character

[ac-vikram]

We are updating the latest version of botchat.js (0.11.0 ) with our some customized code. However, we are getting one issue, it is showing special character (’) instead of ‘ (apostrophe) character. It was working fine with previous botchat.js. We want to use Adaptive card functionality that is why we need latest version of botchat.js Please suggest how can we handle this issue?

[danmarshall]

Hello, can you please provide a sample message that exhibits this behavior?

[ac-vikram]

Actual - Here it is… Floating holiday for New Year’s Day on Sunday, 1-Jan-2017
Expected- Here it is... Floating holiday for New Year's Day on Sunday, 1-Jan-2017

[danmarshall]

ok, can you provide the actual code or JSON with this string?

[ac-vikram]

We are using inline webchat like - https://github.com/Microsoft/BotFramework-WebChat#easy-in-your-non-react-website-run-webchat-inline done here. There is no other change. Just we are updating the botchat.js from https://unpkg.com/[email protected]/botchat.js. It was working fine with previous botchat.js.

[danmarshall]

Well, the "actual" that you provided also has that same issue:

So I don't have a way to get the real message that is causing the issue.

[ac-vikram]

Actual means, currently it's showing like this - (Here it is… Floating holiday for New Year’s Day on Sunday, 1-Jan-2017) with new botchat.js. Expected means, earlier it was showing like this - ( Here it is... Floating holiday for New Year's Day on Sunday, 1-Jan-2017) with previous botchat.js and we want it now with new botchat.js.

[danmarshall]

Hello @ac-vikram - I am not able to reproduce the error:

So let's get more technical :-) please provide a code sample. Also, can you tell me if you are using the iframe WebChat from Bot Framework, or hosting your own web page with the WebChat.

If you are hosting your own page, make sure to set the charset=UTF-8 in the bot server and in the bot client:
For the webserver (i.e. IIS, Azure, etc) set the Content-Type: text/html; charset=UTF-8
For the client (index.html) set meta charset="UTF-8" tag inside the head tag.

[jalkanen]

I can reproduce this reliably for things like three dots in a row (...), on Safari and Chrome on OSX, and probably for a number of other character combinations as well.

However, for me setting <meta charset="UTF-8"> on the client index.html fixes the issue.

[danmarshall]

Similar issue: #553 also solved with the UTF-8 meta tag. Closing this for now, as this seems to be the solution.

[billba]

Looks like our samples all set UTF-8 so I'm comfortable leaving it at that.

[harigovind2102]

Hey me and my team are facing the same issue and i can assure you that we have added the right meta tags in all the right server side and client side pages. we recently updated BotChat.js to render adaptive cards, and ever since this update we are unable to render UTF-8. Is there any section inside the BotChat.js where i can force render it to a particular format?

[ac-vikram]

@harigovind2102 - We were able to resolve this issue by downloading botchat.js file from IE browser. When we use chrome browser to download botchat.js file it includes junk characters automatically. I hope it will solve your problem as well.

[danmarshall]

@compulim is the CDN version stripping UTF8 encoding?

[danmarshall]

@harigovind2102 - can you please specify the URL where your botchat.js is being served? Is this from your own server, or from a CDN?

[mjarmstrong]

@danmarshall - your CDN is stripping the UTF8 encoding. https://cdn.botframework.com/botframework-webchat/latest/botchat.js Search for aacute and you'll see all the characters are incorrect.

[corinagum]

Please track on #1071

[sivanandh]

I also faced this issue, then I created the message with below formats in MS bot Code(app.js).

var customMessage = new builder.Message(session)
        .text("I didn't quite get that. For us ......")
        .textFormat("plain")
        .textLocale("en-us");
    session.send(customMessage);

Refer Official URL for V3: https://docs.microsoft.com/en-us/azure/bot-service/nodejs/bot-builder-nodejs-message-create?view=azure-bot-service-3.0

[SwedhaBalasubramanian]

I am also facing the same issue. I am taking the botchat.js from this link https://webchat.botframework.com/scripts/webchat-stable/botchat.js and using beautifier.io changing to appropriate js file. I am getting special (’) instead of ' (apostrophe) character.

[isathish]

i am also facing this issue :

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

[Pratiktarade]

facing same issue

[NorbertHuethmayr]

I faced the same issue but found a solution.
In my case, I was emitting the from the

metaInfo() {
return {
htmlAttrs: {
lang: this.$i18n.locale
},
meta: [
{
name: "charset",
content: "UTF-8"
}]
}}

section of my Vue component.

I had to add the meta info to the template.html file and everything started working nicely.