@patternfly/chatbot 2.1.0-prerelease.17

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

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import { Radio } from '@patternfly/react-core/dist/dynamic/Radio';
+import { Checkbox } from '@patternfly/react-core/dist/dynamic/Checkbox';
+import { FormGroup } from '@patternfly/react-core/dist/dynamic/FormGroup';
+import { Stack } from '@patternfly/react-core/dist/dynamic/Stack';
+
+export const ChatbotContainerDemo: React.FunctionComponent = () => {
+  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
+  const [isVisible, setIsVisible] = React.useState(true);
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          padding: 'var(--pf-t--global--spacer--lg)',
+          zIndex: '601',
+          boxShadow: 'var(--pf-t--global--box-shadow--lg)'
+        }}
+      >
+        <Stack hasGutter>
+          <FormGroup role="radiogroup" isInline fieldId="displayModeRadios" label="Display mode">
+            <Radio
+              isChecked={displayMode === ChatbotDisplayMode.default}
+              onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
+              name="basic-inline-radio"
+              label="Overlay / default"
+              id="default"
+            />
+            <Radio
+              isChecked={displayMode === ChatbotDisplayMode.docked}
+              onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
+              name="basic-inline-radio"
+              label="Docked"
+              id="docked"
+            />
+            <Radio
+              isChecked={displayMode === ChatbotDisplayMode.fullscreen}
+              onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
+              name="basic-inline-radio"
+              label="Fullscreen"
+              id="fullscreen"
+            />
+            <Radio
+              isChecked={displayMode === ChatbotDisplayMode.embedded}
+              onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
+              name="basic-inline-radio"
+              label="Embedded"
+              id="embedded"
+            />
+          </FormGroup>
+          <Checkbox
+            label="Display chatbot container"
+            isChecked={isVisible}
+            onChange={() => setIsVisible(!isVisible)}
+            id="container-visible"
+            name="container-visible"
+          />
+        </Stack>
+      </div>
+      <Chatbot displayMode={displayMode} isVisible={isVisible}></Chatbot>
+    </>
+  );
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ChatbotFooter, ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+
+export const ChatbotFooterExample: React.FunctionComponent = () => {
+  const handleSend = (message) => alert(message);
+
+  return (
+    <ChatbotFooter>
+      <MessageBar onSendMessage={handleSend} hasMicrophoneButton hasAttachButton />
+      <ChatbotFootnote label="Lightspeed uses AI. Check for mistakes." />
+    </ChatbotFooter>
+  );
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+
+export const FootnoteDemo: React.FunctionComponent = () => (
+  <ChatbotFootnote
+    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/'
+      }
+    }}
+  />
+);

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

@@ -0,0 +1,189 @@
+import React from 'react';
+import {
+  Brand,
+  Bullseye,
+  Checkbox,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  FormGroup,
+  Stack,
+  Title
+} from '@patternfly/react-core';
+import {
+  ChatbotHeader,
+  ChatbotHeaderMain,
+  ChatbotHeaderMenu,
+  ChatbotHeaderActions,
+  ChatbotHeaderTitle,
+  ChatbotHeaderOptionsDropdown,
+  ChatbotHeaderSelectorDropdown
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
+import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
+import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
+
+import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
+import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
+
+export const BasicDemo: React.FunctionComponent = () => {
+  const [selectedModel, setSelectedModel] = React.useState('Granite Code 7B');
+  const [showAll, setShowAll] = React.useState<boolean>(true);
+  const [showMenu, setShowMenu] = React.useState<boolean>(true);
+  const [showLogo, setShowLogo] = React.useState<boolean>(false);
+  const [showCenteredLogo, setShowCenteredLogo] = React.useState<boolean>(true);
+  const [showSelectorDropdown, setShowSelectorDropdown] = React.useState<boolean>(true);
+  const [showOptionsDropdown, setShowOptionsDropdown] = React.useState<boolean>(true);
+
+  const onSelectModel = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    setSelectedModel(value as string);
+  };
+
+  const title = (
+    <>
+      <div className="show-light">
+        <Brand src={PFHorizontalLogoColor} alt="PatternFly" style={{ marginRight: '10px' }} />
+      </div>
+      <div className="show-dark">
+        <Brand src={PFHorizontalLogoReverse} alt="PatternFly" style={{ marginRight: '10px' }} />
+      </div>
+      <Title headingLevel="h1" size="2xl">
+        ChatBot Extension
+      </Title>
+    </>
+  );
+
+  return (
+    <Stack hasGutter>
+      <FormGroup role="radiogroup" isInline fieldId="header-variant-form-radio-group" label="Variant">
+        <Checkbox
+          isChecked={showMenu && showCenteredLogo && showSelectorDropdown && showOptionsDropdown}
+          onChange={() => {
+            setShowMenu(true);
+            setShowCenteredLogo(true);
+            setShowSelectorDropdown(true);
+            setShowOptionsDropdown(true);
+            showLogo && setShowLogo(false);
+          }}
+          name="basic-inline-radio"
+          label="All"
+          id="all"
+        />
+        <Checkbox
+          isChecked={showMenu}
+          onChange={() => {
+            setShowMenu(!showMenu);
+            showAll && setShowAll(!showAll);
+          }}
+          name="basic-inline-radio"
+          label="With menu"
+          id="menu"
+        />
+        <Checkbox
+          isChecked={showLogo}
+          onChange={() => {
+            setShowLogo(!showLogo);
+            showCenteredLogo && setShowCenteredLogo(!showCenteredLogo);
+          }}
+          name="basic-inline-radio"
+          label="With left-aligned logo"
+          id="logo"
+        />
+        <Checkbox
+          isChecked={showCenteredLogo}
+          onChange={() => {
+            setShowCenteredLogo(!showCenteredLogo);
+            showLogo && setShowLogo(!showLogo);
+            showAll && setShowAll(!showAll);
+          }}
+          name="basic-inline-radio"
+          label="With centered logo"
+          id="logo-centered"
+        />
+        <Checkbox
+          isChecked={showSelectorDropdown}
+          onChange={() => {
+            setShowSelectorDropdown(!showSelectorDropdown);
+            showAll && setShowAll(!showAll);
+          }}
+          name="basic-inline-radio"
+          label="With selector dropdown"
+          id="selector-dropdown"
+        />
+        <Checkbox
+          isChecked={showOptionsDropdown}
+          onChange={() => {
+            setShowOptionsDropdown(!showOptionsDropdown);
+            showAll && setShowAll(!showAll);
+          }}
+          name="basic-inline-radio"
+          label="With options dropdown"
+          id="options-dropdown"
+        />
+      </FormGroup>
+
+      <ChatbotHeader>
+        {(showMenu || showLogo || showCenteredLogo) && (
+          <ChatbotHeaderMain>
+            {showMenu && <ChatbotHeaderMenu onMenuToggle={() => alert('Menu toggle clicked')} />}
+            {(showLogo || showCenteredLogo) && (
+              <ChatbotHeaderTitle>{showCenteredLogo ? <Bullseye>{title}</Bullseye> : title}</ChatbotHeaderTitle>
+            )}
+          </ChatbotHeaderMain>
+        )}
+        {(showSelectorDropdown || showOptionsDropdown) && (
+          <ChatbotHeaderActions>
+            {showSelectorDropdown && (
+              <ChatbotHeaderSelectorDropdown value={selectedModel} onSelect={onSelectModel}>
+                <DropdownList>
+                  <DropdownItem value="Granite Code 7B" key="granite">
+                    Granite Code 7B
+                  </DropdownItem>
+                  <DropdownItem value="Llama 3.0" key="llama">
+                    Llama 3.0
+                  </DropdownItem>
+                  <DropdownItem value="Mistral 3B" key="mistral">
+                    Mistral 3B
+                  </DropdownItem>
+                </DropdownList>
+              </ChatbotHeaderSelectorDropdown>
+            )}
+            {showOptionsDropdown && (
+              <ChatbotHeaderOptionsDropdown>
+                <DropdownGroup label="Display mode">
+                  <DropdownList>
+                    <DropdownItem
+                      value={ChatbotDisplayMode.default}
+                      key="switchDisplayOverlay"
+                      icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                    >
+                      <span>Overlay</span>
+                    </DropdownItem>
+                    <DropdownItem
+                      value={ChatbotDisplayMode.docked}
+                      key="switchDisplayDock"
+                      icon={<OpenDrawerRightIcon aria-hidden />}
+                    >
+                      <span>Dock to window</span>
+                    </DropdownItem>
+                    <DropdownItem
+                      value={ChatbotDisplayMode.fullscreen}
+                      key="switchDisplayFullscreen"
+                      icon={<ExpandIcon aria-hidden />}
+                    >
+                      <span>Fullscreen</span>
+                    </DropdownItem>
+                  </DropdownList>
+                </DropdownGroup>
+              </ChatbotHeaderOptionsDropdown>
+            )}
+          </ChatbotHeaderActions>
+        )}
+      </ChatbotHeader>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,93 @@
+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 ChatbotHeaderTitleDemo: 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>}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
+
+const menuItems = [
+  <DropdownList key="list-1">
+    <DropdownItem value="Share" id="Share">
+      Share
+    </DropdownItem>
+    <DropdownItem value="Rename" id="Rename">
+      Rename
+    </DropdownItem>
+    <DropdownItem value="Archive" id="Archive">
+      Archive
+    </DropdownItem>
+    <DropdownItem value="Delete" id="Delete">
+      Delete
+    </DropdownItem>
+  </DropdownList>
+];
+
+const conversations: { [key: string]: Conversation[] } = {
+  Today: [{ id: '1', text: 'Red Hat products and services', menuItems }],
+  'This month': [
+    {
+      id: '2',
+      text: 'Enterprise Linux installation and setup',
+      menuItems
+    },
+    { id: '3', text: 'Troubleshoot system crash', menuItems }
+  ],
+  March: [
+    { id: '4', text: 'Ansible security and updates', menuItems },
+    { id: '5', text: 'Red Hat certification', menuItems },
+    { id: '6', text: 'Lightspeed user documentation', menuItems }
+  ],
+  February: [
+    { id: '7', text: 'Crashing pod assistance', menuItems },
+    { id: '8', text: 'OpenShift AI pipelines', menuItems },
+    { id: '9', text: 'Updating subscription plan', menuItems },
+    { id: '10', text: 'Red Hat licensing options', menuItems }
+  ],
+  January: [
+    { id: '11', text: 'RHEL system performance', menuItems },
+    { id: '12', text: 'Manage user accounts', menuItems }
+  ]
+};
+
+export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isDrawerOpen}
+        onChange={() => setIsDrawerOpen(!isDrawerOpen)}
+        id="drawer-actions-visible"
+        name="drawer-actions-visible"
+      ></Checkbox>
+      <ChatbotConversationHistoryNav
+        displayMode={displayMode}
+        onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        conversations={conversations}
+        drawerContent={<div>Drawer content</div>}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FormGroup, Radio } from '@patternfly/react-core';
+import { ChatbotHeaderTitle } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+
+export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
+  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
+
+  return (
+    <>
+      <FormGroup role="radiogroup" isInline fieldId="header-title-variants-form-radio-group" label="Display mode">
+        <Radio
+          isChecked={displayMode === ChatbotDisplayMode.default}
+          onChange={() => setDisplayMode(ChatbotDisplayMode.default)}
+          name="basic-inline-radio"
+          label="Default"
+          id="default"
+        />
+        <Radio
+          isChecked={displayMode === ChatbotDisplayMode.embedded}
+          onChange={() => setDisplayMode(ChatbotDisplayMode.embedded)}
+          name="basic-inline-radio"
+          label="Embedded"
+          id="embedded"
+        />
+        <Radio
+          isChecked={displayMode === ChatbotDisplayMode.docked}
+          onChange={() => setDisplayMode(ChatbotDisplayMode.docked)}
+          name="basic-inline-radio"
+          label="Docked"
+          id="docked"
+        />
+        <Radio
+          isChecked={displayMode === ChatbotDisplayMode.fullscreen}
+          onChange={() => setDisplayMode(ChatbotDisplayMode.fullscreen)}
+          name="basic-inline-radio"
+          label="Full screen"
+          id="full-screen"
+        />
+      </FormGroup>
+      <ChatbotHeaderTitle
+        displayMode={displayMode}
+        showOnEmbedded="Embedded"
+        showOnDocked="Docked"
+        showOnFullScreen="Full screen"
+        showOnDefault="Default"
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+
+export const ChatbotMessageBarExample: React.FunctionComponent = () => {
+  const handleSend = (message) => alert(message);
+
+  return <MessageBar onSendMessage={handleSend} hasMicrophoneButton />;
+};

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
+import { Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import { useDropzone } from 'react-dropzone';
+
+export const ChatbotMessageBarDefaultAttachExample: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [userFacingMenuItems, setUserFacingMenuItems] = React.useState<React.ReactNode>([]);
+
+  const handleSend = (message) => alert(message);
+  const { open, getInputProps } = useDropzone({
+    multiple: true,
+    // eslint-disable-next-line no-console
+    onDropAccepted: () => console.log('fileUploaded')
+  });
+
+  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)}
+      </>
+    );
+  };
+
+  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 />} onClick={open}>
+        Upload from computer
+      </DropdownItem>
+    </DropdownList>
+  ];
+
+  return (
+    <>
+      {/* this is required for react-dropzone to work in Safari and Firefox */}
+      <input {...getInputProps()} />
+      <MessageBar
+        onSendMessage={handleSend}
+        attachMenuProps={{
+          isAttachMenuOpen: isOpen,
+          setIsAttachMenuOpen: setIsOpen,
+          attachMenuItems: userFacingMenuItems,
+          onAttachMenuSelect: (_ev, value) => {
+            // eslint-disable-next-line no-console
+            console.log('selected', value);
+            setIsOpen(false);
+          },
+          attachMenuInputPlaceholder: 'Search cluster resources...',
+          onAttachMenuInputChange: onTextChange,
+          onAttachMenuToggleClick: onToggleClick
+        }}
+      />
+    </>
+  );
+};