From 09b1892675c07698e3d4fd1c498fe3a355db0bd2 Mon Sep 17 00:00:00 2001
From: KARTIK PANDEY <kartikpandeykapie@gmail.com>
Date: Tue, 10 Mar 2026 13:08:24 -0700
Subject: [PATCH 1/3] feat: add close button to widget and fix Storybook v10
 config
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add X close button to top-right of HomePage header (non-inline only)
- Wire onClose prop through ChatWidget → HomePage
- Fix Storybook v10 compatibility: remove deprecated argTypesRegex,
  update backgrounds.options → backgrounds.values array format

Resolves BRA2-1177

Made-with: Cursor
---
 .storybook/preview.ts                       | 18 +++++-----
 src/components/ChatWidget/ChatWidget.tsx    |  1 +
 src/components/HomePage/HomePage.module.css | 40 +++++++++++++++++++++
 src/components/HomePage/HomePage.tsx        | 38 +++++++++++++++-----
 4 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index d6c54c6..3c87775 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -3,7 +3,6 @@ import '../src/styles/variables.css';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -11,19 +10,20 @@ const preview: Preview = {
       },
     },
     backgrounds: {
-      options: {
-        light: { name: 'light', value: '#f5f5f5' },
-        dark: { name: 'dark', value: '#1a1a2e' },
-        white: { name: 'white', value: '#ffffff' }
-      }
+      values: [
+        { name: 'light', value: '#f5f5f5' },
+        { name: 'dark', value: '#1a1a2e' },
+        { name: 'white', value: '#ffffff' },
+      ],
+      default: 'light',
     },
   },
 
   initialGlobals: {
     backgrounds: {
-      value: 'light'
-    }
-  }
+      value: '#f5f5f5',
+    },
+  },
 };
 
 export default preview;
diff --git a/src/components/ChatWidget/ChatWidget.tsx b/src/components/ChatWidget/ChatWidget.tsx
index 355526e..5094f8d 100644
--- a/src/components/ChatWidget/ChatWidget.tsx
+++ b/src/components/ChatWidget/ChatWidget.tsx
@@ -325,6 +325,7 @@ export const ChatWidget: React.FC<ChatWidgetProps> = ({
               onStartChat={handleStartChat}
               onNavigate={handleNavigate}
               currentPage="home"
+              onClose={isInline ? undefined : handleClose}
             />
           ) : (
             <ChatContainer
diff --git a/src/components/HomePage/HomePage.module.css b/src/components/HomePage/HomePage.module.css
index 5201701..dc00410 100644
--- a/src/components/HomePage/HomePage.module.css
+++ b/src/components/HomePage/HomePage.module.css
@@ -42,12 +42,52 @@
   z-index: 1;
 }
 
+.headerTopRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .agentInfo {
   display: flex;
   align-items: center;
   gap: var(--bb-spacing-md);
 }
 
+.closeButton {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--bb-radius-full);
+  background: rgba(0, 0, 0, 0.1);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bb-header-text-color, var(--bb-text-inverse));
+  transition: background var(--bb-transition-fast), transform var(--bb-transition-fast);
+  flex-shrink: 0;
+}
+
+.closeButton:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
+}
+
+.closeButton:active {
+  transform: scale(0.95);
+}
+
+.closeButton:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+
+.closeButton svg {
+  width: 18px;
+  height: 18px;
+}
+
 .headerLogo {
   width: 42px;
   height: 42px;
diff --git a/src/components/HomePage/HomePage.tsx b/src/components/HomePage/HomePage.tsx
index fd1ab08..b63795e 100644
--- a/src/components/HomePage/HomePage.tsx
+++ b/src/components/HomePage/HomePage.tsx
@@ -12,6 +12,7 @@ export interface HomePageProps {
   onStartChat: () => void;
   onNavigate: (page: 'home' | 'messages') => void;
   currentPage: 'home' | 'messages';
+  onClose?: () => void;
 }
 
 export const HomePage: React.FC<HomePageProps> = ({
@@ -24,6 +25,7 @@ export const HomePage: React.FC<HomePageProps> = ({
   onStartChat,
   onNavigate,
   currentPage,
+  onClose,
 }) => {
   const handleHomeCardClick = () => {
     if (homeLink) {
@@ -36,15 +38,35 @@ export const HomePage: React.FC<HomePageProps> = ({
       <div className={styles.header}>
         <div className={styles.headerBackground} />
         <div className={styles.headerContent}>
-          <div className={styles.agentInfo}>
-            {agentLogoUrl ? (
-              <img src={agentLogoUrl} alt={agentName} className={styles.headerLogo} />
-            ) : (
-              <div className={styles.headerLogoPlaceholder}>
-                <BrainbaseLogo className={styles.headerBrainbaseLogo} color="white" cutoutColor="var(--bb-primary-color)" />
-              </div>
+          <div className={styles.headerTopRow}>
+            <div className={styles.agentInfo}>
+              {agentLogoUrl ? (
+                <img src={agentLogoUrl} alt={agentName} className={styles.headerLogo} />
+              ) : (
+                <div className={styles.headerLogoPlaceholder}>
+                  <BrainbaseLogo className={styles.headerBrainbaseLogo} color="white" cutoutColor="var(--bb-primary-color)" />
+                </div>
+              )}
+              <span className={styles.headerAgentName}>{agentName}</span>
+            </div>
+            {onClose && (
+              <button
+                className={styles.closeButton}
+                onClick={onClose}
+                aria-label="Close chat"
+                type="button"
+              >
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M6 18L18 6M6 6L18 18"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
             )}
-            <span className={styles.headerAgentName}>{agentName}</span>
           </div>
         </div>
       </div>

From 423a3ab2542e962475b533a423ef92c1ec950f19 Mon Sep 17 00:00:00 2001
From: KARTIK PANDEY <kartikpandeykapie@gmail.com>
Date: Tue, 10 Mar 2026 13:12:00 -0700
Subject: [PATCH 2/3] fix: remove redundant backgrounds.default in favour of
 initialGlobals

Made-with: Cursor
---
 .storybook/preview.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 3c87775..febe81d 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -15,7 +15,6 @@ const preview: Preview = {
         { name: 'dark', value: '#1a1a2e' },
         { name: 'white', value: '#ffffff' },
       ],
-      default: 'light',
     },
   },
 

From 1a7ffb2de0285796944b78793a980c88f46a476d Mon Sep 17 00:00:00 2001
From: KARTIK PANDEY <kartikpandeykapie@gmail.com>
Date: Tue, 10 Mar 2026 13:16:17 -0700
Subject: [PATCH 3/3] fix: use dark overlay for close button hover to work on
 all header colors

Made-with: Cursor
---
 src/components/HomePage/HomePage.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HomePage/HomePage.module.css b/src/components/HomePage/HomePage.module.css
index dc00410..b1a00f5 100644
--- a/src/components/HomePage/HomePage.module.css
+++ b/src/components/HomePage/HomePage.module.css
@@ -70,7 +70,7 @@
 }
 
 .closeButton:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(0, 0, 0, 0.2);
   transform: scale(1.05);
 }