feat: add stretch property to ChatBubble

[vvaliyev]

Description

Adds an optional stretch boolean to ChatBubbleProps. By default the bubble width fits its content, so right- or center-aligned inner elements (timestamps, footer links) land at different horizontal positions in every message. With
stretch={true} the bubble fills the available container width, making those elements line up across messages.

The prop is named and documented consistently with Form Field's stretch (same semantics: opt-in full width, default preserves current behavior). Implementation is layout-only (flex: 1 on the message area); the avatar slot
and bubble content are unaffected. Applies to both incoming and outgoing.

Related links, issue #, if available: AWSUI-61966

How has this been tested?

• Unit tests in chat-bubble.test.tsx: no stretch class by default and with stretch={false}; class applied with stretch={true} for both bubble types.
• Documenter snapshot updated with the new prop.
• New dev page pages/chat-bubble/stretch.page.tsx shows the default and stretched variants on one page — reviewers can compare both behaviors in the dev-pages deployment; the page is covered automatically by the visual regression suite.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates. JSDoc on the new prop; API docs are generated from it. Website usage guidelines follow separately.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md. Yes — default behavior unchanged, no existing props or DOM structure modified.
• Changes do not include unsupported browser features, see CONTRIBUTING.md. Flexbox only.
• Changes were manually tested for accessibility, see accessibility guidelines. Layout-only change; no accessibility contract changes.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function. N/A — no URLs.

Testing

• Changes are covered with new/existing unit tests? Yes.
• Changes are covered with new/existing integration tests? Visual regression via the new dev page.

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.86%. Comparing base (47881c0) to head (d77f4e3).

❌ Your project check has failed because the head coverage (87.86%) is below the target coverage (90.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #170      +/-   ##
==========================================
+ Coverage   87.79%   87.86%   +0.07%     
==========================================
  Files          25       25              
  Lines         344      346       +2     
  Branches       92       97       +5     
==========================================
+ Hits          302      304       +2     
  Misses         42       42              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

🟢 Approval recommended

The stretch prop is implemented as a narrowly-scoped, opt-in layout change with corresponding unit test coverage and documentation updates.

Pull request overview

Adds an opt-in stretch prop to ChatBubble to allow the bubble to expand to available horizontal space, improving alignment for inner right/center-aligned elements (e.g., timestamps, footer links) while preserving existing default sizing behavior.

Changes:

• Added stretch?: boolean to ChatBubbleProps, including generated API documentation updates (snapshot).
• Implemented the layout behavior via a conditional stretch CSS class (flex: 1) on the message area.
• Added unit tests covering default/false/true behavior for both incoming and outgoing bubbles, plus a new dev page demonstrating the option.

File summaries

File	Description
src/chat-bubble/styles.scss	Adds the .stretch modifier to make the message area flex to full width.
src/chat-bubble/internal.tsx	Applies the stretch class conditionally and defaults stretch to false.
src/chat-bubble/interfaces.ts	Introduces the new stretch prop with JSDoc explaining behavior/usage.
src/chat-bubble/index.tsx	Plumbs stretch through the public component and base-component props.
src/chat-bubble/tests/chat-bubble.test.tsx	Adds tests asserting stretch class presence/absence across types and defaults.
src/tests/snapshots/documenter.test.ts.snap	Updates generated prop docs snapshot to include stretch.
pages/chat-bubble/stretch.page.tsx	Adds a dev page to demonstrate default vs stretched layout.

Review details

• Files reviewed: 7/7 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.