patternfly / patternfly/chatbot
ChatbotWelcomePrompt: long prompt title and message overflow suggestion cards
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6
- Forks
- 37
- Avg merge
- 3d 19h
- Merged PRs (30d)
- 5
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
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.
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.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 82/100