QQL AI generation improvements added (front-end)

Author: Olga Davydova

web/frontend/src/app/pages/generate-ddl/generate-ddl.component.html

@@ -1,39 +1,5 @@
 <div class="page-block">
-  <div class="toggle-button-container">
-    <label for="toggle-button" class="toggle-button-label" [class.active]="!ddlIsUsing">QQL</label>
-    <input type="checkbox" [checked]="ddlIsUsing" id="toggle-button" class="toggle-button" (click)="toggleDDL()">
-    <label for="toggle-button" class="toggle-button-label" [class.active]="ddlIsUsing">DDL</label>
-  </div>
-  <form *ngIf="ddlIsUsing">
-    <label>Describe desired stream content</label>
-    <textarea [formControl]="inputDDL"></textarea>
-    <button (click)="generate()" [disabled]="isLoading || !inputDDL.value"
-      class="btn btn-primary">
-      <span>{{ isLoading ? 'Generating...' : 'Generate DDL' }} </span>
-    </button>
-    <div class="output-and-error">
-      <div class="error-or-warning"
-        [class.visible]="(responceCame && ddlErrorMessage) || resultDDLNotValid">
-        <div *ngIf="responceCame && ddlErrorMessage" class="error-message">
-          Error: {{ ddlErrorMessage }}
-        </div>
-        <div class="warning-message" *ngIf="resultDDLNotValid && !ddlErrorMessage">
-          {{ warningMessage }}
-        </div>
-      </div>
-      <textarea readonly [value]="resultDDL" class="output"></textarea>
-    </div>
-    <div class="preloader" [ngStyle]="{'visibility': isLoading ? 'visible' : 'hidden' }">
-      <div class="lds-dual-ring" [class.loader-visible]="isLoading"></div>
-    </div>
-    <button (click)="openQueryEditor(true)" class="btn btn-primary"
-      [disabled]="!resultDDL || (responceCame && ddlErrorMessage)">
-      <ng-container *ngTemplateOutlet="shareIcon"></ng-container>
-      <span class="open-query-editor-button-text">Open query editor</span>
-    </button>
-  </form>
-
-  <form *ngIf="!ddlIsUsing" [formGroup]="form">
+  <form [formGroup]="form">
     <div class="stream-input-container">
       <label class="select-stream-label">Select stream(s)</label>
       <ng-multiselect-dropdown
@@ -46,28 +12,36 @@
       </ng-multiselect-dropdown>
     </div>
     <label class="qql-query-label">Describe desired query or goal</label>
-    <textarea [formControl]="inputQQL" class="qql-input"></textarea>
-    <button (click)="generate()" [disabled]="isLoading || !inputQQL.value || !selectedStreamList.value.length"
+    <textarea [formControl]="inputQuery" class="qql-input"></textarea>
+    <button *ngIf="!isLoading" (click)="generate()" [disabled]="isLoading || !inputQuery.value"
       class="btn btn-primary">
-      <span>{{ isLoading ? 'Generating...' : 'Generate QQL' }} </span>
+      <span>Generate</span>
     </button>
+    <button *ngIf="isLoading" (click)="stopGeneration()" [disabled]="!isLoading"
+      class="btn btn-primary">
+      <span>Stop Response Generation</span>
+    </button>
+
     <div class="output-and-error">
       <div class="error-or-warning"
-        [class.visible]="(responceCame && qqlErrorMessage) || resultQQLNotValid">
+        [class.visible]="(responceCame && qqlErrorMessage)">
         <div *ngIf="responceCame && qqlErrorMessage" class="error-message">
           Error: {{ qqlErrorMessage }}
         </div>
-        <div class="warning-message" *ngIf="resultQQLNotValid && !qqlErrorMessage">
+        <div class="warning-message" *ngIf="!qqlErrorMessage">
           {{ warningMessage }}
         </div>
       </div>
-      <textarea readonly [value]="resultQQL" class="output"></textarea>
-    </div>
-    <div class="preloader" [ngStyle]="{'visibility': isLoading ? 'visible' : 'hidden' }">
-      <div class="lds-dual-ring" [class.loader-visible]="isLoading"></div>
+      <div class="output" [class.unfinished]="isLoading" [class.error]="qqlErrorMessage">
+        <span *ngIf="isLoading" class="loading-dots"></span> 
+        <ng-container *ngIf="resultStatus">
+          <span>{{ resultStatus }}</span><br>
+        </ng-container>
+        <span>{{ resultQuery }}</span>
+      </div>
     </div>
     <button (click)="openQueryEditor()" class="btn btn-primary"
-      [disabled]="!resultQQL || (responceCame && qqlErrorMessage)">
+      [disabled]="!resultQuery || (responceCame && qqlErrorMessage)">
       <ng-container *ngTemplateOutlet="shareIcon"></ng-container>
       <span class="open-query-editor-button-text">Open query editor</span>
     </button>
@@ -95,4 +69,4 @@
         transform="translate(0,1036.3622)"/>
     </g>
   </svg>
-</ng-template>
+</ng-template>

web/frontend/src/app/pages/generate-ddl/generate-ddl.component.scss

@@ -1,4 +1,4 @@
-@import '~src/app/core/styles/variables';
+@import 'src/app/core/styles/_variables';
 
 textarea {
   display: block;
@@ -17,6 +17,13 @@ textarea {
   @extend textarea;
   margin: 0rem;
   height: 22vh;
+  overflow: auto;
+  &.unfinished {
+    color: rgba(245, 245, 245, 0.7);
+  }
+  &.error {
+    color: #c33f67ed;
+  }
 }
 
 .output-and-error {
@@ -33,7 +40,7 @@ button {
   padding: 0.3rem 0.6rem;
   text-transform: uppercase;
   margin: 1rem auto;
-  width: 13rem;
+  width: 17rem;
 }
 
 .loader {
@@ -113,7 +120,7 @@ form {
 }
 
 .error-or-warning {
-  height: 3.5rem;
+  height: 2.5rem;
   overflow: hidden;
   visibility: hidden;
   margin-bottom: 0.3rem;
@@ -124,7 +131,6 @@ form {
   padding: 0.5rem 1rem;
   border-radius: 0.3rem;
   text-overflow: ellipsis;
-  height: 100%;
 }
 
 .warning-message {
@@ -223,4 +229,28 @@ ng-multiselect-dropdown {
 
 .open-query-editor-button-text {
   margin-left: 0.7rem;
-}
+}
+
+.loading-dots:after {
+  content: ' .';
+  display: inline-block;
+  width: 1.9rem;
+  font-weight: 800;
+  color: rgba(245, 245, 245, 0.7);
+  animation: dots 1s steps(5, end) infinite;
+}
+
+@keyframes dots {
+  0%, 20% {
+    content: ' .';
+  }
+  40% {
+    content: ' . .';
+  }
+  60% {
+    content: ' . . .';
+  }
+  80%, 100% {
+    content: ' . . .';
+  }
+}