Need a way to stop webchat.

[prashanthsridhar]

Feature Request

Is your feature request related to a problem? Please describe.

webchat.renderwebchat is being called multiple times. The result is that when the bot talks back,we can hear multiple voices. This is because there are multiple instances running at the same time.

Describe the suggestion or request in detail
Need a webchat.disconnect() which de-allocates all resources held and stops the speech recognition/synthesis.

Additional context
Using webchat.js 4.7.0
Using it in angular

[stevkan]

Can you please provide the code for your Angular html page? Be sure to hide any sensitive data before doing so.

[prashanthsridhar]

The code is spread across multiple files. The gist of it is: there is a bot icon,when clicked a bot component is activated and onInit of that component.
RenderWebchat is inside onInit of that component.

window.WebChat.renderWebChat(
            {
                directLine: this.commonService.directLine,
                userID: sessionStorage.getItem('email'),
                username: sessionStorage.getItem('username'),
                locale: 'en-GB',
                //styleSet,
                styleOptions: this.commonService.styleOptions,
                groupTimestamp,
                selectVoice: () => ({ voiceURI: 'sample }),
                webSpeechPonyfillFactory: options => {
                    var { SpeechGrammarList, SpeechRecognition } = speechToTextPonyfillFactory(options);
                    var { speechSynthesis, SpeechSynthesisUtterance } = textToSpeechPonyfillFactory(options);
                    return {
                        SpeechGrammarList,
                        SpeechRecognition,
                        speechSynthesis,
                        SpeechSynthesisUtterance
                    };
                }

            },
            this.botWindowElement.nativeElement
        );

when close bot icon is clicked,i need a way to disconnect from bot.

[Virtual-Josh]

@stevkan can you provide an update on this ticket? Thanks.

[stevkan]

Hi @prashanthsridhar,

First, you will want to fix a single closing quote that is missing in the following line: selectVoice: () => ({ voiceURI: 'sample }).

Regarding the various parameters / variables (speechToTextPonyfillFactory, SpeechGrammarList, etc.) you include in webSpeechPonyfillFactory, are you able to post the definitions you are using for these? In order to repro the issue, I'd like to model my Web Chat setup as closely to your as is possible.

Also, would you be willing to post your package.json? Similar to the above, I want to match the installed packages as closely to yours as I can.

[prashanthsridhar]

Hi @stevkan
Here is the package.json

{
  "name": "test",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "clean": "rm -rf dist",
    "hmr": "ng serve --configuration hmr",
    "ng": "ng",
    "start": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve --configuration hmr --hmrWarning=false",
    "build": "node --max_old_space_size=20480 node_modules/@angular/cli/bin/ng build  --prod",
    "postbuild": "gulp compress",
    "dev": "lite-server",
    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
    "test": "ng test",
    "lint": "ng lint",
    "prod-build-prod": "ng build --prod=true  --configuration=production",
    "e2e": "ng e2e",
    "postinstall": "node patch.js"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.803.21",
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/platform-server": "^8.2.14",
    "@angular/pwa": "^0.803.21",
    "@angular/router": "^8.2.14",
    "@angular/service-worker": "^8.2.14",
    "@aspnet/signalr": "^1.1.4",
    "@azure/msal-angular": "^0.1.4",
    "@nguniversal/express-engine": "^8.2.6",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@ngxs/logger-plugin": "^3.6.0",
    "@ngxs/store": "^3.6.0",
    "@progress/kendo-angular-buttons": "^5.1.0",
    "@progress/kendo-angular-common": "^1.2.1",
    "@progress/kendo-angular-conversational-ui": "^2.0.0",
    "@progress/kendo-angular-dateinputs": "^4.2.0",
    "@progress/kendo-angular-dialog": "^4.1.0",
    "@progress/kendo-angular-dropdowns": "^4.2.3",
    "@progress/kendo-angular-editor": "^0.11.0",
    "@progress/kendo-angular-excel-export": "^3.1.0",
    "@progress/kendo-angular-grid": "^4.6.3",
    "@progress/kendo-angular-inputs": "^6.3.1",
    "@progress/kendo-angular-intl": "^2.0.0",
    "@progress/kendo-angular-l10n": "^2.0.1",
    "@progress/kendo-angular-label": "^2.0.2",
    "@progress/kendo-angular-layout": "^4.1.5",
    "@progress/kendo-angular-menu": "^2.0.1",
    "@progress/kendo-angular-notification": "2.0.0",
    "@progress/kendo-angular-pdf-export": "^2.0.0",
    "@progress/kendo-angular-popup": "^3.0.4",
    "@progress/kendo-angular-scheduler": "^1.1.1",
    "@progress/kendo-angular-scrollview": "^3.0.0",
    "@progress/kendo-angular-sortable": "3.0.1",
    "@progress/kendo-angular-toolbar": "^2.2.1",
    "@progress/kendo-angular-tooltip": "^2.1.1",
    "@progress/kendo-angular-upload": "^5.1.0",
    "@progress/kendo-data-query": "^1.5.2",
    "@progress/kendo-date-math": "^1.5.1",
    "@progress/kendo-drawing": "^1.6.0",
    "@progress/kendo-recurrence": "^1.0.0",
    "@progress/kendo-theme-bootstrap": "^4.8.0",
    "@progress/kendo-theme-default": "4.10.0",
    "@syncfusion/ej2": "^17.4.40",
    "@syncfusion/ej2-angular-buttons": "^17.4.39",
    "@syncfusion/ej2-angular-calendars": "^17.4.40",
    "@syncfusion/ej2-angular-circulargauge": "^17.4.39",
    "@syncfusion/ej2-angular-diagrams": "^17.4.40",
    "@syncfusion/ej2-angular-dropdowns": "^17.4.40",
    "@syncfusion/ej2-angular-grids": "^17.4.40",
    "@syncfusion/ej2-angular-inputs": "^17.4.39",
    "@syncfusion/ej2-angular-maps": "^17.4.40",
    "@syncfusion/ej2-angular-notifications": "^17.4.40",
    "@syncfusion/ej2-angular-splitbuttons": "^17.4.39",
    "@syncfusion/ej2-data": "^17.4.39",
    "@syncfusion/ej2-diagrams": "^17.4.40",
    "@syncfusion/ej2-inputs": "^17.4.39",
    "@syncfusion/ej2-maps": "^17.4.40",
    "@teachablemachine/image": "^0.8.4",
    "@tensorflow/tfjs": "^1.2.8",
    "@thisissoon/angular-image-loader": "^5.1.0",
    "@types/dom-mediacapture-record": "^1.0.2",
    "ajv": "^6.10.2",
    "angular-epic-spinners": "^2.0.0",
    "applicationinsights-js": "^1.0.20",
    "artyom.js": "^1.0.6",
    "aspnet-prerendering": "^3.0.1",
    "awesome-typescript-loader": "^5.2.1",
    "base-64": "^0.1.0",
    "bootstrap": "^4.4.1",
    "botframework-directlinejs": "^0.11.6",
    "compression-webpack-plugin": "^3.0.1",
    "core-js": "^3.6.3",
    "core-util-is": "^1.0.2",
    "ej-angular2": "17.4.39",
    "eslint": "^6.8.0",
    "guid-typescript": "^1.0.9",
    "gulp": "^4.0.2",
    "gulp-gzip": "^1.4.2",
    "gulp-sass": "^4.0.2",
    "hammerjs": "^2.0.8",
    "handtrackjs": "0.0.13",
    "html2canvas": "^1.0.0-rc.5",
    "html-to-text": "^5.1.1",
    "i": "^0.3.6",
    "image-to-base64": "^2.0.1",
    "increase-memory-limit": "^1.0.7",
    "install": "^0.13.0",
    "jquery": "^3.4.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.15",
    "mat-progress-buttons": "^8.0.7",
    "metro4": "^4.3.4",
    "microsoft-cognitiveservices-speech-sdk": "1.8.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "ng-artyom": "0.0.1-alpha",
    "ng-drag-drop": "^5.0.0",
    "ng2-search-filter": "^0.5.1",
    "ngx-color": "^4.1.0",
    "ngx-color-picker": "^8.2.0",
    "ngx-export-as": "^1.4.0",
    "ngx-moment": "^3.5.0",
    "ngx-pagination": "^5.0.0",
    "ngx-permissions": "^7.0.3",
    "ngx-pinch-zoom": "^2.2.4",
    "ngx-powerbi": "^2.0.0",
    "ngx-quicklink": "^0.1.5",
    "npm": "^6.13.4",
    "npm-check-updates": "^4.0.1",
    "observable-webworker": "^3.2.3",
    "offline-plugin": "^5.0.7",
    "popper.js": "^1.16.0",
    "popups": "^1.1.3",
    "powerbi-client": "^2.8.0",
    "purgecss-webpack-plugin": "^1.6.0",
    "qtip2": "^3.0.3",
    "recorder-js": "^1.0.7",
    "recordrtc": "^5.5.8",
    "rxjs": "^6.5.3",
    "rxjs-compat": "^6.5.3",
    "speak-tts": "^2.0.8",
    "survey-angular": "^1.1.26",
    "survey-creator": "^1.1.26",
    "surveyjs-widgets": "^1.1.26",
    "syncfusion-javascript": "17.4.39",
    "typescript": "~3.4.5",
    "uglifyjs-webpack-plugin": "^1.0.0-rc.0",
    "utf8": "^3.0.0",
    "uuid": "^3.3.3",
    "vis": "^4.21.0",
    "webpack": "^4.41.5",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "yfiles": "./lib/es-modules/yfiles-22.0.3.tgz",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.4.1",
    "@angular/cli": "^8.3.21",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.14",
    "@angularclass/hmr": "^2.1.3",
    "@ngxs/hmr-plugin": "^3.6.0",
    "@types/ej.web.all": "^17.3.2",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.8",
    "@types/jquery": "^3.3.31",
    "@types/lodash": "^4.14.149",
    "@types/node": "^12.12.22",
    "angular2-template-loader": "^0.6.2",
    "codelyzer": "^5.2.1",
    "css-loader": "^3.4.2",
    "guess-parser": "^0.4.12",
    "guess-webpack": "^0.4.12",
    "html-loader": "^0.5.5",
    "html-webpack-injector": "^1.1.2",
    "html-webpack-plugin": "^3.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "~5.4.2",
    "scss-loader": "0.0.1",
    "style-loader": "^1.1.2",
    "to-string-loader": "^1.1.6",
    "ts-loader": "^6.2.1",
    "ts-node": "~8.5.4",
    "tslint": "^5.20.1",
    "webpack-dashboard": "^3.2.0"
  },
  "optionalDependencies": {
    "grunt-usemin": "^3.1.1",
    "http-server": "^0.6.1",
    "node-sass": "^4.13.0"
  },
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}

[prashanthsridhar]

@stevkan On further testing, i noticed that,for every input i give there is one
activities call to /v3/directline/conversations
and multiple calls to /cognitiveservices/v1

Additional info:

                                               directline           cognitiveservices
open bot once:                                   1                               1
close bot open again                             1                               2
close bot open again                             1                               3

and so on. Find screenshot below
The renderWebchat function is listed in the first comment

[prashanthsridhar]

Hi @compulim , is this something within the scope of how the cognitiveservices call is happening via webChat.

[stevkan]

@prashanthsridhar, I'm still unable to reproduce the issue. Furthermore, I'm not seeing any calls coming thru that match or even look similar to the ones you have identified up above (i.e. v1?deploymentId...). I'm inclined to think that there is some other process in your code that is resulting in those calls being made. I'm also inclined to think that these additional calls are interrupting your speech service from functioning properly, however it's hard for me to know since I can't see all of your code.

Can you check for any other processes that may be calling Cognitive Services? Or, can you provide any additional code (and the file it's living in) that is associated to Web Chat being implemented?

This is the code I'm using for connecting speech. It is taken from the 03.speech/g.hybrid-speech sample. You'll notice that the "README.md" file demonstrates how to pass the authorizationToken and region while the "index.html" file demonstrates how to pass credentials. As you can see, there aren't any "v1" calls being made.