@patternfly/chatbot 6.5.0-prerelease.27 → 6.5.0-prerelease.29

package/src/MessageBar/MessageBar.tsx

@@ -58,6 +58,8 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   placeholder?: string;
   /** Flag to disable/enable the Attach button  */
   hasAttachButton?: boolean;
+  /** Whether the attach button is rendered before or after the message input. */
+  attachButtonPosition?: 'start' | 'end';
   /** Flag to enable the Microphone button  */
   hasMicrophoneButton?: boolean;
   /** Placeholder text when listening */
@@ -116,6 +118,10 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   innerRef?: React.Ref<HTMLTextAreaElement>;
   /** Sets background color to primary */
   isPrimary?: boolean;
+  /** Additional actions to render for the message bar. This will force a multiline layout, and the actions will render at the start of the container.  */
+  additionalActions?: React.ReactNode;
+  /** Flag indicating whether a multiline layout for the message input and actions should be forced. This can be used to always render actions below the message input. */
+  forceMultilineLayout?: boolean;
   /** @beta Flag indicating whether the message bar has an AI indicator border. */
   hasAiIndicator?: boolean;
   /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */
@@ -128,6 +134,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   alwayShowSendButton,
   placeholder = 'Send a message...',
   hasAttachButton = true,
+  attachButtonPosition = 'end',
   hasMicrophoneButton,
   listeningText = 'Listening',
   handleAttach,
@@ -151,6 +158,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   dropzoneProps,
   innerRef,
   isPrimary,
+  additionalActions,
+  forceMultilineLayout = false,
   hasAiIndicator,
   isThinking,
   ...props
@@ -161,7 +170,9 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
   const [isComposing, setIsComposing] = useState(false);
-  const [isMultiline, setIsMultiline] = useState(false);
+
+  const shouldForceMultiline = forceMultilineLayout || additionalActions;
+  const [isMultiline, setIsMultiline] = useState(shouldForceMultiline);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
@@ -178,7 +189,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
 
       const grandparent = parent.parentElement;
       if (grandparent) {
-        grandparent.style.setProperty('flex-basis', 'auto');
+        grandparent.style.setProperty('flex-basis', shouldForceMultiline ? '100%' : 'auto');
       }
     }
   };
@@ -227,7 +238,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     const parent = field.parentElement;
     if (parent) {
       const grandparent = parent.parentElement;
-      if (textIsLongerThan2Lines(field) && grandparent) {
+      if ((textIsLongerThan2Lines(field) || shouldForceMultiline) && grandparent) {
         grandparent.style.setProperty('flex-basis', `100%`);
       }
     }
@@ -277,14 +288,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     if (field) {
       if (field.value === '') {
         setInitialLineHeight(field);
-        setIsMultiline(false);
+        !shouldForceMultiline && setIsMultiline(false);
       } else {
         setAutoHeight(field);
         setAutoWidth(field);
-        checkIfMultiline(field);
+        !shouldForceMultiline && checkIfMultiline(field);
       }
     }
-  }, [displayMode, message, setAutoWidth, checkIfMultiline]);
+  }, [displayMode, message, setAutoWidth, shouldForceMultiline, checkIfMultiline]);
 
   useEffect(() => {
     const field = textareaRef.current;
@@ -300,10 +311,10 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
       if (textareaRef.current) {
         if (event.target.value === '') {
           setInitialLineHeight(textareaRef.current);
-          setIsMultiline(false);
+          !shouldForceMultiline && setIsMultiline(false);
         } else {
           setAutoHeight(textareaRef.current);
-          checkIfMultiline(textareaRef.current);
+          !shouldForceMultiline && checkIfMultiline(textareaRef.current);
         }
       }
       setMessage(event.target.value);
@@ -365,6 +376,55 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     onChange && onChange({} as ChangeEvent<HTMLTextAreaElement>, message);
   };
 
+  const renderAttachButton = () => {
+    if (!attachMenuProps && hasAttachButton) {
+      return (
+        <AttachButton
+          onAttachAccepted={handleAttach}
+          isDisabled={isListeningMessage}
+          tooltipContent={buttonProps?.attach?.tooltipContent}
+          inputTestId={buttonProps?.attach?.inputTestId}
+          isCompact={isCompact}
+          tooltipProps={buttonProps?.attach?.tooltipProps}
+          allowedFileTypes={allowedFileTypes}
+          minSize={minSize}
+          maxSize={maxSize}
+          maxFiles={maxFiles}
+          isAttachmentDisabled={isAttachmentDisabled}
+          onAttach={onAttach}
+          onAttachRejected={onAttachRejected}
+          validator={validator}
+          dropzoneProps={dropzoneProps}
+          {...buttonProps?.attach}
+          {...buttonProps?.attach?.props}
+        />
+      );
+    }
+    if (attachMenuProps) {
+      return (
+        <AttachButton
+          ref={attachButtonRef}
+          onClick={handleAttachMenuToggle}
+          isDisabled={isListeningMessage}
+          tooltipContent={buttonProps?.attach?.tooltipContent}
+          isCompact={isCompact}
+          tooltipProps={buttonProps?.attach?.tooltipProps}
+          allowedFileTypes={allowedFileTypes}
+          minSize={minSize}
+          maxSize={maxSize}
+          maxFiles={maxFiles}
+          isAttachmentDisabled={isAttachmentDisabled}
+          onAttach={onAttach}
+          onAttachRejected={onAttachRejected}
+          validator={validator}
+          dropzoneProps={dropzoneProps}
+          {...buttonProps?.attach}
+        />
+      );
+    }
+  };
+
+  const isAttachButtonAtStart = attachButtonPosition === 'start';
   const renderButtons = () => {
     if (hasStopButton && handleStopButton) {
       return (
@@ -379,47 +439,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     }
     return (
       <>
-        {attachMenuProps && (
-          <AttachButton
-            ref={attachButtonRef}
-            onClick={handleAttachMenuToggle}
-            isDisabled={isListeningMessage}
-            tooltipContent={buttonProps?.attach?.tooltipContent}
-            isCompact={isCompact}
-            tooltipProps={buttonProps?.attach?.tooltipProps}
-            allowedFileTypes={allowedFileTypes}
-            minSize={minSize}
-            maxSize={maxSize}
-            maxFiles={maxFiles}
-            isAttachmentDisabled={isAttachmentDisabled}
-            onAttach={onAttach}
-            onAttachRejected={onAttachRejected}
-            validator={validator}
-            dropzoneProps={dropzoneProps}
-            {...buttonProps?.attach}
-          />
-        )}
-        {!attachMenuProps && hasAttachButton && (
-          <AttachButton
-            onAttachAccepted={handleAttach}
-            isDisabled={isListeningMessage}
-            tooltipContent={buttonProps?.attach?.tooltipContent}
-            inputTestId={buttonProps?.attach?.inputTestId}
-            isCompact={isCompact}
-            tooltipProps={buttonProps?.attach?.tooltipProps}
-            allowedFileTypes={allowedFileTypes}
-            minSize={minSize}
-            maxSize={maxSize}
-            maxFiles={maxFiles}
-            isAttachmentDisabled={isAttachmentDisabled}
-            onAttach={onAttach}
-            onAttachRejected={onAttachRejected}
-            validator={validator}
-            dropzoneProps={dropzoneProps}
-            {...buttonProps?.attach}
-            {...buttonProps?.attach?.props}
-          />
-        )}
+        {!isAttachButtonAtStart && renderAttachButton()}
         {hasMicrophoneButton && (
           <MicrophoneButton
             isListening={isListeningMessage}
@@ -447,8 +467,12 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
     );
   };
 
+  const hasGroupedActions = additionalActions || (isAttachButtonAtStart && isMultiline);
   const messageBarContents = (
     <>
+      {isAttachButtonAtStart && !isMultiline && (
+        <div className="pf-chatbot__message-bar-actions test">{renderAttachButton()}</div>
+      )}
       <div className={`pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`}>
         <TextArea
           className="pf-chatbot__message-textarea"
@@ -463,7 +487,19 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
           {...props}
         />
       </div>
-      <div className="pf-chatbot__message-bar-actions">{renderButtons()}</div>
+      <div className={css('pf-chatbot__message-bar-actions', hasGroupedActions && 'pf-m-grouped')}>
+        {hasGroupedActions ? (
+          <>
+            <div className={css('pf-chatbot__message-bar-actions-group')}>
+              {isAttachButtonAtStart && renderAttachButton()}
+              {additionalActions}
+            </div>
+            <div className={css('pf-chatbot__message-bar-actions-group')}>{renderButtons()}</div>
+          </>
+        ) : (
+          renderButtons()
+        )}
+      </div>
     </>
   );
 

package/src/ResponseActions/ResponseActions.tsx

@@ -42,6 +42,12 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
 type ExtendedActionProps = ActionProps & {
   [key: string]: any;
 };
+
+/**
+ * The various actions that can be attached to a bot message for users to interact with.
+ * Use this component when passing children to Message to customize its structure.
+ */
+
 export interface ResponseActionProps {
   /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
   actions: Record<string, ExtendedActionProps | undefined> & {

package/src/ResponseActions/ResponseActionsGroups.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ResponseActionsGroups from './ResponseActionsGroups';
+
+test('Renders with children', () => {
+  render(<ResponseActionsGroups>Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toBeInTheDocument();
+});
+
+test('Renders with pf-chatbot__response-actions-groups class by default', () => {
+  render(<ResponseActionsGroups>Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toHaveClass('pf-chatbot__response-actions-groups', { exact: true });
+});
+
+test('Renders with custom className', () => {
+  render(<ResponseActionsGroups className="custom-class">Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toHaveClass('custom-class');
+});
+
+test('Spreads additional props', () => {
+  render(<ResponseActionsGroups id="test-id">Test content</ResponseActionsGroups>);
+  expect(screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

package/src/ResponseActions/ResponseActionsGroups.tsx

@@ -0,0 +1,28 @@
+// ============================================================================
+// Response Actions Groups - Container for multiple action groups
+// ============================================================================
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container for grouping multiple related ResponseActions components, typically used for having different persistence states amongst groups.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface ResponseActionsGroupsProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside the response actions groups container */
+  children: ReactNode;
+  /** Additional classes applied to the response actions groups container. */
+  className?: string;
+}
+
+export const ResponseActionsGroups: FunctionComponent<ResponseActionsGroupsProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css('pf-chatbot__response-actions-groups', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default ResponseActionsGroups;

package/src/ResponseActions/index.ts

@@ -1,3 +1,4 @@
 export { default } from './ResponseActions';
 
 export * from './ResponseActions';
+export * from './ResponseActionsGroups';