From 244a0d12992fe3bcdb4f36d08cdaa3ce83b005a0 Mon Sep 17 00:00:00 2001
From: meta-d <meta.digital.cloud@gmail.com>
Date: Fri, 2 Feb 2024 17:28:21 +0800
Subject: [PATCH] feat: model query lab copilot engine

---
 .../header/settings/settings.component.html   |   5 +-
 .../header/settings/settings.component.ts     |   4 +-
 .../src/app/features/features.component.html  |   1 +
 .../src/app/features/features.component.ts    | 111 ++++---
 .../query-lab/query/query.component.html      |   4 +-
 .../model/query-lab/query/query.component.ts  | 271 ++++++++++++------
 apps/cloud/src/assets/i18n/zh-Hans.json       |   1 +
 apps/cloud/src/styles/base.scss               |   5 +-
 .../angular/copilot/chat/chat.component.scss  |   1 +
 .../angular/copilot/chat/chat.component.ts    |  17 +-
 10 files changed, 257 insertions(+), 163 deletions(-)

diff --git a/apps/cloud/src/app/@theme/header/settings/settings.component.html b/apps/cloud/src/app/@theme/header/settings/settings.component.html
index 1c18270ae..8b5d0b022 100644
--- a/apps/cloud/src/app/@theme/header/settings/settings.component.html
+++ b/apps/cloud/src/app/@theme/header/settings/settings.component.html
@@ -21,7 +21,7 @@ <h3 class="mb-0 font-semibold">
       <mat-icon ngmSuffix>translate</mat-icon>
     </ngm-select>
 
-    <!-- not yet complete
+    @if (development) {
     <ngm-select [label]="'PAC.MENU.GENERAL.THEME' | translate: { Default: 'Theme' }"
       [placeholder]="'PAC.MENU.GENERAL.ThemePlaceholder' | translate: { Default: 'Select Theme' }"
       [displayBehaviour]="DisplayBehaviour.descriptionOnly"
@@ -47,7 +47,8 @@ <h3 class="mb-0 font-semibold">
       (ngModelChange)="onThemeSelect($event)"
     >
       <mat-icon ngmSuffix>dark_mode</mat-icon>
-    </ngm-select> -->
+    </ngm-select>
+    }
 
     <button mat-button (click)="onProfile()">
       <mat-icon>account_circle</mat-icon>
diff --git a/apps/cloud/src/app/@theme/header/settings/settings.component.ts b/apps/cloud/src/app/@theme/header/settings/settings.component.ts
index b97304043..8c515f2d3 100644
--- a/apps/cloud/src/app/@theme/header/settings/settings.component.ts
+++ b/apps/cloud/src/app/@theme/header/settings/settings.component.ts
@@ -14,6 +14,7 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { startWith } from 'rxjs'
 import { LANGUAGES, LanguagesMap, Store } from '../../../@core'
 import { UserPipe } from '../../../@shared'
+import { environment } from 'apps/cloud/src/environments/environment'
 
 @Component({
   standalone: true,
@@ -35,12 +36,13 @@ import { UserPipe } from '../../../@shared'
 export class HeaderSettingsComponent {
   languages = LANGUAGES
   DisplayBehaviour = DisplayBehaviour
+  development = !environment.production
 
   readonly store = inject(Store)
   readonly router = inject(Router)
   readonly #translate = inject(TranslateService)
 
-  // preferredTheme$ = this.store.preferredTheme$
+  readonly preferredTheme$ = this.store.preferredTheme$
 
   readonly user$ = toSignal(this.store.user$)
   readonly isAuthenticated$ = computed(() => Boolean(this.store.user))
diff --git a/apps/cloud/src/app/features/features.component.html b/apps/cloud/src/app/features/features.component.html
index 314d31762..5b188ad74 100644
--- a/apps/cloud/src/app/features/features.component.html
+++ b/apps/cloud/src/app/features/features.component.html
@@ -116,6 +116,7 @@
           thinkingAvatar="assets/images/copilot_sparkle_thinking.gif"
           assistantAvatar="assets/images/copilot_sparkle_resting.gif"
           [user]="user$()"
+          [copilotEngine]="copilotEngine"
           cdkDropList
           (cdkDropListDropped)="copilotChat.dropCopilot($event)"
           (enableCopilot)="toEnableCopilot()"
diff --git a/apps/cloud/src/app/features/features.component.ts b/apps/cloud/src/app/features/features.component.ts
index fbe12919a..47539937d 100644
--- a/apps/cloud/src/app/features/features.component.ts
+++ b/apps/cloud/src/app/features/features.component.ts
@@ -1,6 +1,17 @@
 import { Location } from '@angular/common'
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, OnInit, Renderer2, ViewChild, inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  OnInit,
+  Renderer2,
+  ViewChild,
+  inject
+} from '@angular/core'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
 import { MatDialog } from '@angular/material/dialog'
+import { MatDrawerMode, MatSidenav } from '@angular/material/sidenav'
 import {
   Event,
   NavigationCancel,
@@ -10,17 +21,20 @@ import {
   Router,
   RouterEvent
 } from '@angular/router'
-import { TranslateService } from '@ngx-translate/core'
 import { PacMenuItem } from '@metad/cloud/auth'
 import { UsersService } from '@metad/cloud/state'
 import { isNotEmpty, nonNullable } from '@metad/core'
+import { NgmCopilotChatComponent } from '@metad/ocap-angular/copilot'
+import { TranslateService } from '@ngx-translate/core'
 import { NGXLogger } from 'ngx-logger'
 import { NgxPermissionsService, NgxRolesService } from 'ngx-permissions'
+import { NgxPopperjsPlacements, NgxPopperjsTriggers } from 'ngx-popperjs'
 import { combineLatestWith, firstValueFrom } from 'rxjs'
 import { filter, map, startWith, tap } from 'rxjs/operators'
-import { NgxPopperjsPlacements, NgxPopperjsTriggers } from 'ngx-popperjs'
 import {
   AbilityActions,
+  AnalyticsFeatures,
+  AnalyticsFeatures as AnalyticsFeaturesEnum,
   AnalyticsPermissionsEnum,
   EmployeesService,
   FeatureEnum,
@@ -29,22 +43,16 @@ import {
   IUser,
   MenuCatalog,
   PermissionsEnum,
-  routeAnimations,
+  RolesEnum,
   SelectorService,
   Store,
-  AnalyticsFeatures as AnalyticsFeaturesEnum,
-  AnalyticsFeatures,
-  RolesEnum
+  routeAnimations
 } from '../@core'
+import { StoryCreationComponent } from '../@shared'
 import { AppService } from '../app.service'
-import { QueryCreationDialogComponent } from './semantic-model/query-creation.component'
 import { ModelCreationComponent } from './semantic-model/creation/creation.component'
-import { StoryCreationComponent } from '../@shared'
-import { MatDrawerMode, MatSidenav } from '@angular/material/sidenav'
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
-import { CdkDragDrop } from '@angular/cdk/drag-drop'
-import { NgmCopilotChatComponent } from '@metad/ocap-angular/copilot'
-
+import { QueryCreationDialogComponent } from './semantic-model/query-creation.component'
+import { CopilotEngine } from '@metad/copilot'
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -60,10 +68,11 @@ export class FeaturesComponent implements OnInit {
   AbilityActions = AbilityActions
 
   readonly #destroyRef = inject(DestroyRef)
-  
+
   @ViewChild('sidenav') sidenav: MatSidenav
   @ViewChild('copilotChat') copilotChat!: NgmCopilotChatComponent
 
+  copilotEngine: CopilotEngine
   sidenavMode = 'over' as MatDrawerMode
   isEmployee: boolean
   organization: IOrganization
@@ -97,10 +106,9 @@ export class FeaturesComponent implements OnInit {
     filter(nonNullable),
     combineLatestWith(this.translateService.stream('PAC.KEY_WORDS')),
     map(([navigation, i18n]) => {
-
       let catalogName: string
       let icon: string
-      switch(navigation.catalog) {
+      switch (navigation.catalog) {
         case MenuCatalog.Project:
           catalogName = i18n?.['Project'] ?? 'Project'
           icon = 'auto_stories'
@@ -160,10 +168,9 @@ export class FeaturesComponent implements OnInit {
       this.checkForEmployee()
       this.logger?.debug(value)
     })
-  
+
   readonly user$ = toSignal(this.store.user$)
-  
-  // private _sidebarContentIndexSub = this.appService.fullscreenIndex$.subscribe((fullscreenIndex) => this.zIndex = fullscreenIndex)
+
   constructor(
     public readonly appService: AppService,
     private readonly employeeService: EmployeesService,
@@ -249,7 +256,7 @@ export class FeaturesComponent implements OnInit {
   }
 
   refreshMenuItem(item, withOrganizationShortcuts) {
-    item.title = this.getTranslation('PAC.MENU.'+item.data.translationKey, {Default: item.data.translationKey})
+    item.title = this.getTranslation('PAC.MENU.' + item.data.translationKey, { Default: item.data.translationKey })
     if (item.data.permissionKeys || item.data.hide) {
       const anyPermission = item.data.permissionKeys
         ? item.data.permissionKeys.reduce((permission, key) => {
@@ -330,19 +337,15 @@ export class FeaturesComponent implements OnInit {
       // this.isCollapsedHidden = false
       if (event.url.match(/^\/project/g)) {
         this.appService.setCatalog({
-          catalog: MenuCatalog.Project,
+          catalog: MenuCatalog.Project
         })
-      }
-      else
-      if (event.url.match(/^\/project/g)) {
+      } else if (event.url.match(/^\/project/g)) {
         this.appService.setCatalog({
-          catalog: MenuCatalog.Stories,
+          catalog: MenuCatalog.Stories
         })
-      }
-      else if (event.url.match(/^\/story/g)) {
+      } else if (event.url.match(/^\/story/g)) {
         // this.isCollapsedHidden = true
-      }
-      else if (event.url.match(/^\/models/g)) {
+      } else if (event.url.match(/^\/models/g)) {
         // this.appService.setCatalog({
         //   catalog: MenuCatalog.Models,
         //   id: !event.url.match(/^\/models$/g)
@@ -354,11 +357,11 @@ export class FeaturesComponent implements OnInit {
         })
       } else if (event.url.match(/^\/indicator-app/g)) {
         this.appService.setCatalog({
-          catalog: MenuCatalog.IndicatorApp,
+          catalog: MenuCatalog.IndicatorApp
         })
         // this.isCollapsedHidden = true
       } else {
-        this.appService.setCatalog({catalog: null})
+        this.appService.setCatalog({ catalog: null })
       }
     }
 
@@ -380,7 +383,7 @@ export class FeaturesComponent implements OnInit {
   onMenuClicked(event, isMobile) {
     this.isCollapsed = true
     if (isMobile) {
-      this.isCollapsedHidden=true
+      this.isCollapsedHidden = true
     }
   }
 
@@ -407,7 +410,7 @@ export class FeaturesComponent implements OnInit {
             link: '/home',
             data: {
               translationKey: 'Today',
-              featureKey: FeatureEnum.FEATURE_DASHBOARD,
+              featureKey: FeatureEnum.FEATURE_DASHBOARD
             }
           },
           {
@@ -416,7 +419,7 @@ export class FeaturesComponent implements OnInit {
             link: '/home/catalog',
             data: {
               translationKey: 'Catalog',
-              featureKey: FeatureEnum.FEATURE_DASHBOARD,
+              featureKey: FeatureEnum.FEATURE_DASHBOARD
             }
           },
           {
@@ -425,7 +428,7 @@ export class FeaturesComponent implements OnInit {
             link: '/home/trending',
             data: {
               translationKey: 'Trending',
-              featureKey: FeatureEnum.FEATURE_DASHBOARD,
+              featureKey: FeatureEnum.FEATURE_DASHBOARD
             }
           },
           {
@@ -434,7 +437,7 @@ export class FeaturesComponent implements OnInit {
             link: '/home/insight',
             data: {
               translationKey: 'Insights',
-              featureKey: AnalyticsFeatures.FEATURE_INSIGHT,
+              featureKey: AnalyticsFeatures.FEATURE_INSIGHT
             }
           }
         ]
@@ -470,7 +473,7 @@ export class FeaturesComponent implements OnInit {
               translationKey: 'Story',
               featureKey: AnalyticsFeatures.FEATURE_STORY,
               permissionKeys: [AnalyticsPermissionsEnum.STORIES_VIEW]
-            },
+            }
           },
           {
             title: 'Indicators',
@@ -480,7 +483,7 @@ export class FeaturesComponent implements OnInit {
               translationKey: 'Indicators',
               featureKey: AnalyticsFeatures.FEATURE_STORY,
               permissionKeys: [AnalyticsPermissionsEnum.STORIES_VIEW]
-            },
+            }
           }
         ]
       },
@@ -501,7 +504,7 @@ export class FeaturesComponent implements OnInit {
         link: '/indicator-app',
         data: {
           translationKey: 'Indicator App',
-          featureKey: AnalyticsFeaturesEnum.FEATURE_INDICATOR,
+          featureKey: AnalyticsFeaturesEnum.FEATURE_INDICATOR
         }
       },
       // {
@@ -698,7 +701,7 @@ export class FeaturesComponent implements OnInit {
               translationKey: 'Tenant',
               permissionKeys: [RolesEnum.SUPER_ADMIN]
             }
-          },
+          }
         ]
       }
     ]
@@ -712,10 +715,13 @@ export class FeaturesComponent implements OnInit {
   }
 
   async createStory() {
-    const story = await firstValueFrom(this.dialog.open(StoryCreationComponent, {
-      data: {
-      }
-    }).afterClosed())
+    const story = await firstValueFrom(
+      this.dialog
+        .open(StoryCreationComponent, {
+          data: {}
+        })
+        .afterClosed()
+    )
 
     if (story) {
       this.router.navigate(['story', story.id, 'edit'])
@@ -723,7 +729,7 @@ export class FeaturesComponent implements OnInit {
   }
 
   async createModel() {
-    const model =await firstValueFrom(this.dialog.open(ModelCreationComponent, {data: {}}).afterClosed())
+    const model = await firstValueFrom(this.dialog.open(ModelCreationComponent, { data: {} }).afterClosed())
     if (model) {
       this.router.navigate(['models', model.id])
     }
@@ -736,17 +742,4 @@ export class FeaturesComponent implements OnInit {
   toEnableCopilot() {
     this.router.navigate(['settings', 'copilot'])
   }
-
-  /**
-   * Drop data on copilot chat:
-   * 1. table schema
-   * 2. table data
-   * 3. name of data
-   *
-   * @param event
-   */
-  async dropCopilot(event: CdkDragDrop<any[], any[], any>) {
-    const data = event.item.data
-    console.log(event)
-  }
 }
diff --git a/apps/cloud/src/app/features/semantic-model/model/query-lab/query/query.component.html b/apps/cloud/src/app/features/semantic-model/model/query-lab/query/query.component.html
index 80eba4b0f..80646c52a 100644
--- a/apps/cloud/src/app/features/semantic-model/model/query-lab/query/query.component.html
+++ b/apps/cloud/src/app/features/semantic-model/model/query-lab/query/query.component.html
@@ -276,7 +276,7 @@
 
 </mat-menu>
 
-<popper-content #ask class="z-[101]">
+<!-- <popper-content #ask class="z-[101]">
     <div class="flex flex-col bg-white p-2" displayDensity="compact">
         <ngm-input class="w-64" [placeholder]="'PAC.MODEL.QUERY.CopilotPlaceholder' | translate: {
                 Default: 'Ask a question or request, type CTRL + Enter to send'
@@ -290,4 +290,4 @@
             </button>
         </ngm-input>
     </div>
-</popper-content>
+</popper-content> -->
diff --git a/apps/cloud/src/app/features/semantic-model/model/query-lab/query/query.component.ts b/apps/cloud/src/app/features/semantic-model/model/query-lab/query/query.component.ts
index 829f05111..bcafb110f 100644
--- a/apps/cloud/src/app/features/semantic-model/model/query-lab/query/query.component.ts
+++ b/apps/cloud/src/app/features/semantic-model/model/query-lab/query/query.component.ts
@@ -3,17 +3,19 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   HostListener,
-  OnDestroy,
   ViewChild,
   computed,
+  effect,
   inject,
   signal
 } from '@angular/core'
-import { toSignal } from '@angular/core/rxjs-interop'
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'
 import { FormControl } from '@angular/forms'
 import { ActivatedRoute } from '@angular/router'
 import { BaseEditorDirective } from '@metad/components/editor'
+import { CopilotChatMessageRoleEnum, CopilotService } from '@metad/copilot'
 import { calcEntityTypePrompt, convertQueryResultColumns } from '@metad/core'
 import { NgmCopilotEngineService, injectCopilotCommand, injectMakeCopilotActionable } from '@metad/ocap-angular/copilot'
 import { effectAction } from '@metad/ocap-angular/core'
@@ -22,27 +24,19 @@ import { uniqBy } from '@metad/ocap-core'
 import { serializeName } from '@metad/ocap-sql'
 import { Store, ToastrService } from 'apps/cloud/src/app/@core'
 import { TranslationBaseComponent } from 'apps/cloud/src/app/@shared'
-import { isEqual, isPlainObject } from 'lodash-es'
-import { NgxPopperjsContentComponent, NgxPopperjsPlacements, NgxPopperjsTriggers } from 'ngx-popperjs'
+import { cloneDeep, isEqual, isPlainObject } from 'lodash-es'
+import { nanoid } from 'nanoid'
+import { NGXLogger } from 'ngx-logger'
+import { NgxPopperjsPlacements, NgxPopperjsTriggers } from 'ngx-popperjs'
 import { BehaviorSubject, EMPTY, Observable, combineLatest, firstValueFrom } from 'rxjs'
-import {
-  catchError,
-  delay,
-  distinctUntilChanged,
-  filter,
-  map,
-  shareReplay,
-  startWith,
-  switchMap,
-  tap
-} from 'rxjs/operators'
+import { catchError, distinctUntilChanged, filter, map, shareReplay, startWith, switchMap, tap } from 'rxjs/operators'
 import { ModelComponent } from '../../model.component'
 import { SemanticModelService } from '../../model.service'
 import { MODEL_TYPE, QueryResult } from '../../types'
-import { quoteLiteral, stringifyEntityType } from '../../utils'
+import { quoteLiteral } from '../../utils'
 import { QueryLabService } from '../query-lab.service'
-import { QueryCopilotEngineService } from './copilot.service'
 import { QueryService } from './query.service'
+import { FeaturesComponent } from '../../../../features.component'
 
 
 @Component({
@@ -50,36 +44,32 @@ import { QueryService } from './query.service'
   selector: 'pac-model-query',
   templateUrl: 'query.component.html',
   styleUrls: ['query.component.scss'],
-  providers: [
-    QueryService,
-    QueryCopilotEngineService,
-    { provide: NgmCopilotEngineService, useExisting: QueryCopilotEngineService }
-  ]
+  providers: [QueryService, NgmCopilotEngineService]
 })
-export class QueryComponent extends TranslationBaseComponent implements OnDestroy {
+export class QueryComponent extends TranslationBaseComponent {
   MODEL_TYPE = MODEL_TYPE
   NgxPopperjsTriggers = NgxPopperjsTriggers
   NgxPopperjsPlacements = NgxPopperjsPlacements
   EntityCapacity = EntityCapacity
 
-  private readonly copilotEngine = inject(QueryCopilotEngineService)
+  readonly #queryService = inject(QueryService)
   private readonly modelComponent = inject(ModelComponent)
   public readonly modelService = inject(SemanticModelService)
   public readonly queryLabService = inject(QueryLabService)
+  readonly copilotService = inject(CopilotService)
   private readonly _cdr = inject(ChangeDetectorRef)
   private readonly route = inject(ActivatedRoute)
   private readonly _toastrService = inject(ToastrService)
   private readonly store = inject(Store)
+  readonly #logger = inject(NGXLogger)
+  readonly featuresComponent = inject(FeaturesComponent)
+  readonly #copilotEngine = inject(NgmCopilotEngineService)
+  readonly #destroyRef = inject(DestroyRef)
 
   @ViewChild('editor') editor!: BaseEditorDirective
-  // @ViewChild('copilotChat') copilotChat!: NgmCopilotChatComponent
 
   themeName = toSignal(this.store.preferredTheme$.pipe(map((theme) => theme?.split('-')[0])))
 
-  // queryKey: string
-  // statement = ''
-  // public entities = []
-
   get dataSourceName() {
     return this.modelService.originalDataSource?.options.name
   }
@@ -108,11 +98,9 @@ export class QueryComponent extends TranslationBaseComponent implements OnDestro
   // private entityTypes: EntityType[]
   private get promptTables() {
     return this.entityTypes()?.map((entityType) => {
-      return `${ this.isMDX() ? 'Cube' : 'Table'} name: "${entityType.name}",
+      return `${this.isMDX() ? 'Cube' : 'Table'} name: "${entityType.name}",
 caption: "${entityType.caption}",
-${ this.isMDX() ? 'dimensions and measures' : 'columns'} : [${Object.keys(
-        entityType.properties
-      )
+${this.isMDX() ? 'dimensions and measures' : 'columns'} : [${Object.keys(entityType.properties)
         .map(
           (key) =>
             `${serializeName(key, entityType.dialect)} ${entityType.properties[key].dataType}` +
@@ -162,14 +150,7 @@ ${calcEntityTypePrompt(entityType)}
     this.onStatementChange(value)
   }
 
-  // public readonly entitySets$ = this.modelService.entities$
   public readonly tables$ = this.modelService.selectDBTables$
-  // 当前使用 MDX 查询
-  private readonly modelType = toSignal(this.modelService.modelType$)
-  public readonly isMDX = computed(() => this.modelType() === MODEL_TYPE.XMLA)
-  public readonly useSaveAsSQL = computed(() => this.modelType() === MODEL_TYPE.SQL)
-  public readonly isWasm = toSignal(this.modelService.isWasm$)
-
   public readonly conversations$ = this.query$.pipe(map((query) => query.conversations))
 
   // for results table
@@ -181,6 +162,11 @@ ${calcEntityTypePrompt(entityType)}
   | Signals
   |--------------------------------------------------------------------------
   */
+  // 当前使用 MDX 查询
+  readonly modelType = toSignal(this.modelService.modelType$)
+  readonly isMDX = computed(() => this.modelType() === MODEL_TYPE.XMLA)
+  readonly useSaveAsSQL = computed(() => this.modelType() === MODEL_TYPE.SQL)
+  readonly isWasm = toSignal(this.modelService.isWasm$)
   readonly entities = toSignal(this.query$.pipe(map((query) => query.entities ?? [])))
   readonly entityTypes = toSignal(
     this.query$.pipe(
@@ -192,14 +178,14 @@ ${calcEntityTypePrompt(entityType)}
   )
   readonly queryKey = toSignal(this.queryId$)
 
-  readonly dbTablesPrompt = computed(
-    () => this.isMDX()
+  readonly dbTablesPrompt = computed(() =>
+    this.isMDX()
       ? `The source dialect is ${this.entityTypes()[0]?.dialect}, the cubes information are ${this.#promptCubes?.join(
-        '\n'
-      )}`
-      : `The database dialect is ${this.entityTypes()[0]?.dialect}, the tables information are ${this.promptTables?.join(
-        '\n'
-      )}`
+          '\n'
+        )}`
+      : `The database dialect is ${
+          this.entityTypes()[0]?.dialect
+        }, the tables information are ${this.promptTables?.join('\n')}`
   )
   sqlEditorActionLabel = toSignal(
     this.translateService.stream('PAC.MODEL.QUERY.EditorActions', {
@@ -215,11 +201,10 @@ ${calcEntityTypePrompt(entityType)}
       id: `sql-editor-action-nl-sql`,
       label: computed(() => this.sqlEditorActionLabel().Nl2SQL),
       action: (text, options) => {
-        console.log(options)
         const statement = text || this.statement
         if (statement) {
           this.answering.set(true)
-          this.copilotEngine.nl2SQL(statement).subscribe((result) => {
+          this.nl2SQL(statement).subscribe((result) => {
             this.answering.set(false)
             const lines = this.statement.split('\n')
             const endLineNumber = text ? options.selection.endLineNumber : lines.length
@@ -236,7 +221,7 @@ ${calcEntityTypePrompt(entityType)}
         const statement = text || this.statement
         if (statement) {
           this.answering.set(true)
-          this.copilotEngine.explainSQL(statement).subscribe((result) => {
+          this.explainSQL(statement).subscribe((result) => {
             this.answering.set(false)
             const startLineNumber = text ? options.selection.startLineNumber : 1
             const lines = this.statement.split('\n')
@@ -253,7 +238,7 @@ ${calcEntityTypePrompt(entityType)}
         const statement = text || this.statement
         if (statement) {
           this.answering.set(true)
-          this.copilotEngine.optimizeSQL(statement).subscribe((result) => {
+          this.optimizeSQL(statement).subscribe((result) => {
             this.answering.set(false)
             this.statement = this.statement.replace(statement, result)
           })
@@ -280,33 +265,34 @@ ${calcEntityTypePrompt(entityType)}
   set dirty(value) {
     this.queryLabService.dirty[this.queryKey()] = value
   }
-  
+
   /**
   |--------------------------------------------------------------------------
   | Copilot
   |--------------------------------------------------------------------------
   */
-  #dimensionCommand = injectCopilotCommand({
+  #queryCommand = injectCopilotCommand({
     name: 'query',
     description: this.translateService.instant('PAC.MODEL.Copilot.Examples.QueryDBDesc', {
       Default: 'Describe the data you want to query'
     }),
-    systemPrompt: () => this.isMDX()
-      ? `Assuming you are an expert in MDX programming, provide a prompt if the system does not offer information on the cubes.
+    systemPrompt: () =>
+      this.isMDX()
+        ? `Assuming you are an expert in MDX programming, provide a prompt if the system does not offer information on the cubes.
 The cube information is:
 \`\`\`
 ${this.dbTablesPrompt()}
 \`\`\`
 Please provide the corresponding MDX statement for the given question.
 `
-      : `Assuming you are an expert in SQL programming, provide a prompt if the system does not offer information on the database tables.
+        : `Assuming you are an expert in SQL programming, provide a prompt if the system does not offer information on the database tables.
 The table information is:
 \`\`\`
 ${this.dbTablesPrompt()}
 \`\`\`
 Please provide the corresponding SQL statement for the given question.
 Note: Table fields are case-sensitive and should be enclosed in double quotation marks.`,
-      // `假设你是数据库 SQL 编程专家, 如果 system 未提供 database tables information 请给出提示, ${this.dbTablesPrompt()}, 请给出问题对应的 sql 语句 (注意：表字段区分大小写，需要用双引号括起来)。 `
+    // `假设你是数据库 SQL 编程专家, 如果 system 未提供 database tables information 请给出提示, ${this.dbTablesPrompt()}, 请给出问题对应的 sql 语句 (注意：表字段区分大小写，需要用双引号括起来)。 `
     actions: [
       injectMakeCopilotActionable({
         name: 'query-db',
@@ -314,12 +300,12 @@ Note: Table fields are case-sensitive and should be enclosed in double quotation
         argumentAnnotations: [
           {
             name: 'query',
-            type: "string",
+            type: 'string',
             description: `query extracting info to answer the user's question.
 statement should be written using this database schema.
 The query should be returned in plain text, not in JSON.
 `,
-            required: true,
+            required: true
           }
         ],
         implementation: async (query: string) => {
@@ -334,19 +320,73 @@ The query should be returned in plain text, not in JSON.
     ]
   })
 
+  #fixCommand = injectCopilotCommand({
+    name: 'fix',
+    description: this.translateService.instant('PAC.MODEL.Copilot.Examples.FixQueryDesc', {
+      Default: 'Describe how to fix the statement'
+    }),
+    systemPrompt: () => {
+      return `Fix the statement of db query:
+\`\`\`
+${this.selectedStatement}
+\`\`\`
+`
+    },
+    actions: [
+      injectMakeCopilotActionable({
+        name: 'fix_query',
+        description: 'Fix the statement of db query',
+        argumentAnnotations: [
+          {
+            name: 'statement',
+            type: 'string',
+            description: `
+statement should be written using this database schema.
+The query should be returned in plain text, not in JSON.
+`,
+            required: true
+          }
+        ],
+        implementation: async (statement: string) => {
+          this.#logger.debug(`Copilot_Action:fix_query('${statement}')`)
+          this.statement = this.statement.replace(this.selectedStatement, statement)
+          // Return to message content
+          return statement
+        }
+      })
+    ]
+  })
+
   /**
   |--------------------------------------------------------------------------
   | Subscribers
   |--------------------------------------------------------------------------
   */
-  private dirtySub = this.queryState$.subscribe((state) => {
+  private dirtySub = this.queryState$.pipe(takeUntilDestroyed()).subscribe((state) => {
     this.dirty = !isEqual(state.origin, state.query)
   })
+  #conversationSub = this.#queryService
+    .select((state) => state.query?.conversations ?? []).pipe(takeUntilDestroyed())
+    .subscribe((conversations) => {
+      this.#copilotEngine.conversations$.set(cloneDeep(conversations))
+    })
 
   constructor() {
     super()
-    // 设置当前 Chat Copilot Engine
-    // this.modelComponent.copilotEngine = this.copilotEngine
+
+    effect(() => {
+      if (this.#queryService.initialized()) {
+        if (!isEqual(this.#queryService.conversations(), this.#copilotEngine.conversations())) {
+          this.#queryService.setConversations(this.#copilotEngine.conversations())
+        }
+      }
+    }, {allowSignalWrites: true})
+    
+    // Set individual engine to global copilot chat
+    this.featuresComponent.copilotEngine = this.#copilotEngine
+    this.#destroyRef.onDestroy(() => {
+      this.featuresComponent.copilotEngine = null
+    })
   }
 
   onSelectionChange(event) {
@@ -641,35 +681,35 @@ The query should be returned in plain text, not in JSON.
   //   }
   // }
 
-  askCopilot(prompt: string, askPopper: NgxPopperjsContentComponent) {
-    this.prompt.setValue(null)
-    this.answering.set(true)
-    askPopper.hide()
-    this.copilotEngine
-      .ask(prompt)
-      .pipe(
-        tap(() => this.answering.set(false)),
-        delay(200) // 等待 Editor 从 read-only 切换到 editable 状态
-      )
-      .subscribe({
-        next: (result) => {
-          const selection = this.editor.editor.getSelection()
-          this.editor.insert(result, {
-            column: selection.endColumn,
-            lineNumber: selection.endLineNumber
-          })
-        },
-        error: () => {
-          this.answering.set(false)
-        }
-      })
-  }
+  // askCopilot(prompt: string, askPopper: NgxPopperjsContentComponent) {
+  //   this.prompt.setValue(null)
+  //   this.answering.set(true)
+  //   askPopper.hide()
+  //   this.copilotEngine
+  //     .ask(prompt)
+  //     .pipe(
+  //       tap(() => this.answering.set(false)),
+  //       delay(200) // 等待 Editor 从 read-only 切换到 editable 状态
+  //     )
+  //     .subscribe({
+  //       next: (result) => {
+  //         const selection = this.editor.editor.getSelection()
+  //         this.editor.insert(result, {
+  //           column: selection.endColumn,
+  //           lineNumber: selection.endLineNumber
+  //         })
+  //       },
+  //       error: () => {
+  //         this.answering.set(false)
+  //       }
+  //     })
+  // }
 
-  triggerAsk(event, askPopper: NgxPopperjsContentComponent) {
-    if (event.ctrlKey && event.key === 'Enter') {
-      this.askCopilot(this.prompt.value, askPopper)
-    }
-  }
+  // triggerAsk(event, askPopper: NgxPopperjsContentComponent) {
+  //   if (event.ctrlKey && event.key === 'Enter') {
+  //     this.askCopilot(this.prompt.value, askPopper)
+  //   }
+  // }
 
   onCopilotCopy(text: string) {
     this.editor.appendText(text)
@@ -728,8 +768,55 @@ The query should be returned in plain text, not in JSON.
     }
   }
 
-  ngOnDestroy(): void {
-    // this.modelComponent.copilotEngine = null
+  nl2SQL(sql: string): Observable<string> {
+    return this.copilotService
+      .chatCompletions([
+        {
+          id: nanoid(),
+          role: CopilotChatMessageRoleEnum.System,
+          content: `假如你是一个数据库管理员，已知数据库信息有：\n${this.dbTablesPrompt()}`
+        },
+        {
+          id: nanoid(),
+          role: CopilotChatMessageRoleEnum.User,
+          content: `请根据给定的表信息和要求给出相应的SQL语句(仅输出 sql 语句)， 要求：\n${sql}，答案：`
+        }
+      ])
+      .pipe(map(({ choices }) => choices[0]?.message?.content))
+  }
+
+  explainSQL(sql: string): Observable<string> {
+    return this.copilotService
+      .chatCompletions([
+        {
+          id: nanoid(),
+          role: CopilotChatMessageRoleEnum.System,
+          content: `假如你是一个数据库管理员，已知数据库信息有：\n${this.dbTablesPrompt()}`
+        },
+        {
+          id: nanoid(),
+          role: CopilotChatMessageRoleEnum.User,
+          content: `请根据给定的表信息解释一下这个SQL语句：\n${sql}`
+        }
+      ])
+      .pipe(map(({ choices }) => choices[0]?.message?.content))
+  }
+
+  optimizeSQL(sql: string): Observable<string> {
+    return this.copilotService
+      .chatCompletions([
+        {
+          id: nanoid(),
+          role: CopilotChatMessageRoleEnum.System,
+          content: `假如你是一个数据库管理员，已知数据库信息有：\n${this.dbTablesPrompt()}`
+        },
+        {
+          id: nanoid(),
+          role: CopilotChatMessageRoleEnum.User,
+          content: `请根据给定的表信息优化一下这个SQL语句(仅输出 sql 语句)：\n${sql}`
+        }
+      ])
+      .pipe(map(({ choices }) => choices[0]?.message?.content))
   }
 }
 
diff --git a/apps/cloud/src/assets/i18n/zh-Hans.json b/apps/cloud/src/assets/i18n/zh-Hans.json
index 243a17431..9aa462ed5 100644
--- a/apps/cloud/src/assets/i18n/zh-Hans.json
+++ b/apps/cloud/src/assets/i18n/zh-Hans.json
@@ -932,6 +932,7 @@
           "CreateCubeByTableInfo": "根据表信息创建立方体 Cube",
           "CreateDimensionByTableInfo": "根据表信息创建维度 Dimension",
           "QueryDBDesc": "请描述想要查询的数据",
+          "FixQueryDesc": "请描述如何修复此语句",
           "create dimension by table": "根据表字段创建维度",
           "create cube by table": "根据表字段创建多维数据集",
           "create calcuated measure": "创建计算度量",
diff --git a/apps/cloud/src/styles/base.scss b/apps/cloud/src/styles/base.scss
index edcb48ec4..84fae6920 100644
--- a/apps/cloud/src/styles/base.scss
+++ b/apps/cloud/src/styles/base.scss
@@ -2,18 +2,21 @@
   --ngm-copilot-font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
 }
 
-:root .default {
+:root .default, :root .light {
   --ngm-app-background-color: white;
   --ngm-color-main-container-background: white;
   --ngm-color-on-surface: #1f1f1f;
   --ngm-color-on-surface-variant: #444746;
+  --ngm-divider-color-secondary: theme('colors.neutral.100');
 }
 
 :root .dark {
   --ngm-app-background-color: #1e1f20;
   --ngm-color-main-container-background: #1e1f20;
+  --ngm-copilot-bg-color: #1e1f20;
   --ngm-color-on-surface: #e3e3e3;
   --ngm-color-on-surface-variant: #444746;
+  --ngm-divider-color-secondary: theme('colors.neutral.900');
 }
 
 .mat-drawer-container {
diff --git a/packages/angular/copilot/chat/chat.component.scss b/packages/angular/copilot/chat/chat.component.scss
index c590dbde5..9037a02e7 100644
--- a/packages/angular/copilot/chat/chat.component.scss
+++ b/packages/angular/copilot/chat/chat.component.scss
@@ -1,6 +1,7 @@
 :host {
   background-color: var(--ngm-copilot-bg-color, theme('colors.white'));
   font-family: var(--ngm-copilot-font-family);
+  --mat-divider-color: var(--ngm-divider-color-secondary);
   @apply flex flex-col relative text-sm ;
 }
 
diff --git a/packages/angular/copilot/chat/chat.component.ts b/packages/angular/copilot/chat/chat.component.ts
index 797931d9f..23b45015f 100644
--- a/packages/angular/copilot/chat/chat.component.ts
+++ b/packages/angular/copilot/chat/chat.component.ts
@@ -97,8 +97,10 @@ export class NgmCopilotChatComponent {
   private translateService = inject(TranslateService)
   private _cdr = inject(ChangeDetectorRef)
   private copilotService = inject(CopilotService)
-  #copilotEngine?: CopilotEngine = inject(NgmCopilotEngineService, { optional: true })
-  #customEngine?: CopilotEngine = null
+  readonly #copilotEngine?: CopilotEngine = inject(NgmCopilotEngineService, { optional: true })
+  // #customEngine?: CopilotEngine = null
+
+  readonly copilotEngine$ = signal<CopilotEngine>(this.#copilotEngine)
 
   readonly #clipboard: Clipboard = inject(Clipboard)
 
@@ -109,10 +111,10 @@ export class NgmCopilotChatComponent {
   @Input() assistantAvatar: string
 
   @Input() get copilotEngine(): CopilotEngine {
-    return this.#customEngine ?? this.#copilotEngine
+    return this.copilotEngine$()
   }
   set copilotEngine(value) {
-    this.#customEngine = value
+    this.copilotEngine$.set(value ?? this.#copilotEngine)
   }
 
   @Input() user: IUser
@@ -187,7 +189,7 @@ export class NgmCopilotChatComponent {
   |--------------------------------------------------------------------------
   */
   readonly showTokenizer$ = toSignal(this.copilotService.copilot$.pipe(map((copilot) => copilot?.showTokenizer)))
-  readonly conversations = computed<Array<NgmCopilotChatMessage[]>>(() => this.copilotEngine.conversations())
+  readonly conversations = computed<Array<NgmCopilotChatMessage[]>>(() => this.copilotEngine?.conversations())
 
   /**
    * 当前 Asking prompt
@@ -304,6 +306,9 @@ export class NgmCopilotChatComponent {
       },
       { allowSignalWrites: true }
     )
+    effect(() => {
+      console.log(this.copilotEngine.conversations())
+    })
   }
 
   refreshModels() {
@@ -334,7 +339,7 @@ export class NgmCopilotChatComponent {
     if (this.copilotEngine) {
       try {
         this.#abortController = new AbortController()
-        const message = await this.#copilotEngine.chat(prompt, {
+        const message = await this.copilotEngine$().chat(prompt, {
           command,
           newConversation,
           abortController: this.#abortController,