@patternfly/chatbot 6.5.0-prerelease.9 → 6.5.0

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.scss

@@ -1,6 +1,8 @@
 .pf-chatbot__message-quick-response {
   .pf-v6-c-label {
-    --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+    &:not(.pf-m-compact) {
+      --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+    }
 
     @media screen and (min-width: 401px) and (max-width: 600px) {
       --pf-v6-c-label__text--MaxWidth: 20ch;

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/TableMessage/TableMessage.scss

@@ -1,7 +1,8 @@
 .pf-chatbot__message-table {
   border-radius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--tertiary--default) !important;
-  --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default) !important;
+  border: var(--pf-t--global--border--width--high-contrast--regular) solid
+    var(--pf-t--global--border--color--high-contrast) !important;
   padding: 0 var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
 
   &.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
@@ -24,4 +25,15 @@
   .pf-v6-c-table__tr:last-of-type {
     border-block-end: 0;
   }
+
+  &.pf-m-markdown {
+    table,
+    tbody,
+    td,
+    thead,
+    th,
+    tr {
+      font-size: inherit;
+    }
+  }
 }

package/src/Message/TableMessage/TableMessage.tsx

@@ -5,6 +5,7 @@
 import { Children, cloneElement } from 'react';
 import { ExtraProps } from 'react-markdown';
 import { Table, TableProps } from '@patternfly/react-table';
+import { css } from '@patternfly/react-styles';
 
 interface Properties {
   line: number;
@@ -20,10 +21,20 @@ export interface TableNode {
 }
 
 export interface TableMessageProps {
+  /** Content of the table */
+  children?: React.ReactNode;
+  /** Flag indicating whether primary styles should be applied. */
   isPrimary?: boolean;
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
 }
 
-const TableMessage = ({ children, isPrimary, ...props }: Omit<TableProps, 'ref'> & ExtraProps & TableMessageProps) => {
+const TableMessage = ({
+  children,
+  isPrimary,
+  shouldRetainStyles,
+  ...props
+}: Omit<TableProps, 'ref'> & ExtraProps & TableMessageProps) => {
   const { className, ...rest } = props;
 
   // This allows us to parse the nested data we get back from the 3rd party Markdown parser
@@ -76,7 +87,12 @@ const TableMessage = ({ children, isPrimary, ...props }: Omit<TableProps, 'ref'>
     <Table
       aria-label={props['aria-label']}
       gridBreakPoint="grid"
-      className={`pf-chatbot__message-table ${isPrimary ? 'pf-m-primary' : ''} ${className ? className : ''}`}
+      className={css(
+        'pf-chatbot__message-table',
+        isPrimary && 'pf-m-primary',
+        shouldRetainStyles && 'pf-m-markdown',
+        className
+      )}
       {...rest}
     >
       {modifyChildren(children)}

package/src/Message/TextMessage/TextMessage.scss

@@ -53,6 +53,14 @@
       background-color: var(--pf-t--global--background--color--secondary--default);
     }
   }
+
+  &.pf-m-markdown {
+    display: block;
+  }
+  &.pf-m-markdown > [class^='pf-v6-c-content'] {
+    font-size: inherit;
+    color: inherit;
+  }
 }
 
 // ============================================================================
@@ -102,6 +110,10 @@ li[id*='user-content-fn-']:has(> span > span > .pf-chatbot__message-text + .pf-c
     }
   }
 
+  blockquote {
+    border-inline-start-color: var(--pf-t--global--border--color--alt);
+  }
+
   .pf-chatbot__message-text > .pf-chatbot__message-text {
     background-color: initial;
     padding: initial;

package/src/Message/TextMessage/TextMessage.tsx

@@ -4,19 +4,46 @@
 
 import { ExtraProps } from 'react-markdown';
 import { Content, ContentProps } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 
 export interface TextMessageProps {
+  /** The text message content */
+  children?: React.ReactNode;
+  /** Flag indicating whether primary styling is applied. */
   isPrimary?: boolean;
+  /** The wrapper component to use for the PatternFly Content component. Defaults to a div. */
+  component?:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'p'
+    | 'a'
+    | 'small'
+    | 'blockquote'
+    | 'pre'
+    | 'hr'
+    | 'ul'
+    | 'ol'
+    | 'dl'
+    | 'li'
+    | 'dt'
+    | 'dd';
+  /** Flag indicating that the content should retain message styles when using Markdown. */
+  shouldRetainStyles?: boolean;
 }
 
 const TextMessage = ({
   component,
   children,
   isPrimary,
+  shouldRetainStyles,
   ...props
 }: Omit<ContentProps, 'ref'> & ExtraProps & TextMessageProps) => (
-  <span className={`pf-chatbot__message-text ${isPrimary ? 'pf-m-primary' : ''}`}>
-    <Content component={component} {...props}>
+  <span className={css('pf-chatbot__message-text', isPrimary && 'pf-m-primary', shouldRetainStyles && 'pf-m-markdown')}>
+    <Content component={component} {...props} className={css(props?.className)}>
       {children}
     </Content>
   </span>

package/src/Message/UserFeedback/UserFeedback.scss

@@ -36,6 +36,11 @@
 }
 
 // feedback card
+.pf-chatbot__feedback-card-complete-header {
+  .pf-v6-c-card__actions {
+    --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--xl) * -1);
+  }
+}
 .pf-chatbot__feedback-card-title {
   font-family: var(--pf-t--global--font--family--heading);
   font-size: var(--pf-t--global--font--size--md);
@@ -51,10 +56,32 @@
   font-weight: initial;
 }
 
+// Privacy statement
+.pf-chatbot__feedback-card-privacy {
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+  line-height: var(--pf-t--global--font--line-height--body);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 // Compact styles
 .pf-v6-c-card.pf-m-compact.pf-chatbot__feedback-card {
+  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card--child--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+
   .pf-chatbot__feedback-card-form.pf-m-compact {
-    --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--md);
+    --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--sm);
+
+    .pf-v6-c-form__group.pf-m-action {
+      margin-block-start: var(--pf-t--global--spacer--sm);
+    }
+
+    .pf-v6-c-form-control {
+      font-size: var(--pf-t--global--font--size--body--sm);
+    }
   }
 }
 

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -74,9 +74,11 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
   textAreaProps?: TextAreaProps;
   /** Additional props passed to action group */
   actionGroupProps?: ActionGroupProps;
+  /** Optional privacy statement text displayed under text area */
+  privacyStatement?: string;
 }
 
-const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
+export const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   className,
   timestamp,
   title = 'Why did you choose this rating?',
@@ -102,6 +104,7 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   textAreaProps,
   actionGroupProps,
   submitButtonProps,
+  privacyStatement,
   ...props
 }: UserFeedbackProps) => {
   const [selectedResponse, setSelectedResponse] = useState<string>();
@@ -139,21 +142,28 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
               />
             )}
             {hasTextArea && (
-              <TextArea
-                value={value}
-                onChange={(_event, value) => {
-                  setValue(value);
-                  onTextAreaChange && onTextAreaChange(_event, value);
-                }}
-                placeholder={textAreaPlaceholder}
-                aria-label={textAreaAriaLabel}
-                resizeOrientation="vertical"
-                {...textAreaProps}
-              />
+              <>
+                <TextArea
+                  value={value}
+                  onChange={(_event, value) => {
+                    setValue(value);
+                    onTextAreaChange && onTextAreaChange(_event, value);
+                  }}
+                  placeholder={textAreaPlaceholder}
+                  aria-label={textAreaAriaLabel}
+                  resizeOrientation="vertical"
+                  {...textAreaProps}
+                />
+              </>
             )}
+            {privacyStatement && <div className="pf-chatbot__feedback-card-privacy">{privacyStatement}</div>}
             {children}
             <ActionGroup {...actionGroupProps}>
-              <Button onClick={() => onSubmit(selectedResponse, value)} {...submitButtonProps}>
+              <Button
+                onClick={() => onSubmit(selectedResponse, value)}
+                size={isCompact ? 'sm' : undefined}
+                {...submitButtonProps}
+              >
                 {submitWord}
               </Button>
             </ActionGroup>

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/AttachButton.scss

@@ -41,6 +41,5 @@
 .pf-v6-c-button.pf-chatbot__button--attach.pf-m-compact {
   width: 1.5rem;
   height: 1.5rem;
-  padding: var(--pf-t--global--spacer--sm);
   align-items: center;
 }

package/src/MessageBar/MessageBar.scss

@@ -21,21 +21,43 @@
   justify-content: flex-end;
   background-color: var(--pf-t--global--background--color--primary--default);
   border-radius: calc(var(--pf-t--global--border--radius--medium) * 2);
-  transition: box-shadow var(--pf-t--global--motion--timing-function--accelerate)
+  transition: border-color var(--pf-t--global--motion--timing-function--accelerate)
     var(--pf-t--global--motion--duration--sm);
+  position: relative;
+  border: var(--pf-t--global--border--width--control--default) solid transparent;
 
   overflow: hidden;
 
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: var(--pf-t--global--border--width--control--default) solid transparent;
+    pointer-events: none;
+    transition:
+      border-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
+      border-width var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm);
+  }
+
   &.pf-m-primary {
-    box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+    &::after {
+      border-color: var(--pf-t--global--border--color--default);
+    }
   }
 
   &:hover {
-    box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+    &::after {
+      border-color: var(--pf-t--global--border--color--default);
+      border-width: var(--pf-t--global--border--width--control--hover);
+    }
   }
 
   &:focus-within {
-    box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default);
+    &::after {
+      border-color: var(--pf-t--global--color--brand--default);
+      border-width: var(--pf-t--global--border--width--control--clicked);
+    }
   }
 
   &-actions {
@@ -125,9 +147,29 @@
   .pf-chatbot__message-textarea {
     font-size: var(--pf-t--global--font--size--sm) !important;
   }
+}
 
+.pf-m-compact {
   .pf-chatbot__message-bar-actions {
-    padding-block-start: var(--pf-t--global--spacer--md);
-    padding-block-end: var(--pf-t--global--spacer--md);
+    padding-block-start: var(--pf-t--global--spacer--sm);
+    padding-block-end: var(--pf-t--global--spacer--sm);
+  }
+}
+
+// ============================================================================
+// Multiline textarea styles (2+ lines)
+// ============================================================================
+.pf-chatbot__message-bar.pf-m-multiline {
+  border-radius: calc(var(--pf-t--global--border--radius--small) * 2);
+}
+
+// ============================================================================
+// High contrast styles
+// ============================================================================
+:root:where(.pf-v6-theme-high-contrast) {
+  .pf-chatbot__message-bar {
+    &::after {
+      border-color: var(--pf-t--global--border--color--default);
+    }
   }
 }

package/src/MessageBar/MessageBar.test.tsx

@@ -476,4 +476,16 @@ describe('Message bar', () => {
     const { container } = render(<MessageBar isPrimary onSendMessage={jest.fn} />);
     expect(container.querySelector('.pf-m-primary')).toBeTruthy();
   });
+
+  it('Renders with class pf-v6-m-ai-indicator when hasAiIndicator is true', () => {
+    render(<MessageBar onSendMessage={jest.fn} hasAiIndicator />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-ai-indicator');
+  });
+
+  it('Renders with class pf-v6-m-thinking when isThinking is true', () => {
+    render(<MessageBar onSendMessage={jest.fn} isThinking />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
+  });
 });