@aslaluroba/help-center-react 3.2.5 → 3.2.7

package/src/components/ui/image-preview-dialog.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useCallback, useRef, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components';
-import XIcon from '../../assets/icons/x.svg';
-import ArrowRightIcon from '../../assets/icons/arrowRight.svg';
+import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'
+import SolarArrowRightBoldDuotone from '~icons/solar/arrow-right-bold-duotone';
 import { useLocalTranslation } from '../../useLocalTranslation';
 
 interface ImagePreviewDialogProps {
@@ -212,19 +212,19 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
 
   return (
     <div
-      className='babylai-fixed babylai-inset-0 babylai-z-[9999] babylai-flex babylai-items-center babylai-justify-center'
+      className='babylai:fixed babylai:inset-0 babylai:z-9999 babylai:flex babylai:items-center babylai:justify-center'
       onClick={handleClose}
       role='dialog'
       aria-modal='true'
       aria-label='Image preview dialog'
     >
       {/* Backdrop */}
-      <div className='babylai-absolute babylai-inset-0 babylai-bg-black babylai-bg-opacity-95' />
+      <div className='babylai:absolute babylai:inset-0 babylai:bg-black babylai:bg-opacity-95' />
 
       {/* Dialog content */}
       <div
         ref={containerRef}
-        className='babylai-relative babylai-w-full babylai-h-full babylai-flex babylai-items-center babylai-justify-center babylai-overflow-hidden'
+        className='babylai:relative babylai:w-full babylai:h-full babylai:flex babylai:items-center babylai:justify-center babylai:overflow-hidden'
         onClick={(e) => e.stopPropagation()}
         onWheel={handleWheel}
         onMouseDown={handleMouseDown}
@@ -238,15 +238,15 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
           size='icon'
           onClick={handleClose}
           className={cn(
-            'babylai-absolute babylai-top-4 babylai-z-[60]',
-            dir === 'rtl' ? 'babylai-left-4' : 'babylai-right-4',
-            'babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10',
-            'babylai-h-10 babylai-w-10 babylai-rounded-full'
+            'babylai:absolute babylai:top-4 babylai:z-60',
+            dir === 'rtl' ? 'babylai:left-4' : 'babylai:right-4',
+            'babylai:text-white babylai:hover:text-white/80 babylai:hover:bg-white/10',
+            'babylai:h-10 babylai:w-10 babylai:rounded-full'
           )}
           aria-label='Close preview'
           type='button'
         >
-          <XIcon className='babylai-w-6 babylai-h-6' />
+          <MaterialSymbolsCloseSmallOutlineRounded className='babylai:w-6 babylai:h-6' />
         </Button>
 
         {/* Navigation Buttons */}
@@ -258,16 +258,16 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
               onClick={dir === 'rtl' ? handleNext : handlePrevious}
               disabled={dir === 'rtl' ? currentIndex === imageUrls.length - 1 : currentIndex === 0}
               className={cn(
-                'babylai-absolute babylai-top-1/2 -babylai-translate-y-1/2 babylai-z-[60]',
-                dir === 'rtl' ? 'babylai-right-4' : 'babylai-left-4',
-                'babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10',
-                'babylai-h-12 babylai-w-12 babylai-rounded-full',
-                'disabled:babylai-opacity-30'
+                'babylai:absolute babylai:top-1/2 babylai:-translate-y-1/2 babylai:z-60',
+                dir === 'rtl' ? 'babylai:right-4' : 'babylai:left-4',
+                'babylai:text-white babylai:hover:text-white/80 babylai:hover:bg-white/10',
+                'babylai:h-12 babylai:w-12 babylai:rounded-full',
+                'babylai:disabled:opacity-30'
               )}
               aria-label='Previous image'
               type='button'
             >
-              <ArrowRightIcon className={cn('babylai-w-8 babylai-h-8', dir === 'rtl' ? '' : 'babylai-rotate-180')} />
+              <SolarArrowRightBoldDuotone className={cn('babylai:w-8 babylai:h-8', dir === 'rtl' ? '' : 'babylai:rotate-180')} />
             </Button>
             <Button
               variant='ghost'
@@ -275,16 +275,16 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
               onClick={dir === 'rtl' ? handlePrevious : handleNext}
               disabled={dir === 'rtl' ? currentIndex === 0 : currentIndex === imageUrls.length - 1}
               className={cn(
-                'babylai-absolute babylai-top-1/2 -babylai-translate-y-1/2 babylai-z-[60]',
-                dir === 'rtl' ? 'babylai-left-4' : 'babylai-right-4',
-                'babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10',
-                'babylai-h-12 babylai-w-12 babylai-rounded-full',
-                'disabled:babylai-opacity-30'
+                'babylai:absolute babylai:top-1/2 babylai:-translate-y-1/2 babylai:z-60',
+                dir === 'rtl' ? 'babylai:left-4' : 'babylai:right-4',
+                'babylai:text-white babylai:hover:text-white/80 babylai:hover:bg-white/10',
+                'babylai:h-12 babylai:w-12 babylai:rounded-full',
+                'babylai:disabled:opacity-30'
               )}
               aria-label='Next image'
               type='button'
             >
-              <ArrowRightIcon className={cn('babylai-w-8 babylai-h-8', dir === 'rtl' ? 'babylai-rotate-180' : '')} />
+              <SolarArrowRightBoldDuotone className={cn('babylai:w-8 babylai:h-8', dir === 'rtl' ? 'babylai:rotate-180' : '')} />
             </Button>
           </>
         )}
@@ -292,10 +292,10 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
         {/* Zoom Controls */}
         <div
           className={cn(
-            'babylai-absolute babylai-bottom-4 babylai-z-[60]',
-            'babylai-flex babylai-items-center babylai-gap-2',
-            'babylai-bg-black/50 babylai-backdrop-blur-sm babylai-rounded-lg babylai-p-2',
-            dir === 'rtl' ? 'babylai-right-1/2 babylai-translate-x-1/2' : 'babylai-left-1/2 -babylai-translate-x-1/2'
+            'babylai:absolute babylai:bottom-4 babylai:z-60',
+            'babylai:flex babylai:items-center babylai:gap-2',
+            'babylai:bg-black/50 babylai:backdrop-blur-sm babylai:rounded-lg babylai:p-2',
+            dir === 'rtl' ? 'babylai:right-1/2 babylai:translate-x-1/2' : 'babylai:left-1/2 babylai:-translate-x-1/2'
           )}
         >
           <Button
@@ -303,15 +303,15 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
             size='icon'
             onClick={handleZoomOut}
             disabled={zoomLevel <= 0.5}
-            className='babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10 babylai-h-9 babylai-w-9 disabled:babylai-opacity-30'
+            className='babylai:text-white babylai:hover:text-white/80 babylai:hover:bg-white/10 babylai:h-9 babylai:w-9 babylai:disabled:opacity-30'
             aria-label='Zoom out'
             type='button'
           >
-            <svg className='babylai-w-5 babylai-h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <svg className='babylai:w-5 babylai:h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
               <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7' />
             </svg>
           </Button>
-          <span className='babylai-text-white babylai-text-sm babylai-font-medium babylai-min-w-12 babylai-text-center'>
+          <span className='babylai:text-white babylai:text-sm babylai:font-medium babylai:min-w-12 babylai:text-center'>
             {Math.round(zoomLevel * 100)}%
           </span>
           <Button
@@ -319,11 +319,11 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
             size='icon'
             onClick={handleZoomIn}
             disabled={zoomLevel >= 3}
-            className='babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10 babylai-h-9 babylai-w-9 disabled:babylai-opacity-30'
+            className='babylai:text-white babylai:hover:text-white/80 babylai:hover:bg-white/10 babylai:h-9 babylai:w-9 babylai:disabled:opacity-30'
             aria-label='Zoom in'
             type='button'
           >
-            <svg className='babylai-w-5 babylai-h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <svg className='babylai:w-5 babylai:h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
               <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7' />
             </svg>
           </Button>
@@ -332,7 +332,7 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
               variant='ghost'
               size='sm'
               onClick={handleResetZoom}
-              className='babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10 babylai-h-9 babylai-px-3 babylai-ml-2'
+              className='babylai:text-white babylai:hover:text-white/80 babylai:hover:bg-white/10 babylai:h-9 babylai:px-3 babylai:ml-2'
               aria-label='Reset zoom'
               type='button'
             >
@@ -340,16 +340,16 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
             </Button>
           )}
           {/* Download Button */}
-          <div className='babylai-h-9 babylai-w-px babylai-bg-white/20 babylai-mx-1' />
+          <div className='babylai:h-9 babylai:w-px babylai:bg-white/20 babylai:mx-1' />
           <Button
             variant='ghost'
             size='icon'
             onClick={handleDownload}
-            className='babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10 babylai-h-9 babylai-w-9'
+            className='babylai:text-white babylai:hover:text-white/80 babylai:hover:bg-white/10 babylai:h-9 babylai:w-9'
             aria-label='Download image'
             type='button'
           >
-            <svg className='babylai-w-5 babylai-h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <svg className='babylai:w-5 babylai:h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
               <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' />
             </svg>
           </Button>
@@ -359,12 +359,12 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
         {hasMultipleImages && (
           <div
             className={cn(
-              'babylai-absolute babylai-top-4 babylai-z-[60]',
-              'babylai-bg-black/50 babylai-backdrop-blur-sm babylai-rounded-lg babylai-px-4 babylai-py-2',
-              dir === 'rtl' ? 'babylai-right-1/2 babylai-translate-x-1/2' : 'babylai-left-1/2 -babylai-translate-x-1/2'
+              'babylai:absolute babylai:top-4 babylai:z-60',
+              'babylai:bg-black/50 babylai:backdrop-blur-sm babylai:rounded-lg babylai:px-4 babylai:py-2',
+              dir === 'rtl' ? 'babylai:right-1/2 babylai:translate-x-1/2' : 'babylai:left-1/2 babylai:-translate-x-1/2'
             )}
           >
-            <span className='babylai-text-white babylai-text-sm babylai-font-medium'>
+            <span className='babylai:text-white babylai:text-sm babylai:font-medium'>
               {currentIndex + 1} / {imageUrls.length}
             </span>
           </div>
@@ -372,7 +372,7 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
 
         {/* Image Container */}
         <div
-          className='babylai-flex babylai-items-center babylai-justify-center'
+          className='babylai:flex babylai:items-center babylai:justify-center'
           style={{
             transform: `translate(${imagePosition.x}px, ${imagePosition.y}px)`,
             cursor: zoomLevel > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default',
@@ -382,7 +382,7 @@ export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
             ref={imageRef}
             src={currentImageUrl}
             alt={alt}
-            className='babylai-max-w-[90vw] babylai-max-h-[85vh] babylai-object-contain babylai-select-none'
+            className='babylai:max-w-[90vw] babylai:max-h-[85vh] babylai:object-contain babylai:select-none'
             style={{
               transform: `scale(${zoomLevel})`,
               transformOrigin: 'center center',

package/src/components/ui/index.ts

@@ -1,4 +1,3 @@
 export { ImageAttachment } from './image-attachment';
 export { ImagePreviewDialog } from './image-preview-dialog';
 export { default as AgentResponse } from './agent-response/agent-response';
-export { default as Header } from './header';

package/src/core/AblyService.ts

@@ -133,23 +133,28 @@ export class ClientAblyService {
             | null;
 
           // Extract downloadUrl from attachments (Ably now returns downloadUrl directly)
-          // Attachments can be: strings (URLs), objects with downloadUrl, or objects with id
-          const attachmentUrls = attachments
-            .map((attachment: any) => {
-              if (typeof attachment === 'string') {
-                // If it's already a string, it's a URL
-                return attachment;
-              } else if (attachment?.downloadUrl) {
-                // If it's an object with downloadUrl, use that
-                return attachment.downloadUrl;
-              } else if (attachment?.url) {
-                // Fallback to url property
-                return attachment.url;
+          // Attachments can be: strings (URLs), objects with downloadUrl, url, or id only
+          const attachmentUrls: string[] = [];
+          const attachmentIdsFromAttachments: string[] = [];
+          for (const attachment of attachments) {
+            if (typeof attachment === 'string') {
+              if (attachment.startsWith('http://') || attachment.startsWith('https://')) {
+                attachmentUrls.push(attachment);
+              } else {
+                attachmentIdsFromAttachments.push(attachment);
               }
-              // If it's an object with id, we'll need to keep it for backward compatibility
-              return null;
-            })
-            .filter((url: string | null): url is string => url !== null);
+            } else if (attachment?.downloadUrl) {
+              attachmentUrls.push(attachment.downloadUrl);
+            } else if (attachment?.url) {
+              attachmentUrls.push(attachment.url);
+            } else if (attachment?.id && typeof attachment.id === 'string') {
+              attachmentIdsFromAttachments.push(attachment.id);
+            }
+          }
+          const attachmentIds =
+            attachmentIdsFromAttachments.length > 0
+              ? attachmentIdsFromAttachments
+              : (rawData?.attachmentIds as string[] | undefined) || [];
 
           // Invoke optional action handler first (non-blocking for message processing)
           if (this.onActionReceived && actionType !== undefined) {
@@ -164,7 +169,7 @@ export class ClientAblyService {
             }
           }
 
-          onMessageReceived(messageContent, senderType, needsAgent, attachmentUrls);
+          onMessageReceived(messageContent, senderType, needsAgent, attachmentUrls, attachmentIds);
         } catch (error) {
           console.error('[AblyService] Error processing message', { error, message });
         }

package/src/core/api.ts

@@ -1,4 +1,5 @@
-import { TokenResponse, PresignUploadRequestDto, PresignUploadResponse, PresignDownloadResponse } from '../lib/types';
+import { defaultLanguage } from '@/i18n';
+import { TokenResponse, PresignUploadRequestDto, PresignUploadResponse, PresignDownloadResponse } from '@/lib/types';
 
 let getTokenFunction: (() => Promise<TokenResponse>) | undefined = undefined;
 let baseUrl: string | null = null;
@@ -136,16 +137,17 @@ export async function apiRequest(
   endpoint: string,
   method = 'GET',
   body: any = null,
-  options: { cache?: boolean; timeout?: number; language: string }
+  options: { cache?: boolean; timeout?: number; language?: 'ar' | 'en' }
 ) {
   if (!baseUrl) throw new Error('API not initialized');
 
   const url = `${baseUrl}/${endpoint}`;
   const requestKey = `${method}:${endpoint}:${JSON.stringify(body)}`;
 
-  // Check for duplicate in-flight requests
+  // Check for duplicate in-flight requests (skip for GET: callers receive Response and call .json();
+  // sharing the same Response causes "body already consumed" when the second caller parses)
   const duplicateRequest = getDuplicateRequest(requestKey);
-  if (duplicateRequest) {
+  if (duplicateRequest && method !== 'GET') {
     return duplicateRequest;
   }
 
@@ -162,7 +164,7 @@ export async function apiRequest(
     headers: {
       'Content-Type': 'application/json',
       'Cache-Control': method === 'GET' ? 'max-age=30' : 'no-cache',
-      'Accept-Language': options.language,
+      'Accept-Language': options.language || defaultLanguage,
     },
     body: body ? JSON.stringify(body) : null,
   };
@@ -218,7 +220,7 @@ export async function apiRequest(
 export async function presignUpload(
   chatSessionId: string,
   file: File,
-  language: string
+  language: 'ar' | 'en' = defaultLanguage
 ): Promise<PresignUploadResponse> {
   const requestBody: PresignUploadRequestDto = {
     name: file.name,
@@ -238,7 +240,7 @@ export async function presignUpload(
 
   return await response.json();
 }
-export async function presignDownload(fileId: string, language: string): Promise<PresignDownloadResponse> {
+export async function presignDownload(fileId: string, language: 'ar' | 'en' = defaultLanguage): Promise<PresignDownloadResponse> {
   try {
     const response = await apiRequest(`NewFile/${fileId}/presign-download`, 'GET', null, {
       language,

package/src/globals.css

@@ -1,68 +1,234 @@
-/* @tailwind base; */
-@tailwind components;
-@tailwind utilities;
-
-:root,
-:host {
-  --babylai-primary-color: #AD49E1;
-  --babylai-secondary-color: #F6ECFC;
-  --babylai-storm-dust: #3d3d3d;
-  --babylai-storm-dust-950: #262626;
-}
+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
+@import "tailwindcss" prefix(babylai);
 
-*,
-:before,
-:after {
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  box-sizing: border-box;
-}
+/* CSS Custom Properties - Light Theme (Default) */
+:root {
+  --babylai-font-sans: "Cairo", sans-serif;
+  /* Light theme colors */
+  --black-white-50: #ffffff;
+  --black-white-100: #f3f3f3;
+  --black-white-200: #e2e2e2;
+  --black-white-300: #919191;
+  --black-white-400: #606060;
+  --black-white-500: #333333;
+  --black-white-600: #1f1f1f;
+  --black-white-700: #171717;
+  --black-white-800: #0a0a0a;
+  --black-white-900: #050505;
+  --black-white-950: #000000;
+  --black-white-default: #333333;
+  --storm-dust: #3d3d3d;
+  --storm-dust-950: #262626;
+  --babylai-primary-color: #ad49e1;
+  --babylai-primary-color-100: #f6ecfc;
+  --babylai-primary-color-200: #deb6f3;
+  --babylai-primary-color-300: #d49cee;
+  --babylai-primary-color-400: #c57fea;
+  --babylai-primary-color-500: #ad49e1;
+  --babylai-primary-color-600: #672b87;
+  --babylai-primary-color-700: #451d5a;
+  --babylai-primary-color-800: #220e2d;
+  --babylai-primary-color-900: #110716;
+  --babylai-primary-color-950: #0a0310;
 
-.babylai-rotate-180 {
-  transform: rotate(180deg) !important;
+  /* Theme-aware colors - Light mode defaults */
+  --background: #ffffff;
+  --foreground: #333333;
+  --card: #ffffff;
+  --card-foreground: #333333;
+  --popover: #ffffff;
+  --popover-foreground: #333333;
+  --secondary: #f3f3f3;
+  --secondary-foreground: #333333;
+  --muted: #f3f3f3;
+  --muted-foreground: #606060;
+  --accent: #f3f3f3;
+  --accent-foreground: #333333;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --border: #e2e2e2;
+  --input: #e2e2e2;
+  --ring: var(--babylai-primary-color);
+  --radius: 0.5rem;
 }
 
-img,
-svg,
-{
-display: block;
-vertical-align: middle;
-}
+/* Tailwind v4 Theme Configuration - must come after @import */
+/* Using actual color values for build-time, CSS variables will override at runtime */
+/* postcss-disable-next-line */
+@theme {
+  /* Font Family - override Tailwind's default sans font */
+  --font-sans: "Cairo", sans-serif;
 
-img {
-  max-width: 100%;
-  height: auto;
-}
+  /* Primary Colors - default light theme values */
+  --color-primary: var(--babylai-primary-color);
+  --color-primary-100: var(--babylai-primary-color-100);
+  --color-primary-200: var(--babylai-primary-color-200);
+  --color-primary-300: var(--babylai-primary-color-300);
+  --color-primary-400: var(--babylai-primary-color-400);
+  --color-primary-500: var(--babylai-primary-color-500);
+  --color-primary-600: var(--babylai-primary-color-600);
+  --color-primary-700: var(--babylai-primary-color-700);
+  --color-primary-800: var(--babylai-primary-color-800);
+  --color-primary-900: var(--babylai-primary-color-900);
+  --color-primary-950: var(--babylai-primary-color-950);
+
+  /* Theme Colors - default light theme values */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Black-White Scale */
+  --color-black-white-50: var(--black-white-50);
+  --color-black-white-100: var(--black-white-100);
+  --color-black-white-200: var(--black-white-200);
+  --color-black-white-300: var(--black-white-300);
+  --color-black-white-400: var(--black-white-400);
+  --color-black-white-500: var(--black-white-500);
+  --color-black-white-600: var(--black-white-600);
+  --color-black-white-700: var(--black-white-700);
+  --color-black-white-800: var(--black-white-800);
+  --color-black-white-900: var(--black-white-900);
+  --color-black-white-950: var(--black-white-950);
+
+  /* Storm Dust Colors */
+  --color-storm-dust: var(--storm-dust);
+  --color-storm-dust-950: var(--storm-dust-950);
+
+  --animate-wave: wave 1.3s ease-in-out infinite;
+  --animate-circular-progress: circular-progress 2s ease-in-out infinite;
+  --animate-float: float 3s infinite ease-in-out;
+
+  @keyframes wave {
 
-/* Floating-message styles */
-@keyframes float {
+    0%,
+    60%,
+    100% {
+      transform: initial;
+    }
 
-  0%,
-  100% {
-    transform: translateY(0);
+    30% {
+      transform: translateY(-10px);
+    }
   }
 
-  50% {
-    transform: translateY(-10px);
+  @keyframes circular-progress {
+    0% {
+      stroke-dashoffset: 100.48;
+    }
+
+    50% {
+      stroke-dashoffset: 25.12;
+    }
+
+    100% {
+      stroke-dashoffset: 100.48;
+    }
   }
-}
 
-.babylai-bg-linear-to-b {
-  background: var(--babylai-primary-color);
-  background: linear-gradient(180deg, var(--babylai-primary-color) 1%, color-mix(in srgb, var(--babylai-primary-color) 1%, transparent) 100%);
+  @keyframes float {
+
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    50% {
+      transform: translateY(-10px);
+    }
+  }
 }
 
-/* Dark mode via Tailwind .dark class */
-.dark .babylai-bg-linear-to-b {
-  background: var(--babylai-storm-dust-950);
-  background: linear-gradient(180deg, var(--babylai-storm-dust-950) 1%, color-mix(in srgb, var(--babylai-storm-dust-950) 60%, transparent) 100%);
+/* Re-scope primary theme vars on widget root so primaryColor prop (inline style) wins over :root.
+   Tailwind v4 with prefix(babylai) emits --babylai-color-primary-* in utilities, so we set
+  prefixed names here so they resolve from this element. */
+.babylai-theme-root {
+  --babylai-color-primary: var(--babylai-primary-color);
+  --babylai-color-primary-100: var(--babylai-primary-color-100);
+  --babylai-color-primary-200: var(--babylai-primary-color-200);
+  --babylai-color-primary-300: var(--babylai-primary-color-300);
+  --babylai-color-primary-400: var(--babylai-primary-color-400);
+  --babylai-color-primary-500: var(--babylai-primary-color-500);
+  --babylai-color-primary-600: var(--babylai-primary-color-600);
+  --babylai-color-primary-700: var(--babylai-primary-color-700);
+  --babylai-color-primary-800: var(--babylai-primary-color-800);
+  --babylai-color-primary-900: var(--babylai-primary-color-900);
+  --babylai-color-primary-950: var(--babylai-primary-color-950);
+  --ring: var(--babylai-primary-color);
+  --color-ring: var(--babylai-primary-color);
 }
 
-/* Dark mode via browser preference */
+/* Dark theme colors */
 @media (prefers-color-scheme: dark) {
-  .babylai-bg-linear-to-b {
-    background: var(--babylai-storm-dust-950);
-    background: linear-gradient(180deg, var(--babylai-storm-dust-950) 1%, color-mix(in srgb, var(--babylai-storm-dust-950) 60%, transparent) 100%);
+  :root {
+    --black-white-50: #000000;
+    --black-white-100: #050505;
+    --black-white-200: #0a0a0a;
+    --black-white-300: #171717;
+    --black-white-400: #1f1f1f;
+    --black-white-500: #333333;
+    --black-white-600: #606060;
+    --black-white-700: #919191;
+    --black-white-800: #e2e2e2;
+    --black-white-900: #f3f3f3;
+    --black-white-950: #ffffff;
+    --black-white-default: #e2e2e2;
+    --storm-dust: #262626;
+    --storm-dust-950: #3d3d3d;
+
+    /* Theme-aware colors - Dark mode (WCAG 2.1 AA compliant) */
+    --background: #121212;
+    /* Better than pure black, reduces eye strain */
+    --foreground: #ffffff;
+    /* High contrast white text */
+    --card: #262626;
+    /* Slightly lighter than background for depth */
+    --card-foreground: #ffffff;
+    /* High contrast white text */
+    --popover: #1e1e1e;
+    /* Consistent with card background */
+    --popover-foreground: #ffffff;
+    /* High contrast white text */
+    --secondary: #3d3d3d;
+    /* Accessible secondary background */
+    --secondary-foreground: #ffffff;
+    /* High contrast white text */
+    --muted: #2a2a2a;
+    /* Accessible muted background */
+    --muted-foreground: #b3b3b3;
+    /* WCAG AA compliant contrast (4.5:1) */
+    --accent: #2a2a2a;
+    /* Accessible accent background */
+    --accent-foreground: #ffffff;
+    /* High contrast white text */
+    --destructive: #ff6b6b;
+    /* More accessible red with better contrast */
+    --destructive-foreground: #ffffff;
+    /* High contrast white text */
+    --border: #404040;
+    /* Better contrast for borders */
+    --input: var(--card);
+    /* Accessible input background */
+    --ring: var(--babylai-primary-color);
+    /* Keep primary color for focus rings */
   }
+}
+
+.bg-header {
+  background: linear-gradient(171deg,
+      color-mix(in srgb, var(--babylai-primary-color) 25%, transparent) -131.06%,
+      color-mix(in srgb, var(--black-white-50) 25%, transparent) 89.82%);
 }