ChatbotWelcomePrompt: long prompt title and message overflow suggestion cards

Đang mở Phù hợp với người mới
#910 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
82/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu với phần triển khai ChatbotWelcomePrompt và các thẻ pf-chatbot__prompt-suggestion của nó, sau đó tái hiện vấn đề bằng tiêu đề và thông báo dài trong báo cáo. Hoàn thành khi tiêu đề được cắt ngắn thành một dòng có dấu ba chấm và thông báo được giới hạn ở số dòng hợp lý mà không tràn ra ngoài ranh giới của thẻ.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
6
Fork
37
Merge trung bình
3 ngày 19 giờ
Pull request đã merge (30 ngày)
5

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của patternfly/chatbot

Tất cả issue của patternfly/chatbot

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.