From 9ea0adfa1df7f603b03824f6db719b7b3d0c3581 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Tue, 10 Dec 2024 17:23:05 -0500 Subject: [PATCH 1/4] fix(ChatbotConversationHistoryNav): Add additional menu item props Allow additional menu item props to be passed down from the history nav. --- .../ChatbotConversationHistoryNav.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx index 2250d4f9..fed9318c 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +++ b/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 */ @@ -121,6 +124,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent {conversation.text} From 32d931c8ae9bdcb39275754feb1b487827befdd5 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 12 Dec 2024 13:08:51 -0500 Subject: [PATCH 2/4] feat(ChatbotConversationHistoryNav): Add isActive prop Allow users to show an active conversation state via the isActive prop. --- .../UI/ChatbotHeaderDrawerWithSelection.tsx | 76 +++++++++++++++++++ .../extensions/chatbot/examples/UI/UI.md | 8 ++ .../ChatbotConversationHistoryNav.scss | 7 ++ .../ChatbotConversationHistoryNav.tsx | 4 +- 4 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx new file mode 100644 index 00000000..b2156432 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx @@ -0,0 +1,76 @@ +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 = [ + + + Share + + + Rename + + + Archive + + + Delete + + +]; + +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, + isActive: true + }, + { 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 ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => { + const [isDrawerOpen, setIsDrawerOpen] = React.useState(true); + const displayMode = ChatbotDisplayMode.embedded; + + return ( + <> + setIsDrawerOpen(!isDrawerOpen)} + id="drawer-actions-visible" + name="drawer-actions-visible" + > + setIsDrawerOpen(!isDrawerOpen)} + isDrawerOpen={isDrawerOpen} + setIsDrawerOpen={setIsDrawerOpen} + conversations={conversations} + drawerContent={
Drawer content
} + /> + + ); +}; diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md index 2f841801..6ef33126 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md @@ -345,6 +345,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 `isActive` prop on your `Conversation` to true for a visual state change. + +```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. diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss index 2bda8e1f..85ff1388 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss @@ -48,6 +48,13 @@ .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 diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx index fed9318c..aafd1e72 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx @@ -45,6 +45,8 @@ export interface Conversation { label?: string; /** Callback for when user selects item. */ onSelect?: (event?: React.MouseEvent, value?: string | number) => void; + /** Whether menu item should display active background color */ + isActive?: boolean; /** Additional props passed to conversation menu item */ additionalProps?: MenuItemProps; } @@ -107,7 +109,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent ( })} From 4a6bbc82024c9aa5628835d94df5fafc9ad95a9c Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 12 Dec 2024 14:45:58 -0500 Subject: [PATCH 3/4] Address feedback Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../UI/ChatbotHeaderDrawerWithSelection.tsx | 58 ++++++++++--------- .../extensions/chatbot/examples/UI/UI.md | 2 +- .../ChatbotConversationHistoryNav.scss | 7 +++ .../ChatbotConversationHistoryNav.tsx | 4 +- 4 files changed, 39 insertions(+), 32 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx index b2156432..e9af5a23 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx @@ -22,38 +22,38 @@ const menuItems = [ ]; -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, - isActive: true - }, - { 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 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 ( <> { setIsDrawerOpen={setIsDrawerOpen} conversations={conversations} drawerContent={
Drawer content
} + activeItemId={currentSelection} + onSelectActiveItem={(_e, id) => setCurrentSelection(id as string)} /> ); diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md index 6ef33126..18cd3b2e 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md @@ -347,7 +347,7 @@ 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 `isActive` prop on your `Conversation` to true for a visual state change. +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" diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss index 85ff1388..5e45ec92 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss @@ -44,6 +44,11 @@ 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); @@ -52,6 +57,7 @@ .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; } @@ -112,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); } } diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx index aafd1e72..8979dc49 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx @@ -45,8 +45,6 @@ export interface Conversation { label?: string; /** Callback for when user selects item. */ onSelect?: (event?: React.MouseEvent, value?: string | number) => void; - /** Whether menu item should display active background color */ - isActive?: boolean; /** Additional props passed to conversation menu item */ additionalProps?: MenuItemProps; } @@ -109,7 +107,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent ( })} From 071081338ce9c234e5e188dbb1d89b520134e6a8 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Mon, 16 Dec 2024 15:08:30 -0500 Subject: [PATCH 4/4] Update packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/extensions/chatbot/examples/UI/UI.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md index 18cd3b2e..6036fc20 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md @@ -347,7 +347,7 @@ 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. +If you're showing a conversation that is already active, you can set the `activeItemId` prop on your `` to apply an active visual state. ```js file="./ChatbotHeaderDrawerWithSelection.tsx"