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

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';