@aslaluroba/help-center-react 3.0.8 → 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.8",
+  "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/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,10 +29,10 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
           onClick={props.handleBack}
         >
           <ArrowRight
-            className={`!babylai-w-3 babylai-h-3 ${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-me-2">
+        <div className="babylai-relative">
           <Button
             variant="rounded-icon"
             size="icon"

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 babylai-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,13 +29,13 @@ 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" />
         )}
       </Button>
-      <ThinkingLogo className="babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-right-1 babylai-overflow-hidden" />
+      <ThinkingLogo className="babylai-w-40 babylai-h-40 babylai-text-primary-500 babylai-absolute babylai-top-0 babylai-end-1 babylai-overflow-hidden" />
     </header>
   );
 };

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-3 babylai-h-3 ${
-            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>