Add functionality

Display of content in markdown format

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

diff --git a/usecaseui-portal/.angular-cli.json b/usecaseui-portal/.angular-cli.json
index 0e26a48..cccb374 100644 (file)
--- a/usecaseui-portal/.angular-cli.json
+++ b/usecaseui-portal/.angular-cli.json
@@ -20,11 +20,21 @@
       "prefix": "app",
       "styles": [
         "styles.less",
-        "my-theme.less"
+        "my-theme.less",
+        "../node_modules/prismjs/themes/prism-okaidia.css"
+
       ],
       "scripts": [
         "../node_modules/echarts/dist/echarts.min.js",
-        "../node_modules/mxgraph/javascript/mxClient.js"
+        "../node_modules/mxgraph/javascript/mxClient.js",
+        "../node_modules/prismjs/prism.js",
+        "../node_modules/prismjs/components/prism-c.min.js",
+        "../node_modules/prismjs/components/prism-java.min.js",
+        "../node_modules/prismjs/components/prism-javascript.min.js",
+        "../node_modules/prismjs/components/prism-markup.min.js",
+        "../node_modules/prismjs/components/prism-python.min.js",
+        "../node_modules/prismjs/components/prism-typescript.min.js"
+
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

diff --git a/usecaseui-portal/package.json b/usecaseui-portal/package.json
index 40b4621..adc6d5c 100644 (file)
--- a/usecaseui-portal/package.json
+++ b/usecaseui-portal/package.json
@@ -32,19 +32,24 @@
     "@types/resize-observer-browser": "^0.1.6",
     "angular2-datetimepicker": "^1.1.1",
     "axios": "^0.19.0",
+    "clipboard": "^2.0.0",
     "core-js": "^2.4.1",
     "d3": "^3.5.17",
     "echarts": "^4.1.0",
     "faker": "^4.1.0",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
+    "marked": "^0.3.19",
     "moment": "^2.24.0",
     "mxgraph": "^4.2.2",
     "ng-multiselect-dropdown": "^0.2.14",
     "ng-zorro-antd": "^0.7.1",
+    "ngx-clipboard": "^11.0.0",
     "ngx-echarts": "^2.2.0",
+    "ngx-markdown": "^1.6.0",
+    "prismjs": "^1.9.0",
     "rxjs": "^5.5.12",
-    "sse.js": "^2.4.1",
+    "sse.js": "^2.5.0",
     "sweetalert2": "^4.3.3",
     "vis": "^4.21.0",
     "zone.js": "^0.8.19"

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 3fabfe9..87844ee 100644 (file)
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -117,6 +117,7 @@ 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 { MarkdownModule } from 'ngx-markdown';
 export function HttpLoaderFactory(httpClient: HttpClient) {
        return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
 }
@@ -239,7 +240,8 @@ registerLocaleData(en);
                NgZorroAntdModule.forRoot(),
                NgxEchartsModule,
                AppRoutingModule,
-               AngularDateTimePickerModule
+               AngularDateTimePickerModule,
+               MarkdownModule.forRoot()
        ],
        bootstrap: [AppComponent],
        entryComponents: [

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
index 53e112b..f67d169 100644 (file)
--- a/usecaseui-portal/src/app/views/maas/build/application-management.component.html
+++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.html
@@ -27,27 +27,27 @@
   >
     <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>
+        <th nzWidth="9%" class="head-column">No</th>
+        <th nzWidth="12%" class="head-column">Application Name</th>
+        <th nzWidth="13%" class="head-column">Application Description</th>
+        <th nzWidth="11%" class="head-column">Application Type</th>
+        <th nzWidth="11%" class="head-column">Operator</th>
+        <th nzWidth="11%" class="head-column">MaaS</th>
+        <th nzWidth="11%" class="head-column">Knowledge Base</th>
+        <th nzWidth="11%" class="head-column">Large Model</th>
+        <th nzWidth="11%" class="head-column">{{"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 class="column">{{i+1}}</td>
+          <td class="column">{{data.applicationName}}</td>
+          <td class="column">{{data.applicationDescription}}</td>
+          <td class="column">{{data.applicationType}}</td>
+          <td class="column">{{data.operatorName}}</td>
+          <td class="column">{{data.maaSPlatformName}}</td>
+          <td class="column">{{data.knowledgeBaseName}}</td>
+          <td class="column">{{data.largeModelName}}</td>
           <td>
              <i class="anticon anticon-menu-fold" (click)="displayApplicationDetails(data)"></i>
              <i class="anticon anticon-edit" (click)="edit(data)"></i>

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
index beefd0f..7d78a83 100644 (file)
--- a/usecaseui-portal/src/app/views/maas/build/application-management.component.less
+++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.less
@@ -14,6 +14,14 @@
       margin-top: 7px;
     }
   }
+  .head-column {
+    font-size: 20px;
+    word-break: break-word;
+  }
+
+  .column {
+    word-break: break-word;
+  }
   .anticon-edit,.anticon-delete,.anticon-menu-fold{
     font-size: 18px;
     margin-right: 10px;

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
index 00c0c40..0fb862a 100644 (file)
--- a/usecaseui-portal/src/app/views/maas/build/application-management.component.ts
+++ b/usecaseui-portal/src/app/views/maas/build/application-management.component.ts
@@ -86,7 +86,7 @@ export class ApplicationManagementComponent implements OnInit {
           this.applicationDetail = data.result_body;
         },
         () => {
-          this.message.error('Failed to obtain knowledge base data');
+          this.message.error('Failed to obtain application data');
         }
       )
   }
@@ -97,7 +97,7 @@ export class ApplicationManagementComponent implements OnInit {
   }
 
   showDeleteConfirm(data: Application): void {
-    this.modalService.error({
+    this.modalService.confirm({
       nzTitle: this.translate.instant('maas.deleteTitle'),
       nzContent: this.translate.instant('maas.application.deleteApplicationContent'),
       nzOkText: 'Yes',

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
index 26b672c..843387b 100644 (file)
--- 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
@@ -101,7 +101,8 @@ export class KnowledgeBaseManagementComponent implements OnInit {
       nzOkText: 'Yes',
       nzOkType: 'danger',
       nzOnOk: () => this.deleteKnowledgeBase(data),
-      nzCancelText: 'No'
+      nzCancelText: 'No',
+      nzIconType: 'warning',
     });
   }
 

diff --git a/usecaseui-portal/src/app/views/maas/maas.module.ts b/usecaseui-portal/src/app/views/maas/maas.module.ts
index 8c66690..d7aae67 100644 (file)
--- a/usecaseui-portal/src/app/views/maas/maas.module.ts
+++ b/usecaseui-portal/src/app/views/maas/maas.module.ts
@@ -15,7 +15,9 @@ import { EditKnowledgeBaseComponent } from './knowledge-base-management/edit-kno
 import { EditApplicationComponent } from './build/edit-application/edit-application.component';
 import { MaasService } from './maas-service.service';
 import { KnowledgeBaseService } from './knowledge-base-management/knowledge-base.service';
-
+import { MarkdownModule } from 'ngx-markdown';
+import { ClipboardModule } from 'ngx-clipboard';
+import { CodeBlockDirective } from './use/code-block.directive';
 @NgModule({
   providers: [
     MaasApi,
@@ -24,7 +26,9 @@ import { KnowledgeBaseService } from './knowledge-base-management/knowledge-base
   ],
   imports: [
     SharedModule,
-    MaasRoutingModule
+    MaasRoutingModule,
+    MarkdownModule.forChild(),
+    ClipboardModule
   ],
   declarations: [
     ApplicationManagementComponent,
@@ -37,7 +41,8 @@ import { KnowledgeBaseService } from './knowledge-base-management/knowledge-base
     CreateKnowledgeBaseComponent,
     KnowledgeBaseDetailComponent,
     EditKnowledgeBaseComponent,
-    EditApplicationComponent
+    EditApplicationComponent,
+    CodeBlockDirective
   ]
 })
 export class MaasModule { }

diff --git a/usecaseui-portal/src/app/views/maas/use/code-block.directive.spec.ts b/usecaseui-portal/src/app/views/maas/use/code-block.directive.spec.ts
new file mode 100644 (file)
index 0000000..296e9a5
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/use/code-block.directive.spec.ts
@@ -0,0 +1,8 @@
+import { CodeBlockDirective } from './code-block.directive';
+
+describe('CodeBlockDirective', () => {
+  it('should create an instance', () => {
+    const directive = new CodeBlockDirective();
+    expect(directive).toBeTruthy();
+  });
+});

diff --git a/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts b/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts
new file mode 100644 (file)
index 0000000..3124718
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts
@@ -0,0 +1,38 @@
+import { AfterViewChecked, AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { ClipboardService } from 'ngx-clipboard';
+
+@Directive({
+  selector: '[appCodeBlock]'
+})
+export class CodeBlockDirective implements AfterViewChecked {
+
+  constructor(private el: ElementRef, private renderer: Renderer2, private clipboardService: ClipboardService,
+    private message: NzMessageService, private translate: TranslateService
+  ) { }
+
+  ngAfterViewChecked() {
+    this.setCopyButton();
+  }
+
+setCopyButton() {
+  const preElements = this.el.nativeElement.querySelectorAll('pre');
+
+  preElements.forEach(pre => {
+    const codeElement = pre.querySelector('code');
+    const copyButtonExists = pre.querySelector('button.copy-button');
+    if (codeElement && !copyButtonExists) {
+      const copyButton = this.renderer.createElement('button');
+      this.renderer.addClass(copyButton, 'copy-button');
+      this.renderer.setProperty(copyButton, 'innerHTML', 'Copy');
+      this.renderer.listen(copyButton, 'click', () => {
+        this.clipboardService.copyFromContent(codeElement.innerText);
+        this.message.success(this.translate.instant('maas.copy_to_clipboard'));
+      });
+      this.renderer.insertBefore(pre, copyButton, codeElement);
+    }
+  });
+}
+
+}

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
index f8c6579..6509fbb 100644 (file)
--- a/usecaseui-portal/src/app/views/maas/use/use-application.component.html
+++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.html
@@ -34,7 +34,7 @@
                     </div>
                 </div>
                 <div class="question-container">
-                    <span class="question-text">{{ chat.question }}</span>
+                    <markdown class="question-text" [data]="chat.question"></markdown>
                 </div>
             </div>
             <br>
@@ -45,8 +45,11 @@
                         [nz-tooltip]="'maas.copy' | translate"></span>
                 </div>
                 <span class="answer-text">
-                    <span class="answer" [ngClass]="{'hidden-cursor': chat.status==='finished'}" #answerText
-                        id="answerText">{{chat.answer}}</span>
+                    <markdown appCodeBlock class="markdown answer-markdown" [ngClass]="{'hidden-cursor': chat.status==='finished'}" *ngIf="chat.answer else default" [data]="chat.answer"></markdown>
+                    <ng-template #default>
+                        <span class="answer default" [ngClass]="{'hidden-cursor': chat.status==='finished'}" #answerText>
+                        </span>
+                    </ng-template>
                 </span>
             </div>
             <br>

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
index c2f926f..bb2e0d1 100644 (file)
--- a/usecaseui-portal/src/app/views/maas/use/use-application.component.less
+++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.less
@@ -9,15 +9,11 @@
 }
 
 .fixed-select-wrapper {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1000;
+  padding: 20px 0 0 100px;
 }
 
 .chat-container {
-  margin: 60px 0;
+  margin: 20px 0;
   padding: 0 100px;
 }
 
@@ -43,59 +39,65 @@
   display: flex;
   border-radius: 8px;
   overflow: hidden;
-  border: 1px solid #fff;
   margin-right: 8px;
   height: 24px;
   margin-top:3px;
 }
 
-.question-icon-actions span:not(:first-child) {
-  border-left: 1px solid #fff;
-}
-
 .question-action {
   width: 24px;
   padding-top: 4px;
 }
 
 .question-container {
-  margin: 8px 0;
+  border-radius: 8px;
+  background-color: white;
 }
 
 .question-text {
-  background-color: white;
   font-size: 16px;
-  padding: 10px;
-  border-radius: 8px;
 }
 
 .answer-action {
   height: 24px;
   width: 24px;
-  border: 1px solid #fff;
   border-radius: 8px;
   padding-top: 3px;
 }
 
-#answerText {
+.answer {
   font-size: 16px;
-  padding: 10px;
   white-space: pre-line;
   width: auto;
   display: inline-block;
   position: relative;
-  min-height: 40px;
 }
 
-.answer::after {
+.answer::after{
+  content: '';
+  display: inline-block;
+  width: 2px;
+  height: 16px;
+  background-color: black;
+  position: absolute;
+  animation: blink 1s step-end infinite;
+  margin-top: -20px;
+}
+
+.answer-markdown::after {
   content: '';
   display: inline-block;
-  width: 1px;
+  width: 2px;
   height: 16px;
   background-color: black;
   position: absolute;
   animation: blink 1s step-end infinite;
-  margin-top: 5px;
+  margin-top: -10px;
+}
+
+.answer-markdown {
+  font-size: 16px;
+  position: relative;
 }
 
 .hidden-cursor::after {
@@ -107,6 +109,7 @@
   background-color: white;
   display: inline-block;
   border-radius: 8px;
+  padding: 8px;
 }
 
 .answer-container img, .answer-icon img, .question img{
@@ -219,4 +222,420 @@
   50% {
     background-color: black;
   }
+}
+
+.copy-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: #485264;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.default {
+  padding: 0 5px;
+}
+
+:host ::ng-deep .question-text p,
+:host ::ng-deep :host ::ng-deep .markdown p {
+  margin: 8px;
+}
+
+:host ::ng-deep .markdown ul,
+:host ::ng-deep .markdown ol {
+  padding-left: 14px;
+}
+
+:host ::ng-deep .markdown > *:first-child {
+  margin-top: 0 !important;
+}
+:host ::ng-deep .markdown > *:last-child {
+  margin-bottom: 0 !important;
+}
+:host ::ng-deep .markdown a.absent {
+  color: #cc0000;
+}
+:host ::ng-deep .markdown a.anchor {
+  bottom: 0;
+  cursor: pointer;
+  display: block;
+  left: 0;
+  margin-left: -30px;
+  padding-left: 30px;
+  position: absolute;
+  top: 0;
+}
+:host ::ng-deep .markdown h1,
+:host ::ng-deep .markdown h2,
+:host ::ng-deep .markdown h3,
+:host ::ng-deep .markdown h4,
+:host ::ng-deep .markdown h5,
+:host ::ng-deep .markdown h6 {
+  cursor: text;
+  font-weight: bold;
+  margin: 10px 0;
+  padding: 0;
+  position: relative;
+}
+:host ::ng-deep .markdown h1 .mini-icon-link,
+:host ::ng-deep .markdown h2 .mini-icon-link,
+:host ::ng-deep .markdown h3 .mini-icon-link,
+:host ::ng-deep .markdown h4 .mini-icon-link,
+:host ::ng-deep .markdown h5 .mini-icon-link,
+:host ::ng-deep .markdown h6 .mini-icon-link {
+  display: none;
+}
+:host ::ng-deep .markdown h1:hover a.anchor,
+:host ::ng-deep .markdown h2:hover a.anchor,
+:host ::ng-deep .markdown h3:hover a.anchor,
+:host ::ng-deep .markdown h4:hover a.anchor,
+:host ::ng-deep .markdown h5:hover a.anchor,
+:host ::ng-deep .markdown h6:hover a.anchor {
+  line-height: 1;
+  margin-left: -22px;
+  padding-left: 0;
+  text-decoration: none;
+  top: 15%;
+}
+:host ::ng-deep .markdown h1:hover a.anchor .mini-icon-link,
+:host ::ng-deep .markdown h2:hover a.anchor .mini-icon-link,
+:host ::ng-deep .markdown h3:hover a.anchor .mini-icon-link,
+:host ::ng-deep .markdown h4:hover a.anchor .mini-icon-link,
+:host ::ng-deep .markdown h5:hover a.anchor .mini-icon-link,
+:host ::ng-deep .markdown h6:hover a.anchor .mini-icon-link {
+  display: inline-block;
+}
+:host ::ng-deep .markdown h1 tt,
+:host ::ng-deep .markdown h1 code,
+:host ::ng-deep .markdown h2 tt,
+:host ::ng-deep .markdown h2 code,
+:host ::ng-deep .markdown h3 tt,
+:host ::ng-deep .markdown h3 code,
+:host ::ng-deep .markdown h4 tt,
+:host ::ng-deep .markdown h4 code,
+:host ::ng-deep .markdown h5 tt,
+:host ::ng-deep .markdown h5 code,
+:host ::ng-deep .markdown h6 tt,
+:host ::ng-deep .markdown h6 code {
+  font-size: inherit;
+}
+:host ::ng-deep .markdown h1 {
+  font-size: 1.75rem;
+}
+:host ::ng-deep .markdown h2 {
+  font-size: 1.5rem;
+}
+:host ::ng-deep .markdown h3 {
+  font-size: 1.25rem;
+}
+:host ::ng-deep .markdown h4 {
+  font-size: 1rem;
+}
+:host ::ng-deep .markdown h5 {
+  font-size: 14px;
+}
+:host ::ng-deep .markdown h6 {
+  font-size: 12px;
+}
+:host ::ng-deep .markdown p,
+:host ::ng-deep .markdown blockquote,
+:host ::ng-deep .markdown ul,
+:host ::ng-deep .markdown ol,
+:host ::ng-deep .markdown dl,
+:host ::ng-deep .markdown table,
+:host ::ng-deep .markdown pre {
+  margin: 14px 0;
+}
+:host ::ng-deep .markdown > h2:first-child,
+:host ::ng-deep .markdown > h1:first-child,
+:host ::ng-deep .markdown > h1:first-child + h2,
+:host ::ng-deep .markdown > h3:first-child,
+:host ::ng-deep .markdown > h4:first-child,
+:host ::ng-deep .markdown > h5:first-child,
+:host ::ng-deep .markdown > h6:first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+:host ::ng-deep .markdown a:first-child h1,
+:host ::ng-deep .markdown a:first-child h2,
+:host ::ng-deep .markdown a:first-child h3,
+:host ::ng-deep .markdown a:first-child h4,
+:host ::ng-deep .markdown a:first-child h5,
+:host ::ng-deep .markdown a:first-child h6 {
+  margin-top: 0;
+  padding-top: 0;
+}
+:host ::ng-deep .markdown h1 + p,
+:host ::ng-deep .markdown h2 + p,
+:host ::ng-deep .markdown h3 + p,
+:host ::ng-deep .markdown h4 + p,
+:host ::ng-deep .markdown h5 + p,
+:host ::ng-deep .markdown h6 + p {
+  margin-top: 0;
+}
+:host ::ng-deep .markdown li p.first {
+  display: inline-block;
+}
+:host ::ng-deep .markdown ul,
+:host ::ng-deep .markdown ol {
+  padding-left: 2em;
+}
+:host ::ng-deep .markdown ul.no-list,
+:host ::ng-deep .markdown ol.no-list {
+  list-style-type: none;
+  padding: 0;
+}
+:host ::ng-deep .markdown ul li > *:first-child,
+:host ::ng-deep .markdown ol li > *:first-child {
+  margin-top: 0;
+}
+:host ::ng-deep .markdown ul,
+:host ::ng-deep .markdown ol {
+  padding-left: 14px;
+}
+:host ::ng-deep .markdown dl {
+  padding: 0;
+}
+:host ::ng-deep .markdown dl dt {
+  font-size: 14px;
+  font-style: italic;
+  font-weight: bold;
+  margin: 15px 0 5px;
+  padding: 0;
+}
+:host ::ng-deep .markdown dl dt:first-child {
+  padding: 0;
+}
+:host ::ng-deep .markdown dl dt > *:first-child {
+  margin-top: 0;
+}
+:host ::ng-deep .markdown dl dt > *:last-child {
+  margin-bottom: 0;
+}
+:host ::ng-deep .markdown dl dd {
+  margin: 0 0 15px;
+  padding: 0 15px;
+}
+:host ::ng-deep .markdown dl dd > *:first-child {
+  margin-top: 0;
+}
+:host ::ng-deep .markdown dl dd > *:last-child {
+  margin-bottom: 0;
+}
+:host ::ng-deep .markdown blockquote {
+  border-left: 4px solid #dddddd;
+  color: #777777;
+  padding: 0 15px;
+}
+:host ::ng-deep .markdown blockquote > *:first-child {
+  margin-top: 0;
+}
+:host ::ng-deep .markdown blockquote > *:last-child {
+  margin-bottom: 0;
+}
+:host ::ng-deep .markdown table {
+  width: 100%;
+}
+:host ::ng-deep .markdown table th {
+  font-weight: bold;
+}
+:host ::ng-deep .markdown table th,
+:host ::ng-deep .markdown table td {
+  padding: 6px 13px;
+}
+:host ::ng-deep .markdown table tr {
+  background-color: #ffffff;
+}
+:host ::ng-deep .markdown table tr:nth-child(2n) {
+  background-color: #f0f0f0;
+}
+:host ::ng-deep .markdown img {
+  max-width: 100%;
+}
+:host ::ng-deep .markdown span.frame {
+  display: block;
+  overflow: hidden;
+}
+:host ::ng-deep .markdown span.frame > span {
+  border: 1px solid #dddddd;
+  display: block;
+  float: left;
+  margin: 13px 0 0;
+  overflow: hidden;
+  padding: 7px;
+  width: auto;
+}
+:host ::ng-deep .markdown span.frame span img {
+  display: block;
+  float: left;
+}
+:host ::ng-deep .markdown span.frame span span {
+  clear: both;
+  color: #333333;
+  display: block;
+  padding: 5px 0 0;
+}
+:host ::ng-deep .markdown span.align-center {
+  clear: both;
+  display: block;
+  overflow: hidden;
+}
+:host ::ng-deep .markdown span.align-center > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: center;
+}
+:host ::ng-deep .markdown span.align-center span img {
+  margin: 0 auto;
+  text-align: center;
+}
+:host ::ng-deep .markdown span.align-right {
+  clear: both;
+  display: block;
+  overflow: hidden;
+}
+:host ::ng-deep .markdown span.align-right > span {
+  display: block;
+  margin: 13px 0 0;
+  overflow: hidden;
+  text-align: right;
+}
+:host ::ng-deep .markdown span.align-right span img {
+  margin: 0;
+  text-align: right;
+}
+:host ::ng-deep .markdown span.float-left {
+  display: block;
+  float: left;
+  margin-right: 13px;
+  overflow: hidden;
+}
+:host ::ng-deep .markdown span.float-left span {
+  margin: 13px 0 0;
+}
+:host ::ng-deep .markdown span.float-right {
+  display: block;
+  float: right;
+  margin-left: 13px;
+  overflow: hidden;
+}
+:host ::ng-deep .markdown span.float-right > span {
+  display: block;
+  margin: 13px auto 0;
+  overflow: hidden;
+  text-align: right;
+}
+:host ::ng-deep .markdown code,
+:host ::ng-deep .markdown tt {
+  border: 1px solid #dee0e2;
+  background-color: #f4f6f8;
+  border-radius: 3px;
+  margin: 0 2px;
+  padding: 0 5px;
+}
+:host ::ng-deep .markdown pre > code {
+  background: none repeat scroll 0 0 transparent;
+  border: medium none;
+  margin: 0;
+  padding: 0;
+}
+:host ::ng-deep .markdown .highlight pre,
+:host ::ng-deep .markdown pre {
+  border: 1px solid #cccccc;
+  border-radius: 3px 3px 3px 3px;
+  font-size: 14px;
+  line-height: 19px;
+  overflow: auto;
+  padding: 6px 10px;
+}
+:host ::ng-deep .markdown pre code,
+:host ::ng-deep .markdown pre tt {
+  background-color: transparent !important;
+  border: medium none;
+}
+:host ::ng-deep .markdown hr {
+  margin: 10px 0;
+  border-color: #C4CBD7;
+}
+:host ::ng-deep .markdown {
+  tab-size: 4;
+  word-spacing: normal;
+  width: 100%;
+  font-size: 14px;
+
+  * {
+    word-break: break-word;
+  }
+
+  pre {
+    display: block;
+    width: 100%;
+    padding: 15px;
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    // background-color: gray !important;
+    overflow-x: auto;
+    color: gray;
+    position: relative;
+  }
+
+  pre code {
+    width: 100%;
+  }
+
+  a {
+    text-decoration: underline;
+    color: #2B5FD9;
+  }
+
+  table {
+    border-collapse: separate;
+    border-spacing: 0px;
+    color: #383F50;
+
+    thead tr:first-child th {
+      border-bottom-width: 1px;
+      border-left-width: 1px;
+      border-top-width: 1px;
+      border-color: #ccc;
+      background-color: rgba(236, 236, 241, 0.2);
+      overflow: hidden;
+
+      &:first-child {
+        border-top-left-radius: 0.375rem;
+      }
+      &:last-child {
+        border-right-width: 1px;
+        border-top-right-radius: 0.375rem;
+      }
+    }
+
+    td {
+      border-bottom-width: 1px;
+      border-left-width: 1px;
+      border-color: #ccc;
+
+      &:last-of-type {
+        border-right-width: 1px;
+      }
+    }
+
+    tbody tr:last-child {
+      overflow: hidden;
+      td {
+        &:first-child {
+          border-bottom-left-radius: 0.375rem;
+        }
+        &:last-child {
+          border-bottom-right-radius: 0.375rem;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file

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 e73463d..b02a2d6 100644 (file)
--- a/usecaseui-portal/src/app/views/maas/use/use-application.component.ts
+++ b/usecaseui-portal/src/app/views/maas/use/use-application.component.ts
@@ -13,7 +13,6 @@ export type Chat = { question: string, answer: string, questionId: string, statu
   styleUrls: ['./use-application.component.less']
 })
 export class UseApplicationComponent implements OnInit {
-
   question: string;
   communicationMessage: string;
   chatHistory: Chat[] = [];
@@ -31,15 +30,14 @@ export class UseApplicationComponent implements OnInit {
     private route: ActivatedRoute,
     private myhttp: MaasApi,
     private translate: TranslateService,
-    private maasService: MaasService,
-    private renderer: Renderer2
+    private maasService: MaasService
   ) { }
 
-  ngOnInit() {
-    this.fetchAllApplication();
+  async ngOnInit() {
+    await this.fetchAllApplication();
     this.route.queryParams.subscribe(params => {
       this.queryParams = params;
-      this.selectedName = this.queryParams.id;
+      this.selectedName = this.queryParams.id || this.selectedName;
     });
   }
   
@@ -102,20 +100,17 @@ export class UseApplicationComponent implements OnInit {
     chat.answer += event.data.replace(/__SPACE__/g, ' ');
   }
 
-  fetchAllApplication(): void {
-    this.myhttp.getAllApplication()
-      .subscribe(
-        (data) => {
-          this.options = data.result_body.map(item => ({
-            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 fetchAllApplication(): Promise<void> {
+    try {
+      const data = await this.myhttp.getAllApplication().toPromise();
+      this.options = data.result_body.map(item => ({
+        nzValue: item.applicationId,
+        nzLabel: item.applicationName
+      }));
+      this.selectedName = this.options.length > 0 ? this.options[0].nzValue : '';
+    } catch {
+      this.message.error('Failed to obtain intent data');
+    }
   }
 
   async copy(content: string): Promise<void> {