feat(chat-messages): add inline source citation#2099
Conversation
There was a problem hiding this comment.
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.
2cbb837 to
ae082b9
Compare
b5e9aba to
2507ef7
Compare
cf52572 to
95ffdef
Compare
95ffdef to
62e0923
Compare
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: