feat: add close button to widget and fix Storybook v10 config

[KARTIK-PANDEY-KP]

Summary

• Add X (close) button to the top-right of the HomePage header so the widget can be dismissed from the home view
• Wire onClose prop through ChatWidget → HomePage (non-inline positions only, consistent with the chat view)
• Fix Storybook v10 compatibility in preview.ts: remove deprecated argTypesRegex action, update backgrounds.options → backgrounds.values array format

Changes

• src/components/HomePage/HomePage.tsx — new onClose prop + X button in header
• src/components/HomePage/HomePage.module.css — .headerTopRow layout + .closeButton styles
• src/components/ChatWidget/ChatWidget.tsx — passes onClose to HomePage
• .storybook/preview.ts — Storybook v10 compatibility fixes

Test plan

• Open Storybook (npm run storybook) and select PurpleTheme or NavyTheme story
• Verify X button appears in the top-right of the chat header
• Click X — widget should collapse to the floating toggle button
• Verify no X button appears in position="inline" stories
• Verify Storybook loads without console warnings about deprecated config

Closes BRA2-1177

Made with Cursor

Greptile Summary

This PR adds an X (close) button to the HomePage header and wires the onClose prop through ChatWidget → HomePage, mirroring the existing pattern used by ChatContainer. It also updates .storybook/preview.ts for Storybook v10 compatibility by removing the deprecated argTypesRegex action and migrating from the old backgrounds.options object format to the new backgrounds.values array format.

Key changes:

• HomePage.tsx — new optional onClose prop; conditionally renders an accessible <button aria-label="Close chat"> in the header, wrapped in a headerTopRow flex container alongside the existing agent info
• HomePage.module.css — .headerTopRow flex layout and .closeButton styles (hover, active, focus-visible states)
• ChatWidget.tsx — passes onClose={isInline ? undefined : handleClose} to HomePage, consistent with ChatContainer
• .storybook/preview.ts — Storybook v10 compatibility: backgrounds.options → backgrounds.values array, initialGlobals.backgrounds.value now uses a hex string instead of a name string, and the deprecated argTypesRegex action is removed

Issue found:

• When the widget is in home view with showCollapseButton=true (the default), the new header X button and the existing collapse chevron below the widget are both visible simultaneously with the same aria-label="Close chat". Screen readers encounter two identical accessible names, which is confusing. The collapse button's label should be differentiated (e.g. "Minimize chat").

Confidence Score: 4/5

• PR is safe to merge with one minor accessibility fix recommended.
• The implementation is clean, follows existing patterns, and the Storybook config updates are correct. The only issue is a duplicate aria-label="Close chat" between the new header X button and the existing collapse chevron when both are visible on the home view — a straightforward one-line fix.
• src/components/ChatWidget/ChatWidget.tsx — the collapse button's aria-label should be differentiated from the new HomePage close button's label.

Important Files Changed

Filename	Overview
.storybook/preview.ts	Removes deprecated argTypesRegex action config and migrates backgrounds.options → backgrounds.values array format; initialGlobals.backgrounds.value now correctly uses a hex string instead of a name string for Storybook v10 compatibility.
src/components/ChatWidget/ChatWidget.tsx	Passes onClose to HomePage (guarded by !isInline), consistent with ChatContainer. However, when on the home view with showCollapseButton=true, both the new header X button and the existing collapse chevron share the same aria-label="Close chat", creating duplicate accessible names for screen readers.
src/components/HomePage/HomePage.tsx	Adds optional onClose prop and conditionally renders an accessible X button in the header; wraps existing agentInfo in a new headerTopRow flex container. Implementation looks clean and accessible.
src/components/HomePage/HomePage.module.css	Adds .headerTopRow layout and .closeButton styles with hover/active/focus-visible states; hover uses rgba(0,0,0,0.2) (consistent dark tint), active shrinks the button, and focus-visible adds a white outline for keyboard users.

Sequence Diagram

sequenceDiagram
    participant User
    participant ChatWidget
    participant HomePage
    participant ChatContainer

    User->>ChatWidget: clicks toggle button
    ChatWidget->>ChatWidget: setIsOpen(true)
    ChatWidget->>ChatContainer: renders (currentView = 'chat')

    User->>ChatContainer: clicks back button
    ChatContainer->>ChatWidget: handleBack()
    ChatWidget->>ChatWidget: setCurrentView('home')
    ChatWidget->>HomePage: renders with onClose=handleClose

    User->>HomePage: clicks X button (header)
    HomePage->>ChatWidget: onClose()
    ChatWidget->>ChatWidget: setIsOpen(false)
    ChatWidget->>ChatWidget: renders ChatToggleButton

    Note over ChatWidget,HomePage: When showCollapseButton=true, collapse chevron<br/>below also shows aria-label="Close chat" (duplicate)

Loading

Comments Outside Diff (2)

1. .storybook/preview.ts, line 1-5 (link)

   Action spies silently dropped after removing argTypesRegex

   Removing actions: { argTypesRegex } is the right move for Storybook v10, but it means that on* callback props — onSessionStart, onSessionEnd, onMessage, onError, and the new onClose — will no longer appear in the Actions panel for any story. In v10 the recommended replacement is to explicitly pass fn() from @storybook/test as the default value for each action arg, either per-story or via meta.args.

   For example, in ChatWidget.stories.tsx:

   import { fn } from '@storybook/test';
   
   const meta: Meta<typeof ChatWidget> = {
     // ...
     args: {
       onSessionStart: fn(),
       onSessionEnd: fn(),
       onMessage: fn(),
       onError: fn(),
     },
   };

   Without this, developers lose the ability to observe callback invocations in the Actions panel during manual testing.

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: .storybook/preview.ts
   Line: 1-5
   
   Comment:
   **Action spies silently dropped after removing `argTypesRegex`**
   
   Removing `actions: { argTypesRegex }` is the right move for Storybook v10, but it means that `on*` callback props — `onSessionStart`, `onSessionEnd`, `onMessage`, `onError`, and the new `onClose` — will no longer appear in the **Actions** panel for any story. In v10 the recommended replacement is to explicitly pass `fn()` from `@storybook/test` as the default value for each action arg, either per-story or via `meta.args`.
   
   For example, in `ChatWidget.stories.tsx`:
   ```ts
   import { fn } from '@storybook/test';
   
   const meta: Meta<typeof ChatWidget> = {
     // ...
     args: {
       onSessionStart: fn(),
       onSessionEnd: fn(),
       onMessage: fn(),
       onError: fn(),
     },
   };
   ```
   Without this, developers lose the ability to observe callback invocations in the Actions panel during manual testing.
   
   How can I resolve this? If you propose a fix, please make it concise.

2. src/components/ChatWidget/ChatWidget.tsx, line 350-366 (link)

   Duplicate aria-label when home view is active

   When currentView === 'home' and !isInline && showCollapseButton (the default), both the new X button inside HomePage header and this collapse button below the widget are rendered simultaneously — and both carry aria-label="Close chat". Screen readers will announce two identically-named interactive controls, which is confusing and violates WCAG 2.4.6 (Headings and Labels). Differentiating the two labels would fix this:

_{Last reviewed commit: 1a7ffb2}

[KARTIK-PANDEY-KP]

@greptileai

[KARTIK-PANDEY-KP]

@greptileai