[PR #17870] [CLOSED] feat: Add Footnote Reference Support to Markdown #11380

New Issue

GiteaMirror · 2025-11-11T19:30:20-06:00

GiteaMirror commented

2025-11-11 19:30:20 -06:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/17870
Author: @danielaskdd
Created: 9/28/2025
Status: ❌ Closed

Base: dev ← Head: main

📝 Commits (2)

02fcf4f Add footnote reference support to markdown renderer
3f1dabe Merge branch 'dev'

📊 Changes

4 files changed (+66 additions, -0 deletions)

View changed files

📝 src/app.css (+20 -0)
📝 src/lib/components/chat/Messages/Markdown.svelte (+2 -0)
📝 src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte (+2 -0)
➕ src/lib/utils/marked/footnote-extension.ts (+42 -0)

📄 Description

feat: Add Footnote Reference Support to Markdown

Overview

This PR adds support for footnote references in Markdown content using the syntax [^1], [^note], etc. Footnote references are rendered as superscript text that blends naturally with the surrounding content.

Footnote references are very common in RAG-generated content. Therefore, it is essential that Open-WebUI correctly renders these footnotes for improved readability and visual consistency.

Related Discussion : #17867

Feature Added

Adds support for footnote references in Markdown content using the syntax [^1], [^note]
Supported syntax :

This is text with a footnote[^1] and another[^note].
Multiple consecutive footnotes[^a][^b][^c] are properly spaced.

Rendering Behavior

Footnotes appear as superscript text
Inherit text color from surrounding content
Subtle hover effects for better UX
Proper spacing prevents visual crowding

Screenshots

Breaking Changes

n/a

Changes Made

New Extension (`src/lib/utils/marked/footnote-extension.ts`)

Created: New marked extension for parsing footnote reference syntax
Pattern: Supports [^identifier] where identifier can be alphanumeric, underscore, or hyphen
Security: Implements proper HTML escaping for all user content
Output: Generates clean superscript HTML with semantic CSS classes

Integration Updates

Markdown.svelte: Added footnote extension to the marked processing pipeline
MarkdownInlineTokens.svelte: Added rendering support for footnoteRef token type
Positioning: Footnote handling placed appropriately in the token processing flow

Styling (`src/app.css`)

Visual Design: Footnote references inherit parent text color and use normal font weight
Typography: Optimized superscript sizing (0.7em) and positioning (0.3em vertical-align)
User Experience: Subtle hover effect with opacity transition
Spacing: Proper margin (0.3em) between consecutive footnotes

Security

All user input is HTML-escaped
XSS protection through proper sanitization
Safe HTML generation using marked's renderer API

Testing Considerations

Footnote references render correctly as superscript
HTML escaping prevents XSS vulnerabilities
Multiple consecutive footnotes display with proper spacing
Hover effects work smoothly across different themes

Future Enhancements

RAG system( like LightRAG) provides a structured list of referenced documents alongside the LLM-generated response, enabling us to render footnote references as clickable HTTP links that open the original source webpages.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/17870 **Author:** [@danielaskdd](https://github.com/danielaskdd) **Created:** 9/28/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `main` --- ### 📝 Commits (2) - [`02fcf4f`](https://github.com/open-webui/open-webui/commit/02fcf4f630f8ce5bb52a53987e7fb0bb282881c3) Add footnote reference support to markdown renderer - [`3f1dabe`](https://github.com/open-webui/open-webui/commit/3f1dabeaaf108b696181316d0e8be876dbaa6d02) Merge branch 'dev' ### 📊 Changes **4 files changed** (+66 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `src/app.css` (+20 -0) 📝 `src/lib/components/chat/Messages/Markdown.svelte` (+2 -0) 📝 `src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte` (+2 -0) ➕ `src/lib/utils/marked/footnote-extension.ts` (+42 -0) </details> ### 📄 Description ## feat: Add Footnote Reference Support to Markdown ### Overview This PR adds support for footnote references in Markdown content using the syntax `[^1]`, `[^note]`, etc. Footnote references are rendered as superscript text that blends naturally with the surrounding content. Footnote references are very common in RAG-generated content. Therefore, it is essential that Open-WebUI correctly renders these footnotes for improved readability and visual consistency. **Related Discussion** : #17867 ### Feature Added * Adds support for footnote references in Markdown content using the syntax `[^1]`, `[^note]` * Supported syntax : ``` This is text with a footnote[^1] and another[^note]. Multiple consecutive footnotes[^a][^b][^c] are properly spaced. ``` ### Rendering Behavior - Footnotes appear as superscript text - Inherit text color from surrounding content - Subtle hover effects for better UX - Proper spacing prevents visual crowding ### Screenshots <img width="1083" height="777" alt="image" src="https://github.com/user-attachments/assets/1c9ba0af-9618-46d8-8fe0-dc5adcb886e9" /> ### Breaking Changes n/a ### Changes Made #### New Extension (`src/lib/utils/marked/footnote-extension.ts`) - **Created**: New marked extension for parsing footnote reference syntax - **Pattern**: Supports `[^identifier]` where identifier can be alphanumeric, underscore, or hyphen - **Security**: Implements proper HTML escaping for all user content - **Output**: Generates clean superscript HTML with semantic CSS classes #### Integration Updates - **Markdown.svelte**: Added footnote extension to the marked processing pipeline - **MarkdownInlineTokens.svelte**: Added rendering support for `footnoteRef` token type - **Positioning**: Footnote handling placed appropriately in the token processing flow #### Styling (`src/app.css`) - **Visual Design**: Footnote references inherit parent text color and use normal font weight - **Typography**: Optimized superscript sizing (0.7em) and positioning (0.3em vertical-align) - **User Experience**: Subtle hover effect with opacity transition - **Spacing**: Proper margin (0.3em) between consecutive footnotes ### Security - All user input is HTML-escaped - XSS protection through proper sanitization - Safe HTML generation using marked's renderer API ### Testing Considerations - Footnote references render correctly as superscript - HTML escaping prevents XSS vulnerabilities - Multiple consecutive footnotes display with proper spacing - Hover effects work smoothly across different themes ## Future Enhancements RAG system( like LightRAG) provides a structured list of referenced documents alongside the LLM-generated response, enabling us to render footnote references as clickable HTTP links that open the original source webpages. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2025-11-11 19:30:20 -06:00

GiteaMirror closed this issue

2025-11-11 19:30:20 -06:00

GiteaMirror referenced this issue

2026-04-19 22:13:00 -05:00

[GH-ISSUE #11380] feat: temporary chat toggle location and non-temporary nature #16208

GiteaMirror referenced this issue

2026-04-25 05:38:46 -05:00

[GH-ISSUE #11380] feat: temporary chat toggle location and non-temporary nature #31737

GiteaMirror referenced this issue

2026-05-05 16:50:00 -05:00

[GH-ISSUE #11380] feat: temporary chat toggle location and non-temporary nature #54874