@patternfly/chatbot 2.2.0-prerelease.23 → 2.2.0-prerelease.25

package/src/Message/Message.tsx

@@ -2,7 +2,7 @@
 // Chatbot Main - Message
 // ============================================================================
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -36,6 +36,8 @@ import TbodyMessage from './TableMessage/TbodyMessage';
 import TheadMessage from './TableMessage/TheadMessage';
 import ThMessage from './TableMessage/ThMessage';
 import { TableProps } from '@patternfly/react-table';
+import ImageMessage from './ImageMessage/ImageMessage';
+import rehypeUnwrapImages from 'rehype-unwrap-images';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -56,6 +58,17 @@ export interface MessageAttachment {
   spinnerTestId?: string;
 }
 
+export interface MessageExtraContent {
+  /** Content to display before the main content */
+  beforeMainContent?: ReactNode;
+
+  /** Content to display after the main content */
+  afterMainContent?: ReactNode;
+
+  /** Content to display at the end */
+  endContent?: ReactNode;
+}
+
 export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
   /** Unique id for message */
   id?: string;
@@ -63,6 +76,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   role: 'user' | 'bot';
   /** Message content */
   content?: string;
+  /** Extra Message content */
+  extraContent?: MessageExtraContent;
   /** Name of the user */
   name?: string;
   /** Avatar src for the user */
@@ -123,6 +138,7 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
   role,
   content,
+  extraContent,
   name,
   avatar,
   timestamp,
@@ -145,6 +161,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   tableProps,
   ...props
 }: MessageProps) => {
+  const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
   let avatarClassName;
   if (avatarProps && 'className' in avatarProps) {
     const { className, ...rest } = avatarProps;
@@ -189,40 +206,46 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
             {isLoading ? (
               <MessageLoading loadingWord={loadingWord} />
             ) : (
-              <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} />
-                }}
-                remarkPlugins={[remarkGfm]}
-              >
-                {content}
-              </Markdown>
+              <>
+                {beforeMainContent && <>{beforeMainContent}</>}
+                <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} />
+                  }}
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeUnwrapImages]}
+                >
+                  {content}
+                </Markdown>
+                {afterMainContent && <>{afterMainContent}</>}
+              </>
             )}
             {!isLoading && sources && <SourcesCard {...sources} />}
             {quickStarts && quickStarts.quickStart && (
@@ -264,6 +287,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
               ))}
             </div>
           )}
+          {!isLoading && endContent && <>{endContent}</>}
         </div>
       </div>
     </section>

package/src/MessageBar/MessageBar.test.tsx

@@ -315,4 +315,12 @@ describe('Message bar', () => {
     );
     await userEvent.click(screen.getByRole('button', { name: 'Test' }));
   });
+  it('can be controlled', () => {
+    render(<MessageBar onSendMessage={jest.fn} value="test" />);
+    expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+    expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
+  });
 });

package/src/MessageBar/MessageBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps, DropEvent, TextArea } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextArea, TextAreaProps } from '@patternfly/react-core';
 
 // Import Chatbot components
 import SendButton from './SendButton';
@@ -30,9 +30,9 @@ export interface MessageBarWithAttachMenuProps {
   onAttachMenuOpenChange?: (isOpen: boolean) => void;
 }
 
-export interface MessageBarProps {
+export interface MessageBarProps extends TextAreaProps {
   /** Callback to get the value of input message by user */
-  onSendMessage: (message: string) => void;
+  onSendMessage: (message: string | number) => void;
   /** Class Name for the MessageBar component */
   className?: string;
   /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
@@ -63,7 +63,7 @@ export interface MessageBarProps {
     };
   };
   /** A callback for when the text area value changes. */
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
   /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
   displayMode?: ChatbotDisplayMode;
 }
@@ -82,11 +82,12 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   buttonProps,
   onChange,
   displayMode,
+  value,
   ...props
 }: MessageBarProps) => {
   // Text Input
   // --------------------------------------------------------------------------
-  const [message, setMessage] = React.useState<string>('');
+  const [message, setMessage] = React.useState<string | number>(value ?? '');
   const [isListeningMessage, setIsListeningMessage] = React.useState<boolean>(false);
   const [hasSentMessage, setHasSentMessage] = React.useState(false);
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);

package/src/__mocks__/rehype-unwrap-images.tsx

@@ -0,0 +1,3 @@
+const RehypeUnwrapImages = () => null;
+
+export default RehypeUnwrapImages;

package/src/main.scss

@@ -16,6 +16,7 @@
 @import './FileDropZone/FileDropZone';
 @import './Message/Message';
 @import './Message/CodeBlockMessage/CodeBlockMessage';
+@import './Message/ImageMessage/ImageMessage';
 @import './Message/TextMessage/TextMessage';
 @import './Message/ListMessage/ListMessage';
 @import './Message/TableMessage/TableMessage';