@aslaluroba/help-center-react 3.0.7 → 3.0.9

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -52,10 +52,8 @@
     "dist/index.css"
   ],
   "peerDependencies": {
-    "i18next": "^23.0.0 || ^25.0.0",
     "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
-    "react-i18next": "^13.0.0 || ^15.0.0"
+    "react-dom": "^18 || ^19"
   },
   "dependencies": {
     "@ably/chat": "^0.8.0",

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/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

@@ -17,7 +17,7 @@ interface ChatWindowHeaderProps {
 const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
   const [showMenu, setShowMenu] = useState(false);
   const { t, dir } = useLocalTranslation();
-  const isRTL = dir === "rtl";
+  const isRTL = String(dir) === "rtl";
 
   return (
     <header className="babylai-flex babylai-w-full babylai-items-center babylai-py-[18px] babylai-px-[18px] babylai-justify-between babylai-relative babylai-bg-black-white-50 dark:!babylai-bg-storm-dust-900 babylai-rounded-t-3xl">
@@ -29,17 +29,17 @@ 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">
           <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 && (
@@ -50,7 +50,7 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
                 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

@@ -1,6 +1,6 @@
 import { Button } from '@/components';
 import ArrowRight from './../../../assets/icons/arrowRight.svg';
-import ThinkingLogo from './../../../assets/thinking-logo.svg';
+import ThinkingLogo from '@/assets/thinking-logo.svg';
 import { useLocalTranslation } from '../../../useLocalTranslation';
 import CloseCircle from '../../../assets/icons/closeCirclePrimary.svg';
 
@@ -14,14 +14,12 @@ const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({
   showHelpScreen,
 }) => {
   const { dir } = useLocalTranslation();
-  const isRTL = dir === "rtl";
+  const isRTL = String(dir) === "rtl";
 
   return (
     <header
-      dir={dir}
-      className={`babylai-flex babylai-w-full babylai-items-center mb-2 ${
-        !showHelpScreen ? "babylai-justify-end" : "babylai-justify-between"
-      }`}
+      className={`babylai-flex babylai-w-full babylai-items-center babylai-mb-2 ${!showHelpScreen ? "babylai-justify-end" : "babylai-justify-between"
+        }`}
     >
       <Button
         variant="rounded-icon"
@@ -31,7 +29,7 @@ const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({
       >
         {showHelpScreen ? (
           <ArrowRight
-            className={`${isRTL ? "" : "babylai-rotate-180"}  babylai-text-primary-500 babylai-w-full babylai-h-full`}
+            className={`${!isRTL ? "" : "babylai-rotate-180"}  babylai-text-primary-500 babylai-w-full babylai-h-full`}
           />
         ) : (
           <CloseCircle className="!babylai-w-full !babylai-h-full babylai-cursor-pointer" />

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

@@ -7,8 +7,9 @@ interface OptionCardProps {
 }
 
 const OptionCard: React.FC<OptionCardProps> = (props) => {
-  const i18n = useLocalTranslation();
-  const isLTR = i18n.dir == "ltr";
+  const { dir } = useLocalTranslation();
+  const isRTL = String(dir) === "rtl";
+
   return (
     <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-2">
       <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white">
@@ -20,9 +21,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] ${
-            isLTR ? "" : "babylai-rotate-180"
-          } babylai-text-primary-500`}
+          className={`babylai-w-3 babylai-h-3 ${!isRTL ? "" : "babylai-rotate-180"} babylai-text-primary-500 dark:babylai-text-white`}
         />
       </Button>
     </div>

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-white-700 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-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}