feat: Add an embedded form to ChatAI

Author: O-Jiangweidong

src/app/elements/chat/chat.component.html

@@ -3,7 +3,7 @@
     @if(isShowSetting && subViews.length === 1) {
       <nz-float-button (click)="handleShowDrawer()" [nzIcon]="setting"></nz-float-button>
     }
-    <nz-float-button (click)="showChatAI()" [nzIcon]="customer"> </nz-float-button>
+    <nz-float-button (click)="showChatAI()" [hidden]="!chatAiApiEnabled" [nzIcon]="customer"> </nz-float-button>
   </nz-float-button-group>
   <ng-template #setting>
     <nz-icon nzTheme="outline" nzType="setting" />
@@ -12,7 +12,7 @@
     <img alt="" class="chat-img" src="assets/icons/chat-ai.png" />
   </ng-template>
 
-  <div *ngIf="chatAiEnabled" [style.display]="chatAIShown ? 'block' : 'none'" class="drawer-panel">
+  <div *ngIf="chatAiApiEnabled" [style.display]="chatAIShown ? 'block' : 'none'" class="drawer-panel">
     <div class="content">
       <iframe
         #contentWindow

src/app/elements/chat/chat.component.ts

@@ -75,8 +75,9 @@ export class ElementChatComponent implements OnInit, OnDestroy, AfterViewInit {
     return this.currentView.hasOwnProperty('subViews') ? this.currentView.subViews : [];
   }
 
-  get chatAiEnabled() {
-    return this._settingSvc.globalSetting.CHAT_AI_ENABLED;
+  get chatAiApiEnabled() {
+    const setting = this._settingSvc.globalSetting
+    return setting.CHAT_AI_ENABLED && setting.CHAT_AI_METHOD === 'api';
   }
 
   @HostListener('mousedown', ['$event'])
@@ -124,6 +125,38 @@ export class ElementChatComponent implements OnInit, OnDestroy, AfterViewInit {
     this.viewSrv.currentView$.subscribe((state: View) => {
       this.currentView = state;
     });
+
+    this._settingSvc.globalSetting$.subscribe(setting => {
+      if (!setting.CHAT_AI_ENABLED) {
+        return
+      }
+
+      if (setting.CHAT_AI_METHOD === 'embed') {
+        this.insertEmbedScript()
+      } else if (setting.CHAT_AI_METHOD === 'api') {
+        this.listenChatAI()
+      }
+    })
+  }
+
+  private insertEmbedScript(): void {
+    const embedScriptId = 'chat-ai-embed-id';
+    if (document.getElementById(embedScriptId)) {
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.id = embedScriptId
+    script.src = this._settingSvc.globalSetting.CHAT_AI_EMBED_URL;
+    script.async = true;
+    script.onload = () => {
+      const loadEvent = new Event('load', { bubbles: false, cancelable: false });
+      window.dispatchEvent(loadEvent);
+    };
+    document.body.appendChild(script);
+  }
+
+  private listenChatAI(): void {
     this.iframeURL = '/ui/#/chat/chat-ai?from=luna';
 
     window.addEventListener('message', event => {

src/app/model.ts

@@ -276,6 +276,8 @@ export class GlobalSetting {
   TERMINAL_GRAPHICAL_RESOLUTION: string;
   CONNECTION_TOKEN_REUSABLE: boolean;
   CHAT_AI_ENABLED: boolean;
+  CHAT_AI_METHOD: string;
+  CHAT_AI_EMBED_URL: string;
   VIEW_ASSET_ONLINE_SESSION_INFO: boolean;
   LANGUAGES: any;
 }

src/app/services/setting.ts

@@ -17,6 +17,7 @@ export class SettingService {
   public appletConnectMethod$ = new BehaviorSubject<string>("");
   public keyboardLayout$ = new BehaviorSubject<string>("");
   public isDirectNavigation$ = new BehaviorSubject<boolean>(false);
+  public globalSetting$ = new BehaviorSubject<GlobalSetting>(new GlobalSetting());
 
   constructor(
     private _localStorage: LocalStorageService,
@@ -34,6 +35,7 @@ export class SettingService {
       url += `?token=${connectionToken}`;
     }
     this.globalSetting = await this._http.get<any>(url).toPromise();
+    this.globalSetting$.next(this.globalSetting);
     this.setting.commandExecution =
       this.globalSetting.SECURITY_COMMAND_EXECUTION;
     this.setLogo();