From 3d18f48835c53e8e2cb6536e6057410948f6d5bc Mon Sep 17 00:00:00 2001 From: Gabriele Panico Date: Tue, 10 Oct 2023 16:38:40 +0200 Subject: [PATCH] UI changed: cds-header, cds-sidebar, cds-panel-intent-list, cds-panel-elements --- ...s-action-capture-user-reply.component.html | 6 +- .../attributes-dialog.component.html | 25 +++ .../attributes-dialog.component.scss | 177 ++++++++++++++++ .../attributes-dialog.component.spec.ts | 23 +++ .../attributes-dialog.component.ts | 77 +++++++ .../cds-action-gpt-task.component.html | 195 +++++++++--------- .../cds-action-whatsapp-static.component.ts | 23 ++- .../cds-canvas/cds-canvas.component.scss | 35 ++-- .../cds-panel-actions.component.html | 12 +- .../cds-panel-actions.component.scss | 89 ++++++-- .../cds-panel-elements.component.html | 10 +- .../cds-panel-elements.component.scss | 39 ++-- .../cds-panel-elements.component.ts | 4 +- .../cds-panel-intent-list.component.html | 34 ++- .../cds-panel-intent-list.component.scss | 106 ++++------ .../cds-panel-intent-list.component.ts | 2 +- .../cds-dashboard.component.scss | 3 +- .../cds-header/cds-header.component.scss | 7 +- src/app/services/whatsapp.service.ts | 2 +- src/assets/images/actions_category/flow.svg | 4 +- .../images/actions_category/integrations.svg | 19 +- .../images/actions_category/most_used.svg | 8 +- .../images/actions_category/special.svg | 5 +- src/assets/images/icons/block.svg | 3 + src/assets/images/icons/drag_indicator.svg | 3 + src/assets/images/icons/event.svg | 1 + src/assets/sass/cds/_variables.scss | 8 +- src/assets/sass/cds/styles.scss | 11 + 28 files changed, 636 insertions(+), 295 deletions(-) create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/attributes-dialog/attributes-dialog.component.html create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/attributes-dialog/attributes-dialog.component.scss create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/attributes-dialog/attributes-dialog.component.spec.ts create mode 100644 src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-gpt-task/attributes-dialog/attributes-dialog.component.ts create mode 100644 src/assets/images/icons/block.svg create mode 100644 src/assets/images/icons/drag_indicator.svg create mode 100644 src/assets/images/icons/event.svg 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 index 5c467d07..8bbb0491 100644 --- 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 @@ -22,8 +22,8 @@
-
- + -->
@@ -66,7 +66,7 @@ [emojiPikerBtn]="false" [setAttributeBtn]="true" [minRow]="2" - [maxRow]="6" + [maxRow]="10" [text]="action.question" [placeholder]="'Enter prompt'" (changeTextarea)="changeTextarea($event, 'question')"> @@ -77,7 +77,8 @@
-
-
-
-
- - -
- close -
- - -
- -
-
- Set all variables to get the preview -
-
- -
- - Generating answer... -
- -
- {{ ai_response.choices[0].message.content }} -
- -
- {{ ai_error }} -
-
- -
- Tokens usage - Prompt: {{ ai_response.usage.prompt_tokens }} - Answer: {{ ai_response.usage.completion_tokens }} - Total: {{ ai_response.usage.total_tokens }} -
-
- + Manage GPT Key
@@ -169,14 +126,16 @@
- +
1
-
512
@@ -192,15 +151,16 @@
- +
0
- + (change)="updateSliderValue($event.value, 'temperature')" aria-label="units">
1
@@ -216,15 +176,14 @@ id="context" [textLimitBtn]="false" [emojiPikerBtn]="false" - [setAttributeBtn]="false" - [minRow]="1" - [maxRow]="3" + [setAttributeBtn]="false" + [minRow]="1" [maxRow]="3" [text]="action.context" [placeholder]="'You are an awesome assistant'" (changeTextarea)="changeTextarea($event, 'context')">
- +
@@ -234,51 +193,81 @@
+ (click)="execPreview()"> + preview + Preview +
-
-
-
-
- -
- - +
+ +
+ + Generating answer... +
+ +
+ {{ ai_response.choices[0].message.content }} +
+ +
+ {{ ai_error }} +
+ +
+ +
+ Tokens usage + Prompt: {{ ai_response.usage.prompt_tokens }} + Answer: {{ ai_response.usage.completion_tokens }} + Total: {{ ai_response.usage.total_tokens }} +
+ + + +
+ Tokens usage + Prompt: {{ ai_response.usage.prompt_tokens }} + Answer: {{ ai_response.usage.completion_tokens }} + Total: {{ ai_response.usage.total_tokens }} +
--> +
+
\ No newline at end of file diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-whatsapp-static/cds-action-whatsapp-static.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-whatsapp-static/cds-action-whatsapp-static.component.ts index 7bedc056..377a94ee 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-whatsapp-static/cds-action-whatsapp-static.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/actions/list/cds-action-whatsapp-static/cds-action-whatsapp-static.component.ts @@ -35,17 +35,21 @@ export class CdsActionWhatsappStaticComponent implements OnInit { ) { } ngOnInit(): void { - // console.log("[ACTION WHATSAPP STATIC] action: ", this.action); - this.showLoader = true; - this.getTemplates(); + // this.logger.log("[ACTION WHATSAPP STATIC] action: ", this.action); + // this.getTemplates(); //this.initialize(); + if (this.previewMode == false) { + console.log("Whatsapp static project_id: ", this.project_id); + this.showLoader = true; + this.getTemplates(); + } } + getTemplates() { this.whatsapp.getAllTemplates().subscribe((templates: any[]) => { - this.templates_list = templates.map(t => { if (t.category === 'MARKETING') { t.icon = "campaign" @@ -71,11 +75,13 @@ export class CdsActionWhatsappStaticComponent implements OnInit { if(preview){ preview.style.display = 'block'; } + console.log("initializeeee") this.initialize(); }) } initialize() { + console.log("initializeeee 2: ", this.action.payload) if (this.action.payload) { this.logger.debug("[ACTION WHATSAPP STATIC] initialize with payload: ", this.action.payload); if (this.action.payload.phone_number_id) { @@ -85,8 +91,9 @@ export class CdsActionWhatsappStaticComponent implements OnInit { // if (this.action.payload.receiver_list) { // this.receiver_list = this.action.payload.receiver_list; // } - // console.log("[ACTION WHATSAPP STATIC] payload: ", this.action.payload); + // this.logger.log("[ACTION WHATSAPP STATIC] payload: ", this.action.payload); } else { + console.log("action payload non esiste: ", this.action.payload); this.logger.debug("[ACTION WHATSAPP STATIC] Payload empty --> create payload") this.action.payload = { id_project: this.project_id, @@ -98,7 +105,7 @@ export class CdsActionWhatsappStaticComponent implements OnInit { receiver_list: [] } this.updateJsonPreview(); - this.logger.debug("[ACTION WHATSAPP STATIC] payload: ", this.action.payload) + console.log("[ACTION WHATSAPP STATIC] payload: ", this.action.payload) } } @@ -130,11 +137,11 @@ export class CdsActionWhatsappStaticComponent implements OnInit { // } else { // // this.message.receiver_list.push(event); - // // console.log("payload.receiver_list (before) ", this.action.payload.receiver_list); + // // this.logger.log("payload.receiver_list (before) ", this.action.payload.receiver_list); // this.action.payload.receiver_list[index] = event; // // this.action.payload = this.message; // // this.logger.log("[ACTION WHATSAPP] Action updated ", this.action.payload); - // console.log("[ACTION WHATSAPP] Action updated ", this.action.payload); + // this.logger.log("[ACTION WHATSAPP] Action updated ", this.action.payload); // } } 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 index d1a18e34..55458ba6 100644 --- 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 @@ -100,17 +100,7 @@ cds-fulfillment { z-index: 1050; } -.toggle-setting-sidebar-icon { - background: #1e293b; - color: #fff; - border: 1px solid #394f5a !important; - border-radius: 50%; - width: 20px; - height: 20px; - cursor: pointer; - font-size: 18px; - display: block; -} + .box-left { @@ -182,20 +172,20 @@ cds-fulfillment { } .toggle-setting-sidebar-icon { - background: #1e293b; - color: #fff; - border: 1px solid #394f5a !important; - border-radius: 50%; - width: 20px; - height: 20px; - cursor: pointer; - font-size: 18px; - display: block; + 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: #1e293b; + color: $blu; } } @@ -287,7 +277,8 @@ cds-fulfillment { position: relative; display: block; background-size: 16px 16px; - background-image: radial-gradient(rgb(218, 226, 226) 1.14286px, rgb(244, 246, 246) 1.14286px); + background-image: radial-gradient(rgb(214 226 226 / 60%) 1.14286px, rgb(255 255 255) 1.14286px); + // background-image: radial-gradient(rgb(218, 226, 226) 1.14286px, rgb(244, 246, 246) 1.14286px); background-position: 593.4px -230.4px; } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-actions/cds-panel-actions.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-actions/cds-panel-actions.component.html index ec54c673..b3adeb1b 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-actions/cds-panel-actions.component.html +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-actions/cds-panel-actions.component.html @@ -35,7 +35,12 @@
-
{{item.value.name}}
+
{{item.value.name}}
+
+ +
@@ -57,6 +62,11 @@
{{item.value.name}}
+
+ +
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 7529d339..431b6e88 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 @@ -1,3 +1,11 @@ +@import "./src/assets/sass/cds/_variables.scss"; + + +$text-color: $gray; +$icon-color: $gray-light-01; +$text-hover-color: $blu; +$icon-hover-color: $blu; + #panel_actions_div{ padding: 0px; box-shadow: #1321440a 0 12px 24px, #1321440a 0 8px 12px, #13214405 0 4px 4px, #13214403 0 2px 2px, #13214403 0 1px 1px, #11316008 0 0, #1131600f 0 0 0 1px; @@ -31,27 +39,33 @@ border-radius: 6px; display: flex; align-items: center; + justify-content: space-between; + gap: 5px; &:hover{ - cursor: -webkit-grab; cursor: grab; - box-shadow: #1321440a 0 12px 24px, #1321440a 0 8px 12px, #13214405 0 4px 4px, #13214403 0 2px 2px, #13214403 0 1px 1px, #11316008 0 0, #1131600f 0 0 0 1px; - } -} -::ng-deep .cdk-drag-preview { - .actions-btns-wpr { - background-color: #ffffff; - // transform: rotate(-5deg)!important; + cursor: -webkit-grab; + cursor: grab; box-shadow: #1321440a 0 12px 24px, #1321440a 0 8px 12px, #13214405 0 4px 4px, #13214403 0 2px 2px, #13214403 0 1px 1px, #11316008 0 0, #1131600f 0 0 0 1px; - transform: rotate(-3deg); + + img{ + filter: brightness(0) saturate(100%) invert(35%) sepia(48%) saturate(441%) hue-rotate(183deg) brightness(97%) contrast(88%); + cursor: -webkit-grab; + cursor: grab; + } + + .action-btn-text{ + color: $text-hover-color + } } + } .action-btn-icon { display: inline-flex; - color: #394f5a; + color: $text-color; padding: 0; vertical-align: middle; - margin: 0 6px; + // margin: 0 6px; .btn-tdblu-no-boxshadow { margin: 0; padding: 0!important; @@ -66,18 +80,30 @@ } } -.action-btn img { + +.truncate { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 100% +} + +.action-btn img{ + filter: brightness(0) saturate(100%) invert(96%) sepia(0%) saturate(504%) hue-rotate(151deg) brightness(92%) contrast(88%); +} + +.action-btn img, +.drag-btn img{ width: 16px; - filter: brightness(0) saturate(100%) invert(28%) sepia(8%) saturate(1693%) hue-rotate(156deg) brightness(93%) contrast(87%); } .action-btn-text{ display: inline-flex; - color: #394f5a; + color: $text-color; padding: 0; vertical-align: middle; - font-size: 11px; - font-weight: 400; + font-size: 10px; + font-weight: 300; } @@ -94,11 +120,32 @@ /* ******************************** */ .cdk-drag-preview { - box-sizing: border-box; - border-radius: 4px; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12); + + // cursor: -webkit-grabbing; + // cursor: grabbing; + + .actions-btns-wpr{ + transform: rotate(-3deg); + background-color: white; + box-sizing: border-box; + border-radius: 6px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); + + // cursor: -webkit-grabbing; + // cursor: grabbing; + } + + img{ + filter: brightness(0) saturate(100%) invert(35%) sepia(48%) saturate(441%) hue-rotate(183deg) brightness(97%) contrast(88%); + } + + .action-btn-text { + color: $text-hover-color; + font-size: 10px; + font-weight: 300; + } } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.html index c2230d96..17d51911 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.html +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.html @@ -10,7 +10,7 @@
- + {{actionCategory.name}}
@@ -57,18 +57,14 @@
+ (mouseover)="onOpenMenu(divEvent, TYPE_OF_MENU.EVENT)" #divEvent>
- - - - + Event
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.scss index 098a4599..a52d9e8d 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.scss +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.scss @@ -1,5 +1,4 @@ -$bck_color_1: rgba(231, 238, 239, 0.8); -$bck_color_2: rgba(238, 244, 246, 0.85); +@import "./src/assets/sass/cds/_variables.scss"; .cds-panel-elements { position: absolute; @@ -8,12 +7,11 @@ $bck_color_2: rgba(238, 244, 246, 0.85); transform: translateX(12px); padding: 4px; border-radius: 10px; - background-color: $bck_color_1; z-index: 10; display: flex; flex-direction: column; - gap: 4px; + gap: 8px; } svg { overflow: hidden; @@ -27,6 +25,7 @@ svg { box-shadow: rgba(19, 33, 68, 0.01) 0px 1px 3px 1px, rgba(19, 33, 68, 0.12) 0px 5px 8px -8px, rgba(19, 33, 68, 0.12) 0px 2px 4px -3px, rgba(19, 33, 68, 0.03) 0px 0px 0px 1px; overflow: hidden; transition: height 0.15s ease 0s; + border: 2px solid $gray-02 } .cds-button-element { @@ -47,53 +46,43 @@ svg { justify-content: center; } -.cds-box-button:hover, .cds-box-button:focus { - background-color: $bck_color_1; +.cds-box-button:hover, +.cds-box-button:focus { + background-color: $gray-02; } .box-img { transition: opacity 0.15s ease 0s, background-color 0.15s ease 0s, color 0.15s ease 0s, transform 0.15s ease 0s; box-sizing: content-box; - width: 22px; - height: 22px; - color: currentcolor; + width: 24px; + height: 24px; background: transparent; - size:22px; -} - -.box-img > img { - display: block; - width: inherit; - height: inherit; - filter: brightness(0) saturate(100%) invert(28%) sepia(8%) saturate(1693%) hue-rotate(156deg) brightness(93%) contrast(87%); } .box-title { - padding-top: 3px; font-size: 9px; - font-weight: 600; + font-weight: 400; } - - #menuElement { min-width: 100px; max-width: 400px; width: 185px; - color: #132144; + color: $blu; font-size: 15px; line-height: 18px; list-style: none; overflow: hidden; padding: 0; // box-shadow: #1321440a 0 12px 24px, #1321440a 0 8px 12px, #13214405 0 4px 4px, #13214403 0 2px 2px, #13214403 0 1px 1px, #11316008 0 0, #1131600f 0 0 0 1px; - border-radius: 6px; + border-radius: 8px; background: rgb(255,255,255); will-change: transform; animation: .15s ease 0s 1 normal none running fadein, .15s ease 0s 1 normal none running movein, .1s ease 0s 1 normal none running scaleY; margin: 0; position: absolute; - top: 4px; - left: 80px; + top: 0px; + left: 85px; + border: 2px solid $gray-02; } \ No newline at end of file diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.ts index 55c182a8..506d0158 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-elements/cds-panel-elements.component.ts @@ -21,7 +21,7 @@ export class CdsPanelElementsComponent implements OnInit { @Output() hideActionPlaceholderOfActionPanel = new EventEmitter(); isOpen: boolean = false; isOverMenu: boolean = false; - positionMenu: any = {'x': 80, 'y': 0 }; + positionMenu: any = {'x': 85, 'y': 0 }; isDraggingMenuElement: boolean = false; menuType: string; menuCategory: string; @@ -59,7 +59,7 @@ export class CdsPanelElementsComponent implements OnInit { console.log('[CDS-PANEL-ELEMENTS] onMouseOverElement :::: ', y, this.isDraggingMenuElement); this.isOpen = true; if(this.isDraggingMenuElement == false){ - this.positionMenu = {'x': 80, 'y': y } + this.positionMenu = {'x': 85, 'y': y } } }, 0); } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html index 7bfa5931..b2646209 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.html @@ -45,35 +45,31 @@
-
-
- - - - -
-
- -
+
+ search +
+
+
-
-
-
-
+
+
+
+
-
- {{onGetIconForName(intent.intent_display_name)}} +
+
diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss index 54b1b359..65ae511e 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.scss @@ -23,41 +23,35 @@ $icon-color-active: $blu; } .search-box { - width: 100%; - display: flex; - justify-content: center; - - .input-box { - // border: 1px solid #5f6368; - width: 100%; - height: 30px; - border-radius: 20px; - } - - .input-box { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; - margin-bottom: 10px; - padding-left: 14px; - gap: 11px; + width: 100%; + margin-top: 25px; + padding-left: 10px; .custom-input { background-color: transparent; border-radius: 6px; border: none; - color: #d2cfcf; + color: $text-color; text-align: left; + + &::placeholder { + color: $text-color; + font-weight: 300; + opacity: 1; /* Firefox */ + } } - } -} -.input-box-search-icon-wpr { - position: relative; - top: 3px; + .input-box-search-input-wpr{ + width: 100%; + } } + + // .intents-list { // .topic-internal { @@ -140,9 +134,6 @@ $icon-color-active: $blu; } } -.disable-add-intent-btn { - pointer-events: none; -} .icon-container { width: 38px; @@ -152,16 +143,11 @@ $icon-color-active: $blu; color: $blu-light-02; } -.icon-list { - display: flex; - flex-direction: row; -} - .custom-divider { - background-color: #334754; - width: 80%; + background-color: white; + width: 90%; height: 1px; - box-shadow: 0px 0px 10px #334754; + box-shadow: 0px 0px 20px #334754c9; margin: 6px 0px 14px 0px; } @@ -176,7 +162,7 @@ $icon-color-active: $blu; transition: all 0.3s; align-items: flex-start; height: 20px; - // padding-left: 10px; + padding-left: 10px; .item-box { display: flex; @@ -185,7 +171,7 @@ $icon-color-active: $blu; justify-content: space-between; align-items: center; position: relative; - margin: 2px 0px; + // margin: 2px 0px; } // .item-box-default {} @@ -196,11 +182,10 @@ $icon-color-active: $blu; position: absolute; right: 0px; } - - + .intent-display-name { color: $text-color; - font-weight: 400; + font-weight: 300; margin-bottom: 0px; font-size: 14px; overflow: hidden; @@ -211,39 +196,25 @@ $icon-color-active: $blu; .icon-list { display: flex; flex-direction: row; + gap: 3px; - .ai-icon { - margin-bottom: 0px; - font-size: 12px; - margin-top: -5px; - margin-right: 3px; - } - - .webhook-icon { - font-size: 12px; - margin-right: 3px; - } - - .list-alt-icon { - font-size: 12px; - margin-right: 3px; - } - + .ai-icon, + .webhook-icon, + .list-alt-icon, .bolt-icon { font-size: 12px; - margin-right: -2px; - font-weight: 600; } .actions { display: flex; + align-items: center; } .action-counter { font-size: 10px; + line-height: 12px; padding: 0px; margin: 0px; - margin-top: -4px; } } } @@ -270,16 +241,23 @@ $icon-color-active: $blu; } .icon-container{ - color: $text-color-hover; + color: $text-color-hover !important; + + img{ + filter: brightness(0) saturate(100%) invert(78%) sepia(100%) saturate(1%) hue-rotate(122deg) brightness(107%) contrast(101%); + } } .intent-display-name { - // color: #333; - color: #fff; - font-weight: 400; - margin-bottom: 0px; - font-size: 14px; - // max-width: 150px; + color: $text-color-hover + } + + .ai-icon, + .webhook-icon, + .list-alt-icon, + .bolt-icon, + .action-counter{ + color: $gray-light-01; } } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.ts b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.ts index ff7b400a..6bbda629 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.ts +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-canvas/cds-panel-intent-list/cds-panel-intent-list.component.ts @@ -39,7 +39,7 @@ export class CdsPanelIntentListComponent implements OnInit, OnChanges { idSelectedIntent: string; - ICON_DEFAULT = 'label_important_outline'; + ICON_DEFAULT = 'package_2'; ICON_ROCKET = 'rocket_launch'; ICON_UNDO = 'undo'; diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss index e152238e..3f30f42c 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-dashboard.component.scss @@ -1,7 +1,6 @@ @import "./src/assets/sass/cds/_variables.scss"; @import "./src/assets/sass/cds/styles.scss"; - cds-header { height: $header-height; font-family: $mdb-font-family-poppins; @@ -22,7 +21,7 @@ cds-header { overflow-x: hidden; overflow-y: hidden; font-family: $mdb-font-family-poppins; - color: #394f5a; + color: $blu; font-size: 16px; } diff --git a/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.scss b/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.scss index fc69cb10..bcb62d1f 100644 --- a/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.scss +++ b/src/app/chatbot-design-studio/cds-dashboard/cds-header/cds-header.component.scss @@ -43,6 +43,10 @@ $margin-top-card: 30px; .header-go-back { cursor: pointer; position: relative; + + .cds-text{ + font-weight: 700; + } } .toggle-setting-sidebar-icon-wpr { position: absolute; @@ -104,7 +108,7 @@ $margin-top-card: 30px; background-color: #45c351; color: #fff; img { - margin-right: 6px; + width: 14px; vertical-align: text-top; filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2%) hue-rotate(182deg) brightness(111%) contrast(101%) } @@ -116,6 +120,7 @@ $margin-top-card: 30px; outline: 1px solid $blu-02; outline-offset: -1px; color: $blu-02; + border-radius: 50%; } #cds-publish-btn:hover, diff --git a/src/app/services/whatsapp.service.ts b/src/app/services/whatsapp.service.ts index 37134b12..5551d29e 100644 --- a/src/app/services/whatsapp.service.ts +++ b/src/app/services/whatsapp.service.ts @@ -40,7 +40,7 @@ export class WhatsappService { }) } - const url = this.WHATSAPP_API_URL + "/ext/templates/" + this.project_id; + const url = this.WHATSAPP_API_URL + "/api/templates/" + this.project_id; this.logger.log('[WHATSAPP.SERV] - GET *ALL* TEMPLATES - URL', url); return this.httpClient.get(url, httpOptions) diff --git a/src/assets/images/actions_category/flow.svg b/src/assets/images/actions_category/flow.svg index 350c433f..05644fce 100644 --- a/src/assets/images/actions_category/flow.svg +++ b/src/assets/images/actions_category/flow.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/src/assets/images/actions_category/integrations.svg b/src/assets/images/actions_category/integrations.svg index 294bacf7..6b112be6 100644 --- a/src/assets/images/actions_category/integrations.svg +++ b/src/assets/images/actions_category/integrations.svg @@ -1,4 +1,17 @@ - - - + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/actions_category/most_used.svg b/src/assets/images/actions_category/most_used.svg index b129bc73..cc12d916 100644 --- a/src/assets/images/actions_category/most_used.svg +++ b/src/assets/images/actions_category/most_used.svg @@ -1,6 +1,4 @@ - - - - - + + + \ No newline at end of file diff --git a/src/assets/images/actions_category/special.svg b/src/assets/images/actions_category/special.svg index b5ab629c..042ec022 100644 --- a/src/assets/images/actions_category/special.svg +++ b/src/assets/images/actions_category/special.svg @@ -1,4 +1,3 @@ - - - + + \ No newline at end of file diff --git a/src/assets/images/icons/block.svg b/src/assets/images/icons/block.svg new file mode 100644 index 00000000..09901125 --- /dev/null +++ b/src/assets/images/icons/block.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/images/icons/drag_indicator.svg b/src/assets/images/icons/drag_indicator.svg new file mode 100644 index 00000000..f0a75897 --- /dev/null +++ b/src/assets/images/icons/drag_indicator.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/images/icons/event.svg b/src/assets/images/icons/event.svg new file mode 100644 index 00000000..f8fe2f0e --- /dev/null +++ b/src/assets/images/icons/event.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/sass/cds/_variables.scss b/src/assets/sass/cds/_variables.scss index ba152228..44acedc9 100644 --- a/src/assets/sass/cds/_variables.scss +++ b/src/assets/sass/cds/_variables.scss @@ -148,10 +148,14 @@ $icon-bckgrnd-color: #e4e6eb; $mdb-font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif !default; $mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; -$blu: rgb(80, 100, 147); +$blu: #506493; $blu-02: rgb(91, 114, 167); $blu-light-01: rgb(244, 246, 251); -$blu-light-02: rgb(182, 194, 223); +$blu-light-02: #b6c2df; +$gray: rgb(112, 112, 112); +$gray-02: rgb(239,241,245); +$gray-light-01: rgb(214, 214, 214); + $header-height: 60px; $sidebar-base-width: 60px; diff --git a/src/assets/sass/cds/styles.scss b/src/assets/sass/cds/styles.scss index e9df07ab..6206b742 100644 --- a/src/assets/sass/cds/styles.scss +++ b/src/assets/sass/cds/styles.scss @@ -394,3 +394,14 @@ appdashboard-cds-dashboard a { color: $blu; font-weight: 600; } + +img.active-icon { + filter: brightness(0) saturate(100%) invert(39%) sepia(19%) saturate(1139%) hue-rotate(184deg) brightness(91%) contrast(85%); +} +img.base-icon-color{ + filter: brightness(0) saturate(100%) invert(83%) sepia(87%) saturate(3891%) hue-rotate(177deg) brightness(92%) contrast(89%); +} + +img.hover-icon{ + filter: brightness(0) saturate(100%) invert(35%) sepia(48%) saturate(441%) hue-rotate(183deg) brightness(97%) contrast(88%); +}