@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.21

package/src/Message/UserFeedback/UserFeedback.tsx

@@ -8,15 +8,21 @@ import { useState, useRef, useEffect } from 'react';
 // Import PatternFly components
 import {
   ActionGroup,
+  ActionGroupProps,
   Button,
+  ButtonProps,
   Card,
   CardBody,
+  CardBodyProps,
   CardHeader,
+  CardHeaderProps,
   CardProps,
   Form,
+  FormProps,
   LabelGroupProps,
   OUIAProps,
-  TextArea
+  TextArea,
+  TextAreaProps
 } from '@patternfly/react-core';
 import QuickResponse from '../QuickResponse/QuickResponse';
 import CloseButton from './CloseButton';
@@ -54,6 +60,20 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
   focusOnLoad?: boolean;
   /** Timestamp passed in by Message for more context in aria announcements */
   timestamp?: string;
+  /** Additional props passed to submit button */
+  submitButtonProps?: ButtonProps;
+  /** Additional props passed to card header */
+  cardHeaderProps?: CardHeaderProps;
+  /** Additional props passed to card body */
+  cardBodyProps?: CardBodyProps;
+  /** Additional props passed to title heading */
+  headingLevelProps?: React.HTMLAttributes<HTMLHeadingElement>;
+  /** Additional props passed to form */
+  formProps?: FormProps;
+  /** Additional props passed to text area */
+  textAreaProps?: TextAreaProps;
+  /** Additional props passed to action group */
+  actionGroupProps?: ActionGroupProps;
 }
 
 const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
@@ -74,6 +94,14 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
   headingLevel: HeadingLevel = 'h1',
   focusOnLoad = true,
   isCompact,
+  children,
+  cardHeaderProps,
+  cardBodyProps,
+  headingLevelProps,
+  formProps,
+  textAreaProps,
+  actionGroupProps,
+  submitButtonProps,
   ...props
 }: UserFeedbackProps) => {
   const [selectedResponse, setSelectedResponse] = useState<string>();
@@ -94,11 +122,14 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
           actions={{
             actions: <CloseButton onClose={onClose} ariaLabel={closeButtonAriaLabel} />
           }}
+          {...cardHeaderProps}
         >
-          <HeadingLevel className="pf-chatbot__feedback-card-title">{title}</HeadingLevel>
+          <HeadingLevel className="pf-chatbot__feedback-card-title" {...headingLevelProps}>
+            {title}
+          </HeadingLevel>
         </CardHeader>
-        <CardBody>
-          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`}>
+        <CardBody {...cardBodyProps}>
+          <Form className={`pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`} {...formProps}>
             {quickResponses && (
               <QuickResponse
                 quickResponses={quickResponses}
@@ -117,10 +148,14 @@ const UserFeedback: FunctionComponent<UserFeedbackProps> = ({
                 placeholder={textAreaPlaceholder}
                 aria-label={textAreaAriaLabel}
                 resizeOrientation="vertical"
+                {...textAreaProps}
               />
             )}
-            <ActionGroup>
-              <Button onClick={() => onSubmit(selectedResponse, value)}>{submitWord}</Button>
+            {children}
+            <ActionGroup {...actionGroupProps}>
+              <Button onClick={() => onSubmit(selectedResponse, value)} {...submitButtonProps}>
+                {submitWord}
+              </Button>
             </ActionGroup>
           </Form>
         </CardBody>

package/src/MessageBar/MessageBar.tsx

@@ -141,6 +141,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   const [message, setMessage] = useState<string | number>(value ?? '');
   const [isListeningMessage, setIsListeningMessage] = useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = useState(false);
+  const [isComposing, setIsComposing] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const textareaRef = (innerRef as React.RefObject<HTMLTextAreaElement>) ?? inputRef;
   const attachButtonRef = useRef<HTMLButtonElement>(null);
@@ -285,21 +286,38 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
 
   const handleKeyDown = useCallback(
     (event: ReactKeyboardEvent) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
+      // Japanese and other languages may use IME for character input.
+      // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+      // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+      // Chrome, Edge, and Firefox seem to work well with just the compose event.
+      // Safari is a little bit special. We need to handle 229 as well in this case.
+      const nativeEvent = event.nativeEvent as KeyboardEvent;
+      const isCompositionKey = nativeEvent.which === 229;
+      const isCurrentlyComposing = isComposing || isCompositionKey;
+
+      if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
         event.preventDefault();
         if (!isSendButtonDisabled && !hasStopButton) {
           handleSend(message);
         }
       }
-      if (event.key === 'Enter' && event.shiftKey) {
+      if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
         if (textareaRef.current) {
           handleNewLine(textareaRef.current);
         }
       }
     },
-    [isSendButtonDisabled, hasStopButton, handleSend, message]
+    [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]
   );
 
+  const handleCompositionStart = useCallback(() => {
+    setIsComposing(true);
+  }, []);
+
+  const handleCompositionEnd = useCallback(() => {
+    setIsComposing(false);
+  }, []);
+
   const handleAttachMenuToggle = () => {
     attachMenuProps?.setIsAttachMenuOpen && attachMenuProps?.setIsAttachMenuOpen(!attachMenuProps?.isAttachMenuOpen);
     attachMenuProps?.onAttachMenuToggleClick();
@@ -402,6 +420,8 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
           placeholder={isListeningMessage ? listeningText : placeholder}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
           {...props}
         />
       </div>

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

@@ -23,18 +23,6 @@
   margin-top: auto !important;
 }
 
-// hide from view but not assistive technologies
-// https://css-tricks.com/inclusively-hidden/
-.pf-chatbot__messagebox-announcement {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 @media screen and (min-width: 64rem) {
   .pf-chatbot--embedded,
   .pf-chatbot--drawer,

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,7 +318,13 @@ 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}
@@ -316,7 +335,7 @@ export const MessageBox = forwardRef(
           {...(enableSmartScroll ? { ...smartScrollHandlers } : {})}
         >
           {children}
-          <div className="pf-chatbot__messagebox-announcement" aria-live="polite">
+          <div className="pf-chatbot__messagebox-announcement pf-chatbot-m-hidden" aria-live="polite">
             {announcement}
           </div>
         </div>
@@ -324,6 +343,8 @@ export const MessageBox = forwardRef(
           position="bottom"
           isHidden={isOverflowing && atBottom}
           onClick={() => scrollToBottom({ resumeSmartScroll: true })}
+          jumpButtonProps={jumpButtonBottomProps}
+          jumpButtonTooltipProps={jumpButtonBottomTooltipProps}
         />
       </>
     );

package/src/SourcesCard/SourcesCard.scss

@@ -16,6 +16,17 @@
   box-shadow: var(--pf-t--global--box-shadow--sm);
 }
 
+.pf-chatbot__compact-sources-card-body {
+  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__sources-card-subtitle,
+.pf-chatbot__sources-card-subtle {
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+}
+
 .pf-chatbot__sources-card-body-text {
   display: block;
   display: -webkit-box;
@@ -27,6 +38,12 @@
   text-overflow: ellipsis;
 }
 
+.pf-chatbot__sources-card-title-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xs);
+}
+
 .pf-chatbot__sources-card-footer-container {
   border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
   padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)

package/src/SourcesCard/SourcesCard.test.tsx

@@ -256,4 +256,97 @@ describe('SourcesCard', () => {
     );
     expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
   });
+
+  it('should apply cardTitleProps appropriately', () => {
+    render(
+      <SourcesCard
+        cardTitleProps={{ 'data-testid': 'card-title', className: 'test' } as any}
+        sources={[{ title: 'How to make an apple pie', link: '' }]}
+      />
+    );
+    expect(screen.getByTestId('card-title')).toHaveClass('test');
+  });
+
+  it('should apply cardBodyProps appropriately', () => {
+    render(
+      <SourcesCard
+        cardBodyProps={
+          { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' } as any
+        }
+        sources={[{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }]}
+      />
+    );
+    expect(screen.getByTestId('card-body')).toHaveClass('test');
+  });
+
+  it('should apply cardFooterProps appropriately', () => {
+    render(
+      <SourcesCard
+        cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
+        sources={[
+          { title: 'How to make an apple pie', link: '' },
+          { title: 'How to make cookies', link: '' }
+        ]}
+      />
+    );
+    expect(screen.getByTestId('card-footer')).toHaveClass('test');
+  });
+
+  it('should apply truncateProps appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[
+          {
+            title: 'How to make an apple pie',
+            link: '',
+            truncateProps: { 'data-testid': 'card-truncate', className: 'test' } as any
+          }
+        ]}
+      />
+    );
+    expect(screen.getByTestId('card-truncate')).toHaveClass('test');
+  });
+
+  it('should apply custom footer appropriately when there is one source', () => {
+    render(
+      <SourcesCard sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]} />
+    );
+    expect(screen.getByText('I am a custom footer'));
+    expect(screen.queryByText('1/1')).toBeFalsy();
+  });
+
+  it('should apply custom footer appropriately when are multiple sources', () => {
+    render(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> },
+          { title: 'How to bake bread', link: '' }
+        ]}
+      />
+    );
+    expect(screen.getByText('I am a custom footer'));
+    // does not show navigation bar
+    expect(screen.queryByText('1/2')).toBeFalsy();
+  });
+
+  it('should apply footer props to custom footer appropriately', () => {
+    render(
+      <SourcesCard
+        cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
+        sources={[{ title: 'How to make an apple pie', link: '', footer: <>I am a custom footer</> }]}
+      />
+    );
+    expect(screen.getByText('I am a custom footer'));
+    expect(screen.getByTestId('card-footer')).toHaveClass('test');
+  });
+
+  it('should apply subtitle appropriately', () => {
+    render(
+      <SourcesCard
+        sources={[{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }]}
+      />
+    );
+    expect(screen.getByText('How to make an apple pie'));
+    expect(screen.getByText('You must first create the universe'));
+  });
 });