1 files changed, 81 insertions, 18 deletions

diff --git a/usecaseui-portal/src/app/views/maas/use/use-application.component.ts b/usecaseui-portal/src/app/views/maas/use/use-application.component.ts
index 96b17fd0..e73463d6 100644
--- a/usecaseui-portal/src/app/views/maas/use/use-application.component.ts
+++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.ts
@@ -1,10 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { NzMessageService } from 'ng-zorro-antd';
-import { HttpClient } from '@angular/common/http';
 import { SSE } from "sse.js";
 import { ActivatedRoute } from '@angular/router';
-import { MaasService } from '@src/app/core/services/maas.service';
-
+import { MaasApi } from '@src/app/api/maas.api';
+import { TranslateService } from '@ngx-translate/core';
+import { MaasService } from '../maas-service.service';
+export type StatusEnum = 'typing' | 'finished';
+export type Chat = { question: string, answer: string, questionId: string, status: StatusEnum };
 @Component({
   selector: 'app-use-application',
   templateUrl: './use-application.component.html',
@@ -14,17 +16,23 @@ export class UseApplicationComponent implements OnInit {
 
   question: string;
   communicationMessage: string;
-  chatHistory: { question: string, answer: string }[] = [];
+  chatHistory: Chat[] = [];
   apiUrl = '/api/usecaseui-llm-adaptation/v1/application/chat';
   queryParams: { id?: string; name?: string } = {};
   selectedName: string | null = null;
-  options: any[] = [];
-
+  options: Array<{ nzValue: string, nzLabel: string }> = [];
+  send = this.translate.instant('maas.send');
+  private currentSSE: SSE | null = null;
+  isGeneratingAnswer: boolean = false;
+  stopGenerating = this.translate.instant('maas.stopGenerating');
+  questionId = '';
   constructor(
-    private http: HttpClient,
     private message: NzMessageService,
     private route: ActivatedRoute,
-    private myhttp: MaasService,
+    private myhttp: MaasApi,
+    private translate: TranslateService,
+    private maasService: MaasService,
+    private renderer: Renderer2
   ) { }
 
   ngOnInit() {
@@ -34,25 +42,66 @@ export class UseApplicationComponent implements OnInit {
       this.selectedName = this.queryParams.id;
     });
   }
+  
+  close() {
+    if (this.currentSSE) {
+      this.currentSSE.close();
+    }
+  }
+
+  doAction() {
+    if (this.isGeneratingAnswer) {
+      this.close();
+      this.chatHistory.forEach(item => {item.status = 'finished'});
+      this.isGeneratingAnswer = false;
+    } else {
+      this.submitQuestion();
+    }
+  }
 
   submitQuestion() {
+    if (!this.question) {
+      return;
+    }
+    this.isGeneratingAnswer = true;
     const chatParam = {
       applicationId: this.selectedName,
-      question: this.question
+      question: this.question,
+      questionId: this.maasService.generateUniqueId()
     };
-    const source = new SSE(this.apiUrl, { headers: { 'Content-Type': 'application/json' }, payload: JSON.stringify(chatParam), method: 'POST' });
-    const lin = this.question;
-    source.addEventListener('message', (event) => {
-      const existingEntryIndex = this.chatHistory.findIndex(entry => entry.question === lin);
-      if (existingEntryIndex !== -1) {
-        this.chatHistory[existingEntryIndex].answer += event.data.replace(/__SPACE__/g, ' ');
-      } else {
-        this.chatHistory.push({ question: lin, answer: event.data });
+    this.currentSSE = new SSE(this.apiUrl, { headers: { 'Content-Type': 'application/json' }, payload: JSON.stringify(chatParam), method: 'POST' });
+    const questionId = chatParam.questionId;
+    this.chatHistory.push({ question: chatParam.question, questionId: chatParam.questionId, answer: '', status: 'typing' });
+    this.currentSSE.addEventListener('message', (event) => {
+      const chat = this.chatHistory.find(chatItem => chatItem.questionId === questionId);
+      if (chat) {
+        if (['[DONE]', 'Network Error'].includes(event.data)) {
+          chat.status = 'finished';
+          this.isGeneratingAnswer = false;
+          if (event.data === 'Network Error') {
+            this.updateAnswer(event, chat);
+          }
+          this.close();
+        } else {
+          this.updateAnswer(event, chat);
+        }
       }
     });
+    this.currentSSE.addEventListener('error', () => {
+      this.currentSSE = null;
+      this.isGeneratingAnswer = false;
+    });
+    this.currentSSE.addEventListener('close', () => {
+      this.currentSSE = null;
+      this.isGeneratingAnswer = false;
+    });
     this.question = '';
   }
 
+  updateAnswer(event: any, chat: Chat): void {
+    chat.answer += event.data.replace(/__SPACE__/g, ' ');
+  }
+
   fetchAllApplication(): void {
     this.myhttp.getAllApplication()
       .subscribe(
@@ -61,10 +110,24 @@ export class UseApplicationComponent implements OnInit {
             nzValue: item.applicationId,
             nzLabel: item.applicationName
           }));
+          this.selectedName = this.options.length > 0 ? this.options[0].nzValue : '';
         },
         () => {
           this.message.error('Failed to obtain intent data');
         }
       )
   }
+
+  async copy(content: string): Promise<void> {
+    try {
+      await (navigator as any).clipboard.writeText(content);
+      this.message.success(this.translate.instant('maas.copy_to_clipboard'));
+    } catch (err) {
+      console.error(this.translate.instant('maas.copy_failed') + ': ', err);
+    }
+  }
+
+  deleteQuestion(questionId: string): void {
+    this.chatHistory = this.chatHistory.filter(item => item.questionId !== questionId);
+  }
 }