Skip to content

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

@its-mitesh-kumar

Description

@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:

  1. drawerCloseButtonProps.icon - Allow passing a custom React node as the close button icon
  2. 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

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status

    Needs triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions