@aslaluroba/help-center-react 3.2.5 → 3.2.6

package/dist/ui/chatbot-popup/active-chat-actions.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ActiveChatActionsProps {
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+export declare const ActiveChatActions: React.FC<ActiveChatActionsProps>;
+export default ActiveChatActions;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ActionButtonProps {
+    onClick: () => void;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    ariaLabel?: string;
+    className?: string;
+}
+declare const ActionButton: React.FC<ActionButtonProps>;
+export default ActionButton;

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

@@ -4,6 +4,7 @@ interface ChatWindowFooterProps {
     setInputMessage: (e: string) => void;
     handleSendMessage: (attachmentIds: string[]) => void;
     isLoading: boolean;
+    isChatClosed?: boolean;
     onEnsureSession: () => Promise<string>;
     sessionId?: string | null;
 }

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

@@ -1,12 +1,9 @@
 import React from "react";
 interface ChatWindowHeaderProps {
-    isShowList: boolean;
-    setIsShowList?: (isShowList: boolean) => void;
-    showChat: boolean;
-    onClose: () => void;
     handleBack: () => void;
     handleEndChat: () => void;
-    logoUrl?: string;
+    handleMinimize: () => void;
+    optionTitle: string;
 }
 declare const ChatWindowHeader: React.FC<ChatWindowHeaderProps>;
 export default ChatWindowHeader;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ReviewProps } from '@/lib/types';
+interface InChatReviewProps {
+    onSubmit: (payload: ReviewProps) => void | Promise<void>;
+    onDone?: () => void;
+    isSubmitting?: boolean;
+}
+export declare const InChatReview: React.FC<InChatReviewProps>;
+export {};

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

@@ -1,4 +1,4 @@
-import { Message } from '@/lib/types';
+import { Message, ReviewProps } from '@/lib/types';
 import React from 'react';
 interface ChatWindowProps {
     onSendMessage: (message: string, attachmentIds: string[]) => void;
@@ -6,8 +6,12 @@ interface ChatWindowProps {
     messages: Message[];
     assistantStatus: string;
     needsAgent: boolean;
-    isAblyConnected: boolean;
     sessionId?: string | null;
+    isChatClosed?: boolean;
+    inChatReviewSessionId?: string | null;
+    isSubmittingReview?: boolean;
+    onInChatReviewSubmit?: (payload: ReviewProps) => void | Promise<void>;
+    onInChatReviewDone?: () => void;
 }
-export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, onEnsureSession, messages, assistantStatus, needsAgent, sessionId, }: ChatWindowProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, onEnsureSession, messages, assistantStatus, needsAgent, sessionId, isChatClosed, inChatReviewSessionId, isSubmittingReview, onInChatReviewSubmit, onInChatReviewDone, }: ChatWindowProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TypingIndicatorProps {
+    firstHumanAgentIndex: number;
+}
+export declare const TypingIndicator: React.MemoExoticComponent<({ firstHumanAgentIndex }: TypingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null>;
+export default TypingIndicator;

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

@@ -1,7 +1,6 @@
 interface ChatBotErrorScreenProps {
     onClose: () => void;
     error: string;
-    logoUrl?: string;
 }
 declare const ChatBotErrorScreen: React.FC<ChatBotErrorScreenProps>;
 export default ChatBotErrorScreen;

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

@@ -1,7 +1,5 @@
 interface ChatBotLoadingScreenProps {
-    isShowList: boolean;
     onClose: () => void;
-    logoUrl?: string;
 }
 declare const ChatBotLoadingScreen: React.FC<ChatBotLoadingScreenProps>;
 export default ChatBotLoadingScreen;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CompanyCardProps {
+    logoUrl?: string;
+    name?: string;
+    description?: string;
+    title?: string;
+}
+declare const CompanyCard: React.FC<CompanyCardProps>;
+export default CompanyCard;

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

@@ -1,6 +1,5 @@
 interface OptionsListHeaderProps {
-    handleBack: () => void;
-    showHelpScreen: boolean;
+    onMinimize: () => void;
 }
 declare const OptionsListHeader: React.FC<OptionsListHeaderProps>;
 export default OptionsListHeader;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface HelpscreenIntroProps {
+    title?: string | null;
+}
+declare const HelpscreenIntro: React.FC<HelpscreenIntroProps>;
+export default HelpscreenIntro;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Option } from '@/lib/types';
+interface HelpscreenListProps {
+    options: Option[] | undefined;
+    selectedOption: Option | null;
+    onToggleOption: (option: Option) => void;
+    onStartChat: () => void;
+}
+declare const HelpscreenList: React.FC<HelpscreenListProps>;
+export default HelpscreenList;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Option } from '@/lib/types';
+interface HelpscreenOptionProps {
+    option: Option;
+    isSelected: boolean;
+    onClick: () => void;
+}
+declare const HelpscreenOption: React.FC<HelpscreenOptionProps>;
+export default HelpscreenOption;

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

@@ -1,11 +1,8 @@
 import { HelpScreenData, Option } from '@/lib/types';
 interface OptionsListScreenProps {
     helpScreen: HelpScreenData | null;
-    expandedOption: Option | null;
-    setExpandedOption: (option: Option | null) => void;
     handleStartChat: (option: Option) => void;
-    handleBack: () => void;
-    showHelpScreen: boolean;
+    handleMinimize: () => void;
 }
 declare const OptionsListScreen: React.FC<OptionsListScreenProps>;
 export default OptionsListScreen;

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

@@ -1,7 +1,7 @@
 import '../globals.css';
 interface HelpCenterProps {
     helpScreenId: string;
-    language: string;
+    language?: 'ar' | 'en';
     user?: {
         id?: string;
         name?: string;
@@ -10,10 +10,7 @@ interface HelpCenterProps {
     };
     showArrow?: boolean;
     messageLabel?: string | null;
-    showHelpScreen?: boolean;
     primaryColor?: string;
-    secondaryColor?: string;
-    logoUrl?: string;
 }
-declare const HelpCenter: ({ helpScreenId, user, showArrow, language, messageLabel, showHelpScreen, primaryColor, secondaryColor, logoUrl, }: HelpCenterProps) => import("react/jsx-runtime").JSX.Element;
+declare const HelpCenter: ({ helpScreenId, user, showArrow, language, messageLabel, primaryColor, }: HelpCenterProps) => import("react/jsx-runtime").JSX.Element;
 export default HelpCenter;

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

@@ -1,25 +1,34 @@
-import { HelpScreenData, Message, Option } from '@/lib/types';
+import { HelpScreenData, Message, Option, ReviewProps } from '@/lib/types';
 type HelpPopupProps = {
     isOpen: boolean;
     onClose: () => void;
     helpScreen: HelpScreenData | null;
     status: string;
     error: string | null;
-    user: any;
+    user: unknown;
     onStartChat: (option: Option) => void;
     onSendMessage: (message: string, attachmentIds: string[]) => void;
     onEnsureSession: () => Promise<string>;
-    onEndChat: (option?: Option) => void;
+    onEndChat: (options?: {
+        fromChatScreen?: boolean;
+    }) => void | Promise<void>;
     messages: Message[];
     needsAgent: boolean;
     assistantStatus: string;
     sessionId: string | null;
     isChatClosed: boolean;
-    isAblyConnected: boolean;
     selectedOption: Option | null;
     setSelectedOption: (option: Option | null) => void;
-    showHelpScreen: boolean;
-    logoUrl?: string;
+    inChatReviewSessionId?: string | null;
+    onInChatReviewSubmit?: (payload: ReviewProps) => void | Promise<void>;
+    onInChatReviewDone?: () => void;
+    navigateToOptionsListAfterReview?: boolean;
+    onNavigatedToOptionsList?: () => void;
+    isReviewDialogOpen?: boolean;
+    reviewSessionId?: string | null;
+    isSubmittingReview?: boolean;
+    onReviewDialogSubmit?: (payload: ReviewProps) => void | Promise<void>;
+    onReviewDialogClose?: () => void;
 };
-declare const HelpPopup: ({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEnsureSession, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, logoUrl, }: HelpPopupProps) => import("react/jsx-runtime").JSX.Element;
+declare const HelpPopup: ({ isOpen, onClose, helpScreen, status, error, onStartChat, onSendMessage, onEnsureSession, onEndChat, messages, assistantStatus, needsAgent, sessionId, isChatClosed, selectedOption, setSelectedOption, inChatReviewSessionId, onInChatReviewSubmit, onInChatReviewDone, navigateToOptionsListAfterReview, onNavigatedToOptionsList, isReviewDialogOpen, reviewSessionId, isSubmittingReview, onReviewDialogSubmit, onReviewDialogClose, }: HelpPopupProps) => import("react/jsx-runtime").JSX.Element;
 export default HelpPopup;

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

@@ -1,7 +1,8 @@
 import { ReviewProps } from '@/lib/types';
 interface ReviewDialogProps {
-    handleSubmit: ({ comment, rating }: ReviewProps) => void;
+    handleSubmit: ({ rating }: ReviewProps) => void;
     onClose: () => void;
+    isSubmitting?: boolean;
 }
 declare const ReviewDialog: React.FC<ReviewDialogProps>;
 export default ReviewDialog;

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.2.5",
+  "version": "3.2.6",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -23,7 +23,7 @@
   },
   "scripts": {
     "build": "rollup -c",
-    "dev": "rollup --watch --config rollup.dev.config.js",
+    "dev": "rollup --watch --config rollup.dev.config.mjs",
     "test": "jest",
     "clean": "rimraf dist",
     "version:patch": "npm version patch --no-git-tag-version",
@@ -42,9 +42,8 @@
     "globals.css",
     "package.json",
     "tsconfig.json",
-    "./tailwind.config.js",
     "./postcss.config.js",
-    "./rollup.config.js"
+    "./rollup.config.mjs"
   ],
   "keywords": [
     "help-center",
@@ -63,50 +62,57 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@ably/chat": "^0.8.0",
-    "@tabler/icons-react": "^3.35.0",
-    "ably": "^2.13.0",
-    "axios": "^1.12.2",
+    "@ably/chat": "^1.1.1",
+    "@tabler/icons-react": "^3.36.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "ably": "^2.17.1",
+    "axios": "^1.13.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "react-markdown": "^10.1.0",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^21.1.0",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@iconify-json/ic": "^1.2.4",
+    "@iconify-json/material-symbols": "^1.2.53",
+    "@iconify-json/solar": "^1.2.5",
+    "@rollup/plugin-alias": "^6.0.0",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.5.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/rollup": "^8.1.0",
-    "@tabler/icons-react": "^3.35.0",
+    "@tabler/icons-react": "^3.36.1",
     "@types/hast": "^3.0.4",
-    "@types/node": "^16.18.126",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "autoprefixer": "^10.4.21",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.24",
     "babel-loader": "^10.0.0",
     "clsx": "^2.1.1",
     "concurrently": "^9.2.1",
-    "i18next": "^25.5.2",
+    "i18next": "^25.8.0",
     "postcss": "^8.5.6",
-    "react-i18next": "^15.7.3",
+    "react-i18next": "^16.5.4",
     "react-markdown": "^10.1.0",
-    "rimraf": "^6.0.1",
-    "rollup": "^2.79.2",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.57.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^4.1.18",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-rtl": "^0.9.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
-    "webpack": "^5.101.3"
+    "typescript": "^5.9.3",
+    "unplugin-icons": "^23.0.1",
+    "webpack": "^5.104.1"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,32 +2,25 @@ import { cn } from '../../../lib'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const buttonVariants = cva(
-  'babylai-inline-flex babylai-items-center babylai-justify-center babylai-gap-2 babylai-whitespace-nowrap babylai-rounded-full babylai-text-sm babylai-font-medium babylai-transition-colors focus-visible:babylai-outline-none focus-visible:babylai-ring-1 focus-visible:babylai-ring-ring disabled:babylai-pointer-events-none disabled:babylai-opacity-50 [&_svg]:babylai-pointer-events-none [&_svg]:babylai-size-3 [&_svg]:babylai-shrink-0',
+  'babylai:border babylai:disabled:bg-black-white-300 babylai:cursor-pointer babylai:text-xl babylai:transition-all babylai:w-full babylai:disabled:border-black-white-300 babylai:disabled:cursor-not-allowed babylai:disabled:text-white babylai:duration-200 babylai:ease-out babylai:flex babylai:gap-1 babylai:items-center babylai:justify-center babylai:p-3 babylai:relative babylai:rounded-2xl',
   {
     variants: {
       variant: {
-        default: 'babylai-bg-primary-500 babylai-p-2 babylai-text-white babylai-text-xs babylai-font-semibold hover:babylai-bg-primary-600 babylai-border-none',
-        destructive:
-          'babylai-bg-destructive babylai-p-2 babylai-text-destructive-foreground babylai-shadow-sm hover:babylai-bg-destructive/90',
-        outline:
-          'babylai-bg-transparent 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',
+        default: 'babylai:bg-primary babylai:border-primary babylai:text-white babylai:hover:bg-primary-600 babylai:hover:border-primary-600',
         secondary:
-          'babylai-bg-secondary babylai-p-2 babylai-text-secondary-foreground babylai-shadow-sm babylai-hover:babylai-bg-secondary/80',
+          'babylai:text-primary babylai:hover:bg-primary-100 babylai:hover:border-primary-200',
         ghost:
-          'babylai-bg-transparent babylai-p-2 babylai-text-secondary-foreground babylai-shadow-sm hover:babylai-bg-secondary/80',
-        link: 'babylai-bg-transparent babylai-text-primary babylai-underline-offset-4 hover:babylai-underline babylai-border-none',
-        'rounded-icon': '!babylai-p-2 babylai-border-none babylai-bg-transparent'
+          'babylai:bg-transparent babylai:p-2 babylai:text-secondary-foreground babylai:shadow-sm babylai:hover:bg-secondary/80',
       },
       size: {
-        default: 'babylai-h-9 babylai-px-4 babylai-py-2',
-        sm: 'babylai-h-8 babylai-rounded-full babylai-px-3 babylai-text-xs',
-        lg: 'babylai-h-10 babylai-rounded-full babylai-px-8',
-        icon: 'babylai-h-[28px] babylai-w-[28px]'
+        default: '',
+        sm: 'babylai:h-8 babylai:rounded-full babylai:px-3 babylai:text-xs',
+        lg: '',
+        icon: 'babylai:h-7 babylai:w-7'
       }
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default'
+      variant: 'default'
     }
   }
 )
@@ -36,9 +29,9 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
   asChild?: boolean
 }
 
-export const Button = ({ children, className, variant, size, ...props }: ButtonProps) => {
+export const Button = ({ children, className, variant, ...props }: ButtonProps) => {
   return (
-    <button className={cn(buttonVariants({ variant, size, className }), className)} {...props}>
+    <button className={cn(buttonVariants({ variant, className }), className)} {...props}>
       {children}
     </button>
   )

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: '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'
+    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('babylai-flex babylai-flex-col babylai-space-y-1.5 babylai-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('babylai-font-semibold babylai-leading-none babylai-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('babylai-text-sm babylai-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('babylai-p-6 babylai-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('babylai-flex babylai-items-center babylai-p-6 babylai-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/components/ui/agent-response/agent-response.tsx

@@ -25,17 +25,17 @@ const AgentResponse = ({ senderType, messageContent, messageId, onType }: AgentR
 
   return (
     <div
-      className={`babylai-rounded-2xl babylai-p-4  ${
+      className={`babylai:rounded-2xl babylai:p-4  ${
         senderType === 1
-          ? 'babylai-bg-primary-500 !babylai-text-black-white-50 babylai-max-w-[220px]'
-          : 'babylai-bg-black-white-50 dark:!babylai-bg-storm-dust-900'
+          ? 'babylai:bg-primary-500 babylai:text-black-white-50 babylai:max-w-[220px]'
+          : 'babylai:bg-card'
       }`}
     >
       <Markdown
         components={{
           p: ({ node, ...props }: { node?: Element; [key: string]: any }) => (
             <p
-              className='babylai-m-0 babylai-leading-6 babylai-text-sm babylai-font-sans babylai-break-words dark:babylai-text-white'
+              className='babylai:m-0 babylai:leading-6 babylai:text-sm babylai:font-sans babylai:wrap-break-word babylai:dark:text-white babylai:text-start'
               {...props}
             />
           ),

package/src/components/ui/image-attachment.tsx

@@ -39,7 +39,7 @@ export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
         try {
           setLoading(true);
           setError(false);
-          const response = await presignDownload(fileId, i18n.language);
+          const response = await presignDownload(fileId, i18n.language as 'ar' | 'en');
           setImageUrl(response.downloadUrl);
         } catch (err) {
           setError(true);
@@ -50,7 +50,7 @@ export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
 
       fetchImageUrl();
     }
-  }, [fileId, propImageUrl, i18n.language]);
+  }, [fileId, propImageUrl, i18n.language as 'ar' | 'en']);
 
   const handleImageClick = () => {
     if (onClick) {
@@ -64,11 +64,11 @@ export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
     return (
       <div
         className={cn(
-          'babylai-flex babylai-items-center babylai-justify-center babylai-bg-black-white-100 babylai-rounded-lg babylai-w-16 babylai-h-16',
+          'babylai:flex babylai:items-center babylai:justify-center babylai:bg-black-white-100 babylai:rounded-lg babylai:w-16 babylai:h-16',
           className
         )}
       >
-        <div className='babylai-animate-pulse babylai-text-xs babylai-text-black-white-500'>...</div>
+        <div className='babylai:animate-pulse babylai:text-xs babylai:text-black-white-500'>...</div>
       </div>
     );
   }
@@ -77,11 +77,11 @@ export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
     return (
       <div
         className={cn(
-          'babylai-flex babylai-items-center babylai-justify-center babylai-bg-black-white-100 babylai-rounded-lg babylai-w-16 babylai-h-16 babylai-border babylai-border-black-white-200',
+          'babylai:flex babylai:items-center babylai:justify-center babylai:bg-black-white-100 babylai:rounded-lg babylai:w-16 babylai:h-16 babylai:border babylai:border-black-white-200',
           className
         )}
       >
-        <div className='babylai-text-xs babylai-text-black-white-500'>!</div>
+        <div className='babylai:text-xs babylai:text-black-white-500'>!</div>
       </div>
     );
   }
@@ -92,8 +92,8 @@ export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
         src={imageUrl}
         alt='Attachment'
         className={cn(
-          'babylai-w-16 babylai-h-16 babylai-object-cover babylai-rounded-lg babylai-border babylai-border-black-white-200 babylai-max-w-[50px]',
-          (enablePreview || onClick) && 'babylai-cursor-pointer hover:babylai-opacity-80 babylai-transition-opacity',
+          'babylai:w-16 babylai:h-16 babylai:object-cover babylai:rounded-lg babylai:border babylai:border-black-white-200 babylai:max-w-[50px]',
+          (enablePreview || onClick) && 'babylai:cursor-pointer babylai:hover:opacity-80 babylai:transition-opacity',
           className
         )}
         onError={() => setError(true)}