Use the markdown pipe

src-ui/src/app/components/chat/chat/chat.component.html

@@ -9,10 +9,12 @@
         @for (message of messages(); track message) {
           <div class="message d-flex flex-row small" [class.justify-content-end]="message.role === 'user'">
             <div class="p-2 m-2" [class.bg-body]="message.role === 'user'">
-              <span class="text-break">
-                {{ message.content }}
+              @if (message.role === 'assistant') {
+                <div class="chat-markdown text-break" [innerHTML]="message.content | markdown"></div>
                 @if (message.isStreaming) { <span class="blinking-cursor">|</span> }
-              </span>
+              } @else {
+                <span class="text-break">{{ message.content }}</span>
+              }
               @if (message.role === 'assistant' && message.references?.length) {
                 <div class="chat-references list-group mt-3">
                   @for (reference of message.references; track reference.id) {

src-ui/src/app/components/chat/chat/chat.component.spec.ts

@@ -207,4 +207,18 @@ describe('ChatComponent', () => {
     component.searchInputKeyDown(event)
     expect(component.sendMessage).not.toHaveBeenCalled()
   })
+
+  it('should render markdown for assistant messages only', () => {
+    component.messages.set([
+      { role: 'user', content: '**user**' },
+      { role: 'assistant', content: '**assistant** <script>x</script>' },
+    ])
+    fixture.detectChanges()
+    const el: HTMLElement = fixture.nativeElement
+    expect(el.querySelector('.chat-markdown strong')?.textContent).toBe(
+      'assistant'
+    )
+    expect(el.querySelector('.chat-markdown script')).toBeNull()
+    expect(el.textContent).toContain('**user**')
+  })
 })

src-ui/src/app/components/chat/chat/chat.component.ts

@@ -10,6 +10,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NavigationEnd, Router, RouterModule } from '@angular/router'
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { MarkdownPipe } from 'src/app/pipes/markdown.pipe'
 import { filter, map } from 'rxjs'
 import {
   ChatMessage,
@@ -25,6 +26,7 @@ import {
     RouterModule,
     NgxBootstrapIconsModule,
     NgbDropdownModule,
+    MarkdownPipe,
   ],
   templateUrl: './chat.component.html',
   styleUrl: './chat.component.scss',