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

ChatbotWelcomePrompt: long prompt title and message overflow suggestion cards

Aperta Adatta ai principianti
  • Qualcosa non va?
#910 3 commenti 0 reazioni 1 assegnatario Vedi su GitHub

@rebeccaalpert ci sta già lavorando.

Dal 22/9/2026.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
82/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Inizia con l’implementazione di ChatbotWelcomePrompt e le relative schede pf-chatbot__prompt-suggestion, quindi riproduci il problema usando il titolo e il messaggio lunghi riportati nel report. Il lavoro è completo quando i titoli vengono troncati su una singola riga con i puntini di sospensione e i messaggi vengono limitati a un numero ragionevole di righe senza fuoriuscire dai limiti della scheda.

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

Descrizione

Description

When ChatbotWelcomePrompt renders welcome/suggested prompt cards with long title or message values, the text overflows horizontally outside the card boundary instead of truncating.

This is especially visible when consumers pass user-generated content (e.g. saved prompts with long names and bodies) as prompts[].title and prompts[].message.

Steps to reproduce

  1. Render ChatbotWelcomePrompt with a prompt like:
<ChatbotWelcomePrompt
  title="Hello"
  description="How can I help?"
  prompts={[
    {
      title: 'aDSFGGEWRTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNM',
      message: 'QEWRETRTDYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTY',
      onClick: () => {},
    },
  ]}
/>
  1. Observe the card title and body text extend past the card border.

Expected behavior

  • Prompt card title should truncate with ellipsis (single line).

  • Prompt card message/body should clamp to a reasonable number of lines (e.g. 2) with ellipsis.

Actual behavior

Title and message render as unbroken single-line strings that overflow the card container.

Component / version

  • Component: ChatbotWelcomePrompt (pf-chatbot__prompt-suggestion cards)

  • @patternfly/chatbot version observed: 6.9.0-prerelease.2

Suggested fix

Apply truncation styles in ChatbotWelcomePrompt (or underlying PF CardTitle / CardBody usage), e.g.:

  • CardTitle: overflow: hidden; text-overflow: ellipsis; white-space: nowrap

  • CardBody: multi-line clamp (-webkit-line-clamp: 2) for message

Optionally expose props to control clamp line count.

Workaround

Consumers currently override via CSS targeting .pf-chatbot__prompt-suggestion .pf-v6-c-card__title and .pf-v6-c-card__body.

Jira Issue: PF-4645

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.