parse markdown

client/src/app/taskbase-ui/tb-chat-message/tb-chat-message.component.html

@@ -12,7 +12,9 @@
       width="32"
       height="32"
     />
-    <div *ngIf="message.text">{{ message.text }}</div>
+    <div *ngIf="message.text">
+      <div *ngIf="formattedMessage" [innerHTML]="formattedMessage"></div>
+    </div>
     <div *ngIf="message.audio">
       <audio [src]="message.audio" controls></audio>
     </div>

client/src/app/taskbase-ui/tb-chat-message/tb-chat-message.component.ts

@@ -1,5 +1,7 @@
-import { Component, Input } from '@angular/core';
-import { ChatMessage } from '../tb-chat-message-list/tb-chat-message-list.component';
+import {Component, Input, SimpleChanges} from '@angular/core';
+import {ChatMessage} from '../tb-chat-message-list/tb-chat-message-list.component';
+import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
+import {marked} from "marked";
 
 @Component({
   selector: 'tb-chat-message',
@@ -11,4 +13,16 @@ export class TbChatMessageComponent {
     isTaskbase: true,
     text: 'Default',
   };
+
+  formattedMessage: SafeHtml | null = null;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  async ngOnChanges(changes: SimpleChanges): Promise<void> {
+    if (changes['message'] && this.message.text) {
+      const markdown = await marked(this.message.text);
+      console.log("markdown: " + markdown);
+      this.formattedMessage = this.sanitizer.bypassSecurityTrustHtml(markdown);
+    }
+  }
 }

package.json

@@ -23,5 +23,9 @@
     "husky": "^8.0.3",
     "prettier": "^2.8.5",
     "pretty-quick": "^3.1.3"
+  },
+  "dependencies": {
+    "@angular/platform-browser": "^19.1.1",
+    "marked": "^15.0.6"
   }
 }