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

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