@aslaluroba/help-center-react 3.0.6 → 3.0.8

package/dist/lib/LanguageContext.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+interface LanguageContextType {
+    language: string;
+}
+interface LanguageProviderProps {
+    children: ReactNode;
+    language: string;
+}
+export declare const LanguageProvider: React.FC<LanguageProviderProps>;
+export declare const useLanguage: () => LanguageContextType | null;
+export {};

package/dist/lib/index.d.ts

@@ -1 +1,2 @@
-export * from './utils';
+export * from "./LanguageContext";
+export * from "./utils";

package/dist/ui/confirmation-modal/index.d.ts

@@ -4,5 +4,5 @@ interface ConfirmationModalProps {
     onCancel: () => void;
     onConfirm: () => void;
 }
-declare const ConfirmationModal: ({ title, message, onCancel, onConfirm, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConfirmationModal: ({ title, message, onCancel, onConfirm }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmationModal;

package/dist/useLocalTranslation.d.ts

@@ -1,4 +1,4 @@
-export declare const useLocalTranslation: (languageFromProps?: string) => {
+export declare const useLocalTranslation: () => {
     t: (key: string) => string;
     dir: "ltr" | "rtl";
     i18n: import("i18next").i18n;

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -59,7 +59,6 @@
   },
   "dependencies": {
     "@ably/chat": "^0.8.0",
-    "@microsoft/signalr": "^7.0.14",
     "@tabler/icons-react": "^3.34.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",

package/src/components/shared/Button/button.tsx

@@ -8,14 +8,14 @@ const buttonVariants = cva(
       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',
+          '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',
+          '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: {

package/src/components/shared/Card/card.tsx

@@ -7,9 +7,9 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, variant = 'default', ...props }, ref) => {
   const 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 <div ref={ref} className={cn(variantStyles[variant], className)} {...props} />
@@ -17,27 +17,27 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, variant =
 Card.displayName = 'Card'
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  <div ref={ref} className={cn('babylai-flex babylai-flex-col babylai-space-y-1.5 babylai-p-6', className)} {...props} />
 ))
 CardHeader.displayName = 'CardHeader'
 
 const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+  <div ref={ref} className={cn('babylai-font-semibold babylai-leading-none babylai-tracking-tight', className)} {...props} />
 ))
 CardTitle.displayName = 'CardTitle'
 
 const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  <div ref={ref} className={cn('babylai-text-sm babylai-text-muted-foreground', className)} {...props} />
 ))
 CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  <div ref={ref} className={cn('babylai-p-6 babylai-pt-0', className)} {...props} />
 ))
 CardContent.displayName = 'CardContent'
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  <div ref={ref} className={cn('babylai-flex babylai-items-center babylai-p-6 babylai-pt-0', className)} {...props} />
 ))
 CardFooter.displayName = 'CardFooter'
 

package/src/index.ts

@@ -3,7 +3,6 @@ import { TokenResponse } from './lib/types';
 
 export type HelpCenterConfig = {
   baseUrl?: string;
-  hubUrl?: string;
   getToken?: () => Promise<TokenResponse>;
 };
 

package/src/lib/LanguageContext.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, ReactNode, useContext } from "react";
+
+interface LanguageContextType {
+  language: string;
+}
+
+const LanguageContext = createContext<LanguageContextType | null>(null);
+
+interface LanguageProviderProps {
+  children: ReactNode;
+  language: string;
+}
+
+export const LanguageProvider: React.FC<LanguageProviderProps> = ({
+  children,
+  language,
+}) => {
+  return (
+    <LanguageContext.Provider value={{ language }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  return context;
+};

package/src/lib/index.ts

@@ -1 +1,2 @@
-export * from './utils'
+export * from "./LanguageContext";
+export * from "./utils";

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

@@ -27,7 +27,7 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
         size='icon'
         onClick={props.handleSendMessage}
         disabled={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'
       >
         <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />
       </Button>

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

@@ -29,28 +29,28 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
           onClick={props.handleBack}
         >
           <ArrowRight
-            className={`!babylai-w-[12px] babylai-h-[12px] ${isRTL ? "" : "babylai-rotate-180"} babylai-text-primary-500 dark:babylai-text-white`}
+            className={`!babylai-w-3 babylai-h-3 ${isRTL ? "" : "babylai-rotate-180"} babylai-text-primary-500 dark:babylai-text-white`}
           />{" "}
         </Button>
-        <div className="babylai-relative babylai-mr-2">
+        <div className="babylai-relative babylai-me-2">
           <Button
             variant="rounded-icon"
             size="icon"
             className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950"
             onClick={() => setShowMenu(!showMenu)}
           >
-            <ThreeDots className="babylai-w-[14px] babylai-h-[4px] babylai-text-primary-500 dark:babylai-text-white" />
+            <ThreeDots className="babylai-w-3.5 babylai-h-1 babylai-text-primary-500 dark:babylai-text-white" />
           </Button>
 
           {showMenu && (
-            <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">
+            <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-white-700 babylai-ring-opacity-5 babylai-z-10">
               <div
                 className="babylai-py-1"
                 role="menu"
                 aria-orientation="vertical"
               >
                 <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();
@@ -65,9 +65,8 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
           )}
         </div>
       </div>
-      <div className="babylai-flex babylai-items-center babylai-gap-2 babylai-absolute babylai-left-1/2 babylai-transform babylai--translate-x-1/2">
-        <Logo className="babylai-w-[124px] babylai-h-auto dark:babylai-text-white" />
-      </div>
+
+      <Logo className="babylai-w-[124px] babylai-h-auto dark:babylai-text-white" />
     </header>
   );
 };

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

@@ -32,7 +32,7 @@ const MessageComponent = React.memo(
   }) => {
     const isFirstInSequence = index === 0 || messages[index - 1].senderType !== message.senderType;
     const isFirstHumanAgentMessage = index === firstHumanAgentIndex && message.senderType === 2;
-    const textDirection = message.senderType === 1 ? 'justify-end' : 'justify-start';
+    const textDirection = message.senderType === 1 ? 'babylai-justify-end' : 'babylai-justify-start';
 
     return (
       <div key={message.id}>

package/src/ui/chatbot-popup/error-screen/index.tsx

@@ -8,7 +8,7 @@ interface ChatBotErrorScreenProps {
 const ChatBotErrorScreen: React.FC<ChatBotErrorScreenProps> = (props) => {
   return (
     <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">
-      <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">
+      <div 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">
         <Header onClose={props.onClose} />
         <div className="babylai-flex babylai-flex-col babylai-items-center babylai-justify-center babylai-w-full babylai-h-full babylai-px-6 babylai-py-16 md:babylai-py-28">
           <div className="babylai-text-white babylai-text-lg">Error: {props.error}</div>

package/src/ui/chatbot-popup/home-screen/card.tsx

@@ -11,7 +11,7 @@ const Card: React.FC<CardProps> = (props) => {
   const { dir } = useLocalTranslation();
   const isLTR = dir === "ltr";
   return (
-    <div className="babylai-flex  babylai-items-center babylai-justify-between babylai-gap-4 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-6">
+    <div className="babylai-flex babylai-items-center babylai-justify-between babylai-gap-4 babylai-bg-black-white-50 babylai-rounded-3xl babylai-p-6">
       <p className="babylai-text-base md:babylai-text-lg babylai-font-medium babylai-text-black-white-800">
         {props.text}
       </p>

package/src/ui/chatbot-popup/home-screen/index.tsx

@@ -20,7 +20,7 @@ const HomeScreen: React.FC<HomeScreenProps> = (props) => {
   }
 
   return (
-    <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">
+    <div 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">
       <Header onClose={props.onClose} />
 
       <h1 className="babylai-text-2xl md:babylai-text-4xl babylai-font-bold babylai-text-white">
@@ -29,7 +29,7 @@ const HomeScreen: React.FC<HomeScreenProps> = (props) => {
         BabylAI 🚀
       </h1>
 
-      <div className="babylai-flex babylai-flex-col gap-3">
+      <div className="babylai-flex babylai-flex-col babylai-gap-3">
         <ChatNowCard setIsShowList={props.setIsShowList} />
 
         <Card handleClick={handleNavigateTo} text={t('homeSdk.tryBabylAi')} />

package/src/ui/chatbot-popup/loading-screen/index.tsx

@@ -12,7 +12,7 @@ const ChatBotLoadingScreen: React.FC<ChatBotLoadingScreenProps> = (props) => {
     <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">
       <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',
+          '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

package/src/ui/chatbot-popup/options-list-screen/header.tsx

@@ -19,7 +19,7 @@ const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({
   return (
     <header
       dir={dir}
-      className={`babylai-flex babylai-w-full babylai-items-center mb-2 ${
+      className={`babylai-flex babylai-w-full babylai-items-center babylai-mb-2 ${
         !showHelpScreen ? "babylai-justify-end" : "babylai-justify-between"
       }`}
     >
@@ -37,7 +37,7 @@ const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({
           <CloseCircle className="!babylai-w-full !babylai-h-full babylai-cursor-pointer" />
         )}
       </Button>
-      <ThinkingLogo className="babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-end-1 babylai-overflow-hidden" />
+      <ThinkingLogo className="babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-right-1 babylai-overflow-hidden" />
     </header>
   );
 };

package/src/ui/chatbot-popup/options-list-screen/index.tsx

@@ -30,10 +30,10 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
   };
 
   return (
-    <div className='babylai-px-8 babylai-pb-12 babylai-pt-8 babylai-overflow-y-auto  babylai-h-full'>
+    <div className='babylai-px-8 babylai-pb-12 babylai-pt-8 babylai-overflow-y-auto babylai-h-full'>
       <OptionsListHeader handleBack={handleBack} showHelpScreen={showHelpScreen} />
 
-      <h1 className='babylai-text-4xl babylai-font-bold mb-4 babylai-text-black-white-800 dark:babylai-text-white'>
+      <h1 className='babylai-text-4xl babylai-font-bold babylai-mb-4 babylai-text-black-white-800 dark:babylai-text-white'>
         {helpScreen?.title}
       </h1>
 
@@ -43,7 +43,7 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
             <Card
               key={option.id}
               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)}
             >
               <OptionCard title={option.title} />

package/src/ui/chatbot-popup/options-list-screen/option-card.tsx

@@ -20,7 +20,7 @@ const OptionCard: React.FC<OptionCardProps> = (props) => {
         className="babylai-text-primary-500 hover:babylai-bg-primary-100"
       >
         <ArrowRight
-          className={`babylai-w-[12px] babylai-h-[12px] ${
+          className={`babylai-w-3 babylai-h-3 ${
             isLTR ? "" : "babylai-rotate-180"
           } babylai-text-primary-500`}
         />

package/src/ui/confirmation-modal/index.tsx

@@ -8,7 +8,7 @@ interface ConfirmationModalProps {
     onConfirm: () => void;
 }
 
-const ConfirmationModal = ({ title, message, onCancel, onConfirm, }: ConfirmationModalProps) => {
+const ConfirmationModal = ({ title, message, onCancel, onConfirm }: ConfirmationModalProps) => {
     const { t } = useLocalTranslation();
 
     return (

package/src/ui/floating-message.tsx

@@ -13,7 +13,7 @@ export function FloatingMessage({ message, onClose }: FloatingMessageProps) {
       <div className="babylai-bg-primary-500 babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative after:babylai-content-[''] after:babylai-absolute after:babylai--bottom-[10px] after:babylai-right-5 after:babylai-w-0 after:babylai-h-0 after:babylai-border-l-[10px] after:babylai-border-r-[10px] after:babylai-border-t-[10px] after:babylai-border-l-transparent after:babylai-border-r-transparent after:babylai-border-t-primary-500">
         <p className="babylai-text-xs babylai-font-bold babylai-m-0">{message}</p>
         <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}
         >
           <CloseIcon className="babylai-w-8 babylai-h-8" />

package/src/ui/help-center.tsx

@@ -9,6 +9,7 @@ import { FloatingMessage } from './floating-message';
 import { HelpButton } from './help-button';
 import { HelpPopup } from './help-popup';
 import { defaultLanguage } from '@/i18n';
+import { LanguageProvider } from '@/lib/LanguageContext';
 
 interface HelpCenterProps {
   helpScreenId: string;
@@ -24,15 +25,14 @@ interface HelpCenterProps {
   showHelpScreen?: boolean;
 }
 
-export function HelpCenter({
+function HelpCenterContent({
   helpScreenId,
   user,
   showArrow = true,
-  language = defaultLanguage,
   messageLabel = null,
   showHelpScreen = false,
-}: HelpCenterProps) {
-  const { t } = useLocalTranslation(language);
+}: Omit<HelpCenterProps, 'language'>) {
+  const { t } = useLocalTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const [showArrowAnimation, setShowArrowAnimation] = useState(showArrow);
   const [helpScreenData, setHelpScreenData] = useState<HelpScreenData | null>(null);
@@ -309,3 +309,25 @@ export function HelpCenter({
     </div>
   );
 }
+
+// Main HelpCenter component that provides the language context
+export function HelpCenter({
+  helpScreenId,
+  user,
+  showArrow = true,
+  language = defaultLanguage,
+  messageLabel = null,
+  showHelpScreen = false,
+}: HelpCenterProps) {
+  return (
+    <LanguageProvider language={language}>
+      <HelpCenterContent
+        helpScreenId={helpScreenId}
+        user={user}
+        showArrow={showArrow}
+        messageLabel={messageLabel}
+        showHelpScreen={showHelpScreen}
+      />
+    </LanguageProvider>
+  );
+}

package/src/ui/help-popup.tsx

@@ -247,7 +247,7 @@ export function HelpPopup({
   if (status === 'loading' && !helpScreen) {
     return (
       <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]]
+        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]
      babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
 md: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'
       >
@@ -259,7 +259,7 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
   if (error) {
     return (
       <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]]
+        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]
      babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
 md: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'
       >
@@ -270,7 +270,7 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
 
   return (
     <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]
+      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]
      babylai-overflow-auto babylai-w-full babylai-bg-black-white-50 md:babylai-mb-4
 md: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'
     >

package/src/ui/review-dialog/index.tsx

@@ -52,19 +52,19 @@ const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
 
     return (
         <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">
-            <header className='border-b pb-4 babylai-flex babylai-items-center babylai-justify-between babylai-gap-4'>
+            <header className='babylai-border-b babylai-pb-4 babylai-flex babylai-items-center babylai-justify-between babylai-gap-4'>
                 <h2 className="babylai-text-lg babylai-font-semibold dark:babylai-text-white">{t('homeSdk.ReviewDialog.title')}</h2>
                 <CloseCircle className="babylai-w-6 babylai-h-6 babylai-cursor-pointer dark:babylai-text-white" onClick={props.onClose} />
             </header>
             <div className="babylai-flex babylai-flex-col babylai-gap-2">
-                <p className="babylai-text-sm babylai-text-gray-600 mb-3 dark:babylai-text-white">
+                <p className="babylai-text-sm babylai-text-gray-600 babylai-mb-3 dark:babylai-text-white">
                     {t('homeSdk.ReviewDialog.description')}
                 </p>
 
                 <div className="babylai-flex babylai-items-center babylai-gap-2">
                     <span className="babylai-text-base babylai-font-medium dark:babylai-text-white">{t('homeSdk.ReviewDialog.rating_label')}</span>
                     <Rating value={rating} onChange={handleRatingChange} />
-                    <span className={`babylai-text-sm babylai-text-red-500 transition-opacity duration-300 ${error.rating ? 'opacity-100' : 'opacity-0'}`}>
+                    <span className={`babylai-text-sm babylai-text-red-500 babylai-transition-opacity babylai-duration-300 ${error.rating ? 'babylai-opacity-100' : 'babylai-opacity-0'}`}>
                         {error.rating}
                     </span>
                 </div>
@@ -79,7 +79,7 @@ const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
                         value={comment}
                         onChange={(e) => handleCommentChange(e.target.value)}
                     />
-                    <span className={`babylai-text-sm babylai-text-red-500 transition-opacity duration-300 ${error.comment ? 'opacity-100' : 'opacity-0'}`}>
+                    <span className={`babylai-text-sm babylai-text-red-500 babylai-transition-opacity babylai-duration-300 ${error.comment ? 'babylai-opacity-100' : 'babylai-opacity-0'}`}>
                         {error.comment}
                     </span>
                 </div>
@@ -87,13 +87,13 @@ const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
 
             <footer className="babylai-flex babylai-justify-between babylai-gap-4 babylai-border-t babylai-pt-4">
                 <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}
                 >
                     {t('homeSdk.ReviewDialog.skip_button')}
                 </button>
                 <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}
                 >
                     {t('homeSdk.ReviewDialog.submit_button')}

package/src/ui/review-dialog/rating.tsx

@@ -20,9 +20,9 @@ const iconMap = {
 }
 
 const 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'
 }
 
 export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
@@ -47,7 +47,7 @@ export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
     }
 
     return (
-      <div ref={ref} className={cn('flex items-center', className)} {...props}>
+      <div ref={ref} className={cn('babylai-flex babylai-items-center', className)} {...props}>
         {[...Array(max)].map((_, index) => {
           const filled = (hoverValue !== null ? hoverValue : value) > index
 
@@ -56,9 +56,9 @@ export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
               key={index}
               className={cn(
                 sizeMap[size],
-                'cursor-pointer transition-colors',
-                filled ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300',
-                readOnly && 'cursor-default'
+                '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}

package/src/useLocalTranslation.ts

@@ -1,12 +1,13 @@
 import { useMemo } from "react";
-import { createHelpCenterI18n, defaultLanguage } from "./i18n";
+import { createHelpCenterI18n, defaultLanguage } from "@/i18n";
+import { useLanguage } from "@/lib/LanguageContext";
 
-export const useLocalTranslation = (languageFromProps?: string) => {
-  const language =
-    languageFromProps || localStorage.getItem("app-language") || defaultLanguage;
+export const useLocalTranslation = () => {
+  // Get language from context, fallback to default if not available
+  const context = useLanguage();
+  const language = context?.language || defaultLanguage;
 
   const i18n = useMemo(() => createHelpCenterI18n(language), [language]);
-
   const t = (key: string) => i18n.t(key);
   const dir = i18n.dir();
 

package/dist/core/SignalRService.d.ts

@@ -1,11 +0,0 @@
-export declare class ClientSignalRService {
-    private static connection;
-    private static isConnected;
-    private static hubUrl;
-    static initialize(hubUrl: string): void;
-    static startConnection(sessionId: string, apiKey: string, onMessageReceived: Function): Promise<void>;
-    static joinGroup(sessionId: string): Promise<void>;
-    static leaveGroup(sessionId: string): Promise<void>;
-    static stopConnection(): Promise<void>;
-    static isConnectionActive(): boolean;
-}

package/src/core/SignalRService.ts

@@ -1,83 +0,0 @@
-import * as signalR from '@microsoft/signalr';
-
-export class ClientSignalRService {
-  private static connection: signalR.HubConnection | null = null;
-  private static isConnected: boolean = false;
-  private static hubUrl: string = '';
-
-  static initialize(hubUrl: string) {
-    this.hubUrl = hubUrl;
-  }
-
-  static async startConnection(sessionId: string, apiKey: string, onMessageReceived: Function) {
-    // Prevent multiple connections
-    if (this.isConnected) return;
-
-    // Build the SignalR connection
-    this.connection = new signalR.HubConnectionBuilder()
-      .withUrl(`${this.hubUrl}/clientHub?access_token=${encodeURIComponent(apiKey)}`, {
-        withCredentials: true, // Ensure credentials are passed with the WebSocket request
-        transport: signalR.HttpTransportType.WebSockets | signalR.HttpTransportType.LongPolling,
-        headers: {
-          Authorization: `Bearer ${apiKey}`,
-        },
-      })
-      .configureLogging(signalR.LogLevel.Information)
-      .build();
-
-    // Define callback function for receiving messages
-    this.connection.on('ReceiveMessage', (message: any, senderType: number, needsAgent: boolean) => {
-      onMessageReceived(message, senderType, needsAgent);
-    });
-
-    try {
-      // Start the connection
-      await this.connection.start();
-
-      // Set the isConnected flag after the connection is fully established
-      this.isConnected = true;
-
-      // Join the session group after connection is fully established
-      await this.joinGroup(sessionId);
-    } catch (error) {
-      this.isConnected = false; // Ensure isConnected is false if connection fails
-      throw error;
-    }
-  }
-
-  static async joinGroup(sessionId: string) {
-    if (this.connection) {
-      try {
-        await this.connection.invoke('JoinGroup', sessionId);
-      } catch (error) {
-        throw error;
-      }
-    }
-  }
-
-  static async leaveGroup(sessionId: string) {
-    if (this.connection && this.isConnected) {
-      try {
-        await this.connection.invoke('LeaveGroup', sessionId);
-      } catch (error) {
-        throw error;
-      }
-    }
-  }
-
-  static async stopConnection() {
-    if (this.connection && this.isConnected) {
-      try {
-        await this.connection.stop();
-        this.isConnected = false;
-        this.connection = null;
-      } catch (error) {
-        throw error;
-      }
-    }
-  }
-
-  static isConnectionActive(): boolean {
-    return this.isConnected;
-  }
-}