@aslaluroba/help-center-react 3.0.4 → 3.0.5

package/dist/ui/chatbot-popup/chat-window-screen/footer.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ChatWindowFooterProps {
     inputMessage: string;
     setInputMessage: (e: string) => void;

package/dist/ui/chatbot-popup/chat-window-screen/header.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface ChatWindowHeaderProps {
     isShowList: boolean;
     setIsShowList?: (isShowList: boolean) => void;

package/dist/ui/chatbot-popup/chat-window-screen/index.d.ts

@@ -7,5 +7,5 @@ interface ChatWindowProps {
     needsAgent: boolean;
     isAblyConnected: boolean;
 }
-export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus }: ChatWindowProps) => React.JSX.Element>;
+export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus }: ChatWindowProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/ui/chatbot-popup/error-screen/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ChatBotErrorScreenProps {
     onClose: () => void;
     error: string;

package/dist/ui/chatbot-popup/home-screen/card.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface CardProps {
     text: string;
     handleClick: () => void;

package/dist/ui/chatbot-popup/home-screen/chat-now-card.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ChatNowCardProps {
     setIsShowList: (isShowList: boolean) => void;
 }

package/dist/ui/chatbot-popup/home-screen/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface HomeScreenProps {
     setIsShowList: (isShowList: boolean) => void;
     onClose: () => void;

package/dist/ui/chatbot-popup/loading-screen/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ChatBotLoadingScreenProps {
     isShowList: boolean;
     onClose: () => void;

package/dist/ui/chatbot-popup/options-list-screen/expanded-option.d.ts

@@ -1,5 +1,4 @@
 import { Option } from '@/lib/types';
-import React from 'react';
 interface ExpandedOptionProps {
     option: Option;
     handleStartChat: (option: Option) => void;

package/dist/ui/chatbot-popup/options-list-screen/header.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface OptionsListHeaderProps {
     handleBack: () => void;
     showHelpScreen: boolean;

package/dist/ui/chatbot-popup/options-list-screen/index.d.ts

@@ -1,5 +1,4 @@
 import { HelpScreenData, Option } from '@/lib/types';
-import React from 'react';
 interface OptionsListScreenProps {
     helpScreen: HelpScreenData | null;
     expandedOption: Option | null;

package/dist/ui/chatbot-popup/options-list-screen/option-card.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface OptionCardProps {
     title: string;
 }

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

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

package/dist/ui/floating-message.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 interface FloatingMessageProps {
     message: string;
     onClose: () => void;
 }
-export declare function FloatingMessage({ message, onClose }: FloatingMessageProps): React.JSX.Element;
+export declare function FloatingMessage({ message, onClose }: FloatingMessageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/help-button.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 interface HelpButtonProps {
     onClick: () => void;
 }
-export declare function HelpButton({ onClick }: HelpButtonProps): React.JSX.Element;
+export declare function HelpButton({ onClick }: HelpButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/help-center.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../globals.css';
 interface HelpCenterProps {
     helpScreenId: string;
@@ -13,5 +12,5 @@ interface HelpCenterProps {
     messageLabel?: string | null;
     showHelpScreen?: boolean;
 }
-export declare function HelpCenter({ helpScreenId, user, showArrow, language, messageLabel, showHelpScreen, }: HelpCenterProps): React.JSX.Element;
+export declare function HelpCenter({ helpScreenId, user, showArrow, language, messageLabel, showHelpScreen, }: HelpCenterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/help-popup.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { HelpScreenData, Message, Option } from '@/lib/types';
 type HelpPopupProps = {
     isOpen: boolean;
@@ -20,5 +19,5 @@ type HelpPopupProps = {
     setSelectedOption: (option: Option | null) => void;
     showHelpScreen: boolean;
 };
-export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, }: HelpPopupProps): React.JSX.Element;
+export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, }: HelpPopupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/review-dialog/index.d.ts

@@ -1,5 +1,4 @@
 import { ReviewProps } from '@/lib/types';
-import React from 'react';
 interface ReviewDialogProps {
     handleSubmit: ({ comment, rating }: ReviewProps) => void;
     onClose: () => void;

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -12,15 +12,12 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./react": {
-      "import": "./dist/react.esm.js",
-      "require": "./dist/react.js",
-      "types": "./dist/react.d.ts"
+    "./style.css": {
+      "default": "./dist/index.css"
     }
   },
   "scripts": {
     "build": "rollup -c",
-    "build:prod": "production rollup -c",
     "dev": "rollup --watch --config rollup.dev.config.js",
     "test": "jest",
     "clean": "rimraf dist",
@@ -51,26 +48,29 @@
   ],
   "author": "BabylAI",
   "license": "MIT",
+  "sideEffects": [
+    "dist/index.css"
+  ],
   "peerDependencies": {
-    "@tabler/icons-react": "^3.34.0",
-    "clsx": "^2.0.0",
     "i18next": "^23.0.0 || ^25.0.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "react-i18next": "^13.0.0 || ^15.0.0",
-    "react-markdown": "^10.0.0",
-    "tailwind-merge": "^3.0.0"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "react-i18next": "^13.0.0 || ^15.0.0"
   },
   "dependencies": {
     "@ably/chat": "^0.8.0",
     "@microsoft/signalr": "^7.0.14",
-    "ably": "^2.9.0",
-    "axios": "^1.10.0",
+    "@tabler/icons-react": "^3.34.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1",
+    "react-markdown": "^10.1.0",
+    "ably": "^2.12.0",
+    "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.4",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/core": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -81,28 +81,28 @@
     "@rollup/plugin-typescript": "^8.5.0",
     "@rollup/plugin-url": "^8.0.2",
     "@svgr/rollup": "^8.1.0",
-    "@tabler/icons-react": "^3.34.0",
+    "@tabler/icons-react": "^3.34.1",
     "@types/hast": "^3.0.4",
     "@types/node": "^16.18.126",
-    "@types/react": "^17.0.83",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "clsx": "^2.1.1",
-    "concurrently": "^9.1.2",
-    "i18next": "^25.2.1",
+    "concurrently": "^9.2.0",
+    "i18next": "^25.4.2",
     "postcss": "^8.5.6",
-    "react-i18next": "^15.5.3",
+    "react-i18next": "^15.7.2",
     "react-markdown": "^10.1.0",
     "rimraf": "^6.0.1",
     "rollup": "^2.79.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.3.2",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-rtl": "^0.9.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
-    "webpack": "^5.99.9"
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.3"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,5 +1,4 @@
 import { cn } from '../../../lib'
-import React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(

package/src/components/ui/agent-response/agent-response.tsx

@@ -1,5 +1,4 @@
 import { useTypewriter } from '@/lib/custom-hooks/useTypewriter';
-import React from 'react';
 import Markdown from 'react-markdown';
 import type { Element } from 'hast';
 

package/src/components/ui/header.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import CloseCircle from '../../assets/icons/closeCircle.svg'
 import Logo from '../../assets/logo.svg'
 

package/src/globals.css

@@ -1,4 +1,4 @@
-@tailwind base;
+/* @tailwind base; */
 @tailwind components;
 @tailwind utilities;
 

package/src/index.ts

@@ -1,5 +1,4 @@
 import { configService } from './lib/config';
-import { HelpCenter } from './ui/help-center';
 import { TokenResponse } from './lib/types';
 
 export type HelpCenterConfig = {
@@ -12,11 +11,10 @@ export function initializeHelpCenter(config: HelpCenterConfig) {
   configService.initialize(config);
 }
 
-export { HelpCenter };
+export { HelpCenter } from './ui/help-center';
 
 export * from './lib/types';
 export * from './core/ApiService';
 export * from './core/AblyService';
-// export * from './globals.css'
 
 export { TokenService } from './core/token-service';

package/src/types/svg.d.ts

@@ -1,5 +1,5 @@
-declare module '*.svg' {
-  import React from 'react'
-  const SVG: React.FC<React.SVGProps<SVGSVGElement>>
-  export default SVG
+declare module "*.svg" {
+  import type { FC, SVGProps } from "react";
+  const SVG: FC<SVGProps<SVGSVGElement> & { title?: string }>;
+  export default SVG;
 }

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

@@ -1,5 +1,4 @@
 import { Button } from '@/components';
-import React from 'react';
 import EnvelopeIcon from './../../../assets/icons/envelope.svg';
 import { useLocalTranslation } from '../../../useLocalTranslation';
 

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

@@ -1,48 +1,64 @@
-import Logo from '../../../assets/logo_ai.svg'
-import { Button } from '@/components'
-import React, { useState } from 'react'
-import ArrowRight from './../../../assets/icons/arrowRight.svg'
-import ThreeDots from './../../../assets/icons/threeDots.svg'
-import { useLocalTranslation } from '../../../useLocalTranslation'
+import Logo from "../../../assets/logo_ai.svg";
+import { Button } from "@/components";
+import React, { useState } from "react";
+import ArrowRight from "./../../../assets/icons/arrowRight.svg";
+import ThreeDots from "./../../../assets/icons/threeDots.svg";
+import { useLocalTranslation } from "../../../useLocalTranslation";
 
 interface ChatWindowHeaderProps {
-  isShowList: boolean
-  setIsShowList?: (isShowList: boolean) => void
-  showChat: boolean
-  onClose: () => void
-  handleBack: () => void
-  handleEndChat: () => void
+  isShowList: boolean;
+  setIsShowList?: (isShowList: boolean) => void;
+  showChat: boolean;
+  onClose: () => void;
+  handleBack: () => void;
+  handleEndChat: () => void;
 }
 
 const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
-  const [showMenu, setShowMenu] = useState(false)
-  const { t, i18n } = useLocalTranslation()
-  const isRTL = i18n.dir() === 'rtl'
+  const [showMenu, setShowMenu] = useState(false);
+  const { t, dir } = useLocalTranslation();
+  const isRTL = 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">
       <div className="babylai-flex babylai-items-center babylai-gap-2">
-        <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950" onClick={props.handleBack}>
-          <ArrowRight className={`!babylai-w-[12px] babylai-h-[12px] ${isRTL ? '' : 'babylai-rotate-180'} babylai-text-primary-500 dark:babylai-text-white`} />{' '}
+        <Button
+          variant="rounded-icon"
+          size="icon"
+          className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950"
+          onClick={props.handleBack}
+        >
+          <ArrowRight
+            className={`!babylai-w-[12px] babylai-h-[12px] ${isRTL ? "" : "babylai-rotate-180"} babylai-text-primary-500 dark:babylai-text-white`}
+          />{" "}
         </Button>
         <div className="babylai-relative babylai-mr-2">
-          <Button variant="rounded-icon" size="icon" className="babylai-bg-primary-500/10 dark:babylai-bg-storm-dust-950" onClick={() => setShowMenu(!showMenu)}>
+          <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" />
           </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-py-1" role="menu" aria-orientation="vertical">
+              <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"
                   role="menuitem"
                   onClick={(e) => {
-                    e.stopPropagation()
-                    props.handleEndChat()
-                    setShowMenu(false)
+                    e.stopPropagation();
+                    props.handleEndChat();
+                    setShowMenu(false);
                   }}
                 >
-                  {t('homeSdk.endChat')}
+                  {t("homeSdk.endChat")}
                 </button>
               </div>
             </div>
@@ -53,6 +69,6 @@ const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = (props) => {
         <Logo className="babylai-w-[124px] babylai-h-auto dark:babylai-text-white" />
       </div>
     </header>
-  )
-}
-export default ChatWindowHeader
+  );
+};
+export default ChatWindowHeader;

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

@@ -1,5 +1,4 @@
 import { Header } from '@/components/ui/header'
-import React from 'react'
 
 interface ChatBotErrorScreenProps {
   onClose: () => void

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

@@ -1,34 +1,34 @@
-import React from 'react';
-
 import { Button } from '@/components/shared';
 import ArrowRight from '../../../assets/icons/arrowRight.svg';
 import { useLocalTranslation } from '../../../useLocalTranslation'
 
 interface CardProps {
-    text: string;
-    handleClick: () => void
+  text: string;
+  handleClick: () => void;
 }
 
 const Card: React.FC<CardProps> = (props) => {
-    const { i18n } = useLocalTranslation();
-    const isLTR = i18n.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" >
-            <p className="babylai-text-base md:babylai-text-lg babylai-font-medium babylai-text-black-white-800">{props.text}</p>
-            <Button
-                variant="rounded-icon"
-                size="icon"
-                className="babylai-bg-primary-500 babylai-text-black-white-50 hover:babylai-bg-primary-600 md:!babylai-w-10 md:!babylai-h-10"
-                onClick={() => props.handleClick()}
-            >
-                <ArrowRight
-                    className={`babylai-w-4 babylai-h-4   ${isLTR ? '' : 'babylai-rotate-180'
-                        }`}
-                />
-
-            </Button>
-        </div>
-    )
-}
+  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">
+      <p className="babylai-text-base md:babylai-text-lg babylai-font-medium babylai-text-black-white-800">
+        {props.text}
+      </p>
+      <Button
+        variant="rounded-icon"
+        size="icon"
+        className="babylai-bg-primary-500 babylai-text-black-white-50 hover:babylai-bg-primary-600 md:!babylai-w-10 md:!babylai-h-10"
+        onClick={() => props.handleClick()}
+      >
+        <ArrowRight
+          className={`babylai-w-4 babylai-h-4   ${
+            isLTR ? "" : "babylai-rotate-180"
+          }`}
+        />
+      </Button>
+    </div>
+  );
+};
 
-export default Card
+export default Card;

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

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Button } from '@/components/shared'
 import Logo from '../../../assets/logo.svg'
 import { useLocalTranslation } from '../../../useLocalTranslation'

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

@@ -1,7 +1,6 @@
 import { Header } from '@/components/ui/header'
 import Card from '@/ui/chatbot-popup/home-screen/card'
 import ChatNowCard from '@/ui/chatbot-popup/home-screen/chat-now-card'
-import React from 'react'
 import { useLocalTranslation } from '../../../useLocalTranslation'
 
 interface HomeScreenProps {

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

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Header } from '@/components/ui/header'
 import { cn } from '@/lib'
 import animatedLogo from '../../../assets/animatedLogo.gif'

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

@@ -1,6 +1,5 @@
 import { Button, CardContent, CardFooter } from '@/components'
 import { Option } from '@/lib/types'
-import React from 'react'
 import { useLocalTranslation } from '../../../useLocalTranslation'
 
 interface ExpandedOptionProps {

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

@@ -1,5 +1,4 @@
 import { Button } from '@/components';
-import React from 'react';
 import ArrowRight from './../../../assets/icons/arrowRight.svg';
 import ThinkingLogo from './../../../assets/thinking-logo.svg';
 import { useLocalTranslation } from '../../../useLocalTranslation';
@@ -10,32 +9,35 @@ interface OptionsListHeaderProps {
   showHelpScreen: boolean;
 }
 
-const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({ handleBack, showHelpScreen }) => {
-  const { i18n } = useLocalTranslation();
-  const isRTL = i18n.dir() === 'rtl';
+const OptionsListHeader: React.FC<OptionsListHeaderProps> = ({
+  handleBack,
+  showHelpScreen,
+}) => {
+  const { dir } = useLocalTranslation();
+  const isRTL = dir === "rtl";
 
   return (
     <header
-      dir={i18n.dir()}
+      dir={dir}
       className={`babylai-flex babylai-w-full babylai-items-center mb-2 ${
-        !showHelpScreen ? 'babylai-justify-end' : 'babylai-justify-between'
+        !showHelpScreen ? "babylai-justify-end" : "babylai-justify-between"
       }`}
     >
       <Button
-        variant='rounded-icon'
-        size='icon'
-        className='!babylai-w-12 !babylai-h-12  babylai-bg-black-white-50 dark:babylai-bg-storm-dust-900 babylai-relative babylai-z-10'
+        variant="rounded-icon"
+        size="icon"
+        className="!babylai-w-12 !babylai-h-12  babylai-bg-black-white-50 dark:babylai-bg-storm-dust-900 babylai-relative babylai-z-10"
         onClick={handleBack}
       >
         {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' />
+          <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-end-1 babylai-overflow-hidden" />
     </header>
   );
 };

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

@@ -3,7 +3,6 @@ import { HelpScreenData, Option } from '@/lib/types';
 import ExpandedOption from '@/ui/chatbot-popup/options-list-screen/expanded-option';
 import OptionsListHeader from '@/ui/chatbot-popup/options-list-screen/header';
 import OptionCard from '@/ui/chatbot-popup/options-list-screen/option-card';
-import React from 'react';
 
 interface OptionsListScreenProps {
   helpScreen: HelpScreenData | null;

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

@@ -1,25 +1,32 @@
-import { Button } from '@/components';
-import React from 'react';
-import ArrowRight from '../../../assets/icons/arrowRight.svg';
-import { useTranslation  } from 'react-i18next'
+import { Button } from "@/components";
+import ArrowRight from "../../../assets/icons/arrowRight.svg";
+import { useLocalTranslation } from "@/useLocalTranslation";
 
 interface OptionCardProps {
-    title: string;
+  title: string;
 }
 
 const OptionCard: React.FC<OptionCardProps> = (props) => {
- const { i18n} = useTranslation();
-          const isLTR = i18n.dir() === 'ltr';
-    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">{props.title}</p>
-            <Button variant="rounded-icon" size="icon" 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`}/>
-            </Button>
-        </div>
-    )
-}
+  const i18n = useLocalTranslation();
+  const isLTR = i18n.dir == "ltr";
+  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">
+        {props.title}
+      </p>
+      <Button
+        variant="rounded-icon"
+        size="icon"
+        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`}
+        />
+      </Button>
+    </div>
+  );
+};
 
-export default OptionCard
+export default OptionCard;

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

@@ -1,6 +1,5 @@
 import { Button } from "@/components";
 import { useLocalTranslation } from "@/useLocalTranslation";
-import React from "react";
 
 interface ConfirmationModalProps {
     title: string;