@patternfly/chatbot 1.0.0

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

@@ -0,0 +1,202 @@
+// From Cursor, with aid
+import React, { FunctionComponent, useState, useRef, useEffect } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
+import {
+  Checkbox,
+  DropdownItem,
+  DropdownList,
+  Button,
+  TextInput,
+  Form,
+  FormGroup,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '@patternfly/react-core';
+
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  // Modal state
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingConversationId, setEditingConversationId] = useState<string | number | null>(null);
+  const [editingText, setEditingText] = useState('');
+
+  // Ref for the text input
+  const textInputRef = useRef<HTMLInputElement>(null);
+
+  // Focus the text input when modal opens
+  useEffect(() => {
+    if (isModalOpen && textInputRef.current) {
+      textInputRef.current.focus();
+      // Move cursor to the end of the text
+      const length = textInputRef.current.value.length;
+      textInputRef.current.setSelectionRange(length, length);
+    }
+  }, [isModalOpen]);
+
+  const findConversationAndGroup = (conversations: { [key: string]: Conversation[] }, itemId: string | number) => {
+    for (const [groupKey, conversationList] of Object.entries(conversations)) {
+      const conversationIndex = conversationList.findIndex((conv) => conv.id === itemId);
+      if (conversationIndex !== -1) {
+        return { groupKey, conversationIndex, conversation: conversationList[conversationIndex] };
+      }
+    }
+    return null;
+  };
+
+  const onRenameClick = (itemId: string | number) => {
+    const result = findConversationAndGroup(conversations, itemId);
+    if (result) {
+      setEditingConversationId(itemId);
+      setEditingText(result.conversation.text);
+      setIsModalOpen(true);
+    }
+  };
+
+  const handleModalSave = () => {
+    if (editingConversationId) {
+      setConversations((prevConversations) => {
+        const result = findConversationAndGroup(prevConversations, editingConversationId);
+        if (!result) {
+          return prevConversations;
+        }
+
+        const { groupKey, conversationIndex } = result;
+        const newConversations = { ...prevConversations };
+        const newGroup = [...newConversations[groupKey]];
+
+        newGroup[conversationIndex] = { ...newGroup[conversationIndex], text: editingText };
+        newConversations[groupKey] = newGroup;
+
+        return newConversations;
+      });
+    }
+    handleModalClose();
+  };
+
+  const handleModalCancel = () => {
+    handleModalClose();
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+    setEditingConversationId(null);
+    setEditingText('');
+  };
+
+  const handleTextInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleModalSave();
+    }
+  };
+
+  const renderMenuItems = (itemId: string | number) => [
+    <DropdownList key={`list-${itemId}`}>
+      <DropdownItem value="Download" id="Download">
+        Download
+      </DropdownItem>
+      <DropdownItem value="Rename" id="Rename" onClick={() => onRenameClick(itemId)}>
+        Rename
+      </DropdownItem>
+      <DropdownItem value="Archive" id="Archive">
+        Archive
+      </DropdownItem>
+      <DropdownItem value="Delete" id="Delete">
+        Delete
+      </DropdownItem>
+    </DropdownList>
+  ];
+
+  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' }
+    ]
+  };
+
+  const [conversations, setConversations] = useState(initialConversations);
+
+  // Create conversations with menu items dynamically
+  const conversationsWithMenuItems = () => {
+    const newConversations = { ...conversations };
+    Object.keys(newConversations).forEach((groupKey) => {
+      newConversations[groupKey] = newConversations[groupKey].map((conv) => ({
+        ...conv,
+        menuItems: renderMenuItems(conv.id)
+      }));
+    });
+    return newConversations;
+  };
+
+  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={conversationsWithMenuItems()}
+        drawerContent={<div>Drawer content</div>}
+      />
+
+      <ChatbotModal displayMode={displayMode} isOpen={isModalOpen} onClose={handleModalClose}>
+        <ModalHeader title="Rename Conversation" />
+        <ModalBody>
+          <Form>
+            <FormGroup label="Conversation Name" fieldId="conversation-name" isRequired>
+              <TextInput
+                isRequired
+                ref={textInputRef}
+                value={editingText}
+                onChange={(_, value) => setEditingText(value)}
+                onKeyDown={handleTextInputKeyDown}
+                id="conversation-name"
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button key="save" variant="primary" onClick={handleModalSave}>
+            Save
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalCancel}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </ChatbotModal>
+    </>
+  );
+};

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

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import { ChatbotFooter, ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+
+export const ChatbotFooterExample: FunctionComponent = () => {
+  const handleSend = (message) => alert(message);
+
+  return (
+    <ChatbotFooter>
+      <MessageBar onSendMessage={handleSend} hasMicrophoneButton hasAttachButton />
+      <ChatbotFootnote label="Always review AI-generated content prior to use." />
+    </ChatbotFooter>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { FunctionComponent } from 'react';
+import { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
+
+export const FootnoteDemo: FunctionComponent = () => (
+  <>
+    <h4>Static text</h4>
+    <ChatbotFootnote label="Always review AI-generated content prior to use." />
+    <br />
+    <h4>With popover</h4>
+    <ChatbotFootnote
+      label="Always review AI-generated content prior to use."
+      popover={{
+        title: 'Verify information',
+        description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
+        bannerImage: {
+          src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
+          alt: 'Example image for footnote popover'
+        },
+        cta: {
+          label: 'Dismiss',
+          onClick: () => {
+            alert('Do something!');
+          }
+        },
+        link: {
+          label: 'View AI policy',
+          url: 'https://www.redhat.com/'
+        }
+      }}
+    />
+  </>
+);

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

@@ -0,0 +1,200 @@
+import { FunctionComponent, MouseEvent, useState } from 'react';
+import {
+  Brand,
+  Bullseye,
+  Checkbox,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  FormGroup,
+  Stack,
+  Title
+} from '@patternfly/react-core';
+import {
+  ChatbotHeader,
+  ChatbotHeaderMain,
+  ChatbotHeaderMenu,
+  ChatbotHeaderActions,
+  ChatbotHeaderTitle,
+  ChatbotHeaderOptionsDropdown,
+  ChatbotHeaderSelectorDropdown,
+  ChatbotHeaderNewChatButton
+} 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: FunctionComponent = () => {
+  const [selectedModel, setSelectedModel] = useState('Granite Code 7B');
+  const [showAll, setShowAll] = useState<boolean>(true);
+  const [showMenu, setShowMenu] = useState<boolean>(true);
+  const [showNewChatButton, setShowNewChatButton] = useState<boolean>(true);
+  const [showLogo, setShowLogo] = useState<boolean>(false);
+  const [showCenteredLogo, setShowCenteredLogo] = useState<boolean>(true);
+  const [showSelectorDropdown, setShowSelectorDropdown] = useState<boolean>(true);
+  const [showOptionsDropdown, setShowOptionsDropdown] = useState<boolean>(true);
+
+  const onSelectModel = (_event: 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 && showNewChatButton && showCenteredLogo && showSelectorDropdown && showOptionsDropdown}
+          onChange={() => {
+            setShowMenu(true);
+            setShowNewChatButton(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 chat history drawer"
+          id="menu"
+        />
+        <Checkbox
+          isChecked={showNewChatButton}
+          onChange={() => {
+            setShowNewChatButton(!showNewChatButton);
+            showAll && setShowAll(!showAll);
+          }}
+          name="basic-inline-radio"
+          label="With new chat button"
+          id="new-chat-button"
+        />
+        <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 settings dropdown"
+          id="options-dropdown"
+        />
+      </FormGroup>
+
+      <ChatbotHeader>
+        {(showMenu || showNewChatButton || showLogo || showCenteredLogo) && (
+          <ChatbotHeaderMain>
+            {showMenu && <ChatbotHeaderMenu onMenuToggle={() => alert('Menu toggle clicked')} />}
+            {showNewChatButton && <ChatbotHeaderNewChatButton onClick={() => alert('New chat button 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,217 @@
+import { useState, useEffect, useRef, FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox, EmptyStateStatus, Spinner } from '@patternfly/react-core';
+import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
+
+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' }
+  ]
+};
+
+const ERROR = {
+  bodyText: (
+    <>
+      To try again, check your connection and reload this page. If the issue persists,{' '}
+      <a href="">contact the support team</a>.
+    </>
+  ),
+  buttonText: 'Reload',
+  buttonIcon: <Spinner size="sm" />,
+  hasButton: true,
+  titleText: 'Could not load chat history',
+  status: EmptyStateStatus.danger,
+  onClick: () => alert('Clicked Reload')
+};
+
+const NO_RESULTS = {
+  bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
+  titleText: 'No results found',
+  icon: SearchIcon
+};
+
+const EMPTY_STATE = {
+  bodyText: 'Access timely assistance by starting a conversation with an AI model.',
+  titleText: 'Start a new chat',
+  icon: OutlinedCommentsIcon
+};
+
+export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isButtonOrderReversed, setIsButtonOrderReversed] = useState(false);
+  const [isNewChatButtonDisabled, setIsNewChatButtonDisabled] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[] | { [key: string]: Conversation[] }>(
+    initialConversations
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isEmpty, setIsEmpty] = useState(false);
+  const [hasNoResults, setHasNoResults] = useState(false);
+  const [announcement, setAnnouncement] = useState('');
+  const [debouncedAnnouncement, setDebouncedAnnouncement] = useState('');
+  const announcementTimeoutRef = useRef<NodeJS.Timeout>();
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  // Debounce announcement updates to prevent screen reader overload
+  useEffect(() => {
+    if (announcementTimeoutRef.current) {
+      clearTimeout(announcementTimeoutRef.current);
+    }
+
+    announcementTimeoutRef.current = setTimeout(() => {
+      setDebouncedAnnouncement(announcement);
+    }, 500);
+
+    return () => {
+      if (announcementTimeoutRef.current) {
+        clearTimeout(announcementTimeoutRef.current);
+      }
+    };
+  }, [announcement]);
+
+  const findMatchingItems = (targetValue: string) => {
+    const 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) {
+      setHasNoResults(true);
+    } else {
+      setHasNoResults(false);
+    }
+    return filteredConversations;
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => {
+          setIsOpen(!isOpen);
+          setConversations(initialConversations);
+        }}
+        id="drawer-visible"
+        name="drawer-visible"
+      />
+      <Checkbox
+        label="Reverse action buttons"
+        isChecked={isButtonOrderReversed}
+        onChange={() => setIsButtonOrderReversed(!isButtonOrderReversed)}
+        id="drawer-actions-visible"
+        name="drawer-actions-visible"
+      ></Checkbox>
+      <Checkbox
+        label="Disable new chat button"
+        isChecked={isNewChatButtonDisabled}
+        onChange={() => setIsNewChatButtonDisabled(!isNewChatButtonDisabled)}
+        id="drawer-actions-disabled"
+        name="drawer-actions-disabled"
+      ></Checkbox>
+      <Checkbox
+        label="Show loading state"
+        isChecked={isLoading}
+        onChange={() => setIsLoading(!isLoading)}
+        id="drawer-is-loading"
+        name="drawer-is-loading"
+      ></Checkbox>
+      <Checkbox
+        label="Show error state"
+        isChecked={hasError}
+        onChange={() => setHasError(!hasError)}
+        id="drawer-has-error"
+        name="drawer-has-error"
+      ></Checkbox>
+      <Checkbox
+        label="Show empty state"
+        isChecked={isEmpty}
+        onChange={() => setIsEmpty(!isEmpty)}
+        id="drawer-is-empty"
+        name="drawer-is-empty"
+      ></Checkbox>
+      <Checkbox
+        label="Show no results state"
+        isChecked={hasNoResults}
+        onChange={() => setHasNoResults(!hasNoResults)}
+        id="drawer-has-no-results"
+        name="drawer-has-no-results"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-compact"
+        name="drawer-compact"
+      ></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}
+        newChatButtonProps={{ isDisabled: isNewChatButtonDisabled }}
+        onNewChat={() => {
+          setIsOpen(!isOpen);
+        }}
+        reverseButtonOrder={isButtonOrderReversed}
+        handleTextInputChange={(value: string) => {
+          if (value === '') {
+            setConversations(initialConversations);
+            setAnnouncement('');
+            setDebouncedAnnouncement('');
+            setHasNoResults(false);
+          } else {
+            // this is where you would perform search on the items in the drawer
+            // and update the state
+            const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
+            const totalCount = Object.values(newConversations).flat().length;
+            const newAnnouncement =
+              totalCount === 1
+                ? `${totalCount} conversation matches "${value}"`
+                : `${totalCount} conversations match "${value}"`;
+            setAnnouncement(newAnnouncement);
+            setConversations(newConversations);
+          }
+        }}
+        searchInputScreenReaderText={debouncedAnnouncement}
+        drawerContent={<div>Drawer content</div>}
+        isLoading={isLoading}
+        errorState={hasError ? ERROR : undefined}
+        emptyState={isEmpty ? EMPTY_STATE : undefined}
+        noResultsState={hasNoResults ? NO_RESULTS : undefined}
+        isCompact={isCompact}
+      />
+    </>
+  );
+};