[Chatbot] - Add responsive grid layout variant for prompt suggestions

[its-mitesh-kumar]

Chatbot Component Area

Input/Action (Prompts, Attachments, Voice)

Describe the feature

Welcome / starter prompt suggestions (.pf-chatbot__prompt-suggestions) currently appear to use a vertical flex layout. For wider chat surfaces (fullscreen, dock-to-window), we need a responsive grid of suggestion cards so multiple prompts fit on one row and cards share equal height.

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

Use case: Empty-state welcome screen shows 3–6 prompt suggestion cards. On wide viewports they should wrap into a responsive grid; on narrow viewports they should stack.

Current workaround (requires !important):

.pf-chatbot__prompt-suggestions {
  display: grid !important;
  flex-direction: unset !important;
  align-items: stretch;
  gap: var(--pf-t--global--spacer--lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}
.pf-chatbot__prompt-suggestions > .pf-chatbot__prompt-suggestion {
  height: 100%;
  min-width: 0;
}

Using !important to override the component's default flex styles is fragile and hard to maintain across PF versions.

Expected Data Structure

Proposed API on the prompt suggestions component (name may differ in chatbot):

type PromptSuggestionsProps = {
  suggestions: PromptSuggestion[];
  /** Default: 'stack' (current behavior) */
  layout?: 'stack' | 'grid';
  /** Used when layout='grid'. Default: '12.5rem' */
  minColumnWidth?: string;
  /** Used when layout='grid'. Default: var(--pf-t--global--spacer--lg) */
  gap?: string;
};

Or expose layout via a CSS modifier class:

• .pf-chatbot__prompt-suggestions.pf-m-grid

Conversational Flow

• Shown in empty / new-chat state above the message input, not in the message stream.

• Cards remain clickable; layout change should not affect click targets or keyboard navigation.

• Should work while chat drawer is resized (responsive auto-fit grid).

Visuals & Mockups

Stack (narrow / default):

[ Suggestion 1        ]
[ Suggestion 2        ]
[ Suggestion 3        ]

Grid (wide):

[ Suggestion 1 ] [ Suggestion 2 ] [ Suggestion 3 ]
[ Suggestion 4 ] [ Suggestion 5 ]

Cards in the same row should stretch to equal height.

Conversational Accessibility

• Tab order should follow visual order (left-to-right, top-to-bottom in grid mode).

• Grid layout should not reduce touch/click target size below PF minimums.

• No change to how suggestion text is announced by screen readers.

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

• Related upstream issue for history nav groups: [Chatbot] - Support header actions on expandable ConversationGroup in history nav #904

---

Jira Issue: PF-4629

[its-mitesh-kumar]

Screen recording for the same.

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