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

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: #904

---

Jira Issue: PF-4629

Start by locating the .pf-chatbot__prompt-suggestions component and its current flex styling, then inspect how prompt suggestion cards are rendered and activated. Done means the existing stack behavior remains the default, grid mode responds to available width with equal-height cards, and click targets, keyboard order, and screen-reader announcements remain unchanged.