update: page-inquery with fm-markdown-preview

wisdom-app/src/app/page-inquiry/page-inquiry.component.html

@@ -12,6 +12,13 @@
   <ion-button (click)="sendMessage()" expand="block">初步诊断</ion-button>
   
   <!-- 展示：返回消息内容 -->
-  <div>{{responseMsg}}</div>
+  <!-- 消息传输过程中，实时预览 -->
+  @if(!isComplete){
+    <div>{{responseMsg}}</div>
+  }
+  <!-- 消息传输完成后，实时预览Markdown格式 -->
+  @if(isComplete){
+    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+  }
   
 </ion-content>

wisdom-app/src/app/page-inquiry/page-inquiry.component.ts

@@ -1,14 +1,17 @@
 import { Component, OnInit } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput } from '@ionic/angular/standalone';
 /** 引用：从fmode-ng库引用FmodeChatCompletion类 */
-import { FmodeChatCompletion } from 'fmode-ng';
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
   selector: 'app-page-inquiry',
   templateUrl: './page-inquiry.component.html',
   styleUrls: ['./page-inquiry.component.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonTextarea,IonInput],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonTextarea,IonInput,
+    // 引入fm-markdown-preview组件模块
+    MarkdownPreviewModule
+  ],
 })
 export class PageInquiryComponent  implements OnInit {
   constructor() {}
@@ -26,6 +29,7 @@ export class PageInquiryComponent  implements OnInit {
   // 属性：组件内用于展示消息内容的变量
   responseMsg:any = ""
   // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成
   sendMessage(){
     console.log("create")
 
@@ -43,6 +47,9 @@ export class PageInquiryComponent  implements OnInit {
       console.log(message.content)
       // 赋值消息内容给组件内属性
       this.responseMsg = message.content
+      if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true
+      }
     })
   }
 }