[Chatbot] - Support customizable padding and spacing for ChatbotConversationHistoryNav sidebar layout

[its-mitesh-kumar]

Chatbot Component Area

Layout (Chat Drawer, Header, Persona)

Describe the feature

When using ChatbotConversationHistoryNav, there is no clean API to customize the padding and spacing of the conversation history sidebar elements. Consumers currently must override internal PatternFly CSS class names (e.g., pf-v6-c-drawer__head, pf-v6-c-menu__group-title, pf-v6-c-menu__item, pf-v6-c-menu-toggle) to achieve design requirements.

This is fragile because:

1. Selectors must be duplicated for both pf-v5 and pf-v6 prefixes to support version transitions
2. Overrides break silently when PatternFly upgrades change internal class names
3. CSS variable overrides like --pf-v6-c-menu__item--PaddingInlineStart are implementation details not meant for public use

Specific gaps:

4. Drawer head padding — No prop to control paddingInlineStart / paddingInlineEnd on the drawer header and heading container. Consumers override .pf-v6-c-drawer__head and .pf-chatbot__heading-container directly.

5. Conversation list item padding — No prop to control inline padding on conversation menu items and group titles. Consumers override --pf-v6-c-menu__group-title--PaddingInlineStart and --pf-v6-c-menu__item--PaddingInlineStart on .pf-chatbot__menu-item-header and .pf-chatbot__menu-item.

6. Menu toggle hover visibility — No built-in support for showing the per-conversation options menu toggle only on hover. Consumers must manually set opacity: 0 on .pf-chatbot__menu-item .pf-v6-c-menu-toggle and opacity: 1 on hover.

Proposed API additions:

• drawerHeadProps.style or drawerHeadProps.className — Allow styling the drawer head container

• menuItemProps.paddingInline or a CSS variable contract — Allow controlling conversation list item spacing

• menuToggleVisibility: 'always' | 'hover' — Control whether the options menu toggle is always visible or only on hover

Related: #834 (custom close/collapse icon and positioning)

Expected Data Structure

<ChatbotConversationHistoryNav
  // Drawer head padding customization
  drawerHeadProps={{
    style: {
      paddingInlineStart: 'var(--pf-t--global--spacer--lg)',
      paddingInlineEnd: 'var(--pf-t--global--spacer--lg)',
    },
  }}
  // Conversation list item spacing
  menuItemPaddingInline="var(--pf-t--global--spacer--md)"
  // Options menu toggle visibility
  menuToggleVisibility="hover"
/>

Alternatively, expose stable CSS custom properties that consumers can override without targeting internal class names:

--pf-chatbot__drawer-head--PaddingInlineStart
--pf-chatbot__drawer-head--PaddingInlineEnd
--pf-chatbot__menu-item--PaddingInlineStart
--pf-chatbot__menu-item--PaddingInlineEnd
--pf-chatbot__menu-group-title--PaddingInlineStart
--pf-chatbot__menu-group-title--PaddingInlineEnd

Conversational Flow

• These are layout/styling concerns, not interaction-dependent

• The conversation history sidebar is always rendered when the drawer is open

• Padding and spacing affect all conversation items (both pinned and recent sections)

• Menu toggle hover visibility affects every conversation item's options kebab menu

• None of these are streaming-dependent

Visuals & Mockups

Current workaround in consumer code (fragile CSS overrides):

// Drawer head padding override (duplicated for v5 and v6)
'& .pf-v6-c-drawer__head, & .pf-v5-c-drawer__head': {
  paddingInlineStart: 'var(--pf-t--global--spacer--lg)',
  paddingInlineEnd: 'var(--pf-t--global--spacer--lg)',
},

// Menu item padding override
'& .pf-chatbot__menu-item': {
  '--pf-v6-c-menu__item--PaddingInlineStart': 'var(--pf-t--global--spacer--md)',
  '--pf-v6-c-menu__item--PaddingInlineEnd': 'var(--pf-t--global--spacer--md)',
},

// Menu toggle hover-only visibility
'& .pf-chatbot__menu-item .pf-v6-c-menu-toggle': {
  opacity: 0,
  transition: 'opacity 0.15s ease-in-out',
},
'& .pf-chatbot__menu-item:hover .pf-v6-c-menu-toggle': {
  opacity: 1,
},

Conversational Accessibility

No accessibility impact — these are purely visual/layout customizations. The menu toggle hover visibility should ensure the toggle remains keyboard-accessible (visible on focus) even when hidden visually on mouse-out.

Validation

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

• I have searched for existing chatbot-specific components.

---

Jira Issue: PF-4289