@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10

package/src/MessageBar/MessageBar.tsx

@@ -37,10 +37,14 @@ export interface MessageBarProps extends TextAreaProps {
   className?: string;
   /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
   alwayShowSendButton?: boolean;
+  /** Placeholder for message input */
+  placeholder?: string;
   /** Flag to disable/enable the Attach button  */
   hasAttachButton?: boolean;
   /** Flag to enable the Microphone button  */
   hasMicrophoneButton?: boolean;
+  /** Placeholder text when listening */
+  listeningText?: string;
   /** Flag to enable the Stop button, used for streaming content */
   hasStopButton?: boolean;
   /** Callback function for when stop button is clicked */
@@ -72,14 +76,17 @@ export interface MessageBarProps extends TextAreaProps {
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
   /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
   displayMode?: ChatbotDisplayMode;
+  isCompact?: boolean;
 }
 
 export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   onSendMessage,
   className,
   alwayShowSendButton,
+  placeholder = 'Send a message...',
   hasAttachButton = true,
   hasMicrophoneButton,
+  listeningText = 'Listening',
   handleAttach,
   attachMenuProps,
   isSendButtonDisabled,
@@ -89,6 +96,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   onChange,
   displayMode,
   value,
+  isCompact = false,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -99,11 +107,13 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
   const attachButtonRef = React.useRef<HTMLButtonElement>(null);
 
+  const topMargin = '1rem';
+
   const setInitialLineHeight = (field: HTMLTextAreaElement) => {
     field.style.setProperty('line-height', '1rem');
     const parent = field.parentElement;
     if (parent) {
-      parent.style.setProperty('margin-top', `1rem`);
+      parent.style.setProperty('margin-top', topMargin);
       parent.style.setProperty('margin-bottom', `0rem`);
       parent.style.setProperty('height', 'inherit');
 
@@ -129,8 +139,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
       parent.style.setProperty('height', `${height}px`);
 
       if (height > 32 || window.innerWidth <= 507) {
-        parent.style.setProperty('margin-bottom', `1rem`);
-        parent.style.setProperty('margin-top', `1rem`);
+        parent.style.setProperty('margin-bottom', topMargin);
+        parent.style.setProperty('margin-top', topMargin);
       }
     }
   };
@@ -154,8 +164,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   const handleNewLine = (field: HTMLTextAreaElement) => {
     const parent = field.parentElement;
     if (parent) {
-      parent.style.setProperty('margin-bottom', `1rem`);
-      parent.style.setProperty('margin-top', `1rem`);
+      parent.style.setProperty('margin-bottom', topMargin);
+      parent.style.setProperty('margin-top', topMargin);
     }
   };
 
@@ -268,6 +278,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
         <StopButton
           onClick={handleStopButton}
           tooltipContent={buttonProps?.stop?.tooltipContent}
+          isCompact={isCompact}
           {...buttonProps?.stop?.props}
         />
       );
@@ -280,6 +291,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onClick={handleAttachMenuToggle}
             isDisabled={isListeningMessage}
             tooltipContent={buttonProps?.attach?.tooltipContent}
+            isCompact={isCompact}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -289,6 +301,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             isDisabled={isListeningMessage}
             tooltipContent={buttonProps?.attach?.tooltipContent}
             inputTestId={buttonProps?.attach?.inputTestId}
+            isCompact={isCompact}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -299,6 +312,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onSpeechRecognition={handleSpeechRecognition}
             tooltipContent={buttonProps?.microphone?.tooltipContent}
             language={buttonProps?.microphone?.language}
+            isCompact={isCompact}
             {...buttonProps?.microphone?.props}
           />
         )}
@@ -308,6 +322,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             onClick={() => handleSend(message)}
             isDisabled={isSendButtonDisabled}
             tooltipContent={buttonProps?.send?.tooltipContent}
+            isCompact={isCompact}
             {...buttonProps?.send?.props}
           />
         )}
@@ -317,13 +332,13 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
 
   const messageBarContents = (
     <>
-      <div className="pf-chatbot__message-bar-input">
+      <div className={`pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`}>
         <TextArea
           className="pf-chatbot__message-textarea"
           value={message}
           onChange={handleChange}
-          aria-label={isListeningMessage ? 'Listening' : 'Send a message...'}
-          placeholder={isListeningMessage ? 'Listening' : 'Send a message...'}
+          aria-label={isListeningMessage ? listeningText : placeholder}
+          placeholder={isListeningMessage ? listeningText : placeholder}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
           {...props}

package/src/MessageBar/MicrophoneButton.scss

@@ -46,3 +46,13 @@
     box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--microphone.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--pf-t--global--spacer--sm);
+  align-items: center;
+}

package/src/MessageBar/MicrophoneButton.tsx

@@ -24,6 +24,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
   tooltipContent?: { active?: string; inactive?: string };
   /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
   language?: string;
+  isCompact?: boolean;
 }
 
 export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
@@ -34,6 +35,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   tooltipProps,
   tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' },
   language = 'en-US',
+  isCompact,
   ...props
 }: MicrophoneButtonProps) => {
   // Microphone
@@ -81,7 +83,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
 
       setSpeechRecognition(recognition);
     }
-  }, [onSpeechRecognition]);
+  }, [onSpeechRecognition, language, onIsListeningChange]);
 
   if (!speechRecognition) {
     return null;
@@ -102,14 +104,15 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
     >
       <Button
         variant="plain"
-        className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className ?? ''}`}
+        className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
         aria-label={props['aria-label'] || 'Microphone button'}
         onClick={isListening ? stopListening : startListening}
         icon={
-          <Icon iconSize="xl" isInline>
+          <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
             <MicrophoneIcon />
           </Icon>
         }
+        size={isCompact ? 'sm' : undefined}
         {...props}
       />
     </Tooltip>

package/src/MessageBar/SendButton.scss

@@ -51,3 +51,13 @@
     transform: translate3d(0, 0, 0);
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--send.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--pf-t--global--spacer--sm);
+  align-items: center;
+}

package/src/MessageBar/SendButton.test.tsx

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

package/src/MessageBar/SendButton.tsx

@@ -17,6 +17,7 @@ export interface SendButtonProps extends ButtonProps {
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /** English text "Send" used in the tooltip */
   tooltipContent?: string;
+  isCompact?: boolean;
 }
 
 export const SendButton: React.FunctionComponent<SendButtonProps> = ({
@@ -24,6 +25,7 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
   onClick,
   tooltipProps,
   tooltipContent = 'Send',
+  isCompact,
   ...props
 }: SendButtonProps) => (
   <Tooltip
@@ -40,14 +42,15 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
   >
     <Button
       variant="plain"
-      className={`pf-chatbot__button--send ${className ?? ''}`}
+      className={`pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       aria-label={props['aria-label'] || 'Send button'}
       onClick={onClick}
       icon={
-        <Icon iconSize="xl" isInline>
+        <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
           <PaperPlaneIcon />
         </Icon>
       }
+      size={isCompact ? 'sm' : undefined}
       {...props}
     />
   </Tooltip>

package/src/MessageBar/StopButton.scss

@@ -34,3 +34,13 @@
     }
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-v6-c-button.pf-chatbot__button--stop.pf-m-compact {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: var(--pf-t--global--spacer--sm);
+  align-items: center;
+}

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/MessageBox/MessageBox.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { MessageBox } from './MessageBox';
+import userEvent from '@testing-library/user-event';
 
 describe('MessageBox', () => {
   it('should render Message box', () => {
@@ -23,4 +24,47 @@ describe('MessageBox', () => {
     expect(ref.current).not.toBeNull();
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
+  it('should call onScrollToBottomClick when scroll to top button is clicked', async () => {
+    const spy = jest.fn();
+    render(
+      <MessageBox onScrollToBottomClick={spy}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    // this forces button to show
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+    Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0 });
+    region.dispatchEvent(new Event('scroll'));
+
+    await waitFor(() => {
+      userEvent.click(screen.getByRole('button', { name: /Jump bottom button/i }));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+  it('should call onScrollToTopClick when scroll to top button is clicked', async () => {
+    const spy = jest.fn();
+    render(
+      <MessageBox onScrollToTopClick={spy}>
+        <div>Test message content</div>
+      </MessageBox>
+    );
+
+    // this forces button to show
+    const region = screen.getByRole('region');
+    Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+    Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+    Object.defineProperty(region, 'scrollTop', {
+      configurable: true,
+      value: 500
+    });
+    region.dispatchEvent(new Event('scroll'));
+
+    await waitFor(() => {
+      userEvent.click(screen.getByRole('button', { name: /Jump top button/i }));
+      expect(spy).toHaveBeenCalled();
+    });
+  });
 });

package/src/MessageBox/MessageBox.tsx

@@ -17,6 +17,10 @@ export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
   innerRef?: React.Ref<HTMLDivElement>;
   /** Modifier that controls how content in MessageBox is positioned within the container */
   position?: 'top' | 'bottom';
+  /** Click handler for additional logic for when scroll to top jump button is clicked */
+  onScrollToTopClick?: () => void;
+  /** Click handler for additional logic for when scroll to bottom jump button is clicked */
+  onScrollToBottomClick?: () => void;
 }
 
 const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
@@ -25,7 +29,10 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
   children,
   innerRef,
   className,
-  position = 'top'
+  position = 'top',
+  onScrollToTopClick,
+  onScrollToBottomClick,
+  ...props
 }: MessageBoxProps) => {
   const [atTop, setAtTop] = React.useState(false);
   const [atBottom, setAtBottom] = React.useState(true);
@@ -46,7 +53,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
       setAtTop(scrollTop === 0);
       setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const checkOverflow = React.useCallback(() => {
     const element = messageBoxRef.current;
@@ -54,21 +61,23 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
       const { scrollHeight, clientHeight } = element;
       setIsOverflowing(scrollHeight >= clientHeight);
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const scrollToTop = React.useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: 0, behavior: 'smooth' });
     }
-  }, []);
+    onScrollToTopClick && onScrollToTopClick();
+  }, [messageBoxRef]);
 
   const scrollToBottom = React.useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
     }
-  }, []);
+    onScrollToBottomClick && onScrollToBottomClick();
+  }, [messageBoxRef]);
 
   // Detect scroll position
   React.useEffect(() => {
@@ -85,7 +94,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
         element.removeEventListener('scroll', handleScroll);
       };
     }
-  }, [checkOverflow, handleScroll]);
+  }, [checkOverflow, handleScroll, messageBoxRef]);
 
   return (
     <>
@@ -96,6 +105,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
         aria-label={ariaLabel}
         className={`pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className ?? ''}`}
         ref={innerRef ?? messageBoxRef}
+        {...props}
       >
         {children}
         <div className="pf-chatbot__messagebox-announcement" aria-live="polite">

package/src/PreviewAttachment/PreviewAttachment.tsx

@@ -22,6 +22,8 @@ export interface PreviewAttachmentProps {
   title?: string;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
 }
 
 export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps> = ({
@@ -32,7 +34,8 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
   onDismiss = undefined,
   onEdit,
   title = 'Preview attachment',
-  displayMode = ChatbotDisplayMode.default
+  displayMode = ChatbotDisplayMode.default,
+  isCompact
 }: PreviewAttachmentProps) => {
   const handleEdit = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
@@ -60,6 +63,7 @@ export const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>
       title={title}
       isReadOnly
       displayMode={displayMode}
+      isCompact={isCompact}
     />
   );
 };

package/src/Settings/Settings.scss

@@ -32,3 +32,14 @@
   font-weight: var(--pf-t--global--font--weight--body--bold);
   text-align: center;
 }
+
+.pf-chatbot__settings-form-container.pf-m-compact {
+  .pf-chatbot__settings-form-row {
+    padding: var(--pf-t--global--spacer--md);
+    font-size: var(--pf-t--global--font--size--body--md);
+  }
+}
+
+.pf-chatbot__header.pf-m-compact {
+  padding-inline-start: var(--pf-t--global--spacer--md);
+}

package/src/Settings/SettingsForm.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@patternfly/react-core';
 import { render, screen } from '@testing-library/react';
 import { SettingsForm } from './SettingsForm';
+import '@testing-library/jest-dom';
 
 describe('SettingsForm', () => {
   it('should render settingsForm with custom classname', () => {
@@ -25,4 +26,20 @@ describe('SettingsForm', () => {
 
     expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
   });
+
+  it('should render settingsForm with isCompact', () => {
+    const fields = [
+      {
+        id: 'archived-chat',
+        label: 'Archive chat',
+        field: (
+          <Button id="archived-chat" variant="secondary">
+            Archive chat
+          </Button>
+        )
+      }
+    ];
+    render(<SettingsForm data-testid="settings-form" fields={fields} isCompact />);
+    expect(screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Settings/SettingsForm.tsx

@@ -5,10 +5,20 @@ export interface SettingsFormProps {
   className?: string;
   /** Array of fields to display in the settings layout */
   fields?: { id: string; label: string; field: React.ReactElement }[];
+  /** Sets form to compact styling. */
+  isCompact?: boolean;
 }
 
-export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({ className, fields = [], ...props }) => (
-  <div className={`pf-chatbot__settings-form-container ${className}`} {...props}>
+export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({
+  className,
+  fields = [],
+  isCompact,
+  ...props
+}) => (
+  <div
+    className={`pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}`}
+    {...props}
+  >
     <form className="pf-chatbot__settings-form">
       {fields.map((field) => (
         <div className="pf-chatbot__settings-form-row" key={field.label}>

package/src/SourcesCard/SourcesCard.scss

@@ -16,7 +16,7 @@
   box-shadow: var(--pf-t--global--box-shadow--sm);
 }
 
-.pf-chatbot__sources-card-body {
+.pf-chatbot__sources-card-body-text {
   display: block;
   display: -webkit-box;
   height: 2.8125rem;
@@ -25,11 +25,6 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-bottom: var(--pf-t--global--spacer--md);
-}
-
-.pf-chatbot__sources-card-no-footer {
-  margin-bottom: var(--pf-t--global--spacer--lg);
 }
 
 .pf-chatbot__sources-card-footer-container {
@@ -38,13 +33,14 @@
     var(--pf-t--global--spacer--sm) !important;
   .pf-chatbot__sources-card-footer {
     display: flex;
-    justify-content: space-between;
     align-items: center;
 
     &-buttons {
       display: flex;
       gap: var(--pf-t--global--spacer--xs);
       align-items: center;
+      justify-content: space-between;
+      flex: 1;
 
       .pf-v6-c-button {
         border-radius: var(--pf-t--global--border--radius--pill);
@@ -78,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;
+  }
+}