From 7b53a4b316c74b16299b6c57cc6d92fdb111dbf4 Mon Sep 17 00:00:00 2001 From: shamoon <4887959+shamoon@users.noreply.github.com> Date: Mon, 19 Oct 2026 18:52:28 -0700 Subject: [PATCH] Enhancement: support markdown in AI chat (#14409) --- src-ui/jest.config.js | 2 +- src-ui/package.json | 1 + src-ui/pnpm-lock.yaml | 10 +++ .../components/chat/chat/chat.component.html | 10 ++- .../components/chat/chat/chat.component.scss | 20 ++++- .../chat/chat/chat.component.spec.ts | 29 ++++++ .../components/chat/chat/chat.component.ts | 2 + src-ui/src/app/pipes/markdown.pipe.spec.ts | 90 +++++++++++++++++++ src-ui/src/app/pipes/markdown.pipe.ts | 52 +++++++++++ 9 files changed, 207 insertions(+), 9 deletions(-) create mode 100644 src-ui/src/app/pipes/markdown.pipe.spec.ts create mode 100644 src-ui/src/app/pipes/markdown.pipe.ts diff --git a/src-ui/jest.config.js b/src-ui/jest.config.js index 8a15eeebe..89a334130 100644 --- a/src-ui/jest.config.js +++ b/src-ui/jest.config.js @@ -28,7 +28,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, diff --git a/src-ui/package.json b/src-ui/package.json index 0713b4c36..9f90985bc 100644 --- a/src-ui/package.json +++ b/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", diff --git a/src-ui/pnpm-lock.yaml b/src-ui/pnpm-lock.yaml index cb044387c..34c5c9c99 100644 --- a/src-ui/pnpm-lock.yaml +++ b/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: {} diff --git a/src-ui/src/app/components/chat/chat/chat.component.html b/src-ui/src/app/components/chat/chat/chat.component.html index d8136fbaf..e8c5f4022 100644 --- a/src-ui/src/app/components/chat/chat/chat.component.html +++ b/src-ui/src/app/components/chat/chat/chat.component.html @@ -5,14 +5,16 @@
-
+
@for (message of messages(); track message) {
- - {{ message.content }} + @if (message.role === 'assistant') { +
@if (message.isStreaming) { | } - + } @else { + {{ message.content }} + } @if (message.role === 'assistant' && message.references?.length) {
@for (reference of message.references; track reference.id) { diff --git a/src-ui/src/app/components/chat/chat/chat.component.scss b/src-ui/src/app/components/chat/chat/chat.component.scss index f14be66e2..4b85363bb 100644 --- a/src-ui/src/app/components/chat/chat/chat.component.scss +++ b/src-ui/src/app/components/chat/chat/chat.component.scss @@ -8,10 +8,6 @@ white-space: pre-wrap; } -.chat-references { - font-family: var(--bs-font-sans-serif); -} - .dropdown-toggle::after { display: none; } @@ -40,3 +36,19 @@ 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; + } +} diff --git a/src-ui/src/app/components/chat/chat/chat.component.spec.ts b/src-ui/src/app/components/chat/chat/chat.component.spec.ts index 5b8e12af8..04948f3e9 100644 --- a/src-ui/src/app/components/chat/chat/chat.component.spec.ts +++ b/src-ui/src/app/components/chat/chat/chat.component.spec.ts @@ -207,4 +207,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** ' }, + ]) + 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)') + }) }) diff --git a/src-ui/src/app/components/chat/chat/chat.component.ts b/src-ui/src/app/components/chat/chat/chat.component.ts index 4525808a4..3b74a04bc 100644 --- a/src-ui/src/app/components/chat/chat/chat.component.ts +++ b/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', diff --git a/src-ui/src/app/pipes/markdown.pipe.spec.ts b/src-ui/src/app/pipes/markdown.pipe.spec.ts new file mode 100644 index 000000000..a0655486e --- /dev/null +++ b/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('bold') + expect(html).toContain('em') + expect(html).toContain('code') + expect(html).toContain('
  • one
    • ') + expect(html).toContain('') + }) + + it('should escape raw html', () => { + const html = pipe.transform( + 'hi x\n\n' + ) + expect(html).not.toContain('') + expect(html).toContain('<script>') + }) + + it('should not render images', () => { + const html = pipe.transform( + '![secret](https://otherdomain.example/x.png?d=1)' + ) + expect(html).not.toContain(' { + const html = pipe.transform('[docs](https://docs.paperless-ngx.com "Docs")') + expect(html).toContain( + 'docs' + ) + 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,', + 'vbscript:msgbox', + '/api/documents/', + ]) { + const html = pipe.transform(`[click](${href})`) + expect(html).not.toContain(' { + 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( + ' (otherdomain.example)' + ) + 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( + '

    mail

    \n' + ) + }) + + it('should escape link titles', () => { + const html = pipe.transform( + '[x](https://a.example "a\\" onmouseover=\\"1")' + ) + expect(html).not.toMatch(/"\s*onmouseover=/) + }) +}) diff --git a/src-ui/src/app/pipes/markdown.pipe.ts b/src-ui/src/app/pipes/markdown.pipe.ts new file mode 100644 index 000000000..992714c14 --- /dev/null +++ b/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 = { + 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('(${hostname})` + }, +} + +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 + } +}