@patternfly/chatbot 6.3.2 → 6.4.0-prerelease.10

package/src/MessageBox/JumpButton.test.tsx

@@ -6,20 +6,20 @@ import userEvent from '@testing-library/user-event';
 describe('JumpButton', () => {
   it('should render top button correctly', () => {
     render(<JumpButton position="top" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
   });
   it('should render bottom button correctly', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
   });
   it('should call onClick appropriately', async () => {
     const spy = jest.fn();
     render(<JumpButton position="bottom" onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should be hidden if isHidden prop is used', async () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    expect(screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
   });
 });

package/src/MessageBox/JumpButton.tsx

@@ -4,7 +4,7 @@
 import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
-import { Button, Tooltip, Icon } from '@patternfly/react-core';
+import { Button, Tooltip, Icon, TooltipProps, ButtonProps } from '@patternfly/react-core';
 
 import { ArrowUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon';
 import { ArrowDownIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-down-icon';
@@ -16,16 +16,32 @@ export interface JumpButtonProps {
   onClick: () => void;
   /** Flag to change the visibilty of the button */
   isHidden?: boolean;
+  /** Additional props passed to jump buttons */
+  jumpButtonProps?: ButtonProps;
+  /** Additional props passed to tooltip */
+  jumpButtonTooltipProps?: TooltipProps;
 }
 
-const JumpButton: FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
+const JumpButton: FunctionComponent<JumpButtonProps> = ({
+  position,
+  isHidden,
+  onClick,
+  jumpButtonProps,
+  jumpButtonTooltipProps
+}: JumpButtonProps) =>
   isHidden ? null : (
-    <Tooltip id={`pf-chatbot__tooltip--jump-${position}`} content={`Back to ${position}`} position="top">
+    <Tooltip
+      id={`pf-chatbot__tooltip--jump-${position}`}
+      content={`Back to ${position}`}
+      position="top"
+      {...jumpButtonTooltipProps}
+    >
       <Button
         variant="plain"
         className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
-        aria-label={`Jump ${position}`}
+        aria-label={`Back to ${position}`}
         onClick={onClick}
+        {...jumpButtonProps}
       >
         <Icon iconSize="lg" isInline>
           {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}

package/src/MessageBox/MessageBox.test.tsx

@@ -61,7 +61,7 @@ describe('MessageBox', () => {
     });
 
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
+      userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
       expect(spy).toHaveBeenCalled();
     });
   });
@@ -85,7 +85,7 @@ describe('MessageBox', () => {
       region.dispatchEvent(new Event('scroll'));
     });
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump top/i }));
+      userEvent.click(screen.getByRole('button', { name: /Back to top/i }));
       expect(spy).toHaveBeenCalled();
     });
   });

package/src/MessageBox/MessageBox.tsx

@@ -18,6 +18,7 @@ import {
   WheelEventHandler
 } from 'react';
 import JumpButton from './JumpButton';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   /** Content that can be announced, such as a new message, for screen readers */
@@ -38,6 +39,14 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   onScrollToBottomClick?: () => void;
   /** Flag to enable automatic scrolling when new messages are added */
   enableSmartScroll?: boolean;
+  /** Props passed to top jump button */
+  jumpButtonTopProps?: ButtonProps;
+  /** Props passed to bottom jump button */
+  jumpButtonBottomProps?: ButtonProps;
+  /** Props passed to top jump button tooltip */
+  jumpButtonTopTooltipProps?: TooltipProps;
+  /** Props passed to top jump button tooltip */
+  jumpButtonBottomTooltipProps?: TooltipProps;
 }
 
 export interface MessageBoxHandle extends HTMLDivElement {
@@ -60,6 +69,10 @@ export const MessageBox = forwardRef(
       onScrollToTopClick,
       onScrollToBottomClick,
       enableSmartScroll = false,
+      jumpButtonTopProps,
+      jumpButtonBottomProps,
+      jumpButtonBottomTooltipProps,
+      jumpButtonTopTooltipProps,
       ...props
     }: MessageBoxProps,
     ref: ForwardedRef<MessageBoxHandle | null>
@@ -305,12 +318,18 @@ export const MessageBox = forwardRef(
 
     return (
       <>
-        <JumpButton position="top" isHidden={isOverflowing && atTop} onClick={scrollToTop} />
+        <JumpButton
+          position="top"
+          isHidden={isOverflowing && atTop}
+          onClick={scrollToTop}
+          jumpButtonProps={jumpButtonTopProps}
+          jumpButtonTooltipProps={jumpButtonTopTooltipProps}
+        />
         <div
           role="region"
           tabIndex={0}
           aria-label={ariaLabel}
-          className={`pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className ?? ''}`}
+          className={`pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className ?? ''}`}
           ref={messageBoxRef}
           {...props}
           {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}
@@ -324,6 +343,8 @@ export const MessageBox = forwardRef(
           position="bottom"
           isHidden={isOverflowing && atBottom}
           onClick={() => scrollToBottom({ resumeSmartScroll: true })}
+          jumpButtonProps={jumpButtonBottomProps}
+          jumpButtonTooltipProps={jumpButtonBottomTooltipProps}
         />
       </>
     );

package/src/MessageDivider/MessageDivider.scss

@@ -0,0 +1,45 @@
+// ============================================================================
+// Chatbot Main - Message Divider
+// ============================================================================
+.pf-chatbot__message-divider {
+  display: grid;
+  padding-block-end: var(--pf-t--global--spacer--xl);
+
+  .pf-v6-c-divider,
+  .pf-v6-c-label {
+    grid-row: 1 / 1;
+    grid-column: 1 / 1;
+  }
+
+  .pf-v6-c-label {
+    --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--tertiary--default); 
+    --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--default); 
+    --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact); 
+    --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
+    
+    .pf-v6-c-label__text {
+      font-weight: var(--pf-t--global--font--weight--body--bold);
+      text-align: center;
+    }  
+  }
+
+  &.pf-m-divider {    
+    .pf-v6-c-label {
+      --pf-v6-c-label--BackgroundColor: var(--pf-t--global--background--color--secondary--default); 
+      --pf-v6-c-label--MaxWidth: 75%;
+
+      justify-self: center;
+    }
+    
+    .pf-v6-c-divider {
+      align-self: center;
+    }
+  }
+  
+  &.pf-m-wrap {
+    .pf-v6-c-label,
+    .pf-v6-c-label__text {
+      white-space: normal;
+    }
+  }
+}

package/src/MessageDivider/MessageDivider.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MessageDivider from './MessageDivider';
+
+describe('MessageDivider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render default correctly with variant = date and content = new Date().toLocaleDateString()', () => {
+    render(<MessageDivider data-testid="message-divider" />);
+    expect(screen.getByText(new Date().toLocaleDateString())).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+  });
+  it('should render inset variant correctly', () => {
+    render(<MessageDivider variant="inset" content="test" data-testid="message-divider" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+  });
+  it('should render fullWidth variant correctly', () => {
+    render(<MessageDivider variant="fullWidth" content="test" data-testid="message-divider" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+    expect(screen.getByTestId('message-divider')).not.toHaveClass('pf-m-divider');
+  });
+});

package/src/MessageDivider/MessageDivider.tsx

@@ -0,0 +1,35 @@
+// ============================================================================
+// Chatbot Main - Message Divider
+// ============================================================================
+import type { FunctionComponent } from 'react';
+import { Divider, Label } from '@patternfly/react-core';
+
+export interface MessageDividerProps {
+  /** Variant of the divider */
+  variant?: 'inset' | 'fullWidth';
+  /** Content of the message divider */
+  content?: string;
+}
+
+const MessageDivider: FunctionComponent<MessageDividerProps> = ({
+  variant = 'inset',
+  content = new Date().toLocaleDateString(),
+  ...props
+}: MessageDividerProps) => {
+  if (variant === 'inset') {
+    return (
+      <div className="pf-chatbot__message-divider pf-m-divider pf-m-wrap" {...props}>
+        <Divider />
+        <Label variant="outline">{content}</Label>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pf-chatbot__message-divider pf-m-wrap" {...props}>
+      <Label>{content}</Label>
+    </div>
+  );
+};
+
+export default MessageDivider;

package/src/MessageDivider/index.ts

@@ -0,0 +1,3 @@
+export { default } from './MessageDivider';
+
+export * from './MessageDivider';

package/src/ResponseActions/ResponseActions.test.tsx

@@ -9,6 +9,7 @@ const ALL_ACTIONS = [
   { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
   { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
   { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+  { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
   { type: 'share', label: 'Share', clickedLabel: 'Shared' },
   { type: 'listen', label: 'Listen', clickedLabel: 'Listening' }
 ];
@@ -44,6 +45,7 @@ const ALL_ACTIONS_DATA_TEST = [
   { type: 'positive', label: 'Good response', dataTestId: 'positive' },
   { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
   { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+  { type: 'edit', label: 'Edit', dataTestId: 'edit' },
   { type: 'share', label: 'Share', dataTestId: 'share' },
   { type: 'download', label: 'Download', dataTestId: 'download' },
   { type: 'listen', label: 'Listen', dataTestId: 'listen' }
@@ -60,6 +62,7 @@ describe('ResponseActions', () => {
           positive: { onClick: jest.fn() },
           negative: { onClick: jest.fn() },
           copy: { onClick: jest.fn() },
+          edit: { onClick: jest.fn() },
           share: { onClick: jest.fn() },
           download: { onClick: jest.fn() },
           listen: { onClick: jest.fn() }
@@ -69,10 +72,11 @@ describe('ResponseActions', () => {
     const goodBtn = screen.getByRole('button', { name: 'Good response' });
     const badBtn = screen.getByRole('button', { name: 'Bad response' });
     const copyBtn = screen.getByRole('button', { name: 'Copy' });
+    const editBtn = screen.getByRole('button', { name: 'Edit' });
     const shareBtn = screen.getByRole('button', { name: 'Share' });
     const downloadBtn = screen.getByRole('button', { name: 'Download' });
     const listenBtn = screen.getByRole('button', { name: 'Listen' });
-    const buttons = [goodBtn, badBtn, copyBtn, shareBtn, downloadBtn, listenBtn];
+    const buttons = [goodBtn, badBtn, copyBtn, editBtn, shareBtn, downloadBtn, listenBtn];
     buttons.forEach((button) => {
       expect(button).toBeTruthy();
     });
@@ -265,6 +269,7 @@ describe('ResponseActions', () => {
       { type: 'positive', ariaLabel: 'Thumbs up' },
       { type: 'negative', ariaLabel: 'Thumbs down' },
       { type: 'copy', ariaLabel: 'Copy the message' },
+      { type: 'edit', ariaLabel: 'Edit this message' },
       { type: 'share', ariaLabel: 'Share it with friends' },
       { type: 'download', ariaLabel: 'Download your cool message' },
       { type: 'listen', ariaLabel: 'Listen up' }

package/src/ResponseActions/ResponseActions.tsx

@@ -6,7 +6,8 @@ import {
   OutlinedThumbsUpIcon,
   OutlinedThumbsDownIcon,
   OutlinedCopyIcon,
-  DownloadIcon
+  DownloadIcon,
+  PencilAltIcon
 } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
@@ -50,6 +51,7 @@ export interface ResponseActionProps {
     share?: ActionProps;
     download?: ActionProps;
     listen?: ActionProps;
+    edit?: ActionProps;
   };
 }
 
@@ -58,7 +60,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
   const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
   useEffect(() => {
     // Define the order of precedence for checking initial `isClicked`
-    const actionPrecedence = ['positive', 'negative', 'copy', 'share', 'download', 'listen'];
+    const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
     let initialActive: string | undefined;
 
     // Check predefined actions first based on precedence
@@ -83,7 +85,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
     setActiveButton(initialActive);
   }, [actions]);
 
-  const { positive, negative, copy, share, download, listen, ...additionalActions } = actions;
+  const { positive, negative, copy, edit, share, download, listen, ...additionalActions } = actions;
   const responseActions = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -165,6 +167,24 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           aria-controls={copy['aria-controls']}
         ></ResponseActionButton>
       )}
+      {edit && (
+        <ResponseActionButton
+          {...edit}
+          ariaLabel={edit.ariaLabel ?? 'Edit'}
+          clickedAriaLabel={edit.ariaLabel ?? 'Editing'}
+          onClick={(e) => handleClick(e, 'edit', edit.onClick)}
+          className={edit.className}
+          isDisabled={edit.isDisabled}
+          tooltipContent={edit.tooltipContent ?? 'Edit '}
+          clickedTooltipContent={edit.clickedTooltipContent ?? 'Editing'}
+          tooltipProps={edit.tooltipProps}
+          icon={<PencilAltIcon />}
+          isClicked={activeButton === 'edit'}
+          ref={edit.ref}
+          aria-expanded={edit['aria-expanded']}
+          aria-controls={edit['aria-controls']}
+        ></ResponseActionButton>
+      )}
       {share && (
         <ResponseActionButton
           {...share}
@@ -219,6 +239,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ action
           aria-controls={listen['aria-controls']}
         ></ResponseActionButton>
       )}
+
       {Object.keys(additionalActions).map((action) => (
         <ResponseActionButton
           {...additionalActions[action]}

package/src/index.ts

@@ -63,6 +63,9 @@ export * from './MessageBar';
 export { default as MessageBox } from './MessageBox';
 export * from './MessageBox';
 
+export { default as MessageDivider } from './MessageDivider';
+export * from './MessageDivider';
+
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 

package/src/main.scss

@@ -26,6 +26,7 @@
 @import './Message/UserFeedback/UserFeedback';
 @import './MessageBar/MessageBar';
 @import './MessageBox/MessageBox';
+@import './MessageDivider/MessageDivider';
 @import './MessageBox/JumpButton';
 @import './ResponseActions/ResponseActions';
 @import './Settings/Settings';
@@ -33,58 +34,6 @@
 @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
 @import './TermsOfUse/TermsOfUse';
 
-:where(:root) {
-  // ============================================================================
-  // Chatbot Custom Default Tokens
-  // ============================================================================
-
-  --pf-t--chatbot--heading--font-family: var(
-    --pf-v6-c-content--heading--FontFamily,
-    redhatdisplayvf,
-    redhatdisplay,
-    helvetica,
-    arial,
-    sans-serif
-  );
-
-  --pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
-  --pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
-
-  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
-
-  --pf-t--chatbot--blue-icon--background--color--hover: rgba(
-    146,
-    197,
-    249,
-    0.25
-  ); // --pf-t--global--color--nonstatus--blue--default @ 25%
-  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
-
-  // ============================================================================
-  // Chatbot Default tokens using PF semantic tokens
-  // ============================================================================
-  --pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
-  --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
-  --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
-
-  --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
-
-  --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
-}
-
-// ============================================================================
-// Chatbot Custom Dark Theme Tokens
-// ============================================================================
-:where(.pf-v6-theme-dark) {
-  --pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
-  --pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
-
-  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);
-
-  --pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
-  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
-}
-
 .ws-full-page-utils {
   left: 0 !important;
   right: auto !important;