[Chatbot] - Support header actions on expandable ConversationGroup in history nav

[its-mitesh-kumar]

Chatbot Component Area

Layout (Chat Drawer, Header, Persona)

Describe the feature

When building conversation history navigation with ConversationGroup (via ChatbotConversationHistoryNav), we need expandable groups that support supplementary header actions (e.g. a settings gear) alongside the group title.

Consumer: Red Hat Developer Hub Intelligent Assistant (@patternfly/chatbot@6.9.0-prerelease.2)

Use case: A "Saved prompts" section in chat history with:

• Expand/collapse (already supported via expandable)

• Show all / show less (already supported via showAll)

• A header action button (settings) that must not trigger expand/collapse

Today we pass a custom React node as label containing title + Button, and apply CSS overrides to make it work:

groups.push({
  id: 'saved-prompts',
  label: (
    <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
      <div>Saved prompts</div>
      <Button
        variant="plain"
        aria-label="Open saved prompts settings"
        icon={<CogIcon />}
        onClick={event => {
          event.stopPropagation();
          onOpenSavedPromptsSettings();
        }}
      />
    </div>
  ),
  menuGroupProps: { className: 'lightspeed-saved-prompts-group' },
  expandable: { isExpanded, onToggle },
  showAll: { visibleCount, isExpanded, onToggle, label },
  items: [...],
});

Required CSS overrides today:

/* Expandable group header: button text must span full width for flex layout */
.pf-chatbot__menu-item-header--expandable.<group> .pf-v6-c-button__text {
  width: 100%;
}

/* Optional: reveal header action on hover/focus */
.<group> .header-action { opacity: 0; }
.<group>:hover .header-action, .<group> .header-action:focus-visible { opacity: 1; }

/* Nested menu list extra indent */
.pf-chatbot__history-menu .pf-v6-c-menu__list { padding-inline-start: 0; }

/* Show-all toggle missing pointer cursor */
.pf-chatbot__menu-show-all-toggle { cursor: pointer; }

Expected Data Structure

type ConversationGroup = {
  id: string;
  label: ReactNode | string;
  items: Conversation[];
  expandable?: { isExpanded: boolean; onToggle: (expanded: boolean) => void };
  showAll?: {
    visibleCount: number;
    isExpanded: boolean;
    onToggle: (expanded: boolean) => void;
    label?: ReactNode;
  };
  /** Proposed */
  headerActions?: ReactNode;
  /** Or */
  headerActions?: Array<{
    id: string;
    ariaLabel: string;
    icon?: ReactNode;
    onClick: (event: React.MouseEvent) => void;
  }>;
};

Conversational Flow

• Header actions appear in the history drawer/sidebar, not in the message stream.

• Clicking a header action must not toggle group expand/collapse (stopPropagation handled by component).

• Actions should remain keyboard accessible (Tab + Enter/Space).

• Optional: support showActionsOnHover behavior similar to per-item kebab menus.

Visuals & Mockups

Saved prompts group header:

[>] Saved prompts                    [gear]
    Bookmark  Prompt title 1
    Bookmark  Prompt title 2
    Show all v

Conversational Accessibility

• Header action buttons need explicit aria-label (e.g. "Open saved prompts settings").

• Screen readers should announce the group label and actions separately.

• Show-all control should be a proper interactive element with cursor: pointer and focus styles.

Related polish (may be separate bugs)

1. Nested expandable groups + showAll add unwanted padding-inline-start on .pf-chatbot__history-menu .pf-v6-c-menu__list.
2. .pf-chatbot__menu-show-all-toggle does not show cursor: pointer.

Validation

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

• I have searched for existing chatbot-specific components.

References

• Consumer repo: https://github.com/redhat-developer/rhdh-plugins (intelligent-assistant plugin)

• Version: @patternfly/chatbot@6.9.0-prerelease.2

---

Jira Issue: PF-4628

[its-mitesh-kumar]

Screen Recording for the same.

S_.2026-09-11.at.6.30.32.PM.mov