new UI improvements

Tiledesk · Oct 31, 2023 · 62bcdf0 · 62bcdf0
1 parent d29dc98
commit 62bcdf0
Show file tree

Hide file tree

Showing 16 changed files with 114 additions and 81 deletions.
diff --git a/src/app/chatbot-design-studio/cds-base-element/attributes/attributes.component.scss b/src/app/chatbot-design-studio/cds-base-element/attributes/attributes.component.scss
@@ -175,10 +175,10 @@
         .text-editor-wrapper {
             position: relative;
             .tag {
-                inset: 0 1px 0 0;
+                inset: 4px 1px 1px 0px;
                 border-radius: var(--base-radius) 0 0 var(--base-radius);
-                margin: 2px 0;
-                padding: 3px 0;
+                margin: 0px 0;
+                padding: 2px 0;
                 justify-content: initial;
                 max-width: 100%;
                 .close {

diff --git a/...-studio/cds-dashboard/cds-canvas/base-elements/cds-connector/cds-connector.component.scss b/...-studio/cds-dashboard/cds-canvas/base-elements/cds-connector/cds-connector.component.scss
@@ -46,6 +46,7 @@
     width: 18px;
     height: 18px;
     background: rgb(0 0 0 / 50%);
+    cursor: copy;
     &::before {
         inset: 1px;
         border: 4px solid rgb(255, 255, 255);
@@ -69,7 +70,7 @@
     width: 16px; //14px
     height: 16px; //14px
     background-color: rgb(221,221,221,1);
-    cursor: copy;
+    cursor: default;
     &::before {
         inset: 0px;
         border: 1px solid rgb(98, 119, 140);
@@ -78,9 +79,6 @@
         content: "";
         border-radius: 50%;
     }
-    &.isConnected{
-        cursor: default;
-    }
 }
 
 
diff --git a/...app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.html b/...app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.html
@@ -15,6 +15,7 @@
                 cdkAutosizeMinRows="1"
                 cdkAutosizeMaxRows="5"
                 [(ngModel)]="text"
+                (blur)="onBlur($event)"
                 (ngModelChange)="onChangeText($event)"/>
             <div class="input-suffix" *ngIf="customPrefix"> / </div>
             <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">

diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/base-elements/text/text.component.ts
@@ -21,6 +21,7 @@ export class CDSTextComponent implements OnInit {
   @Input() autocompleteOptions: string[] = [];
   @Input() inputType: string = "text";
   @Output() onChange = new EventEmitter<string>();
+  @Output() blur = new EventEmitter();
 
   filteredOptions: Observable<string[]>;
   constructor() { }
@@ -47,6 +48,10 @@ export class CDSTextComponent implements OnInit {
     this.onChange.emit(this.text)
   }
 
+  onBlur(event){
+    this.blur.emit(event);
+  }
+
 
   private _filter(value: string): string[] {
     const filterValue = value.toLowerCase();

diff --git a/...atbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.ts b/...atbot-design-studio/cds-dashboard/cds-canvas/base-elements/textarea/textarea.component.ts
@@ -101,7 +101,7 @@ export class CDSTextareaComponent implements OnInit {
   }
 
   onChangeTextArea(event) {
-    this.logger.log('[CDS-TEXAREA] onChangeTextarea-->', event, this.readonly);
+    // this.logger.log('[CDS-TEXAREA] onChangeTextarea-->', event, this.readonly);
     this.calculatingleftCharsText();
     // console.log('onChangeTextarea!! ',event);
     if(this.readonly && event){
@@ -127,7 +127,6 @@ export class CDSTextareaComponent implements OnInit {
     console.log('onVariableSelected:: ', this.elTextarea.placeholder);
     let valueTextArea = {name: '', value: ''};
     if (this.elTextarea) {
-      this.elTextarea.focus();
       this.insertAtCursorPos(this.elTextarea, '{{' + variableSelected.value + '}}');
       valueTextArea.name = this.elTextarea.value;
       valueTextArea.value = this.elTextarea.value;
@@ -138,7 +137,7 @@ export class CDSTextareaComponent implements OnInit {
       valueTextArea.value = variableSelected.value;
       this.elTextarea.placeholder = '';
     } else {
-      this.onChangeTextArea(valueTextArea.name);
+      // this.onChangeTextArea(valueTextArea.name);
     }
     this.addVariable.close();
     this.selectedAttribute.emit(variableSelected);
@@ -171,11 +170,13 @@ export class CDSTextareaComponent implements OnInit {
     elem.value = textarea_txt.substring(0, cursor_pos) + txt_to_add + textarea_txt.substring(cursor_pos);
     elem.focus();
     elem.selectionEnd = cursor_pos + txt_to_add.length;
+    this.text = elem.value;
   }
 
   onAddEmoji(event){
     if(this.text){
-      this.text = `${this.text}${event.emoji.native}`;
+      // this.text = `${this.text} ${event.emoji.native}`;
+      this.insertAtCursorPos(this.elTextarea, event.emoji.native);
     } else {
       this.text = `${event.emoji.native}`;
     }

diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.html
@@ -75,6 +75,7 @@
     class="cds-generic-panel"
     [isOpenPanel]="IS_OPEN_PANEL_BUTTON_CONFIG" 
     [button]=buttonSelected 
+    [elementIntentSelected]="elementIntentSelected"
     (saveButton)=onSaveButton($event)>
 </cds-panel-button-configuration>
 

diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.scss
@@ -8,6 +8,7 @@ $margin-top-card: 30px;
 $box-left-width: 230px;
 $box-left-width-closed: 0px;
 
+$toogle-sidebar-width: 22px;
 
 // .menu--context--add{
 //   height: auto;
@@ -100,6 +101,39 @@ cds-fulfillment {
   z-index: 1050;
 }
 
+.cds-toggle-setting-sidebar-icon-left-wpr {
+  display: none;
+  position: absolute;
+  z-index: 1050;
+  width: $toogle-sidebar-width;
+  height: $toogle-sidebar-width;
+  // background: #1e293b;
+  right: calc(0px - $toogle-sidebar-width/2);
+  top: 50%;
+  transition: 0.3s;
+
+  &.is_opened {
+      right: calc(0px - $toogle-sidebar-width/2);
+      transition: 0.3s;
+  }
+}
+
+.toggle-setting-sidebar-icon {
+  background: $blu;
+  color: #fff;
+  border: 1px solid $blu !important;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  font-size: 18px;
+  display: block;
+}
+
+.toggle-setting-sidebar-icon:hover {
+    background: #f5f8fa;
+    color:  $blu;
+}
 
 
 
@@ -124,11 +158,12 @@ cds-fulfillment {
       align-items: flex-start;
       overflow-y: scroll;
 
-      &::-webkit-scrollbar {
-        width: 3px;
-      }
+
 
       &:hover{
+        &::-webkit-scrollbar {
+          width: 3px;
+        }
         &::-webkit-scrollbar-track {
           background-color: $blu-light-01;
         }
@@ -147,47 +182,13 @@ cds-fulfillment {
     }
 
 
-    $toogle-sidebar-width: 22px;
-
     &:hover{
       .cds-toggle-setting-sidebar-icon-left-wpr{
         display: block;
       }
     }
 
-    .cds-toggle-setting-sidebar-icon-left-wpr {
-        display: none;
-        position: absolute;
-        z-index: 1050;
-        width: $toogle-sidebar-width;
-        height: $toogle-sidebar-width;
-        // background: #1e293b;
-        right: calc(0px - $toogle-sidebar-width/2);
-        top: 50%;
-        transition: 0.3s;
-
-        &.is_opened {
-            right: calc(0px - $toogle-sidebar-width/2);
-            transition: 0.3s;
-        }
-    }
-
-    .toggle-setting-sidebar-icon {
-      background: $blu;
-      color: #fff;
-      border: 1px solid $blu !important;
-      border-radius: 50%;
-      width: 20px;
-      height: 20px;
-      cursor: pointer;
-      font-size: 18px;
-      display: block;
-    }
-
-    .toggle-setting-sidebar-icon:hover {
-        background: #f5f8fa;
-        color:  $blu;
-    }
+
   }
 
 

diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-canvas.component.ts
@@ -173,8 +173,9 @@ export class CdsCanvasComponent implements OnInit {
     });
 
     /** SUBSCRIBE TO THE STATE ACTION REPLY BUTTON PANEL */
-    this.subscriptionOpenButtonPanel = this.controllerService.isOpenButtonPanel$.subscribe((button: Button) => {
+    this.subscriptionOpenButtonPanel = this.controllerService.isOpenButtonPanel$.subscribe((button: Button ) => {
       this.buttonSelected = button;
+      this.elementIntentSelected = this.intentService.intentSelected;
       if (button) {
         // this.closeAllPanels(); // nk the action detail panel is not closed when the button detail panel is opened
         this.IS_OPEN_PANEL_WIDGET = false;

diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-intent/cds-intent.component.scss
@@ -233,6 +233,7 @@
     // cursor: text;
     box-sizing: border-box;
     max-width: 100%;
+    width: 100%;
     color: rgb(108, 104, 89);
     display: inline-block;
     white-space: pre-wrap;

diff --git a/...ds-dashboard/cds-canvas/cds-intent/panel-intent-header/panel-intent-header.component.html b/...ds-dashboard/cds-canvas/cds-intent/panel-intent-header/panel-intent-header.component.html
@@ -10,7 +10,7 @@
         [ngClass]="{'is-error':intentNameResult === false || intentNameAlreadyExist}">
         <input 
             #myInput type="text" 
-            class="input form-control tds_draggable"
+            class="input ellips form-control tds_draggable"
             [(ngModel)]="intentName"
             [readonly]="intentName === 'start' || intentName === 'defaultFallback'"
             [placeholder]="'EnterIntentName' | translate"

diff --git a/...d/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.html b/...d/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.html
@@ -6,6 +6,7 @@
                 <span class="material-icons-outlined">smart_button</span>
             </div>
             <p class="label-action">Button</p>
+            <p class="label-action intent_display_name"> ( {{elementIntentSelected?.intent_display_name}} ) </p>
         </div>
         <div class="button-tab-close" (click)="onCloseButtonPanel()">
             <span class="material-icons">chevron_right</span>
@@ -26,6 +27,7 @@
                 [minRow]="1" [maxRow]="1"
                 popoverVerticalAlign="above"
                 [emojiPikerBtn]="true"
+                (blur)="onBlur($event)"
                 (changeTextarea)="onChangeTitle($event)">
             </cds-textarea>
         </div>
@@ -64,7 +66,8 @@
                 </label>
                 <cds-text
                     [text]="buttonUrl"
-                    (onChange)="onChangeUrl($event)">
+                    (onChange)="onChangeUrl($event)"
+                    (blur)="onBlur($event)">
                 </cds-text>
             </div> 
 
@@ -90,8 +93,8 @@
                     class = "cds-attributes"
                     [openBlock]="openBlockAttributes"
                     [attributes]="buttonAttributes"
-                    (changeAttributes)="onChangeAttributes($event)"
-                ></cds-attributes>
+                    (changeAttributes)="onChangeAttributes($event)">
+                </cds-attributes>
             </div>
         </div>
 

diff --git a/...d/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.scss b/...d/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.scss
@@ -114,6 +114,14 @@
         margin: 0;
         color: $blu;
     }
+
+    .intent_display_name{
+        font-size: 12px;
+        font-weight: 300;
+        opacity: 0.8;
+    }
+
+
 }
 
 

diff --git a/...ard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.ts b/...ard/cds-canvas/cds-panel-button-configuration/cds-panel-button-configuration.component.ts
@@ -9,6 +9,7 @@ import { IntentService } from '../../../services/intent.service';
 import { ConnectorService } from '../../../services/connector.service';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { Intent } from 'src/app/models/intent-model';
 
 
 
@@ -22,6 +23,7 @@ export class CdsPanelButtonConfigurationComponent implements OnInit {
 
   @Input() isOpenPanel: boolean;
   @Input() button: Button;
+  @Input() elementIntentSelected: Intent;
   @Output() saveButton = new EventEmitter();
   // @Output() closeButtonPanel = new EventEmitter();
 
@@ -66,6 +68,7 @@ export class CdsPanelButtonConfigurationComponent implements OnInit {
 
   ngOnChanges() {
     this.initialize();
+    console.log('intenttttt', this.elementIntentSelected)
   }
 
 
@@ -251,6 +254,7 @@ export class CdsPanelButtonConfigurationComponent implements OnInit {
    * @param event 
    */
   public onBlur(event){
+    console.log('blurrrrrrrrr', event)
     this.checkAndSaveButton();
   }
 

diff --git a/...tudio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html b/...tudio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html
@@ -18,7 +18,7 @@
 
                     <div class="item-box" *ngIf="IS_OPEN">
                         <div>
-                            <p class="intent-display-name truncate">{{intent.intent_display_name}}</p>
+                            <p class="intent-display-name ellips">{{intent.intent_display_name}}</p>
                             <div class="icon-list">
                                 <p *ngIf="intent.questions" class="ai-icon icon" style="margin-bottom: 0px">Ai</p>
                                 <span *ngIf="intent.webhook_enabled" class="material-icons icon webhook-icon">webhook</span>
@@ -48,7 +48,7 @@
             <span class="material-icons">search</span>
         </div>
         <div class="input-box-search-input-wpr">
-            <input class="custom-input truncate" placeholder="search a block..."
+            <input class="custom-input ellips" placeholder="search a block..."
                 (input)="onLiveSearch($event.target.value);">
         </div>
     </div>
@@ -67,13 +67,12 @@
 
                 <div class="icon-container">
                     <img src="assets/images/icons/block.svg"
-                        [class.active-icon]="idSelectedIntent === intent.intent_id"
-                        class="base-icon-color">
+                        [class.active-icon]="idSelectedIntent === intent.intent_id">
                 </div>
 
                 <div class="item-box" *ngIf="IS_OPEN">
                     <div>
-                        <p class="intent-display-name">{{intent.intent_display_name}}</p>
+                        <p class="intent-display-name ellips">{{intent.intent_display_name}}</p>
                         <div class="icon-list">
                             <p *ngIf="intent.questions" class="ai-icon icon" style="margin-bottom: 0px">Ai</p>
                             <span *ngIf="intent.webhook_enabled" class="material-icons icon webhook-icon">webhook</span>