@patternfly/chatbot 2.1.0-prerelease.17

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx

@@ -0,0 +1,437 @@
+import React from 'react';
+
+import {
+  Bullseye,
+  Brand,
+  DropdownList,
+  DropdownItem,
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  PageSidebarBody,
+  PageSidebar,
+  MastheadToggle,
+  PageToggleButton,
+  SkipToContent
+} from '@patternfly/react-core';
+
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent';
+import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
+import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
+import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import ChatbotHeader, {
+  ChatbotHeaderMenu,
+  ChatbotHeaderMain,
+  ChatbotHeaderTitle,
+  ChatbotHeaderActions,
+  ChatbotHeaderSelectorDropdown
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+
+import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
+import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
+import { BarsIcon } from '@patternfly/react-icons';
+import userAvatar from '../Messages/user_avatar.jpg';
+import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+
+const footnoteProps = {
+  label: 'Lightspeed 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.`,
+    bannerImage: {
+      src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
+      alt: 'Example image for footnote popover'
+    },
+    cta: {
+      label: 'Got it',
+      onClick: () => {
+        alert('Do something!');
+      }
+    },
+    link: {
+      label: 'Learn more',
+      url: 'https://www.redhat.com/'
+    }
+  }
+};
+
+const markdown = `A paragraph with *emphasis* and **strong importance**.
+
+> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+
+Here is an inline code - \`() => void\`
+
+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;
+
+~~~
+`;
+
+// It's important to set a date and timestamp prop since the Message components re-render.
+// The timestamps re-render with them.
+const date = new Date();
+
+const initialMessages: MessageProps[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: 'Hello, can you give me an example of what you can do?',
+    name: 'User',
+    avatar: userAvatar,
+    timestamp: date.toLocaleString()
+  },
+  {
+    id: '2',
+    role: 'bot',
+    content: markdown,
+    name: 'Bot',
+    avatar: patternflyAvatar,
+    timestamp: date.toLocaleString(),
+    actions: {
+      // eslint-disable-next-line no-console
+      positive: { onClick: () => console.log('Good response') },
+      // 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
+      share: { onClick: () => console.log('Share') },
+      // eslint-disable-next-line no-console
+      listen: { onClick: () => console.log('Listen') }
+    }
+  }
+];
+
+const welcomePrompts = [
+  {
+    title: 'Topic 1',
+    message: 'Helpful prompt for Topic 1'
+  },
+  {
+    title: 'Topic 2',
+    message: 'Helpful prompt for Topic 2'
+  }
+];
+
+const initialConversations = {
+  Today: [{ id: '1', text: 'Hello, can you give me an example of what you can do?' }],
+  '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 EmbeddedChatbotDemo: React.FunctionComponent = () => {
+  const [messages, setMessages] = React.useState<MessageProps[]>(initialMessages);
+  const [selectedModel, setSelectedModel] = React.useState('Granite 7B');
+  const [isSendButtonDisabled, setIsSendButtonDisabled] = React.useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+  const [announcement, setAnnouncement] = React.useState<string>();
+  const scrollToBottomRef = React.useRef<HTMLDivElement>(null);
+  const historyRef = React.useRef<HTMLButtonElement>(null);
+
+  const displayMode = ChatbotDisplayMode.embedded;
+  // Autu-scrolls to the latest message
+  React.useEffect(() => {
+    // don't scroll the first load - in this demo, we know we start with two messages
+    if (messages.length > 2) {
+      scrollToBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages]);
+
+  const onSelectModel = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    setSelectedModel(value as string);
+  };
+
+  // you will likely want to come up with your own unique id function; this is for demo purposes only
+  const generateId = () => {
+    const id = Date.now() + Math.random();
+    return id.toString();
+  };
+
+  const handleSend = (message: string) => {
+    setIsSendButtonDisabled(true);
+    const newMessages: MessageProps[] = [];
+    // We can't use structuredClone since messages contains functions, but we can't mutate
+    // items that are going into state or the UI won't update correctly
+    messages.forEach((message) => newMessages.push(message));
+    // It's important to set a timestamp prop since the Message components re-render.
+    // The timestamps re-render with them.
+    const date = new Date();
+    newMessages.push({
+      id: generateId(),
+      role: 'user',
+      content: message,
+      name: 'User',
+      avatar: userAvatar,
+      timestamp: date.toLocaleString()
+    });
+    newMessages.push({
+      id: generateId(),
+      role: 'bot',
+      content: 'API response goes here',
+      name: 'Bot',
+      avatar: patternflyAvatar,
+      isLoading: true,
+      timestamp: date.toLocaleString()
+    });
+    setMessages(newMessages);
+    // make announcement to assistive devices that new messages have been added
+    setAnnouncement(`Message from User: ${message}. Message from Bot is loading.`);
+
+    // this is for demo purposes only; in a real situation, there would be an API response we would wait for
+    setTimeout(() => {
+      const loadedMessages: MessageProps[] = [];
+      // we can't use structuredClone since messages contains functions, but we can't mutate
+      // items that are going into state or the UI won't update correctly
+      newMessages.forEach((message) => loadedMessages.push(message));
+      loadedMessages.pop();
+      loadedMessages.push({
+        id: generateId(),
+        role: 'bot',
+        content: 'API response goes here',
+        name: 'Bot',
+        avatar: patternflyAvatar,
+        isLoading: false,
+        actions: {
+          // eslint-disable-next-line no-console
+          positive: { onClick: () => console.log('Good response') },
+          // 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
+          share: { onClick: () => console.log('Share') },
+          // eslint-disable-next-line no-console
+          listen: { onClick: () => console.log('Listen') }
+        },
+        timestamp: date.toLocaleString()
+      });
+      setMessages(loadedMessages);
+      // make announcement to assistive devices that new message has loaded
+      setAnnouncement(`Message from Bot: API response goes here`);
+      setIsSendButtonDisabled(false);
+    }, 5000);
+  };
+
+  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;
+  };
+
+  const horizontalLogo = (
+    <Bullseye>
+      <Brand className="show-light" src={PFHorizontalLogoColor} alt="PatternFly" />
+      <Brand className="show-dark" src={PFHorizontalLogoReverse} alt="PatternFly" />
+    </Bullseye>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)}
+            id="fill-nav-toggle"
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="fill-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const skipToChatbot = (event: React.MouseEvent) => {
+    event.preventDefault();
+    if (historyRef.current) {
+      historyRef.current.focus();
+    }
+  };
+
+  const skipToContent = (
+    /* You can also add a SkipToContent for your main content here */
+    <SkipToContent href="#" onClick={skipToChatbot}>
+      Skip to chatbot
+    </SkipToContent>
+  );
+
+  return (
+    <Page skipToContent={skipToContent} masthead={masthead} sidebar={sidebar} isContentFilled>
+      <Chatbot displayMode={displayMode}>
+        <ChatbotConversationHistoryNav
+          displayMode={displayMode}
+          onDrawerToggle={() => {
+            setIsDrawerOpen(!isDrawerOpen);
+            setConversations(initialConversations);
+          }}
+          isDrawerOpen={isDrawerOpen}
+          setIsDrawerOpen={setIsDrawerOpen}
+          activeItemId="1"
+          // eslint-disable-next-line no-console
+          onSelectActiveItem={(e, selectedItem) => console.log(`Selected history item with id ${selectedItem}`)}
+          conversations={conversations}
+          onNewChat={() => {
+            setIsDrawerOpen(!isDrawerOpen);
+            setMessages([]);
+            setConversations(initialConversations);
+          }}
+          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={
+            <>
+              <ChatbotHeader>
+                <ChatbotHeaderMain>
+                  <ChatbotHeaderMenu
+                    ref={historyRef}
+                    aria-expanded={isDrawerOpen}
+                    onMenuToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+                  />
+                  <ChatbotHeaderTitle>{horizontalLogo}</ChatbotHeaderTitle>
+                </ChatbotHeaderMain>
+                <ChatbotHeaderActions>
+                  <ChatbotHeaderSelectorDropdown value={selectedModel} onSelect={onSelectModel}>
+                    <DropdownList>
+                      <DropdownItem value="Granite 7B" key="granite">
+                        Granite 7B
+                      </DropdownItem>
+                      <DropdownItem value="Llama 3.0" key="llama">
+                        Llama 3.0
+                      </DropdownItem>
+                      <DropdownItem value="Mistral 3B" key="mistral">
+                        Mistral 3B
+                      </DropdownItem>
+                    </DropdownList>
+                  </ChatbotHeaderSelectorDropdown>
+                </ChatbotHeaderActions>
+              </ChatbotHeader>
+              <ChatbotContent>
+                {/* Update the announcement prop on MessageBox whenever a new message is sent
+                 so that users of assistive devices receive sufficient context  */}
+                <MessageBox announcement={announcement}>
+                  <ChatbotWelcomePrompt
+                    title="Hello, Chatbot User"
+                    description="How may I help you today?"
+                    prompts={welcomePrompts}
+                  />
+                  {/* This code block enables scrolling to the top of the last message.
+                  You can instead choose to move the div with scrollToBottomRef on it below 
+                  the map of messages, so that users are forced to scroll to the bottom.
+                  If you are using streaming, you will want to take a different approach; 
+                  see: https://github.com/patternfly/chatbot/issues/201#issuecomment-2400725173 */}
+                  {messages.map((message, index) => {
+                    if (index === messages.length - 1) {
+                      return (
+                        <>
+                          <div ref={scrollToBottomRef}></div>
+                          <Message key={message.id} {...message} />
+                        </>
+                      );
+                    }
+                    return <Message key={message.id} {...message} />;
+                  })}
+                </MessageBox>
+              </ChatbotContent>
+              <ChatbotFooter>
+                <MessageBar
+                  onSendMessage={handleSend}
+                  hasMicrophoneButton
+                  isSendButtonDisabled={isSendButtonDisabled}
+                />
+                <ChatbotFootnote {...footnoteProps} />
+              </ChatbotFooter>
+            </>
+          }
+        ></ChatbotConversationHistoryNav>
+      </Chatbot>
+    </Page>
+  );
+};

package/patternfly-docs/pages/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Title, PageSection } from '@patternfly/react-core';
+
+const centerStyle = {
+  flexGrow: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+
+const IndexPage = () => {
+  return (
+    <PageSection variant="light" style={centerStyle}>
+      <div style={{ flex: 'none', textAlign: 'center' }}>
+        <Title size="4xl" headingLevel="h1">
+          My extension docs
+        </Title>
+        <Title size="2xl" headingLevel="h2">
+          {'Hi people!'}
+        </Title>
+        <p>Welcome to my extension docs.</p>
+      </div>
+    </PageSection>
+  );
+};
+
+export default IndexPage;

package/patternfly-docs/patternfly-docs.config.js

@@ -0,0 +1,8 @@
+// This module is shared between NodeJS and babelled ES5
+module.exports = {
+  sideNavItems: [{ section: 'PatternFly-AI' }],
+  topNavItems: [],
+  hasDarkThemeSwitcher: true,
+  hasRTLSwitcher: true,
+  port: 8006
+};

package/patternfly-docs/patternfly-docs.css.js

@@ -0,0 +1,9 @@
+// Patternfly
+import '@patternfly/patternfly/patternfly.css';
+// Patternfly utilities
+import '@patternfly/patternfly/patternfly-addons.css';
+// Global theme CSS
+import '@patternfly/documentation-framework/global.css';
+
+// Add your extension CSS below
+import '@patternfly/chatbot/dist/css/main.css';

package/patternfly-docs/patternfly-docs.routes.js

@@ -0,0 +1,12 @@
+// This module is shared between NodeJS and babelled ES5
+const isClient = Boolean(process.env.NODE_ENV);
+
+module.exports = {
+  '/': {
+    SyncComponent: isClient && require('./pages/index').default
+  },
+  '/404': {
+    SyncComponent: isClient && require('@patternfly/documentation-framework/pages/404/index').default,
+    title: '404 Error'
+  }
+};

package/patternfly-docs/patternfly-docs.source.js

@@ -0,0 +1,24 @@
+const path = require('path');
+
+module.exports = (sourceMD, sourceProps) => {
+  // Parse source content for props so that we can display them
+  const propsIgnore = ['**/*.test.tsx', '**/examples/*.tsx'];
+  const extensionPath = path.join(__dirname, '../src');
+  sourceProps(path.join(extensionPath, '/**/*.tsx'), propsIgnore);
+
+  // Parse md files
+  const contentBase = path.join(__dirname, './content');
+  sourceMD(path.join(contentBase, 'extensions/**/*.md'), 'PatternFly-AI');
+
+  /**
+    If you want to parse content from node_modules instead of providing a relative/absolute path,
+    you can do something similar to this:
+    const extensionPath = require
+      .resolve('@patternfly/react-log-viewer/package.json')
+      .replace('package.json', 'src');
+    sourceProps(path.join(extensionPath, '/**\/*.tsx'), propsIgnore);
+    sourceMD(path.join(extensionPath, '../patternfly-docs/**\/examples/*.md'), 'react');
+    sourceMD(path.join(extensionPath, '../patternfly-docs/**\/demos/*.md'), 'react-demos');
+    sourceMD(path.join(extensionPath, '../patternfly-docs/**\/design-guidelines/*.md'), 'design-guidelines');
+  */
+};

package/release.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  branches: [
+    'do-not-delete',
+    { name: 'main', channel: 'prerelease', prerelease: 'prerelease' },
+    { name: 'v5', channel: 'prerelease-5', range: '5.x' }
+  ],
+  analyzeCommits: {
+    preset: 'angular'
+  },
+  plugins: [
+    '@semantic-release/commit-analyzer',
+    '@semantic-release/release-notes-generator',
+    '@semantic-release/github',
+    '@semantic-release/npm'
+  ],
+  tagFormat: 'prerelease-v${version}',
+  dryRun: false
+};

package/src/AttachMenu/AttachMenu.scss

@@ -0,0 +1,62 @@
+.pf-chatbot__menu.pf-v6-c-menu {
+  --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+}
+
+.pf-chatbot__menu {
+  /* search input */
+  .pf-v6-c-text-input-group {
+    --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
+    --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-t--global--border--radius--pill);
+    --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-t--global--border--radius--pill);
+    --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-t--global--border--radius--pill);
+  }
+  .pf-v6-c-text-input-group__text-input:focus-visible {
+    border-radius: var(--pf-t--global--border--radius--pill);
+  }
+
+  .pf-v6-c-menu__group {
+    /* there is spacing between groups because of this normally, even if there's no title */
+    .pf-v6-c-menu__group-title {
+      height: 0;
+      --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+      --pf-v6-c-menu__group-title--PaddingBlockEnd: 0;
+      --pf-v6-c-menu__group-title--PaddingInlineStart: 0;
+      --pf-v6-c-menu__group-title--PaddingInlineEnd: 0;
+    }
+  }
+
+  /* spacing between icon and text in menu item */
+  .pf-v6-c-menu__item-main {
+    --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-v6-c-menu__list {
+    padding: 0rem var(--pf-t--global--spacer--md) 0rem var(--pf-t--global--spacer--md);
+  }
+
+  /* handles hover state, which uses a background */
+  .pf-v6-c-menu__list-item {
+    border-radius: var(--pf-t--global--border--radius--small);
+    overflow: hidden;
+  }
+
+  .pf-v6-c-menu__item {
+    padding-inline-start: var(--pf-t--global--spacer--md);
+    padding-inline-end: var(--pf-t--global--spacer--md);
+  }
+
+  .pf-v6-c-menu__item-icon {
+    display: flex;
+    justify-content: center;
+    width: 21px;
+  }
+
+  .pf-v6-c-menu__item-description {
+    font-weight: 500;
+  }
+
+  .pf-v6-c-divider {
+    padding: 0 var(--pf-t--global--spacer--md) 0 var(--pf-t--global--spacer--md);
+  }
+}

package/src/AttachMenu/AttachMenu.tsx

@@ -0,0 +1,81 @@
+// ============================================================================
+// Chatbot Attachment Menu
+// ============================================================================
+import React from 'react';
+
+// Import PatternFly components
+import {
+  MenuSearch,
+  MenuSearchInput,
+  SearchInput,
+  DropdownProps,
+  Dropdown,
+  DropdownToggleProps,
+  DropdownPopperProps
+} from '@patternfly/react-core';
+
+export interface ExtendedDropdownPopperProps extends DropdownPopperProps {
+  distance: string;
+}
+
+export interface AttachMenuProps extends DropdownProps {
+  /** Items in menu */
+  filteredItems: React.ReactNode;
+  /** A callback for when the input value changes. */
+  handleTextInputChange: (value: string) => void;
+  /** Flag to indicate if menu is opened. */
+  isOpen: boolean;
+  /** Additional properties to pass to the Popper */
+  popperProps?: ExtendedDropdownPopperProps;
+  /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
+  onOpenChange: (isOpen: boolean) => void;
+  /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  onOpenChangeKeys?: string[];
+  /** Function callback called when user selects item. */
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
+  /** Placeholder for search input */
+  searchInputPlaceholder?: string;
+  /** Aria label for search input */
+  searchInputAriaLabel?: string;
+  /** Toggle to be rendered */
+  toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
+}
+
+export const AttachMenu: React.FunctionComponent<AttachMenuProps> = ({
+  className,
+  filteredItems,
+  handleTextInputChange,
+  isOpen,
+  popperProps = undefined,
+  onOpenChange,
+  onOpenChangeKeys,
+  onSelect,
+  searchInputPlaceholder,
+  searchInputAriaLabel = 'Filter menu items',
+  toggle,
+  ...props
+}: AttachMenuProps) => (
+  <Dropdown
+    className={`pf-chatbot__menu ${className ?? ''}`}
+    isOpen={isOpen}
+    onOpenChange={(isOpen) => onOpenChange(isOpen)}
+    onOpenChangeKeys={onOpenChangeKeys ?? ['Esc']}
+    toggle={toggle}
+    popperProps={popperProps}
+    onSelect={onSelect}
+    {...props}
+  >
+    <MenuSearch>
+      <MenuSearchInput>
+        <SearchInput
+          aria-label={searchInputAriaLabel}
+          onChange={(_event, value) => handleTextInputChange(value)}
+          placeholder={searchInputPlaceholder}
+        />
+      </MenuSearchInput>
+    </MenuSearch>
+    {filteredItems}
+  </Dropdown>
+);
+
+export default AttachMenu;

package/src/AttachMenu/index.ts

@@ -0,0 +1,3 @@
+export { default } from './AttachMenu';
+
+export * from './AttachMenu';