@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent, Ref } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
@@ -10,16 +10,19 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
+import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 
-export const BotMessageExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<string>('Code');
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Message content type');
+export const BotMessageExample: FunctionComponent = () => {
+  const [variant, setVariant] = useState<string>('Code');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Message content type');
+  const [isExpandable, setIsExpanded] = useState(false);
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
       case 'Code':
+      case 'Expandable code':
         return code;
       case 'Heading':
         return heading;
@@ -63,8 +66,6 @@ spec:
 Here is some JavaScript code:
 
 ~~~js
-import React from 'react';
-
 const MessageLoading = () => (
   <div className="pf-chatbot__message-loading">
     <span className="pf-chatbot__message-loading-dots">
@@ -153,28 +154,33 @@ _Italic text, formatted with single underscores_
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
     actionLinks: (
-      <React.Fragment>
+      <Fragment>
         <AlertActionLink component="a" href="#">
           Start a new chat
         </AlertActionLink>
         <AlertActionLink component="a" href="#">
           Contact support
         </AlertActionLink>
-      </React.Fragment>
+      </Fragment>
     )
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
+    if (value === 'Expandable code') {
+      setIsExpanded(true);
+    } else {
+      setIsExpanded(false);
+    }
   };
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       className="pf-v6-u-mb-md"
       ref={toggleRef}
@@ -183,7 +189,7 @@ _Italic text, formatted with single underscores_
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}
@@ -220,14 +226,6 @@ _Italic text, formatted with single underscores_
         content="This bot has a square avatar. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`."
         hasRoundAvatar={false}
       />
-      <Message
-        name="Bot"
-        role="bot"
-        avatar={patternflyAvatar}
-        content={`Text-based message from a bot named "Bot," with updated timestamp`}
-        timestamp="1 hour ago"
-      />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
       <Select
         id="single-select"
         isOpen={isOpen}
@@ -239,6 +237,7 @@ _Italic text, formatted with single underscores_
       >
         <SelectList>
           <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Expandable code">Expandable code</SelectOption>
           <SelectOption value="Inline code">Inline code</SelectOption>
           <SelectOption value="Heading">Heading</SelectOption>
           <SelectOption value="Block quotes">Block quotes</SelectOption>
@@ -261,6 +260,11 @@ _Italic text, formatted with single underscores_
           variant === 'Table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
         }
         error={variant === 'Error' ? error : undefined}
+        codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
+        // In this example, custom plugin will override any custom expandedText or collapsedText attributes provided
+        // The purpose of this plugin is to provide unique link names for the code blocks
+        // Because they are in the same message, this requires a custom plugin to parse the syntax tree
+        additionalRehypePlugins={[rehypeCodeBlockToggle]}
       />
     </>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';
 
-export const FileDetailsExample: React.FunctionComponent = () => <FileDetails fileName="test.yml" />;
+export const FileDetailsExample: FunctionComponent = () => <FileDetails fileName="test.yml" />;

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

@@ -1,14 +1,14 @@
-import React from 'react';
+import { useState, FunctionComponent, MouseEvent, Ref, CSSProperties } from 'react';
 import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
 import { Stack, MenuToggle, MenuToggleElement, Select, SelectList, SelectOption } from '@patternfly/react-core';
 
-export const FileDetailsLabelExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<string>('plain');
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('Variant');
+export const FileDetailsLabelExample: FunctionComponent = () => {
+  const [variant, setVariant] = useState<string>('plain');
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string>('Variant');
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-    setVariant(value);
+  const onSelect = (_event: MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value as string);
     setSelected(value as string);
     setIsOpen(false);
   };
@@ -17,7 +17,7 @@ export const FileDetailsLabelExample: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       onClick={onToggleClick}
@@ -25,7 +25,7 @@ export const FileDetailsLabelExample: React.FunctionComponent = () => {
       style={
         {
           width: '200px'
-        } as React.CSSProperties
+        } as CSSProperties
       }
     >
       {selected}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
 import { DropEvent } from '@patternfly/react-core';
 
@@ -9,9 +9,9 @@ interface readFile {
   loadError?: DOMException;
 }
 
-export const DropzoneExample: React.FunctionComponent = () => {
-  const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
-  const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
+export const DropzoneExample: FunctionComponent = () => {
+  const [currentFiles, setCurrentFiles] = useState<File[]>([]);
+  const [readFileData, setReadFileData] = useState<readFile[]>([]);
 
   // remove files from both state arrays based on their name
   const removeFiles = (namesOfFilesToRemove: string[]) => {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, FunctionComponent, MouseEvent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
@@ -10,18 +10,18 @@ interface ModalData {
   fileName: string;
 }
 
-export const AttachmentMenuExample: React.FunctionComponent = () => {
-  const [isPreviewModalOpen, setIsPreviewModalOpen] = React.useState<boolean>(false);
-  const [isEditModalOpen, setIsEditModalOpen] = React.useState<boolean>(false);
-  const [currentModalData, setCurrentModalData] = React.useState<ModalData>();
+export const AttachmentMenuExample: FunctionComponent = () => {
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState<boolean>(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
+  const [currentModalData, setCurrentModalData] = useState<ModalData>();
 
-  const onClick = (event: React.MouseEvent, name: string) => {
+  const onClick = (event: MouseEvent, name: string) => {
     setCurrentModalData({ fileName: name, code: 'test' });
     setIsEditModalOpen(false);
     setIsPreviewModalOpen(true);
   };
 
-  const onClose = (event: React.MouseEvent, name: string, id: number | string | undefined) => {
+  const onClose = (event: MouseEvent, name: string, id: number | string | undefined) => {
     // eslint-disable-next-line no-console
     console.log(`Closed attachment with name: ${name} and id: ${id}`);
   };

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

@@ -0,0 +1,25 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const ResponseActionClickedExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="I updated your account with those settings. You're ready to set up your first dashboard!"
+    actions={{
+      // eslint-disable-next-line no-console
+      positive: { onClick: () => console.log('Good response'), isClicked: true },
+      // eslint-disable-next-line no-console
+      negative: { onClick: () => console.log('Bad response') },
+      // eslint-disable-next-line no-console
+      copy: { onClick: () => console.log('Copy') },
+      // eslint-disable-next-line no-console
+      download: { onClick: () => console.log('Download') },
+      // eslint-disable-next-line no-console
+      listen: { onClick: () => console.log('Listen') }
+    }}
+  />
+);

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

@@ -1,12 +1,11 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 
-export const CustomActionExample: React.FunctionComponent = () => (
+export const CustomActionExample: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"
@@ -16,21 +15,13 @@ export const CustomActionExample: React.FunctionComponent = () => (
       regenerate: {
         ariaLabel: 'Regenerate',
         clickedAriaLabel: 'Regenerated',
+        isClicked: true,
         // eslint-disable-next-line no-console
         onClick: () => console.log('Clicked regenerate'),
         tooltipContent: 'Regenerate',
         clickedTooltipContent: 'Regenerated',
         icon: <RedoIcon />
       },
-      download: {
-        ariaLabel: 'Download',
-        clickedAriaLabel: 'Downloaded',
-        // eslint-disable-next-line no-console
-        onClick: () => console.log('Clicked download'),
-        tooltipContent: 'Download',
-        clickedTooltipContent: 'Downloaded',
-        icon: <DownloadIcon />
-      },
       info: {
         ariaLabel: 'Info',
         // eslint-disable-next-line no-console

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

@@ -0,0 +1,24 @@
+import { FunctionComponent } from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
+
+export const MessageWithDividersExample: FunctionComponent = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content={`This is a text-based message from a bot named "Bot."`}
+    />
+    <MessageDivider variant="inset" content="1 hour ago" />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content={`This is a text-based message from "Bot," with an updated timestamp.`}
+      timestamp="1 hour ago"
+    />
+    <MessageDivider variant="fullWidth" content="Agent joined the chat" />
+  </>
+);

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import { useState, FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import { Checkbox, FormGroup, Stack } from '@patternfly/react-core';
 
-export const MessageWithFeedbackExample: React.FunctionComponent = () => {
-  const [hasCloseButton, setHasCloseButton] = React.useState(false);
-  const [hasTextArea, setHasTextArea] = React.useState(false);
+export const MessageWithFeedbackExample: FunctionComponent = () => {
+  const [hasCloseButton, setHasCloseButton] = useState(false);
+  const [hasTextArea, setHasTextArea] = useState(false);
 
   return (
     <>

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import { FunctionComponent, useState } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import { Button } from '@patternfly/react-core';
 
-export const MessageWithFeedbackTimeoutExample: React.FunctionComponent = () => {
-  const [hasFeedback, setHasFeedback] = React.useState(false);
+export const MessageWithFeedbackTimeoutExample: FunctionComponent = () => {
+  const [hasFeedback, setHasFeedback] = useState(false);
 
   return (
     <>

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
-export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
+export const MessageWithQuickResponsesExample: FunctionComponent = () => (
   <>
     <Message
       name="Bot"

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
 import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
 import { QuickStart } from '@patternfly/chatbot/dist/esm/Message/QuickStarts/types';
 
-export const MessageWithQuickStartExample: React.FunctionComponent = () => (
+export const MessageWithQuickStartExample: FunctionComponent = () => (
   <>
     <Message
       name="Bot"

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
-export const ResponseActionExample: React.FunctionComponent = () => (
+export const ResponseActionExample: FunctionComponent = () => (
   <Message
     name="Bot"
     role="bot"
@@ -17,7 +17,7 @@ export const ResponseActionExample: React.FunctionComponent = () => (
       // eslint-disable-next-line no-console
       copy: { onClick: () => console.log('Copy') },
       // eslint-disable-next-line no-console
-      share: { onClick: () => console.log('Share') },
+      download: { onClick: () => console.log('Download') },
       // eslint-disable-next-line no-console
       listen: { onClick: () => console.log('Listen') }
     }}

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
-export const MessageWithSourcesExample: React.FunctionComponent = () => {
-  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+export const MessageWithSourcesExample: FunctionComponent = () => {
+  const onSetPage = (_event: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
     // eslint-disable-next-line no-console
     console.log(`Page changed to ${newPage}`);
   };

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -31,6 +31,8 @@ sortValue: 3
 ---
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
+import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
 import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
@@ -47,6 +49,7 @@ import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
 import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
 import userAvatar from './user_avatar.svg';
 import squareImg from './PF-social-color-square.svg';
+import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, Ref, isValidElement, cloneElement, Children, ReactNode, useRef, useEffect } from 'react';
 
 The `content` prop of the `<Message>` component is passed to a `<Markdown>` component (from [react-markdown](https://remarkjs.github.io/react-markdown/)), which is configured to translate plain text strings into PatternFly [`<Content>` components](/components/content) and code blocks into PatternFly [`<CodeBlock>` components.](/components/code-block)
 
@@ -64,12 +67,23 @@ You can further customize the avatar by applying an additional class or passing
 
 ```
 
+### Message dividers
+
+To provide users with important contextual updates, you can add dividers between messages.
+
+For example, you can use the default divider to display a "timestamp" for more significant gaps in the conversation, or you can pass `variant="fullWidth"` to a divider to announce that an agent has joined the chat.
+
+```js file="./MessageWithDividers.tsx"
+
+```
+
 ### Message actions
 
 You can add actions to a message, to allow users to interact with the message content. These actions can include:
 
 - Feedback responses that allow users to rate a message as "good" or "bad".
 - Copy and share controls that allow users to share the message content with others.
+- An edit action to allow users to edit a message they previously sent. This should only be applied to user messages - see the [user messages example](#user-messages) for details on how to implement this action.
 - A listen action, that will read the message content out loud.
 
 **Note:** The logic for the actions is not built into the component and must be implemented by the consuming application.
@@ -78,6 +92,22 @@ You can add actions to a message, to allow users to interact with the message co
 
 ```
 
+### Message actions clicked state
+
+You can apply a clicked state to message actions, to convey that the action has previously been selected.
+
+To define which message response action should show a clicked state when the `<ResponseActions>` component first renders, use the `isClicked` boolean property within each action's configuration object.
+
+To make an action button appear active by default, set `isClicked: true`. Only 1 action can be visually active at any given time.
+
+If you unintentionally set `isClicked: true` for multiple buttons, the component will apply a predefined internal precedence order to resolve the conflict. The button encountered first in this order will be displayed as clicked, while other buttons will sustain their default appearance. The default precedence of button actions is: "positive", "negative", "copy", "share", "listen", followed by any other custom actions (in object key order).
+
+Once the component has rendered, user interactions will take precedence over the initial `isClicked` prop. Clicking a button will activate it and deactivate any other active button. The `isDisabled` prop for each action button specifies if a button is interactive or not.
+
+```js file="./MessageWithClickedResponseActions.tsx"
+
+```
+
 ### Custom message actions
 
 Beyond the standard message actions (good response, bad response, copy, share, or listen), you can add custom actions to a bot message by passing an `actions` object to the `<Message>` component. This object can contain the following customizations:
@@ -85,6 +115,7 @@ Beyond the standard message actions (good response, bad response, copy, share, o
 - `ariaLabel`
 - `onClick`
 - `className`
+- `isClicked`
 - `isDisabled`
 - `tooltipContent`
 - `tooltipContent`
@@ -164,6 +195,8 @@ The quick start tile displayed below the message is based on the tile included i
 
 Messages from users have a different background color to differentiate them from bot messages. You can also display a custom avatar that is uploaded by the user. You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`.
 
+User messages can also be made editable by passing an "edit" object to the `actions` property. When editing is enabled focus should be placed on the text area. When editing is completed or canceled the focus should be moved back to the edit button.
+
 ```js file="./UserMessage.tsx"
 
 ```

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

@@ -1,12 +1,12 @@
-import React from 'react';
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import { Button, Checkbox } from '@patternfly/react-core';
 import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 
-export const PreviewAttachmentExample: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [isCompact, setIsCompact] = React.useState(false);
+export const PreviewAttachmentExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
 
-  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     setIsModalOpen(!isModalOpen);
   };