@patternfly/chatbot 2.1.0-prerelease.17

package/dist/esm/index.d.ts

@@ -0,0 +1,48 @@
+export { default as AttachmentEdit } from './AttachmentEdit';
+export * from './AttachmentEdit';
+export { default as AttachMenu } from './AttachMenu';
+export * from './AttachMenu';
+export { default as Chatbot } from './Chatbot';
+export * from './Chatbot';
+export { default as ChatbotAlert } from './ChatbotAlert';
+export * from './ChatbotAlert';
+export { default as ChatbotContent } from './ChatbotContent';
+export * from './ChatbotContent';
+export { default as ChatbotConversationHistoryNav } from './ChatbotConversationHistoryNav';
+export * from './ChatbotConversationHistoryNav';
+export { default as ChatbotFooter } from './ChatbotFooter';
+export * from './ChatbotFooter';
+export { default as ChatbotHeader } from './ChatbotHeader';
+export * from './ChatbotHeader';
+export { default as ChatbotModal } from './ChatbotModal';
+export * from './ChatbotModal';
+export { default as ChatbotPopover } from './ChatbotPopover';
+export * from './ChatbotPopover';
+export { default as ChatbotToggle } from './ChatbotToggle';
+export * from './ChatbotToggle';
+export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
+export * from './ChatbotWelcomePrompt';
+export { default as CodeModal } from './CodeModal';
+export * from './CodeModal';
+export { default as FileDetails } from './FileDetails';
+export * from './FileDetails';
+export { default as FileDetailsLabel } from './FileDetailsLabel';
+export * from './FileDetailsLabel';
+export { default as FileDropZone } from './FileDropZone';
+export * from './FileDropZone';
+export { default as LoadingMessage } from './LoadingMessage';
+export * from './LoadingMessage';
+export { default as Message } from './Message';
+export * from './Message';
+export { default as MessageBar } from './MessageBar';
+export * from './MessageBar';
+export { default as MessageBox } from './MessageBox';
+export * from './MessageBox';
+export { default as PreviewAttachment } from './PreviewAttachment';
+export * from './PreviewAttachment';
+export { default as ResponseActions } from './ResponseActions';
+export * from './ResponseActions';
+export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
+export * from './SourceDetailsMenuItem';
+export { default as SourcesCard } from './SourcesCard';
+export * from './SourcesCard';

package/dist/esm/index.js

@@ -0,0 +1,49 @@
+// this file is autogenerated by generate-index.js, modifying it manually will have no effect
+export { default as AttachmentEdit } from './AttachmentEdit';
+export * from './AttachmentEdit';
+export { default as AttachMenu } from './AttachMenu';
+export * from './AttachMenu';
+export { default as Chatbot } from './Chatbot';
+export * from './Chatbot';
+export { default as ChatbotAlert } from './ChatbotAlert';
+export * from './ChatbotAlert';
+export { default as ChatbotContent } from './ChatbotContent';
+export * from './ChatbotContent';
+export { default as ChatbotConversationHistoryNav } from './ChatbotConversationHistoryNav';
+export * from './ChatbotConversationHistoryNav';
+export { default as ChatbotFooter } from './ChatbotFooter';
+export * from './ChatbotFooter';
+export { default as ChatbotHeader } from './ChatbotHeader';
+export * from './ChatbotHeader';
+export { default as ChatbotModal } from './ChatbotModal';
+export * from './ChatbotModal';
+export { default as ChatbotPopover } from './ChatbotPopover';
+export * from './ChatbotPopover';
+export { default as ChatbotToggle } from './ChatbotToggle';
+export * from './ChatbotToggle';
+export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
+export * from './ChatbotWelcomePrompt';
+export { default as CodeModal } from './CodeModal';
+export * from './CodeModal';
+export { default as FileDetails } from './FileDetails';
+export * from './FileDetails';
+export { default as FileDetailsLabel } from './FileDetailsLabel';
+export * from './FileDetailsLabel';
+export { default as FileDropZone } from './FileDropZone';
+export * from './FileDropZone';
+export { default as LoadingMessage } from './LoadingMessage';
+export * from './LoadingMessage';
+export { default as Message } from './Message';
+export * from './Message';
+export { default as MessageBar } from './MessageBar';
+export * from './MessageBar';
+export { default as MessageBox } from './MessageBox';
+export * from './MessageBox';
+export { default as PreviewAttachment } from './PreviewAttachment';
+export * from './PreviewAttachment';
+export { default as ResponseActions } from './ResponseActions';
+export * from './ResponseActions';
+export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
+export * from './SourceDetailsMenuItem';
+export { default as SourcesCard } from './SourcesCard';
+export * from './SourcesCard';

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts"],"version":"5.6.3"}

package/generate-fed-package-json.js

@@ -0,0 +1,75 @@
+const fse = require('fs-extra');
+const glob = require('glob');
+const path = require('path');
+
+const root = process.cwd();
+
+const sourceFiles = glob.sync(`${root}/src/*/`).map((name) => name.replace(/\/$/, ''));
+
+const indexTypings = glob.sync(`${root}/src/index.d.ts`);
+
+const ENV_AGNOSTIC_ROOT = `${root}/dist/dynamic`;
+
+async function copyTypings(files, dest) {
+  const cmds = [];
+  files.forEach((file) => {
+    const fileName = file.split('/').pop();
+    cmds.push(fse.copyFile(file, `${dest}/${fileName}`));
+  });
+  return Promise.all(cmds);
+}
+
+async function createPackage(file) {
+  const fileName = file.split('/').pop();
+  const esmSource = glob.sync(`${root}/dist/esm/${fileName}/**/index.js`)[0];
+  const cjsSource = glob.sync(`${root}/dist/cjs/${fileName}/**/index.js`)[0];
+  const typingsSource = glob.sync(`${root}/dist/esm/${fileName}/**/index.d.ts`)[0];
+  /**
+   * Prevent creating package.json for directories with no JS files (like CSS directories)
+   */
+  if (!esmSource) {
+    return;
+  }
+
+  const destDir = path.resolve(`${ENV_AGNOSTIC_ROOT}`, fileName);
+  const destFile = `${destDir}/package.json`;
+
+  // ensure the directory exists
+  fse.ensureDirSync(destDir);
+
+  const esmRelative = path.relative(file, esmSource).replace('/dist', '');
+  const cjsRelative = path.relative(file, cjsSource).replace('/dist', '');
+  const tsRelative = path.relative(file, typingsSource).replace('/dist', '');
+  const content = {
+    main: cjsRelative,
+    module: esmRelative
+  };
+  const typings = glob.sync(`${root}/src/${fileName}/*.d.ts`);
+  const cmds = [];
+  content.typings = tsRelative;
+  cmds.push(copyTypings(typings, `${root}/dist/${fileName}`));
+  cmds.push(fse.writeJSON(destFile, content));
+  return Promise.all(cmds);
+}
+
+async function generatePackages(files) {
+  // ensure the dynamic root exists
+  fse.ensureDirSync(path.resolve(ENV_AGNOSTIC_ROOT));
+  const cmds = files.map((file) => createPackage(file));
+  return Promise.all(cmds);
+}
+
+async function run(files) {
+  try {
+    await generatePackages(files);
+    if (indexTypings.length === 1) {
+      copyTypings(indexTypings, root);
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+run(sourceFiles);

package/generate-index.js

@@ -0,0 +1,42 @@
+const fse = require('fs-extra');
+const glob = require('glob');
+const path = require('path');
+
+const root = process.cwd();
+
+const ENV_AGNOSTIC_ROOT = `${root}/src`;
+
+const sourceFiles = glob.sync(path.resolve(__dirname, './src/*/index.ts'));
+
+async function generateIndex(files) {
+  // ensure the dynamic root exists
+  fse.ensureDirSync(path.resolve(ENV_AGNOSTIC_ROOT));
+
+  const destFile = `${ENV_AGNOSTIC_ROOT}/index.ts`;
+
+  const stream = fse.createWriteStream(destFile);
+  stream.once('open', () => {
+    stream.write('// this file is autogenerated by generate-index.js, modifying it manually will have no effect\n');
+
+    files.forEach((file) => {
+      const name = file.replace('/index.ts', '').split('/').pop();
+      stream.write(`\nexport { default as ${name} } from './${name}';\n`);
+      stream.write(`export * from './${name}';\n`);
+    });
+    stream.end();
+  });
+
+  return Promise.resolve();
+}
+
+async function run(files) {
+  try {
+    await generateIndex(files);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+run(sourceFiles);

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@patternfly/chatbot",
+  "version": "2.1.0-prerelease.17",
+  "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "scripts": {
+    "build": "sass src/main.scss dist/css/main.css && npm run build:index && npm run build:js && npm run build:esm && npm run build:fed:packages",
+    "build:watch": "npm run build:js && npm run build:esm -- --watch && npm run build:fed:packages -- --watch",
+    "build:esm": "tsc --build --verbose ./tsconfig.json",
+    "build:fed:packages": "node generate-fed-package-json.js",
+    "build:js": "tsc -p tsconfig.cjs.json",
+    "build:index": "node generate-index.js",
+    "clean": "rimraf dist",
+    "docs:develop": "pf-docs-framework start",
+    "docs:build": "pf-docs-framework build all --output public",
+    "docs:serve": "pf-docs-framework serve public --port 5001",
+    "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5001",
+    "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
+    "serve:a11y": "serve coverage"
+  },
+  "repository": "git+https://github.com/patternfly/chatbot.git",
+  "author": "Red Hat",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/patternfly/chatbot/issues"
+  },
+  "homepage": "https://github.com/patternfly/chatbot#readme",
+  "publishConfig": {
+    "access": "public",
+    "tag": "prerelease"
+  },
+  "dependencies": {
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-code-editor": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "clsx": "^2.1.0",
+    "framer-motion": "^11.3.28",
+    "react-jss": "^10.10.0",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-textarea-auto-witdth-height": "^1.0.3",
+    "remark-gfm": "^4.0.0",
+    "path-browserify": "^1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
+  },
+  "devDependencies": {
+    "@patternfly/documentation-framework": "^6.0.6",
+    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/patternfly-a11y": "^5.0.0",
+    "@patternfly/react-table": "^6.0.0",
+    "@types/dom-speech-recognition": "^0.0.4",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-router-dom": "^5.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.22.2",
+    "react-router-dom": "^6.22.2",
+    "rimraf": "^2.7.1",
+    "typescript": "^5.3.3",
+    "@octokit/rest": "^18.0.0",
+    "victory-core": "^37.1.1",
+    "victory-scatter": "^37.1.1",
+    "victory-pie": "^37.1.1",
+    "victory-stack": "^37.1.1",
+    "victory-legend": "^37.1.1",
+    "victory-line": "^37.1.1",
+    "victory-group": "^37.1.1",
+    "victory-voronoi-container": "^37.1.1",
+    "victory-create-container": "^37.1.1",
+    "victory-cursor-container": "^37.1.1",
+    "victory-tooltip": "^37.1.1",
+    "victory-bar": "^37.1.1"
+  }
+}

package/patternfly-a11y.config.js

@@ -0,0 +1,28 @@
+const { fullscreenRoutes } = require('@patternfly/documentation-framework/routes');
+
+/**
+ * Wait for a selector before running axe
+ *
+ * @param page page from puppeteer
+ */
+async function waitFor(page) {
+  await page.waitForSelector('#root > *');
+}
+
+const urls = Object.keys(fullscreenRoutes)
+  .map((key) => (fullscreenRoutes[key].isFullscreenOnly ? key : fullscreenRoutes[key].path.replace(/\/react$/, '')))
+  .reduce((result, item) => (result.includes(item) ? result : [...result, item]), []);
+
+module.exports = {
+  prefix: 'http://localhost:5001',
+  waitFor,
+  crawl: false,
+  urls: [...urls],
+  ignoreRules: [
+    'color-contrast',
+    'landmark-no-duplicate-main',
+    'landmark-main-is-top-level',
+    'scrollable-region-focusable'
+  ].join(','),
+  ignoreIncomplete: true
+};

package/patternfly-docs/content/extensions/chatbot/about-chatbot.md

@@ -0,0 +1,29 @@
+---
+section: PatternFly-AI
+subsection: ChatBot
+id: Overview
+sortValue: 1
+source: About
+---
+
+**Note:** The PatternFly chatbot extension lives in its own package [`@patternfly/chatbot`](https://www.npmjs.com/package/@patternfly/chatbot)
+
+It is important to leverage AI in a way that improves the experiences of your users. In alignment with our [AI principles](/patternfly-ai/about-ai#ai-principles) and [ethical design guidelines,](/patternfly-ai/ai-guidelines) we've created this chatbot extension. The PatternFly chatbot contains a React implementation of an AI chatbot, to provide your users with access to convenient and persistent help.
+
+_Only use this chatbot when it adds value to your users' experiences._ Don't use it simply for the sake of novelty—your users will only be excited to interact with a new chatbot feature if it directly helps them reach their goals.
+
+## How to use the chatbot
+
+To illustrate the capabilities of the chatbot, we offer a [chatbot container demo](/patternfly-ai/chatbot/overview/demo) and a [chatbot attachments demo](/patternfly-ai/chatbot/messages/demo). To learn how to write for chatbot experiences, refer to our [chatbot writing guidelines.](/patternfly-ai/conversation-design/#writing-for-chatbots)
+
+We currently support the follow features to customize your chatbot experience:
+
+- [The chatbot container](/patternfly-ai/chatbot/ui#container)
+- [A toggle for the chatbot container](/patternfly-ai/chatbot/ui#toggle)
+- [The chatbot header](/patternfly-ai/chatbot/ui#header)
+- [The chatbot footer](/patternfly-ai/chatbot/ui#footer)
+- [Messages, from the chatbot and from users](/patternfly-ai/chatbot/messages)
+- [Chatbot attachments](/patternfly-ai/chatbot/messages#attachments)
+- [Conversation history](/patternfly-ai/chatbot/ui#navigation)
+
+We will continue to grow and evolve our chatbot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one.

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

@@ -0,0 +1,149 @@
+import React from 'react';
+import AttachMenu from '@patternfly/chatbot/dist/dynamic/AttachMenu';
+import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
+import { Button, Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { BellIcon, CodeIcon, ClipboardIcon, CalendarAltIcon, UploadIcon } from '@patternfly/react-icons';
+import PaperclipIcon from './PaperclipIcon';
+
+const initialMenuItems = [
+  <DropdownList key="list-1">
+    <DropdownItem className="pf-chatbot-source-details-dropdown-item" value="auth-operator Pod" id="0">
+      <SourceDetailsMenuItem
+        icon={
+          <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z"
+              fill="currentColor"
+            />
+            <g clipPath="url(#clip0_3280_27488)">
+              <path
+                d="M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z"
+                fill="white"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_3280_27488">
+                <rect width="7.5" height="12" fill="white" transform="translate(8.25 6.5)" />
+              </clipPath>
+            </defs>
+          </svg>
+        }
+        name="auth-operator"
+        type="Pod"
+      />
+    </DropdownItem>
+  </DropdownList>,
+  <DropdownGroup key="group2">
+    <DropdownList>
+      <DropdownItem value="Alerts" id="1" icon={<BellIcon />}>
+        Alerts
+      </DropdownItem>
+      <DropdownItem value="Events" id="2" icon={<CalendarAltIcon />}>
+        Events
+      </DropdownItem>
+      <DropdownItem value="Logs" id="3" icon={<ClipboardIcon />}>
+        Logs
+      </DropdownItem>
+      <DropdownItem value="YAML - Status" id="4" icon={<CodeIcon />}>
+        YAML - Status
+      </DropdownItem>
+      <DropdownItem value="YAML - All contents" id="5" icon={<CodeIcon />}>
+        YAML - All contents
+      </DropdownItem>
+    </DropdownList>
+  </DropdownGroup>
+];
+
+const uploadMenuItems = [
+  <Divider key="divider" />,
+  <DropdownList key="list-2">
+    <DropdownItem key="upload" value="upload" id="upload" icon={<UploadIcon />}>
+      Upload from computer
+    </DropdownItem>
+  </DropdownList>
+];
+
+export const AttachmentMenuExample: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [userFacingMenuItems, setUserFacingMenuItems] = React.useState<React.ReactNode>([]);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+    setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
+  };
+
+  const findMatchingElements = (elements: React.ReactNode[], targetValue: string) => {
+    let matchingElements = [] as React.ReactNode[];
+
+    elements.forEach((element) => {
+      if (React.isValidElement(element)) {
+        // Check if the element's value matches the targetValue
+        if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) {
+          matchingElements.push(React.cloneElement(element, { key: element.props.value }));
+        }
+
+        // Recursively check the element's children
+        const children = React.Children.toArray(element.props.children);
+        matchingElements = matchingElements.concat(findMatchingElements(children, targetValue));
+      }
+    });
+
+    return matchingElements;
+  };
+
+  const onTextChange = (textValue: string) => {
+    if (textValue === '') {
+      setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems));
+      return;
+    }
+
+    const newMenuItems = findMatchingElements(initialMenuItems, textValue);
+    // this is necessary because the React nodes we find traversing the recursive search
+    // aren't correctly wrapped in a DropdownList. This leads to problems with the
+    // auth-operator item where it winds up floating in a bad place in the DOM and never
+    // gets removed
+    setUserFacingMenuItems(
+      <>
+        <DropdownList>
+          {newMenuItems.length === 0 ? (
+            <DropdownItem key="no-items">No results found</DropdownItem>
+          ) : (
+            newMenuItems.map((item) => item)
+          )}
+        </DropdownList>
+        {uploadMenuItems.map((item) => item)}
+      </>
+    );
+  };
+
+  return (
+    <AttachMenu
+      filteredItems={userFacingMenuItems}
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChangeKeys={['Escape']}
+      // eslint-disable-next-line no-console
+      onSelect={(_ev, value) => console.log('selected', value)}
+      handleTextInputChange={onTextChange}
+      popperProps={{ direction: 'up', distance: '8' }}
+      searchInputPlaceholder="Search cluster resources..."
+      toggle={(toggleRef) => (
+        <Button
+          style={{
+            alignItems: 'center',
+            borderRadius: '50%',
+            display: 'flex',
+            height: '48px',
+            justifyContent: 'center',
+            padding: '0',
+            width: '48px',
+            lineHeight: '1rem'
+          }}
+          ref={toggleRef}
+          onClick={onToggleClick}
+          icon={<img src={PaperclipIcon} alt="Add an attachment" />}
+        />
+      )}
+    />
+  );
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { AttachmentEdit } from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
+
+export const AttachmentEditModalExample: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <Button onClick={handleModalToggle}>Launch modal</Button>
+      <AttachmentEdit
+        code="I am a code snippet"
+        fileName="test.yaml"
+        handleModalToggle={handleModalToggle}
+        isModalOpen={isModalOpen}
+        onCancel={() => null}
+        // eslint-disable-next-line no-console
+        onSave={(_event, code) => console.log(`The new code is "${code}"`)}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
+
+export const AttachmentErrorExample: React.FunctionComponent = () => (
+  <ChatbotAlert
+    variant="danger"
+    // eslint-disable-next-line no-console
+    onClose={() => console.log('Clicked the close button')}
+    title="File upload failed"
+  >
+    Your file size is too large. Please ensure that your file is less than 25 MB.
+  </ChatbotAlert>
+);

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const BotMessageExample: React.FunctionComponent = () => {
+  const markdown = `
+Here is some YAML code:
+
+~~~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
+~~~
+
+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">
+      <span className="pf-v6-screen-reader">Loading message</span>
+    </span>
+  </div>
+);
+
+export default MessageLoading;
+
+~~~
+`;
+
+  const orderedList = `
+  Here is an ordered list:
+
+  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!
+ `;
+
+  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`}
+        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
+        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"
+      />
+    </>
+  );
+};

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

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