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

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