Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#905 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
64/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia individuando il componente .pf-chatbot__prompt-suggestions e il suo attuale stile flex, quindi esamina come vengono renderizzate e attivate le schede dei suggerimenti di prompt. Il lavoro è completato quando il comportamento di impilamento esistente rimane quello predefinito, la modalità Grid risponde alla larghezza disponibile con schede di altezza uniforme e i target di clic, l’ordine da tastiera e gli annunci dello screen reader rimangono invariati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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/[email protected])

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

Jira Issue: PF-4629

Lingua principale
TypeScript
Stelle
6
Fork
38
Merge medio
4g 9h
PR unite (30g)
7

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di patternfly/chatbot

Tutte le issue di patternfly/chatbot

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.