@patternfly/chatbot 6.9.0-prerelease.1 → 6.9.0-prerelease.3

package/src/Canvas/Canvas.scss

@@ -0,0 +1,138 @@
+// ============================================================================
+// Canvas
+// ============================================================================
+.pf-chatbot__canvas {
+  --pf-chatbot__canvas--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-chatbot__canvas--Padding: var(--pf-t--global--spacer--lg);
+
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  background-color: var(--pf-chatbot__canvas--BackgroundColor);
+}
+
+:where(.pf-v6-theme-glass) .pf-chatbot__canvas {
+  --pf-chatbot__canvas--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+}
+
+// Drawer
+// ----------------------------------------------------------------------------
+.pf-chatbot__canvas-drawer {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  background-color: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--Opacity: 1;
+  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+
+  > .pf-v6-c-drawer__main,
+  > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel,
+  > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__panel-main {
+    background-color: var(--pf-chatbot__canvas--BackgroundColor);
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .pf-v6-c-drawer.pf-m-inline.pf-chatbot__canvas-drawer {
+    --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+    --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  }
+}
+
+.pf-chatbot__canvas-body {
+  height: 100%;
+}
+
+.pf-chatbot__canvas-column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+// Panel
+// ----------------------------------------------------------------------------
+.pf-chatbot__canvas-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.pf-chatbot__canvas-panel {
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  --pf-v6-c-drawer__panel--PaddingBlockStart: 0;
+  --pf-v6-c-drawer__panel--PaddingBlockEnd: 0;
+  --pf-v6-c-drawer__panel--RowGap: 0;
+
+  .pf-v6-c-drawer__panel-main {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+  }
+
+  .pf-chatbot__canvas-panel-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    padding-block-end: var(--pf-chatbot__canvas--Padding);
+    padding-inline: var(--pf-chatbot__canvas--Padding);
+    box-sizing: border-box;
+    background-color: var(--pf-chatbot__canvas--BackgroundColor);
+  }
+
+  .pf-chatbot__canvas-head {
+    width: 100%;
+    grid-template-columns: minmax(0, 1fr) max-content;
+    --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-chatbot__canvas--Padding);
+    --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-chatbot__canvas--Padding);
+    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-chatbot__canvas--Padding);
+
+    .pf-v6-c-drawer__actions {
+      grid-column: 2;
+      justify-self: end;
+      align-self: start;
+      width: max-content;
+      --pf-v6-c-drawer__actions--MarginBlockStart: 0;
+      --pf-v6-c-drawer__actions--MarginInlineEnd: 0;
+
+      .pf-v6-c-button {
+        border-radius: var(--pf-t--global--border--radius--pill);
+        justify-content: center;
+        align-items: center;
+
+        &::before {
+          border-radius: inherit;
+        }
+      }
+    }
+  }
+}
+
+.pf-chatbot__canvas-editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+
+  .pf-v6-c-code-editor {
+    --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-chatbot__canvas--BackgroundColor);
+  }
+}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -172,81 +172,91 @@
 
 // Chatbot Header - Drawer
 // ----------------------------------------------------------------------------
+// Child combinators keep these rules off nested drawers such as canvas.
 .pf-chatbot__history.pf-v6-c-drawer {
-  --pf-v6-c-drawer__panel--MinWidth: 24rem;
-  --pf-v6-c-drawer__panel--xl--MinWidth: 24rem;
   height: 70vh;
 
   // Drawer panel
-  .pf-v6-c-drawer__panel {
+  > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    --pf-v6-c-drawer__panel--MinWidth: 24rem;
+    --pf-v6-c-drawer__panel--xl--MinWidth: 24rem;
     --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+    --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+    --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--floating--default);
     --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--lg);
     --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
     --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
     overflow-x: hidden;
     overflow-y: hidden;
-  }
 
-  // Drawer head
-  .pf-v6-c-drawer__head {
-    --pf-v6-c-drawer__head--PaddingBlockStart: 0;
-    --pf-v6-c-drawer__head--PaddingBlockEnd: 0;
-    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+    // Drawer head
+    .pf-v6-c-drawer__head {
+      --pf-v6-c-drawer__head--PaddingBlockStart: 0;
+      --pf-v6-c-drawer__head--PaddingBlockEnd: 0;
+      --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+      --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
 
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--pf-t--global--spacer--2xl);
-  }
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: var(--pf-t--global--spacer--2xl);
+    }
 
-  // Drawer actions
-  .pf-v6-c-drawer__actions {
-    --pf-v6-c-drawer__actions--MarginBlockStart: 0;
-    --pf-v6-c-drawer__actions--MarginInlineEnd: 0;
+    // Drawer actions
+    .pf-v6-c-drawer__actions {
+      --pf-v6-c-drawer__actions--MarginBlockStart: 0;
+      --pf-v6-c-drawer__actions--MarginInlineEnd: 0;
 
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    align-self: center;
-    width: 100%;
-    height: 100%;
-  }
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      align-self: center;
+      width: 100%;
+      height: 100%;
+    }
 
-  .pf-v6-c-drawer__actions--reversed {
-    flex-direction: row-reverse;
-  }
+    .pf-v6-c-drawer__actions--reversed {
+      flex-direction: row-reverse;
+    }
 
-  // Close drawer
-  .pf-v6-c-drawer__close {
-    .pf-v6-c-button {
-      width: var(--pf-t--global--spacer--2xl);
-      height: var(--pf-t--global--spacer--2xl);
-      border-radius: var(--pf-t--global--border--radius--pill);
-      justify-content: center;
-      align-items: center;
+    // Close drawer
+    .pf-v6-c-drawer__close {
+      .pf-v6-c-button {
+        width: var(--pf-t--global--spacer--2xl);
+        height: var(--pf-t--global--spacer--2xl);
+        border-radius: var(--pf-t--global--border--radius--pill);
+        justify-content: center;
+        align-items: center;
+      }
     }
-  }
 
-  // Drawer body
-  .pf-v6-c-drawer__body {
-    --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0;
-    --pf-v6-c-drawer__panel__body--PaddingBlockEnd: 0;
-    --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-    --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+    // Drawer body
+    .pf-v6-c-drawer__body {
+      --pf-v6-c-drawer__panel__body--PaddingBlockStart: 0;
+      --pf-v6-c-drawer__panel__body--PaddingBlockEnd: 0;
+      --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+      --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      height: 70vh;
+    }
 
+    // Resizable drawer spacing is different - needs manual adjustment for gaps between buttons, inputs, etc.
+    &.pf-m-resizable {
+      .pf-v6-c-drawer__panel-main {
+        row-gap: var(--pf-v6-c-drawer__panel--RowGap);
+      }
+    }
+  }
+
+  > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     height: 70vh;
   }
-
-  // Resizable drawer spacing is different - needs manual adjustment for gaps between buttons, inputs, etc.
-  .pf-v6-c-drawer__panel.pf-m-resizable {
-    .pf-v6-c-drawer__panel-main {
-      row-gap: var(--pf-v6-c-drawer__panel--RowGap);
-    }
-  }
 }
 
 .pf-chatbot:is(.pf-chatbot--drawer, .pf-chatbot--docked) .pf-chatbot__history {
@@ -279,7 +289,9 @@
 .pf-chatbot--fullscreen {
   .pf-chatbot__history.pf-v6-c-drawer {
     height: 100vh;
-    .pf-v6-c-drawer__body {
+
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body,
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body {
       width: 100%;
     }
   }
@@ -291,11 +303,14 @@
 .pf-chatbot--embedded {
   .pf-chatbot__history.pf-v6-c-drawer {
     height: 100%;
-    .pf-v6-c-drawer__body {
+
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content > .pf-v6-c-drawer__body,
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel .pf-v6-c-drawer__body {
       width: 100%;
       height: 100%;
     }
-    .pf-v6-c-drawer__panel {
+
+    > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
       height: 100%;
     }
   }
@@ -327,37 +342,36 @@
 }
 
 .pf-chatbot__history.pf-m-compact {
-  .pf-v6-c-drawer__main {
-    .pf-v6-c-drawer__panel {
-      --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-      --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-      --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
-      --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-      --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md);
-    }
+  > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+    --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md);
 
     .pf-v6-c-drawer__body {
       --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
       --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
     }
+
+    .pf-v6-c-drawer__head {
+      --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+      --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+    }
+
+    .pf-v6-c-drawer__close {
+      .pf-v6-c-button {
+        width: 2rem;
+        height: 2rem;
+        --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+        --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+        --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+        --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+      }
+    }
   }
 
   .pf-chatbot__menu-item {
     font-size: var(--pf-t--global--font--size--body--md);
   }
-
-  .pf-v6-c-drawer__head {
-    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  }
-  .pf-v6-c-drawer__close {
-    .pf-v6-c-button {
-      width: 2rem;
-      height: 2rem;
-      --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
-      --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs);
-      --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-      --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
-    }
-  }
 }

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -204,6 +204,19 @@ describe('ChatbotConversationHistoryNav', () => {
     );
   });
 
+  it('should keep an opaque panel background in glass theme', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-m-no-plain-on-glass');
+  });
+
   it('should accept drawerContentProps', () => {
     const { container } = render(
       <ChatbotConversationHistoryNav

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -683,6 +683,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
         aria-live="polite"
         focusTrap={{ enabled: true }}
         defaultSize="384px"
+        isNoPlainOnGlass
         {...drawerPanelContentProps}
       >
         {drawer}

package/src/MessageBar/AttachButton.scss

@@ -7,30 +7,13 @@
   width: 3rem;
   height: 3rem;
 
-  .pf-v6-c-button__icon {
-    color: var(--pf-t--global--icon--color--subtle);
-  }
-
-  // Interactive states
-  &:hover {
-    .pf-v6-c-button__icon {
-      color: var(--pf-t--global--icon--color--regular);
-    }
-  }
-
-  &:active,
-  &:focus {
+  &.pf-m-clicked,
+  &.pf-m-clicked:hover,
+  &.pf-m-clicked:focus {
     background-color: var(--pf-t--global--color--brand--clicked);
 
     .pf-v6-c-button__icon {
-      color: var(--pf-t--global--icon--color--inverse);
-    }
-
-    &:hover,
-    &:focus {
-      .pf-v6-c-button__icon {
-        color: var(--pf-t--global--icon--color--inverse);
-      }
+      color: var(--pf-t--global--icon--color--on-brand--default);
     }
   }
 }

package/src/MessageBar/MessageBar.test.tsx

@@ -191,6 +191,9 @@ describe('Message bar', () => {
         }}
       />
     );
+    const attachButton = screen.getByRole('button', { name: 'Attach' });
+    expect(attachButton).toHaveClass('pf-m-clicked');
+    expect(attachButton).toHaveAttribute('aria-expanded', 'true');
     expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
     expect(screen.getByRole('menuitem', { name: /auth-operator/i })).toBeTruthy();
     expect(screen.getByRole('menuitem', { name: /Alerts/i })).toBeTruthy();

package/src/MessageBar/MessageBar.tsx

@@ -419,6 +419,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
           validator={validator}
           dropzoneProps={dropzoneProps}
           {...buttonProps?.attach}
+          isClicked={attachMenuProps.isAttachMenuOpen}
+          aria-expanded={attachMenuProps.isAttachMenuOpen}
         />
       );
     }

package/src/MessageBar/SendButton.scss

@@ -7,38 +7,7 @@
   width: 3rem;
   height: 3rem;
 
-  .pf-v6-c-button__icon {
-    --pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
-  }
-
-  &:hover,
-  &:focus {
-    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
-    color: var(--pf-t--global--color--brand--hover);
-
-    .pf-v6-c-button__icon {
-      color: var(--pf-t--global--color--brand--hover);
-    }
-  }
-}
-
-.pf-v6-theme-dark {
-  .pf-v6-c-button.pf-chatbot__button--send {
-    background-color: var(--pf-t--global--color--brand--default);
-    .pf-v6-c-button__icon {
-      --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
-    }
-  }
-
-  .pf-v6-c-button:disabled.pf-chatbot__button--send:disabled {
-    --pf-v6-c-button--disabled--Color: var(--pf-t--global--icon--color--disabled);
-    background-color: var(--pf-t--global--background--color--disabled--default);
-  }
-
-  .pf-v6-c-button.pf-chatbot__button--send:hover,
-  .pf-v6-c-button.pf-chatbot__button--send:focus {
-    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
-  }
+  --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--color--brand--default);
 }
 
 @keyframes motionSendButton {

package/src/MessageBar/SendButton.tsx

@@ -6,7 +6,7 @@ import type { FunctionComponent } from 'react';
 // Import PatternFly components
 import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/react-core';
 
-import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
+import { RhUiSendFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-send-fill-icon';
 
 export interface SendButtonProps extends ButtonProps {
   /** Callback for when button is clicked */
@@ -48,7 +48,7 @@ export const SendButton: FunctionComponent<SendButtonProps> = ({
       onClick={onClick}
       icon={
         <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
-          <PaperPlaneIcon />
+          <RhUiSendFillIcon />
         </Icon>
       }
       size={isCompact ? 'sm' : undefined}

package/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;

package/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

package/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;

package/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

package/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"

package/src/main.scss

@@ -9,6 +9,7 @@
 @import './ChatbotPopover/ChatbotPopover';
 @import './ChatbotToggle/ChatbotToggle';
 @import './ChatbotWelcomePrompt/ChatbotWelcomePrompt';
+@import './Canvas/Canvas';
 @import './CodeModal/CodeModal';
 @import './Compare/Compare';
 @import './DeepThinking/DeepThinking';