From 89e0c0cc4533f44bb49c8a6b1a91ee8233e17c28 Mon Sep 17 00:00:00 2001
From: Gabriele Panico <gabriele.panico@gmail.com>
Date: Sat, 7 Oct 2023 17:12:13 +0200
Subject: [PATCH] ui improved

---
 src/app/app-routing.module.ts                 |   8 +-
 src/app/app.component.ts                      |  10 +-
 src/app/app.module.ts                         |  22 ++-
 .../detail/detail.component.scss              |   4 +-
 .../import-export.component.html              |  25 ++--
 ...s-action-capture-user-reply.component.html |  90 ++++++++++++
 ...s-action-capture-user-reply.component.scss | 135 +++++++++++++++++
 ...ction-capture-user-reply.component.spec.ts |  23 +++
 ...cds-action-capture-user-reply.component.ts | 101 +++++++++++++
 .../cds-action-json-condition.component.html  |   4 +-
 .../cds-action-reply.component.ts             |  22 +--
 .../cds-action-reply-gallery.component.html   |   4 +-
 .../cds-action-web-request-v2.component.scss  |   3 +
 .../cds-action-web-request.component.scss     |   3 +
 .../list/question/question.component.scss     |   1 +
 .../cds-add-action-menu.component.scss        |   1 +
 .../image-upload/image-upload.component.html  |   2 +-
 .../image-upload/image-upload.component.scss  |   1 +
 .../image-upload/image-upload.component.ts    | 137 ++++++++++++++++++
 .../cds-intent/cds-intent.component.html      |   9 +-
 .../cds-intent/cds-intent.component.ts        |   2 +-
 .../cds-panel-action-detail.component.html    |   9 ++
 .../cds-panel-actions.component.scss          |   1 +
 .../cds-panel-widget.component.ts             |   7 +-
 .../rules-add/rules-add.component.html        |   4 +-
 .../cds-sidebar/cds-sidebar.component.ts      |   4 +-
 .../chatbot-design-studio.module.ts           |   4 +
 .../services/connector.service.ts             | 106 ++++++++------
 .../services/intent.service.ts                |   5 +-
 src/app/chatbot-design-studio/utils.ts        |   4 +-
 .../unauthorized/unauthorized.component.html  |  28 ++++
 .../unauthorized/unauthorized.component.scss  |   0
 .../unauthorized.component.spec.ts            |  25 ++++
 .../unauthorized/unauthorized.component.ts    |  15 ++
 src/app/guards/auth.guard.ts                  |  39 +++--
 src/app/guards/role.guard.ts                  |  61 +++++++-
 src/app/models/action-model.ts                |   9 ++
 src/app/services/users.service.ts             |   6 +-
 .../notification-message.component.ts         |   8 +-
 .../images/actions/capture_user_reply.svg     |   4 +
 src/assets/logos/logo-short.png               | Bin 0 -> 2887 bytes
 src/assets/sass/cds/styles.scss               |  57 +++++++-
 src/assets/sass/demo.scss                     |  30 +---
 .../tiledesk/tiledesk-auth.service.ts         |  14 ++
 src/index.html                                |  14 +-
 45 files changed, 914 insertions(+), 147 deletions(-)
 create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.html
 create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.scss
 create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.spec.ts
 create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.ts
 create mode 100755 src/app/components/unauthorized/unauthorized.component.html
 create mode 100755 src/app/components/unauthorized/unauthorized.component.scss
 create mode 100755 src/app/components/unauthorized/unauthorized.component.spec.ts
 create mode 100755 src/app/components/unauthorized/unauthorized.component.ts
 create mode 100644 src/assets/images/actions/capture_user_reply.svg
 create mode 100644 src/assets/logos/logo-short.png

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 841bc36e..863759bb 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,6 +3,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { CdsDashboardComponent } from './chatbot-design-studio/cds-dashboard/cds-dashboard.component';
 import { AuthGuard } from './guards/auth.guard';
 import { AppComponent } from './app.component';
+import { RoleGuard } from './guards/role.guard';
+import { UnauthorizedComponent } from './components/unauthorized/unauthorized.component';
 
 const routes: Routes = [
   // -----------------------------------------
@@ -13,9 +15,11 @@ const routes: Routes = [
   // { path: 'project/', component: CdsDashboardComponent, canActivate:[AuthGuard] },
   { path: 'home', component: AppComponent },
 
-  { path: 'project/:projectid/cds/:faqkbid', component: CdsDashboardComponent, canActivate:[AuthGuard] },
-  { path: 'project/:projectid/cds/:faqkbid/intent/:intent_id', component: CdsDashboardComponent, canActivate:[AuthGuard] },
+  { path: 'project/:projectid/cds/:faqkbid', component: CdsDashboardComponent, canActivate:[AuthGuard, RoleGuard] },
+  { path: 'project/:projectid/cds/:faqkbid/intent/:intent_id', component: CdsDashboardComponent, canActivate:[AuthGuard, RoleGuard] },
 
+  { path: 'project/:projectid/unauthorized', component: UnauthorizedComponent },
+  
 ];
 
 @NgModule({
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d8a3e943..2fa0bcb7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -36,8 +36,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   IS_ONLINE: boolean;
   initFinished:boolean = false;
 
-  private project: Project;
-  private selectedChatbot: Chatbot
 
   constructor(
     private appConfigService: AppConfigService,
@@ -109,7 +107,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     // const getUrlParams = await this.dashboardService.getUrlParams();
     // this.logger.log('[CDS DSHBRD] Risultato 2:', getUrlParams);
 
-    this.initAuthentication();
+    await this.initAuthentication();
     this.setLanguage(null);
 
   }
@@ -250,7 +248,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
   /***************************************************+*/
   /**------- AUTHENTICATION FUNCTIONS --> START <--- +*/
-  private initAuthentication() {
+  initAuthentication() {
     const tiledeskToken = this.appStorageService.getItem('tiledeskToken')
 
     this.logger.log('[APP-COMP] >>> INIT-AUTHENTICATION !!! ')
@@ -263,14 +261,14 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.log('[APP-COMP] >>> initAuthentication user ', user)
 
         this.updateStoredCurrentUser()
-
+        this.IS_ONLINE = true;
       }).catch(error => {
         this.logger.error('[APP-COMP] initAuthentication SIGNINWITHCUSTOMTOKEN error::', error)
       })
     } else {
       this.logger.warn('[APP-COMP] >>> I AM NOT LOGGED IN <<<')
       this.IS_ONLINE = false;
-      this.goToDashboardLogin()
+      // this.goToDashboardLogin()
     }
   }
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3c560807..d73a79da 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -56,6 +56,10 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTabsModule } from '@angular/material/tabs';
+import { FirebaseInitService } from 'src/chat21-core/providers/firebase/firebase-init-service';
+import { NativeImageRepoService } from 'src/chat21-core/providers/native/native-image-repo';
+import { FirebaseImageRepoService } from 'src/chat21-core/providers/firebase/firebase-image-repo';
+import { UnauthorizedComponent } from './components/unauthorized/unauthorized.component';
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
@@ -73,6 +77,20 @@ const appInitializerFn = (appConfig: AppConfigService, logger: NGXLogger) => {
   };
 };
 
+export function imageRepoFactory(appConfig: AppConfigService, http: HttpClient) {
+  const config = appConfig.getConfig()
+  if (config.uploadEngine === UPLOAD_ENGINE_NATIVE) {
+    const imageService = new NativeImageRepoService(http)
+    imageService.setImageBaseUrl(config.baseImageUrl)
+    return imageService
+  } else {
+    const imageService = new FirebaseImageRepoService(http);
+    FirebaseInitService.initFirebase(config.firebaseConfig)
+    imageService.setImageBaseUrl(config.baseImageUrl)
+    return imageService
+  }
+}
+
 export function uploadFactory(http: HttpClient, appConfig: AppConfigService, appStorage: AppStorageService) {
 
   const config = appConfig.getConfig()
@@ -81,6 +99,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     nativeUploadService.setBaseUrl(config.baseImageUrl)
     return nativeUploadService
   } else {
+    FirebaseInitService.initFirebase(config.firebaseConfig)
     return new FirebaseUploadService();
   }
 }
@@ -88,7 +107,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
 @NgModule({
   declarations: [
     AppComponent,
-    BotsBaseComponent
+    BotsBaseComponent,
+    UnauthorizedComponent,
   ],
   imports: [
     // TooltipModule.forRoot(CutomTooltipOptions as TooltipOptions),
diff --git a/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.scss b/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.scss
index 99ffc18e..90b8b77a 100644
--- a/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.scss
+++ b/src/app/chatbot-design-studio/cds-chatbot-details/detail/detail.component.scss
@@ -115,13 +115,13 @@ input[type="file"] {
     color: #000;
     border-radius: 4px;
     font-weight: 500;
-    margin-top: 14px;
+    // margin-top: 14px;
     // width: 145px;
 }
 
 #cds-delete-bot-img-btn {
     padding: 9px 15px;
-    margin-top: 21px;
+    // margin-top: 21px;
     color: #fff;
     background: #f44336 !important;
     box-shadow: none !important;
diff --git a/src/app/chatbot-design-studio/cds-chatbot-details/import-export/import-export.component.html b/src/app/chatbot-design-studio/cds-chatbot-details/import-export/import-export.component.html
index 17e7b522..88a7744d 100644
--- a/src/app/chatbot-design-studio/cds-chatbot-details/import-export/import-export.component.html
+++ b/src/app/chatbot-design-studio/cds-chatbot-details/import-export/import-export.component.html
@@ -151,16 +151,18 @@ <h3 class="card_title__underlined" style="margin-top: 30px; color:#e8eaed">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header" style="padding: 8px 15px;">
-        <!-- class="close" -->
-        <button type="button" class="close-modal-window" aria-label="Close" (click)="onCloseModal()">
-          <span aria-hidden="true" style="color: rgb(6, 6, 6) !important;position: relative;">&times;</span>
-        </button>
 
         <h4 class="modal-title" style="line-height: 2!important;">
 
           <!-- {{ 'FaqPage.ImportCsvFile' | translate }} -->
           Import CSV File
         </h4>
+        <!-- class="close" -->
+        <button type="button" class="close-modal-window" aria-label="Close" (click)="onCloseModal()">
+          <span aria-hidden="true" style="color: rgb(6, 6, 6) !important;position: relative;">&times;</span>
+        </button>
+
+        
       </div>
 
       <div class="modal-body" style="padding-bottom: 20px !important; padding-top: 20px;">
@@ -335,14 +337,15 @@ <h4 class="modal-title" style="line-height: 2!important;">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="onCloseModal()">
-          <span aria-hidden="true">&times;</span>
-        </button>
 
         <h4 class="modal-title">
           Upload CSV
           <!-- {{ 'FaqPage.UploadCsv' | translate }} -->
         </h4>
+        <button type="button" class="close" aria-label="Close" (click)="onCloseModal()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        
       </div>
 
       <div class="modal-body">
@@ -435,14 +438,14 @@ <h4 class="modal-title">
     <div class="modal-content">
       <div class="modal-header" style="padding: 8px 15px;">
 
-        <button type="button" class="close-modal-window" aria-label="Close" (click)="onCloseImportJSONModal()">
-          <span aria-hidden="true" style="color: rgb(6, 6, 6) !important;position: relative;">&times;</span>
-        </button>
-
         <h4 class="modal-title" style="line-height: 2!important; font-size: 20px; font-weight: 400;">
           <!-- {{'ImportFromJSON' | translate}} -->
           Import from JSON
         </h4>
+        <button type="button" class="close-modal-window" aria-label="Close" (click)="onCloseImportJSONModal()">
+          <span aria-hidden="true" style="color: rgb(6, 6, 6) !important;position: relative;">&times;</span>
+        </button>
+
       </div>
 
       <div class="modal-body import-json-modal-body">
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.html
new file mode 100644
index 00000000..5c467d07
--- /dev/null
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.html
@@ -0,0 +1,90 @@
+<div *ngIf="previewMode" class="cds-action-preview" style="position: relative;">
+
+    <!-- <div class="action-row">
+        <div class="action-row-left">
+            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="none">
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path d="M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z" />
+            </svg>
+        </div>
+
+        <div class="action-row-right"> -->
+            <!-- <div *ngIf="action?.question" class="action-row-right">
+                {{action?.question}}
+            </div>
+            <div *ngIf="!action?.question" class="action-row-right empty">
+                Enter the question
+            </div> -->
+            <!-- Preview something
+        </div>
+
+    </div> -->
+
+    <div id="capture-user-reply" class="previewContent">
+        
+        <label class="title-preview-label">Capture user reply
+            <span *ngIf="action?.assignResultTo">to </span>
+            <span *ngIf="action?.assignResultTo" style="font-weight: 600;">{{ action?.assignResultTo }}</span>
+
+        </label>
+        
+        <cds-connector class="connector"
+            [idConnector] = "idConnector"
+            [isConnected] = "isConnected">
+        </cds-connector>
+    </div>
+
+</div>
+
+
+<div id="content" *ngIf="!previewMode" class="content">
+
+
+    <div class="text-editor-wrapper">
+        <div class="field-box">
+            <label class="title-label">Assign user reply to</label>
+            <div class="value-wrp">
+                <cds-textarea 
+                    id="assignTo" 
+                    [textLimitBtn]="false" 
+                    [emojiPikerBtn]="false" 
+                    [setAttributeBtn]="true"
+                    [minRow]="1" 
+                    [maxRow]="1" 
+                    [readonly]="true" 
+                    [text]="action.assignResultTo"
+                    [placeholder]="'(Optional)'"
+                    (selectedAttribute)="onSelectedAttribute($event, 'assignResultTo')"
+                    (clearSelectedAttribute)="onSelectedAttribute($event, 'assignResultTo')">
+                </cds-textarea>
+            </div>
+        </div>
+    </div>
+
+    <div style="margin-top: 40px;">
+        <div class="condition-container">
+            <div class="icon-action">
+                <img src="assets/cds/images/actions/connect_intent.svg">
+            </div>
+            <span class="condition-text">Then go to block</span>
+        </div>
+
+        <div class="select-box" id="intentSelect">
+            <cds-select 
+                id="text-condition" 
+                [items]="listOfIntents" 
+                [bindLabelSelect]="'name'"
+                [bindValueSelect]="'value'" 
+                [itemSelected]="action?.goToIntent" 
+                [placeholder]="'Select a block'"
+                [clearable]="true" 
+                (onSelected)="onChangeBlockSelect($event, 'goToIntent')"
+                (onReset)="onResetBlockSelect($event, 'goToIntent')">
+            </cds-select>
+        </div>
+    </div>
+
+
+
+
+</div>
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.scss
new file mode 100644
index 00000000..b713f2ed
--- /dev/null
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.scss
@@ -0,0 +1,135 @@
+@import "./src/assets/sass/cds/_variables.scss";
+
+.previewContent{
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 5px;
+    padding: 3px 0px;
+}
+
+.previewContent#capture-user-reply {
+    justify-content: flex-start;
+}
+
+.cds-action-preview{
+    .title-preview-label{
+     color: #6c6859;
+     font-size: 12px; 
+     margin: 0px;
+    }
+
+    .icon-action img{
+        height: 16px;
+        filter: brightness(0) saturate(100%) invert(42%) sepia(2%) saturate(2720%) hue-rotate(9deg) brightness(91%) contrast(81%);
+    }
+
+}
+
+.icon-action {
+    transition: opacity .15s ease 0s;
+    opacity: .85;
+    background: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+        height: 20px;
+    }
+}  
+
+
+.content {
+    max-height: calc(100vh - 200px);
+    padding: 20px 0px;
+    margin-left: 30px;
+    margin-right: 30px;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+}
+
+.text-editor-wrapper {
+    font-size: $font-size-base;
+    position: relative;
+    width: 100%;
+    //height: auto;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 20px;
+}
+
+.field-box {
+    display: flex;
+    flex-direction: column;
+}
+
+.title-label {
+    color: white;
+    font-size: 14px;
+    margin-bottom: 6px;
+}
+
+div.value-wrp {
+    position: relative;
+
+    .flex {
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        right: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .close {
+            // height: 16px;
+            width: 17px;
+            top: -7px;
+            right: -7px;
+            font-size: 15px;
+            border-radius: 50%;
+            background: white;
+            cursor: pointer;
+            position: absolute;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            opacity: 1;
+
+            &:hover {
+                background: #ecb606;
+                color: white;
+            }
+        }
+    }
+
+    div.tag {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 8px;
+        right: unset;
+        border-radius: 7px;
+        margin: 5px;
+        padding: 5px 10px;
+        background-color: #ecb606;
+        color: white;
+
+    }
+}
+
+.condition-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 0px;
+}
+
+.condition-text {
+    font-size: 14px;
+    font-weight: 600;
+    color: white;
+}
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.spec.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.spec.ts
new file mode 100644
index 00000000..70848f17
--- /dev/null
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CdsActionCaptureUserReplyComponent } from './cds-action-capture-user-reply.component';
+
+describe('CdsActionCaptureUserReplyComponent', () => {
+  let component: CdsActionCaptureUserReplyComponent;
+  let fixture: ComponentFixture<CdsActionCaptureUserReplyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CdsActionCaptureUserReplyComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CdsActionCaptureUserReplyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.ts
new file mode 100644
index 00000000..5d26d167
--- /dev/null
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.ts
@@ -0,0 +1,101 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IntentService } from '../../../../../services/intent.service';
+import { Intent } from 'src/app/models/intent-model';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { ActionCaptureUserReply } from 'src/app/models/action-model';
+
+@Component({
+  selector: 'cds-action-capture-user-reply',
+  templateUrl: './cds-action-capture-user-reply.component.html',
+  styleUrls: ['./cds-action-capture-user-reply.component.scss']
+})
+export class CdsActionCaptureUserReplyComponent implements OnInit {
+
+  @Input() intentSelected: Intent;
+  @Input() action: ActionCaptureUserReply;
+  @Input() previewMode: boolean = true;
+  @Input() project_id: string;
+  @Output() updateAndSaveAction = new EventEmitter;
+  @Output() onConnectorChange = new EventEmitter<{type: 'create' | 'delete',  fromId: string, toId: string}>()
+
+  listOfIntents: Array<{name: string, value: string, icon?:string}>;
+
+  // Connectors
+  idIntentSelected: string;
+  idConnector: string;
+  isConnected: boolean = false;
+  connector: any;
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  
+  constructor(
+    private intentService: IntentService
+  ) { }
+
+  ngOnInit(): void {
+    this.logger.debug("[ACTION-CAPTURE-USER-REPLY] action detail: ", this.action);
+
+    this.intentService.isChangedConnector$.subscribe((connector: any) => {
+      this.logger.debug('[ACTION-CAPTURE-USER-REPLY] isChangedConnector -->', connector);
+      this.connector = connector;
+      this.updateConnector();
+    });
+    this.initializeConnector();
+  }
+
+  initializeConnector() {
+    this.logger.debug("Intent Selected: ", this.intentSelected);
+    this.idIntentSelected = this.intentSelected.intent_id;
+    this.idConnector = this.idIntentSelected+'/'+this.action._tdActionId;
+    this.listOfIntents = this.intentService.getListOfIntents()
+  }
+
+  private updateConnector(){
+    try {
+      const array = this.connector.fromId.split("/");
+      const idAction= array[1];
+      if(idAction === this.action._tdActionId){
+        if(this.connector.deleted){ 
+          // DELETE 
+          this.action.goToIntent = null
+          this.isConnected = false
+          this.updateAndSaveAction.emit();
+        } else { 
+          // ADD / EDIT
+          this.isConnected = true;
+          if(this.action.goToIntent !== "#"+this.connector.toId){ 
+            this.action.goToIntent = "#"+this.connector.toId;
+            this.updateAndSaveAction.emit();
+          } 
+        };
+      }
+    } catch (error) {
+      this.logger.error('[ACTION-CAPTURE-USER-REPLY] updateConnector error: ', error);
+    }
+  }
+
+  onSelectedAttribute(event, property) {
+    this.logger.log("[ACTION-CAPTURE-USER-REPLY] onEditableDivTextChange event", event)
+    this.logger.log("[ACTION-CAPTURE-USER-REPLY] onEditableDivTextChange property", property)
+    this.action[property] = event.value;
+    this.updateAndSaveAction.emit();
+  }
+
+  onChangeBlockSelect(event:{name: string, value: string}, type: string) {
+    if(event){
+      this.action[type] = event.value;
+    }
+    this.onConnectorChange.emit({ type: 'create', fromId: this.idConnector, toId: this.action.goToIntent });
+    this.updateAndSaveAction.emit();
+  }
+
+  onResetBlockSelect(event:{name: string, value: string}, type: string) {
+    this.onConnectorChange.emit({ type: 'delete', fromId: this.idConnector, toId: this.action.goToIntent });
+    this.action[type] = null;
+    this.updateAndSaveAction.emit();
+  }
+
+
+
+}
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.html
index b23a71d1..b99e5bd4 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-json-condition/cds-action-json-condition.component.html
@@ -161,11 +161,11 @@
 </div>
 
 
-<ng-template #placeholder [ngOutletContext]="context">
+<ng-template #placeholder>
     <div class="title-label">Click to add a condition</div>
 </ng-template>
 
-<ng-template #conditions [ngOutletContext]="context">
+<ng-template #conditions>
    <div id="conditions">
         <div *ngFor="let group of action?.groups; let i = index;" class="group">
             
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.ts
index 4facde7b..5f3c24f8 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/cds-action-reply.component.ts
@@ -150,19 +150,19 @@ export class CdsActionReplyComponent implements OnInit {
 
   /** */
   drop(event: CdkDragDrop<string[]>) {
+    console.log( 'DROP REPLY ---> ',event, this.arrayResponses);
     this.textGrabbing = false;
-    // moveItemInArray(this.arrayResponses, event.previousIndex, event.currentIndex);
-    // this.onUpdateAndSaveAction();
-    console.log('eventtttttt drop', event)
     try {
-      const newPos1 = this.arrayResponses[event.currentIndex];
-      const newPos0 = this.arrayResponses[event.currentIndex-1];
-      const oldPos1 = this.arrayResponses[event.previousIndex];
-      const oldPos0 = this.arrayResponses[event.previousIndex-1];
-      this.arrayResponses[event.currentIndex-1] = oldPos0;
-      this.arrayResponses[event.currentIndex] = oldPos1;
-      this.arrayResponses[event.previousIndex-1] = newPos0;
-      this.arrayResponses[event.previousIndex] = newPos1;
+      let currentPos = event.currentIndex*2+1;
+      let previousPos = event.previousIndex*2+1;
+      const waitCur = this.arrayResponses[currentPos-1];
+      const msgCur = this.arrayResponses[currentPos];
+      const waitPre = this.arrayResponses[previousPos-1];
+      const msgPre = this.arrayResponses[previousPos];
+      this.arrayResponses[currentPos-1] = waitPre;
+      this.arrayResponses[currentPos] = msgPre;
+      this.arrayResponses[previousPos-1] = waitCur;
+      this.arrayResponses[previousPos] = msgCur;
       // console.log( 'DROP REPLY ---> ', this.arrayResponses);
       this.connectorService.movedConnector(this.intentSelected.id);
       this.onUpdateAndSaveAction();
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.html
index 437916b9..df0dd8d6 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-reply/elements/cds-action-reply-gallery/cds-action-reply-gallery.component.html
@@ -171,7 +171,7 @@
 </div>
 
 
-<ng-template #placeholder [ngOutletContext]="context">
+<ng-template #placeholder>
     <div class="gallery-preview-wrp" id="placeholder">
         <div class="image no-image">
             <img src="assets/images/icons/add_image.svg">
@@ -183,7 +183,7 @@
     </div>
 </ng-template>
 
-<ng-template #galleryElement [ngOutletContext]="context">
+<ng-template #galleryElement>
     <div *ngFor="let galleryEl of gallery; let i = index; let last = last" class="galleryElement">
        <div class="gallery-preview-wrp" [ngStyle]="{ 'border-bottom' : last? 'unset' : 'border-bottom: 1px solid #dcd5ba'}">
             <div class="image" [class.no-image]="galleryEl.preview.src === ''">
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.scss
index 28dc1fb8..3e8a408b 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request-v2/cds-action-web-request-v2.component.scss
@@ -80,10 +80,13 @@
     border: 0;
     background: transparent;
     padding: 6px 0;
+    display: flex;
+    align-items: center;
 }
 .cds-input-group {
     // margin: 10px 10px;
     display: flex;
+    flex-wrap: nowrap;
     input {
         border: 0;
         background: #fff;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request/cds-action-web-request.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request/cds-action-web-request.component.scss
index 9a4f7692..1ae3e13d 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request/cds-action-web-request.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-web-request/cds-action-web-request.component.scss
@@ -58,10 +58,13 @@
     border: 0;
     background: transparent;
     padding: 6px 0;
+    display: flex;
+    align-items: center;
 }
 .cds-input-group {
     // margin: 10px 10px;
     display: flex;
+    flex-wrap: nowrap;
     input {
         border: 0;
         background: #fff;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss
index fa9fe861..d01fbb73 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/question/question.component.scss
@@ -202,6 +202,7 @@ mat-form-field.box-textarea ::ng-deep {
 
 .cds-input-group {
     margin-bottom: 8px;
+    flex-wrap: nowrap;
 }
 
 .cds-add-question-input {
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/shared/cds-add-action-menu/cds-add-action-menu.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/shared/cds-add-action-menu/cds-add-action-menu.component.scss
index 5032cf9a..dfc10855 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/shared/cds-add-action-menu/cds-add-action-menu.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/shared/cds-add-action-menu/cds-add-action-menu.component.scss
@@ -94,6 +94,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        box-shadow: none;
     }
 }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.html
index 8840ef1a..fcaa8c81 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.html
@@ -7,7 +7,7 @@
 
     <label class="inputUploadImage" [for]="'uploadImage_'+ uuid">
         <div class="image"><img src="assets/images/icons/add_image.svg"></div>
-        <input style="display:none" type="file" [id]="'uploadImage_'+ uuid" accept=".jpg, .JPEG, .png, .gif, .webp" (change)="selectFile($event)" />
+        <input style="display:none" type="file" [id]="'uploadImage_'+ uuid" accept=".jpg, .JPEG, .png, .gif, .webp" (change)="detectFiles($event)" />
     </label>
 
     <div class="labelDropUploadImage">
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.scss
index a0a20cf3..a4310043 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.scss
@@ -50,4 +50,5 @@
     width: auto;
     height: auto;
     position: relative;
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.ts
index a6e267fb..bafff838 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/image-upload/image-upload.component.ts
@@ -7,6 +7,7 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { UserModel } from 'src/chat21-core/models/user';
+import { UploadModel } from 'src/chat21-core/models/upload';
 
 @Component({
   selector: 'cds-image-upload',
@@ -28,6 +29,10 @@ export class CDSImageUploadComponent implements OnInit {
 
   uuid: string = uuidv4()
   
+  selectedFiles: FileList;
+  isFilePendingToUpload: Boolean = false;
+  arrayFilesLoad: Array<any> = [];
+
   private logger: LoggerService = LoggerInstance.getInstance()
   
   constructor(
@@ -75,6 +80,7 @@ export class CDSImageUploadComponent implements OnInit {
   selectFile(event: any): void {
     try {
       let selectedFiles = event.target.files[0];
+
       if (selectedFiles) {
         this.uploadAttachment(selectedFiles);
       }
@@ -84,6 +90,137 @@ export class CDSImageUploadComponent implements OnInit {
   }
 
 
+  detectFiles(event: any){
+    this.logger.debug('[IMAGE-UPLOAD] detectFiles: ', event);
+
+    if (event) {
+      this.selectedFiles = event.target.files;
+      this.logger.debug('[[IMAGE-UPLOAD] AppComponent:detectFiles::selectedFiles', this.selectedFiles);
+      // this.onAttachmentButtonClicked.emit(this.selectedFiles)
+      if (this.selectedFiles == null) {
+        this.isFilePendingToUpload = false;
+      } else {
+        this.isFilePendingToUpload = true;
+      }
+      this.logger.debug('[[IMAGE-UPLOAD] AppComponent:detectFiles::selectedFiles::isFilePendingToUpload', this.isFilePendingToUpload);
+      this.logger.debug('[[IMAGE-UPLOAD] fileChange: ', event.target.files);
+      if (event.target.files.length <= 0) {
+        this.isFilePendingToUpload = false;
+      } else {
+        this.isFilePendingToUpload = true;
+      }
+      
+      const that = this;
+      if (event.target.files && event.target.files[0]) {
+          const nameFile = event.target.files[0].name;
+          const typeFile = event.target.files[0].type;
+          const reader = new FileReader();
+            that.logger.debug('[[IMAGE-UPLOAD] OK preload: ', nameFile, typeFile, reader);
+            reader.addEventListener('load', function () {
+              that.logger.debug('[[IMAGE-UPLOAD] addEventListener load', reader.result);
+              // that.isFileSelected = true;
+              // se inizia con image
+              if (typeFile.startsWith('image') && !typeFile.includes('svg')) {
+                const imageXLoad = new Image;
+                that.logger.debug('[[IMAGE-UPLOAD] onload ', imageXLoad);
+                imageXLoad.src = reader.result.toString();
+                imageXLoad.title = nameFile;
+                imageXLoad.onload = function () {
+                  that.logger.debug('[[IMAGE-UPLOAD] onload image');
+                  // that.arrayFilesLoad.push(imageXLoad);
+                  const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
+                  that.arrayFilesLoad[0] = { uid: uid, file: imageXLoad, type: typeFile };
+                  that.logger.debug('[[IMAGE-UPLOAD] OK: ', that.arrayFilesLoad[0]);
+                  // SEND MESSAGE
+                  that.loadFile();
+                };
+              } else {
+                that.logger.debug('[[IMAGE-UPLOAD] onload file');
+                const fileXLoad = {
+                  src: reader.result.toString(),
+                  title: nameFile
+                };
+                // that.arrayFilesLoad.push(imageXLoad);
+                const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
+                that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: typeFile };
+                that.logger.debug('[[IMAGE-UPLOAD] OK: ', that.arrayFilesLoad[0]);
+                // SEND MESSAGE
+                that.loadFile();
+              }
+            }, false);
+
+            if (event.target.files[0]) {
+              reader.readAsDataURL(event.target.files[0]);
+              that.logger.debug('[[IMAGE-UPLOAD] reader-result: ', event.target.files[0]);
+            }
+      }
+    }
+  }
+
+
+  loadFile() {
+    this.logger.debug('[[IMAGE-UPLOAD] that.fileXLoad: ', this.arrayFilesLoad);
+    // at the moment I only manage the upload of one image at a time
+    if (this.arrayFilesLoad[0] && this.arrayFilesLoad[0].file) {
+      const fileXLoad = this.arrayFilesLoad[0].file;
+      const uid = this.arrayFilesLoad[0].uid;
+      const type = this.arrayFilesLoad[0].type;
+      this.logger.debug('[[IMAGE-UPLOAD] that.fileXLoad: ', type);
+      let metadata;
+      if (type.startsWith('image') && !type.includes('svg')) {
+          metadata = {
+              'name': fileXLoad.title,
+              'src': fileXLoad.src,
+              'width': fileXLoad.width,
+              'height': fileXLoad.height,
+              'type': type,
+              'uid': uid
+          };
+      } else {
+          metadata = {
+              'name': fileXLoad.title,
+              'src': fileXLoad.src,
+              'type': type,
+              'uid': uid
+          };
+      }
+      this.logger.debug('[[IMAGE-UPLOAD] metadata -------> ', metadata);
+      // this.scrollToBottom();
+      // 1 - aggiungo messaggio localmente
+      // this.addLocalMessageImage(metadata);
+      // 2 - carico immagine
+      const file = this.selectedFiles.item(0);
+      this.uploadSingle(metadata, file, '') //GABBBBBBBB
+      // this.uploadSingle(metadata, file); 
+      // this.isSelected = false;
+    }
+  }
+
+  uploadSingle(metadata, file, messageText?: string) {
+    const that = this;
+    // const send_order_btn = <HTMLInputElement>document.getElementById('chat21-start-upload-doc');
+    // send_order_btn.disabled = true;
+    that.logger.debug('[[IMAGE-UPLOAD] AppComponent::uploadSingle::', metadata, file);
+    // const file = this.selectedFiles.item(0);
+    const currentUpload = new UploadModel(file);
+ 
+    this.uploadService.upload(this.user.uid, currentUpload).then(downloadURL => {
+      that.logger.debug(`[[IMAGE-UPLOAD] Successfully uploaded file and got download link - ${downloadURL}`);
+
+      metadata.src = downloadURL;
+      this.metadata = metadata
+      this.onChangeMetadata.emit(this.metadata)
+      that.isFilePendingToUpload = false;
+      // return downloadURL;
+    }).catch(error => {
+      // Use to signal error if something goes wrong.
+      that.logger.error(`[[IMAGE-UPLOAD] uploadSingle:: Failed to upload file and get link - ${error}`);
+      that.isFilePendingToUpload = false;
+    });
+    that.logger.debug('[[IMAGE-UPLOAD] reader-result: ', file);
+  }
+
+
   private uploadAttachment(uploadedFiles){
     if ((uploadedFiles.type.startsWith('image') || uploadedFiles.type.includes('gif')) && uploadedFiles.type.includes('svg')) {
       this.isImageSvg = true;
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.html
index dbca25e8..9804ff25 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.html
@@ -230,9 +230,16 @@
                     class="panel-response" 
                     [intentSelected]="intent"
                     [action]="action"
-                    (updateAndSaveAction)="onSaveIntent($event)">
+                    (updateAndSaveAction)="onUpdateAndSaveAction($event)">
                 </cds-action-gpt-task>
 
+                <cds-action-capture-user-reply *ngSwitchCase="TYPE_ACTION.CAPTURE_USER_REPLY" 
+                    class="panel-response" 
+                    [intentSelected]="intent"
+                    [action]="action"
+                    (updateAndSaveAction)="onUpdateAndSaveAction($event)">
+                </cds-action-capture-user-reply>
+
             </div>
 
             <!-- [ngStyle]="{'display':isDragging === false ? 'block' : 'none' }" -->
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts
index 4bd7047b..ce215524 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.ts
@@ -564,7 +564,7 @@ export class CdsIntentComponent implements OnInit, OnDestroy, OnChanges {
   /** Predicate function that only allows type='intent' to be dropped into a list. */
   canEnterDropList(action: any) {
     return (item: CdkDrag<any>) => {
-      console.log('itemmmmmmmm', item.data, action)
+      // console.log('itemmmmmmmm', item.data, action)
       return true
     }
   }
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-action-detail/cds-panel-action-detail.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-action-detail/cds-panel-action-detail.component.html
index 711ef840..595019af 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-action-detail/cds-panel-action-detail.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-action-detail/cds-panel-action-detail.component.html
@@ -180,6 +180,15 @@
                         (updateAndSaveAction)="onSaveIntent($event)">
                     </cds-action-gpt-task>
                     
+                    <cds-action-capture-user-reply *ngSwitchCase="typeAction.CAPTURE_USER_REPLY"
+                        class="panel-response"
+                        [intentSelected]="intentSelected"
+                        [action]="elementSelected"
+                        [previewMode]="false"
+                        (updateAndSaveAction)="onSaveIntent($event)"
+                        (onConnectorChange)="onConnectorChange($event.type, $event.fromId, $event.toId)">
+                    </cds-action-capture-user-reply>
+                    
                     <!-- <cds-action-assign-function *ngSwitchCase="typeAction.ASSIGN_FUNCTION"
                         [action]="elementSelected">
                     </cds-action-assign-function> -->
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-actions/cds-panel-actions.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-actions/cds-panel-actions.component.scss
index ea5c1170..7529d339 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-actions/cds-panel-actions.component.scss
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-actions/cds-panel-actions.component.scss
@@ -62,6 +62,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        box-shadow: none;
     }
 }
 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-widget/cds-panel-widget.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-widget/cds-panel-widget.component.ts
index 629a4d89..6ea8af4b 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-widget/cds-panel-widget.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-widget/cds-panel-widget.component.ts
@@ -31,7 +31,7 @@ export class CdsPanelWidgetComponent implements OnInit {
   public iframeVisibility: boolean = false
   public loading:boolean = true;
 
-  TESTSITE_BASE_URL: string = ''
+  WIDGET_BASE_URL: string = ''
   widgetTestSiteUrl: SafeResourceUrl = null
   constructor( 
     public appConfigService: AppConfigService,
@@ -69,10 +69,9 @@ export class CdsPanelWidgetComponent implements OnInit {
   }
 
   setIframeUrl(){
-    this.TESTSITE_BASE_URL = this.appConfigService.getConfig().testsiteBaseUrl;
-    const testItOutBaseUrl = this.TESTSITE_BASE_URL.substring(0, this.TESTSITE_BASE_URL.lastIndexOf('/')); 
+    this.WIDGET_BASE_URL = this.appConfigService.getConfig().widgetBaseUrl;
     // const testItOutBaseUrl = "https://widget.tiledesk.com/v6/5.0.71/assets/twp"; // nk for test publication
-    const testItOutUrl = testItOutBaseUrl + '/chatbot-panel.html'
+    const testItOutUrl = this.WIDGET_BASE_URL + 'assets/twp/chatbot-panel.html'
     // const testItOutUrl = 'http://localhost:4203/assets/twp'+ '/chatbot-panel.html'
     let url = testItOutUrl + '?tiledesk_projectid=' + this.projectID + 
                               '&tiledesk_participants=bot_' + this.selectedChatbot._id + 
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-rules/rules-add/rules-add.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-rules/rules-add/rules-add.component.html
index d2518d60..41f1b0be 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-rules/rules-add/rules-add.component.html
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-rules/rules-add/rules-add.component.html
@@ -3,7 +3,7 @@
     <ng-container *ngSwitchCase="false" [ngTemplateOutlet]="existingRule"></ng-container>
 </ng-container>
 
-<ng-template #addNewRule [ngOutletContext]="context">
+<ng-template #addNewRule>
     <div class="card-wrp new-rule" [formGroup]="ruleFormGroup">
 
             <div class="card-item">
@@ -44,7 +44,7 @@
     </div>
 </ng-template>
 
-<ng-template #existingRule [ngOutletContext]="context">
+<ng-template #existingRule>
     <mat-accordion class="rules-list">
         <div class="card-wrp" [formGroup]="ruleFormGroup">
             <mat-expansion-panel
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-sidebar/cds-sidebar.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-sidebar/cds-sidebar.component.ts
index 20fb7820..17894f19 100644
--- a/src/app/chatbot-design-studio/cds-dashboard/cds-sidebar/cds-sidebar.component.ts
+++ b/src/app/chatbot-design-studio/cds-dashboard/cds-sidebar/cds-sidebar.component.ts
@@ -53,8 +53,8 @@ export class CdsSidebarComponent implements OnInit {
   getUserRole() {
     this.projectService.getProjectUserByUserId(this.projectID, this.user.uid).pipe( takeUntil(this.unsubscribe$)).subscribe((projectUser: ProjectUser) => {
        console.log('[CDS-SIDEBAR] - SUBSCRIPTION TO USER ROLE »»» ', projectUser)
-      if (projectUser[0].role !== undefined) {
-        this.USER_ROLE = projectUser[0].role;
+      if (projectUser.role !== undefined) {
+        this.USER_ROLE = projectUser.role;
       }
     })
   }
diff --git a/src/app/chatbot-design-studio/chatbot-design-studio.module.ts b/src/app/chatbot-design-studio/chatbot-design-studio.module.ts
index d78f5df9..619465f5 100644
--- a/src/app/chatbot-design-studio/chatbot-design-studio.module.ts
+++ b/src/app/chatbot-design-studio/chatbot-design-studio.module.ts
@@ -173,6 +173,7 @@ import { CdsActionWhatsappAttributeComponent } from './cds-dashboard/cds-canvas/
 import { CdsWhatsappReceiverComponent } from './cds-dashboard/cds-canvas/actions/list/cds-action-whatsapp-static/whatsapp-receiver/whatsapp-receiver.component';
 import { CdsActionWhatsappStaticComponent } from './cds-dashboard/cds-canvas/actions/list/cds-action-whatsapp-static/cds-action-whatsapp-static.component';
 import { CdsActionGPTTaskComponent } from './cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/cds-action-gpt-task.component';
+import { CdsActionCaptureUserReplyComponent } from './cds-dashboard/cds-canvas/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component';
 
 //CDS PANELS
 import { CdsActionDetailPanelComponent } from './cds-dashboard/cds-canvas/cds-panel-action-detail/cds-panel-action-detail.component';
@@ -194,6 +195,7 @@ import { CdsAnswerComponent } from './cds-dashboard/cds-canvas/actions/list/answ
 import { SharedModule } from 'src/app/shared/shared.module';
 import { CdsEventComponent } from './cds-dashboard/cds-event/cds-event.component';
 import { CdsRuleComponent } from './cds-dashboard/cds-rule/cds-rule.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
@@ -279,6 +281,7 @@ import { CdsRuleComponent } from './cds-dashboard/cds-rule/cds-rule.component';
         CdsWhatsappReceiverComponent,
         CdsActionAskgptComponent,
         CdsActionGPTTaskComponent,
+        CdsActionCaptureUserReplyComponent,
         // action REPLY elements: start //
         CdsActionReplyToolsComponent,
         CdsActionReplyTextComponent,
@@ -335,6 +338,7 @@ import { CdsRuleComponent } from './cds-dashboard/cds-rule/cds-rule.component';
 
   ],
   imports: [
+    BrowserAnimationsModule,
     A11yModule,
     CommonModule,
     DragDropModule,
diff --git a/src/app/chatbot-design-studio/services/connector.service.ts b/src/app/chatbot-design-studio/services/connector.service.ts
index 44dc2cce..5a635887 100644
--- a/src/app/chatbot-design-studio/services/connector.service.ts
+++ b/src/app/chatbot-design-studio/services/connector.service.ts
@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core';
 import { TiledeskConnectors } from 'src/assets/js/tiledesk-connectors.js';
 import { StageService } from '../services/stage.service';
 import { TYPE_ACTION, TYPE_BUTTON } from '../utils';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 /** CLASSE DI SERVICES PER GESTIRE I CONNETTORI **/
 
 
@@ -14,6 +16,8 @@ export class ConnectorService {
   tiledeskConnectors: any;
   connectorDraft: any = {};
 
+  private logger: LoggerService = LoggerInstance.getInstance();
+  
   constructor(
     private stageService: StageService
   ) {}
@@ -46,19 +50,19 @@ export class ConnectorService {
   /**  create Connectors */
   createConnectors(intents){
     // this.deleteAllConnectors();
-    console.log('[CONNECTOR-SERV] -----> createConnectors::: ', intents);
+    this.logger.log('[CONNECTOR-SERV] -----> createConnectors::: ', intents);
     intents.forEach(intent => {
       if(intent.actions){
         intent.actions.forEach(action => {
-          console.log('[CONNECTOR-SERV] createConnectors:: ACTION ', action);
+          this.logger.log('[CONNECTOR-SERV] createConnectors:: ACTION ', action);
           /**  INTENT */
           if(action._tdActionType === TYPE_ACTION.INTENT){
-            console.log('[CONNECTOR-SERV] intent_display_name', intent.intent_display_name);
+            this.logger.log('[CONNECTOR-SERV] intent_display_name', intent.intent_display_name);
             if(action.intentName && action.intentName !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId;
               const idConnectorTo = action.intentName.replace("#", ""); ;
-              console.log('[CONNECTOR-SERV] -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
           }
@@ -67,9 +71,9 @@ export class ConnectorService {
           if(action._tdActionType === TYPE_ACTION.REPLY || action._tdActionType === TYPE_ACTION.RANDOM_REPLY){
             
             var buttons = this.findButtons(action);
-            // console.log('buttons   ----- >', buttons);
+            // this.logger.log('buttons   ----- >', buttons);
             buttons.forEach(button => {
-              console.log('[CONNECTOR-SERV] button   ----- > ', button);
+              this.logger.log('[CONNECTOR-SERV] button   ----- > ', button);
               if(button.type === TYPE_BUTTON.ACTION && button.action){
                 const idConnectorFrom = button.__idConnector;
                 var startIndex = button.action.indexOf('#') + 1;
@@ -78,8 +82,8 @@ export class ConnectorService {
                 if(endIndex>-1){
                   idConnectorTo = button.action.substring(startIndex, endIndex);
                 }
-                console.log('[CONNECTOR-SERV] -> idConnectorFrom', idConnectorFrom);
-                console.log('[CONNECTOR-SERV] -> idConnectorTo', idConnectorTo);
+                this.logger.log('[CONNECTOR-SERV] -> idConnectorFrom', idConnectorFrom);
+                this.logger.log('[CONNECTOR-SERV] -> idConnectorTo', idConnectorTo);
                 if(idConnectorFrom && idConnectorTo){
                   this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
                 }
@@ -92,15 +96,15 @@ export class ConnectorService {
             if(action.trueIntent && action.trueIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/true';
               const idConnectorTo = action.trueIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - ONLINE_AGENTS ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - ONLINE_AGENTS ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - ONLINE_AGENTS ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - ONLINE_AGENTS ACTION -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
             if(action.falseIntent && action.falseIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/false';
               const idConnectorTo = action.falseIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - ONLINE_AGENTS ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - ONLINE_AGENTS ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - ONLINE_AGENTS ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - ONLINE_AGENTS ACTION -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
           }
@@ -110,15 +114,15 @@ export class ConnectorService {
             if(action.trueIntent && action.trueIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/true';
               const idConnectorTo = action.trueIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - OPEN_HOURS ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - OPEN_HOURS ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - OPEN_HOURS ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - OPEN_HOURS ACTION -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
             if(action.falseIntent && action.falseIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/false';
               const idConnectorTo = action.falseIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - OPEN_HOURS ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - OPEN_HOURS ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - OPEN_HOURS ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - OPEN_HOURS ACTION -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
           }
@@ -128,15 +132,15 @@ export class ConnectorService {
             if(action.trueIntent && action.trueIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/true';
               const idConnectorTo =  action.trueIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - JSON_CONDITION ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - JSON_CONDITION ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - JSON_CONDITION ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - JSON_CONDITION ACTION -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
             if(action.falseIntent && action.falseIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/false';
               const idConnectorTo = action.falseIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - JSON_CONDITION ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - JSON_CONDITION ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - JSON_CONDITION ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - JSON_CONDITION ACTION -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
           }
@@ -146,15 +150,15 @@ export class ConnectorService {
             if(action.trueIntent && action.trueIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/true';
               const idConnectorTo =  action.trueIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - ASKGPT ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - ASKGPT ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - ASKGPT ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - ASKGPT ACTION -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
             if(action.falseIntent && action.falseIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/false';
               const idConnectorTo = action.falseIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - ASKGPT ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - ASKGPT ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - ASKGPT ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - ASKGPT ACTION -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
           }
@@ -164,15 +168,27 @@ export class ConnectorService {
             if(action.trueIntent && action.trueIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/true';
               const idConnectorTo =  action.trueIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - WEB-REQUEST-V2 ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - WEB-REQUEST-V2 ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - WEB-REQUEST-V2 ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - WEB-REQUEST-V2 ACTION -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
             if(action.falseIntent && action.falseIntent !== ''){
               const idConnectorFrom = intent.intent_id+'/'+action._tdActionId + '/false';
               const idConnectorTo = action.falseIntent.replace("#", "");
-              console.log('[CONNECTOR-SERV] - WEB-REQUEST-V2 ACTION -> idConnectorFrom', idConnectorFrom);
-              console.log('[CONNECTOR-SERV] - WEB-REQUEST-V2 ACTION -> idConnectorTo', idConnectorTo);
+              this.logger.log('[CONNECTOR-SERV] - WEB-REQUEST-V2 ACTION -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] - WEB-REQUEST-V2 ACTION -> idConnectorTo', idConnectorTo);
+              this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
+            }
+          }
+
+          /**  CAPTURE USER_REPLY */
+          if(action._tdActionType === TYPE_ACTION.CAPTURE_USER_REPLY){
+            this.logger.log('[CONNECTOR-SERV] intent_display_name', intent.intent_display_name);
+            if(action.goToIntent && action.goToIntent !== ''){
+              const idConnectorFrom = intent.intent_id+'/'+action._tdActionId;
+              const idConnectorTo = action.goToIntent.replace("#", ""); ;
+              this.logger.log('[CONNECTOR-SERV] -> idConnectorFrom', idConnectorFrom);
+              this.logger.log('[CONNECTOR-SERV] -> idConnectorTo', idConnectorTo);
               this.tiledeskConnectors.createConnectorFromId(idConnectorFrom, idConnectorTo);
             }
           }
@@ -212,10 +228,10 @@ export class ConnectorService {
 
   /** */
   createNewConnector(fromId:string, toId:string){
-    console.log('[CONNECTOR-SERV] createNewConnector:: fromId:', fromId, 'toId:', toId);
+    this.logger.log('[CONNECTOR-SERV] createNewConnector:: fromId:', fromId, 'toId:', toId);
     const elFrom = document.getElementById(fromId);
     const elTo = document.getElementById(toId);
-    console.log('[CONNECTOR-SERV] createNewConnector:: ', elFrom, elTo);
+    this.logger.log('[CONNECTOR-SERV] createNewConnector:: ', elFrom, elTo);
     if (elFrom && elTo) { 
       const fromPoint = this.tiledeskConnectors.elementLogicCenter(elFrom);
       const toPoint = this.tiledeskConnectors.elementLogicTopLeft(elTo);
@@ -226,7 +242,7 @@ export class ConnectorService {
 
   /** */
   deleteAllConnectors(){
-    console.log('[CONNECTOR-SERV] deleteAllConnectors:: ');
+    this.logger.log('[CONNECTOR-SERV] deleteAllConnectors:: ');
     this.tiledeskConnectors.deleteAllConnectors();
   }
 
@@ -236,7 +252,7 @@ export class ConnectorService {
    * e lo sostituisco con il nuovo
   */
   deleteConnectorWithIDStartingWith(connectorID){
-    console.log('[CONNECTOR-SERV] deleteConnectorWithIDStartingWith:: ', this.tiledeskConnectors.connectors);
+    this.logger.log('[CONNECTOR-SERV] deleteConnectorWithIDStartingWith:: ', this.tiledeskConnectors.connectors);
     const listOfConnectors = Object.keys(this.tiledeskConnectors.connectors)
     .filter(key => key.startsWith(connectorID))
     .reduce((filteredMap, key) => {
@@ -244,31 +260,31 @@ export class ConnectorService {
       return filteredMap;
     }, {});
     for (const [key, connector] of Object.entries(listOfConnectors)) {
-      // console.log('delete connector :: ', key );
+      // this.logger.log('delete connector :: ', key );
       this.tiledeskConnectors.deleteConnector(key);
     };
   }
 
   /** */
   deleteConnector(connectorID){
-    console.log('[CONNECTOR-SERV] deleteConnector::  connectorID ', connectorID)
+    this.logger.log('[CONNECTOR-SERV] deleteConnector::  connectorID ', connectorID)
     this.tiledeskConnectors.deleteConnector(connectorID);
   }
 
   deleteConnectorToList(connectorID){
-    console.log('[CONNECTOR-SERV] deleteConnectorToList::  connectorID ', connectorID)
+    this.logger.log('[CONNECTOR-SERV] deleteConnectorToList::  connectorID ', connectorID)
     delete this.listOfConnectors[connectorID];
   }
 
   addConnectorToList(connector){
     this.listOfConnectors[connector.id] = connector;
-    console.log('[CONNECTOR-SERV] addConnector::  connector ', connector)
+    this.logger.log('[CONNECTOR-SERV] addConnector::  connector ', connector)
   }
   
 
 
   createConnectorFromId(fromId, toId){
-    console.log('[CONNECTOR-SERV] createConnectorFromId fromId ', fromId, ' toId ', toId)
+    this.logger.log('[CONNECTOR-SERV] createConnectorFromId fromId ', fromId, ' toId ', toId)
     let intervalId = setInterval(async () => {
       const result = await this.tiledeskConnectors.createConnectorFromId(fromId, toId);
       if (result === true) {
@@ -283,29 +299,29 @@ export class ConnectorService {
 
   // deleteINConnectorsOfBlock(intent_id){
   //   this.tiledeskConnectors.deleteINConnectorsOfBlock(intent_id);
-  //   console.log('[CONNECTOR-SERV] deleteINConnectorsOfBlock intent_id ' ,intent_id);
+  //   this.logger.log('[CONNECTOR-SERV] deleteINConnectorsOfBlock intent_id ' ,intent_id);
   // }
 
   deleteConnectorsOfBlock(intent_id){
     this.tiledeskConnectors.deleteConnectorsOfBlock(intent_id);
-    console.log('[CONNECTOR-SERV] deleteConnectorsOfBlock intent_id ' ,intent_id);
+    this.logger.log('[CONNECTOR-SERV] deleteConnectorsOfBlock intent_id ' ,intent_id);
   }
 
   deleteConnectorFromAction(actionId, connId){
     this.tiledeskConnectors.deleteConnectorFromAction(actionId, connId);
-    console.log('[CONNECTOR-SERV] deleteConnectorFromAction actionId ' ,actionId ,' connId ', connId)
+    this.logger.log('[CONNECTOR-SERV] deleteConnectorFromAction actionId ' ,actionId ,' connId ', connId)
   }
 
   deleteConnectorsFromActionByActionId(actionId){
     this.tiledeskConnectors.deleteConnectorsFromActionByActionId(actionId);
-    console.log('[CONNECTOR-SERV] deleteConnectorsFromActionByActionId actionId ' ,actionId )
+    this.logger.log('[CONNECTOR-SERV] deleteConnectorsFromActionByActionId actionId ' ,actionId )
   }
 
   movedConnector(elementID){
-    console.log('[CONNECTOR-SERV] movedConnector elementID ' ,elementID )
+    this.logger.log('[CONNECTOR-SERV] movedConnector elementID ' ,elementID )
     const elem = document.getElementById(elementID);
     if(elem){
-      console.log('aggiorno i connettori: ', elem);
+      this.logger.log('aggiorno i connettori: ', elem);
       setTimeout(() => {
         this.tiledeskConnectors.updateConnectorsOutOfItent(elem);
       }, 0);
@@ -315,7 +331,7 @@ export class ConnectorService {
 
   moved(element, x, y){
     this.tiledeskConnectors.moved(element, x, y);
-    // console.log('[CONNECTOR-SERV] moved element ' ,element , ' x ' , x ,  'y ',  y )
+    // this.logger.log('[CONNECTOR-SERV] moved element ' ,element , ' x ' , x ,  'y ',  y )
   }
 
 }
diff --git a/src/app/chatbot-design-studio/services/intent.service.ts b/src/app/chatbot-design-studio/services/intent.service.ts
index febb7444..c480e5e5 100644
--- a/src/app/chatbot-design-studio/services/intent.service.ts
+++ b/src/app/chatbot-design-studio/services/intent.service.ts
@@ -20,7 +20,7 @@ import {
   ActionReplaceBot,
   ActionWait,
   ActionWebRequest,
-  Command, Wait, Message, Expression, Attributes, Action, ActionAskGPT, ActionWhatsappAttribute, ActionWhatsappStatic, ActionWebRequestV2, ActionGPTTask } from 'src/app/models/action-model';
+  Command, Wait, Message, Expression, Attributes, Action, ActionAskGPT, ActionWhatsappAttribute, ActionWhatsappStatic, ActionWebRequestV2, ActionGPTTask, ActionCaptureUserReply } from 'src/app/models/action-model';
 import { Intent } from 'src/app/models/intent-model';
 import { FaqService } from 'src/app/services/faq.service';
 import { FaqKbService } from 'src/app/services/faq-kb.service';
@@ -785,6 +785,9 @@ export class IntentService {
       action.model = "gpt-3.5-turbo";
       action.assignReplyTo = 'gpt_reply';
     }
+    if(typeAction === TYPE_ACTION.CAPTURE_USER_REPLY) {
+      action = new ActionCaptureUserReply();
+    }
     console.log('ho creato nuova action ', action);
     return action;
   }
diff --git a/src/app/chatbot-design-studio/utils.ts b/src/app/chatbot-design-studio/utils.ts
index 4219d635..717f4fd6 100644
--- a/src/app/chatbot-design-studio/utils.ts
+++ b/src/app/chatbot-design-studio/utils.ts
@@ -110,7 +110,8 @@ export enum TYPE_ACTION {
     ONLINE_AGENTS = 'ifonlineagents',
     OPEN_HOURS = 'ifopenhours',
     HIDE_MESSAGE = 'hmessage',
-    JSON_CONDITION = 'jsoncondition'
+    JSON_CONDITION = 'jsoncondition',
+    CAPTURE_USER_REPLY = 'capture_user_reply'
 }
 
 export enum TYPE_ACTION_CATEGORY {
@@ -245,6 +246,7 @@ export const ACTIONS_LIST: {[key: string]: {name: string, category: TYPE_ACTION_
     HIDE_MESSAGE: { name: 'Hidden message', category: TYPE_ACTION_CATEGORY.SPECIAL, type: TYPE_ACTION.HIDE_MESSAGE, src: "assets/images/actions/hidden_message.svg", status: "active",  },
     CHANGE_DEPARTMENT: { name: 'Change dept', category: TYPE_ACTION_CATEGORY.SPECIAL, type: TYPE_ACTION.CHANGE_DEPARTMENT, src: "assets/images/actions/change_department.svg", status: "active" },
     // ASSIGN_FUNCTION: { name: 'Set function', category: TYPE_ACTION_CATEGORY.NEW, type: TYPE_ACTION.ASSIGN_FUNCTION, src: "assets/images/actions/assign_var.svg" },
+    CAPTURE_USER_REPLY: { name: 'Capture User Reply', category: TYPE_ACTION_CATEGORY.FLOW, type: TYPE_ACTION.CAPTURE_USER_REPLY, src: "assets/images/actions/capture_user_reply.svg", status: "active", description: 'This action allow to capture the user reply' },
 }
 
 export const EVENTS_LIST = {
diff --git a/src/app/components/unauthorized/unauthorized.component.html b/src/app/components/unauthorized/unauthorized.component.html
new file mode 100755
index 00000000..8c08b91a
--- /dev/null
+++ b/src/app/components/unauthorized/unauthorized.component.html
@@ -0,0 +1,28 @@
+<div class="main-content" style="padding-top:0px; ">
+  <div class="container-fluid" style="text-align: center !important">
+    <div class="row">
+      <div class="col-md-12">
+        <div style="margin-top: 8%;">
+            <!-- <h3 style="text-align: center">Registrazione eseguita con successo!</h3> -->
+            
+            <!-- <div class="custom" style="display: flex; justify-content: center; margin-top: 35px;">
+              <div style="max-width: 400px; width: 100% !important;">
+                <button routerLink="/login" type="submit" style="width: 100%; background-color: #ff9800;" class="btn btn-danger">Login</button>
+              </div>
+            </div> -->
+
+            <h2 style="text-align: center; top:5%">
+              <!-- Unauthorized  access! -->
+              {{ "UnauthorizedPage.UnauthorizedAccess" | translate }}
+            
+            </h2>
+            <h3 style="text-align: center;"> 
+              <!-- Oops! You don't have permission to access this page. -->
+              {{ "UnauthorizedPage.OopsYouDontHave" | translate }}
+            </h3>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/components/unauthorized/unauthorized.component.scss b/src/app/components/unauthorized/unauthorized.component.scss
new file mode 100755
index 00000000..e69de29b
diff --git a/src/app/components/unauthorized/unauthorized.component.spec.ts b/src/app/components/unauthorized/unauthorized.component.spec.ts
new file mode 100755
index 00000000..8ee8aba0
--- /dev/null
+++ b/src/app/components/unauthorized/unauthorized.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UnauthorizedComponent } from './unauthorized.component';
+
+describe('UnauthorizedComponent', () => {
+  let component: UnauthorizedComponent;
+  let fixture: ComponentFixture<UnauthorizedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UnauthorizedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UnauthorizedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  xit('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/unauthorized/unauthorized.component.ts b/src/app/components/unauthorized/unauthorized.component.ts
new file mode 100755
index 00000000..2bc2f0f5
--- /dev/null
+++ b/src/app/components/unauthorized/unauthorized.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-unauthorized',
+  templateUrl: './unauthorized.component.html',
+  styleUrls: ['./unauthorized.component.scss']
+})
+export class UnauthorizedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/guards/auth.guard.ts b/src/app/guards/auth.guard.ts
index 0f01a55d..e68d4804 100644
--- a/src/app/guards/auth.guard.ts
+++ b/src/app/guards/auth.guard.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 import { Observable } from 'rxjs';
 import { UserModel } from 'src/chat21-core/models/user';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 
 @Injectable({
@@ -10,16 +11,36 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 export class AuthGuard implements CanActivate {
 
   user: UserModel;
-  
+
   constructor(
-    private tiledeskAuthService: TiledeskAuthService
-  ){
+    private appStorageService: AppStorageService,
+    private tiledeskAuthService: TiledeskAuthService,
+  ){ }
+
+  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+    
+    const url = state.url;
+    const _url = route['_routerState'].url
+
+    const queryParams = route.queryParams['jwt']
+    console.log('[AUTH-GUARD] -->', queryParams)
+    // if(!queryParams){
+    //   return false
+    // }
+    const storedTiledeskoken = this.appStorageService.getItem('tiledeskToken')
+    if(!queryParams && !storedTiledeskoken){
+      //goToSignIn Dashboard
+      return false
+    }    
+
+    var isAuthenticated = await this.tiledeskAuthService.isLoggedIn(); 
+    console.log('isAuthenticated-->', isAuthenticated)
+    if (!isAuthenticated) { 
+      //goToSignIn Dashboard
+      return false
+    } 
+    return isAuthenticated; 
 
-  }
-  canActivate(
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    return true;
   }
   
 }
diff --git a/src/app/guards/role.guard.ts b/src/app/guards/role.guard.ts
index 4732c1f9..b63af0cd 100644
--- a/src/app/guards/role.guard.ts
+++ b/src/app/guards/role.guard.ts
@@ -1,15 +1,68 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 import { Observable } from 'rxjs';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { ProjectService } from '../services/projects.service';
+import { ProjectUser } from '../models/project-user';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
 @Injectable({
   providedIn: 'root'
 })
 export class RoleGuard implements CanActivate {
-  canActivate(
-    route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  
+  constructor(
+    private appStorageService: AppStorageService,
+    private tiledeskAuthService: TiledeskAuthService,
+    private projectsService: ProjectService,
+    private router: Router
+  ){ }
+
+  async canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree> {
+    
+    const url = state.url;
+    const _url = route['_routerState'].url
+
+    /** CHECK USER IS LOGGED IN */
+    const queryParams = route.queryParams['jwt']
+    const storedTiledeskoken = this.appStorageService.getItem('tiledeskToken')
+    if(!queryParams && !storedTiledeskoken){
+      //goToSignIn Dashboard
+      return false
+    }
+    var isAuthenticated = await this.tiledeskAuthService.isLoggedIn(); 
+    if(!isAuthenticated){
+      return false
+    }
+
+
+    /** CHECK USER IS IN CURRENT PROJET */
+    const projectId= route.params.projectid
+    const user = this.tiledeskAuthService.getCurrentUser()
+    const userIsInProject = await this.getProjectUserInProject(projectId, user.uid)
+    console.log('userIsInProject-->', userIsInProject)
+    if(!userIsInProject){
+      this.router.navigate([`project/${projectId}/unauthorized`]);
+      return false
+    }
     return true;
   }
+
+
+
+  getProjectUserInProject(projectId: string, userId: string): Promise<boolean>{
+    return new Promise((resolve, reject)=> {
+      this.projectsService.getProjectUserByUserId(projectId, userId).subscribe({ next: (projectUser: ProjectUser) => {
+        resolve(true)
+      }, error: (error)=> {
+          this.logger.error('[ROLE-GUARD] getProjectUserRole --> ERROR:', error)
+          resolve(false)
+      }})
+    })
+  }
   
 }
diff --git a/src/app/models/action-model.ts b/src/app/models/action-model.ts
index aa4ac687..7f76025d 100644
--- a/src/app/models/action-model.ts
+++ b/src/app/models/action-model.ts
@@ -269,6 +269,15 @@ export class ActionGPTTask extends Action {
     }
 }
 
+export class ActionCaptureUserReply extends Action {
+    assignResultTo: string;
+    goToIntent: string;
+    constructor() {
+        super();
+        this._tdActionType = TYPE_ACTION.CAPTURE_USER_REPLY
+    }   
+}
+
 export class Operation {
     operators?: Array<TYPE_MATH_OPERATOR>
     operands: Array<Operand>
diff --git a/src/app/services/users.service.ts b/src/app/services/users.service.ts
index 070bb298..839df000 100755
--- a/src/app/services/users.service.ts
+++ b/src/app/services/users.service.ts
@@ -32,7 +32,7 @@ export class UsersService {
   // public has_clicked_logoutfrom_mobile_sidebar: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   // public has_clicked_logoutfrom_mobile_sidebar_project_undefined: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
-  SERVER_BASE_PATH: string;
+  // SERVER_BASE_PATH: string;
   PROJECTS_URL: string;
   UPDATE_USER_URL: string;
   CHANGE_PSW_URL: string;
@@ -254,7 +254,7 @@ export class UsersService {
 
   public getCurrentUserCommunityProfile(userid): Observable<UserModel[]> {
 
-    const url = this.SERVER_BASE_PATH + 'users_util/' + userid;
+    const url = this.SERVER_BASE_URL + 'users_util/' + userid;
     this.logger.log('[USER-SERV] - GET CURRENT USER CMNTY PROFILE - URL', url);
 
     const httpOptions = {
@@ -1092,7 +1092,7 @@ export class UsersService {
 
 
   public updateUserWithCommunityProfile(userWebsite: string, userPublicEmail: string, userDescription: string) {
-    const url = this.UPDATE_USER_URL;
+    const url = this.SERVER_BASE_URL + 'users/';
     this.logger.log('[USER-SERV] - UPDATE USER WITH COMMUNITY PROFILE (PUT) URL ', url);
 
    const httpOptions = {
diff --git a/src/app/ui/notification-message/notification-message.component.ts b/src/app/ui/notification-message/notification-message.component.ts
index d44aa53d..cc88d19c 100755
--- a/src/app/ui/notification-message/notification-message.component.ts
+++ b/src/app/ui/notification-message/notification-message.component.ts
@@ -96,11 +96,11 @@ export class NotificationMessageComponent implements OnInit, OnDestroy {
   getUserAvailabilityAndRole() {
     this.projectService.getProjectUserByUserId(this.project._id, this.user.uid).pipe( takeUntil(this.unsubscribe$)).subscribe((projectUser: ProjectUser) => {
       //  console.log('[CDS-SIDEBAR] - SUBSCRIPTION TO USER ROLE »»» ', userRole)
-      if (projectUser[0].role !== undefined) {
-        this.USER_ROLE = projectUser[0].role;
+      if (projectUser.role !== undefined) {
+        this.USER_ROLE = projectUser.role;
       }
-      if(projectUser[0].user_available !== undefined) {
-        this.IS_AVAILABLE = projectUser[0].user_available;
+      if(projectUser.user_available !== undefined) {
+        this.IS_AVAILABLE = projectUser.user_available;
       }
     })
   }
diff --git a/src/assets/images/actions/capture_user_reply.svg b/src/assets/images/actions/capture_user_reply.svg
new file mode 100644
index 00000000..cdfb17d8
--- /dev/null
+++ b/src/assets/images/actions/capture_user_reply.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff">
+    <path d="M1.5 2.75c0-.69.56-1.25 1.25-1.25h.5a.75.75 0 0 0 0-1.5h-.5A2.75 2.75 0 0 0 0 2.75v.5a.75.75 0 0 0 1.5 0v-.5ZM12.75 0a.75.75 0 0 0 0 1.5h.5c.69 0 1.25.56 1.25 1.25v.5a.75.75 0 0 0 1.5 0v-.5A2.75 2.75 0 0 0 13.25 0h-.5ZM1.5 12.75a.75.75 0 0 0-1.5 0v.5A2.75 2.75 0 0 0 2.75 16h.5a.75.75 0 0 0 0-1.5h-.5c-.69 0-1.25-.56-1.25-1.25v-.5Zm14.5 0a.75.75 0 0 0-1.5 0v.5c0 .69-.56 1.25-1.25 1.25h-.5a.75.75 0 0 0 0 1.5h.5A2.75 2.75 0 0 0 16 13.25v-.5ZM7.071 3.431a.75.75 0 0 1 .998-.36C9.826 3.896 11 5.823 11 8c0 2.177-1.174 4.104-2.931 4.929a.75.75 0 0 1-.638-1.358C8.608 11.019 9.5 9.659 9.5 8c0-1.659-.892-3.019-2.069-3.571a.75.75 0 0 1-.36-.998ZM5.05 5.481a.75.75 0 0 1 .968-.431C7.191 5.499 8 6.663 8 8c0 1.337-.81 2.501-1.982 2.95a.75.75 0 0 1-.536-1.4C6.06 9.328 6.5 8.73 6.5 8c0-.73-.44-1.328-1.018-1.55a.75.75 0 0 1-.432-.968Z">
+    </path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/logos/logo-short.png b/src/assets/logos/logo-short.png
new file mode 100644
index 0000000000000000000000000000000000000000..d290fc5521488ca5f095695ddba74a5d85e40d5f
GIT binary patch
literal 2887
zcmcguc~}!?9-g2g0wTvEm(?_iXNSq;Bq<RgK`w(FQLeTy%uHZ}WI_@k96~@)+@g!M
zJ_4eM7CaEe7F3i<aMf0=uHuEYt`v_dXhHEnQRswgyZhL!&;GIVJm1VW-@M=ZJKo>-
zduDBLknd!3XLA4mCj0wILaC>W8WCou)ID*}#iIZ~^CHCJU@?oom@Qxez}yX+);9;5
zBu`siK{^L)5KNmaop{MQ@{E&gr<0G(EZeWFE~RgCE?p^@vbS+yb;6f<)u}GdU*%Lj
z_{F)Q(a+8Gx@uF9PxsSwo$lve@9^NwUq6^|DDcpxh>~R+_tbZ0w)lFkEV8|}?(3q{
zcg_K~56?6yJ8Y)!f<HamLEtJ;zjMqb5BWU>k+J^v<&E5Prad&wlDI+V=_@~t{*i7)
zI~7pfN?%WN?S3lQj(xJ9_Sc58!rUXYyv1Js$kUm6ms(YHw;yN*21<C`8Ksj3;pc+~
z&x>5>hi1O4J)hOGd}ruXY05#YXpIcqM-(rqT6Xx>5nmwAa69$>geBAUx`bo3!cVp>
z+WybfzuQ^s@@mSjfN$gV2^r@a3-7B*`=fuGw(Fqjahrr&f(w~flcVC>)AOTx?KZPN
zJDIYnZVQ#uNh-fc4FFi!83zq0D|ZBd2{nW)LK`7nB1B1r8-kH>xSLL)qR;@~;i*$0
zXd<qq$KmmWQpD&!*36(2n1~V1l`^F&F`hv9WvKD6j361Bk%$T~hUY@MhfYWlC~z%8
z*C~>e8lg_a7~&ODbK^3^pbtT`i6VxV(I7oS8cY|HYMjn><AEs5ai{YIZZMC-Wb;0v
zvzV{|V!A^x8)U*lCQr!a(?>1_WlfFAg`twgBetkF5hFpXRS6*|EiKJ0jqOIN;~`ie
zpg33%iv>~$P?N6IB05m1nK{ZJ!8NFwP-zKLNjEYgab${C#GpJK4nd(Bqg84~(nKW;
z(jh7cc4Hbt8UkYI7*3U<P8u?fp%9*gD{!S&Lt)`DtSW)jl9~ka52(jJ|C<3SwNmMr
zjd%K@P>h+-Xnj(tFh&ycPP9gruEL>ETtlX)QQRk$a&x9J8kJD2#t|(pp@xXTVzOY6
z$pTrhj75pS60-RVjA}54p;8hf<mqEj7Rcm-FjofigfL6UVlSXJj6taizz{9+r(g^f
z%1N~Xq5LNlNIVXyl<^GuSXP8$GKo}EhAHpZLtaRwLVu-3izrdtUm{{qA-E9)CUobb
zxLm+zfm}I^fgCxGf^l&?7{pLHPacQ!5taZR-7g{06r)ha{lhhjktoISFROBt%R>+@
zA4CyY0P@)!cOx4UL<9l^$9Zf%2V;%0EmafLu|bl4&ua7vqZs8p3}<rXILL(saUh2c
zyMyj1#s_f$lZSHQI1I+)jKw*mx6qH!Xi0VYNV$jM$s@BQf<7d%5J8QlD`IGnR2*ZB
zEE4a?#(UWv*`JnxQ<RkSf28NIZ4D{crXgzFE1t^S=#dT{Ep9rCIv@18QUoQG#&VxG
z>K&SZDC2RenLrHae-7vU#2xnY{~8Wt>>|TLLI0`Y(6`@p94h*uC8~`Xr(^w-dKv4$
zxRT10n(D7d&swbnfN{_LC0;UJ`Qxq9Lc4fJeFZ81=1fNG(T=5%#e@xc*W(U^_Dr<T
zunvrt?CUsH^Wb1!#FLK79qq5f_sW{~x4sCT`|Lqwu;laQHg5z+uHskAlD;TCum-wu
z>xZB>Tll4~uD#4{Y`TrzKflrcICQ3;bvo*EhHr72N$<Mc`u4jU-U5mGw}xGYyoLA2
z$L3Bn;O*_&x+pvr%WwVOw=JsS11o(<EIasNSoV}$vEkI&)sWCMw7{e*w<5FrN>`s_
z-_*9k%n%ePv$^n+GbeZJTj{!Gh6(LXOkU>po6*_(0zIZIq*;x#Ufs5N&}%2HMcWzO
z8(`VTa(Xbk{^q7F4#)JxO!|H)(v?zVw?ZGaKApRf7Bjob$Kbt+=7QeQy=W_+bJf@R
zj2`lKIZ|U&lpO8##AmlFY-evDlb^B5+<tL^`A+YGkjfLggAv(o=6so>{rsXoU+$Y%
z-%H+Ae?}CC2Hx9s(dp?xVq=+QpDV|#E-b8Vg?)gls-f0beYTpGRbe@`cJ;%nj^jck
zoPiRR&cDAl$5Kbjva)>sp@qdy-+f!m-?-|ySwsC<Cu!9Z3Zi>uexmAJVTI?axz49b
zE|qJ>zp-&{bu+i{W=cB;f7)>+$vV5valU=wjseUzI_XOOg}eqL%SLFHW%g!WLy6ic
zx;C_Vz@eoBIq|b=Ny`iD_RjRZDG_1wk@?~h_3Mrk4wXQ^o&<gjT^o4P&hF&Wibd`h
zUoUxF89Z*b87vkn*|d8NTaUe(rJd6=Q8it~Zi3n20nJAv_qk?2nKpY)*qW8L<|?c3
z!JJ9_%cp<X@A6p0EowyayyjMQw{Hp7D{4XLSDJ6~d0S0SA`)Y{SZ`;@t@pBj{cF~m
zu6vz}3gmaXFzSwmu(o@D6SCA)mcYCJQTDR;&;EbcisPc`Of<4_T&{nStMndxl+5VO
z{n${7)or<$VtBr-`VRkaZiC_6-9?A13zB2GbuQsAn)Icu-?m(93#h!i!q9EVzxX7h
zpe1ES%(x)hp4!X<T_#Qn1@XwW%H<{4X!3|Q9rp-AzHeQwnbzmf_wa)mIreGdFVlUl
zMGn}`E9fT;_OW57H4e6G@ykB3{n3v+PkS`6Zu-@VbH=AOwPZH~(fJo5{bo75@a*aA
zcYbS{WbG02;f8@~?fO)U)H%&26_YAzil24V{1Vx|pxv$KFYfEQ=-Ci6<GLjB*>^U`
az{HQI8Y&mcU*0hOo%#C&N%nik=KTi#epU$p

literal 0
HcmV?d00001

diff --git a/src/assets/sass/cds/styles.scss b/src/assets/sass/cds/styles.scss
index 09ce09dd..70ad0bba 100644
--- a/src/assets/sass/cds/styles.scss
+++ b/src/assets/sass/cds/styles.scss
@@ -1,4 +1,5 @@
 @import "./src/assets/sass/cds/_variables.scss";
+@import "./src/assets/sass/md/_variables.scss";
 /** GENERIC **/
 
 /*
@@ -22,6 +23,52 @@ svg {
   vertical-align: unset;
 }
 
+.input-group{
+    position: relative;
+    display: table;
+    border-collapse: separate;
+}
+
+.input-group {  // may be in or outside of form-group
+    .input-group-btn {
+      padding: 0 12px; // match addon spacing
+    }
+  
+    .input-group-addon {
+      border: 0;
+      background: transparent;
+      padding: 6px 15px 0px;
+    }
+}
+
+/* Bottom Underline of the titles of the sections */
+.card_title__underlined {
+    text-transform: none;
+    color: #566787;
+    margin-bottom: 0px;
+    height: 40px !important;
+    position: relative;
+    font-family: "Poppins", "Roboto", "Arial", sans-serif;
+    height: 30px;
+    font-size: 16px;
+    margin-top: 10px;
+    // z-index: 0;
+}
+
+.card_title__underline {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: -1px;
+    border-bottom: 2px solid $brand-primary;
+    z-index: 1;
+}
+
+.section-subtitle {
+    height: 20px;
+    border-top: 1px solid #ddd;
+    /*  width: calc((100% / 3) + 372px); */
+}
 
 .content-panel-intent-detail {
     padding: 20px 0 30px;
@@ -310,9 +357,9 @@ color: white;
     // padding-top: 8px !important;
     // padding-bottom: 8px !important;
     // border: 1px solid #e5effe !important;
-  }
+}
   
-  .btn.btn-primary.cds-blue-button {
+.btn.btn-primary.cds-blue-button {
     background: $light-blue;
     color: $light-black;
     box-shadow: none;
@@ -324,4 +371,8 @@ color: white;
     &:hover {
       background: rgba(138, 180, 248, 0.8);
     }
-  }
+}
+
+appdashboard-cds-dashboard a {
+    text-decoration: none;
+}
diff --git a/src/assets/sass/demo.scss b/src/assets/sass/demo.scss
index 77fc8472..28fa54f1 100755
--- a/src/assets/sass/demo.scss
+++ b/src/assets/sass/demo.scss
@@ -47,6 +47,7 @@ my-app .main-panel .main-content .card {
   display: block;
 }
 
+
 .sidebar .nav > li.active-pro {
   position: absolute;
   width: 100%;
@@ -1038,34 +1039,7 @@ div.card-content > div > div > div > div > div > div > div.txt > p.internal-note
 /* div.card-content > div > div > div > div > div > div > div.txt > div > div > p > p > a
 div.card-content > div > div > div > div > div > div > div.txt > div > div > p > p */
 
-/* Bottom Underline of the titles of the sections */
-.card_title__underlined {
-  text-transform: none;
-  color: #566787;
-  margin-bottom: 0px;
-  height: 40px !important;
-  position: relative;
-  font-family: "Poppins", "Roboto", "Arial", sans-serif;
-  height: 30px;
-  font-size: 16px;
-  margin-top: 10px;
-  // z-index: 0;
-}
 
-.card_title__underline {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: -1px;
-  border-bottom: 2px solid $brand-primary;
-  z-index: 1;
-}
-
-.section-subtitle {
-  height: 20px;
-  border-top: 1px solid #ddd;
-  /*  width: calc((100% / 3) + 372px); */
-}
 
 // -------------------------------------------------
 // Added when the user details sidebar is opened
@@ -1726,3 +1700,5 @@ appdashboard-app-store > div > div > div > div > .card-app-store {
   color: $plan-c-color;
   background: $plan-c-background;
 }
+
+
diff --git a/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts b/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts
index 82cb2a7b..01a13a4d 100644
--- a/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts
+++ b/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts
@@ -5,6 +5,7 @@ import { UserModel } from 'src/chat21-core/models/user';
 import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 import { AppStorageService } from '../abstract/app-storage.service';
 import { LoggerInstance } from '../logger/loggerInstance';
+import { BehaviorSubject } from 'rxjs';
 // import { BehaviorSubject } from 'rxjs';
 // import { EventsService } from 'src/app/services/events-service';
 
@@ -26,6 +27,8 @@ export class TiledeskAuthService {
   private currentUser: UserModel;
   private logger: LoggerService = LoggerInstance.getInstance()
 
+  private BS_IsONLINE: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false)
+
   constructor(
     public http: HttpClient,
     public appStorage: AppStorageService,
@@ -122,6 +125,7 @@ export class TiledeskAuthService {
           // that.appStorage.setItem('tiledeskToken', that.tiledeskToken); // salvarlo esternamente nell'app.component
           this.checkAndSetInStorageTiledeskToken(that.tiledeskToken)
           resolve(this.currentUser)
+          this.BS_IsONLINE.next(true)
         }
       }, error: (error)=>{
         reject(error)
@@ -133,6 +137,7 @@ export class TiledeskAuthService {
     this.logger.log('[TILEDESK-AUTH] - LOGOUT')
     this.appStorage.removeItem('tiledeskToken')
     this.appStorage.removeItem('currentUser')
+    this.BS_IsONLINE.next(false)
     this.setCurrentUser(null);
     // this.isOnline$.next(false) 
     const stored_project = localStorage.getItem('last_project')
@@ -193,6 +198,15 @@ export class TiledeskAuthService {
     }
   }
 
+  isLoggedIn(): Promise<boolean>{
+    return new Promise<boolean>((resolve, reject)=> {
+      this.BS_IsONLINE.subscribe((status)=> {
+        if(status)
+          resolve(true)
+      })
+    })
+  }
+
 
   getCurrentUser(): UserModel {
     return this.currentUser;
diff --git a/src/index.html b/src/index.html
index 6c4e51b3..7134a030 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,10 +2,20 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Cds</title>
+  <title>Chatbot Design Studio</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/png" href="/assets/logos/logo-short.png">
+
+  <!--     Fonts and icons     -->
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  
+  <!-- --------------------------------------------------- -->
+  <!-- Poppins -->
+  <!-- --------------------------------------------------- -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>