@patternfly/chatbot 2.2.0-prerelease.44 → 2.2.0-prerelease.46

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -6,6 +6,7 @@ import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core'
 
 export const UserMessageExample: React.FunctionComponent = () => {
   const [variant, setVariant] = React.useState('code');
+  const [isEditable, setIsEditable] = React.useState(true);
 
   /* eslint-disable indent */
   const renderContent = () => {
@@ -33,7 +34,7 @@ export const UserMessageExample: React.FunctionComponent = () => {
       case 'image':
         return image;
       default:
-        return;
+        return '';
     }
   };
   /* eslint-enable indent */
@@ -175,88 +176,131 @@ _Italic text, formatted with single underscores_
         <FormGroup role="radiogroup" isInline fieldId="user-message-type" label="Message content type">
           <Radio
             isChecked={variant === 'code'}
-            onChange={() => setVariant('code')}
+            onChange={() => {
+              setVariant('code');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Code"
             id="user-code"
           />
           <Radio
             isChecked={variant === 'inlineCode'}
-            onChange={() => setVariant('inlineCode')}
+            onChange={() => {
+              setVariant('inlineCode');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Inline code"
             id="user-inline-code"
           />
           <Radio
             isChecked={variant === 'heading'}
-            onChange={() => setVariant('heading')}
+            onChange={() => {
+              setVariant('heading');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Heading"
             id="user-heading"
           />
           <Radio
             isChecked={variant === 'blockQuotes'}
-            onChange={() => setVariant('blockQuotes')}
+            onChange={() => {
+              setVariant('blockQuotes');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Block quote"
             id="user-block-quotes"
           />
           <Radio
             isChecked={variant === 'emphasis'}
-            onChange={() => setVariant('emphasis')}
+            onChange={() => {
+              setVariant('emphasis');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Emphasis"
             id="user-emphasis"
           />
           <Radio
             isChecked={variant === 'link'}
-            onChange={() => setVariant('link')}
+            onChange={() => {
+              setVariant('link');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Link"
             id="user-link"
           />
           <Radio
             isChecked={variant === 'unorderedList'}
-            onChange={() => setVariant('unorderedList')}
+            onChange={() => {
+              setVariant('unorderedList');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Unordered list"
             id="user-unordered-list"
           />
           <Radio
             isChecked={variant === 'orderedList'}
-            onChange={() => setVariant('orderedList')}
+            onChange={() => {
+              setVariant('orderedList');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Ordered list"
             id="user-ordered-list"
           />
           <Radio
             isChecked={variant === 'moreComplexList'}
-            onChange={() => setVariant('moreComplexList')}
+            onChange={() => {
+              setVariant('moreComplexList');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="More complex list"
             id="user-more-complex-list"
           />
           <Radio
             isChecked={variant === 'table'}
-            onChange={() => setVariant('table')}
+            onChange={() => {
+              setVariant('table');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Table"
             id="user-table"
           />
           <Radio
             isChecked={variant === 'image'}
-            onChange={() => setVariant('image')}
+            onChange={() => {
+              setVariant('image');
+              setIsEditable(true);
+            }}
             name="user-message-type"
             label="Image"
             id="user-image"
           />
           <Radio
             isChecked={variant === 'error'}
-            onChange={() => setVariant('error')}
-            name="user-message-error"
+            onChange={() => {
+              setVariant('error');
+              setIsEditable(true);
+            }}
+            name="user-message-type"
             label="Error"
             id="user-error"
           />
+          <Radio
+            isChecked={variant === 'editable'}
+            onChange={() => setVariant('editable')}
+            name="user-message-type"
+            label="Editable"
+            id="user-edit"
+          />
         </FormGroup>
       </Form>
       <Message
@@ -267,7 +311,10 @@ _Italic text, formatted with single underscores_
         tableProps={
           variant === 'table' ? { 'aria-label': 'App information and user roles for user messages' } : undefined
         }
+        isEditable={variant === 'editable' ? isEditable : false}
         error={variant === 'error' ? error : undefined}
+        onEditUpdate={() => setIsEditable(false)}
+        onEditCancel={() => setIsEditable(false)}
       />
     </>
   );

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

@@ -815,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

@@ -12,6 +12,7 @@ import {
   AvatarProps,
   ButtonProps,
   ContentVariants,
+  FormProps,
   Label,
   LabelGroupProps,
   Timestamp,
@@ -45,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 */
@@ -148,6 +150,20 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   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> = ({
@@ -178,8 +194,21 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   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) {
@@ -197,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}`}
@@ -229,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} {...linkProps}>
-                          {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/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

@@ -11,7 +11,7 @@ describe('SourcesCard', () => {
     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', () => {
@@ -48,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 });
   });
@@ -63,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();
   });
@@ -101,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
@@ -230,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');
+  });
 });