@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.1

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

@@ -2,38 +2,48 @@ import React from 'react';
 
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
-import { AlertActionLink, Form, FormGroup, Radio } from '@patternfly/react-core';
+import {
+  AlertActionLink,
+  MenuToggle,
+  MenuToggleElement,
+  Select,
+  SelectList,
+  SelectOption
+} from '@patternfly/react-core';
 
 export const UserMessageExample: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState('code');
+  const [variant, setVariant] = React.useState<string>('Code');
+  const [isEditable, setIsEditable] = React.useState<boolean>(true);
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<string>('Message content type');
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
-      case 'code':
+      case 'Code':
         return code;
-      case 'inlineCode':
+      case 'Inline code':
         return inlineCode;
-      case 'heading':
+      case 'Heading':
         return heading;
-      case 'emphasis':
+      case 'Emphasis':
         return emphasis;
-      case 'blockQuotes':
+      case 'Block quotes':
         return blockQuotes;
-      case 'orderedList':
+      case 'Ordered list':
         return orderedList;
-      case 'unorderedList':
+      case 'Unordered list':
         return unorderedList;
-      case 'moreComplexList':
+      case 'More complex list':
         return moreComplexList;
-      case 'link':
+      case 'Link':
         return link;
-      case 'table':
+      case 'Table':
         return table;
-      case 'image':
+      case 'Image':
         return image;
       default:
-        return;
+        return '';
     }
   };
   /* eslint-enable indent */
@@ -155,6 +165,32 @@ _Italic text, formatted with single underscores_
     )
   };
 
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setVariant(value);
+    setSelected(value as string);
+    setIsOpen(false);
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      className="pf-v6-u-mb-md"
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
   return (
     <>
       <Message
@@ -171,103 +207,43 @@ _Italic text, formatted with single underscores_
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />
-      <Form>
-        <FormGroup role="radiogroup" isInline fieldId="user-message-type" label="Message content type">
-          <Radio
-            isChecked={variant === 'code'}
-            onChange={() => setVariant('code')}
-            name="user-message-type"
-            label="Code"
-            id="user-code"
-          />
-          <Radio
-            isChecked={variant === 'inlineCode'}
-            onChange={() => setVariant('inlineCode')}
-            name="user-message-type"
-            label="Inline code"
-            id="user-inline-code"
-          />
-          <Radio
-            isChecked={variant === 'heading'}
-            onChange={() => setVariant('heading')}
-            name="user-message-type"
-            label="Heading"
-            id="user-heading"
-          />
-          <Radio
-            isChecked={variant === 'blockQuotes'}
-            onChange={() => setVariant('blockQuotes')}
-            name="user-message-type"
-            label="Block quote"
-            id="user-block-quotes"
-          />
-          <Radio
-            isChecked={variant === 'emphasis'}
-            onChange={() => setVariant('emphasis')}
-            name="user-message-type"
-            label="Emphasis"
-            id="user-emphasis"
-          />
-          <Radio
-            isChecked={variant === 'link'}
-            onChange={() => setVariant('link')}
-            name="user-message-type"
-            label="Link"
-            id="user-link"
-          />
-          <Radio
-            isChecked={variant === 'unorderedList'}
-            onChange={() => setVariant('unorderedList')}
-            name="user-message-type"
-            label="Unordered list"
-            id="user-unordered-list"
-          />
-          <Radio
-            isChecked={variant === 'orderedList'}
-            onChange={() => setVariant('orderedList')}
-            name="user-message-type"
-            label="Ordered list"
-            id="user-ordered-list"
-          />
-          <Radio
-            isChecked={variant === 'moreComplexList'}
-            onChange={() => setVariant('moreComplexList')}
-            name="user-message-type"
-            label="More complex list"
-            id="user-more-complex-list"
-          />
-          <Radio
-            isChecked={variant === 'table'}
-            onChange={() => setVariant('table')}
-            name="user-message-type"
-            label="Table"
-            id="user-table"
-          />
-          <Radio
-            isChecked={variant === 'image'}
-            onChange={() => setVariant('image')}
-            name="user-message-type"
-            label="Image"
-            id="user-image"
-          />
-          <Radio
-            isChecked={variant === 'error'}
-            onChange={() => setVariant('error')}
-            name="user-message-error"
-            label="Error"
-            id="user-error"
-          />
-        </FormGroup>
-      </Form>
+      <Select
+        id="single-select"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Inline code">Inline code</SelectOption>
+          <SelectOption value="Heading">Heading</SelectOption>
+          <SelectOption value="Block quotes">Block quotes</SelectOption>
+          <SelectOption value="Emphasis">Emphasis</SelectOption>
+          <SelectOption value="Link">Link</SelectOption>
+          <SelectOption value="Unordered list">Unordered list</SelectOption>
+          <SelectOption value="Ordered list">Ordered list</SelectOption>
+          <SelectOption value="More complex list">More complex list</SelectOption>
+          <SelectOption value="Table">Table</SelectOption>
+          <SelectOption value="Image">Image</SelectOption>
+          <SelectOption value="Error">Error</SelectOption>
+          <SelectOption value="Editable">Editable</SelectOption>
+        </SelectList>
+      </Select>
       <Message
         name="User"
         role="user"
         content={renderContent()}
         avatar={userAvatar}
         tableProps={
-          variant === 'table' ? { 'aria-label': 'App information and user roles for user messages' } : undefined
+          variant === 'Table' ? { 'aria-label': 'App information and user roles for user messages' } : undefined
         }
-        error={variant === 'error' ? error : undefined}
+        isEditable={variant === 'Editable' ? isEditable : false}
+        error={variant === 'Error' ? error : undefined}
+        onEditUpdate={() => setIsEditable(false)}
+        onEditCancel={() => setIsEditable(false)}
       />
     </>
   );

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

@@ -4,6 +4,7 @@ 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' }],
@@ -46,6 +47,18 @@ const ERROR = {
   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: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(true);
   const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
@@ -54,10 +67,12 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
   );
   const [isLoading, setIsLoading] = React.useState(false);
   const [hasError, setHasError] = React.useState(false);
+  const [isEmpty, setIsEmpty] = React.useState(false);
+  const [hasNoResults, setHasNoResults] = React.useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {
-    let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
+    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;
@@ -67,7 +82,9 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
 
     // append message if no items are found
     if (Object.keys(filteredConversations).length === 0) {
-      filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
+      setHasNoResults(true);
+    } else {
+      setHasNoResults(false);
     }
     return filteredConversations;
   };
@@ -105,6 +122,20 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         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>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
         onDrawerToggle={() => setIsOpen(!isOpen)}
@@ -129,6 +160,8 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         drawerContent={<div>Drawer content</div>}
         isLoading={isLoading}
         errorState={hasError ? ERROR : undefined}
+        emptyState={isEmpty ? EMPTY_STATE : undefined}
+        noResultsState={hasNoResults ? NO_RESULTS : undefined}
       />
     </>
   );

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

@@ -4,6 +4,7 @@ import ChatbotConversationHistoryNav, {
   Conversation
 } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { Checkbox } from '@patternfly/react-core';
+import { SearchIcon } from '@patternfly/react-icons';
 
 const initialConversations: { [key: string]: Conversation[] } = {
   Today: [{ id: '1', text: 'Red Hat products and services' }],
@@ -31,15 +32,22 @@ const initialConversations: { [key: string]: Conversation[] } = {
   ]
 };
 
+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
+};
+
 export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(true);
   const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
+  const [showNoResults, setShowNoResults] = React.useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {
-    let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
+    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;
@@ -49,7 +57,9 @@ export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
 
     // append message if no items are found
     if (Object.keys(filteredConversations).length === 0) {
-      filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
+      setShowNoResults(true);
+    } else {
+      setShowNoResults(false);
     }
     return filteredConversations;
   };
@@ -88,6 +98,7 @@ export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
         }}
         drawerContent={<div>Drawer content</div>}
         drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}
+        emptyState={showNoResults ? NO_RESULTS : undefined}
       />
     </>
   );

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

@@ -83,7 +83,7 @@ import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
-import { CloseIcon } from '@patternfly/react-icons';
+import { CloseIcon, SearchIcon, OutlinedCommentsIcon } from '@patternfly/react-icons';
 
 ## Structure
 

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

@@ -34,6 +34,8 @@ import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { getTrackingProviders } from '@patternfly/chatbot/dist/dynamic/tracking';
 import { InitProps } from '@patternfly/chatbot/dist/dynamic/tracking';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
   label: 'ChatBot uses AI. Check for mistakes.',
@@ -98,17 +100,18 @@ export default MessageLoading;
 const date = new Date();
 
 const initProps: InitProps = {
+  verbose: false,
   segmentKey: 'TODO-key', // TODO add your key here
   posthogKey: 'TODO-key',
   umamiKey: 'TODO-key',
-  umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
+  umamiHostUrl: 'http://localhost:3000', // TODO where is your Umami installation?
   console: true,
   something: 'test'
 };
 
 const tracking = getTrackingProviders(initProps);
-tracking.identify('user-123'); // TODO get real user id
-tracking.trackPageView(window.document.documentURI);
+tracking.identify('user-123', { superUser: true }); // TODO get real user id + properties
+tracking.trackPageView(window.location.href);
 
 const actionEventName = 'MessageAction';
 const initialMessages: MessageProps[] = [

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

@@ -29,6 +29,8 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 interface ModalData {
   code: string;

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

@@ -16,6 +16,8 @@ import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '
 import { useDropzone } from 'react-dropzone';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 const initialMenuItems = [
   <DropdownList key="list-1">

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

@@ -42,6 +42,8 @@ import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import { BarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
   label: 'ChatBot uses AI. Check for mistakes.',

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

@@ -40,6 +40,8 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import { BarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 const footnoteProps = {
   label: 'ChatBot uses AI. Check for mistakes.',

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

@@ -23,6 +23,8 @@ import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
 import { BarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled }) => {
   const [messages, setMessages] = React.useState<MessageProps[]>([]);
@@ -36,71 +38,74 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
     return id.toString();
   };
 
-  const handleSend = (input: string) => {
-    const date = new Date();
-    const newMessages: MessageProps[] = [];
-    messages.forEach((message) => newMessages.push(message));
-    newMessages.push({
-      avatar: userAvatar,
-      avatarProps: { isBordered: true },
-      id: generateId(),
-      name: 'You',
-      role: 'user',
-      content: input,
-      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
-    });
-    newMessages.push({
-      avatar: patternflyAvatar,
-      id: generateId(),
-      name,
-      role: 'bot',
-      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
-      isLoading: true
-    });
-    setMessages(newMessages);
-    // make announcement to assistive devices that new messages have been added
-    setAnnouncement(`Message from You: ${input}. Message from ${name} 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({
+  const handleSend = React.useCallback(
+    (input: string) => {
+      const date = new Date();
+      const newMessages: MessageProps[] = [];
+      messages.forEach((message) => newMessages.push(message));
+      newMessages.push({
+        avatar: userAvatar,
+        avatarProps: { isBordered: true },
         id: generateId(),
-        role: 'bot',
-        content: `API response from ${name} goes here`,
-        name,
+        name: 'You',
+        role: 'user',
+        content: input,
+        timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
+      });
+      newMessages.push({
         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()
+        id: generateId(),
+        name,
+        role: 'bot',
+        timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
+        isLoading: true
       });
-      setMessages(loadedMessages);
-      // make announcement to assistive devices that new message has loaded
-      setAnnouncement(`Message from ${name}: API response goes here`);
-      setIsSendButtonDisabled(false);
-    }, 5000);
-  };
+      setMessages(newMessages);
+      // make announcement to assistive devices that new messages have been added
+      setAnnouncement(`Message from You: ${input}. Message from ${name} 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 from ${name} goes here`,
+          name,
+          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 ${name}: API response goes here`);
+        setIsSendButtonDisabled(false);
+      }, 5000);
+    },
+    [messages, name, setIsSendButtonDisabled]
+  );
 
   React.useEffect(() => {
     if (input) {
       handleSend(input);
     }
-  }, [hasNewInput]);
+  }, [hasNewInput, input]);
 
   // Auto-scrolls to the latest message
   React.useEffect(() => {

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/chatbot/dist/css/main.css';
 
 export const MessageWithFeedbackExample: React.FunctionComponent = () => {
   const [showUserFeedbackForm, setShowUserFeedbackForm] = React.useState(false);

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -5,6 +5,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav, { Conversation } from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
+import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 
 const ERROR = {
   bodyText: (
@@ -21,6 +22,18 @@ const ERROR = {
   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
+};
+
 const ERROR_WITHOUT_BUTTON = {
   bodyText: (
     <>
@@ -362,4 +375,44 @@ describe('ChatbotConversationHistoryNav', () => {
     );
     expect(screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
   });
+
+  it('should accept emptyState', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        emptyState={EMPTY_STATE}
+      />
+    );
+    expect(
+      screen.getByRole('dialog', {
+        name: /Start a new chat Access timely assistance by starting a conversation with an AI model./i
+      })
+    ).toBeTruthy();
+  });
+
+  it('should accept no results state', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        noResultsState={NO_RESULTS}
+      />
+    );
+    expect(
+      screen.getByRole('dialog', {
+        name: /No results found Adjust your search query and try again. Check your spelling or try a more general term./i
+      })
+    ).toBeTruthy();
+  });
 });