From fdefcecfc6d983f5e7e6d3a60a13dcfadc7a7721 Mon Sep 17 00:00:00 2001
From: kaixiliu <liukaixi@chinamobile.com>
Date: Wed, 10 Apr 2024 15:14:17 +0800
Subject: Add a large model page

Issue-ID: USECASEUI-834
Change-Id: Ie589e0eb9c263ed1ec92119470ea46f4a936041b
Signed-off-by: kaixiliu <liukaixi@chinamobile.com>
---
 usecaseui-portal/src/app/app-routing.module.ts     |   4 +-
 usecaseui-portal/src/app/app.component.html        |  13 +++
 usecaseui-portal/src/app/app.module.ts             |   2 +
 .../src/app/views/robot/robot.component.html       |  21 +++++
 .../src/app/views/robot/robot.component.less       |  91 +++++++++++++++++++++
 .../src/app/views/robot/robot.component.ts         |  35 ++++++++
 usecaseui-portal/src/assets/i18n/cn.json           |   3 +-
 usecaseui-portal/src/assets/i18n/en.json           |   3 +-
 usecaseui-portal/src/assets/images/answer.png      | Bin 0 -> 5808 bytes
 .../src/assets/images/robot-active.png             | Bin 0 -> 2141 bytes
 usecaseui-portal/src/assets/images/robot-hui.png   | Bin 0 -> 2152 bytes
 usecaseui-portal/src/assets/images/send.png        | Bin 0 -> 1874 bytes
 usecaseui-portal/src/assets/images/user.png        | Bin 0 -> 5799 bytes
 13 files changed, 169 insertions(+), 3 deletions(-)
 create mode 100644 usecaseui-portal/src/app/views/robot/robot.component.html
 create mode 100644 usecaseui-portal/src/app/views/robot/robot.component.less
 create mode 100644 usecaseui-portal/src/app/views/robot/robot.component.ts
 create mode 100644 usecaseui-portal/src/assets/images/answer.png
 create mode 100644 usecaseui-portal/src/assets/images/robot-active.png
 create mode 100644 usecaseui-portal/src/assets/images/robot-hui.png
 create mode 100644 usecaseui-portal/src/assets/images/send.png
 create mode 100644 usecaseui-portal/src/assets/images/user.png

(limited to 'usecaseui-portal/src')

diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts
index 9c9235f4..ed744106 100644
--- a/usecaseui-portal/src/app/app-routing.module.ts
+++ b/usecaseui-portal/src/app/app-routing.module.ts
@@ -36,6 +36,7 @@ import { MonitorServiceComponent } from './views/services/sotn-management/monito
 import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component';
 import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component';
 import { IntentManagementComponent } from './views/intent-management/intent-management.component';
+import { RobotComponent } from './views/robot/robot.component';
 
 
 
@@ -71,7 +72,8 @@ const routes: Routes = [
   { path: 'network/ccvpn-network', component: CcvpnNetworkComponent },
   { path: 'network/mdons-network', component: MdonsNetworkComponent },
   { path: 'intent-management', component:IntentManagementComponent},
-  { path: '**', redirectTo: 'home', pathMatch: 'full' }
+  { path: 'robot', component: RobotComponent }
+  //{ path: '**', redirectTo: 'home', pathMatch: 'full' }
 ];
 
 @NgModule({
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index cb4c9f7d..c965d18b 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -141,6 +141,19 @@
             <span>{{"i18nTextDefine_IntentManagement" | translate}} </span>
           </span>
         </a>
+      </li>
+                 <!-- robot -->
+      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'robot'}">
+        <a routerLink="robot">
+          <span title>
+            <i>
+              <img
+                src="{{url === 'robot' ? 'assets/images/robot-active.png':'assets/images/robot-hui.png'}}"
+                alt="home">
+            </i>
+            <span>{{"i18nTextDefine_robot" | translate}} </span>
+          </span>
+        </a>
       </li>
       <hr>
     </ul>
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 965ffa10..852c6660 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -116,6 +116,7 @@ import { InputIntentStateComponent } from './views/intent-management/input-inten
 import { InputIntentConditionComponent } from './views/intent-management/input-intent-condition/input-intent-condition.component';
 import { IntentReportDetailComponent } from './views/intent-management/intent-report-detail/intent-report-detail.component';
 import { AngularDateTimePickerModule } from 'angular2-datetimepicker';
+import { RobotComponent } from './views/robot/robot.component';
 
 export function HttpLoaderFactory(httpClient: HttpClient) {
 	return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
@@ -221,6 +222,7 @@ registerLocaleData(en);
 		InputIntentStateComponent,
 		InputIntentConditionComponent,
 		IntentReportDetailComponent,
+		RobotComponent
 	],
 	imports: [
 		BrowserModule,
diff --git a/usecaseui-portal/src/app/views/robot/robot.component.html b/usecaseui-portal/src/app/views/robot/robot.component.html
new file mode 100644
index 00000000..38363a8a
--- /dev/null
+++ b/usecaseui-portal/src/app/views/robot/robot.component.html
@@ -0,0 +1,21 @@
+<body >
+<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>
+</body>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/robot/robot.component.less b/usecaseui-portal/src/app/views/robot/robot.component.less
new file mode 100644
index 00000000..be02efd8
--- /dev/null
+++ b/usecaseui-portal/src/app/views/robot/robot.component.less
@@ -0,0 +1,91 @@
+body {
+  background-color: #e6e6fa;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.chat-container {
+  margin: 20px 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/robot/robot.component.ts b/usecaseui-portal/src/app/views/robot/robot.component.ts
new file mode 100644
index 00000000..5304e876
--- /dev/null
+++ b/usecaseui-portal/src/app/views/robot/robot.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-robot',
+  templateUrl: './robot.component.html',
+  styleUrls: ['./robot.component.less']
+})
+export class RobotComponent implements OnInit {
+
+  question: string;
+  communicationMessage: string;
+  chatHistory: { question: string, answer: string }[] = [];
+  apiUrl = '/api/usecaseui-llm-adaptation/v1/getHelper';
+
+  constructor(
+  private http: HttpClient,
+  private message: NzMessageService
+  ) { }
+  ngOnInit() {}
+
+   submitQuestion() {
+    this.http.post<any>(this.apiUrl,this.question,{ responseType: 'text' as 'json'}).subscribe((data) => {
+       if(data==''){
+          this.chatHistory.push({ question: this.question, answer: 'network error' });
+       }else{
+        this.chatHistory.push({ question: this.question, answer: data });
+       }
+        this.question = '';
+      }, error => {
+        this.message.error('error');
+      });
+  }
+}
diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json
index bce7dc0e..31815c81 100644
--- a/usecaseui-portal/src/assets/i18n/cn.json
+++ b/usecaseui-portal/src/assets/i18n/cn.json
@@ -187,5 +187,6 @@
   "i18nTextDefine_ExternalNetworkMessage":"注意：两个端点都将更改为ENNI。",
   "i18nTextDefine_exportData": "导出",
   "i18nTextDefine_startTime": "起始时间",
-  "i18nTextDefine_endTime": "终止时间"
+  "i18nTextDefine_endTime": "终止时间",
+  "i18nTextDefine_robot": "大模型"
 }
diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json
index cc533c1c..c1219c71 100644
--- a/usecaseui-portal/src/assets/i18n/en.json
+++ b/usecaseui-portal/src/assets/i18n/en.json
@@ -186,5 +186,6 @@
   "i18nTextDefine_Size":"Size",
   "i18nTextDefine_exportData": "Export Data",
   "i18nTextDefine_startTime": "Start Time",
-  "i18nTextDefine_endTime": "End Time"
+  "i18nTextDefine_endTime": "End Time",
+  "i18nTextDefine_robot": "Large Model"
 }
diff --git a/usecaseui-portal/src/assets/images/answer.png b/usecaseui-portal/src/assets/images/answer.png
new file mode 100644
index 00000000..f8808023
Binary files /dev/null and b/usecaseui-portal/src/assets/images/answer.png differ
diff --git a/usecaseui-portal/src/assets/images/robot-active.png b/usecaseui-portal/src/assets/images/robot-active.png
new file mode 100644
index 00000000..44027896
Binary files /dev/null and b/usecaseui-portal/src/assets/images/robot-active.png differ
diff --git a/usecaseui-portal/src/assets/images/robot-hui.png b/usecaseui-portal/src/assets/images/robot-hui.png
new file mode 100644
index 00000000..47c61a3e
Binary files /dev/null and b/usecaseui-portal/src/assets/images/robot-hui.png differ
diff --git a/usecaseui-portal/src/assets/images/send.png b/usecaseui-portal/src/assets/images/send.png
new file mode 100644
index 00000000..5b58994b
Binary files /dev/null and b/usecaseui-portal/src/assets/images/send.png differ
diff --git a/usecaseui-portal/src/assets/images/user.png b/usecaseui-portal/src/assets/images/user.png
new file mode 100644
index 00000000..a56313ac
Binary files /dev/null and b/usecaseui-portal/src/assets/images/user.png differ
-- 
cgit 1.2.3-korg