@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.21

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

@@ -14,14 +14,17 @@ propComponents:
   [
     'AttachMenu',
     'AttachmentEdit',
-    'FileDetails',
-    'FileDetailsLabel',
+    'FileDetailsProps',
+    'FileDetailsLabelProps',
     'FileDropZone',
     'PreviewAttachment',
     'Message',
     'PreviewAttachment',
     'ActionProps',
-    'SourcesCardProps'
+    'SourcesCardProps',
+    'UserFeedbackProps',
+    'UserFeedbackCompleteProps',
+    'QuickResponseProps'
   ]
 sortValue: 3
 ---
@@ -39,7 +42,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,19 +55,15 @@ 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"
 
 ```
 
-### Messages actions
+### Message actions
 
 You can add actions to a message, to allow users to interact with the message content. These actions can include:
 
@@ -79,15 +79,57 @@ You can add actions to a message, to allow users to interact with the message co
 
 ### Custom message actions
 
-Beyond the standard message actions (positive, negative, 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: `ariaLabel`, `onClick`, `className`, `isDisabled`, `tooltipContent`, `tooltipProps`, and `icon`.
+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:
+
+- `ariaLabel`
+- `onClick`
+- `className`
+- `isDisabled`
+- `tooltipContent`
+- `tooltipContent`
+- `tooltipProps`
+- `icon`
+
+You can apply a `clickedAriaLabel` and `clickedTooltipContent` once a button is clicked. If either of these props are omitted, their values will default to the `ariaLabel` or `tooltipContent` supplied.
 
 ```js file="./MessageWithCustomResponseActions.tsx"
 
 ```
 
+### 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`.
 
@@ -105,6 +147,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`.

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

@@ -2,25 +2,139 @@ import React from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
+import { Form, FormGroup, Radio } from '@patternfly/react-core';
 
 export const UserMessageExample: React.FunctionComponent = () => {
-  const markdown = `A paragraph with *emphasis* and **strong importance**.
+  const [variant, setVariant] = React.useState('code');
 
-> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+  /* eslint-disable indent */
+  const renderContent = () => {
+    switch (variant) {
+      case 'code':
+        return code;
+      case 'inlineCode':
+        return inlineCode;
+      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 'link':
+        return link;
+      case 'table':
+        return table;
+      default:
+        return;
+    }
+  };
+  /* eslint-enable indent */
 
-Here is an inline code - \`() => void\`
+  const code = `
+Here is some YAML code:
 
-Here is an ordered list: 
+~~~yaml
+apiVersion: helm.openshift.io/v1beta1/
+kind: HelmChartRepository
+metadata:
+  name: azure-sample-repo0oooo00ooo
+spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
+~~~
 
-1. Item 1
-2. Item 3
-3. Item 4
+Here is some JavaScript code:
 
-Here is an unordered list:
+~~~js
+import React from 'react';
+
+const MessageLoading = () => (
+  <div className="pf-chatbot__message-loading">
+    <span className="pf-chatbot__message-loading-dots">
+      <span className="pf-v6-screen-reader">Loading message</span>
+    </span>
+  </div>
+);
+
+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:
 
-* Item 1
-* Item 2
-* Item 3`;
+  1. Item 1
+  2. Item 2
+  3. Item 3`;
+
+  const unorderedList = `
+  Here is an unordered list:
+
+  * Item 1
+  * Item 2
+  * Item 3`;
+
+  const moreComplexList = `You may be wondering whether you can display more complex lists with formatting. In response to your question, I will explain how to spread butter on toast.
+
+1. **Using a \`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
+ `;
 
   return (
     <>
@@ -31,7 +145,6 @@ Here is an unordered list:
         timestamp="1 hour ago"
         avatar={userAvatar}
       />
-      <Message name="User" role="user" content={markdown} avatar={userAvatar} />
       <Message
         name="User"
         role="user"
@@ -39,6 +152,89 @@ Here is an unordered list:
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />
+      <Form>
+        <FormGroup role="radiogroup" isInline fieldId="user-message-type" label="Message content type">
+          <Radio
+            isChecked={variant === 'code'}
+            onChange={() => setVariant('code')}
+            name="user-message-type"
+            label="Code"
+            id="user-code"
+          />
+          <Radio
+            isChecked={variant === 'inlineCode'}
+            onChange={() => setVariant('inlineCode')}
+            name="user-message-type"
+            label="Inline code"
+            id="user-inline-code"
+          />
+          <Radio
+            isChecked={variant === 'heading'}
+            onChange={() => setVariant('heading')}
+            name="user-message-type"
+            label="Heading"
+            id="user-heading"
+          />
+          <Radio
+            isChecked={variant === 'blockQuotes'}
+            onChange={() => setVariant('blockQuotes')}
+            name="user-message-type"
+            label="Block quote"
+            id="user-block-quotes"
+          />
+          <Radio
+            isChecked={variant === 'emphasis'}
+            onChange={() => setVariant('emphasis')}
+            name="user-message-type"
+            label="Emphasis"
+            id="user-emphasis"
+          />
+          <Radio
+            isChecked={variant === 'link'}
+            onChange={() => setVariant('link')}
+            name="user-message-type"
+            label="Link"
+            id="user-link"
+          />
+          <Radio
+            isChecked={variant === 'unorderedList'}
+            onChange={() => setVariant('unorderedList')}
+            name="user-message-type"
+            label="Unordered list"
+            id="user-unordered-list"
+          />
+          <Radio
+            isChecked={variant === 'orderedList'}
+            onChange={() => setVariant('orderedList')}
+            name="user-message-type"
+            label="Ordered list"
+            id="user-ordered-list"
+          />
+          <Radio
+            isChecked={variant === 'moreComplexList'}
+            onChange={() => setVariant('moreComplexList')}
+            name="user-message-type"
+            label="More complex list"
+            id="user-more-complex-list"
+          />
+          <Radio
+            isChecked={variant === 'table'}
+            onChange={() => setVariant('table')}
+            name="user-message-type"
+            label="Table"
+            id="user-table"
+          />
+        </FormGroup>
+      </Form>
+      <Message
+        name="User"
+        role="user"
+        content={renderContent()}
+        avatar={userAvatar}
+        tableProps={
+          variant === 'table' ? { 'aria-label': 'App information and user roles for user messages' } : undefined
+        }
+      />
     </>
   );
 };

package/patternfly-docs/content/extensions/chatbot/examples/Messages/explore-pipeline-quickstart.ts

@@ -0,0 +1,65 @@
+import userAvatar from './user_avatar.svg';
+
+export const explorePipelinesQuickStart = {
+  apiVersion: 'console.openshift.io/v1',
+  kind: 'QuickStarts',
+  metadata: {
+    name: 'explore-pipelines'
+  },
+  spec: {
+    version: 4.7,
+    displayName: `Installing the Pipelines Operator`,
+    durationMinutes: 10,
+    icon: userAvatar,
+    description: `Install the OpenShift® Pipelines Operator to build Pipelines using Tekton.`,
+    prerequisites: [''],
+    introduction: `OpenShift® Pipelines is a cloud-native, continuous integration and continuous delivery (CI/CD) solution based on Kubernetes resources. It uses Tekton building blocks to automate deployments across multiple Kubernetes distributions by abstracting away the underlying implementation details.
+* OpenShift Pipelines is a serverless CI/CD system that runs pipelines with all the required dependencies in isolated containers.
+* They are designed for decentralized teams that work on a microservice-based architecture.
+* They are defined using standard Custom Resource Definitions making them extensible and easy to integrate with the existing Kubernetes tools. This enables you to scale on-demand.
+* You can use OpenShift Pipelines to build images with Kubernetes tools such as Source-to-Image (S2I), Buildah, Buildpacks, and Kaniko that are portable across any Kubernetes platform.
+* You can use the Developer perspective to create and manage pipelines and view logs in your namespaces.
+
+To start using Pipelines, install the OpenShift® Pipelines Operator on your cluster.`,
+    tasks: [
+      {
+        title: `Installing the OpenShift Pipelines Operator`,
+        description: `### To install the OpenShift Pipelines Operator:
+
+1. From the **Administrator** perspective in the console navigation panel, click **Operators > OperatorHub**.
+2. In the **Filter by keyword** field, type \`OpenShift Pipelines Operator\`.
+3. If the tile has an Installed label, the Operator is already installed. Proceed to the next quick start to create a Pipeline.
+4. Click the **tile** to open the Operator details.
+5. At the top of the OpenShift Pipelines Operator panel that opens, click **Install**.
+6. Fill out the Operator subscription form by selecting the channel that matches your OpenShift cluster, and then click **Install**.
+7. On the **Installed Operators** page, wait for the OpenShift Pipelines Operator's status to change from **Installing** to **Succeeded**. `,
+        review: {
+          instructions: `#### To verify that the OpenShift Pipelines Operator is installed:
+1. From the **Operators** section of the navigation, go to the **Installed Operators** page.
+2. Verify that the **OpenShift Pipelines Operator** appears in the list of Operators.
+
+In the status column, is the status of the OpenShift Pipelines Operator **Succeeded**?`,
+          failedTaskHelp: `This task isn’t verified yet. Try the task again, or [read more](https://docs.openshift.com/container-platform/4.6/pipelines/installing-pipelines.html#op-installing-pipelines-operator-in-web-console_installing-pipelines) about this topic.`
+        },
+        summary: {
+          success: `You have installed the Pipelines Operator!`,
+          failed: `Try the steps again.`
+        }
+      }
+    ],
+    conclusion: `You successfully installed the OpenShift Pipelines Operator! If you want to learn how to deploy an application and associate a Pipeline with it, take the Creating a Pipeline quick start.`,
+    nextQuickStart: [`install-app-and-associate-pipeline`],
+    accessReviewResources: [
+      {
+        group: 'operators.coreos.com',
+        resource: 'operatorgroups',
+        verb: 'list'
+      },
+      {
+        group: 'packages.operators.coreos.com',
+        resource: 'packagemanifests',
+        verb: 'list'
+      }
+    ]
+  }
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFooter.tsx

@@ -8,7 +8,7 @@ export const ChatbotFooterExample: React.FunctionComponent = () => {
   return (
     <ChatbotFooter>
       <MessageBar onSendMessage={handleSend} hasMicrophoneButton hasAttachButton />
-      <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
+      <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
     </ChatbotFooter>
   );
 };

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotFootnote.tsx

@@ -3,10 +3,10 @@ import { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter'
 
 export const FootnoteDemo: React.FunctionComponent = () => (
   <ChatbotFootnote
-    label="Lightspeed uses AI. Check for mistakes."
+    label="ChatBot uses AI. Check for mistakes."
     popover={{
       title: 'Verify accuracy',
-      description: `While Lightspeed strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+      description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
       bannerImage: {
         src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
         alt: 'Example image for footnote popover'

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx

@@ -33,7 +33,7 @@ const initialConversations: { [key: string]: Conversation[] } = {
 
 export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(true);
-  const [isButtonOrderReversed, setIsbuttonOrderReversed] = React.useState(false);
+  const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
   const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
@@ -70,7 +70,7 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
       <Checkbox
         label="Reverse action buttons"
         isChecked={isButtonOrderReversed}
-        onChange={() => setIsbuttonOrderReversed(!isButtonOrderReversed)}
+        onChange={() => setIsButtonOrderReversed(!isButtonOrderReversed)}
         id="drawer-actions-visible"
         name="drawer-actions-visible"
       ></Checkbox>

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerNavigation.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox } from '@patternfly/react-core';
+
+const initialConversations: Conversation[] = [
+  { id: '1', text: 'Red Hat products and services', noIcon: true },
+  {
+    id: '2',
+    text: 'Enterprise Linux installation and setup',
+    noIcon: true
+  },
+  { id: '3', text: 'Troubleshoot system crash', noIcon: true },
+  { id: '4', text: 'Ansible security and updates', noIcon: true },
+  { id: '5', text: 'Red Hat certification', noIcon: true },
+  { id: '6', text: 'Lightspeed user documentation', noIcon: true },
+  { id: '7', text: 'Crashing pod assistance', noIcon: true },
+  { id: '8', text: 'OpenShift AI pipelines', noIcon: true },
+  { id: '9', text: 'Updating subscription plan', noIcon: true },
+  { id: '10', text: 'Red Hat licensing options', noIcon: true },
+  { id: '11', text: 'RHEL system performance', noIcon: true },
+  { id: '12', text: 'Manage user accounts', noIcon: true }
+];
+
+export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
+  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => {
+          setIsOpen(!isOpen);
+          setConversations(initialConversations);
+        }}
+        id="navigation-drawer-visible"
+        name="navigation-drawer-visible"
+      />
+      <Checkbox
+        label="Reverse action buttons"
+        isChecked={isButtonOrderReversed}
+        onChange={() => setIsButtonOrderReversed(!isButtonOrderReversed)}
+        id="navigation-drawer-actions-visible"
+        name="navigation-drawer-actions-visible"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsOpen(!isOpen)}
+        isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
+        // eslint-disable-next-line no-console
+        onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
+        conversations={conversations}
+        reverseButtonOrder={isButtonOrderReversed}
+        drawerContent={<div>Drawer content</div>}
+      />
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox } from '@patternfly/react-core';
+
+const initialConversations: { [key: string]: Conversation[] } = {
+  Today: [{ id: '1', text: 'Red Hat products and services' }],
+  'This month': [
+    {
+      id: '2',
+      text: 'Enterprise Linux installation and setup'
+    },
+    { id: '3', text: 'Troubleshoot system crash' }
+  ],
+  March: [
+    { id: '4', text: 'Ansible security and updates' },
+    { id: '5', text: 'Red Hat certification' },
+    { id: '6', text: 'Lightspeed user documentation' }
+  ],
+  February: [
+    { id: '7', text: 'Crashing pod assistance' },
+    { id: '8', text: 'OpenShift AI pipelines' },
+    { id: '9', text: 'Updating subscription plan' },
+    { id: '10', text: 'Red Hat licensing options' }
+  ],
+  January: [
+    { id: '11', text: 'RHEL system performance' },
+    { id: '12', text: 'Manage user accounts' }
+  ]
+};
+
+export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  const findMatchingItems = (targetValue: string) => {
+    let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
+      const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
+      if (filteredItems.length > 0) {
+        acc[key] = filteredItems;
+      }
+      return acc;
+    }, {});
+
+    // append message if no items are found
+    if (Object.keys(filteredConversations).length === 0) {
+      filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
+    }
+    return filteredConversations;
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => {
+          setIsOpen(!isOpen);
+          setConversations(initialConversations);
+        }}
+        id="drawer-visible"
+        name="drawer-visible"
+      />
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsOpen(!isOpen)}
+        isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
+        // eslint-disable-next-line no-console
+        onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
+        conversations={conversations}
+        onNewChat={() => {
+          setIsOpen(!isOpen);
+        }}
+        handleTextInputChange={(value: string) => {
+          if (value === '') {
+            setConversations(initialConversations);
+          }
+          // this is where you would perform search on the items in the drawer
+          // and update the state
+          const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
+          setConversations(newConversations);
+        }}
+        drawerContent={<div>Drawer content</div>}
+        drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}
+      />
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarAttach.tsx

@@ -126,7 +126,7 @@ export const ChatbotMessageBarDefaultAttachExample: React.FunctionComponent = ()
   return (
     <>
       {/* this is required for react-dropzone to work in Safari and Firefox */}
-      <input {...getInputProps()} />
+      <input {...getInputProps()} hidden />
       <MessageBar
         onSendMessage={handleSend}
         attachMenuProps={{