@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

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

@@ -2,9 +2,43 @@ import React from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import squareImg from './PF-social-color-square.svg';
+import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core';
 
 export const BotMessageExample: React.FunctionComponent = () => {
-  const markdown = `
+  const [variant, setVariant] = React.useState('code');
+
+  /* eslint-disable indent */
+  const renderContent = () => {
+    switch (variant) {
+      case 'code':
+        return code;
+      case 'heading':
+        return heading;
+      case 'emphasis':
+        return emphasis;
+      case 'blockQuotes':
+        return blockQuotes;
+      case 'orderedList':
+        return orderedList;
+      case 'unorderedList':
+        return unorderedList;
+      case 'moreComplexList':
+        return moreComplexList;
+      case 'inlineCode':
+        return inlineCode;
+      case 'link':
+        return link;
+      case 'table':
+        return table;
+      case 'image':
+        return image;
+      default:
+        return;
+    }
+  };
+  /* eslint-enable indent */
+
+  const code = `
 Here is some YAML code:
 
 ~~~yaml
@@ -35,6 +69,36 @@ export default MessageLoading;
 ~~~
 `;
 
+  const heading = `
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+`;
+
+  const emphasis = `
+**Bold text, formatted with double asterisks**
+
+__Bold text, formatted with double underscores__
+
+*Italic text, formatted with single asterisks*
+
+_Italic text, formatted with single underscores_
+
+~~Strikethrough~~
+`;
+
+  const blockQuotes = `> Blockquotes can also be nested...
+>> ...by using additional greater-than signs (>) right next to each other...
+> > > ...or with spaces between each sign.`;
+
   const orderedList = `
   Here is an ordered list:
 
@@ -53,43 +117,181 @@ export default MessageLoading;
 
 1. **Using a \`toaster\`:**
 
-   - Place \`bread\` in a \`toaster\`
-   - Once \`bread\` is lightly browned, remove from \`toaster\`
+   - Place \`bread\` in a \`toaster\`.
+   - Once \`bread\` is lightly browned, remove from \`toaster\`.
 
 2. **Using a \`knife\`:**
 
      Acquire 1 tablespoon of room temperature \`butter\`. Use \`knife\` to spread butter on \`toast\`. Bon appétit!
  `;
 
+  const link = `A paragraph with a URL: https://reactjs.org.`;
+
+  const inlineCode = `Here is an inline code - \`() => void\``;
+
+  const table = `To customize your table, you can use [PatternFly TableProps](/components/table#table)
+
+ | Version | GA date | User role 
+ |-|-|-|
+ | 2.5 | September 30, 2024 | Administrator |
+ | 2.5 | June 27, 2023 | Editor |
+ | 3.0 | April 1, 2025 | Administrator
+ `;
+
+  const image = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+
+  const error = {
+    title: 'Could not load chat',
+    children: 'Wait a few minutes and check your network settings. If the issue persists: ',
+    actionLinks: (
+      <React.Fragment>
+        <AlertActionLink component="a" href="#">
+          Start a new chat
+        </AlertActionLink>
+        <AlertActionLink component="a" href="#">
+          Contact support
+        </AlertActionLink>
+      </React.Fragment>
+    )
+  };
+
   return (
     <>
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={`Text-based message from a bot named "Bot"`} />
       <Message
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content={`Text-based message from a bot named "Bot," with updated timestamp`}
+        content={`This is a text-based message from a bot named "Bot."`}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content={`This is a text-based message from "Bot," with an updated timestamp.`}
         timestamp="1 hour ago"
       />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={markdown} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={orderedList} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={unorderedList} />
-      <Message name="Bot" role="bot" avatar={patternflyAvatar} content={moreComplexList} />
       <Message name="Bot" role="bot" avatar={patternflyAvatar} content="Example content" isLoading />
-      <Message role="bot" avatar={patternflyAvatar} content="Text-based message from a nameless bot" />
+      <Message role="bot" avatar={patternflyAvatar} content="This message is from a nameless bot." />
       <Message
         name="Default Openshift Container Platform Assistant That Can Help With Any Query You Might Need Help With"
         role="bot"
         avatar={patternflyAvatar}
-        content="Text-based message, where the bot's name is truncated"
+        content="This is a message from a bot with really long name: it's truncated!"
       />
       <Message
         name="Bot"
         role="bot"
         avatar={squareImg}
-        content="Text-based message from a bot with 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`."
+        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 />
+
+      <Form>
+        <FormGroup role="radiogroup" isInline fieldId="bot-message-type" label="Message content type">
+          <Radio
+            isChecked={variant === 'code'}
+            onChange={() => setVariant('code')}
+            name="bot-message-type"
+            label="Code"
+            id="code"
+          />
+          <Radio
+            isChecked={variant === 'inlineCode'}
+            onChange={() => setVariant('inlineCode')}
+            name="bot-message-type"
+            label="Inline code"
+            id="inline-code"
+          />
+          <Radio
+            isChecked={variant === 'heading'}
+            onChange={() => setVariant('heading')}
+            name="bot-message-type"
+            label="Heading"
+            id="heading"
+          />
+          <Radio
+            isChecked={variant === 'blockQuotes'}
+            onChange={() => setVariant('blockQuotes')}
+            name="bot-message-type"
+            label="Block quote"
+            id="block-quotes"
+          />
+          <Radio
+            isChecked={variant === 'emphasis'}
+            onChange={() => setVariant('emphasis')}
+            name="bot-message-type"
+            label="Emphasis"
+            id="emphasis"
+          />
+          <Radio
+            isChecked={variant === 'link'}
+            onChange={() => setVariant('link')}
+            name="bot-message-type"
+            label="Link"
+            id="link"
+          />
+          <Radio
+            isChecked={variant === 'unorderedList'}
+            onChange={() => setVariant('unorderedList')}
+            name="bot-message-type"
+            label="Unordered list"
+            id="unordered-list"
+          />
+          <Radio
+            isChecked={variant === 'orderedList'}
+            onChange={() => setVariant('orderedList')}
+            name="bot-message-type"
+            label="Ordered list"
+            id="ordered-list"
+          />
+          <Radio
+            isChecked={variant === 'moreComplexList'}
+            onChange={() => setVariant('moreComplexList')}
+            name="bot-message-type"
+            label="More complex list"
+            id="more-complex-list"
+          />
+          <Radio
+            isChecked={variant === 'table'}
+            onChange={() => setVariant('table')}
+            name="bot-message-type"
+            label="Table"
+            id="table"
+          />
+          <Radio
+            isChecked={variant === 'image'}
+            onChange={() => setVariant('image')}
+            name="bot-message-type"
+            label="Image"
+            id="image"
+          />
+          <Radio
+            isChecked={variant === 'error'}
+            onChange={() => setVariant('error')}
+            name="bot-message-error"
+            label="Error"
+            id="error"
+          />
+        </FormGroup>
+      </Form>
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content={renderContent()}
+        tableProps={
+          variant === 'table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
+        }
+        error={variant === 'error' ? error : undefined}
+      />
     </>
   );
 };

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

@@ -53,7 +53,8 @@ export const DropzoneExample: React.FunctionComponent = () => {
   return (
     <FileDropZone onFileDrop={handleFileDrop} displayMode="fullscreen">
       <div className="pf-chatbot__file-drop-zone-example">
-        Content that shows when no dragging is happening (drag an item here to see the drop zone)
+        This is example content that would be shown when no dragging is happening. To see the drop zone, start to drag
+        an item into this section. The static content will be replaced by an active drop zone message.
       </div>
     </FileDropZone>
   );

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

@@ -32,14 +32,14 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
         name="User"
         role="user"
         avatar={userAvatar}
-        content="Here is an uploaded file"
+        content="Here is an uploaded file:"
         attachments={[{ name: 'auth-operator.yml', id: '1', onClick, onClose }]}
       />
       <Message
         name="User"
         role="user"
         avatar={userAvatar}
-        content="Here are two uploaded files"
+        content="Here are 2 uploaded files:"
         attachments={[
           { name: 'auth-operator.yml', id: '1' },
           { name: 'patternfly.svg', id: '2' }

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

@@ -11,7 +11,7 @@ export const CustomActionExample: React.FunctionComponent = () => (
     name="Bot"
     role="bot"
     avatar={patternflyAvatar}
-    content="Example with custom actions"
+    content="I updated your account with those settings. You're ready to set up your first dashboard!"
     actions={{
       regenerate: {
         ariaLabel: 'Regenerate',

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

@@ -0,0 +1,71 @@
+import React 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);
+
+  return (
+    <>
+      <Stack hasGutter>
+        <FormGroup role="radiogroup" isInline fieldId="feedback-card" label="Variant">
+          <Checkbox
+            isChecked={hasTextArea}
+            onChange={() => {
+              setHasTextArea(!hasTextArea);
+            }}
+            name="basic-inline-radio"
+            label="Has text area"
+            id="has-text-area"
+          />
+        </FormGroup>
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This is a message with the feedback card:"
+          userFeedbackForm={{
+            quickResponses: [
+              { id: '1', content: 'Helpful information' },
+              { id: '2', content: 'Easy to understand' },
+              { id: '3', content: 'Resolved my issue' }
+            ],
+            onSubmit: (quickResponse, additionalFeedback) =>
+              alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
+            hasTextArea,
+            // eslint-disable-next-line no-console
+            onClose: () => console.log('closed feedback form'),
+            focusOnLoad: false
+          }}
+        />
+      </Stack>
+      <Stack hasGutter>
+        <FormGroup role="radiogroup" isInline fieldId="feedback-thank-you" label="Variant">
+          <Checkbox
+            isChecked={hasCloseButton}
+            onChange={() => {
+              setHasCloseButton(!hasCloseButton);
+            }}
+            name="basic-inline-radio"
+            label="Has close button"
+            id="has-close"
+          />
+        </FormGroup>
+        <Message
+          name="Bot"
+          role="bot"
+          avatar={patternflyAvatar}
+          content="This is a thank-you message, which is displayed once the feedback card is submitted:"
+          // eslint-disable-next-line no-console
+          userFeedbackComplete={{
+            // eslint-disable-next-line no-console
+            onClose: hasCloseButton ? () => console.log('closed completion message') : undefined,
+            focusOnLoad: false
+          }}
+        />
+      </Stack>
+    </>
+  );
+};

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

@@ -0,0 +1,27 @@
+import React 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);
+
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setHasFeedback(true)}>
+        Show card
+      </Button>
+      <Button variant="secondary" onClick={() => setHasFeedback(false)}>
+        Remove card
+      </Button>
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This completion message times out after you click **Show card**:"
+        userFeedbackComplete={hasFeedback ? { timeout: true, onTimeout: () => setHasFeedback(false) } : undefined}
+        isLiveRegion
+      />
+    </>
+  );
+};

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

@@ -31,7 +31,7 @@ export const MessageWithQuickResponsesExample: React.FunctionComponent = () => (
       name="Bot"
       role="bot"
       avatar={patternflyAvatar}
-      content="Welcome back! How can I help?"
+      content="Welcome back, User! How can I help you today?"
       quickResponses={[
         { id: '1', content: 'Help me with an access issue', onClick: () => alert('Clicked id 1') },
         { id: '2', content: 'Show my critical vulnerabilities', onClick: () => alert('Clicked id 2') },

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

@@ -0,0 +1,31 @@
+import React 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 = () => (
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="Follow this quick guide to install the Pipelines Operator."
+      quickStarts={{
+        quickStart: explorePipelinesQuickStart as QuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="This quick start tile includes prerequisites and a default icon."
+      quickStarts={{
+        quickStart: monitorSampleAppQuickStart,
+        onSelectQuickStart: (id) => alert(id)
+      }}
+    />
+  </>
+);

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

@@ -8,7 +8,7 @@ export const ResponseActionExample: React.FunctionComponent = () => (
     name="Bot"
     role="bot"
     avatar={patternflyAvatar}
-    content="Example with all prebuilt actions"
+    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') },

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

@@ -61,7 +61,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with only one source"
+        content="Example with only 1 source"
         sources={{
           sources: [
             {

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

@@ -14,14 +14,18 @@ propComponents:
   [
     'AttachMenu',
     'AttachmentEdit',
-    'FileDetails',
-    'FileDetailsLabel',
+    'FileDetailsProps',
+    'FileDetailsLabelProps',
     'FileDropZone',
     'PreviewAttachment',
     'Message',
+    'MessageExtraContent',
     'PreviewAttachment',
     'ActionProps',
-    'SourcesCardProps'
+    'SourcesCardProps',
+    'UserFeedbackProps',
+    'UserFeedbackCompleteProps',
+    'QuickResponseProps'
   ]
 sortValue: 3
 ---
@@ -39,7 +43,8 @@ import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel'
 import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
 import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
-
+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';
 
@@ -51,12 +56,8 @@ The `content` prop of the `<Message>` component is passed to a `<Markdown>` comp
 
 Messages from the ChatBot will be marked with an "AI" label to clearly communicate the use of AI to users. The ChatBot can display different `content` types, including plain text, code, or a loading animation (via `isLoading`).
 
-<br />
-
 By default, a date and timestamp is displayed with each message. We recommend using the `timestamp` prop in real ChatBots, since it will allow you to set persistent dates and times on messages, even if the messages re-render. You can update `timestamp` with a different [date and time format](/ux-writing/numerics) as needed.
 
-<br />
-
 You can further customize the avatar by applying an additional class or passing [PatternFly avatar props](/components/avatar) to the `<Message>` component via `avatarProps`.
 
 ```js file="./BotMessage.tsx"
@@ -96,9 +97,40 @@ You can apply a `clickedAriaLabel` and `clickedTooltipContent` once a button is
 
 ```
 
+### Message feedback
+
+When a user selects a positive or negative [message action](#message-actions), you can display a message feedback card that acknowledges their response and provides space for additional written feedback. These cards can be manually dismissed via the close button and the thank-you card can be [configured to time out automatically](/patternfly-ai/chatbot/messages#message-feedback-with-timeouts).
+
+You can see the full feedback flow [in the message demos](/patternfly-ai/chatbot/messages/demo#message-feedback).
+
+The message feedback cards will immediately receive focus by default, but you can remove this behavior by passing `focusOnLoad: false` to the `<Message>` (as shown in the following examples). For better usability, you should generally keep the default focus behavior.
+
+The following examples demonstrate:
+
+- A basic feedback card. To toggle the text input area, select the **Has text area** checkbox.
+- A thank-you card. To toggle the close button, select the **Has close button** checkbox.
+
+```js file="./MessageWithFeedback.tsx"
+
+```
+
+### Message feedback with timeouts
+
+The feedback thank-you message can be configured to time out and automatically close after a period of time. The default time-out period is 8000 ms, but it can be customized via `timeout`.
+
+To display the thank-you message in this example, click **Show card**.
+
+The card will not dismiss within the default time if a user is hovering over it or if it has keyboard focus. Instead, it will dismiss after they remove focus, via `timeoutAnimation`, which is 3000 ms by default. You can adjust this duration and set an `onTimeout` callback, as well as optional `onMouseEnter` and `onMouseLeave` callbacks.
+
+For accessibility purposes, be sure to announce when new content appears onscreen. `isLiveRegion` is set to true by default on `<Message>` so it will make appropriate announcements for you when the thank-you card appears.
+
+```js file="./MessageWithFeedbackTimeout.tsx"
+
+```
+
 ### Messages with quick responses
 
-You can offer convenient, clickable responses to messages in the form of quick actions. Quick actions are [PatternFly labels](/components/label/) in a label group, configured to display up to 5 visible labels.
+You can offer convenient, clickable responses to messages in the form of quick actions. Quick actions are [PatternFly labels](/components/label/) in a label group, configured to display up to 5 visible labels. Only 1 response can be selected at a time.
 
 To add quick actions, pass `quickResponses` to `<Message>`. This can be overridden by passing additional `<LabelGroup>` props to `quickResponseContainerProps`, or additional `<Label>` props to `quickResponses`.
 
@@ -116,6 +148,16 @@ The API for a source requires a link at minimum, but we strongly recommend provi
 
 ```
 
+### Messages with quick start tiles
+
+[Quick start](/extensions/quick-starts/) tiles can be added to messages via the `quickStarts` prop. Users can initiate the quick start from a link within the message tile.
+
+The quick start tile displayed below the message is based on the tile included in the [PatternFly quick starts extension](https://github.com/patternfly/patternfly-quickstarts), but with slightly more limited functionality. For example, it does not track the state of the extension. However, it supports an additional `onSelectQuickStart` prop, so that the name of the quick start can be captured on click. This can be used to trigger other behavior in your application, such as launching that quick start in your main UI.
+
+```js file="./MessageWithQuickStart.tsx"
+
+```
+
 ### User messages
 
 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`.
@@ -124,6 +166,16 @@ Messages from users have a different background color to differentiate them from
 
 ```
 
+### Custom message content
+
+**Caution:** Take care when using this feature. It can cause you to stray from accessibility and design best practice standards. If you frequently need add the same component via custom message content, reach out to the PatternFly team. If there's a consistent need for a certain component, we can look into adding native support for additional features.
+
+You can add custom content to specific parts of a `<Message>` via the `extraContent` prop, including additional components (like timestamps, badges, or custom elements). This prop allows you to create dynamic and reusable elements for various use cases, without changing the default message layout.
+
+```js file="./UserMessageWithExtraContent.tsx"
+
+```
+
 ## File attachments
 
 ### Messages with attachments