@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10

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,18 +47,33 @@ 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);
+  const [isCompact, setIsCompact] = React.useState(false);
   const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
   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 +83,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 +123,27 @@ 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>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-compact"
+        name="drawer-compact"
+      ></Checkbox>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
         onDrawerToggle={() => setIsOpen(!isOpen)}
@@ -129,6 +168,9 @@ 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}
+        isCompact={isCompact}
       />
     </>
   );

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/ChatbotHeaderDrawerWithActions.tsx

@@ -51,6 +51,7 @@ const conversations: { [key: string]: Conversation[] } = {
 
 export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
+  const [isCompact, setIsCompact] = React.useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   return (
@@ -62,6 +63,13 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         id="drawer-actions-visible"
         name="drawer-actions-visible"
       ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-actions-compact"
+        name="drawer-actions-compact"
+      ></Checkbox>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
         onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
@@ -69,6 +77,7 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         setIsDrawerOpen={setIsDrawerOpen}
         conversations={conversations}
         drawerContent={<div>Drawer content</div>}
+        isCompact={isCompact}
       />
     </>
   );

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

@@ -25,6 +25,7 @@ const menuItems = [
 export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
   const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
   const [currentSelection, setCurrentSelection] = React.useState('2');
+  const [isCompact, setIsCompact] = React.useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const conversations: { [key: string]: Conversation[] } = {
@@ -60,8 +61,15 @@ export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
         label="Display drawer"
         isChecked={isDrawerOpen}
         onChange={() => setIsDrawerOpen(!isDrawerOpen)}
-        id="drawer-actions-visible"
-        name="drawer-actions-visible"
+        id="drawer-selected-visible"
+        name="drawer-selected-visible"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="drawer-selected-compact"
+        name="drawer-selected-compact"
       ></Checkbox>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
@@ -72,6 +80,7 @@ export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
         drawerContent={<div>Drawer content</div>}
         activeItemId={currentSelection}
         onSelectActiveItem={(_e, id) => setCurrentSelection(id as string)}
+        isCompact={isCompact}
       />
     </>
   );