@patternfly/chatbot 6.3.0-prerelease.6 → 6.3.0-prerelease.8

package/src/MessageBar/StopButton.test.tsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { StopButton } from './StopButton';
 import { TooltipProps } from '@patternfly/react-core';
 
-const renderStop = (props?: { [key: string]: string | Omit<TooltipProps, 'content'> }) => {
+const renderStop = (props?: { [key: string]: string | boolean | Omit<TooltipProps, 'content'> }) => {
   const spy = jest.fn();
   render(<StopButton onClick={spy} {...props} />);
 };
@@ -39,4 +39,8 @@ describe('Stop button', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
     expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
   });
+  it('should handle isCompact', () => {
+    renderStop({ 'data-testid': 'button', isCompact: true });
+    expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+  });
 });

package/src/MessageBar/StopButton.tsx

@@ -15,6 +15,7 @@ export interface StopButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Stop" used in the tooltip */
   tooltipContent?: string;
+  isCompact?: boolean;
 }
 
 export const StopButton: React.FunctionComponent<StopButtonProps> = ({
@@ -22,6 +23,7 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
   onClick,
   tooltipProps,
   tooltipContent = 'Stop',
+  isCompact,
   ...props
 }: StopButtonProps) => (
   <Tooltip
@@ -37,12 +39,12 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
     {...tooltipProps}
   >
     <Button
-      className={`pf-chatbot__button--stop ${className ?? ''}`}
+      className={`pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       variant="link"
       aria-label={props['aria-label'] || 'Stop button'}
       onClick={onClick}
       icon={
-        <Icon iconSize="xl" isInline>
+        <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z"
@@ -51,6 +53,7 @@ export const StopButton: React.FunctionComponent<StopButtonProps> = ({
           </svg>
         </Icon>
       }
+      size={isCompact ? 'sm' : undefined}
       {...props}
     />
   </Tooltip>

package/src/MessageBox/MessageBox.scss

@@ -45,3 +45,9 @@
     }
   }
 }
+
+.pf-chatbot.pf-m-compact {
+  .pf-chatbot__messagebox {
+    padding: var(--pf-t--global--spacer--md);
+  }
+}

package/src/SourcesCard/SourcesCard.scss

@@ -74,3 +74,11 @@
     }
   }
 }
+
+.pf-v6-c-card.pf-m-compact.pf-chatbot__sources-card {
+  .pf-v6-c-card__footer.pf-chatbot__sources-card-footer-container {
+    border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+    padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs)
+      var(--pf-t--global--spacer--xs) !important;
+  }
+}

package/src/SourcesCard/SourcesCard.tsx

@@ -71,6 +71,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   onSetPage,
   showMoreWords = 'show more',
   showLessWords = 'show less',
+  isCompact,
   ...props
 }: SourcesCardProps) => {
   const [page, setPage] = React.useState(1);
@@ -95,7 +96,7 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   return (
     <div className="pf-chatbot__source">
       <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
-      <Card className="pf-chatbot__sources-card" {...props}>
+      <Card isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title">
           <Button
             component="a"