Connexion Webchat - RASA en local ✨

.github/workflows/build.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1 #this installs node and npm for us
         with:
-          node-version: '10.x'
+          node-version: '18.x'
 
       - uses: actions/cache@v1 # this allows for re-using node_modules caching, making builds a bit faster.
         with:
@@ -19,5 +19,5 @@ jobs:
             ${{ runner.os }}-node-
 
       - run: yarn install #TODO: --only-prod, le build crash à voir pq
-      - run: yarn install -g @angular/cli > /dev/null
+      - run: yarn global add @angular/cli > /dev/null
       - run: yarn build:prod

package.json

@@ -5,6 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "start:local": "ng serve --proxy-config proxy.local.conf.json",
+    "start:local webchat": "ng serve --proxy-config proxy.local.conf.json --project=webchat",
     "start:dev": "ng serve --proxy-config proxy.dev.conf.json",
     "start:dev webchat": "ng serve --proxy-config proxy.dev.conf.json --project=webchat",
     "start:test": "ng serve --proxy-config proxy.test.conf.json",
@@ -46,7 +47,7 @@
     "ngx-panzoom": "^15.0.0",
     "ngx-toastr": "^16.0.2",
     "rxjs": "~6.6.7",
-    "socket.io-client": "^4.1.2",
+    "socket.io-client": "^4.6.2",
     "tslib": "^2.3.0",
     "uglify-js-es6": "^2.8.9",
     "web-animations-js": "^2.3.2",

projects/webchat/src/app/app.component.html

@@ -1,5 +1,6 @@
 <div class="chatbot" *ngIf="configService.config && !configService.config.maintenanceMode">
-  <app-chat-widget [socketUrl]="chatbotUrl"
+  <app-chat-widget [socketUrl]="chatbotSocket"
+                   [chatbotUrl]="chatbotUrl"
                    [botAvatar]="chatbotUrl + '/media/'  + configService.config.icon"
                    [companyLogo]="configService.config.embeddedIcon ? chatbotUrl + '/media/'  + configService.config.embeddedIcon : null"
                    [botName]="configService.config.name"

projects/webchat/src/app/app.component.ts

@@ -12,11 +12,13 @@ import { environment } from '../environments/environment';
 export class AppComponent implements OnInit {
 
   public chatbotUrl;
+  public chatbotSocket;
 
   constructor(@Inject(Window) public window: Window,
               public configService: ConfigService,
               private _titleService: Title) {
     this.chatbotUrl = environment.chatbotUrl;
+    this.chatbotSocket = environment.chatbotSocket;
     this.configService.init(this.chatbotUrl);
   }
 

projects/webchat/src/app/chat-feedback-modal/chat-feedback-modal.component.ts

@@ -1,7 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
 import { FormBuilder, Validators } from '@angular/forms';
-import { WebchatService } from '../core/services/webchat.service';
 
 @Component({
   selector: 'app-chat-feedback-modal',
@@ -14,8 +13,7 @@ export class ChatFeedbackModalComponent implements OnInit {
 
   constructor(public dialogRef: MatDialogRef<ChatFeedbackModalComponent>,
               @Inject(MAT_DIALOG_DATA) public data: any,
-              private _fb: FormBuilder,
-              private _webchatService: WebchatService) { }
+              private _fb: FormBuilder) { }
 
   ngOnInit(): void {
   }

projects/webchat/src/app/chat-messages/chat-messages.component.ts

@@ -33,6 +33,7 @@ export class ChatMessagesComponent implements OnInit, OnDestroy {
   @Input() isMobileSize: boolean;
   @Input() storage: string;
   @Input() socketUrl: string;
+  @Input() chatbotUrl: string;
   @Input() socketPath: string;
   @Input() initPayload: string;
   @Input() delayBetweenMessages: number;
@@ -73,7 +74,7 @@ export class ChatMessagesComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this._chatService.setStorage(this.storage);
     this.messages = this._chatService.getConversation();
-    this._chatService.connect(this.socketUrl, this.socketPath, this.initPayload);
+    this._chatService.connect(this.socketUrl, this.socketPath, this.initPayload, this.chatbotUrl);
     this._feedbackService.url = this.socketUrl;
 
     setTimeout(() => {

projects/webchat/src/app/chat-widget/chat-widget.component.html

@@ -39,6 +39,7 @@ <h1 id="tchat-title" class="sr-only">Fenêtre de chat</h1>
                          [isMobileSize]="isMobileSize"
                          [storage]="storage"
                          [socketUrl]="socketUrl"
+                         [chatbotUrl]="chatbotUrl"
                          [socketPath]="socketPath"
                          [initPayload]="initPayload"
                          [delayBetweenMessages]="delayBetweenMessages"

projects/webchat/src/app/chat-widget/chat-widget.component.ts

@@ -20,6 +20,7 @@ export class ChatWidgetComponent implements OnInit {
   @Input() public companyLogo = `https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Logo_Minist%C3%A8re_des_Arm%C3%A9es_%282020%29.svg/520px-Logo_Minist%C3%A8re_des_Arm%C3%A9es_%282020%29.svg.png`;
   @Input() public userAvatar = null;
   @Input() public socketUrl = 'http://localhost:5500';
+  @Input() public chatbotUrl: string;
   @Input() public socketPath = environment.socketUrl;
   @Input() public initPayload = '/phrase_presentation';
   @Input() public feedbackPayload = '/phrase_feedback';

projects/webchat/src/app/core/services/webchat.service.ts

@@ -13,6 +13,7 @@ const ACCESSIBILITY_NAME = 'chat_accessibility';
 export class WebchatService {
 
   private _url;
+  private _apiUrl;
   private _initPayload: string;
 
   private _socket: any;
@@ -28,8 +29,9 @@ export class WebchatService {
   constructor(private _http: HttpClient) {
   }
 
-  public connect(url: string, path: string, initPayload: string) {
+  public connect(url: string, path: string, initPayload: string, apiUrl: string) {
     this._url = url;
+    this._apiUrl = apiUrl;
     this._initPayload = initPayload;
     if (this._socket) {
       this._socket.disconnect();
@@ -159,7 +161,7 @@ export class WebchatService {
       params = params.append('getResponses', getResponses.toString());
     }
 
-    return this._http.get(`${this._url}/api/public/intents`, {params});
+    return this._http.get(`${this._apiUrl}/api/public/intents`, {params});
   }
 
   public getSessionId() {

projects/webchat/src/environments/environment.prod.ts

@@ -1,5 +1,6 @@
 export const environment = {
   production: true,
   chatbotUrl: window.location.origin,
+  chatbotSocket: window.location.origin,
   socketUrl: '/socket-chatbot/'
 };

projects/webchat/src/environments/environment.ts

@@ -5,7 +5,8 @@
 export const environment = {
   production: false,
   chatbotUrl: window.location.origin,
-  socketUrl: '/socket-chatbot/'
+  chatbotSocket: 'http://localhost:5005',
+  socketUrl: '/socket.io/'
 };
 
 /*

yarn.lock

@@ -9227,10 +9227,10 @@ socket.io-adapter@~2.5.2:
   dependencies:
     ws "~8.11.0"
 
-socket.io-client@^4.1.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.7.2.tgz#f2f13f68058bd4e40f94f2a1541f275157ff2c08"
-  integrity sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==
+socket.io-client@^4.6.2:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.7.4.tgz#5f0e060ff34ac0a4b4c5abaaa88e0d1d928c64c8"
+  integrity sha512-wh+OkeF0rAVCrABWQBaEjLfb7DVPotMbu0cgWgyR0v6eA4EoVnAwcIeIbcdTE3GT/H3kbdLl7OoH2+asoDRIIg==
   dependencies:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.2"