add maas knowledge base, Knowledge Assistant, application and update link

Issue-ID: USECASEUI-844
Change-Id: I1dc2b4bc12f364d017b24b2752acfef63e27ad94
Signed-off-by: kaixiliu <liukaixi@chinamobile.com>

34 files changed, 1550 insertions, 16 deletions

diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts
index ed744106..ad696e9f 100644
--- a/usecaseui-portal/src/app/app-routing.module.ts
+++ b/usecaseui-portal/src/app/app-routing.module.ts
@@ -37,8 +37,9 @@ import { OrderServiceComponent } from './views/services/sotn-management/order-se
 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';
-
-
+import { ApplicationManagementComponent } from './views/maas/build/application-management.component';
+import { UseApplicationComponent } from './views/maas/use/use-application.component';
+import { KnowledgeBaseManagementComponent } from './views/maas/knowledge-base-management/knowledge-base-management.component';
 
 
 
@@ -72,8 +73,11 @@ const routes: Routes = [
   { path: 'network/ccvpn-network', component: CcvpnNetworkComponent },
   { path: 'network/mdons-network', component: MdonsNetworkComponent },
   { path: 'intent-management', component:IntentManagementComponent},
-  { path: 'robot', component: RobotComponent }
-  //{ path: '**', redirectTo: 'home', pathMatch: 'full' }
+  { path: 'robot', component: RobotComponent },
+  { path: 'maas/build', component: ApplicationManagementComponent },
+  { path: 'maas/use', component: UseApplicationComponent },
+  { path: 'maas/knowledge-base-management', component: KnowledgeBaseManagementComponent },
+  { 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 c965d18b..c12067e3 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -156,6 +156,25 @@
         </a>
       </li>
       <hr>
+       <li nz-submenu [ngClass]="{'activeMenuBar': url.indexOf('maas') === 0}" [nzOpen]="maasFlag">
+        <span title>
+          <i>
+            <img src="{{ url === 'maas' ? 'assets/images/robot-active.png':'assets/images/robot-hui.png'}}"
+              alt="home">
+          </i>
+          <span> {{"i18nTextDefine_mass" | translate}} </span>
+        </span>
+        <ul>
+          <li nz-menu-item [ngClass]="{'activeMenuList': url === 'maas/knowledge-base-management'}">
+            <a routerLink='maas/knowledge-base-management'> {{"i18nTextDefine_knowledgebase" | translate}} </a>
+          </li>
+          <li nz-menu-item [ngClass]="{'activeMenuList': url === 'maas/build'}">
+            <a routerLink='maas/build'> {{"i18nTextDefine_mass_build" | translate}} </a>
+          </li>
+          <li nz-menu-item [ngClass]="{'activeMenuList': url.includes('maas/use')}">
+            <a routerLink='maas/use'> {{"i18nTextDefine_mass_use" | translate}} </a>
+          </li>
+        </ul>
     </ul>
   </nz-sider>
   <nz-layout class="main">
diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts
index 7abec444..8babf87c 100644
--- a/usecaseui-portal/src/app/app.component.ts
+++ b/usecaseui-portal/src/app/app.component.ts
@@ -26,7 +26,7 @@ import 'rxjs/add/operator/map';
     styleUrls: ['./app.component.less']
 })
 export class AppComponent {
-
+    maasFlag = false;
     public url: string = 'home';
     constructor(private translate: TranslateService, private myhttp: HomesService, private router: Router, ) {
         this.currentLanguageGet();
@@ -38,6 +38,7 @@ export class AppComponent {
         this.router.events.map(event => {
             if (event instanceof NavigationEnd) {
                 this.url = event['urlAfterRedirects'].slice(1)
+                this.maasFlag = this.url.includes('maas');
             }
         }).subscribe(event => { })
     }
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 852c6660..6fd0e5ae 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -117,7 +117,16 @@ import { InputIntentConditionComponent } from './views/intent-management/input-i
 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';
-
+import { ApplicationManagementComponent } from './views/maas/build/application-management.component';
+import { InputApplicationManagementComponent } from './views/maas/build/input-application-management/input-application-management.component';
+import { UseApplicationComponent } from './views/maas/use/use-application.component';
+import { KnowledgeBaseManagementComponent } from './views/maas/knowledge-base-management/knowledge-base-management.component';
+import { InputKnowledgeBaseComponent } from './views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component';
+import { KnowledgeBaseDetailComponent } from './views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component';
+import { ApplicationDetailComponent } from './views/maas/build/application-detail/application-detail.component';
+import { DescriptionInfoComponent } from "./shared/components/description-info/description-info.component";
+// import { EditKnowledgeBaseComponent } from "./views/maas/knowledge-base-management/edit-knowledge-base/edit-knowledge-base.component";
+import { KnowledgeBaseService } from "./views/maas/knowledge-base-management/knowledge-base.service";
 export function HttpLoaderFactory(httpClient: HttpClient) {
 	return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
 }
@@ -147,6 +156,7 @@ registerLocaleData(en);
 		SlicingTaskServices,
 		IntentManagementService,
 		// fakeBackendProvider
+		KnowledgeBaseService
 	],
 	declarations: [
 		AppComponent,
@@ -222,7 +232,16 @@ registerLocaleData(en);
 		InputIntentStateComponent,
 		InputIntentConditionComponent,
 		IntentReportDetailComponent,
-		RobotComponent
+		KnowledgeBaseManagementComponent,
+		InputKnowledgeBaseComponent,
+		KnowledgeBaseDetailComponent,
+		DescriptionInfoComponent,
+		RobotComponent,
+		ApplicationManagementComponent,
+		InputApplicationManagementComponent,
+		UseApplicationComponent,
+		ApplicationDetailComponent,
+		// EditKnowledgeBaseComponent
 	],
 	imports: [
 		BrowserModule,
diff --git a/usecaseui-portal/src/app/core/services/intentManagement.service.ts b/usecaseui-portal/src/app/core/services/intentManagement.service.ts
index ee9cd3b2..7fd85b04 100644
--- a/usecaseui-portal/src/app/core/services/intentManagement.service.ts
+++ b/usecaseui-portal/src/app/core/services/intentManagement.service.ts
@@ -16,21 +16,31 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-
+import { of } from 'rxjs/observable/of';
+import { knowledgeBase } from '../../views/maas/knowledge-base-management/knowledge-base.type'
+import { application } from '../../views/maas/build/application.type';
 @Injectable()
 export class IntentManagementService {
 
   constructor(private http: HttpClient) { }
   url = {
-    createIntentManagement:  "/api/usecaseui-intent-analysis/v1/intents",
+    createIntentManagement: "/api/usecaseui-intent-analysis/v1/intents",
     getIntentManagement: "/api/usecaseui-intent-analysis/v1/intents/intentGenerateType/USERINPUT",
     deleteIntentManagement: "/api/usecaseui-intent-analysis/v1/intents/",
     updateIntentManagementData: "/api/usecaseui-intent-analysis/v1/intents/",
-    getIntentReport: "/api/usecaseui-intent-analysis/v1/intentReport/"
+    getIntentReport: "/api/usecaseui-intent-analysis/v1/intentReport/",
+    getKnowledgeBaseRecord: "/api/usecaseui-llm-adaptation/v1/knowledgeBase/query",
+    removeKnowledgeBase: "/api/usecaseui-llm-adaptation/v1/knowledgeBase/delete/",
+    getKnowledgeBaseById: "/api/usecaseui-llm-adaptation/v1/knowledgeBase/queryById/",
+    updateKnowledgeBaseRecord: "/api/usecaseui-llm-adaptation/v1/knowledgeBase/update",
+    maasUrl: "/api/usecaseui-llm-adaptation/v1/maas/getAll",
+    getAllApplication: "/api/usecaseui-llm-adaptation/v1/application/query",
+    deleteApplicationById: "/api/usecaseui-llm-adaptation/v1/application/delete/",
+    getApplicationById: "/api/usecaseui-llm-adaptation/v1/application/queryById/"
   };
-
+  
   // intentManagement
-  getIntentManagementData(){
+  getIntentManagementData() {
     return this.http.get<any>(this.url.getIntentManagement);
   }
   createIntentManagement(requestBody) {
@@ -42,7 +52,33 @@ export class IntentManagementService {
   updateIntentManagementData(id, requestBody) {
     return this.http.put<any>(this.url.updateIntentManagementData + id, requestBody);
   }
-  getIntentReportData(intentId){
-    return this.http.get<any>(this.url.getIntentReport+intentId);
+  getIntentReportData(intentId) {
+    return this.http.get<any>(this.url.getIntentReport + intentId);
+  }
+  getKnowledgeBaseRecord() {
+    return this.http.get<any>(this.url.getKnowledgeBaseRecord);
+  }
+
+  updateKnowledgeBase(body: any) {
+    return this.http.post<any>(this.url.updateKnowledgeBaseRecord, body);
+  }
+
+  deleteKnowledgeBaseData(index) {
+    return this.http.delete<any>(this.url.removeKnowledgeBase + index);
+  }
+  getMaaSPlatform() {
+    return this.http.get<any>(this.url.maasUrl);
+  }
+  getKnowledgeBaseById(index) {
+    return this.http.get<{result_body: Array<knowledgeBase>}>(this.url.getKnowledgeBaseById + index);
+  }
+  getAllApplication() {
+    return this.http.get<any>(this.url.getAllApplication);
+  }
+  deleteApplicationById(index) {
+    return this.http.delete<any>(this.url.deleteApplicationById + index);
+  }
+  getApplicationById(index) {
+    return this.http.get<any>(this.url.getApplicationById + index);
   }
 }
diff --git a/usecaseui-portal/src/app/shared/components/description-info/description-info.component.html b/usecaseui-portal/src/app/shared/components/description-info/description-info.component.html
new file mode 100644
index 00000000..9575dca1
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/description-info/description-info.component.html
@@ -0,0 +1,20 @@
+<div *ngFor="let item of data" class="input-wrapper">
+    <div class="desc-label">
+        <nz-popover>
+            <div class="text-single-ellipsis text-label" nz-popover>
+                {{ item.label }}
+            </div>
+            <ng-template #nzTemplate>
+                {{ item.label }}
+            </ng-template>
+        </nz-popover>
+    </div>
+    <div class="desc-item">
+        <nz-popover>
+            <div class="text-single-ellipsis" nz-popover>{{ item.value }}</div>
+            <ng-template #nzTemplate>
+                {{ item.value }}
+            </ng-template>
+        </nz-popover>
+    </div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/description-info/description-info.component.less b/usecaseui-portal/src/app/shared/components/description-info/description-info.component.less
new file mode 100644
index 00000000..51e22485
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/description-info/description-info.component.less
@@ -0,0 +1,24 @@
+.input-wrapper {
+    display: flex;
+    margin: 20px 0;
+}
+
+.desc-label {
+    display: inline-block;
+    width: 30%;
+    margin-left: 8px;
+}
+.text-single-ellipsis {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+    white-space: nowrap;
+}
+.text-label::after {
+    content: ':'
+}
+
+.desc-item {
+    display: inline-block;
+    width: 70%;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/description-info/description-info.component.ts b/usecaseui-portal/src/app/shared/components/description-info/description-info.component.ts
new file mode 100644
index 00000000..26148dce
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/description-info/description-info.component.ts
@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-description-info',
+  templateUrl: './description-info.component.html',
+  styleUrls: ['./description-info.component.less']
+})
+export class DescriptionInfoComponent implements OnInit {
+
+  constructor(
+  ) { }
+  @Input() data: Array<any>;
+
+  ngOnInit() {
+    console.log('data is :', this.data)
+  }
+
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html
new file mode 100644
index 00000000..71ef1b40
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.html
@@ -0,0 +1,19 @@
+<!--
+    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.
+-->
+<nz-modal [(nzVisible)]="showModel" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()"
+   (nzOnOk)="handleOk()" nzWidth="56%" nzHeight="800px" >
+    <app-description-info [data]="data"></app-description-info>
+</nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.less b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.less
new file mode 100644
index 00000000..139597f9
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.less
@@ -0,0 +1,2 @@
+
+
diff --git a/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts
new file mode 100644
index 00000000..f9e16435
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/application-detail/application-detail.component.ts
@@ -0,0 +1,74 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-application-detail',
+  templateUrl: './application-detail.component.html',
+  styleUrls: ['./application-detail.component.less']
+})
+export class ApplicationDetailComponent implements OnInit {
+
+  constructor() { }
+
+  @Input() showModel: boolean;
+  _applicationDetail;
+  data: Array<{ label: string, value: string }> = [];
+  @Input() 
+  set applicationDetail(v: any) {
+    if (!v) {
+      return;
+    }
+    this.data = [
+      {
+        label: 'Application Name', value: v.applicationName
+      },
+      {
+        label: 'Application Description', value: v.applicationDescription
+      },
+      {
+        label: 'Application Type', value: v.applicationType
+      },
+      {
+        label: 'Operator', value: v.operatorName
+      },
+      {
+        label: 'MaaS', value: v.maaSPlatformName
+      },
+      {
+        label: 'Large Model', value: v.largeModelName
+      },
+      {
+        label: 'Knowledge Base', value: v.knowledgeBaseName
+      },
+      {
+        label: 'Prompt', value: v.prompt
+      },
+      {
+        label: 'Temperature', value: v.temperature
+      },
+      {
+        label: 'Top_p', value: v.top_p
+      },
+      {
+        label: 'Opening Remarks', value: v.openingRemarks
+      }
+    ]
+    this._applicationDetail = v;
+  };
+  get applicationDetail() {
+    return this._applicationDetail;
+  }
+  @Output() modalOpreation = new EventEmitter();
+
+  ngOnInit() {}
+
+  handleCancel(): void {
+    this.showModel = false;
+    this.modalOpreation.emit();
+  }
+
+   handleOk(): void {
+    this.showModel = false;
+    this.modalOpreation.emit();
+  }
+
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/application-management.component.html b/usecaseui-portal/src/app/views/maas/build/application-management.component.html
new file mode 100644
index 00000000..64a0823d
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.html
@@ -0,0 +1,61 @@
+<!--
+    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="content">
+  <p class="title">
+    Application List
+    <button nz-button nzType="primary" class="add" (click)="inputIntentModuleShow()">
+      {{"i18nTextDefine_Create" | translate}} </button>
+  </p>
+  <nz-table
+    #basicTable [nzData]="listOfData"
+    [nzFrontPagination]="false"
+    [nzShowPagination]="false"
+  >
+    <thead>
+      <tr>
+        <th nzWidth="9%" style="font-size: 20px;">No</th>
+        <th nzWidth="12%" style="font-size: 20px;">Application Name</th>
+        <th nzWidth="13%" style="font-size: 20px;">Application Description</th>
+        <th nzWidth="11%" style="font-size: 20px;">Application Type</th>
+        <th nzWidth="11%" style="font-size: 20px;">Operator</th>
+        <th nzWidth="11%" style="font-size: 20px;">MaaS</th>
+        <th nzWidth="11%" style="font-size: 20px;">Knowledge Base</th>
+        <th nzWidth="11%" style="font-size: 20px;">Large Model</th>
+        <th nzWidth="11%" style="font-size: 20px;">{{"i18nTextDefine_Action" | translate}}</th>
+      </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let data of basicTable.data; let i = index">
+          <td>{{i+1}}</td>
+          <td>{{data.applicationName}}</td>
+          <td>{{data.applicationDescription}}</td>
+          <td>{{data.applicationType}}</td>
+          <td>{{data.operatorName}}</td>
+          <td>{{data.maaSPlatformName}}</td>
+          <td>{{data.knowledgeBaseName}}</td>
+          <td>{{data.largeModelName}}</td>
+          <td>
+             <i class="anticon anticon-menu-fold" (click)="displayApplicationDetails(data)"></i>
+             <i class="anticon anticon-delete" (click)="deleteIntentList(data)"></i>
+             <i class="anticon anticon-link" (click)="navigateToDetail(data)"></i>
+          </td>
+        </tr>
+    </tbody>
+  </nz-table>
+</div>
+<app-input-application-management *ngIf="intentModuleShow" [showModel]="intentModuleShow" (modalOpreation)="inputIntentModuleClose($event)"></app-input-application-management>
+<app-application-detail *ngIf="applicationShow" [showModel]="applicationShow" (modalOpreation)="applicationDetailClose()" [applicationDetail]="applicationDetail"></app-application-detail>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/application-management.component.less b/usecaseui-portal/src/app/views/maas/build/application-management.component.less
new file mode 100644
index 00000000..8e882a27
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.less
@@ -0,0 +1,127 @@
+:host{
+  display: block;
+}
+.content {
+  padding: 40px;
+  min-height: 937px;
+  height: 100vh;
+  .title{
+    font-size: 30px;
+    color: #3C4F8C;
+    margin-bottom: 0.5em;
+    .add{
+      float: right;
+      margin-top: 7px;
+    }
+  }
+  .anticon-edit,.anticon-delete,.anticon-menu-fold{
+    font-size: 18px;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+}
+
+.intent-management-modal{
+  .add-expectation-container:after{
+    content: '';
+    display: block;
+    clear: both;
+  }
+  p{
+    position: relative;
+  }
+  .ant-input{
+    width: 300px;
+  }
+  .title{
+    height: 32px;
+    line-height: 32px;
+    margin-bottom: 15px;
+    .add{
+      float: right;
+    }
+  }
+  .required{
+    color: #ff0000;
+  }
+  .intent-required{
+    display: none;
+  }
+  .intent-error{
+    position: absolute;
+    color: #ff0000;
+    top: 32px;
+    left: 110px;
+  }
+  .anticon-edit,.anticon-delete,.anticon-menu-fold{
+    font-size: 18px;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+}
+.intent-table{
+  margin-bottom: 15px;
+  ::ng-deep ant-modal-body{
+    height: 300 !important;
+    overflow-y: auto !important;
+  }
+}
+.target-div{
+  float: left;
+  width: 100%;
+}
+.expectation-p{
+  position: relative;
+  float: left;
+  width: 50%;
+  .left{
+    float: left;
+    width: 40%;
+    height: 32px;
+    line-height: 32px;
+    text-align: right;
+    padding-right: 2%;
+  }
+  .ant-input{
+    float: left;
+    width: 58%;
+  }
+  .ant-select{
+    width: 58%;
+  }
+}
+.w50{
+  width: 50%;
+}
+.condition-type{
+  float: left;
+  width: 100%;
+  [nz-radio] {
+    display: block;
+    height: 32px;
+    line-height: 32px;
+    margin-left: 15%;
+    .ant-input{
+      width: 60%;
+    }
+  }
+  .ant-radio-group{
+    width: 50%;
+  }
+}
+.intent-condition-div{
+  width: 100%;
+  float: left;
+}
+.condition-operator-div{
+  margin-left: 50px;
+}
+.container{
+  display: flex;
+  align-items: center;
+  width: 700px;
+}
+.container angular2-date-picker{
+  margin-right: 10px;
+  margin-left: 10px;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/application-management.component.ts
new file mode 100644
index 00000000..bc684cc9
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.ts
@@ -0,0 +1,90 @@
+import { Component, OnInit } from '@angular/core';
+import { IntentManagementService } from '../../../core/services/intentManagement.service'
+import {NzMessageService} from "ng-zorro-antd";
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-application-management',
+  templateUrl: './application-management.component.html',
+  styleUrls: ['./application-management.component.less']
+})
+export class ApplicationManagementComponent implements OnInit {
+
+  constructor(
+    private myhttp: IntentManagementService,
+    private message: NzMessageService,
+    private router: Router
+    ) { }
+
+  ngOnInit() {
+    this.getAllApplicationData()
+  }
+
+  listOfData: any[] = [];
+
+  intentModuleShow: boolean = false;
+  applicationShow: boolean = false;
+  editIntentTableList: Object={};
+  currentIndex: number=-1;
+  getAllApplicationData():void{
+     this.myhttp.getAllApplication()
+    .subscribe(
+      (data) => {
+        this.listOfData=data.result_body
+      },
+      (err) => {
+        this.message.error('Failed to obtain application data');
+      }
+    )
+  }
+
+  inputIntentModuleShow(): void {
+    this.intentModuleShow = true;
+  }
+  inputIntentModuleClose($event: any): void {
+    this.intentModuleShow = false;
+
+    if ($event.cancel) {
+        return;
+    }
+    this.getAllApplicationData()
+  }
+ editIntentList(): void {
+    this.intentModuleShow = true
+  }
+  deleteIntentList(data): void{
+    this.myhttp.deleteApplicationById(data.applicationId).subscribe((data) => {
+      this.getAllApplicationData()
+      if(data.result_header.result_code===200){
+        this.message.success('Deleted successfully');
+      }else{
+        this.message.error(data.result_header.result_message);
+      }
+    }, (err) => {
+      this.message.error('Deletion failed');
+    }); 
+  }
+
+  navigateToDetail(data):void {
+    this.router.navigate(['maas/use'], { queryParams: { id: data.applicationId, name: data.applicationName } });
+  }
+
+   applicationDetailClose(): void {
+    this.applicationShow = false;
+  }
+
+  applicationDetail: Object={};
+   displayApplicationDetails(data): void {
+       this.applicationShow = true;
+        this.myhttp.getApplicationById(data.applicationId)
+        .subscribe(
+          (data) => {
+            this.applicationDetail=data.result_body;
+            console.log(data.result_body);
+          },
+          (err) => {
+            this.message.error('Failed to obtain knowledge base data');
+          }
+        )
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/application.type.ts b/usecaseui-portal/src/app/views/maas/build/application.type.ts
new file mode 100644
index 00000000..0b0693b4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/application.type.ts
@@ -0,0 +1,19 @@
+export type application = {
+  "applicationId": string,
+  "applicationName": string,
+  "applicationDescription": string,
+  "applicationType": string,
+  "operatorId": string,
+  "operatorName": string,
+  "maasPlatformId": string,
+  "maasPlatformName": string,
+  "knowledgeBaseName": string,
+  "knowledgeBaseId": string,
+  "largeModelName": string,
+  "largeModelId": string,
+  "prompt": string,
+  "temperature": number,
+  "top_p": number,
+  "openingRemarks": string
+}
+
diff --git a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html
new file mode 100644
index 00000000..286dc1dc
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.html
@@ -0,0 +1,124 @@
+<!--
+    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.
+-->
+
+<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" nzOkText="Ok" (nzOnCancel)="handleCancel()"
+   (nzOnOk)="handleOk()" nzWidth="648px" nzHeight="800px">
+   <div>
+      <div class="form-item">
+         <label class="item-label"> Application Name:</label>
+         <div class="item">
+            <input nz-input [(ngModel)]="applicationName">
+         </div>
+      </div>
+      <div class="form-item">
+         <label class="item-label"> Application Description:</label>
+         <div class="item">
+            <textarea nz-input [(ngModel)]="applicationDescription"></textarea>
+         </div>
+      </div>
+      <div class="form-item">
+         <label class="item-label"> Application Type:</label>
+         <div class="item">
+            <nz-select class="nz-select-container" [(ngModel)]="applicationType">
+               <nz-option nzValue="Knowledge Assistant" nzLabel="Knowledge Assistant"></nz-option>
+            </nz-select>
+         </div>
+      </div>
+      <div class="form-item">
+         <label class="item-label"> Operator Name:</label>
+         <div class="item">
+            <nz-select class="nz-select-container" nzPlaceHolder="Select Operator"
+               [(ngModel)]="selectedOperator" (ngModelChange)="handleOperatorChange($event)">
+               <nz-option *ngFor="let operator of operators" [nzValue]="operator"
+                  [nzLabel]="operator.operatorName"></nz-option>
+            </nz-select>
+         </div>
+
+      </div>
+      <div class="form-item">
+         <label class="item-label"> MaaS Platform Name:</label>
+         <div class="item">
+            <nz-select class="nz-select-container" nzPlaceHolder="Select MaaS"
+               [(ngModel)]="selectedPlatform" (ngModelChange)="handleMaasChange($event)">
+               <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform"
+                  [nzLabel]="platform.maaSPlatformName"></nz-option>
+            </nz-select>
+         </div>
+
+      </div>
+      <div class="form-item">
+         <label class="item-label"> Model:</label>
+         <div class="item">
+            <nz-select class="nz-select-container" nzPlaceHolder="Select Model"
+               [(ngModel)]="selectedModel">
+               <nz-option *ngFor="let model of filteredModels" [nzValue]="model"
+                  [nzLabel]="model.modelName"></nz-option>
+            </nz-select>
+         </div>
+
+      </div>
+      <div class="form-item">
+         <label class="item-label"> KnowLedge Base:</label>
+         <div class="item">
+            <nz-select class="nz-select-container" nzPlaceHolder="Select Knowledge Base"
+               [(ngModel)]="selectKnowledgeBase">
+               <nz-option *ngFor="let knowledgeBase of knowledgeBases" [nzValue]="knowledgeBase"
+                  [nzLabel]="knowledgeBase.knowledgeBaseName"></nz-option>
+            </nz-select>
+         </div>
+      </div>
+      <div class="form-item">
+         <label class="item-label"> Prompt:</label>
+         <div class="item">
+            <textarea nz-input [(ngModel)]=prompt></textarea>
+         </div>
+      </div>
+      <div class="form-item">
+         <label class="item-label"> Opening Remarks:</label>
+         <div class="item">
+            <textarea nz-input [(ngModel)]=openingRemarks></textarea>
+         </div>
+      </div>
+      <div class="form-item">
+         <label class="item-label">temperature:</label>
+         <div class="item">
+            <nz-row class="slider-input-container">
+               <nz-col nzSpan="10">
+                  <nz-slider [nzMin]="0" [nzMax]="10" [nzStep]="1" [(ngModel)]="temperature"></nz-slider>
+               </nz-col>
+               <div nz-col nzSpan="4">
+                  <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10"
+                     [(ngModel)]="temperature"></nz-input-number>
+               </div>
+            </nz-row>
+         </div>
+      </div>
+      <div class="form-item">
+         <label class="item-label">top_p:</label>
+         <div class="item">
+            <nz-row class="slider-input-container">
+               <nz-col nzSpan="10">
+                  <nz-slider [nzMin]="0" [nzMax]="10" [nzStep]="1" [(ngModel)]="top_p"></nz-slider>
+               </nz-col>
+               <div nz-col nzSpan="4">
+                  <nz-input-number class="nz-input-number-container" [nzMin]="0" [nzMax]="10"
+                     [(ngModel)]="top_p"></nz-input-number>
+               </div>
+            </nz-row>
+         </div>
+      </div>
+   </div>
+</nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less
new file mode 100644
index 00000000..e8e3fca4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.less
@@ -0,0 +1,44 @@
+// .ant-select {
+//   width: 200px;
+// }
+
+// .ant-input {
+//   width: 300px;
+// }
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 50px;
+}
+
+.item-label {
+  display: inline-block;
+  width: 30%;
+  margin-right: 8px;
+  line-height: 36px;
+}
+
+.item {
+  display: flex;
+  width: 70%;
+}
+
+.form-item {
+  display: flex;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.slider-input-container {
+  width: 100%;
+}
+
+.nz-input-number-container {
+  margin-left: 16px;
+  width: 120px;
+}
+
+.nz-select-container {
+  width: 300px;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts
new file mode 100644
index 00000000..71688d4e
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/build/input-application-management/input-application-management.component.ts
@@ -0,0 +1,135 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Util } from '../../../../shared/utils/utils';
+import {NzMessageService} from "ng-zorro-antd";
+import { HttpClient,HttpHeaders } from '@angular/common/http';
+
+@Component({
+  selector: 'app-input-application-management',
+  templateUrl: './input-application-management.component.html',
+  styleUrls: ['./input-application-management.component.less']
+})
+export class InputApplicationManagementComponent implements OnInit {
+  title = 'Add Application';
+  constructor(
+    private Util: Util,
+    private message: NzMessageService,
+    private http: HttpClient
+  ) { }
+
+  @Input() showModel: boolean;
+  @Output() modalOpreation = new EventEmitter();
+
+  maasUrl = '/api/usecaseui-llm-adaptation/v1/operator/maas/getAll';
+  knowBaseUrl = "/api/usecaseui-llm-adaptation/v1/knowledgeBase/queryByMaaSId/";
+  createApplicationUrl = "/api/usecaseui-llm-adaptation/v1/application/create";
+
+  applicationName = "";
+  applicationDescription = "";
+  applicationType = "Knowledge Assistant";
+    operators: any[] = [];
+    selectedOperator: any = null;
+    filteredPlatforms: any[] = [];
+    selectedPlatform: any = null;
+    filteredModels: any[] = [];
+    selectedModel: any = null;
+    knowledgeBases: any[] =[];
+    selectKnowledgeBase: any = null;
+  modelDefaultValue = "";
+  temperature = 3;
+  top_p = 3;
+  prompt ="";
+  openingRemarks = "";
+  ngOnInit() {
+     this.fetchOperators();
+  }
+
+  fetchOperators(): void {
+     this.http.get<any>(this.maasUrl).subscribe(
+      (response) => {
+        this.operators = response.result_body;
+      },
+      () => {
+        this.message.error('Failed to fetch operators');
+      }
+    );
+  }
+
+   handleOperatorChange(value: any): void {
+    if (value) {
+      this.filteredPlatforms = value.maaSPlatformList;
+    } else {
+      this.filteredPlatforms = [];
+    }
+    this.selectedPlatform = null;
+    this.selectedModel = null;
+    this.selectKnowledgeBase = null;
+  }
+
+   handleMaasChange(value: any): void {
+    if (value) {
+      this.filteredModels = value.modelList;
+      console.log(this.filteredModels);
+      this.fetchKnowledgeBase(value);
+    } else {
+      this.filteredModels = [];
+    }
+    this.selectedModel = null;
+    this.selectKnowledgeBase = null;
+  }
+
+  fetchKnowledgeBase(value): void {
+     this.http.get<any>(this.knowBaseUrl+value.maaSPlatformId).subscribe(
+      (response) => {
+        this.knowledgeBases = response.result_body;
+      },
+      (error) => {
+        this.message.error('Failed to fetch knowledge base');
+      }
+    );
+  }
+
+  handleCancel(): void {
+    this.showModel = false;
+    this.modalOpreation.emit({ "cancel": true });
+  }
+  handleOk(): void {
+    this.createApplication();
+  }
+
+  createApplication(){
+      const requestBody = {
+          applicationName: this.applicationName,
+          applicationDescription: this.applicationDescription,
+          applicationType: this.applicationType,
+          operatorName: this.selectedOperator.operatorName,
+          operatorId: this.selectedOperator.operatorId,
+          maaSPlatformId: this.selectedPlatform.maaSPlatformId,
+          maaSPlatformName: this.selectedPlatform.maaSPlatformName,
+          knowledgeBaseId: this.selectKnowledgeBase.knowledgeBaseId,
+          knowledgeBaseName: this.selectKnowledgeBase.knowledgeBaseName,
+          largeModelId: this.selectedModel.modelId,
+          largeModelName: this.selectedModel.modelName,
+          prompt: this.prompt,
+          temperature: this.temperature,
+          top_p: this.top_p,
+          openingRemarks: this.openingRemarks
+        };
+        console.log(requestBody);
+     this.http.post<any>(this.createApplicationUrl, requestBody).subscribe(
+      (response) => {
+        this.showModel = false;
+        this.modalOpreation.emit({ "cancel": false });
+        const resultHeader = {};
+        if(response.result_header.result_code===200){
+          this.message.success('Created successfully');
+        }else{
+          this.message.error(response.result_header.result_message);
+        }
+      },
+      (err) => {
+        this.showModel = false;
+        this.message.error('Created failed');
+      }
+    )
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.html
new file mode 100644
index 00000000..de2e6450
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.html
@@ -0,0 +1,61 @@
+<!--
+    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.
+-->
+<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
+  nzWidth="648px" nzHeight="800px">
+  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8" nzFor="name">Knowledge Base Name</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <input type="text" nz-input formControlName="name">
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8" nzFor="description">Knowledge Base Description</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <textarea rows="2" nz-input formControlName="description"></textarea>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8" nzFor="selectedOperator">Operator Name</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <nz-select name="selectedOperator" nzPlaceHolder="Select Operator" formControlName="selectedOperator"
+          (ngModelChange)="handleOperatorChange($event)">
+          <nz-option *ngFor="let operator of operators" [nzValue]="operator"
+            [nzLabel]="operator.operatorName"></nz-option>
+        </nz-select>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8" nzFor="selectedPlatform">MaaS Platform Name</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <nz-select nzPlaceHolder="Select MaaS" formControlName="selectedPlatform">
+          <nz-option *ngFor="let platform of filteredPlatforms" [nzValue]="platform"
+            [nzLabel]="platform.maaSPlatformName"></nz-option>
+        </nz-select>
+      </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="8" nzFor="fileList">File Upload</nz-form-label>
+      <nz-form-control [nzSpan]="12">
+        <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
+          <button nz-button>
+            <i class="anticon anticon-upload"></i><span>Select File</span>
+          </button>
+        </nz-upload>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+</nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.less
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.ts
new file mode 100644
index 00000000..9984f664
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/input-knowledge-base/input-knowledge-base.component.ts
@@ -0,0 +1,129 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IntentManagementService } from '../../../../core/services/intentManagement.service';
+import { Util } from '../../../../shared/utils/utils';
+import { NzMessageService, UploadFile } from 'ng-zorro-antd';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-input-knowledge-base',
+  templateUrl: './input-knowledge-base.component.html',
+  styleUrls: ['./input-knowledge-base.component.less']
+})
+export class InputKnowledgeBaseComponent implements OnInit {
+  title = 'Add Knowledge Base';
+  constructor(
+    private myhttp: IntentManagementService,
+    private Util: Util,
+    private message: NzMessageService,
+    private http: HttpClient,
+    private fb: FormBuilder
+  ) { }
+
+  @Input() showModel: boolean;
+  @Output() modalOpreation = new EventEmitter();
+
+  apiUrl = '/api/usecaseui-llm-adaptation/v1/knowledgeBase/create';
+  apiUrl1 = '/api/usecaseui-intent-analysis/v1/intents/upload';
+  maasUrl = '/api/usecaseui-llm-adaptation/v1/operator/maas/getAll'
+  url = "http://172.22.16.126:3000/api/core/dataset/create";
+  knowledgeBase = {
+    name: '',
+    description: ''
+  };
+  fileList: UploadFile[] = [];
+  operators: any[] = [];
+  selectedOperator: any = null;
+  filteredPlatforms: any[] = [];
+  allPlatforms: any[] = [];
+  selectedPlatform: any = null;
+  validateForm: FormGroup;
+
+  ngOnInit() {
+    this.fetchOperators();
+    this.validateForm = this.fb.group({
+      name: [null],
+      description: [null],
+      selectedOperator: [null],
+      selectedPlatform: [null],
+    });
+  }
+
+  fetchOperators(): void {
+    this.http.get<any>(this.maasUrl).subscribe(
+      (response) => {
+        console.log(response);
+        this.operators = response.result_body;
+      },
+      (error) => {
+        this.message.error('Failed to fetch operators');
+      }
+    );
+  }
+
+  submitForm(): void {
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+  }
+
+  handleOperatorChange(value: any): void {
+    if (value) {
+      this.filteredPlatforms = value.maaSPlatformList;
+    } else {
+      this.filteredPlatforms = [];
+    }
+    this.validateForm.get('selectedPlatform').setValue(null);
+  }
+
+
+  beforeUpload = (file: UploadFile): boolean => {
+    this.fileList.push(file);
+    return false;
+  }
+
+  handleCancel(): void {
+    this.showModel = false;
+    this.modalOpreation.emit({ "cancel": true });
+  }
+  handleOk(): void {
+    const formData = new FormData();
+    const metaData = {
+      knowledgeBaseName: this.validateForm.controls.name.value,
+      knowledgeBaseDescription: this.validateForm.controls.description.value,
+      operatorId: this.validateForm.controls.selectedOperator.value.operatorId,
+      operatorName: this.validateForm.controls.selectedOperator.value.operatorName,
+      maaSPlatformId: this.validateForm.controls.selectedPlatform.value.maaSPlatformId,
+      maaSPlatformName: this.validateForm.controls.selectedPlatform.value.maaSPlatformName
+    };
+    const metaDataJson = JSON.stringify(metaData);
+    formData.append('metaData', metaDataJson);
+    this.fileList.forEach((file: any) => {
+      formData.append('files', file);
+    });
+    this.http.post<any>(this.apiUrl, formData).subscribe(
+      (response) => {
+        if (response.result_header.result_code === 200) {
+          this.message.success('Created successfully');
+        } else {
+          this.message.error(response.result_header.result_message);
+        }
+        this.knowledgeBase = {
+          name: '',
+          description: ''
+        };
+        this.fileList = [];
+        this.modalOpreation.emit({ "cancel": false });
+      },
+      (error) => {
+        this.knowledgeBase = {
+          name: '',
+          description: ''
+        };
+        this.fileList = [];
+        console.log('Upload failed', error);
+      }
+    );
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html
new file mode 100644
index 00000000..9653f29f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.html
@@ -0,0 +1,21 @@
+<!--
+    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.
+-->
+<nz-modal [(nzVisible)]="showModel" nzTitle="Knowledge Base Detail" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
+    nzWidth="56%" nzHeight="800px" class="intent-management-modal">
+    <div>
+        <app-description-info [data]="data"></app-description-info>
+    </div>
+</nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.less
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts
new file mode 100644
index 00000000..172e9d1d
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-detail/knowledge-base-detail.component.ts
@@ -0,0 +1,64 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { knowledgeBase } from '../knowledge-base.type';
+import { KnowledgeBaseService } from '../knowledge-base.service';
+@Component({
+  selector: 'app-knowledge-base-detail',
+  templateUrl: './knowledge-base-detail.component.html',
+  styleUrls: ['./knowledge-base-detail.component.less']
+})
+export class KnowledgeBaseDetailComponent implements OnInit {
+
+  constructor(
+    private knowledgeBaseService: KnowledgeBaseService
+  ) { }
+  @Input() showModel: boolean;
+  _knowledgeBase: knowledgeBase;
+  data: Array<{ label: string, value: string }> = [];
+  @Input()
+
+  set knowledgeBaseDetail(v: any) {
+    if (!v) {
+      return;
+    }
+    this.data = [
+      {
+        label: 'Knowledge Base Name', value: v.knowledgeBaseName
+      },
+      {
+        label: 'Knowledge Base Description', value: v.knowledgeBaseDescription
+      },
+      {
+        label: 'Operator Name', value: v.operatorName
+      },
+      {
+        label: 'MaaS Platform Name', value: v.maaSPlatformName
+      },
+      {
+        label: 'Update Time', value: v.updateTime
+      },
+      {
+        label: 'Files Name', value: this.knowledgeBaseService.getFiles(v)
+      }
+    ]
+    this._knowledgeBase = v;
+  }
+
+  get knowledgeBaseDetail() {
+    return this._knowledgeBase;
+  };
+  @Output() modalOpreation = new EventEmitter();
+  files = '';
+
+  ngOnInit() {
+  }
+
+  handleCancel(): void {
+    this.showModel = false;
+    this.modalOpreation.emit({ "cancel": true });
+  }
+
+  handleOk(): void {
+    this.showModel = false;
+    this.modalOpreation.emit({ "cancel": true });
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html
new file mode 100644
index 00000000..eba272c2
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.html
@@ -0,0 +1,51 @@
+<!--
+    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="content">
+  <p class="title">
+    {{ "i18nTextDefine_KnowledgeBaseList" | translate }}
+    <button nz-button nzType="primary" class="add" (click)="inputKnowledgeBaseModuleShow()">
+      {{"i18nTextDefine_Create" | translate}} </button>
+  </p>
+  <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" [nzShowPagination]="false">
+    <thead>
+      <tr>
+        <th nzWidth="25%" style="font-size: 20px;">{{"i18nTextDefine_NO" | translate}}</th>
+        <th nzWidth="25%" style="font-size: 20px;">{{"i18nTextDefine_Name" | translate}}</th>
+        <th nzWidth="25%" style="font-size: 20px;">{{"i18nTextDefine_Description" | translate}}</th>
+        <th nzWidth="25%" style="font-size: 20px;">{{"i18nTextDefine_Action" | translate}}</th>
+      </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let data of basicTable.data; let i = index">
+          <td>{{ i+1 }}</td>
+          <td>{{ data.knowledgeBaseName }}</td>
+          <td>{{ data.knowledgeBaseDescription }}</td>
+          <td>
+            <i class="anticon anticon-menu-fold" (click)="displayKnowledgeDetails(data)"></i>
+            <!-- <i class="anticon anticon-edit" (click)="editKnowedgeBase(data)"></i> -->
+            <i class="anticon anticon-delete" (click)="deleteKnowledgeBase(data)"></i>
+          </td>
+        </tr>
+    </tbody>
+  </nz-table>
+</div>
+<app-input-knowledge-base *ngIf="intentModuleShow" [showModel]="intentModuleShow"
+  (modalOpreation)="inputKnowledgeBaseModuleClose($event)"></app-input-knowledge-base>
+<app-knowledge-base-detail *ngIf="knowledgeBaseShow" [showModel]="knowledgeBaseShow" (modalOpreation)="knowledgeBaseDetailClose($event)"
+  [knowledgeBaseDetail]="knowledgeBaseDetail"></app-knowledge-base-detail>
+
+<!-- <app-edit-knowledge-base *ngIf="editKnowledgeBaseShow" [showModel]="editKnowledgeBaseShow" [knowledgeBaseId]="editKnowledgeBaseId"
+(modalOpreation)="editKnowledgeBaseModuleClose($event)"></app-edit-knowledge-base> -->
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.less b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.less
new file mode 100644
index 00000000..0b44f752
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.less
@@ -0,0 +1,26 @@
+:host{
+  display: block;
+}
+.content {
+  padding: 40px;
+  min-height: 937px;
+  height: 100vh;
+  .title{
+    font-size: 30px;
+    color: #3C4F8C;
+    margin-bottom: 0.5em;
+    .add{
+      float: right;
+      margin-top: 7px;
+    }
+  }
+  .anticon-edit,.anticon-delete,.anticon-menu-fold{
+    font-size: 18px;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+}
+
+.column-size {
+  font-size: 20px;
+}
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts
new file mode 100644
index 00000000..e54f1e23
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base-management.component.ts
@@ -0,0 +1,98 @@
+import { Component, OnInit } from '@angular/core';
+import { IntentManagementService } from '../../../core/services/intentManagement.service'
+import { NzMessageService } from "ng-zorro-antd";
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-knowledge-base-management',
+  templateUrl: './knowledge-base-management.component.html',
+  styleUrls: ['./knowledge-base-management.component.less']
+})
+export class KnowledgeBaseManagementComponent implements OnInit {
+  editKnowledgeBaseShow = false;
+  editKnowledgeBaseId = '';
+  constructor(
+    private myhttp: IntentManagementService,
+    private message: NzMessageService,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+    this.getKnowledgeBaseData()
+  }
+
+  listOfData: any[] = [];
+
+  intentModuleShow: boolean = false;
+  knowledgeBaseShow: boolean = false;
+  editIntentTableList: Object = {};
+  currentIndex: number = -1;
+  getKnowledgeBaseData(): void {
+    this.myhttp.getKnowledgeBaseRecord()
+      .subscribe(
+        (data) => {
+          this.listOfData = data.result_body
+        },
+        () => {
+          this.message.error('Failed to obtain knowledgeBase data');
+        }
+      )
+  }
+
+  inputKnowledgeBaseModuleShow(): void {
+    this.intentModuleShow = true;
+  }
+  inputKnowledgeBaseModuleClose($event: any): void {
+    console.log($event);
+    this.intentModuleShow = false;
+    if ($event.cancel) {
+      return;
+    }
+    this.getKnowledgeBaseData()
+  }
+
+  editKnowledgeBaseModuleClose($event: any): void {
+    this.editKnowledgeBaseShow = false;
+    if ($event.cancel) {
+      return;
+    }
+    this.getKnowledgeBaseData()
+  }
+
+  knowledgeBaseDetailClose($event: any): void {
+    this.knowledgeBaseShow = false;
+  }
+
+  deleteKnowledgeBase(data): void {
+    this.myhttp.deleteKnowledgeBaseData(data.knowledgeBaseId).subscribe((data) => {
+      this.getKnowledgeBaseData()
+      if (data.result_header.result_code === 200) {
+        this.message.success('Deleted successfully');
+      } else {
+        this.message.error(data.result_header.result_message);
+      }
+    }, (err) => {
+      this.message.error('Deletion failed');
+    });
+  }
+
+  knowledgeBaseDetail: Object = {};
+  displayKnowledgeDetails(data): void {
+    this.knowledgeBaseShow = true;
+    this.myhttp.getKnowledgeBaseById(data.knowledgeBaseId)
+      .subscribe(
+        (data) => {
+          this.knowledgeBaseDetail = data.result_body;
+        },
+        (err) => {
+          this.message.error('Failed to obtain knowledge base data');
+        }
+      )
+  }
+
+  editKnowedgeBase(data) {
+    this.editKnowledgeBaseId = data.knowledgeBaseId;
+    this.editKnowledgeBaseShow = true;
+  }
+
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.service.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.service.ts
new file mode 100644
index 00000000..4af8c292
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { knowledgeBase } from './knowledge-base.type';
+
+@Injectable()
+export class KnowledgeBaseService {
+
+  constructor() { }
+  getFiles(v: knowledgeBase) {
+    return v.filesName ? v.filesName.join(',') : '';
+  }
+}
diff --git a/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.type.ts b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.type.ts
new file mode 100644
index 00000000..ec9c7daa
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/knowledge-base-management/knowledge-base.type.ts
@@ -0,0 +1,12 @@
+export type knowledgeBase = {
+  knowledgeBaseName: string,
+  knowledgeBaseDescription: string,
+  operatorName: string,
+  maaSPlatformName: string,
+  updateTime: string,
+  filesName: Array<string>,
+  operatorId: string,
+  maaSPlatformId: string,
+  knowledgeBaseId: string
+}
+
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');
+      }
+    )
+  }
+}
diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json
index 31815c81..f879019c 100644
--- a/usecaseui-portal/src/assets/i18n/cn.json
+++ b/usecaseui-portal/src/assets/i18n/cn.json
@@ -188,5 +188,10 @@
   "i18nTextDefine_exportData": "导出",
   "i18nTextDefine_startTime": "起始时间",
   "i18nTextDefine_endTime": "终止时间",
-  "i18nTextDefine_robot": "大模型"
+  "i18nTextDefine_robot": "大模型",
+  "i18nTextDefine_mass_build": "构建",
+  "i18nTextDefine_mass_use": "使用",
+  "i18nTextDefine_mass": "MaaS",
+  "i18nTextDefine_knowledgebase": "知识库管理",
+  "i18nTextDefine_KnowledgeBaseList": "知识库"
 }
diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json
index c1219c71..daebf7d4 100644
--- a/usecaseui-portal/src/assets/i18n/en.json
+++ b/usecaseui-portal/src/assets/i18n/en.json
@@ -187,5 +187,10 @@
   "i18nTextDefine_exportData": "Export Data",
   "i18nTextDefine_startTime": "Start Time",
   "i18nTextDefine_endTime": "End Time",
-  "i18nTextDefine_robot": "Large Model"
+  "i18nTextDefine_robot": "Large Model",
+  "i18nTextDefine_mass_build": "Q&A Manage",
+  "i18nTextDefine_mass_use": "Q&A Assistant",
+  "i18nTextDefine_mass": "MaaS",
+  "i18nTextDefine_knowledgebase": "Knowledge Base Manage",
+  "i18nTextDefine_KnowledgeBaseList": "Knowledge Base"
 }