diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/maas/use')
3 files changed, 215 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/maas/use/use-application.component.html b/usecaseui-portal/src/app/views/maas/use/use-application.component.html new file mode 100644 index 00000000..c0a8fe78 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.html @@ -0,0 +1,43 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<div class="container"> +<div class="fixed-select-wrapper"> + <nz-select nzPlaceHolder="Select Application" style="width: 200px;" [(ngModel)]="selectedName"> + <nz-option *ngFor="let option of options" [nzValue]="option.nzValue" [nzLabel]="option.nzLabel"></nz-option> + </nz-select> +</div> +<div class="chat-container"> + <div *ngFor="let chat of chatHistory"> + <div class="question"> + <img src="assets/images/user.png"> + <span>{{ chat.question }}</span> + </div> + <br> + <div class="answer"> + <img src="assets/images/answer.png"> + <span>{{ chat.answer }}</span> + </div> + <br> + </div> +</div> + +<div class="input-wrapper"> + <textarea nz-tooltip nz-input [nzAutosize]="{ minRows: 2, maxRows: 2 }" [(ngModel)]="question" class="text-input"></textarea> + <i class="icon" (click)="submitQuestion()"> + <img src="assets/images/send.png"> + </i> +</div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/maas/use/use-application.component.less b/usecaseui-portal/src/app/views/maas/use/use-application.component.less new file mode 100644 index 00000000..e4570d4f --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.less @@ -0,0 +1,98 @@ +.container { + background-color: #e6e6fa; + width: 100%; + margin: 0; + padding: 0; + min-height: 100vh; + display: flex; + flex-direction: column; +} +.fixed-select-wrapper { + position: fixed; + top: 20px; + left: 50%; + transform: translateX(-50%); + z-index: 1000; + } +.chat-container { + margin: 60px 0; + padding: 0 100px; +} +.question { + display: flex; +} +.record-input{ + margin-left: 10px; + resize: none; +} +.question span { + background-color: white; + font-size: 16px; + margin-left: 10px; + padding: 10px; + border-radius: 8px; +} +.question img { + width: 28px; + height: 28px; +} + +.answer { + display: flex; +} +.answer span{ + background-color: white; + font-size: 16px; + margin-left: 10px; + padding: 10px; + border-radius: 8px; + white-space: pre-line; +} +.answer img { + width: 28px; + height: 28px; +} + +.chat-input { + margin-top: 30px; + padding-left: 1100px; +} + +.input-wrapper { + display: flex; + justify-content: space-around; + width: e("calc(100% - 240px)"); + margin: 0 100px; + margin-left: 138px; + padding: 10px; + background: #fff; + border-radius: 8px; + border: 2px solid #8a2be2; +} + +.text-input { + width: e("calc(100% - 50px)"); + background-color: white; + color: black; + text-align: left; + border: 0; + resize: none; + + &:focus { + border: 0 !important; + box-shadow: none; + } +} + +.icon { + width: 50px; + height: 50px; + cursor: pointer; + + >img { + width: 35px; + height: 31px; + margin-top: 15px; + margin-left: 15px; + } +} 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 new file mode 100644 index 00000000..f2b147c5 --- /dev/null +++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.ts @@ -0,0 +1,74 @@ +import { Component, OnInit } 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 { IntentManagementService } from '../../../core/services/intentManagement.service' + + +@Component({ + selector: 'app-use-application', + templateUrl: './use-application.component.html', + styleUrls: ['./use-application.component.less'] +}) +export class UseApplicationComponent implements OnInit { + + question: string; + communicationMessage: string; + chatHistory: { question: string, answer: string }[] = []; + apiUrl = '/api/usecaseui-llm-adaptation/v1/application/chat'; + queryParams: { id?: string; name?: string } = {}; + selectedName: string | null = null; + options: any[] = []; + + constructor( + private http: HttpClient, + private message: NzMessageService, + private route: ActivatedRoute, + private myhttp: IntentManagementService, + ) { } + ngOnInit() { + this.getIntentManagementData(); + this.route.queryParams.subscribe(params => { + this.queryParams = params; + console.log(params.id); + this.selectedName = this.queryParams.id ; + }); + } + + submitQuestion() { + const chatParam = { + applicationId: this.queryParams.id, + question: this.question + }; + var source = new SSE(this.apiUrl,{headers: {'Content-Type': 'application/json'},payload: JSON.stringify(chatParam),method:'POST'}); + var lin = this.question; + const length = this.chatHistory.length; + source.addEventListener('message',(event)=>{ + const existingEntryIndex = this.chatHistory.findIndex(entry => entry.question === lin); + console.log(event.data); + if (existingEntryIndex !== -1) { + this.chatHistory[existingEntryIndex].answer += event.data.replace(/__SPACE__/g, ' '); + } else { + this.chatHistory.push({ question: lin, answer: event.data }); + } + }); + this.question = ''; + } + + getIntentManagementData():void{ + this.myhttp.getAllApplication() + .subscribe( + (data) => { + this.options = data.result_body.map(item => ({ + nzValue: item.applicationId, + nzLabel: item.applicationName + })); + + }, + () => { + this.message.error('Failed to obtain intent data'); + } + ) + } +} |