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

package/src/Message/MessageAndActions/MessageAndActions.test.tsx

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

package/src/Message/MessageAndActions/MessageAndActions.tsx

@@ -0,0 +1,22 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container that wraps the primary message content and inline actions, such as ToolCall, ToolResponse, DeepThinking, ResponseActions, etc.
+ * Attachments should not be rendered inside this container.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface MessageAndActionsProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside the message and actions container. */
+  children: ReactNode;
+  /** Additional classes applied to the message and actions container. */
+  className?: string;
+}
+
+export const MessageAndActions: FunctionComponent<MessageAndActionsProps> = ({ children, className, ...props }) => (
+  <div className={css('pf-chatbot__message-and-actions', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default MessageAndActions;

package/src/Message/MessageAndActions/index.ts

@@ -0,0 +1 @@
+export * from './MessageAndActions';

package/src/Message/MessageAttachments/MessageAttachmentItem.test.tsx

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

package/src/Message/MessageAttachments/MessageAttachmentItem.tsx

@@ -0,0 +1,25 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container for a single message attachment item, typically the FileDetailsLabel component. You must wrap any attachment components in this container.
+ * Use this component within MessageAttachmentsContainer when passing children to Message to customize its structure.
+ */
+export interface MessageAttachmentItemProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside a single attachment container */
+  children: ReactNode;
+  /** Additional classes applied to the attachment container. */
+  className?: string;
+}
+
+export const MessageAttachmentItem: FunctionComponent<MessageAttachmentItemProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css('pf-chatbot__message-attachment', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default MessageAttachmentItem;

package/src/Message/MessageAttachments/MessageAttachmentsContainer.test.tsx

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

package/src/Message/MessageAttachments/MessageAttachmentsContainer.tsx

@@ -0,0 +1,25 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * The container to wrap MessageAttachment components. You must wrap any MessageAttachment components in this container.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface MessageAttachmentsContainerProps extends HTMLProps<HTMLDivElement> {
+  /** Content to render inside the attachments container */
+  children: ReactNode;
+  /** Additional classes applied to the attachments container. */
+  className?: string;
+}
+
+export const MessageAttachmentsContainer: FunctionComponent<MessageAttachmentsContainerProps> = ({
+  children,
+  className,
+  ...props
+}) => (
+  <div className={css('pf-chatbot__message-attachments-container', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default MessageAttachmentsContainer;

package/src/Message/MessageAttachments/index.ts

@@ -0,0 +1,2 @@
+export * from './MessageAttachmentItem';
+export * from './MessageAttachmentsContainer';

package/src/Message/MessageInput.tsx

@@ -22,7 +22,7 @@ export interface MessageInputProps extends FormProps {
   content?: string;
 }
 
-const MessageInput: FunctionComponent<MessageInputProps> = ({
+export const MessageInput: FunctionComponent<MessageInputProps> = ({
   editPlaceholder = 'Edit prompt message...',
   updateWord = 'Update',
   cancelWord = 'Cancel',

package/src/Message/MessageLoading.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import MessageLoading from './MessageLoading';
+
+test('Renders with pf-chatbot__message-loading class by default', () => {
+  render(<MessageLoading data-testid="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveClass('pf-chatbot__message-loading', { exact: true });
+});
+
+test('Renders with pf-m-primary class when isPrimary is true', () => {
+  render(<MessageLoading data-testid="test-id" isPrimary />);
+  expect(screen.getByTestId('test-id')).toHaveClass('pf-chatbot__message-loading pf-m-primary');
+});
+
+test('Renders loading word when loadingWord is passed', () => {
+  render(<MessageLoading loadingWord="Loading message" />);
+  expect(screen.getByText('Loading message')).toBeInTheDocument();
+});
+
+test('Spreads additional props', () => {
+  render(<MessageLoading data-testid="test-id" id="custom-id" />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'custom-id');
+});

package/src/Message/MessageLoading.tsx

@@ -2,8 +2,23 @@
 // Chatbot Main - Message - Processing
 // ============================================================================
 
-const MessageLoading = ({ loadingWord, isPrimary }) => (
-  <div className={`pf-chatbot__message-loading ${isPrimary ? 'pf-m-primary' : ''}`}>
+import { FunctionComponent } from 'react';
+import type { HTMLProps } from 'react';
+import { css } from '@patternfly/react-styles';
+
+/**
+ * MessageLoading displays a loading animation for messages.
+ * Use this component when passing children to Message to show a loading state.
+ */
+export interface MessageLoadingProps extends HTMLProps<HTMLDivElement> {
+  /** Text announced to screen readers during loading. */
+  loadingWord?: string;
+  /** Flag indicating whether primary styling is applied */
+  isPrimary?: boolean;
+}
+
+export const MessageLoading: FunctionComponent<MessageLoadingProps> = ({ loadingWord, isPrimary, ...props }) => (
+  <div className={css('pf-chatbot__message-loading', isPrimary && 'pf-m-primary')} {...props}>
     <span className="pf-chatbot__message-loading-dots">
       <span className="pf-v6-screen-reader">{loadingWord}</span>
     </span>

package/src/Message/QuickResponse/QuickResponse.test.tsx

@@ -0,0 +1,131 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import QuickResponse from './QuickResponse';
+
+test('Renders with quick responses', () => {
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' },
+    { id: '3', content: 'Response 3' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  expect(screen.getByText('Response 1')).toBeVisible();
+  expect(screen.getByText('Response 2')).toBeVisible();
+  expect(screen.getByText('Response 3')).toBeVisible();
+});
+
+test('Renders with compact styling', () => {
+  const quickResponses = [{ id: '1', content: 'Compact response' }];
+  render(<QuickResponse quickResponses={quickResponses} isCompact />);
+
+  expect(screen.getByText('Compact response').closest('.pf-v6-c-label')).toHaveClass('pf-m-compact');
+});
+
+test('Renders with custom className on response', () => {
+  const quickResponses = [{ id: '1', content: 'Custom class response', className: 'custom-response-class' }];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  expect(screen.getByText('Custom class response').closest('.pf-v6-c-label')).toHaveClass('custom-response-class');
+});
+
+test('Renders with custom container className', () => {
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(
+    <QuickResponse
+      quickResponses={quickResponses}
+      quickResponseContainerProps={{ className: 'custom-container-class' }}
+    />
+  );
+
+  expect(screen.getByText('Response 1').closest('.pf-v6-c-label-group')).toHaveClass('custom-container-class');
+});
+
+test('Spreads additional custom container props', () => {
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} quickResponseContainerProps={{ id: 'custom-container-id' }} />);
+
+  expect(screen.getByText('Response 1').closest('.pf-v6-c-label-group__list')).toHaveAttribute(
+    'id',
+    'custom-container-id'
+  );
+});
+
+test('Renders with pf-chatbot__message-quick-response--selected class after click', async () => {
+  const user = userEvent.setup();
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  await user.click(screen.getByText('Response 1'));
+
+  expect(screen.getByText('Response 1').closest('.pf-v6-c-label')).toHaveClass(
+    'pf-chatbot__message-quick-response--selected'
+  );
+});
+
+test('Does not calls onClick handler when not passed', async () => {
+  const user = userEvent.setup();
+  const handleClick = jest.fn();
+  const quickResponses = [{ id: '1', content: 'Clickable response' }];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  await user.click(screen.getByText('Clickable response'));
+
+  expect(handleClick).not.toHaveBeenCalled();
+});
+
+test('Calls onClick handler when passed', async () => {
+  const user = userEvent.setup();
+  const handleClick = jest.fn();
+  const quickResponses = [{ id: '1', content: 'Clickable response', onClick: handleClick }];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  await user.click(screen.getByText('Clickable response'));
+
+  expect(handleClick).toHaveBeenCalled();
+});
+
+test('Does not call onSelect when not passed', async () => {
+  const user = userEvent.setup();
+  const handleSelect = jest.fn();
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  await user.click(screen.getByText('Response 2'));
+
+  expect(handleSelect).not.toHaveBeenCalled();
+});
+
+test('Calls onSelect when passed', async () => {
+  const user = userEvent.setup();
+  const handleSelect = jest.fn();
+  const quickResponses = [
+    { id: '1', content: 'Response 1' },
+    { id: '2', content: 'Response 2' }
+  ];
+  render(<QuickResponse quickResponses={quickResponses} onSelect={handleSelect} />);
+
+  await user.click(screen.getByText('Response 2'));
+
+  expect(handleSelect).toHaveBeenCalledWith('2');
+});
+
+test('Spreads additional response props', () => {
+  const quickResponses = [{ id: '1', content: 'Response with props', isCompact: true, 'aria-label': 'Test label' }];
+  render(<QuickResponse quickResponses={quickResponses} />);
+
+  expect(screen.getByText('Response with props').closest('.pf-v6-c-label')).toHaveAttribute('aria-label', 'Test label');
+});

package/src/Message/QuickResponse/QuickResponse.tsx

@@ -2,6 +2,7 @@ import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { Label, LabelGroup, LabelGroupProps, LabelProps } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
 
 export interface QuickResponse extends Omit<LabelProps, 'children'> {
   content: string;
@@ -35,7 +36,7 @@ export const QuickResponse: FunctionComponent<QuickResponseProps> = ({
   };
   return (
     <LabelGroup
-      className={`pf-chatbot__message-quick-response ${quickResponseContainerProps?.className ? quickResponseContainerProps?.className : ''}`}
+      className={css('pf-chatbot__message-quick-response', quickResponseContainerProps?.className)}
       {...quickResponseContainerProps}
     >
       {quickResponses.map(({ id, onClick, content, className, ...props }: QuickResponse) => (
@@ -45,7 +46,7 @@ export const QuickResponse: FunctionComponent<QuickResponseProps> = ({
           color="blue"
           key={id}
           onClick={() => handleQuickResponseClick(id, onClick)}
-          className={`${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`}
+          className={css(id === selectedQuickResponse && 'pf-chatbot__message-quick-response--selected', className)}
           isCompact={isCompact}
           {...props}
         >

package/src/Message/QuickResponse/index.ts

@@ -0,0 +1 @@
+export * from './QuickResponse';

package/src/Message/QuickStarts/QuickStartTile.tsx

@@ -53,7 +53,7 @@ export interface QuickStartTileProps {
   isCompact?: boolean;
 }
 
-const QuickStartTile: FC<QuickStartTileProps> = ({
+export const QuickStartTile: FC<QuickStartTileProps> = ({
   className,
   quickStart,
   onClick,

package/src/Message/QuickStarts/index.ts

@@ -0,0 +1,2 @@
+export * from './QuickStartTile';
+export * from './types';

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -78,7 +78,7 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
   privacyStatement?: string;
 }
 
-const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
+export const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   className,
   timestamp,
   title = 'Why did you choose this rating?',

package/src/Message/UserFeedback/UserFeedbackComplete.tsx

@@ -2,10 +2,7 @@
 // Chatbot Main - Messages - Feedback Complete Card
 // ============================================================================
 import type { MouseEvent as ReactMouseEvent, FunctionComponent } from 'react';
-
 import { useState, useRef, useEffect } from 'react';
-
-// Import PatternFly components
 import { Card, CardBody, CardHeader, CardProps, CardTitle, OUIAProps, useOUIAProps } from '@patternfly/react-core';
 import CloseButton from './CloseButton';
 
@@ -48,7 +45,7 @@ export interface UserFeedbackCompleteProps extends Omit<CardProps, 'ref'>, OUIAP
   timestamp?: string;
 }
 
-const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps> = ({
+export const UserFeedbackComplete: FunctionComponent<UserFeedbackCompleteProps> = ({
   className,
   title = 'Feedback submitted',
   body = "We've received your response. Thank you for sharing your feedback!",

package/src/Message/UserFeedback/index.ts

@@ -0,0 +1,2 @@
+export * from './UserFeedback';
+export * from './UserFeedbackComplete';

package/src/Message/index.ts

@@ -1,4 +1,12 @@
 export { default } from './Message';
 export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
 
+export * from './ErrorMessage/ErrorMessage';
+export * from './MessageAndActions';
+export * from './MessageAttachments';
 export * from './Message';
+export * from './MessageLoading';
+export * from './MessageInput';
+export * from './QuickResponse';
+export * from './QuickStarts';
+export * from './UserFeedback';

package/src/MessageBar/MessageBar.scss

@@ -66,6 +66,19 @@
     padding-block-start: var(--pf-t--global--spacer--xs);
     padding-block-end: var(--pf-t--global--spacer--xs);
     gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+
+    &.pf-m-grouped {
+      flex-basis: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  &-actions-group {
+    display: flex;
+    padding-block-start: var(--pf-t--global--spacer--xs);
+    padding-block-end: var(--pf-t--global--spacer--xs);
+    gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+    align-items: center;
   }
 
   &-input {
@@ -150,7 +163,8 @@
 }
 
 .pf-m-compact {
-  .pf-chatbot__message-bar-actions {
+  .pf-chatbot__message-bar-actions,
+  .pf-chatbot__message-bar-actions-group {
     padding-block-start: var(--pf-t--global--spacer--sm);
     padding-block-end: var(--pf-t--global--spacer--sm);
   }

package/src/MessageBar/MessageBar.test.tsx

@@ -488,4 +488,31 @@ describe('Message bar', () => {
 
     expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
   });
+
+  it('Renders with flex-basis of auto by default', () => {
+    render(<MessageBar onSendMessage={jest.fn} />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
+      'style',
+      'flex-basis: auto;'
+    );
+  });
+
+  it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
+    render(<MessageBar forceMultilineLayout onSendMessage={jest.fn} />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
+      'style',
+      'flex-basis: 100%;'
+    );
+  });
+
+  it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
+    render(<MessageBar additionalActions="actions" onSendMessage={jest.fn} />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
+      'style',
+      'flex-basis: 100%;'
+    );
+  });
 });