panel action detail : new ui

crazysnowboy · Oct 20, 2023 · b9126bb · b9126bb
1 parent 30e8b2d
commit b9126bb
Show file tree

Hide file tree

Showing 43 changed files with 631 additions and 1,941 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -25,7 +25,6 @@ import { UsersService } from './services/users.service';
 import { KnowledgeBaseService } from './services/knowledge-base.service';
 import { OpenaiService } from './services/openai.service';
 import { WhatsappService } from './services/whatsapp.service';
-import { UiModule } from './ui/shared/ui.module';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { BrandService } from './services/brand.service';
 import { MultichannelService } from './services/multichannel.service';
@@ -60,6 +59,7 @@ import { FirebaseInitService } from 'src/chat21-core/providers/firebase/firebase
 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';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {
@@ -117,8 +117,9 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     AppRoutingModule,
     HttpClientModule,
     // ChatbotDesignStudioModule,
-    UiModule,
     SatPopoverModule,
+    FormsModule,
+    ReactiveFormsModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,

diff --git a/src/app/chatbot-design-studio/cds-base-element/radio-button/radio-button.component.scss b/src/app/chatbot-design-studio/cds-base-element/radio-button/radio-button.component.scss
@@ -2,7 +2,8 @@
 
 
 :host{
-    --selectedColor: #{$icon-color};
+    --selectedColor: #{$blu};
+    --text-color : #{$blu-light-02};
 }
 
 mat-radio-group ::ng-deep{
@@ -11,6 +12,7 @@ mat-radio-group ::ng-deep{
 
     label{
         margin: 0px;
+        color: var(--text-color);
     }
 
     .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{

diff --git a/src/app/chatbot-design-studio/cds-base-element/select/select.component.scss b/src/app/chatbot-design-studio/cds-base-element/select/select.component.scss
@@ -76,6 +76,7 @@
     .ng-select .ng-select-container {
         height: 43px;
         border-radius: 8px;
+        border: 1px solid $blu-light-02;
         .ng-value {
             display: flex;
             align-items: center;

diff --git a/.../cds-dashboard/cds-canvas/actions/list/cds-action-askgpt/cds-action-askgpt.component.html b/.../cds-dashboard/cds-canvas/actions/list/cds-action-askgpt/cds-action-askgpt.component.html
@@ -31,7 +31,7 @@
     <div class="previewContent">
 
         <div class="icon-action">
-            <img src="assets/images/icons/if_condition.svg">
+            <img class="active-icon" src="assets/images/icons/if_condition.svg">
         </div>
 
         <label class="title-preview-label">Success</label>
@@ -54,10 +54,10 @@
 
 </div>
 
-<div *ngIf="!previewMode" class="content">
+<div *ngIf="!previewMode" class="content-panel-intent-detail no-footer">
 
 
-    <div class="textarea-editor-wrapper">
+    <div class="field-box">
         <label class="title-label">Prompt</label>
         <cds-textarea id="question" 
             [textLimitBtn]="false" 
@@ -71,10 +71,9 @@
         </cds-textarea>
     </div>
 
-    <div class="select-box">
+    <div class="field-box">
         <label class="title-label">Knowledge Base ID</label>
-        <cds-select 
-            id="text-condition" 
+        <cds-select id="text-condition" 
             [items]="kbs_list" 
             [itemSelected]="kb_selected_id" 
             [bindLabelSelect]="'name'"
@@ -83,104 +82,85 @@
         </cds-select>
     </div>
 
-    <a (click)="goToKNB()">Manage Knowledge Bases</a>
+    <a class="link" (click)="goToKNB()">Manage Knowledge Bases</a>
 
     <hr class="custom-divider">
 
-    <div class="text-editor-wrapper">
-        <div class="field-box">
-            <label class="title-label">GPT Reply</label>
-            <div class="value-wrp">
-                <cds-textarea id="assignTo" 
-                    [textLimitBtn]="false" 
-                    [emojiPikerBtn]="false" 
-                    [setAttributeBtn]="true"
-                    [minRow]="1" 
-                    [maxRow]="1" 
-                    [readonly]="true" 
-                    [text]="action.assignReplyTo"
-                    (selectedAttribute)="onSelectedAttribute($event, 'assignReplyTo')"
-                    (clearSelectedAttribute)="onSelectedAttribute($event, 'assignReplyTo')">
-                </cds-textarea>
-            </div>
-        </div>
+    <div class="field-box">
+        <label class="title-label">GPT Reply</label>
+        <cds-textarea id="assignTo" 
+            [textLimitBtn]="false" 
+            [emojiPikerBtn]="false" 
+            [setAttributeBtn]="true"
+            [minRow]="1" 
+            [maxRow]="1" 
+            [readonly]="true" 
+            [text]="action.assignReplyTo"
+            (selectedAttribute)="onSelectedAttribute($event, 'assignReplyTo')"
+            (clearSelectedAttribute)="onSelectedAttribute($event, 'assignReplyTo')">
+        </cds-textarea>
     </div>
 
-    <div class="text-editor-wrapper">
-        <div class="field-box">
-            <label class="title-label">GPT Source</label>
-            <div class="value-wrp">
-                <cds-textarea id="assignTo" 
-                    [textLimitBtn]="false"
-                    [emojiPikerBtn]="false" 
-                    [setAttributeBtn]="true"
-                    [minRow]="1" 
-                    [maxRow]="1" 
-                    [readonly]="true" 
-                    [text]="action.assignSourceTo"
-                    (selectedAttribute)="onSelectedAttribute($event, 'assignSourceTo')"
-                    (clearSelectedAttribute)="onSelectedAttribute($event, 'assignSourceTo')">
-                </cds-textarea>
-            </div>
-        </div>
+    <div class="field-box">
+        <label class="title-label">GPT Source</label>
+        <cds-textarea id="assignTo" 
+            [textLimitBtn]="false"
+            [emojiPikerBtn]="false" 
+            [setAttributeBtn]="true"
+            [minRow]="1" 
+            [maxRow]="1" 
+            [readonly]="true" 
+            [text]="action.assignSourceTo"
+            (selectedAttribute)="onSelectedAttribute($event, 'assignSourceTo')"
+            (clearSelectedAttribute)="onSelectedAttribute($event, 'assignSourceTo')">
+        </cds-textarea>
     </div>
 
     <hr class="custom-divider">
 
-    <div style="margin-bottom: 20px;">
-
+    <div class="field-box">
         <div class="condition-container">
             <div class="icon-action">
-                <img src="assets/images/icons/if_condition.svg">
+                <img class="active-icon" src="assets/images/icons/if_condition.svg">
             </div>
-            <span class="condition-text">Success</span>
-        </div>
-
-        <div class="select-box" id="intentSelect">
-            <cds-select 
-                id="text-condition" 
-                [items]="listOfIntents" 
-                [bindLabelSelect]="'name'"
-                [bindValueSelect]="'value'" 
-                [itemSelected]="action?.trueIntent" 
-                [placeholder]="'Select a block'"
-                [clearable]="true" 
-                (onSelected)="onChangeBlockSelect($event, 'trueIntent')"
-                (onReset)="onResetBlockSelect($event, 'trueIntent')">
-            </cds-select>
+            <label class="condition-text">Success</label>
         </div>
+        <cds-select id="text-condition" 
+            [items]="listOfIntents" 
+            [bindLabelSelect]="'name'"
+            [bindValueSelect]="'value'" 
+            [itemSelected]="action?.trueIntent" 
+            [placeholder]="'Select a block'"
+            [clearable]="true" 
+            (onSelected)="onChangeBlockSelect($event, 'trueIntent')"
+            (onReset)="onResetBlockSelect($event, 'trueIntent')">
+        </cds-select>
         <!-- <cds-attributes 
             class="cds-attributes" 
             [attributes]="trueIntentAttributes"
             (changeAttributes)="onChangeAttributes($event, 'trueIntent')">
         </cds-attributes> -->
-
     </div>
-    <div>
 
+    <div class="field-box">
         <div class="condition-container">
-            <span class="condition-text">Else</span>
-        </div>
-
-        <div class="select-box" id="intentSelect">
-            <cds-select 
-                id="text-condition" 
-                [items]="listOfIntents" 
-                [bindLabelSelect]="'name'"
-                [bindValueSelect]="'value'" 
-                [itemSelected]="action?.falseIntent" 
-                [placeholder]="'Select a block'"
-                [clearable]="true" 
-                (onSelected)="onChangeBlockSelect($event, 'falseIntent')"
-                (onReset)="onResetBlockSelect($event, 'falseIntent')">
-            </cds-select>
+            <label class="condition-text">Else</label>
         </div>
+        <cds-select id="text-condition" 
+            [items]="listOfIntents" 
+            [bindLabelSelect]="'name'"
+            [bindValueSelect]="'value'" 
+            [itemSelected]="action?.falseIntent" 
+            [placeholder]="'Select a block'"
+            [clearable]="true" 
+            (onSelected)="onChangeBlockSelect($event, 'falseIntent')"
+            (onReset)="onResetBlockSelect($event, 'falseIntent')">
+        </cds-select>
         <!-- <cds-attributes 
             class="cds-attributes" 
             [attributes]="action.falseIntentAttributes"
             (changeAttributes)="onChangeAttributes($event, 'falseIntent')">
         </cds-attributes> -->
-
     </div>
 
 </div>