@aslaluroba/help-center-react 3.2.10 → 3.2.12

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

@@ -5,6 +5,7 @@ interface HelpscreenListProps {
     selectedOption: Option | null;
     onToggleOption: (option: Option) => void;
     onStartChat: () => void;
+    showChatNowButton?: boolean;
 }
 declare const HelpscreenList: React.FC<HelpscreenListProps>;
 export default HelpscreenList;

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

@@ -3,6 +3,7 @@ interface OptionsListScreenProps {
     helpScreen: HelpScreenData | null;
     handleStartChat: (option: Option) => void;
     handleMinimize: () => void;
+    hasActiveSession?: boolean;
 }
 declare const OptionsListScreen: React.FC<OptionsListScreenProps>;
 export default OptionsListScreen;

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

@@ -1,7 +1,9 @@
 import { HelpScreenData, Message, Option, ReviewProps } from '@/lib/types';
 type HelpPopupProps = {
     isOpen: boolean;
+    isClosing?: boolean;
     onClose: () => void;
+    onCloseAnimationEnd?: () => void;
     helpScreen: HelpScreenData | null;
     status: string;
     error: string | null;
@@ -30,5 +32,5 @@ type HelpPopupProps = {
     onReviewDialogSubmit?: (payload: ReviewProps) => void | Promise<void>;
     onReviewDialogClose?: () => void;
 };
-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;
+declare const HelpPopup: ({ isOpen, isClosing, onClose, onCloseAnimationEnd, 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/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.2.10",
+  "version": "3.2.12",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {

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

@@ -35,7 +35,7 @@ const AgentResponse = ({ senderType, messageContent, messageId, onType }: AgentR
         components={{
           p: ({ node, ...props }: { node?: Element; [key: string]: any }) => (
             <p
-              className='babylai:m-0 babylai:leading-6 babylai:text-sm babylai:font-sans babylai:wrap-break-word babylai:dark:text-white babylai:text-start'
+              className='babylai:m-0 babylai:leading-snug babylai:text-sm babylai:font-sans babylai:wrap-break-word babylai:text-start'
               {...props}
             />
           ),

package/src/globals.css

@@ -136,6 +136,33 @@
       transform: translateY(-10px);
     }
   }
+
+  @keyframes typing-dot {
+    0%,
+    60%,
+    100% {
+      opacity: 0.35;
+      transform: scale(0.85);
+    }
+    30% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+/* Typing indicator dots - staggered pulse animation */
+.babylai-typing-dot {
+  animation: typing-dot 1.4s ease-in-out infinite;
+}
+.babylai-typing-dot:nth-child(1) {
+  animation-delay: 0ms;
+}
+.babylai-typing-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.babylai-typing-dot:nth-child(3) {
+  animation-delay: 0.4s;
 }
 
 /* Re-scope primary theme vars on widget root so primaryColor prop (inline style) wins over :root.
@@ -192,7 +219,7 @@
 }
 
 /* Dark theme colors */
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
   :root {
     --babylai-black-white-50: #000000;
     --babylai-black-white-100: #050505;
@@ -219,7 +246,7 @@
     --babylai-border: var(--babylai-black-white-200);
     --babylai-ring: var(--babylai-primary-color);
   }
-}
+} */
 
 .bg-header {
   background: linear-gradient(171deg,

package/src/locales/ar.json

@@ -22,7 +22,7 @@
       "comment_placeholder": "اكتب تعليقك هنا...",
       "submit_button": "إرسال التقييم",
       "rate_button": "تقييم",
-      "comment_error": "يجب أن يكون التعليق بين 10 و500 حرف.",
+      "comment_error": "يجب أن يكون الحقل التعليق نصًا بحد أقصى 500 حرف.",
       "rating_error": "يجب أن يكون التقييم بين 1 و5.",
       "skip_button": "تخطي"
     },

package/src/locales/en.json

@@ -22,7 +22,7 @@
       "comment_placeholder": "Write your comment here...",
       "submit_button": "Submit Review",
       "rate_button": "Rate",
-      "comment_error": "Comment must be between 10 and 500 characters.",
+      "comment_error": "The field Comment must be a string with a maximum length of 500.",
       "rating_error": "Rating must be between 1 and 5.",
       "skip_button": "Skip"
     },

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

@@ -1,10 +1,13 @@
 import React, { useState, useCallback } from 'react';
 import { ReviewProps } from '@/lib/types';
+import { cn } from '@/lib/utils';
 import { Rating } from '@/ui/review-dialog/rating';
 import { useLocalTranslation } from '@/useLocalTranslation';
 import LogoIcon from '@/assets/logo.svg';
 import { Button } from '@/components';
 
+const COMMENT_MAX_LENGTH = 500;
+
 interface InChatReviewProps {
   onSubmit: (payload: ReviewProps) => void | Promise<void>;
   onDone?: () => void;
@@ -15,6 +18,7 @@ export const InChatReview: React.FC<InChatReviewProps> = ({ onSubmit, isSubmitti
   const { t } = useLocalTranslation();
   const [rating, setRating] = useState<number>(0);
   const [comment, setComment] = useState<string>('');
+  const [commentError, setCommentError] = useState<string | null>(null);
 
   const hasRating = rating >= 1 && rating <= 5;
 
@@ -22,9 +26,23 @@ export const InChatReview: React.FC<InChatReviewProps> = ({ onSubmit, isSubmitti
     setRating(val);
   }, []);
 
+  const handleCommentChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setComment(value);
+    if (commentError && value.length <= COMMENT_MAX_LENGTH) {
+      setCommentError(null);
+    }
+  }, [commentError]);
+
   const handleSubmit = useCallback(() => {
-    void onSubmit({ rating, comment: comment.trim() });
-  }, [rating, comment, onSubmit]);
+    const trimmed = comment.trim();
+    if (trimmed.length > COMMENT_MAX_LENGTH) {
+      setCommentError(t('homeSdk.ReviewDialog.comment_error') || 'The field Comment must be a string with a maximum length of 500.');
+      return;
+    }
+    setCommentError(null);
+    void onSubmit({ rating, comment: trimmed });
+  }, [rating, comment, onSubmit, t]);
 
   return (
     <section className="babylai:mb-4 babylai:flex babylai:justify-start">
@@ -36,7 +54,7 @@ export const InChatReview: React.FC<InChatReviewProps> = ({ onSubmit, isSubmitti
         <h2 className='babylai:text-card-foreground'>
           {t('homeSdk.InChatReview.title')}
         </h2>
-        <p className="babylai:font-normal babylai:text-muted-foreground">
+        <p className="babylai:font-normal babylai:text-muted-foreground babylai:leading-snug">
           {t('homeSdk.InChatReview.description')}
         </p>
 
@@ -46,16 +64,30 @@ export const InChatReview: React.FC<InChatReviewProps> = ({ onSubmit, isSubmitti
 
         {hasRating && (
           <>
-            <p className="babylai:text-card-foreground">{t('homeSdk.InChatReview.follow_up')}</p>
+            <p className="babylai:text-card-foreground babylai:leading-snug">{t('homeSdk.InChatReview.follow_up')}</p>
 
             <textarea
-              className="babylai:w-full babylai:bg-secondary babylai:border babylai:border-black-white-200 babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:resize-vertical babylai:min-h-20 babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed babylai:disabled:bg-secondary"
+              className={cn(
+                'babylai:resize-none babylai:w-full babylai:bg-secondary babylai:border babylai:rounded-xl babylai:text-card-foreground babylai:text-sm babylai:p-3 babylai:resize-vertical babylai:min-h-20 babylai:disabled:opacity-50 babylai:disabled:cursor-not-allowed babylai:disabled:bg-secondary',
+                commentError ? 'babylai:border-destructive' : 'babylai:border-black-white-200'
+              )}
               rows={4}
+              maxLength={COMMENT_MAX_LENGTH}
               placeholder={t('homeSdk.InChatReview.note_placeholder')}
               value={comment}
-              onChange={(e) => setComment(e.target.value)}
+              onChange={handleCommentChange}
               aria-label={t('homeSdk.InChatReview.note_placeholder')}
+              aria-invalid={!!commentError}
+              aria-describedby={commentError ? 'in-chat-review-comment-error' : undefined}
             />
+            {commentError && (
+              <p id="in-chat-review-comment-error" className="babylai:text-sm babylai:text-destructive" role="alert">
+                {commentError}
+              </p>
+            )}
+            <p className="babylai:text-xs babylai:text-muted-foreground">
+              {comment.length}/{COMMENT_MAX_LENGTH}
+            </p>
 
             <Button
               variant='default'

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import LoadingGif from '../../../assets/animatedLogo.gif';
+import LogoIcon from '../../../assets/logo.svg';
 
 interface TypingIndicatorProps {
   firstHumanAgentIndex: number;
@@ -11,12 +11,16 @@ export const TypingIndicator = React.memo(({ firstHumanAgentIndex }: TypingIndic
   return (
     <div className='babylai:mb-4 babylai:flex'>
       <div className='babylai:shrink-0 babylai:me-3'>
-        <div className='babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center'>
-          <img src={LoadingGif} alt='Loading' className='babylai:w-8 babylai:h-8' />
+        <div className='babylai:w-8 babylai:h-8 babylai:rounded-full babylai:flex babylai:items-center babylai:justify-center babylai:bg-primary'>
+          <LogoIcon className='babylai:w-4 babylai:h-4 babylai:text-primary' />
         </div>
       </div>
       <div className='babylai:max-w-[80%] babylai:rounded-2xl babylai:p-4 babylai:bg-card'>
-        <p className='babylai:text-sm babylai:opacity-70 babylai:text-muted-foreground babylai:m-0'>...</p>
+        <p className='babylai:text-sm babylai:text-muted-foreground babylai:m-0 babylai:flex babylai:gap-0.5 babylai:items-center' aria-hidden="true">
+          <span className="babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current" />
+          <span className="babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current" />
+          <span className="babylai-typing-dot babylai:inline-block babylai:w-1.5 babylai:h-1.5 babylai:rounded-full babylai:bg-current" />
+        </p>
       </div>
     </div>
   );

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

@@ -3,12 +3,14 @@ import { Option } from '@/lib/types';
 import HelpscreenOption from '@/ui/chatbot-popup/options-list-screen/helpscreen-option';
 import { useLocalTranslation } from '@/useLocalTranslation';
 import { Button } from '@/components';
+import SolarPlain2BoldDuotone from '~icons/solar/plain-2-bold-duotone'
 
 interface HelpscreenListProps {
   options: Option[] | undefined;
   selectedOption: Option | null;
   onToggleOption: (option: Option) => void;
   onStartChat: () => void;
+  showChatNowButton?: boolean;
 }
 
 const HelpscreenList: React.FC<HelpscreenListProps> = ({
@@ -16,6 +18,7 @@ const HelpscreenList: React.FC<HelpscreenListProps> = ({
   selectedOption,
   onToggleOption,
   onStartChat,
+  showChatNowButton = true,
 }) => {
   const { t } = useLocalTranslation();
 
@@ -31,13 +34,18 @@ const HelpscreenList: React.FC<HelpscreenListProps> = ({
           />
         ))}
       </div>
-      <div className="babylai:sticky babylai:bottom-0 babylai:z-10">
-        <Button
-          variant='default'
-          onClick={onStartChat}
-          disabled={!selectedOption}
-        >{t('homeSdk.chatNow')}</Button>
-      </div>
+      {showChatNowButton && (
+        <div className="babylai:sticky babylai:bottom-0 babylai:z-10">
+          <Button
+            variant='default'
+            onClick={onStartChat}
+            disabled={!selectedOption}
+          >
+            {t('homeSdk.chatNow')}
+            <SolarPlain2BoldDuotone className="babylai:w-6 babylai:h-6" />
+          </Button>
+        </div>
+      )}
     </section>
   );
 };

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

@@ -15,17 +15,27 @@ const HelpscreenOption: React.FC<HelpscreenOptionProps> = ({
 }) => {
   return (
     <div
+      role="button"
+      tabIndex={0}
       className={cn(
         'babylai:flex babylai:flex-col babylai:gap-2 babylai:p-6 babylai:rounded-3xl babylai:text-start babylai:border babylai:border-black-white-200 babylai:bg-card babylai:cursor-pointer',
+        'babylai:transition-all babylai:duration-200 babylai:ease-out',
+        'babylai:active:scale-[0.98] babylai:active:opacity-95',
         isSelected && 'babylai:ring babylai:ring-primary-500 babylai:shadow-md'
       )}
       onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick();
+        }
+      }}
     >
       <h2 className="babylai:text-base! babylai:font-semibold! babylai:text-card-foreground" dir="auto">
         {option.title}
       </h2>
       {option.paragraphs.map((paragraph, index) => (
-        <p key={index} className="babylai:text-sm babylai:text-muted-foreground" dir="auto">
+        <p key={index} className="babylai:text-sm babylai:text-muted-foreground babylai:leading-snug" dir="auto">
           {paragraph}
         </p>
       ))}

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

@@ -10,12 +10,14 @@ interface OptionsListScreenProps {
   helpScreen: HelpScreenData | null;
   handleStartChat: (option: Option) => void;
   handleMinimize: () => void;
+  hasActiveSession?: boolean;
 }
 
 const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
   helpScreen,
   handleStartChat,
   handleMinimize,
+  hasActiveSession = false,
 }) => {
   const [selectedOption, setSelectedOption] = useState<Option | null>(null);
 
@@ -56,6 +58,7 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
           selectedOption={selectedOption}
           onToggleOption={handleToggleExpandOption}
           onStartChat={handleStartChatWithSelected}
+          showChatNowButton={!hasActiveSession}
         />
       </div >
       <PoweredBy />

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

@@ -3,6 +3,7 @@ import { useLocalTranslation } from "@/useLocalTranslation";
 import SolarChatRoundUnreadBoldDuotone from '~icons/solar/chat-round-unread-bold-duotone'
 import SolarCloseCircleLineDuotone from '~icons/solar/close-circle-line-duotone'
 import SolarPlain2BoldDuotone from '~icons/solar/plain-2-bold-duotone'
+import PoweredBy from "../powered-by";
 
 interface ConfirmationModalProps {
     title: string;
@@ -17,39 +18,42 @@ const ConfirmationModal = ({ title, message, onCancel, onConfirm }: Confirmation
     return (
         <div className='babylai:absolute babylai:inset-0 babylai:z-50 babylai:flex babylai:items-end babylai:rounded-3xl babylai:overflow-hidden'>
             <div className='babylai:absolute babylai:inset-0 babylai:bg-black/60' onClick={onCancel}></div>
-            <div className='babylai:flex babylai:flex-col babylai:bg-card babylai:rounded-2xl babylai:p-6 babylai:pb-5 babylai:w-full babylai:z-50 babylai:shadow-lg'>
-                <button className="babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground"
-                    type='button'
-                    onClick={onCancel}
-                >
-                    <SolarCloseCircleLineDuotone className="babylai:w-6 babylai:h-6" />
-                </button>
-
-                <section className="babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6">
-                    <div className="babylai:flex babylai:items-center babylai:justify-center babylai:w-20 babylai:h-20 babylai:rounded-full babylai:p-3 babylai:bg-primary/15 babylai:text-primary">
-                        <SolarChatRoundUnreadBoldDuotone className="babylai:w-16 babylai:h-16" />
-                    </div>
-                </section>
-
-                <h3 className='babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground'>{title}</h3>
-
-                <p className='babylai:text-sm babylai:text-center babylai:text-muted-foreground'>{message}</p>
-
-                <div className='babylai:flex babylai:justify-between babylai:gap-3 babylai:mt-6'>
-                    <Button
-                        onClick={onConfirm}
-                        variant='secondary'
-                    >
-                        {t('homeSdk.ConfirmationModal.confirmation_button')}
-                    </Button>
-                    <Button
+            <div className='babylai:flex babylai:flex-col babylai:bg-card babylai:rounded-2xl babylai:w-full babylai:z-50 babylai:shadow-lg'>
+                <div className='babylai:flex babylai:flex-col babylai:p-6 babylai:pb-5 babylai:w-full'>
+                    <button className="babylai:border-0 babylai:p-0 babylai:flex babylai:bg-transparent babylai:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground"
+                        type='button'
                         onClick={onCancel}
-                        variant='default'
                     >
-                        {t('homeSdk.ConfirmationModal.cancel_button')}
-                        <SolarPlain2BoldDuotone className="babylai:w-6 babylai:h-6" />
-                    </Button>
+                        <SolarCloseCircleLineDuotone className="babylai:w-7 babylai:h-7" />
+                    </button>
+
+                    <section className="babylai:flex babylai:items-center babylai:justify-center babylai:border-b babylai:border-black-white-200 babylai:pb-6 babylai:mb-6">
+                        <div className="babylai:flex babylai:items-center babylai:justify-center babylai:w-20 babylai:h-20 babylai:rounded-full babylai:p-3 babylai:bg-primary/15 babylai:text-primary">
+                            <SolarChatRoundUnreadBoldDuotone className="babylai:w-16 babylai:h-16" />
+                        </div>
+                    </section>
+
+                    <h3 className='babylai:text-2xl! babylai:text-center babylai:font-bold! babylai:mb-2! babylai:text-card-foreground'>{title}</h3>
+
+                    <p className='babylai:text-sm babylai:text-center babylai:text-muted-foreground'>{message}</p>
+
+                    <div className='babylai:flex babylai:justify-between babylai:gap-3 babylai:mt-6'>
+                        <Button
+                            onClick={onCancel}
+                            variant='secondary'
+                        >
+                            {t('homeSdk.ConfirmationModal.cancel_button')}
+                            <SolarPlain2BoldDuotone className="babylai:w-6 babylai:h-6" />
+                        </Button>
+                        <Button
+                            onClick={onConfirm}
+                            variant='default'
+                        >
+                            {t('homeSdk.ConfirmationModal.confirmation_button')}
+                        </Button>
+                    </div>
                 </div>
+                <PoweredBy />
             </div>
         </div>
     );

package/src/ui/help-center.tsx

@@ -36,6 +36,7 @@ const HelpCenterContent = ({
 }: HelpCenterProps) => {
   const { t } = useLocalTranslation();
   const [isOpen, setIsOpen] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
   const [showArrowAnimation, setShowArrowAnimation] = useState(showArrow);
   const [helpScreenData, setHelpScreenData] = useState<HelpScreenData | null>(null);
   const [status, setStatus] = useState('idle');
@@ -57,10 +58,25 @@ const HelpCenterContent = ({
   const actionHandler = useActionHandler();
 
   const handleTogglePopup = () => {
-    setIsOpen(!isOpen);
-    setShowArrowAnimation(isOpen);
+    if (isOpen) {
+      setIsClosing(true);
+      setIsOpen(false);
+      setShowArrowAnimation(true);
+    } else {
+      setIsOpen(true);
+      setShowArrowAnimation(false);
+    }
   };
 
+  const handleClosePopup = useCallback(() => {
+    setIsClosing(true);
+    setIsOpen(false);
+  }, []);
+
+  const handlePopupCloseAnimationEnd = useCallback(() => {
+    setIsClosing(false);
+  }, []);
+
   const handleCloseArrowAnimation = () => {
     setShowArrowAnimation(false);
   };
@@ -360,16 +376,18 @@ const HelpCenterContent = ({
 
   return (
     <div className='babylai-theme-root babylai:mb-4' style={themeStyles}>
-      {showArrowAnimation && !isOpen && (
+      {showArrowAnimation && !isOpen && !isClosing && (
         <FloatingMessage onClose={handleCloseArrowAnimation} message={messageLabel || t('homeSdk.needAssistance')} />
       )}
 
       <HelpButton onClick={handleTogglePopup} />
 
-      {isOpen && (
+      {(isOpen || isClosing) && (
         <HelpPopup
           isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
+          isClosing={isClosing}
+          onClose={handleClosePopup}
+          onCloseAnimationEnd={handlePopupCloseAnimationEnd}
           helpScreen={helpScreenData}
           status={status}
           error={error}

package/src/ui/help-popup.tsx

@@ -6,13 +6,18 @@ import OptionsListScreen from '@/ui/chatbot-popup/options-list-screen';
 import { ActiveChatActions } from '@/ui/chatbot-popup/active-chat-actions';
 import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import { HelpScreenData, Message, Option, ReviewProps } from '@/lib/types';
+import { cn } from '@/lib/utils';
 import { useLocalTranslation } from '../useLocalTranslation';
 import ConfirmationModal from './confirmation-modal';
 import ReviewDialog from './review-dialog';
 
+const POPUP_ANIMATION_DURATION_MS = 250;
+
 type HelpPopupProps = {
   isOpen: boolean;
+  isClosing?: boolean;
   onClose: () => void;
+  onCloseAnimationEnd?: () => void;
   helpScreen: HelpScreenData | null;
   status: string;
   error: string | null;
@@ -42,7 +47,9 @@ type HelpPopupProps = {
 
 const HelpPopup = ({
   isOpen,
+  isClosing = false,
   onClose,
+  onCloseAnimationEnd,
   helpScreen,
   status,
   error,
@@ -73,12 +80,28 @@ const HelpPopup = ({
   const [endChatConfirmation, setEndChatConfirmation] = useState<boolean>(false);
   const [startNewChatConfirmation, setStartNewChatConfirmation] = useState<boolean>(false);
   const [tempSelectedOption, setTempSelectedOption] = useState<Option | null>(null);
+  const [isEntering, setIsEntering] = useState(true);
 
   const chatBoxRef = useRef<HTMLDivElement>(null);
   const prevIsOpenRef = useRef(false);
   const { t } = useLocalTranslation();
   const messagesRef = useRef<Message[]>([]);
 
+  // Enter animation: transition from initial state to visible
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      requestAnimationFrame(() => setIsEntering(false));
+    });
+    return () => cancelAnimationFrame(id);
+  }, []);
+
+  // Exit animation: notify parent to unmount after transition
+  useEffect(() => {
+    if (!isClosing || !onCloseAnimationEnd) return;
+    const tId = setTimeout(onCloseAnimationEnd, POPUP_ANIMATION_DURATION_MS);
+    return () => clearTimeout(tId);
+  }, [isClosing, onCloseAnimationEnd]);
+
   // Memoize the current messages to prevent unnecessary re-renders
   const memoizedMessages = useMemo(() => {
     return messages;
@@ -202,6 +225,7 @@ const HelpPopup = ({
         helpScreen={helpScreen}
         handleStartChat={handleStartChat}
         handleMinimize={handleMinimize}
+        hasActiveSession={!!sessionId}
       />
     );
   }, [
@@ -277,15 +301,19 @@ const HelpPopup = ({
     }
   }, [messages, scrollToBottom]);
 
+  const popupBaseClasses =
+    'babylai:fixed babylai:inset-auto babylai:max-w-sm babylai:h-[calc(100vh-220px)] babylai:max-h-[800px] babylai:overflow-auto babylai:w-full babylai:bg-secondary babylai:mb-4 babylai:bottom-24 babylai:right-4 babylai:rounded-3xl babylai:shadow-lg babylai:z-50 babylai:flex babylai:flex-col';
+  const popupAnimationClasses = cn(
+    'babylai:transition-all babylai:duration-[250ms] babylai:ease-out',
+    (isEntering || isClosing) && 'babylai:opacity-0 babylai:scale-[0.96] babylai:translate-y-2',
+    !isEntering && !isClosing && 'babylai:opacity-100 babylai:scale-100 babylai:translate-y-0'
+  );
+
   // EARLY RETURNS MUST COME AFTER ALL HOOKS
   // Early returns for performance - moved after all hooks
   if (status === 'loading' && !helpScreen) {
     return (
-      <div
-        className='babylai:fixed babylai:inset-auto babylai:max-w-sm babylai:h-[calc(100vh-220px)] babylai:max-h-[800px]
-     babylai:overflow-auto babylai:w-full babylai:bg-secondary babylai:mb-4
-babylai:bottom-24 babylai:right-4 babylai:rounded-3xl babylai:shadow-lg babylai:z-50 babylai:flex babylai:flex-col'
-      >
+      <div className={cn(popupBaseClasses, popupAnimationClasses)}>
         <ChatBotLoadingScreen onClose={onClose} />
       </div>
     );
@@ -293,22 +321,14 @@ babylai:bottom-24 babylai:right-4 babylai:rounded-3xl babylai:shadow-lg babylai:
 
   if (error) {
     return (
-      <div
-        className='babylai:fixed babylai:inset-auto babylai:max-w-sm babylai:h-[calc(100vh-220px)] babylai:max-h-[800px]
-     babylai:overflow-auto babylai:w-full babylai:bg-secondary babylai:mb-4
-babylai:bottom-24 babylai:right-4 babylai:rounded-3xl babylai:shadow-lg babylai:z-50 babylai:flex babylai:flex-col'
-      >
+      <div className={cn(popupBaseClasses, popupAnimationClasses)}>
         <ChatBotErrorScreen onClose={onClose} error={error || ''} />
       </div>
     );
   }
 
   return (
-    <div
-      className='babylai:fixed babylai:inset-auto babylai:max-w-sm babylai:h-[calc(100vh-220px)] babylai:max-h-[800px]
-     babylai:overflow-auto babylai:w-full babylai:bg-secondary babylai:mb-4
-babylai:bottom-24 babylai:right-4 babylai:rounded-3xl babylai:shadow-lg babylai:z-50 babylai:flex babylai:flex-col'
-    >
+    <div className={cn(popupBaseClasses, popupAnimationClasses)}>
       <div className='babylai:h-full babylai:rounded-3xl babylai:flex babylai:flex-col babylai:relative'
       >
         {activeChatButton}