From b0f3afe3676a015c1ab5526530576fd15000e8f3 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Fri, 21 Aug 2026 10:07:00 -0400
Subject: [PATCH] fix(Sources): Allow extra content in header

Fixes https://github.com/patternfly/chatbot/issues/892

Assisted-by: Cursor
---
 .../examples/Messages/MessageWithSources.tsx  | 31 ++++++++++
 .../chatbot/examples/Messages/Messages.md     |  2 +
 .../module/src/SourcesCard/SourcesCard.scss   |  6 ++
 .../src/SourcesCard/SourcesCard.test.tsx      | 16 +++++
 .../module/src/SourcesCard/SourcesCard.tsx    |  2 +
 .../SourcesCardBase/SourcesCardBase.test.tsx  | 62 +++++++++++++++++++
 .../src/SourcesCardBase/SourcesCardBase.tsx   |  8 +++
 7 files changed, 127 insertions(+)

diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx
index 5038e6141..26502ed7a 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx
@@ -78,6 +78,37 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
           ]
         }}
       />
+      <Message
+        name="Bot"
+        role="bot"
+        content="This example has a PatternFly label above the title:"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+              isExternal: true,
+              headerContent: <Label>Documentation</Label>
+            },
+            {
+              title: 'Azure Red Hat OpenShift documentation',
+              link: '#',
+              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...',
+              isExternal: true,
+              headerContent: <Label>Knowledge base</Label>
+            },
+            {
+              title: 'OKD Documentation: Home',
+              link: '#',
+              body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...',
+              isExternal: true,
+              headerContent: <Label>Tutorial</Label>
+            }
+          ],
+          onSetPage
+        }}
+      />
       <Message
         name="Bot"
         role="bot"
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
index fe3db8f6f..ad19cb1b6 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
@@ -237,6 +237,8 @@ If a source will open outside of the ChatBot window, add an external link icon v
 
 The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. For the best clarity and readability, we strongly recommend limiting the title to 1 line and the body to 2 lines. If the body description is more than 2 lines, use the "long sources" or "very long sources" variant.
 
+To display extra content above a source title, such as a [PatternFly label](/components/label), pass `headerContent`.
+
 ```js file="./MessageWithSources.tsx"
 
 ```
diff --git a/packages/module/src/SourcesCard/SourcesCard.scss b/packages/module/src/SourcesCard/SourcesCard.scss
index 32464cc8e..d4c65d105 100644
--- a/packages/module/src/SourcesCard/SourcesCard.scss
+++ b/packages/module/src/SourcesCard/SourcesCard.scss
@@ -58,6 +58,12 @@
   text-overflow: ellipsis;
 }
 
+.pf-chatbot__sources-header-content-container {
+  display: inline-flex;
+  width: fit-content;
+  margin-block-end: var(--pf-t--global--spacer--sm);
+}
+
 .pf-chatbot__sources-card-title-container {
   display: flex;
   flex-direction: column;
diff --git a/packages/module/src/SourcesCard/SourcesCard.test.tsx b/packages/module/src/SourcesCard/SourcesCard.test.tsx
index 1ed46b7b2..8174f72c4 100644
--- a/packages/module/src/SourcesCard/SourcesCard.test.tsx
+++ b/packages/module/src/SourcesCard/SourcesCard.test.tsx
@@ -25,6 +25,22 @@ describe('SourcesCard', () => {
     screen.getByRole('button', { name: /Go to next page/i });
   });
 
+  it('should render headerContent above the title', () => {
+    render(
+      <SourcesCard
+        sources={[
+          {
+            title: 'How to make an apple pie',
+            link: '',
+            headerContent: <span>Dessert</span>
+          }
+        ]}
+      />
+    );
+    expect(screen.getByText('Dessert')).toBeTruthy();
+    expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+  });
+
   it('should render with wrap layout when layout is set to wrap', () => {
     render(
       <SourcesCard
diff --git a/packages/module/src/SourcesCard/SourcesCard.tsx b/packages/module/src/SourcesCard/SourcesCard.tsx
index e60c98b4c..e40f9b8ba 100644
--- a/packages/module/src/SourcesCard/SourcesCard.tsx
+++ b/packages/module/src/SourcesCard/SourcesCard.tsx
@@ -49,6 +49,8 @@ export interface SourcesCardProps extends CardProps {
     footer?: React.ReactNode;
     /** Additional props passed to Truncate component */
     truncateProps?: TruncateProps;
+    /** Additional content applied to the beginning of the sources card header, such as a label */
+    headerContent?: React.ReactNode;
   }[];
   /** Label for the English word "source" */
   sourceWord?: string;
diff --git a/packages/module/src/SourcesCardBase/SourcesCardBase.test.tsx b/packages/module/src/SourcesCardBase/SourcesCardBase.test.tsx
index 67b8eee52..dfaa239ef 100644
--- a/packages/module/src/SourcesCardBase/SourcesCardBase.test.tsx
+++ b/packages/module/src/SourcesCardBase/SourcesCardBase.test.tsx
@@ -234,6 +234,68 @@ describe('SourcesCardBase', () => {
     expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
   });
 
+  it('should render headerContent above the title', () => {
+    render(
+      <SourcesCardBase
+        sources={[
+          {
+            title: 'How to make an apple pie',
+            link: '',
+            headerContent: <span>Dessert</span>
+          }
+        ]}
+      />
+    );
+    expect(screen.getByText('Dessert')).toBeTruthy();
+    expect(screen.getByText('How to make an apple pie')).toBeTruthy();
+  });
+
+  it('should update headerContent when navigating between sources', async () => {
+    render(
+      <SourcesCardBase
+        sources={[
+          {
+            title: 'How to make an apple pie',
+            link: '',
+            headerContent: <span>Dessert</span>
+          },
+          {
+            title: 'How to make cookies',
+            link: '',
+            headerContent: <span>Snack</span>
+          }
+        ]}
+      />
+    );
+    expect(screen.getByText('Dessert')).toBeTruthy();
+    expect(screen.queryByText('Snack')).toBeFalsy();
+    await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
+    expect(screen.queryByText('Dessert')).toBeFalsy();
+    expect(screen.getByText('Snack')).toBeTruthy();
+  });
+
+  it('should render headerContent when using wrap layout', () => {
+    render(
+      <SourcesCardBase
+        layout="wrap"
+        sources={[
+          {
+            title: 'How to make an apple pie',
+            link: '',
+            headerContent: <span>Dessert</span>
+          },
+          {
+            title: 'How to make cookies',
+            link: '',
+            headerContent: <span>Snack</span>
+          }
+        ]}
+      />
+    );
+    expect(screen.getByText('Dessert')).toBeTruthy();
+    expect(screen.getByText('Snack')).toBeTruthy();
+  });
+
   it('should render with wrap layout when layout prop is set to wrap', () => {
     render(
       <SourcesCardBase
diff --git a/packages/module/src/SourcesCardBase/SourcesCardBase.tsx b/packages/module/src/SourcesCardBase/SourcesCardBase.tsx
index d64880574..8ae4b56e9 100644
--- a/packages/module/src/SourcesCardBase/SourcesCardBase.tsx
+++ b/packages/module/src/SourcesCardBase/SourcesCardBase.tsx
@@ -63,6 +63,8 @@ export interface SourcesCardBaseProps extends CardProps {
     footer?: React.ReactNode;
     /** Additional props passed to Truncate component */
     truncateProps?: TruncateProps;
+    /** Additional content applied to the beginning of the sources card header, such as a label */
+    headerContent?: React.ReactNode;
   }[];
   /** Accessible label for the button which moves to the next page. */
   toNextPageAriaLabel?: string;
@@ -133,6 +135,9 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
     >
       <Card isFullHeight isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
+          {source.headerContent && (
+            <div className="pf-chatbot__sources-header-content-container">{source.headerContent}</div>
+          )}
           <div className="pf-chatbot__sources-card-title-container">
             <Button
               component="a"
@@ -196,6 +201,9 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
     <div className="pf-chatbot__sources-card-base">
       <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
+          {sources[page - 1].headerContent && (
+            <div className="pf-chatbot__sources-header-content-container">{sources[page - 1].headerContent}</div>
+          )}
           <div className="pf-chatbot__sources-card-title-container">
             <Button
               component="a"