Skip to content

Feature Request: [Chatbot] - Allow adding a label/badge for per-source metadata in the SourcesCard #892

Description

@debsmita1

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

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status
    Needs triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions