Tweak cursor, make sources appear after its done streaming

src-ui/jest.config.js

@@ -26,7 +26,7 @@ module.exports = {
     'abstract-paperless-service',
   ],
   transformIgnorePatterns: [
-    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|normalize-diacritics|@angular/common/locales/.*\\.js$))',
+    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|normalize-diacritics|marked|@angular/common/locales/.*\\.js$))',
   ],
   moduleNameMapper: {
     ...esmPreset.moduleNameMapper,

src-ui/package.json

@@ -30,6 +30,7 @@
     "bootstrap": "^5.3.8",
     "file-saver": "^2.0.5",
     "lodash-es": "^4.18.1",
+    "marked": "~18.0.14",
     "mime-names": "^1.0.0",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^10.1.0",

src-ui/pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       lodash-es:
         specifier: ^4.18.1
         version: 4.18.1
+      marked:
+        specifier: ~18.0.14
+        version: 18.0.14
       mime-names:
         specifier: ^1.0.0
         version: 1.0.0
@@ -3226,6 +3229,11 @@ packages:
   make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
 
+  marked@18.0.14:
+    resolution: {integrity: sha512-mBHK6FBHuBAlhgRe88w9F0O1AbwwXJUcQibUbC/QcdTbVGAD7aWza+xt3N6oT/jCZx3/OMeS+8rnuiHZcQ9s7A==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   material-colors@1.2.6:
     resolution: {integrity: sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==}
 
@@ -7409,6 +7417,8 @@ snapshots:
 
   make-error@1.3.6: {}
 
+  marked@18.0.14: {}
+
   material-colors@1.2.6: {}
 
   merge-stream@2.0.0: {}

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

@@ -1,49 +1,85 @@
 
-<li ngbDropdown class="nav-item" (openChange)="onOpenChange($event)">
+<li ngbDropdown class="nav-item" display="dynamic" placement="bottom-end" [popperOptions]="popperOptions" (openChange)="onOpenChange($event)">
   <button class="btn navbar-action border-0" id="chatDropdown" ngbDropdownToggle aria-label="Chat" i18n-aria-label>
     <i-bs width="1.3em" height="1.3em" name="chatSquareDots"></i-bs>
   </button>
-  <div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="chatDropdown">
-    <div class="chat-container bg-light p-2">
-      <div class="chat-messages font-monospace small">
-        @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.isStreaming) { <span class="blinking-cursor">|</span> }
-              </span>
-              @if (message.role === 'assistant' && message.references?.length) {
-                <div class="chat-references list-group mt-3">
-                  @for (reference of message.references; track reference.id) {
-                    <a class="list-group-item list-group-item-action d-flex text-primary text-break" [routerLink]="['/documents', reference.id]">
-                      <i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{ reference.title }}</span>
-                    </a>
-                  }
-                </div>
-              }
-            </div>
-          </div>
+  <div ngbDropdownMenu class="dropdown-menu-end shadow p-0 overflow-hidden" aria-labelledby="chatDropdown">
+    <div class="d-flex align-items-center border-bottom px-3 py-2">
+      <i-bs width="1em" height="1em" name="stars" class="text-primary me-2"></i-bs>
+      <span class="fw-semibold small">
+        @if (documentId()) {
+          <ng-container i18n>Ask about this document</ng-container>
+        } @else {
+          <ng-container i18n>Ask about your documents</ng-container>
         }
-        <div #scrollAnchor></div>
-      </div>
+      </span>
+      @if (messages().length) {
+        <button class="btn btn-sm btn-link text-muted ms-auto p-0" type="button" (click)="clearChat()" title="Clear chat" i18n-title>
+          <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>
+        </button>
+      }
+    </div>
 
-      <form class="chat-input">
-        <label class="visually-hidden" for="chatInput" i18n>Message</label>
-        <div class="input-group">
-          <input
-            #chatInput
-            id="chatInput"
-            class="form-control form-control-sm" name="chatInput" type="text"
+    <div class="chat-messages small px-2">
+      @if (!messages().length) {
+        <p class="text-muted text-center py-4 px-3 mb-0" i18n>Answers come from your documents, with links to their sources.</p>
+      }
+      @for (message of messages(); track message) {
+        <div class="message d-flex flex-row" [class.justify-content-end]="message.role === 'user'" [class.mt-3]="message.role === 'user' && !$first">
+          <div class="p-2 m-2" [class.bg-body-secondary]="message.role === 'user'" [class.rounded-3]="message.role === 'user'" [class.flex-grow-1]="message.role === 'assistant'">
+            @if (message.isStreaming && !message.content) {
+              <div class="d-flex align-items-center text-muted">
+                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                @if (slowResponse()) {
+                  <ng-container i18n>Still thinking...</ng-container>
+                } @else {
+                  <ng-container i18n>Thinking...</ng-container>
+                }
+              </div>
+            } @else if (message.role === 'assistant') {
+              <div class="chat-markdown text-break text-wrap" [class.streaming]="message.isStreaming" [innerHTML]="message.content | markdown"></div>
+            } @else {
+              <span class="text-break">{{ message.content }}</span>
+            }
+            @if (message.role === 'assistant' && !message.isStreaming && message.references?.length) {
+              <div class="chat-references list-group mt-3">
+                <div class="list-group-item text-muted small py-1" i18n>Sources</div>
+                @for (reference of message.references; track reference.id) {
+                  <a class="list-group-item list-group-item-action d-flex align-items-center text-primary" [routerLink]="['/documents', reference.id]" [title]="reference.title">
+                    <i-bs width="0.9em" height="0.9em" name="file-text" class="me-2 flex-shrink-0"></i-bs><span class="text-truncate">{{ reference.title }}</span>
+                  </a>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      }
+      <div #scrollAnchor></div>
+    </div>
+
+    <form class="chat-input border-top p-2">
+      <label class="visually-hidden" for="chatInput" i18n>Message</label>
+      <div class="input-group">
+        <input
+          #chatInput
+          id="chatInput"
+          class="form-control" name="chatInput" type="text"
             [placeholder]="placeholder"
             [disabled]="loading()"
             [ngModel]="input()"
             (ngModelChange)="input.set($event)"
             (keydown)="searchInputKeyDown($event)"
-            />
-          <button class="btn btn-sm btn-secondary" type="button" (click)="sendMessage()" [disabled]="loading()">Send</button>
-        </div>
-      </form>
-    </div>
+          />
+        @if (loading()) {
+          <button class="btn btn-outline-secondary" type="button" (click)="stopStreaming()" title="Stop" i18n-title aria-label="Stop" i18n-aria-label>
+            <i-bs width="1em" height="1em" name="x-lg"></i-bs>
+          </button>
+        } @else {
+          <button class="btn btn-primary" type="button" (click)="sendMessage()" title="Send" i18n-title aria-label="Send" i18n-aria-label>
+            <i-bs width="1em" height="1em" name="arrow-return-left"></i-bs>
+          </button>
+        }
+      </div>
+    </form>
   </div>
 </li>

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

@@ -1,17 +1,13 @@
 .dropdown-menu {
-  width: var(--pngx-toast-max-width);
+  width: min(36rem, calc(100vw - 20px));
 }
 
 .chat-messages {
-  max-height: 350px;
+  max-height: min(60dvh, 36rem);
   overflow-y: auto;
   white-space: pre-wrap;
 }
 
-.chat-references {
-  font-family: var(--bs-font-sans-serif);
-}
-
 .dropdown-toggle::after {
   display: none;
 }
@@ -20,23 +16,44 @@
   white-space: initial;
 }
 
-@media screen and (max-width: 400px) {
-  :host ::ng-deep .dropdown-menu-end {
-    right: -3rem;
+@media screen and (max-width: 575.98px) {
+  .chat-messages {
+    max-height: calc(100dvh - 12rem);
   }
 }
 
-.blinking-cursor {
-  font-weight: bold;
-  font-size: 1.2em;
-  animation: blink 1s step-end infinite;
+.chat-markdown.streaming ::ng-deep {
+  > :last-child:not(ul, ol, table)::after,
+  > :is(ul, ol):last-child > li:last-child::after {
+    content: '';
+    display: inline-block;
+    width: 2px;
+    height: 1.05em;
+    margin-left: 2px;
+    background-color: currentColor;
+    vertical-align: -0.15em;
+    animation: blink 1s step-end infinite;
+  }
 }
 
 @keyframes blink {
-  from, to {
+  50% {
     opacity: 0;
   }
-  50% {
-    opacity: 1;
+}
+
+.chat-markdown ::ng-deep {
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 1em;
+    font-weight: bold;
+  }
+
+  th, td {
+    padding: 0.15rem 0.4rem;
+    border: 1px solid var(--bs-border-color);
+  }
+
+  > :last-child {
+    margin-bottom: 0;
   }
 }

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

@@ -80,8 +80,16 @@ describe('ChatComponent', () => {
     expect(component.messages()[0].content).toBe('Hello')
     expect(component.loading()).toBe(true)
 
+    fixture.detectChanges()
+    const messagesEl = fixture.nativeElement.querySelector('.chat-messages')
+    expect(messagesEl.querySelector('.spinner-border')).not.toBeNull()
+    expect(messagesEl.textContent).toContain('Thinking...')
+
     mockStream$.next('Hi')
     expect(component.messages()[1].content).toBe('H')
+    fixture.detectChanges()
+    expect(messagesEl.querySelector('.spinner-border')).toBeNull()
+    expect(messagesEl.querySelector('.chat-markdown.streaming')).not.toBeNull()
     mockStream$.next('Hi there')
     // advance time to process the typewriter effect
     await jest.runAllTimersAsync()
@@ -96,6 +104,8 @@ describe('ChatComponent', () => {
     await fixture.whenStable()
     expect(component.loading()).toBe(false)
     expect(component.messages()[1].isStreaming).toBe(false)
+    fixture.detectChanges()
+    expect(messagesEl.querySelector('.chat-markdown.streaming')).toBeNull()
     expect(fixture.nativeElement.querySelector('#chatInput').disabled).toBe(
       false
     )
@@ -123,6 +133,10 @@ describe('ChatComponent', () => {
     mockStream$.next(
       `Hi there${CHAT_METADATA_DELIMITER}{"references":[{"id":42,"title":"Bread Recipe"}]}`
     )
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('.chat-references')).toBeNull()
+
+    mockStream$.complete()
     jest.advanceTimersByTime(1000)
     fixture.detectChanges()
 
@@ -156,13 +170,96 @@ describe('ChatComponent', () => {
     component.input.set('Hello')
     component.sendMessage()
 
+    mockStream$.next('Partial')
     mockStream$.error('Error')
-    expect(component.messages()[1].content).toContain(
-      '⚠️ Error receiving response.'
+    expect(component.messages()[1].content).toBe(
+      'Partial\n\n⚠️ Error receiving response.'
     )
     expect(component.loading()).toBe(false)
   })
 
+  it('should keep streaming until the typewriter catches up', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+
+    mockStream$.next('Hi there')
+    mockStream$.complete()
+    expect(component.messages()[1].isStreaming).toBe(true)
+    expect(component.loading()).toBe(true)
+
+    jest.advanceTimersByTime(1000)
+    expect(component.messages()[1].content).toBe('Hi there')
+    expect(component.messages()[1].isStreaming).toBe(false)
+    expect(component.loading()).toBe(false)
+  })
+
+  it('should show a slow response message while waiting', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+    fixture.detectChanges()
+    const messagesEl = fixture.nativeElement.querySelector('.chat-messages')
+    expect(messagesEl.textContent).not.toContain('Still thinking...')
+
+    jest.advanceTimersByTime(8000)
+    fixture.detectChanges()
+    expect(messagesEl.textContent).toContain('Still thinking...')
+
+    mockStream$.next('Hi')
+    expect(component.slowResponse()).toBe(false)
+  })
+
+  it('should stop streaming and keep the partial response', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+    fixture.detectChanges()
+    const stopButton = fixture.nativeElement.querySelector('.chat-input button')
+    expect(stopButton.getAttribute('aria-label')).toBe('Stop')
+
+    mockStream$.next('Hi there')
+    jest.advanceTimersByTime(20)
+    stopButton.click()
+
+    expect(mockStream$.observed).toBe(false)
+    expect(component.messages()[1].content).toBe('Hi there')
+    expect(component.messages()[1].isStreaming).toBe(false)
+    expect(component.loading()).toBe(false)
+
+    jest.advanceTimersByTime(1000)
+    expect(component.messages()[1].content).toBe('Hi there')
+  })
+
+  it('should drop the empty response when stopped before any content', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+    component.stopStreaming()
+
+    expect(component.messages()).toHaveLength(1)
+    expect(component.loading()).toBe(false)
+    component.stopStreaming() // no-op once stopped
+    expect(component.messages()).toHaveLength(1)
+  })
+
+  it('should clear the conversation', () => {
+    component.input.set('Hello')
+    component.sendMessage()
+    mockStream$.next('Hi there')
+    fixture.detectChanges()
+
+    fixture.nativeElement.querySelector('button[title="Clear chat"]').click()
+    expect(component.messages()).toHaveLength(0)
+    expect(component.loading()).toBe(false)
+    expect(mockStream$.observed).toBe(false)
+
+    fixture.detectChanges()
+    jest.advanceTimersByTime(10)
+    expect(document.activeElement).toBe(
+      fixture.nativeElement.querySelector('#chatInput')
+    )
+    expect(fixture.nativeElement.textContent).toContain(
+      'Answers come from your documents'
+    )
+  })
+
   it('should enqueue typewriter chunks correctly', () => {
     const message = { content: '', role: 'assistant', isStreaming: true }
     component.enqueueTypewriter(null, message as any) // coverage for null
@@ -207,4 +304,33 @@ 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**')
+  })
+
+  it('should keep the destination hostname visible after sanitizing chat links', () => {
+    component.messages.set([
+      {
+        role: 'assistant',
+        content:
+          '[View original document](https://otherdomain.example/?data=secret)',
+      },
+    ])
+    fixture.detectChanges()
+    const el: HTMLElement = fixture.nativeElement
+    const link = el.querySelector('.chat-markdown a')
+    expect(link?.textContent).toBe('View original document')
+    expect(link?.nextElementSibling?.textContent).toBe('(otherdomain.example)')
+  })
 })

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

@@ -10,12 +10,16 @@ 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 { filter, map } from 'rxjs'
+import { filter, map, Subscription } from 'rxjs'
+import { MarkdownPipe } from 'src/app/pipes/markdown.pipe'
 import {
   ChatMessage,
   ChatService,
   parseChatResponse,
 } from 'src/app/services/chat.service'
+import { pngxPopperOptions } from 'src/app/utils/popper-options'
+
+const SLOW_RESPONSE_DELAY_MS = 8000
 
 @Component({
   selector: 'pngx-chat',
@@ -25,6 +29,7 @@ import {
     RouterModule,
     NgxBootstrapIconsModule,
     NgbDropdownModule,
+    MarkdownPipe,
   ],
   templateUrl: './chat.component.html',
   styleUrl: './chat.component.scss',
@@ -34,6 +39,8 @@ export class ChatComponent implements OnInit {
   readonly loading = signal(false)
   readonly input = signal('')
   readonly documentId = signal<number>(undefined)
+  readonly slowResponse = signal(false)
+  public popperOptions = pngxPopperOptions
 
   private chatService: ChatService = inject(ChatService)
   private router: Router = inject(Router)
@@ -43,6 +50,11 @@ export class ChatComponent implements OnInit {
 
   private typewriterBuffer: string[] = []
   private typewriterActive = false
+  private typewriterTimeout: ReturnType<typeof setTimeout>
+  private streamSubscription: Subscription
+  private streamingMessage: ChatMessage
+  private streamFinished = false
+  private slowResponseTimeout: ReturnType<typeof setTimeout>
 
   public get placeholder(): string {
     return this.documentId()
@@ -81,47 +93,96 @@ export class ChatComponent implements OnInit {
     }
     this.messages.update((messages) => [...messages, assistantMessage])
     this.loading.set(true)
+    this.streamingMessage = assistantMessage
+    this.streamFinished = false
+    this.slowResponseTimeout = setTimeout(
+      () => this.slowResponse.set(true),
+      SLOW_RESPONSE_DELAY_MS
+    )
 
     let lastVisibleContent = ''
 
-    this.chatService.streamChat(this.documentId(), this.input()).subscribe({
-      next: (chunk) => {
-        const nextResponse = parseChatResponse(chunk)
+    this.streamSubscription = this.chatService
+      .streamChat(this.documentId(), this.input())
+      .subscribe({
+        next: (chunk) => {
+          this.clearSlowResponse()
+          const nextResponse = parseChatResponse(chunk)
 
-        if (nextResponse.content.length < lastVisibleContent.length) {
-          this.resetTypewriter(assistantMessage, nextResponse.content)
-          lastVisibleContent = nextResponse.content
-        } else {
-          const visibleDelta = nextResponse.content.substring(
-            lastVisibleContent.length
-          )
-          lastVisibleContent = nextResponse.content
-          this.enqueueTypewriter(visibleDelta, assistantMessage)
-        }
+          if (nextResponse.content.length < lastVisibleContent.length) {
+            this.resetTypewriter(assistantMessage, nextResponse.content)
+            lastVisibleContent = nextResponse.content
+          } else {
+            const visibleDelta = nextResponse.content.substring(
+              lastVisibleContent.length
+            )
+            lastVisibleContent = nextResponse.content
+            this.enqueueTypewriter(visibleDelta, assistantMessage)
+          }
 
-        assistantMessage.references = nextResponse.references
-        this.notifyMessagesChanged()
-      },
-      error: () => {
-        assistantMessage.content += '\n\n⚠️ Error receiving response.'
-        assistantMessage.isStreaming = false
-        this.notifyMessagesChanged()
-        this.loading.set(false)
-      },
-      complete: () => {
-        assistantMessage.isStreaming = false
-        this.notifyMessagesChanged()
-        this.loading.set(false)
-        this.scrollToBottom()
-      },
-    })
+          assistantMessage.references = nextResponse.references
+          this.notifyMessagesChanged()
+        },
+        error: () => {
+          this.flushTypewriter(assistantMessage)
+          assistantMessage.content += '\n\n⚠️ Error receiving response.'
+          this.finishStreaming(assistantMessage)
+        },
+        complete: () => {
+          // let the typewriter catch up before hiding the cursor
+          this.streamFinished = true
+          if (!this.typewriterActive) this.finishStreaming(assistantMessage)
+        },
+      })
 
     this.input.set('')
   }
 
-  private resetTypewriter(message: ChatMessage, content: string): void {
+  stopStreaming(): void {
+    const message = this.streamingMessage
+    if (!message?.isStreaming) return
+
+    this.streamSubscription?.unsubscribe()
+    this.flushTypewriter(message)
+    if (!message.content) {
+      this.messages.update((messages) => messages.filter((m) => m !== message))
+    }
+    this.finishStreaming(message)
+  }
+
+  clearChat(): void {
+    this.stopStreaming()
+    this.messages.set([])
+    setTimeout(() => this.chatInput?.nativeElement.focus())
+  }
+
+  private finishStreaming(message: ChatMessage): void {
+    this.clearSlowResponse()
+    this.streamFinished = false
+    message.isStreaming = false
+    this.notifyMessagesChanged()
+    this.loading.set(false)
+    this.scrollToBottom()
+  }
+
+  private clearSlowResponse(): void {
+    clearTimeout(this.slowResponseTimeout)
+    this.slowResponse.set(false)
+  }
+
+  private flushTypewriter(message: ChatMessage): void {
+    message.content += this.typewriterBuffer.join('')
+    this.cancelTypewriter()
+  }
+
+  private cancelTypewriter(): void {
+    clearTimeout(this.typewriterTimeout)
     this.typewriterBuffer = []
     this.typewriterActive = false
+  }
+
+  private resetTypewriter(message: ChatMessage, content: string): void {
+    this.cancelTypewriter()
     message.content = content
     this.notifyMessagesChanged()
     this.scrollToBottom()
@@ -141,6 +202,7 @@ export class ChatComponent implements OnInit {
   playTypewriter(message: ChatMessage): void {
     if (this.typewriterBuffer.length === 0) {
       this.typewriterActive = false
+      if (this.streamFinished) this.finishStreaming(message)
       return
     }
 
@@ -149,7 +211,8 @@ export class ChatComponent implements OnInit {
     this.notifyMessagesChanged()
     this.scrollToBottom()
 
-    setTimeout(() => this.playTypewriter(message), 10) // 10ms per character
+    // 10ms per character
+    this.typewriterTimeout = setTimeout(() => this.playTypewriter(message), 10)
   }
 
   private notifyMessagesChanged(): void {

src-ui/src/app/pipes/markdown.pipe.spec.ts

@@ -0,0 +1,90 @@
+import { MarkdownPipe } from './markdown.pipe'
+
+describe('MarkdownPipe', () => {
+  const pipe = new MarkdownPipe()
+
+  it('should return empty string for empty input', () => {
+    expect(pipe.transform(null)).toEqual('')
+    expect(pipe.transform(undefined)).toEqual('')
+    expect(pipe.transform('')).toEqual('')
+  })
+
+  it('should render basic markdown', () => {
+    const html = pipe.transform(
+      '**bold** _em_ `code`\n\n- one\n- two\n\n| a | b |\n|---|---|\n| 1 | 2 |'
+    )
+    expect(html).toContain('<strong>bold</strong>')
+    expect(html).toContain('<em>em</em>')
+    expect(html).toContain('<code>code</code>')
+    expect(html).toContain('<li>one</li>')
+    expect(html).toContain('<table>')
+  })
+
+  it('should escape raw html', () => {
+    const html = pipe.transform(
+      'hi <img src=x onerror="alert(1)"> <b>x</b>\n\n<script>alert(1)</script>'
+    )
+    expect(html).not.toContain('<img')
+    expect(html).not.toContain('<script')
+    expect(html).not.toContain('<b>')
+    expect(html).toContain('&lt;script&gt;')
+  })
+
+  it('should not render images', () => {
+    const html = pipe.transform(
+      '![secret](https://otherdomain.example/x.png?d=1)'
+    )
+    expect(html).not.toContain('<img')
+    expect(html).not.toContain('otherdomain.example')
+    expect(html).toContain('secret')
+  })
+
+  it('should render safe links with target and rel', () => {
+    const html = pipe.transform('[docs](https://docs.paperless-ngx.com "Docs")')
+    expect(html).toContain(
+      '<a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.paperless-ngx.com" title="Docs">docs</a>'
+    )
+    expect(pipe.transform('[mail](mailto:a@b.c)')).toContain(
+      'href="mailto:a@b.c"'
+    )
+  })
+
+  it('should drop unsafe or relative links but keep their text', () => {
+    for (const href of [
+      'javascript:alert(1)',
+      'JaVaScRiPt:alert(1)',
+      'data:text/html,<script>alert(1)</script>',
+      'vbscript:msgbox',
+      '/api/documents/',
+    ]) {
+      const html = pipe.transform(`[click](${href})`)
+      expect(html).not.toContain('<a')
+      expect(html).toContain('click')
+    }
+  })
+
+  it('should show the actual hostname beside web links with misleading labels', () => {
+    for (const protocol of ['http', 'https']) {
+      const html = pipe.transform(
+        `[docs.paperless-ngx.com](${protocol}://docs.paperless-ngx.com@otherdomain.example/path?secret=1)`
+      )
+      expect(html).toContain(
+        '</a> <span class="text-muted small">(otherdomain.example)</span>'
+      )
+      expect(html).not.toContain('(docs.paperless-ngx.com)')
+    }
+  })
+
+  it('should omit the hostname label for mailto links', () => {
+    expect(pipe.transform('[mail](mailto:a@b.c)')).toBe(
+      '<p><a target="_blank" rel="noopener noreferrer nofollow" href="mailto:a@b.c">mail</a></p>\n'
+    )
+  })
+
+  it('should escape link titles', () => {
+    const html = pipe.transform(
+      '[x](https://a.example "a\\" onmouseover=\\"1")'
+    )
+    expect(html).not.toMatch(/"\s*onmouseover=/)
+  })
+})

src-ui/src/app/pipes/markdown.pipe.ts

@@ -0,0 +1,52 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { Marked, Renderer, Tokens } from 'marked'
+
+const ALLOWED_LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:'])
+
+function allowedUrl(href: string): URL | null {
+  try {
+    const url = new URL(href)
+    return ALLOWED_LINK_PROTOCOLS.has(url.protocol) ? url : null
+  } catch {
+    return null
+  }
+}
+
+// Treat chat content as untrusted: no raw HTML, no images, and only
+// absolute links. All escaping is done by marked's default renderer, and
+// Angular's sanitizer runs on top of this as well.
+const renderer: Partial<Renderer> = {
+  html(this: Renderer, { raw, text }: Tokens.HTML | Tokens.Tag): string {
+    return this.text({ type: 'text', raw, text })
+  },
+  image(this: Renderer, { raw, text }: Tokens.Image): string {
+    return this.text({ type: 'text', raw, text })
+  },
+  link(this: Renderer, token: Tokens.Link): string {
+    const url = allowedUrl(token.href)
+    if (!url) return this.parser.parseInline(token.tokens)
+    const anchor = Renderer.prototype.link
+      .call(this, token)
+      .replace('<a ', '<a target="_blank" rel="noopener noreferrer nofollow" ')
+    if (!url.hostname) return anchor
+    const hostname = this.text({ type: 'text', raw: '', text: url.hostname })
+    return `${anchor} <span class="text-muted small">(${hostname})</span>`
+  },
+}
+
+const markdown = new Marked({
+  async: false,
+  gfm: true,
+  breaks: true,
+  renderer,
+})
+
+@Pipe({
+  name: 'markdown',
+})
+export class MarkdownPipe implements PipeTransform {
+  transform(value: string | null | undefined): string {
+    if (!value) return ''
+    return markdown.parse(value) as string
+  }
+}

src-ui/src/main.ts

@@ -32,6 +32,7 @@ import {
   arrowDownUp,
   arrowLeft,
   arrowRepeat,
+  arrowReturnLeft,
   arrowRight,
   arrowRightShort,
   arrowUpRight,
@@ -283,6 +284,7 @@ const icons = {
   arrowDownUp,
   arrowLeft,
   arrowRepeat,
+  arrowReturnLeft,
   arrowRight,
   arrowRightShort,
   arrowUpRight,