@aslaluroba/help-center-react 3.2.4 → 3.2.6

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%);
 }

package/src/lib/custom-hooks/useActionHandler.ts

@@ -0,0 +1,102 @@
+import { useCallback, useRef } from 'react';
+
+export type ActionHandler = (messageData: unknown) => void | Promise<void>;
+
+export interface ActionHandlerService {
+  registerHandler(actionType: string, handler: ActionHandler): void;
+  unregisterHandler(actionType: string): void;
+  handleAction(actionType: string | undefined | null, messageData: unknown): Promise<void>;
+  getRegisteredActions(): string[];
+}
+
+export const useActionHandler = (): ActionHandlerService => {
+  const handlersRef = useRef<Map<string, ActionHandler>>(new Map());
+
+  const defaultHandlerRef = useRef<ActionHandler>((messageData) => {
+    const message = (messageData as { actionType?: string } | undefined) ?? {};
+    const actionType = message.actionType || '';
+
+    if (actionType) {
+      // Log unknown actions for debugging but do not crash
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[ActionHandler] Unknown action type received: "${actionType}". Message data:`,
+        messageData
+      );
+    }
+  });
+
+  const registerHandler = useCallback((actionType: string, handler: ActionHandler) => {
+    if (!actionType) {
+      // eslint-disable-next-line no-console
+      console.warn('[ActionHandler] Attempted to register handler with empty action type. Ignored.');
+      return;
+    }
+
+    if (handlersRef.current.has(actionType)) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[ActionHandler] Handler for action type "${actionType}" already exists. Overwriting with new handler.`
+      );
+    }
+
+    handlersRef.current.set(actionType, handler);
+  }, []);
+
+  const unregisterHandler = useCallback((actionType: string) => {
+    if (!actionType) {
+      return;
+    }
+    handlersRef.current.delete(actionType);
+  }, []);
+
+  const handleAction = useCallback(
+    async (actionType: string | undefined | null, messageData: unknown) => {
+      // Ignore empty, null, or undefined action types (no-op)
+      if (!actionType || actionType === '') {
+        return;
+      }
+
+      const handler = handlersRef.current.get(actionType);
+
+      if (handler) {
+        try {
+          await handler(messageData);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `[ActionHandler] Error executing handler for action type "${actionType}":`,
+            error
+          );
+        }
+        return;
+      }
+
+      const defaultHandler = defaultHandlerRef.current;
+      if (defaultHandler) {
+        try {
+          await Promise.resolve(defaultHandler(messageData));
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `[ActionHandler] Error executing default handler for unknown action type "${actionType}":`,
+            error
+          );
+        }
+      }
+    },
+    []
+  );
+
+  const getRegisteredActions = useCallback(() => {
+    return Array.from(handlersRef.current.keys());
+  }, []);
+
+  return {
+    registerHandler,
+    unregisterHandler,
+    handleAction,
+    getRegisteredActions,
+  };
+};
+

package/src/lib/index.ts

@@ -1,3 +1,4 @@
 export * from "./LanguageContext";
 export * from "./utils";
 export * from "./theme-utils";
+export * from "./custom-hooks/useActionHandler";

package/src/lib/theme-utils.ts

@@ -4,7 +4,6 @@
 
 export interface ThemeColors {
   primaryColor?: string;
-  secondaryColor?: string;
 }
 
 /**
@@ -12,7 +11,7 @@ export interface ThemeColors {
  */
 export const getPrimaryColorStyles = (primaryColor?: string) => {
   if (!primaryColor) return {};
-  
+
   return {
     '--babylai-primary-color': primaryColor,
     '--babylai-primary-color-100': lightenColor(primaryColor, 0.9),
@@ -28,37 +27,6 @@ export const getPrimaryColorStyles = (primaryColor?: string) => {
   } as React.CSSProperties;
 };
 
-/**
- * Generate dynamic styles for secondary color
- */
-export const getSecondaryColorStyles = (secondaryColor?: string) => {
-  if (!secondaryColor) return {};
-  
-  return {
-    '--babylai-secondary-color': secondaryColor,
-    '--babylai-secondary-color-100': lightenColor(secondaryColor, 0.9),
-    '--babylai-secondary-color-200': lightenColor(secondaryColor, 0.8),
-    '--babylai-secondary-color-300': lightenColor(secondaryColor, 0.7),
-    '--babylai-secondary-color-400': lightenColor(secondaryColor, 0.6),
-    '--babylai-secondary-color-500': secondaryColor,
-    '--babylai-secondary-color-600': darkenColor(secondaryColor, 0.1),
-    '--babylai-secondary-color-700': darkenColor(secondaryColor, 0.2),
-    '--babylai-secondary-color-800': darkenColor(secondaryColor, 0.3),
-    '--babylai-secondary-color-900': darkenColor(secondaryColor, 0.4),
-    '--babylai-secondary-color-950': darkenColor(secondaryColor, 0.5),
-  } as React.CSSProperties;
-};
-
-/**
- * Get combined theme styles
- */
-export const getThemeStyles = (colors: ThemeColors): React.CSSProperties => {
-  return {
-    ...getPrimaryColorStyles(colors.primaryColor),
-    ...getSecondaryColorStyles(colors.secondaryColor),
-  };
-};
-
 /**
  * Lighten a color by a percentage
  */

package/src/lib/types.ts

@@ -1,8 +1,7 @@
 export interface HelpCenterProps extends React.HTMLAttributes<HTMLDivElement> {
   helpScreenId: string;
   primaryColor?: string;
-  secondaryColor?: string;
-  logoUrl?: string;
+  language?: 'ar' | 'en';
 }
 
 export interface Theme {
@@ -88,7 +87,11 @@ export interface HelpScreenData {
   tenant: {
     id: string;
     name: string;
-    key: string;
+    key: string;  
+    logoUrl: string;
+    settings: {
+      description: string;
+    };
   };
   title: string;
   description: string;
@@ -125,7 +128,7 @@ export interface Option {
 }
 
 export interface ReviewProps {
-  comment: string;
+  comment?: string;
   rating: number;
 }
 

package/src/locales/ar.json

@@ -13,21 +13,31 @@
     "poweredBy": "مدعوم بواسطة",
     
     "ReviewDialog": {
-      "title": "أضف تقييمك",
-      "description": "نحن نقدر ملاحظاتك! يُرجى تخصيص لحظة لتقييم تجربتك ومشاركة آرائك في قسم التعليقات أدناه. يساعدنا تقييمك في تحسين خدماتنا ويساعد المستخدمين الآخرين في اتخاذ قرارات مستنيرة. شكرًا لك!",
+      "title": "نحن نقدر ملاحظاتك!",
+      "simple_title": "نود معرفة رأيك!",
+      "simple_description": "رأيك يساعدنا على التحسين وتقديم دعم أفضل. يُرجى تقييم تجربتك مع خدمتنا وإخبارنا كيف كان أداؤنا.",
+      "description": "رأيك يساعدنا على التحسين وتقديم دعم أفضل. يُرجى تقييم تجربتك مع خدمتنا وإخبارنا كيف كان أداؤنا.",
       "rating_label": "التقييم:",
       "comment_label": "التعليق:",
       "comment_placeholder": "اكتب تعليقك هنا...",
       "submit_button": "إرسال التقييم",
+      "rate_button": "تقييم",
       "comment_error": "يجب أن يكون التعليق بين 10 و500 حرف.",
       "rating_error": "يجب أن يكون التقييم بين 1 و5.",
       "skip_button": "تخطي"
     },
+    "InChatReview": {
+      "title": "كيف كانت محادثتك معنا اليوم؟",
+      "description": "نحب أن نعرف كيف كان أداؤنا - ملاحظاتك تساعدنا على جعل كل محادثة أفضل.",
+      "follow_up": "رائع! نحن سعداء أنك استمتعت بالدردشة معنا. هل يمكنك تقييم تجربتك الإجمالية لمساعدتنا على الحفاظ على ذلك؟",
+      "note_placeholder": "اكتب ملاحظتك",
+      "submit_button": "تقديم"
+    },
     "ConfirmationModal": {
-      "title": "تأكيد",
-      "message": "هل أنت متأكد أنك تريد إنهاء المحادثة؟",
-      "confirmation_button": "إنهاء",
-      "cancel_button": "إلغاء",
+      "title": "تريد المغادرة؟ 👋",
+      "message": "لا تقلق، يمكنك العودة في أي وقت. نحن دائما هنا إذا كنت تحتاج مساعدة أو لديك أسئلة.",
+      "confirmation_button": "إغلاق المحادثة",
+      "cancel_button": "استمرار",
       "endAndStartNewChatTitle": "إنهاء وبدء محادثة جديدة",
       "endAndStartNewChatMessage": "هل أنت متأكد أنك تريد إنهاء هذه المحادثة وبدء محادثة جديدة؟"
     }

package/src/locales/en.json

@@ -13,21 +13,31 @@
     "poweredBy": "Powered by",
 
     "ReviewDialog": {
-      "title": "Add your Review",
-      "description": "We appreciate your feedback! Please take a moment to rate your experience and share your thoughts in the comment section below. Your review helps us improve our services and assists other users in making informed decisions. Thank you!",
+      "title": "We’d Love Your Feedback!",
+      "simple_title": "We'd Love Your Feedback!",
+      "simple_description": "Your opinion helps us improve and deliver better support. Please rate your experience with our service and let us know how we did.",
+      "description": "Your opinion helps us improve and deliver better support. Please rate your experience with our service and let us know how we did.",
       "rating_label": "Rating:",
       "comment_label": "Comment:",
       "comment_placeholder": "Write your comment here...",
       "submit_button": "Submit Review",
+      "rate_button": "Rate",
       "comment_error": "Comment must be between 10 and 500 characters.",
       "rating_error": "Rating must be between 1 and 5.",
       "skip_button": "Skip"
     },
+    "InChatReview": {
+      "title": "How was your conversation with us today?",
+      "description": "We'd love to know how we did - your feedback helps us make every chat even better.",
+      "follow_up": "Awesome! We're glad you enjoyed chatting with us. Could you rate your overall experience to help us keep it that way?",
+      "note_placeholder": "Write Your Note",
+      "submit_button": "Submit Review"
+    },
     "ConfirmationModal": {
-      "title": "Confirmation",
-      "message": "Are you sure you want to end the conversation?",
-      "confirmation_button": "Confirm",
-      "cancel_button": "Cancel",
+      "title": "Leaving so soon? 👋",
+      "message": "Don't worry, you can come back anytime. We're always here if you need help or have questions.",
+      "confirmation_button": "Close Chat",
+      "cancel_button": "Continue",
       "endAndStartNewChatTitle": "End and Start New Chat",
       "endAndStartNewChatMessage": "Are you sure you want to end the current conversation and start a new one?"
     }

package/src/types/icons.d.ts

@@ -0,0 +1,6 @@
+declare module "~icons/*" {
+  import type { FC, SVGProps } from "react";
+  const Icon: FC<SVGProps<SVGSVGElement> & { title?: string }>;
+  export default Icon;
+}
+

package/src/ui/chatbot-popup/active-chat-actions.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@/components';
+import { useLocalTranslation } from '@/useLocalTranslation';
+import React from 'react';
+import SolarPlain2BoldDuotone from '~icons/solar/plain-2-bold-duotone';
+
+interface ActiveChatActionsProps {
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const ActiveChatActions: React.FC<ActiveChatActionsProps> = ({
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useLocalTranslation();
+
+  return (
+    <section className="babylai:flex babylai:justify-between babylai:gap-3 babylai:px-4 babylai:py-6 babylai:absolute babylai:left-0 babylai:right-0 babylai:bottom-11 babylai:z-20 babylai:bg-linear-to-t babylai:from-card babylai:to-transparent babylai:from-[28.32%] babylai:to-[112.59%]">
+      <Button
+        onClick={onConfirm}
+        variant='secondary'
+      >
+        {t('homeSdk.ConfirmationModal.confirmation_button')}
+
+      </Button>
+      <Button
+        onClick={onCancel}
+        variant='default'
+      >
+        {t('homeSdk.ConfirmationModal.cancel_button')}
+        <SolarPlain2BoldDuotone className="babylai:w-6 babylai:h-6" />
+      </Button>
+    </section>
+  );
+};
+
+ActiveChatActions.displayName = 'ActiveChatActions';
+
+export default ActiveChatActions;

package/src/ui/chatbot-popup/chat-window-screen/action-button.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ActionButtonProps {
+  onClick: () => void;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  ariaLabel?: string;
+  className?: string;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = ({
+  onClick,
+  icon,
+  children,
+  ariaLabel,
+  className,
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'babylai:bg-card babylai:text-card-foreground babylai:h-6 babylai:w-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:font-bold babylai:text-base babylai:ml-auto babylai:cursor-pointer',
+        className
+      )}
+      aria-label={ariaLabel}
+      type="button"
+    >
+      {icon}
+      {children}
+    </button>
+  );
+};
+
+ActionButton.displayName = 'ActionButton';
+
+export default ActionButton;