Merge pull request #374 from rebeccaalpert/menuitem

fix(ChatbotConversationHistoryNav): Add additional menu item props

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

@@ -0,0 +1,78 @@
+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>
+];
+
+export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
+  const [currentSelection, setCurrentSelection] = React.useState('2');
+  const displayMode = ChatbotDisplayMode.embedded;
+
+  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 }
+    ]
+  };
+
+  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>}
+        activeItemId={currentSelection}
+        onSelectActiveItem={(_e, id) => setCurrentSelection(id as string)}
+      />
+    </>
+  );
+};

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -357,6 +357,14 @@ Actions can be added to conversations with `menuItems`. Optionally, you can also
 
 ```
 
+### Drawer with active conversation
+
+If you're showing a conversation that is already active, you can set the `activeItemId` prop on your `<ChatbotConversationHistoryNav>` to apply an active visual state.
+
+```js file="./ChatbotHeaderDrawerWithSelection.tsx"
+
+```
+
 ### Modal
 
 Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and accepts components typically used in a modal. It is primarily used and tested in the context of the attachment modals, but you can customize this modal to adapt it to other use cases as needed. The modal will overlay the ChatBot in default and docked modes, and will behave more like a traditional PatternFly modal in fullscreen and embedded modes.

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -44,10 +44,23 @@
     color: var(--pf-t--global--text--color--regular);
     font-size: var(--pf-t--global--font--size--body--lg);
     font-weight: var(--pf-t--global--font--weight--body--default);
+    border-radius: var(--pf-t--global--border--radius--small);
+  }
+  // allows focus state to have border radius
+  .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
+    overflow: hidden;
   }
   .pf-chatbot__history-actions {
     transform: rotate(90deg);
   }
+
+  .pf-chatbot__menu-item--active {
+    background-color: var(--pf-t--global--background--color--action--plain--clicked);
+  }
+
+  button.pf-chatbot__menu-item--active {
+    background-color: initial;
+  }
 }
 
 // Chatbot Header - Drawer
@@ -105,6 +118,7 @@
       border-radius: var(--pf-t--global--border--radius--pill);
       justify-content: center;
       align-items: center;
+      border-radius: var(--pf-t--global--border--radius--small);
     }
   }
 

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -20,7 +20,8 @@ import {
   MenuList,
   MenuGroup,
   MenuItem,
-  MenuContent
+  MenuContent,
+  MenuItemProps
 } from '@patternfly/react-core';
 
 import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
@@ -44,6 +45,8 @@ export interface Conversation {
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+  /** Additional props passed to conversation menu item */
+  additionalProps?: MenuItemProps;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Function called to toggle drawer */
@@ -104,7 +107,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
 
   const getNavItem = (conversation: Conversation) => (
     <MenuItem
-      className="pf-chatbot__menu-item"
+      className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
       itemId={conversation.id}
       key={conversation.id}
       {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
@@ -121,6 +124,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
             )
           }
         : {})}
+      {...conversation.additionalProps}
       /* eslint-enable indent */
     >
       {conversation.text}