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

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