@aslaluroba/help-center-react 3.0.6 → 3.0.8

package/dist/index.js

@@ -482,6 +482,24 @@ class ConfigService {
 }
 var configService = ConfigService.getInstance();
 
+var LanguageContext = /*#__PURE__*/React.createContext(null);
+var LanguageProvider = _ref => {
+  var {
+    children,
+    language
+  } = _ref;
+  return jsxRuntime.jsx(LanguageContext.Provider, {
+    value: {
+      language
+    },
+    children: children
+  });
+};
+var useLanguage = () => {
+  var context = React.useContext(LanguageContext);
+  return context;
+};
+
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 const CLASS_PART_SEPARATOR = '-';
@@ -3548,9 +3566,9 @@ var iconMap = {
   thumbsUp: IconThumbUp
 };
 var sizeMap = {
-  sm: 'w-4 h-4',
-  md: 'w-6 h-6',
-  lg: 'w-8 h-8'
+  sm: 'babylai-w-4 babylai-h-4',
+  md: 'babylai-w-6 babylai-h-6',
+  lg: 'babylai-w-8 babylai-h-8'
 };
 var Rating = /*#__PURE__*/React__namespace.forwardRef((_ref, ref) => {
   var {
@@ -3580,12 +3598,12 @@ var Rating = /*#__PURE__*/React__namespace.forwardRef((_ref, ref) => {
   };
   return jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('flex items-center', className)
+    className: cn('babylai-flex babylai-items-center', className)
   }, props), {}, {
     children: [...Array(max)].map((_, index) => {
       var filled = (hoverValue !== null ? hoverValue : value) > index;
       return jsxRuntime.jsx(Icon, {
-        className: cn(sizeMap[size], 'cursor-pointer transition-colors', filled ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300', readOnly && 'cursor-default'),
+        className: cn(sizeMap[size], 'babylai-cursor-pointer babylai-transition-colors', filled ? 'babylai-text-yellow-400 babylai-fill-yellow-400' : 'babylai-text-gray-300', readOnly && 'babylai-cursor-default'),
         onMouseEnter: () => handleMouseEnter(index + 1),
         onMouseLeave: handleMouseLeave,
         onClick: () => handleClick(index + 1),
@@ -3691,8 +3709,10 @@ var createHelpCenterI18n = function createHelpCenterI18n() {
   return instance;
 };
 
-var useLocalTranslation = languageFromProps => {
-  var language = languageFromProps || localStorage.getItem("app-language") || defaultLanguage;
+var useLocalTranslation = () => {
+  // Get language from context, fallback to default if not available
+  var context = useLanguage();
+  var language = (context === null || context === void 0 ? void 0 : context.language) || defaultLanguage;
   var i18n = React.useMemo(() => createHelpCenterI18n(language), [language]);
   var t = key => i18n.t(key);
   var dir = i18n.dir();
@@ -3777,7 +3797,7 @@ var ReviewDialog = props => {
   return jsxRuntime.jsxs("section", {
     className: "babylai-p-6 babylai-gap-6 babylai-max-w-sm babylai-max-h-[calc(100vh-90px)] babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 dark:babylai-bg-storm-dust-950 babylai-fixed babylai-bottom-20 babylai-right-0 md:babylai-right-4 babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col",
     children: [jsxRuntime.jsxs("header", {
-      className: 'border-b pb-4 babylai-flex babylai-items-center babylai-justify-between babylai-gap-4',
+      className: 'babylai-border-b babylai-pb-4 babylai-flex babylai-items-center babylai-justify-between babylai-gap-4',
       children: [jsxRuntime.jsx("h2", {
         className: "babylai-text-lg babylai-font-semibold dark:babylai-text-white",
         children: t('homeSdk.ReviewDialog.title')
@@ -3788,7 +3808,7 @@ var ReviewDialog = props => {
     }), jsxRuntime.jsxs("div", {
       className: "babylai-flex babylai-flex-col babylai-gap-2",
       children: [jsxRuntime.jsx("p", {
-        className: "babylai-text-sm babylai-text-gray-600 mb-3 dark:babylai-text-white",
+        className: "babylai-text-sm babylai-text-gray-600 babylai-mb-3 dark:babylai-text-white",
         children: t('homeSdk.ReviewDialog.description')
       }), jsxRuntime.jsxs("div", {
         className: "babylai-flex babylai-items-center babylai-gap-2",
@@ -3799,7 +3819,7 @@ var ReviewDialog = props => {
           value: rating,
           onChange: handleRatingChange
         }), jsxRuntime.jsx("span", {
-          className: "babylai-text-sm babylai-text-red-500 transition-opacity duration-300 ".concat(error.rating ? 'opacity-100' : 'opacity-0'),
+          className: "babylai-text-sm babylai-text-red-500 babylai-transition-opacity babylai-duration-300 ".concat(error.rating ? 'babylai-opacity-100' : 'babylai-opacity-0'),
           children: error.rating
         })]
       }), jsxRuntime.jsxs("div", {
@@ -3816,18 +3836,18 @@ var ReviewDialog = props => {
           value: comment,
           onChange: e => handleCommentChange(e.target.value)
         }), jsxRuntime.jsx("span", {
-          className: "babylai-text-sm babylai-text-red-500 transition-opacity duration-300 ".concat(error.comment ? 'opacity-100' : 'opacity-0'),
+          className: "babylai-text-sm babylai-text-red-500 babylai-transition-opacity babylai-duration-300 ".concat(error.comment ? 'babylai-opacity-100' : 'babylai-opacity-0'),
           children: error.comment
         })]
       })]
     }), jsxRuntime.jsxs("footer", {
       className: "babylai-flex babylai-justify-between babylai-gap-4 babylai-border-t babylai-pt-4",
       children: [jsxRuntime.jsx("button", {
-        className: "babylai-px-4 babylai-py-2 babylai-rounded-lg babylai-bg-gray-200 babylai-text-gray-700 hover:babylai-bg-gray-300 transition-all",
+        className: "babylai-px-4 babylai-py-2 babylai-rounded-lg babylai-bg-gray-200 babylai-text-gray-700 hover:babylai-bg-gray-300 babylai-transition-all",
         onClick: props.onClose,
         children: t('homeSdk.ReviewDialog.skip_button')
       }), jsxRuntime.jsx("button", {
-        className: 'babylai-px-4 babylai-py-2 babylai-rounded-lg babylai-shadow transition-all babylai-bg-primary-500 babylai-text-white hover:babylai-bg-primary-600',
+        className: 'babylai-px-4 babylai-py-2 babylai-rounded-lg babylai-shadow babylai-transition-all babylai-bg-primary-500 babylai-text-white hover:babylai-bg-primary-600',
         onClick: validateAndSubmit,
         children: t('homeSdk.ReviewDialog.submit_button')
       })]
@@ -13765,7 +13785,7 @@ function FloatingMessage(_ref) {
         className: "babylai-text-xs babylai-font-bold babylai-m-0",
         children: message
       }), jsxRuntime.jsx("button", {
-        className: "babylai-absolute babylai--top-2 babylai--right-2 babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black babylai-p-[3px] babylai-hover:bg-primary-400 babylai-hover:text-white shadow-md",
+        className: "babylai-absolute babylai--top-2 babylai--right-2 babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black-white-700 babylai-p-[3px] hover:babylai-bg-primary-400 babylai-hover:text-white babylai-shadow-md",
         onClick: onClose,
         children: jsxRuntime.jsx(CloseIcon, {
           className: "babylai-w-8 babylai-h-8"
@@ -31695,11 +31715,11 @@ var buttonVariants = cva('babylai-inline-flex babylai-items-center babylai-justi
   variants: {
     variant: {
       default: 'babylai-bg-primary-500 babylai-p-2 babylai-text-white babylai-text-xs babylai-font-semibold hover:babylai-bg-primary-600',
-      destructive: 'babylai-bg-destructive babylai-p-2 babylai-text-destructive-foreground babylai-shadow-sm babylai-hover:babylai-bg-destructive/90',
+      destructive: 'babylai-bg-destructive babylai-p-2 babylai-text-destructive-foreground babylai-shadow-sm hover:babylai-bg-destructive/90',
       outline: 'babylai-border babylai-border-primary-500 babylai-bg-background-transparent hover:babylai-border-primary-600 hover:babylai-text-primary-600 babylai-text-primary-500 babylai-font-bold',
       secondary: 'babylai-bg-secondary babylai-p-2 babylai-text-secondary-foreground babylai-shadow-sm babylai-hover:babylai-bg-secondary/80',
-      ghost: 'babylai-bg-transparent babylai-p-2 babylai-text-secondary-foreground babylai-shadow-sm babylai-hover:babylai-bg-secondary/80',
-      link: 'babylai-text-primary babylai-underline-offset-4 babylai-hover:babylai-underline',
+      ghost: 'babylai-bg-transparent babylai-p-2 babylai-text-secondary-foreground babylai-shadow-sm hover:babylai-bg-secondary/80',
+      link: 'babylai-text-primary babylai-underline-offset-4 hover:babylai-underline',
       'rounded-icon': '!babylai-p-2'
     },
     size: {
@@ -31746,9 +31766,9 @@ var Card$2 = /*#__PURE__*/React__namespace.forwardRef((_ref, ref) => {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded$9);
   var variantStyles = {
-    default: 'rounded-xl border bg-card text-card-foreground shadow',
-    rounded: 'rounded-3xl bg-black-white-50 py-4 px-3',
-    shadowed: 'rounded-xl border bg-card text-card-foreground shadow-lg'
+    default: 'babylai-rounded-xl babylai-border babylai-bg-card babylai-text-card-foreground babylai-shadow',
+    rounded: 'babylai-rounded-3xl babylai-bg-black-white-50 babylai-py-4 babylai-px-3',
+    shadowed: 'babylai-rounded-xl babylai-border babylai-bg-card babylai-text-card-foreground babylai-shadow-lg'
   };
   return jsxRuntime.jsx("div", _objectSpread2({
     ref: ref,
@@ -31763,7 +31783,7 @@ var CardHeader = /*#__PURE__*/React__namespace.forwardRef((_ref2, ref) => {
     props = _objectWithoutProperties(_ref2, _excluded2);
   return jsxRuntime.jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('flex flex-col space-y-1.5 p-6', className)
+    className: cn('babylai-flex babylai-flex-col babylai-space-y-1.5 babylai-p-6', className)
   }, props));
 });
 CardHeader.displayName = 'CardHeader';
@@ -31774,7 +31794,7 @@ var CardTitle = /*#__PURE__*/React__namespace.forwardRef((_ref3, ref) => {
     props = _objectWithoutProperties(_ref3, _excluded3);
   return jsxRuntime.jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('font-semibold leading-none tracking-tight', className)
+    className: cn('babylai-font-semibold babylai-leading-none babylai-tracking-tight', className)
   }, props));
 });
 CardTitle.displayName = 'CardTitle';
@@ -31785,7 +31805,7 @@ var CardDescription = /*#__PURE__*/React__namespace.forwardRef((_ref4, ref) => {
     props = _objectWithoutProperties(_ref4, _excluded4);
   return jsxRuntime.jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('text-sm text-muted-foreground', className)
+    className: cn('babylai-text-sm babylai-text-muted-foreground', className)
   }, props));
 });
 CardDescription.displayName = 'CardDescription';
@@ -31796,7 +31816,7 @@ var CardContent = /*#__PURE__*/React__namespace.forwardRef((_ref5, ref) => {
     props = _objectWithoutProperties(_ref5, _excluded5);
   return jsxRuntime.jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('p-6 pt-0', className)
+    className: cn('babylai-p-6 babylai-pt-0', className)
   }, props));
 });
 CardContent.displayName = 'CardContent';
@@ -31807,7 +31827,7 @@ var CardFooter = /*#__PURE__*/React__namespace.forwardRef((_ref6, ref) => {
     props = _objectWithoutProperties(_ref6, _excluded6);
   return jsxRuntime.jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('flex items-center p-6 pt-0', className)
+    className: cn('babylai-flex babylai-items-center babylai-p-6 babylai-pt-0', className)
   }, props));
 });
 CardFooter.displayName = 'CardFooter';
@@ -31857,7 +31877,7 @@ var ChatWindowFooter = props => {
       size: 'icon',
       onClick: props.handleSendMessage,
       disabled: props === null || props === void 0 ? void 0 : props.isLoading,
-      className: 'babylai-rounded-full babylai-bg-purple-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 babylai-disabled:babylai-opacity-50',
+      className: 'babylai-rounded-full babylai-bg-purple-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 disabled:babylai-opacity-50',
       children: jsxRuntime.jsx(EnvelopeIcon, {
         className: "babylai-w-4 babylai-h-4 ".concat(dir === 'rtl' ? 'babylai-rotate-270' : '')
       })
@@ -31937,7 +31957,7 @@ var MessageComponent = /*#__PURE__*/React__default["default"].memo(_ref => {
   } = _ref;
   var isFirstInSequence = index === 0 || messages[index - 1].senderType !== message.senderType;
   var isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2;
-  var textDirection = message.senderType === 1 ? 'justify-end' : 'justify-start';
+  var textDirection = message.senderType === 1 ? 'babylai-justify-end' : 'babylai-justify-start';
   return jsxRuntime.jsxs("div", {
     children: [isFirstHumanAgentMessage && jsxRuntime.jsx("div", {
       className: 'babylai-flex babylai-justify-center babylai-items-center babylai-my-4',
@@ -32204,26 +32224,26 @@ var ChatWindowHeader = props => {
         className: "babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950",
         onClick: props.handleBack,
         children: [jsxRuntime.jsx(ArrowRight, {
-          className: "!babylai-w-[12px] babylai-h-[12px] ".concat(isRTL ? "" : "babylai-rotate-180", " babylai-text-primary-500 dark:babylai-text-white")
+          className: "!babylai-w-3 babylai-h-3 ".concat(isRTL ? "" : "babylai-rotate-180", " babylai-text-primary-500 dark:babylai-text-white")
         }), " "]
       }), jsxRuntime.jsxs("div", {
-        className: "babylai-relative babylai-mr-2",
+        className: "babylai-relative babylai-me-2",
         children: [jsxRuntime.jsx(Button, {
           variant: "rounded-icon",
           size: "icon",
           className: "babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950",
           onClick: () => setShowMenu(!showMenu),
           children: jsxRuntime.jsx(ThreeDots, {
-            className: "babylai-w-[14px] babylai-h-[4px] babylai-text-primary-500 dark:babylai-text-white"
+            className: "babylai-w-3.5 babylai-h-1 babylai-text-primary-500 dark:babylai-text-white"
           })
         }), showMenu && jsxRuntime.jsx("div", {
-          className: "babylai-absolute babylai-top-10 babylai-start-0 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white dark:!babylai-bg-storm-dust-950 babylai-ring-1 babylai-ring-black babylai-ring-opacity-5 babylai-z-10",
+          className: "babylai-absolute babylai-top-10 babylai-start-0 babylai-w-48 babylai-rounded-md babylai-shadow-lg babylai-bg-white dark:!babylai-bg-storm-dust-950 babylai-ring-1 babylai-ring-black-white-700 babylai-ring-opacity-5 babylai-z-10",
           children: jsxRuntime.jsx("div", {
             className: "babylai-py-1",
             role: "menu",
             "aria-orientation": "vertical",
             children: jsxRuntime.jsx("button", {
-              className: "babylai-block babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 dark:babylai-text-white babylai-hover:babylai-bg-gray-100 babylai-w-full babylai-text-left",
+              className: "babylai-block babylai-px-4 babylai-py-2 babylai-text-sm babylai-text-gray-700 dark:babylai-text-white hover:babylai-bg-gray-100 babylai-w-full babylai-text-start",
               role: "menuitem",
               onClick: e => {
                 e.stopPropagation();
@@ -32235,11 +32255,8 @@ var ChatWindowHeader = props => {
           })
         })]
       })]
-    }), jsxRuntime.jsx("div", {
-      className: "babylai-flex babylai-items-center babylai-gap-2 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2",
-      children: jsxRuntime.jsx(Logo, {
-        className: "babylai-w-[124px] babylai-h-auto dark:babylai-text-white"
-      })
+    }), jsxRuntime.jsx(Logo, {
+      className: "babylai-w-[124px] babylai-h-auto dark:babylai-text-white"
     })]
   });
 };
@@ -32264,7 +32281,7 @@ var ChatBotErrorScreen = props => {
   return jsxRuntime.jsx("div", {
     className: "babylai-w-full babylai-h-full babylai-bg-black-white-50 babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col",
     children: jsxRuntime.jsxs("div", {
-      className: "h-full  babylai-rounded-3xl babylai-flex babylai-flex-col babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60 babylai-py-6 md:babylai-py-8 babylai-px-6 gap-4 md:gap-8",
+      className: "babylai-h-full babylai-rounded-3xl babylai-flex babylai-flex-col babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60 babylai-py-6 md:babylai-py-8 babylai-px-6 babylai-gap-4 md:babylai-gap-8",
       children: [jsxRuntime.jsx(Header, {
         onClose: props.onClose
       }), jsxRuntime.jsx("div", {
@@ -32285,7 +32302,7 @@ var Card = props => {
   } = useLocalTranslation();
   var isLTR = dir === "ltr";
   return jsxRuntime.jsxs("div", {
-    className: "babylai-flex  babylai-items-center babylai-justify-between babylai-gap-4 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-6",
+    className: "babylai-flex babylai-items-center babylai-justify-between babylai-gap-4 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-6",
     children: [jsxRuntime.jsx("p", {
       className: "babylai-text-base md:babylai-text-lg babylai-font-medium babylai-text-black-white-800",
       children: props.text
@@ -32347,14 +32364,14 @@ var HomeScreen = props => {
     window.location.href = url.toString();
   };
   return jsxRuntime.jsxs("div", {
-    className: "babylai-h-full babylai-flex babylai-flex-col babylai-overflow-y-auto babylai-py-6 md:babylai-py-8 babylai-px-6 gap-4 md:gap-8",
+    className: "babylai-h-full babylai-flex babylai-flex-col babylai-overflow-y-auto babylai-py-6 md:babylai-py-8 babylai-px-6 babylai-gap-4 md:babylai-gap-8",
     children: [jsxRuntime.jsx(Header, {
       onClose: props.onClose
     }), jsxRuntime.jsxs("h1", {
       className: "babylai-text-2xl md:babylai-text-4xl babylai-font-bold babylai-text-white",
       children: [t('homeSdk.chatTitle'), jsxRuntime.jsx("br", {}), "BabylAI \uD83D\uDE80"]
     }), jsxRuntime.jsxs("div", {
-      className: "babylai-flex babylai-flex-col gap-3",
+      className: "babylai-flex babylai-flex-col babylai-gap-3",
       children: [jsxRuntime.jsx(ChatNowCard$1, {
         setIsShowList: props.setIsShowList
       }), jsxRuntime.jsx(Card$1, {
@@ -32373,7 +32390,7 @@ var ChatBotLoadingScreen = props => {
   return jsxRuntime.jsx("div", {
     className: "babylai-w-full babylai-h-full babylai-bg-black-white-50 dark:babylai-bg-storm-dust-950 babylai-rounded-3xl babylai-shadow-lg babylai-flex babylai-flex-col",
     children: jsxRuntime.jsxs("div", {
-      className: cn('babylai-rounded-3xl babylai-h-full babylai-flex babylai-flex-col babylai-py-6 md:babylai-py-8 babylai-px-6 gap-4 md:gap-8', {
+      className: cn('babylai-rounded-3xl babylai-h-full babylai-flex babylai-flex-col babylai-py-6 md:babylai-py-8 babylai-px-6 babylai-gap-4 md:babylai-gap-8', {
         'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': !props.isShowList,
         'babylai-bg-black-white-100 dark:babylai-bg-storm-dust-950': props.isShowList
       }),
@@ -32485,7 +32502,7 @@ var OptionsListHeader = _ref => {
   var isRTL = dir === "rtl";
   return jsxRuntime.jsxs("header", {
     dir: dir,
-    className: "babylai-flex babylai-w-full babylai-items-center mb-2 ".concat(!showHelpScreen ? "babylai-justify-end" : "babylai-justify-between"),
+    className: "babylai-flex babylai-w-full babylai-items-center babylai-mb-2 ".concat(!showHelpScreen ? "babylai-justify-end" : "babylai-justify-between"),
     children: [jsxRuntime.jsx(Button, {
       variant: "rounded-icon",
       size: "icon",
@@ -32497,7 +32514,7 @@ var OptionsListHeader = _ref => {
         className: "!babylai-w-full !babylai-h-full babylai-cursor-pointer"
       })
     }), jsxRuntime.jsx(ThinkingLogo, {
-      className: "babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-end-1 babylai-overflow-hidden"
+      className: "babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-right-1 babylai-overflow-hidden"
     })]
   });
 };
@@ -32516,7 +32533,7 @@ var OptionCard = props => {
       size: "icon",
       className: "babylai-text-primary-500 hover:babylai-bg-primary-100",
       children: jsxRuntime.jsx(ArrowRight, {
-        className: "babylai-w-[12px] babylai-h-[12px] ".concat(isLTR ? "" : "babylai-rotate-180", " babylai-text-primary-500")
+        className: "babylai-w-3 babylai-h-3 ".concat(isLTR ? "" : "babylai-rotate-180", " babylai-text-primary-500")
       })
     })]
   });
@@ -32541,18 +32558,18 @@ var OptionsListScreen = _ref => {
     }
   };
   return jsxRuntime.jsxs("div", {
-    className: 'babylai-px-8 babylai-pb-12 babylai-pt-8 babylai-overflow-y-auto  babylai-h-full',
+    className: 'babylai-px-8 babylai-pb-12 babylai-pt-8 babylai-overflow-y-auto babylai-h-full',
     children: [jsxRuntime.jsx(OptionsListHeader$1, {
       handleBack: handleBack,
       showHelpScreen: showHelpScreen
     }), jsxRuntime.jsx("h1", {
-      className: 'babylai-text-4xl babylai-font-bold mb-4 babylai-text-black-white-800 dark:babylai-text-white',
+      className: 'babylai-text-4xl babylai-font-bold babylai-mb-4 babylai-text-black-white-800 dark:babylai-text-white',
       children: helpScreen === null || helpScreen === void 0 ? void 0 : helpScreen.title
     }), helpScreen && jsxRuntime.jsx("div", {
       className: 'babylai-flex babylai-flex-col babylai-gap-3 babylai-mt-3 babylai-mb-3',
       children: (_a = helpScreen === null || helpScreen === void 0 ? void 0 : helpScreen.options) === null || _a === void 0 ? void 0 : _a.map(option => jsxRuntime.jsxs(Card$2, {
         variant: 'rounded',
-        className: 'babylai-cursor-pointer babylai-transition-all babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-1 dark:!babylai-bg-storm-dust-900',
+        className: 'babylai-cursor-pointer babylai-transition-all hover:babylai-shadow-md !babylai-px-2 !babylai-py-1 dark:!babylai-bg-storm-dust-900',
         onClick: () => handleToggleExpandOption(option),
         children: [jsxRuntime.jsx(OptionCard$1, {
           title: option.title
@@ -32820,7 +32837,7 @@ function HelpPopup(_ref) {
   // Early returns for performance - moved after all hooks
   if (status === 'loading' && !helpScreen) {
     return jsxRuntime.jsx("div", {
-      className: 'babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px) babylai-max-h-[800px]]\n     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4\nmd:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col',
+      className: 'babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-h-[calc(100vh-240px)] babylai-max-h-[800px]\n     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4\nmd:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col',
       children: jsxRuntime.jsx(ChatBotLoadingScreen$1, {
         isShowList: isShowList,
         onClose: onClose
@@ -32829,7 +32846,7 @@ function HelpPopup(_ref) {
   }
   if (error) {
     return jsxRuntime.jsx("div", {
-      className: 'babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px) babylai-max-h-[800px]]\n     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4\nmd:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col',
+      className: 'babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-h-[calc(100vh-240px)] babylai-max-h-[800px]\n     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4\nmd:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col',
       children: jsxRuntime.jsx(ChatBotErrorScreen$1, {
         onClose: onClose,
         error: error || ''
@@ -32837,7 +32854,7 @@ function HelpPopup(_ref) {
     });
   }
   return jsxRuntime.jsx("div", {
-    className: 'babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)] babylai-max-h-[800px]\n     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4\nmd:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col',
+    className: 'babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-h-[calc(100vh-240px)] babylai-max-h-[800px]\n     babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4\nmd:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-rounded-3xl babylai-shadow-lg babylai-z-50 babylai-flex babylai-flex-col',
     children: jsxRuntime.jsxs("div", {
       className: cn('babylai-h-full babylai-rounded-none md:babylai-rounded-3xl babylai-flex babylai-flex-col babylai-relative', {
         'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': !isShowList,
@@ -32853,18 +32870,17 @@ function HelpPopup(_ref) {
   });
 }
 
-function HelpCenter(_ref) {
+function HelpCenterContent(_ref) {
   var {
     helpScreenId,
     user,
     showArrow = true,
-    language = defaultLanguage,
     messageLabel = null,
     showHelpScreen = false
   } = _ref;
   var {
     t
-  } = useLocalTranslation(language);
+  } = useLocalTranslation();
   var [isOpen, setIsOpen] = React.useState(false);
   var [showArrowAnimation, setShowArrowAnimation] = React.useState(showArrow);
   var [helpScreenData, setHelpScreenData] = React.useState(null);
@@ -33114,6 +33130,27 @@ function HelpCenter(_ref) {
     })]
   });
 }
+// Main HelpCenter component that provides the language context
+function HelpCenter(_ref8) {
+  var {
+    helpScreenId,
+    user,
+    showArrow = true,
+    language = defaultLanguage,
+    messageLabel = null,
+    showHelpScreen = false
+  } = _ref8;
+  return jsxRuntime.jsx(LanguageProvider, {
+    language: language,
+    children: jsxRuntime.jsx(HelpCenterContent, {
+      helpScreenId: helpScreenId,
+      user: user,
+      showArrow: showArrow,
+      messageLabel: messageLabel,
+      showHelpScreen: showHelpScreen
+    })
+  });
+}
 
 function bind(fn, thisArg) {
   return function wrap() {