perf: 增加智能问答

proxy.conf.json

@@ -56,5 +56,10 @@
     "secure": false,
     "ws": true,
     "changeOrigin": true
+  },
+  "/ui/": {
+    "target": "http://localhost:9528",
+    "secure": false,
+    "changeOrigin": true
   }
 }

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

@@ -0,0 +1,27 @@
+<div id="chatContainer" class="chat-container" [ngClass]="{'show': !isShow}">
+  <div class="modal" (click)="toggle()"></div>
+  <div class="drawer-panel">
+    <div id="dragBox" [hidden]="!isShow">
+      <div
+        [matTooltip]="('Setting' | translate)"
+        matTooltipPosition="before"
+        class="drag-setting"
+        [hidden]="!isShowSetting"
+        (click)="onOpenDrawer()"
+      >
+        <i class="fa fa-cog"></i>
+      </div>
+      <div class="drag-button">
+        <img src="assets/icons/robot-assistant.png" alt="" />
+      </div>
+    </div>
+    <div class="content">
+      <iframe
+        [src]="iframeURL | safeUrl"
+        title="chat"
+        height="100%"
+        width="100%"
+      ></iframe>
+    </div>
+  </div>
+</div>

src/app/elements/chat/chat.component.scss

@@ -0,0 +1,107 @@
+.chat-container {
+  overflow: hidden;
+  .content {
+    height: 100%;
+    iframe {
+      border: none;
+    }
+  }
+}
+
+.drawer-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  width: 440px;
+  min-width: 260px;
+  height: 100vh;
+  user-select: none;
+  border-radius: 10px 0 0 10px;
+  transition: transform .25s cubic-bezier(.7, .3, .1, 1);
+  box-shadow: 0 0 8px 4px #00000014;
+  transform: translate(100%);
+  background: #FFFFFF;
+  z-index: 1200;
+}
+
+#dragBox {
+  position: absolute;
+  top: 30%;
+  left: -48px;
+}
+
+.drag-button {
+  // position: absolute;
+  // top: 30%;
+  // left: -48px;
+  width: 48px;
+  height: 45px;
+  line-height: 45px;
+  box-sizing: border-box;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 20px 0 0 20px;
+  z-index: 0;
+  pointer-events: auto;
+  color: #fff;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 8px 4px #00000014;
+  cursor: pointer;
+
+  &:hover {
+    left: -50px !important;
+    width: 50px !important;
+    transform: translateZ(0) scale(1.06);
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+  }
+  i {
+    font-size: 20px;
+    line-height: 45px;
+  }
+  img {
+    width: 22px;
+    height: 22px;
+    transform: translateY(10%);
+    margin-left: 3px;
+  }
+}
+
+.drag-setting {
+  width: 36px;
+  height: 36px;
+  line-height: 38px;
+  margin-bottom: 10px;
+  text-align: center;
+  border-radius: 50%;
+  cursor: pointer;
+  transform: translateX(20%);
+  background-color: #FFFFFF;
+  border: 1px solid transparent;
+  transition: border-color 0.3s ease;
+  &:hover {
+    background-color: #f0f1f5;
+    border-color: #1d271f;
+  }
+  i {
+    font-size: 18px;
+  }
+}
+
+.show {
+  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+}
+
+.show .modal {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  opacity: 1;
+}
+
+.show .drawer-panel {
+  transform: translate(0);
+}

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

@@ -0,0 +1,116 @@
+import {OnInit, OnDestroy, Component} from '@angular/core';
+import {ViewService} from '@app/services';
+import {View} from '@app/model';
+
+@Component({
+  selector: 'elements-chat',
+  templateUrl: './chat.component.html',
+  styleUrls: ['./chat.component.scss'],
+})
+
+export class ElementChatComponent implements OnInit, OnDestroy {
+  isShow = true;
+  element: any;
+  iframeURL: String;
+  currentView: View;
+
+  constructor(
+    public viewSrv: ViewService
+  ) {}
+
+  get isShowSetting() {
+    const componentType = ['koko', 'lion'];
+    return (
+      this.currentView.hasOwnProperty('connectMethod')
+      && componentType.includes(this.currentView.connectMethod.component)
+    );
+  }
+
+  ngOnInit() {
+    this.viewSrv.currentView$.subscribe((state: View) => {
+      this.currentView = state;
+    });
+    this.iframeURL = '/ui/#/chat/chat-ai';
+    this.init();
+    this.insertToBody();
+  }
+
+  ngOnDestroy() {
+    this.element.remove();
+    this.viewSrv.currentView$.unsubscribe();
+  }
+
+  init() {
+    const clientOffset: any = {};
+    const dragBox = document.getElementById('dragBox');
+    const dragSetting = document.querySelector('.drag-setting');
+    dragBox.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+      const offsetX = dragBox.getBoundingClientRect().left;
+      const offsetY = dragBox.getBoundingClientRect().top;
+      const innerX = event.clientX - offsetX;
+      const innerY = event.clientY - offsetY;
+
+      clientOffset.clientX = event.clientX;
+      clientOffset.clientY = event.clientY;
+      document.onmousemove = function(ev: any) {
+        dragBox.style.left = ev.clientX - innerX + 'px';
+        dragBox.style.top = ev.clientY - innerY + 'px';
+        const dragDivTop = window.innerHeight - dragBox.getBoundingClientRect().height;
+        const dragDivLeft = window.innerWidth - dragBox.getBoundingClientRect().width;
+        dragBox.style.left = dragDivLeft + 'px';
+        dragBox.style.left = '-48px';
+        if (dragBox.getBoundingClientRect().top <= 0) {
+          dragBox.style.top = '0px';
+        }
+        if (dragBox.getBoundingClientRect().top >= dragDivTop) {
+          dragBox.style.top = dragDivTop + 'px';
+        }
+        ev.preventDefault();
+        ev.stopPropagation();
+      };
+      document.onmouseup = function() {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    }, false);
+    dragBox.addEventListener('mouseup', (event) => {
+      const clientX = event.clientX;
+      const clientY = event.clientY;
+      if (
+          this.isDifferenceWithinThreshold(clientX, clientOffset.clientX)
+          && this.isDifferenceWithinThreshold(clientY, clientOffset.clientY)
+          && event.target !== dragSetting
+          && this.isDescendant(event.target, dragSetting)
+        ) {
+        this.isShow = !this.isShow;
+      }
+    });
+  }
+
+  isDescendant(element, ancestor) {
+    if (element.parentNode === ancestor) {
+      return false;
+    }
+    return true;
+  }
+
+  insertToBody() {
+    this.element = document.getElementById('chatContainer');
+    const body = document.querySelector('body');
+    body.insertBefore(this.element, body.firstChild);
+  }
+
+  onOpenDrawer() {
+    window.postMessage({name: 'OPEN'}, '*');
+  }
+
+  isDifferenceWithinThreshold(num1, num2, threshold = 5) {
+    const difference = Math.abs(num1 - num2);
+    return difference <= threshold;
+  }
+
+  toggle() {
+    this.isShow = !this.isShow;
+  }
+}

src/app/elements/elements.component.ts

@@ -30,7 +30,7 @@ import {ElementsReplayMp4Component} from './replay/mp4/mp4.component';
 import {ElementConnectorGuideComponent} from '@app/elements/content/content-window/guide/guide.component';
 import {ElementCommandDialogComponent} from '@app/elements/content/command-dialog/command-dialog.component';
 import {ElementSendCommandDialogComponent} from '@app/elements/content/send-command-dialog/send-command-dialog.component';
-
+import {ElementChatComponent} from '@app/elements/chat/chat.component';
 
 export const ElementComponents = [
   ElementLeftBarComponent,
@@ -43,6 +43,7 @@ export const ElementComponents = [
   ElementUserFileComponent,
   ElementTermComponent,
   ElementNavComponent,
+  ElementChatComponent,
   ElementIframeComponent,
   ElementDialogAlertComponent,
   ElementAssetTreeComponent,

src/app/model.ts

@@ -271,6 +271,7 @@ export class GlobalSetting {
   INTERFACE: any;
   TERMINAL_GRAPHICAL_RESOLUTION: string;
   CONNECTION_TOKEN_REUSABLE: boolean;
+  CHAT_AI_ENABLED: boolean;
 }
 
 export class Setting {

src/app/pages/main/main.component.html

@@ -57,3 +57,5 @@
     </div>
   </as-split-area>
 </as-split>
+
+<elements-chat *ngIf="chatAiEnabled"></elements-chat>

src/app/pages/main/main.component.ts

@@ -35,6 +35,10 @@ export class PageMainComponent implements OnInit {
     return this._isMobile;
   }
 
+  get chatAiEnabled() {
+    return this._settingSvc.globalSetting.CHAT_AI_ENABLED;
+  }
+
   set isMobile(value) {
     this._isMobile = value;
     let settings: any = {};

src/app/services/view.ts

@@ -1,12 +1,14 @@
 import {Injectable} from '@angular/core';
 import {View} from '@app/model';
+import {BehaviorSubject} from 'rxjs';
 
 @Injectable()
 export class ViewService {
   viewList: Array<View> = [];
   currentView: View;
   num = 0;
   viewIds: Array<string> = [];
+  public currentView$ = new BehaviorSubject<{}>({});
 
   addView(view: View) {
     this.num += 1;
@@ -35,6 +37,7 @@ export class ViewService {
       }
     }, 100);
     this.currentView = view;
+    this.setCurrentView();
   }
 
   removeView(view: View) {
@@ -48,12 +51,14 @@ export class ViewService {
     this.currentView.subViews.push(view);
     const index = this.currentView.subViews.length;
     this.setCurrentViewTitle(view, index + 1, 'concat');
+    this.setCurrentView();
   }
 
   clearSubViewOfCurrentView(view: View) {
     const index = this.currentView.subViews.indexOf(view);
     this.currentView.subViews.splice(index, 1);
     this.setCurrentViewTitle(view, index + 1, 'delete');
+    this.setCurrentView();
   }
 
   setCurrentViewTitle(view, index, status) {
@@ -70,6 +75,7 @@ export class ViewService {
         this.currentView.name = names.join('|');
         break;
     }
+    this.setCurrentView();
   }
 
   keyboardSwitchTab(key) {
@@ -97,4 +103,8 @@ export class ViewService {
       this.activeView(nextActiveView);
     }
   }
+
+  setCurrentView() {
+    this.currentView$.next(this.currentView);
+  }
 }

src/assets/i18n/en.json

@@ -141,6 +141,7 @@
   "Run it by client": "Run it by client",
   "Name": "Name",
   "Tips": "Tips",
+  "Question answer": "Question answer",
   "Asset not found or You have no permission to access it, please refresh asset tree": "Asset not found or You have no permission to access it, please refresh asset tree",
   "With secret accounts": "With secret accounts",
   "Close": "Close",

src/assets/i18n/ja.json

@@ -145,6 +145,7 @@
   "General": "基本構成",
   "GUI": "グラフィカル",
   "CLI": "コマンドライン",
+  "Question answer": "質問-答え",
   "Asset not found or You have no permission to access it, please refresh asset tree": "アセットが見つからないか、アクセスする権限がありません。アセット ツリーを更新してください",
   "Run it by client": "クライアントで実行する",
   "Name": "めいしょう",

src/assets/i18n/zh.json

@@ -149,6 +149,7 @@
   "Applet": "远程应用",
   "GUI": "图形化",
   "Tips": "提示",
+  "Question answer": "智能问答",
   "Asset not found or You have no permission to access it, please refresh asset tree": "未找到资产或您无权访问它，请刷新资产树",
   "CLI": "命令行",
   "Close": "关闭",