Chatbot Component Area
Message Content (Text, Markdown, Citations)
Describe the feature
When using RAG, each referenced document may include a source field identifying the knowledge base / RAG index (for example product-docs-1_10, okp, or a custom index id). We need to show that value on each SourcesCard so users can distinguish which knowledge base a citation came from.
Today SourcesCard exposes title, subtitle, body, and footer, but:
-
subtitle is a plain string rendered under the title with no badge/label styling or dedicated layout slot (e.g. top-right pill).
-
footer replaces the built-in 1/N pagination footer when set, so it cannot be used for a small badge while keeping paginated multi-source navigation.
As a result, consumers resort to fragile CSS overrides of internal classes such as:
-
.pf-chatbot__sources-card
-
.pf-chatbot__sources-card-title-container
-
.pf-chatbot__sources-card-subtitle
These overrides break silently when the chatbot DOM/structure changes.
Expected Data Structure
Add an optional per-source prop, for example:
sources: {
title?: string;
subtitle?: string;
link: string;
body?: React.ReactNode | string;
/** Optional badge/label content (e.g. RAG source id) */
label?: React.ReactNode | string;
/** Optional props forwarded to the underlying Label (when label is a string) */
labelProps?: LabelProps;
footer?: React.ReactNode;
// ...existing props
}[]<Message
role="bot"
content="…"
sources={{
sources: [
{
title: 'Installing and viewing plugins',
link: 'https://…',
isExternal: true,
label: 'product-docs-1_10',
},
{
title: 'Dynamic plugins reference',
link: 'https://…',
isExternal: true,
label: 'okp',
},
],
}}
/>
Conversational Flow
No response
Visuals & Mockups
Conversational Accessibility
No response
Validation
Jira Issue: PF-4553
Chatbot Component Area
Message Content (Text, Markdown, Citations)
Describe the feature
When using RAG, each referenced document may include a
sourcefield identifying the knowledge base / RAG index (for exampleproduct-docs-1_10,okp, or a custom index id). We need to show that value on each SourcesCard so users can distinguish which knowledge base a citation came from.Today
SourcesCardexposestitle,subtitle,body, andfooter, but:subtitleis a plain string rendered under the title with no badge/label styling or dedicated layout slot (e.g. top-right pill).footerreplaces the built-in1/Npagination footer when set, so it cannot be used for a small badge while keeping paginated multi-source navigation.As a result, consumers resort to fragile CSS overrides of internal classes such as:
.pf-chatbot__sources-card.pf-chatbot__sources-card-title-container.pf-chatbot__sources-card-subtitleThese overrides break silently when the chatbot DOM/structure changes.
Expected Data Structure
Add an optional per-source prop, for example:
Conversational Flow
No response
Visuals & Mockups
Conversational Accessibility
No response
Validation
This request aligns with PatternFly AI/Chatbot design guidelines.
I have searched for existing chatbot-specific components.
Jira Issue: PF-4553