Merge pull request #12 from BrainbaseHQ/kartik/bra2-1177-add-close-button-to-chat-widget-and-fix-storybook-v10-config

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

Author: KARTIK-PANDEY-KP

.storybook/preview.ts

@@ -3,27 +3,26 @@ import '../src/styles/variables.css';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
     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' },
+      ],
     },
   },
 
   initialGlobals: {
     backgrounds: {
-      value: 'light'
-    }
-  }
+      value: '#f5f5f5',
+    },
+  },
 };
 
 export default preview;

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

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(0, 0, 0, 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;

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>