@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.1

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -112,6 +112,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   loadingState?: SkeletonProps;
   /** Content to show in error state. Error state will appear once content is passed in. */
   errorState?: HistoryEmptyStateProps;
+  /** Content to show in empty state. Empty state will appear once content is passed in. */
+  emptyState?: HistoryEmptyStateProps;
+  /** Content to show in no results state. No results state will appear once content is passed in. */
+  noResultsState?: HistoryEmptyStateProps;
 }
 
 export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -141,6 +145,8 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   isLoading,
   loadingState,
   errorState,
+  emptyState,
+  noResultsState,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = React.useRef<HTMLDivElement>(null);
@@ -210,6 +216,14 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
     if (errorState) {
       return <HistoryEmptyState {...errorState} />;
     }
+
+    if (emptyState) {
+      return <HistoryEmptyState {...emptyState} />;
+    }
+
+    if (noResultsState) {
+      return <HistoryEmptyState {...noResultsState} />;
+    }
     return (
       <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
         <MenuContent>{buildMenu()}</MenuContent>

package/src/Message/Message.scss

@@ -97,6 +97,10 @@
   flex-wrap: wrap;
 }
 
+.pf-chatbot__message-edit-buttons {
+  --pf-v6-c-form__group--m-action--MarginBlockStart: 0;
+}
+
 @import './MessageLoading';
 @import './CodeBlockMessage/CodeBlockMessage';
 @import './TextMessage/TextMessage';

package/src/Message/Message.test.tsx

@@ -784,6 +784,20 @@ describe('Message', () => {
     // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
     expect(rehypeExternalLinks).not.toHaveBeenCalled();
   });
+  it('should handle extra link props correctly', async () => {
+    const spy = jest.fn();
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={`[PatternFly](https://www.patternfly.org/)`}
+        linkProps={{ onClick: spy }}
+      />
+    );
+    await userEvent.click(screen.getByRole('link', { name: /PatternFly/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
   it('should handle error correctly', () => {
     render(<Message avatar="./img" role="user" name="User" error={ERROR} />);
     expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
@@ -801,4 +815,52 @@ describe('Message', () => {
     expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
     expect(screen.queryByText('Test')).toBeFalsy();
   });
+  it('should handle isEditable when there is message content', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable content="Test" />);
+    expect(screen.getByRole('textbox')).toBeTruthy();
+    expect(screen.getByRole('textbox')).toHaveValue('Test');
+    expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+  });
+  it('should handle isEditable when there is no message content', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable />);
+    expect(screen.getByRole('textbox')).toBeTruthy();
+    expect(screen.getByRole('textbox')).toHaveValue('');
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
+    expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+  });
+  it('should be able to change edit placeholder', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable editPlaceholder="I am a placeholder" />);
+    expect(screen.getByRole('textbox')).toBeTruthy();
+    expect(screen.getByRole('textbox')).toHaveValue('');
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
+  });
+  it('should be able to change updateWord', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable updateWord="Submit" />);
+    expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+  });
+  it('should be able to change cancelWord', () => {
+    render(<Message avatar="./img" role="user" name="User" isEditable cancelWord="Don't submit" />);
+    expect(screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
+  });
+  it('should be able to add onEditUpdate', async () => {
+    const spy = jest.fn();
+    render(<Message avatar="./img" role="user" name="User" isEditable onEditUpdate={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: /Update/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to add onEditCancel', async () => {
+    const spy = jest.fn();
+    render(<Message avatar="./img" role="user" name="User" isEditable onEditCancel={spy} />);
+    await userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+  it('should be able to add  editFormProps', () => {
+    const { container } = render(
+      <Message avatar="./img" role="user" name="User" isEditable editFormProps={{ className: 'test' }} />
+    );
+    const form = container.querySelector('form');
+    expect(form).toHaveClass('test');
+  });
 });

package/src/Message/Message.tsx

@@ -10,7 +10,9 @@ import {
   AlertProps,
   Avatar,
   AvatarProps,
+  ButtonProps,
   ContentVariants,
+  FormProps,
   Label,
   LabelGroupProps,
   Timestamp,
@@ -44,6 +46,7 @@ import rehypeSanitize from 'rehype-sanitize';
 import { PluggableList } from 'react-markdown/lib';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
+import MessageInput from './MessageInput';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -145,6 +148,22 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   openLinkInNewTab?: boolean;
   /** Optional inline error message that can be displayed in the message */
   error?: AlertProps;
+  /** Props for links */
+  linkProps?: ButtonProps;
+  /** Whether message is in edit mode */
+  isEditable?: boolean;
+  /** Placeholder for edit input */
+  editPlaceholder?: string;
+  /** Label for the English word "Update" used in edit mode. */
+  updateWord?: string;
+  /** Label for the English word "Cancel" used in edit mode. */
+  cancelWord?: string;
+  /** Callback function for when edit mode update button is clicked */
+  onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Callback functionf or when edit cancel update button is clicked */
+  onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Props for edit form */
+  editFormProps?: FormProps;
 }
 
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -173,9 +192,23 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   tableProps,
   openLinkInNewTab = true,
   additionalRehypePlugins = [],
+  linkProps,
   error,
+  isEditable,
+  editPlaceholder = 'Edit prompt message...',
+  updateWord = 'Update',
+  cancelWord = 'Cancel',
+  onEditUpdate,
+  onEditCancel,
+  editFormProps,
   ...props
 }: MessageProps) => {
+  const [messageText, setMessageText] = React.useState(content);
+
+  React.useEffect(() => {
+    setMessageText(content);
+  }, [content]);
+
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
   let rehypePlugins: PluggableList = [rehypeUnwrapImages];
   if (openLinkInNewTab) {
@@ -193,6 +226,82 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   // Keep timestamps consistent between Timestamp component and aria-label
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
+  const renderMessage = () => {
+    if (isLoading) {
+      return <MessageLoading loadingWord={loadingWord} />;
+    }
+    if (isEditable) {
+      return (
+        <>
+          {beforeMainContent && <>{beforeMainContent}</>}
+          <MessageInput
+            content={content}
+            editPlaceholder={editPlaceholder}
+            updateWord={updateWord}
+            cancelWord={cancelWord}
+            onEditUpdate={(event, text) => {
+              onEditUpdate && onEditUpdate(event);
+              setMessageText(text);
+            }}
+            onEditCancel={onEditCancel}
+            {...editFormProps}
+          />
+        </>
+      );
+    }
+    return (
+      <>
+        {beforeMainContent && <>{beforeMainContent}</>}
+        {error ? (
+          <ErrorMessage {...error} />
+        ) : (
+          <Markdown
+            components={{
+              p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+              code: ({ children, ...props }) => (
+                <CodeBlockMessage {...props} {...codeBlockProps}>
+                  {children}
+                </CodeBlockMessage>
+              ),
+              h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+              h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+              h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+              h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+              h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+              h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+              blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+              ul: (props) => <UnorderedListMessage {...props} />,
+              ol: (props) => <OrderedListMessage {...props} />,
+              li: (props) => <ListItemMessage {...props} />,
+              table: (props) => <TableMessage {...props} {...tableProps} />,
+              tbody: (props) => <TbodyMessage {...props} />,
+              thead: (props) => <TheadMessage {...props} />,
+              tr: (props) => <TrMessage {...props} />,
+              td: (props) => {
+                // Conflicts with Td type
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { width, ...rest } = props;
+                return <TdMessage {...rest} />;
+              },
+              th: (props) => <ThMessage {...props} />,
+              img: (props) => <ImageMessage {...props} />,
+              a: (props) => (
+                <LinkMessage href={props.href} rel={props.rel} target={props.target} {...linkProps}>
+                  {props.children}
+                </LinkMessage>
+              )
+            }}
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={rehypePlugins}
+          >
+            {messageText}
+          </Markdown>
+        )}
+      </>
+    );
+  };
+
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
@@ -225,59 +334,8 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
         </div>
         <div className="pf-chatbot__message-response">
           <div className="pf-chatbot__message-and-actions">
-            {isLoading ? (
-              <MessageLoading loadingWord={loadingWord} />
-            ) : (
-              <>
-                {beforeMainContent && <>{beforeMainContent}</>}
-                {error ? (
-                  <ErrorMessage {...error} />
-                ) : (
-                  <Markdown
-                    components={{
-                      p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
-                      code: ({ children, ...props }) => (
-                        <CodeBlockMessage {...props} {...codeBlockProps}>
-                          {children}
-                        </CodeBlockMessage>
-                      ),
-                      h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
-                      h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
-                      h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
-                      h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
-                      h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
-                      h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
-                      blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
-                      ul: (props) => <UnorderedListMessage {...props} />,
-                      ol: (props) => <OrderedListMessage {...props} />,
-                      li: (props) => <ListItemMessage {...props} />,
-                      table: (props) => <TableMessage {...props} {...tableProps} />,
-                      tbody: (props) => <TbodyMessage {...props} />,
-                      thead: (props) => <TheadMessage {...props} />,
-                      tr: (props) => <TrMessage {...props} />,
-                      td: (props) => {
-                        // Conflicts with Td type
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        const { width, ...rest } = props;
-                        return <TdMessage {...rest} />;
-                      },
-                      th: (props) => <ThMessage {...props} />,
-                      img: (props) => <ImageMessage {...props} />,
-                      a: (props) => (
-                        <LinkMessage href={props.href} rel={props.rel} target={props.target}>
-                          {props.children}
-                        </LinkMessage>
-                      )
-                    }}
-                    remarkPlugins={[remarkGfm]}
-                    rehypePlugins={rehypePlugins}
-                  >
-                    {content}
-                  </Markdown>
-                )}
-                {afterMainContent && <>{afterMainContent}</>}
-              </>
-            )}
+            {renderMessage()}
+            {afterMainContent && <>{afterMainContent}</>}
             {!isLoading && sources && <SourcesCard {...sources} />}
             {quickStarts && quickStarts.quickStart && (
               <QuickStartTile

package/src/Message/MessageInput.tsx

@@ -0,0 +1,59 @@
+// ============================================================================
+// Chatbot Main - Message Input
+// ============================================================================
+
+import React from 'react';
+import { ActionGroup, Button, Form, FormProps, TextArea } from '@patternfly/react-core';
+
+export interface MessageInputProps extends FormProps {
+  /** Placeholder for edit input */
+  editPlaceholder?: string;
+  /** Label for the English word "Update" used in edit mode. */
+  updateWord?: string;
+  /** Label for the English word "Cancel" used in edit mode. */
+  cancelWord?: string;
+  /** Callback function for when edit mode update button is clicked */
+  onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+  /** Callback functionf or when edit cancel update button is clicked */
+  onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Message text */
+  content?: string;
+}
+
+const MessageInput: React.FunctionComponent<MessageInputProps> = ({
+  editPlaceholder = 'Edit prompt message...',
+  updateWord = 'Update',
+  cancelWord = 'Cancel',
+  onEditUpdate,
+  onEditCancel,
+  content,
+  ...props
+}: MessageInputProps) => {
+  const [messageText, setMessageText] = React.useState(content ?? '');
+
+  const onChange = (event: React.FormEvent<HTMLTextAreaElement>, value: string) => {
+    setMessageText(value);
+  };
+
+  return (
+    <Form {...props}>
+      <TextArea
+        placeholder={editPlaceholder}
+        value={messageText}
+        onChange={onChange}
+        aria-label={editPlaceholder}
+        autoResize
+      />
+      <ActionGroup className="pf-chatbot__message-edit-buttons">
+        <Button variant="primary" onClick={(event) => onEditUpdate && onEditUpdate(event, messageText)}>
+          {updateWord}
+        </Button>
+        <Button variant="secondary" onClick={onEditCancel}>
+          {cancelWord}
+        </Button>
+      </ActionGroup>
+    </Form>
+  );
+};
+
+export default MessageInput;

package/src/MessageBar/MicrophoneButton.tsx

@@ -81,7 +81,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
 
       setSpeechRecognition(recognition);
     }
-  }, [onSpeechRecognition]);
+  }, [onSpeechRecognition, language, onIsListeningChange]);
 
   if (!speechRecognition) {
     return null;

package/src/MessageBox/MessageBox.tsx

@@ -46,7 +46,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
       setAtTop(scrollTop === 0);
       setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const checkOverflow = React.useCallback(() => {
     const element = messageBoxRef.current;
@@ -54,21 +54,21 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
       const { scrollHeight, clientHeight } = element;
       setIsOverflowing(scrollHeight >= clientHeight);
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const scrollToTop = React.useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: 0, behavior: 'smooth' });
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const scrollToBottom = React.useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
     }
-  }, []);
+  }, [messageBoxRef]);
 
   // Detect scroll position
   React.useEffect(() => {
@@ -85,7 +85,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
         element.removeEventListener('scroll', handleScroll);
       };
     }
-  }, [checkOverflow, handleScroll]);
+  }, [checkOverflow, handleScroll, messageBoxRef]);
 
   return (
     <>

package/src/SourcesCard/SourcesCard.scss

@@ -16,7 +16,7 @@
   box-shadow: var(--pf-t--global--box-shadow--sm);
 }
 
-.pf-chatbot__sources-card-body {
+.pf-chatbot__sources-card-body-text {
   display: block;
   display: -webkit-box;
   height: 2.8125rem;
@@ -25,11 +25,6 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-bottom: var(--pf-t--global--spacer--md);
-}
-
-.pf-chatbot__sources-card-no-footer {
-  margin-bottom: var(--pf-t--global--spacer--lg);
 }
 
 .pf-chatbot__sources-card-footer-container {
@@ -38,13 +33,14 @@
     var(--pf-t--global--spacer--sm) !important;
   .pf-chatbot__sources-card-footer {
     display: flex;
-    justify-content: space-between;
     align-items: center;
 
     &-buttons {
       display: flex;
       gap: var(--pf-t--global--spacer--xs);
       align-items: center;
+      justify-content: space-between;
+      flex: 1;
 
       .pf-v6-c-button {
         border-radius: var(--pf-t--global--border--radius--pill);

package/src/SourcesCard/SourcesCard.test.tsx

@@ -5,18 +5,13 @@ import '@testing-library/jest-dom';
 import SourcesCard from './SourcesCard';
 
 describe('SourcesCard', () => {
-  it('should render card', () => {
-    const { container } = render(<SourcesCard sources={[{ link: '' }]} />);
-    expect(container).toMatchSnapshot();
-  });
-
   it('should render card correctly if one source with only a link is passed in', () => {
     render(<SourcesCard sources={[{ link: '' }]} />);
     expect(screen.getByText('1 source')).toBeTruthy();
     expect(screen.getByText('Source 1')).toBeTruthy();
     // no buttons or navigation when there is only 1 source
     expect(screen.queryByRole('button')).toBeFalsy();
-    expect(screen.queryByText('1 of 1')).toBeFalsy();
+    expect(screen.queryByText('1/1')).toBeFalsy();
   });
 
   it('should render card correctly if one source with a title is passed in', () => {
@@ -53,7 +48,7 @@ describe('SourcesCard', () => {
     );
     expect(screen.getByText('2 sources')).toBeTruthy();
     expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-    expect(screen.getByText('1 of 2')).toBeTruthy();
+    expect(screen.getByText('1/2')).toBeTruthy();
     screen.getByRole('button', { name: /Go to previous page/i });
     screen.getByRole('button', { name: /Go to next page/i });
   });
@@ -68,12 +63,12 @@ describe('SourcesCard', () => {
       />
     );
     expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-    expect(screen.getByText('1 of 2')).toBeTruthy();
+    expect(screen.getByText('1/2')).toBeTruthy();
     expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
     await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
     expect(screen.queryByText('How to make an apple pie')).toBeFalsy();
     expect(screen.getByText('How to make cookies')).toBeTruthy();
-    expect(screen.getByText('2 of 2')).toBeTruthy();
+    expect(screen.getByText('2/2')).toBeTruthy();
     expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
     expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
   });
@@ -106,19 +101,6 @@ describe('SourcesCard', () => {
     expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
   });
 
-  it('should change ofWord appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        ofWord={'de'}
-      />
-    );
-    expect(screen.getByText('1 de 2')).toBeTruthy();
-  });
-
   it('should render navigation aria label appropriately', () => {
     render(
       <SourcesCard
@@ -235,4 +217,30 @@ describe('SourcesCard', () => {
     await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
     expect(spy).toHaveBeenCalledTimes(2);
   });
+
+  it('should handle showMore appropriately', async () => {
+    render(
+      <SourcesCard
+        sources={[
+          {
+            title: 'Getting started with Red Hat OpenShift',
+            link: '#',
+            body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+            hasShowMore: true
+          },
+          {
+            title: 'Azure Red Hat OpenShift documentation',
+            link: '#',
+            body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
+          },
+          {
+            title: 'OKD Documentation: Home',
+            link: '#',
+            body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
+          }
+        ]}
+      />
+    );
+    expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
+  });
 });