ChatbotWelcomePrompt: long prompt title and message overflow suggestion cards
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 82/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- typescript
- Domain
- frontend
Research direction
Start with the ChatbotWelcomePrompt implementation and its pf-chatbot__prompt-suggestion cards, then reproduce the issue using the long title and message from the report. Done means titles truncate to a single ellipsis line and messages clamp to a reasonable number of lines without overflowing the card boundary.
Written by the indexing model from the issue text.
Description
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
- Render
ChatbotWelcomePromptwith a prompt like:
<ChatbotWelcomePrompt
title="Hello"
description="How can I help?"
prompts={[
{
title: 'aDSFGGEWRTYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNM',
message: 'QEWRETRTDYUIOPASDFGHJKLZXCVBNMQWERTYUIOPASDFGHJKLZXCVBNMQWERTY',
onClick: () => {},
},
]}
/>
- 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-suggestioncards) -
@patternfly/chatbotversion 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) formessage
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
- Dominant language
- TypeScript
- Stars
- 6
- Forks
- 37
- Avg merge
- 3d 19h
- Merged PRs (30d)
- 5
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from patternfly/chatbot
-
PF Team
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
patternfly/chatbot#852 ·
-
PF Team
patternfly/chatbot#908 · 1 assignee ·
-
PF Team
Difficulty 4/5 3-5 days Newbie friendliness 48/100
patternfly/chatbot#906 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 64/100
patternfly/chatbot#905 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 72/100
patternfly/chatbot#863 · 3 comments · 2 reactions ·
All issues in patternfly/chatbot
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100