CODEWITHSUNDEEP
javascriptinternet-explorerbotframeworkdirect-line-botframework
Schwammy
Schwammy

Reputation: 233

Botframework-WebChat - Why doesn't it work with Internet Explorer?

I've got the webchat working correctly in Chrome but not in IE. My app is an Angular website using WebChat to connect to my bot.

Code looks like this (technically this is TypeScript, not JavaScript, the arrow functions are transpiled out):

directLine: DirectLine = new DirectLine({ secret: environment.botDirectLineSecretKey }) 

@ViewChild("botWindow") botWindowElement: ElementRef;

ngOnInit() {

    this.directLine.activity$
      .filter(activity => activity.type === "event" && activity.name === "init")
      .subscribe(activity => this.changeSize());

    BotChat.App({
      botConnection: this.directLine,
      user: { id: 'user' },
      bot: { id: 'bot' },
    }, this.botWindowElement.nativeElement);

}

changeSize(){
    console.log("here")
    var container = document.getElementById("bot-chat-container");
    container.classList.add("fullSize");
}

In Internet Explorer, I get this error in the console:

ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

If I switch botConnection: this.directLine to directLine: this.directLine, the webchat works but then the changeSize() method never gets called.

Any help is appreciated. This bot is going on a public website and IE must be supported.

Upvotes: 2

Views: 1641

Answers (2)

Schwammy
Schwammy

Reputation: 233

I found the answer. After reading answers and comments that were posted, I created a "vanilla" html/JavaScript version of this code and it, as stated by Eric Dahlvang above, worked perfectly. I then focused on the Angular side of things for a while.

Then I noticed one difference in my original Angular code vs my plain JavaScript version and the samples found here: https://github.com/Microsoft/BotFramework-WebChat. I made a simple change:

Changed this: directLine: DirectLine = new DirectLine({ secret: environment.botDirectLineSecretKey })

to this: directLine: DirectLine = new BotChat.DirectLine({ secret: environment.botDirectLineSecretKey }) (note that I am now using BotChat.DirectLine)

and everything works. Unfortunately, I don't know why.

Upvotes: 2

Eric Dahlvang
Eric Dahlvang

Reputation: 8292

Arrow functions are not supported in IE:

https://caniuse.com/#feat=arrow-functions

https://learn.microsoft.com/en-us/scripting/javascript/functions-javascript#arrow-functions

The code you've shared should work in IE if it is modified to uses actual functions:

    this.directLine.activity$
        .filter(isInitEvent)
        .subscribe(changeSize);

...

    function isInitEvent(activity) {
        return activity.type === "event" && activity.name === "init";
    }

    function changeSize(activity) {
        console.log("here")
        var container = document.getElementById("bot");
        container.classList.add("fullSize");
    }

Upvotes: 0

Related Questions