[Chatbot] - Support custom drawer panel close/collapse icon and positioning

[its-mitesh-kumar]

Chatbot Component Area

Layout (Chat Drawer, Header, Persona)

Describe the feature

When using ChatbotConversationHistoryNav with a drawer panel, there's no clean API to:

1. Replace the default close icon (X) with a custom collapse/expand icon (e.g., a panel collapse arrow)
2. Position the close/collapse button at a custom location within the drawer panel header
3. Control the close button's size and padding

Currently, to achieve a custom collapse icon that visually indicates "collapse panel" (arrow pointing left with a vertical bar), we must override PatternFly internals with CSS:

Proposed API additions:

4. drawerCloseButtonProps.icon - Allow passing a custom React node as the close button icon
5. drawerCloseButtonProps.position - Allow positioning ('default' | 'top-right' | custom coordinates)

Expected Data Structure

Extended drawerCloseButtonProps with icon and position support

<ChatbotConversationHistoryNav
  drawerCloseButtonProps={{
    ...
    icon: <CollapsePanelIcon />,  // Custom icon support
    position: 'top-right',        // Position within the drawer panel
  }}
/>

Position could support values like:

• 'default' (current PatternFly positioning)

• 'top-right' (aligned to top-right corner of panel)

• 'top-left'

• Or custom object: { top: 15, right: 15 }

Conversational Flow

• The close/collapse button appears in the drawer panel header area

• It is always visible when the drawer is open (not streaming-dependent)

• Clicking it collapses/closes the conversation history drawer

• The icon should visually indicate the action (collapse vs close)

• For expanded panels: show collapse icon (arrow pointing into panel)

Visuals & Mockups

Conversational Accessibility

No response

Validation

• This request aligns with PatternFly AI/Chatbot design guidelines.

• I have searched for existing chatbot-specific components.

---

Jira Issue: PF-4133

[rebeccaalpert]

Here is Kayla's demo with the icon we are using elsewhere: https://www.patternfly.org/components/navigation/react-demos/docked-nav/

[its-mitesh-kumar]

Cc: @HusneShabbir @ShiranHi

[rebeccaalpert]

Putting up PR in React to allow props spread to DrawerCloseButton: patternfly/patternfly-react#12620

This will enable icon changes, etc. on the consumer side and the addition of classes directly to the button rather than the parent div. We already offer reversed button positioning, so I don't think we want to hard-code any additional positioning logic, but we should let consumers follow their dreams with easily accessible classes, etc.

[rebeccaalpert]

patternfly/patternfly-react#12620 has merged. Once that version of PatternFly-React is used with ChatBot, you should be able to pull in icon prop and add a className that controls the position via custom CSS. That tends to get updated when we do a release. I think we typically do a release in September. I'm going to close this for now, but let us know if you run into issues or have any questions.