fix(bloom): add dismiss button to AI callout and increase chat window width

[Tmalone1250]

Summary

What — What changes are introduced in this PR?

Two targeted UI improvements to the Bloom AI chat widget (AiAssistantChatWindowCallout and the shared Tailwind design token):

1. Dismiss button on the Bloom AI promotional callout — Added a useState(dismissed) flag and an XMark icon button (aria-label="Dismiss Bloom AI suggestion") to AiAssistantChatWindowCallout. When clicked, the callout unmounts cleanly, giving users back the full text reading area.

2. Increased chat window width — Bumped the ai-assistant design token in www/packages/tailwind/base.tailwind.config.js from 500px to 600px (both width and maxWidth). This gives the panel more horizontal breathing room for rendering AI responses and code snippets.

Why — Why are these changes relevant or necessary?

Reported in #15283: the Bloom AI chat panel has two compounding readability problems:

• The "Try to build using Bloom AI" promotional callout renders at the bottom of the chat content area with no way to dismiss it. Once a matched suggestion appears, it occupies permanent vertical space, overlapping or hiding the AI's text responses.
• The chat panel is capped at 500px wide, which is cramped when displaying technical content (code blocks, long API responses).

Together these issues result in users being unable to comfortably read AI output in the widget.

How — How have these changes been implemented?

AiAssistantChatWindowCallout (www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Callout/index.tsx):

• Imported useState from React, XMark from @medusajs/icons, and Button from the shared button component.
• Added const [dismissed, setDismissed] = useState(false) — a local-only ephemeral state (no persistence needed; the callout resets naturally on next page load or new question).
• Extended the early-return guard to if (loading || !matchedCallout || dismissed).
• Added position: relative to the callout wrapper and placed an absolutely-positioned Button (top-right) containing XMark, calling setDismissed(true) on click.

www/packages/tailwind/base.tailwind.config.js:

• width["ai-assistant"]: "500px" → "600px"
• maxWidth["ai-assistant"]: "500px" → "600px"

All existing tests pass without modification (5/5 — Callout/__tests__/index.test.tsx).

Closes #15283

---

Note

Low Risk
Low risk UI-only changes: adds local dismiss state for the Bloom AI callout and adjusts a Tailwind sizing token; no data or auth logic is affected.

Overview
Adds a dismiss (X) button to the Bloom AI callout in AiAssistantChatWindowCallout, hiding the suggestion after click and automatically resetting dismissal when the latest question changes.

Widens the AI assistant panel by updating the Tailwind ai-assistant width/maxWidth token from 500px to 600px, and extends callout tests to cover dismiss visibility, dismissal behavior, and reset on new questions.

^{Reviewed by Cursor Bugbot for commit bb0419e. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: b904311

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@Tmalone1250 is attempting to deploy a commit to the medusajs Team on Vercel.

A member of the Team first needs to authorize it.

[medusa-os-bot]

Thank you for your contribution, @Tmalone1250!

After reviewing this PR, we need one thing addressed before we can move forward:

Required changes:

• Add tests for the new dismiss button behavior in www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Callout/__tests__/index.test.tsx. Components under www/packages/docs-ui/ must include tests for new functionality. The existing test file covers rendering and click tracking, but none of the 5 tests cover the dismiss flow. At minimum, please add:
  • A test that simulates a click on the dismiss button and asserts the callout is no longer rendered.
  • A test that asserts the dismiss button is present when the callout is visible.

Notes (non-blocking):

The dismiss button is positioned absolute top-0 right-0 inside a flex justify-center items-center relative container. If the Card doesn't stretch to the full container width, the button may appear visually detached from the card (floating at the container edge rather than the card's corner). Consider whether the button should be positioned relative to the Card itself (e.g., by wrapping card and button in a single relative div that is card-width) — though if the Card naturally fills its container this is a non-issue.

Triggered by: new PR opened

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 364f71e. Configure here.}

[medusa-os-bot]

Thank you for your contribution, @Tmalone1250!

The required changes from the previous review have been addressed. Here's a summary:

✅ PR template is complete
✅ Linked to a verified issue (#15283)
✅ Follows contribution guidelines
✅ Tests included — three new tests cover: dismiss button visibility, click-to-dismiss behavior, and dismissed state reset on question change
✅ Button positioning fixed — relative wrapper now anchors the dismiss button to the Card, not the outer flex container

After an initial review, this PR looks good to us. A team member will do a final review before this is merged. We appreciate your patience!

Notes (non-blocking):

The test file is missing a trailing newline at the end of www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Callout/__tests__/index.test.tsx. Prettier enforces this, so it may fail the format check in CI. Adding a blank line after the final }) will fix it.

Triggered by: new commit pushed

[shahednasser]

Thank you for your contribution @Tmalone1250 but can you revert the width change?

[medusa-os-bot]

Thank you for the follow-up commit, @Tmalone1250!

The new vi.mock entries for @/components/Button and @medusajs/icons are a good addition — they improve test isolation so the dismiss tests don't depend on the real implementations of those modules.

One non-blocking note from the previous review is still outstanding:

Notes (non-blocking):

The test file is still missing a trailing newline at the end of www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Callout/__tests__/index.test.tsx (the diff ends with no newline at end of file). Prettier enforces this and it may cause a format check failure in CI. Adding a blank line after the final }) will fix it.

This PR still looks good to us. A team member will do a final review before this is merged. We appreciate your patience!

Triggered by: new commit pushed

[shahednasser]

Can you change the X icon so that it has the same color as the arrow icon, and it has right padding to be aligned the same? Also, on hover, it shouldn't have any background effect.

[github-actions]

This PR is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 5 days.