Skip to content

feat(chat-messages): add inline source citation#2099

Draft
robertwilde wants to merge 1 commit into
mainfrom
feat/ai/citation-pills
Draft

feat(chat-messages): add inline source citation#2099
robertwilde wants to merge 1 commit into
mainfrom
feat/ai/citation-pills

Conversation

@robertwilde
Copy link
Copy Markdown
Collaborator

@robertwilde robertwilde commented May 26, 2026

Related to #2064

This is the first PR for issue #2064 dealing with inline source citations. It will be followed by a popover for the source citations, and a summary source citation component that combines inline and popover components.

Adds inline citation pill support to the AI chat message component. A new SiCitationPillComponent renders a compact, fully-rounded pill button directly within AI message text, showing a globe icon and a "Source for this paragraph." label. A new SiChatAnnotatedText model provides a normalised input format for annotated LLM responses, splitting content into text and citation segments. SiAiMessageComponent gains an annotatedText input that renders this segmented content, with each citation pill emitting a citationClicked output so the consuming application can implement its own source navigation. The pill uses semantic design tokens and is sized to match the AI message line height so it sits flush in flowing text. The si-ai-message and si-chat-container examples are updated to demonstrate annotated messages alongside existing markdown messages.


Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

Code Coverage

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces inline citation support for AI-generated messages. It adds a new SiCitationPillComponent to render citation buttons/links, models for annotated text, and updates SiAiMessageComponent to render these inline citations when annotatedText is provided. The review feedback highlights critical layout and formatting issues in the template, such as an unnecessary <br /> tag breaking the inline flow and a missing text-pre-wrap class that would collapse whitespace. Additionally, it addresses internationalization (i18n) and UX writing guidelines regarding hardcoded strings and trailing punctuation in the citation pill, and recommends safer optional chaining to avoid potential runtime crashes when retrieving citations.

Comment thread projects/element-ng/chat-messages/si-ai-message.component.html
Comment thread projects/element-ng/chat-messages/si-ai-message.component.html Outdated
Comment thread projects/element-ng/chat-messages/si-citation-pill.component.ts
Comment thread projects/element-ng/chat-messages/si-ai-message.component.ts
@robertwilde robertwilde force-pushed the feat/ai/citation-pills branch 2 times, most recently from fbef54b to 2cbb837 Compare May 27, 2026 07:43
@robertwilde robertwilde force-pushed the feat/ai/citation-pills branch from 2cbb837 to ae082b9 Compare May 27, 2026 09:13
@robertwilde robertwilde changed the title feat(ai-chat): add inline source citation feat(chat-messages): add inline source citation May 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant