@aslaluroba/help-center-react 3.2.5 → 3.2.7

package/src/ui/help-popup.tsx

@@ -1,17 +1,14 @@
-import { cn } from '@/lib';
 import { ChatWindow } from '@/ui/chatbot-popup/chat-window-screen';
 import ChatWindowHeader from '@/ui/chatbot-popup/chat-window-screen/header';
 import ChatBotErrorScreen from '@/ui/chatbot-popup/error-screen';
-import HomeScreen from '@/ui/chatbot-popup/home-screen';
 import ChatBotLoadingScreen from '@/ui/chatbot-popup/loading-screen';
 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 ChatIcon from '../assets/icons/chat.svg';
-import { Button } from '@/components';
-import { HelpScreenData, Message, Option } from '@/lib/types';
+import { HelpScreenData, Message, Option, ReviewProps } from '@/lib/types';
 import { useLocalTranslation } from '../useLocalTranslation';
 import ConfirmationModal from './confirmation-modal';
-import PoweredBy from './powered-by';
+import ReviewDialog from './review-dialog';
 
 type HelpPopupProps = {
   isOpen: boolean;
@@ -19,24 +16,32 @@ type HelpPopupProps = {
   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;
 };
 
 const HelpPopup = ({
+  isOpen,
   onClose,
   helpScreen,
   status,
@@ -49,21 +54,28 @@ const HelpPopup = ({
   assistantStatus,
   needsAgent,
   sessionId,
+  isChatClosed,
   selectedOption,
   setSelectedOption,
-  showHelpScreen,
-  isAblyConnected,
-  logoUrl,
+  inChatReviewSessionId = null,
+  onInChatReviewSubmit,
+  onInChatReviewDone,
+  navigateToOptionsListAfterReview = false,
+  onNavigatedToOptionsList,
+  isReviewDialogOpen = false,
+  reviewSessionId = null,
+  isSubmittingReview = false,
+  onReviewDialogSubmit,
+  onReviewDialogClose,
 }: HelpPopupProps) => {
   // ALL HOOKS MUST BE CALLED FIRST - BEFORE ANY EARLY RETURNS
   const [showChat, setShowChat] = useState(false);
-  const [isShowList, setIsShowList] = useState<boolean>(!showHelpScreen || false);
-  const [expandedOption, setExpandedOption] = useState<Option | null>(null);
   const [endChatConfirmation, setEndChatConfirmation] = useState<boolean>(false);
   const [startNewChatConfirmation, setStartNewChatConfirmation] = useState<boolean>(false);
   const [tempSelectedOption, setTempSelectedOption] = useState<Option | null>(null);
 
   const chatBoxRef = useRef<HTMLDivElement>(null);
+  const prevIsOpenRef = useRef(false);
   const { t } = useLocalTranslation();
   const messagesRef = useRef<Message[]>([]);
 
@@ -92,8 +104,6 @@ const HelpPopup = ({
       // onEndChat()
     } else if (selectedOption) {
       setSelectedOption(null);
-    } else {
-      setIsShowList(false);
     }
   }, [showChat, selectedOption, setSelectedOption]);
 
@@ -131,29 +141,34 @@ const HelpPopup = ({
     if (tempSelectedOption) {
       setStartNewChatConfirmation(false);
 
-      await handleEndChat()
-        .then(() => {
-          setShowChat(true);
-          onStartChat(tempSelectedOption);
-          setSelectedOption(tempSelectedOption);
-        })
-        .finally(() => {
-          setTempSelectedOption(null);
-        });
+      await onEndChat();
+      setShowChat(true);
+      onStartChat(tempSelectedOption);
+      setSelectedOption(tempSelectedOption);
+      setTempSelectedOption(null);
     }
   };
 
-  const handleEndChat = async () => {
+  const handleEndChatFromChatScreen = useCallback(async () => {
     setEndChatConfirmation(false);
-    await onEndChat();
-    setShowChat(false);
-    setSelectedOption(null);
-  };
+    await onEndChat({ fromChatScreen: true });
+    // Keep showChat and selectedOption so chat screen stays open with in-chat review
+  }, [onEndChat]);
+
+  const handleMinimize = useCallback(() => {
+    onClose();
+  }, [onClose]);
 
   const handleShowActiveChat = useCallback(() => {
     setShowChat(true);
   }, []);
 
+  const handleEndChatFromActiveActions = useCallback(async () => {
+    await onEndChat();
+    setShowChat(false);
+    setSelectedOption(null);
+  }, [onEndChat, setSelectedOption]);
+
   // Memoize render content function
   const renderContent = useCallback(() => {
     if (showChat && selectedOption) {
@@ -162,11 +177,8 @@ const HelpPopup = ({
           <ChatWindowHeader
             handleBack={handleBack}
             handleEndChat={showEndChatConfirmation}
-            onClose={onClose}
-            isShowList={isShowList}
-            showChat={showChat}
-            setIsShowList={setIsShowList}
-            logoUrl={logoUrl}
+            handleMinimize={handleMinimize}
+            optionTitle={selectedOption?.title}
           />
           <ChatWindow
             onSendMessage={handleSendMessage}
@@ -174,49 +186,46 @@ const HelpPopup = ({
             messages={memoizedMessages}
             assistantStatus={assistantStatus}
             needsAgent={needsAgent}
-            isAblyConnected={isAblyConnected}
             sessionId={sessionId}
+            isChatClosed={isChatClosed}
+            inChatReviewSessionId={inChatReviewSessionId ?? undefined}
+            isSubmittingReview={isSubmittingReview}
+            onInChatReviewSubmit={onInChatReviewSubmit}
+            onInChatReviewDone={onInChatReviewDone}
           />
         </>
       );
     }
 
-    if (isShowList) {
-      return (
-        <OptionsListScreen
-          helpScreen={helpScreen}
-          expandedOption={expandedOption}
-          setExpandedOption={setExpandedOption}
-          handleStartChat={handleStartChat}
-          handleBack={showHelpScreen ? handleBack : onClose}
-          showHelpScreen={showHelpScreen}
-        />
-      );
-    }
-    return <HomeScreen setIsShowList={setIsShowList} onClose={onClose} logoUrl={logoUrl} />;
+    return (
+      <OptionsListScreen
+        helpScreen={helpScreen}
+        handleStartChat={handleStartChat}
+        handleMinimize={handleMinimize}
+      />
+    );
   }, [
     showChat,
     selectedOption,
     handleBack,
     showEndChatConfirmation,
-    onClose,
-    isShowList,
-    setIsShowList,
     handleSendMessage,
     onEnsureSession,
     memoizedMessages,
     assistantStatus,
     needsAgent,
     helpScreen,
-    expandedOption,
-    setExpandedOption,
     handleStartChat,
-    showHelpScreen,
-    isAblyConnected,
-    logoUrl,
+    handleMinimize,
+    sessionId,
+    isChatClosed,
+    inChatReviewSessionId,
+    isSubmittingReview,
+    onInChatReviewSubmit,
+    onInChatReviewDone,
   ]);
 
-  // Memoize confirmation modal
+  // Memoize confirmation modal (End Chat from chat screen → keep chat open, show in-chat review)
   const confirmationModal = useMemo(() => {
     if (!endChatConfirmation) return null;
 
@@ -225,26 +234,40 @@ const HelpPopup = ({
         title={t('homeSdk.ConfirmationModal.title')}
         message={t('homeSdk.ConfirmationModal.message')}
         onCancel={hideEndChatConfirmation}
-        onConfirm={handleEndChat}
+        onConfirm={handleEndChatFromChatScreen}
       />
     );
-  }, [endChatConfirmation, t, hideEndChatConfirmation, handleEndChat]);
+  }, [endChatConfirmation, t, hideEndChatConfirmation, handleEndChatFromChatScreen]);
 
   // Memoize active chat button
   const activeChatButton = useMemo(() => {
     if (!sessionId || showChat) return null;
 
     return (
-      <Button
-        variant='rounded-icon'
-        size='icon'
-        className='!babylai-bg-primary-500 babylai-absolute babylai-bottom-4 babylai-right-3 babylai-z-20 !babylai-w-10 !babylai-h-10 babylai-p-2'
-        onClick={handleShowActiveChat}
-      >
-        <ChatIcon className='babylai-w-5 babylai-h-5 babylai-text-black-white-50' />
-      </Button>
+      <ActiveChatActions
+        onConfirm={handleEndChatFromActiveActions}
+        onCancel={handleShowActiveChat}
+      />
     );
-  }, [sessionId, showChat, handleShowActiveChat]);
+  }, [sessionId, showChat, handleShowActiveChat, handleEndChatFromActiveActions]);
+
+  // Restore chat view only when popup reopens (not when user clicks back)
+  useEffect(() => {
+    const justOpened = isOpen && !prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+    if (justOpened && sessionId && selectedOption && !showChat) {
+      setShowChat(true);
+    }
+  }, [isOpen, sessionId, selectedOption, showChat]);
+
+  // After submitting in-chat review, navigate to options list
+  useEffect(() => {
+    if (navigateToOptionsListAfterReview) {
+      setShowChat(false);
+      setSelectedOption(null);
+      onNavigatedToOptionsList?.();
+    }
+  }, [navigateToOptionsListAfterReview, onNavigatedToOptionsList, setSelectedOption]);
 
   // Scroll to bottom when new messages arrive - optimize with ref comparison
   useEffect(() => {
@@ -259,11 +282,11 @@ const HelpPopup = ({
   if (status === 'loading' && !helpScreen) {
     return (
       <div
-        className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-h-[calc(100vh-220px)] 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'
+        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'
       >
-        <ChatBotLoadingScreen isShowList={isShowList} onClose={onClose} logoUrl={logoUrl} />
+        <ChatBotLoadingScreen onClose={onClose} />
       </div>
     );
   }
@@ -271,35 +294,27 @@ 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-h-[calc(100vh-220px)] 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'
+        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'
       >
-        <ChatBotErrorScreen onClose={onClose} error={error || ''} logoUrl={logoUrl} />
+        <ChatBotErrorScreen onClose={onClose} error={error || ''} />
       </div>
     );
   }
 
   return (
     <div
-      className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-h-[calc(100vh-220px)] 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'
+      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(
-          'babylai-h-full babylai-rounded-none md:babylai-rounded-3xl babylai-flex babylai-flex-col babylai-relative',
-          {
-            'babylai-bg-linear-to-b': !isShowList,
-            'babylai-bg-black-white-100 dark:babylai-bg-storm-dust-950': isShowList,
-          }
-        )}
+      <div className='babylai:h-full babylai:rounded-3xl babylai:flex babylai:flex-col babylai:relative'
       >
         {activeChatButton}
 
         {/* Content */}
         {renderContent()}
-        <PoweredBy />
 
         {/* End Chat Confirmation Modal */}
         {confirmationModal}
@@ -312,6 +327,14 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
             onConfirm={handleEndAndStartNewChat}
           />
         )}
+
+        {!!isReviewDialogOpen && !!reviewSessionId && onReviewDialogSubmit && onReviewDialogClose && (
+          <ReviewDialog
+            handleSubmit={onReviewDialogSubmit}
+            onClose={onReviewDialogClose}
+            isSubmitting={isSubmittingReview}
+          />
+        )}
       </div>
     </div>
   );

package/src/ui/powered-by.tsx

@@ -4,16 +4,58 @@ const PoweredBy: React.FC = () => {
   const { t } = useLocalTranslation();
 
   return (
-    <section className='dark:babylai-text-white babylai-font-bold babylai-text-center babylai-px-8 babylai-py-2 babylai-w-full'>
+    <footer className="babylai:flex babylai:items-center babylai:justify-center babylai:p-3 babylai:border-t babylai:border-border">
       <a
-        href='https://www.babylai.net/'
-        target='_blank'
-        rel='noopener noreferrer'
-        className='babylai-text-xs babylai-opacity-60 hover:babylai-opacity-100 babylai-transition-all'
+        href="https://babylai.net"
+        target="_blank"
+        dir="auto"
+        className="babylai:flex babylai:items-center babylai:justify-center babylai:gap-2 babylai:text-sm babylai:text-card-foreground babylai:no-underline babylai:transition-opacity babylai:duration-200 babylai:hover:opacity-80"
       >
-        {t('homeSdk.poweredBy')} BabylAI © 2025
+        <span>
+          {t('homeSdk.poweredBy')}
+        </span>
+        <span>|</span>
+        <svg viewBox="0 0 54 19" fill="none" className="babylai:w-15">
+          <path
+            d="M0 4.97873C0 2.22905 2.22908 0 4.97879 0H13.2768C16.0265 0 18.2556 2.22905 18.2556 4.97873V13.2766C18.2556 16.0263 16.0265 18.2554 13.2768 18.2554H0V4.97873Z"
+            fill="#606060"
+          />
+          <path
+            d="M5.76107 6.10571C5.76153 6.10407 5.76177 6.10325 5.76187 6.10287C5.83413 5.8495 6.19321 5.8495 6.26546 6.10287C6.26557 6.10325 6.2658 6.10407 6.26627 6.10571C6.26749 6.11004 6.26809 6.1122 6.26867 6.11423C6.60441 7.29978 7.53101 8.22637 8.71657 8.5621C8.7186 8.56268 8.72076 8.56329 8.72509 8.56451C8.72673 8.56497 8.72755 8.5652 8.72793 8.56531C8.98131 8.63756 8.98131 8.99664 8.72793 9.06889C8.72755 9.069 8.72673 9.06923 8.72509 9.0697C8.72076 9.07092 8.7186 9.07153 8.71657 9.0721C7.53101 9.40783 6.60441 10.3344 6.26867 11.52C6.26809 11.522 6.26749 11.5242 6.26627 11.5285C6.2658 11.5301 6.26557 11.531 6.26546 11.5313C6.19321 11.7847 5.83413 11.7847 5.76187 11.5313C5.76177 11.531 5.76153 11.5301 5.76107 11.5285C5.75985 11.5242 5.75924 11.522 5.75867 11.52C5.42293 10.3344 4.49633 9.40783 3.31077 9.0721C3.30874 9.07153 3.30657 9.07092 3.30225 9.0697C3.3006 9.06923 3.29978 9.069 3.2994 9.06889C3.04603 8.99664 3.04603 8.63756 3.2994 8.56531C3.29978 8.5652 3.3006 8.56497 3.30225 8.56451C3.30657 8.56329 3.30874 8.56268 3.31077 8.5621C4.49633 8.22637 5.42293 7.29978 5.75867 6.11423C5.75924 6.1122 5.75985 6.11004 5.76107 6.10571Z"
+            fill="white"
+          />
+          <path
+            d="M14.7275 8.76473C14.7275 9.99635 13.7523 10.9948 12.5493 10.9948C11.3463 10.9948 10.3711 9.99635 10.3711 8.76473C10.3711 7.5331 11.3463 6.53467 12.5493 6.53467C13.7523 6.53467 14.7275 7.5331 14.7275 8.76473Z"
+            fill="white"
+          />
+          <path
+            d="M51.6133 13.0924V5.27515H53.1931V13.0924H51.6133Z"
+            fill="#606060"
+          />
+          <path
+            d="M44.5938 13.0924L46.5857 5.27515H49.3446L51.325 13.0924H49.7452L49.3102 11.513H46.5742L46.1621 13.0924H44.5938ZM46.8261 10.2425H49.0813L48.1998 6.55705H47.719L46.8261 10.2425Z"
+            fill="#606060"
+          />
+          <path d="M42.5703 13.092V5H44.0929V13.092H42.5703Z" fill="#919191" />
+          <path
+            d="M38.6905 15.5069L39.4231 13.0919H38.1982L36.8359 7.34619H38.4272L39.446 11.7985H39.7437L40.7625 7.34619H42.2965L40.3161 15.5069H38.6905Z"
+            fill="#919191"
+          />
+          <path
+            d="M34.008 13.2179C33.8172 13.2179 33.5845 13.2103 33.3097 13.195C33.035 13.1797 32.7526 13.1569 32.4626 13.1263C32.1802 13.0958 31.9284 13.0691 31.707 13.0462V5H33.241V7.52946C33.3555 7.48368 33.4967 7.4379 33.6646 7.39212C33.8325 7.34633 34.008 7.30818 34.1912 7.27766C34.382 7.23951 34.5575 7.22043 34.7178 7.22043C35.252 7.22043 35.6756 7.33107 35.9885 7.55235C36.309 7.766 36.538 8.08648 36.6754 8.51378C36.8127 8.94108 36.8814 9.47902 36.8814 10.1276C36.8814 10.8906 36.7937 11.5011 36.6181 11.9589C36.4502 12.4091 36.1564 12.7334 35.7366 12.9318C35.3169 13.1225 34.7407 13.2179 34.008 13.2179ZM34.0195 11.936C34.3934 11.936 34.672 11.8711 34.8552 11.7414C35.0383 11.6041 35.1604 11.4019 35.2215 11.1348C35.2902 10.8677 35.3245 10.5396 35.3245 10.1505C35.3245 9.75371 35.294 9.43705 35.2329 9.20051C35.1719 8.95634 35.0689 8.78084 34.9238 8.67402C34.7865 8.55956 34.5919 8.50233 34.34 8.50233C34.2179 8.50233 34.0882 8.51759 33.9508 8.54812C33.8134 8.57101 33.6799 8.60153 33.5501 8.63968C33.428 8.6702 33.325 8.70072 33.241 8.73124V11.8902C33.3555 11.8978 33.4891 11.9093 33.6417 11.9245C33.7943 11.9322 33.9203 11.936 34.0195 11.936Z"
+            fill="#919191"
+          />
+          <path
+            d="M27.8012 13.2177C27.2059 13.2177 26.7556 13.0689 26.4504 12.7713C26.1527 12.4661 26.0039 12.0083 26.0039 11.3978C26.0039 10.9705 26.0802 10.6386 26.2329 10.4021C26.3855 10.1579 26.6106 9.9824 26.9083 9.87558C27.2136 9.76112 27.5837 9.69245 28.0187 9.66956L29.4153 9.54366V9.20029C29.4153 8.9256 29.3467 8.73484 29.2093 8.62802C29.0719 8.51356 28.8697 8.45633 28.6025 8.45633C28.3889 8.45633 28.1408 8.46396 27.8584 8.47922C27.5837 8.49448 27.309 8.51356 27.0342 8.53645C26.7671 8.55934 26.5343 8.58223 26.3359 8.60512L26.2901 7.52924C26.4885 7.48346 26.7251 7.43768 26.9999 7.3919C27.2822 7.33849 27.5761 7.29652 27.8813 7.266C28.1866 7.23548 28.469 7.22021 28.7285 7.22021C29.2169 7.22021 29.6252 7.28126 29.9534 7.40334C30.2816 7.52543 30.5296 7.72763 30.6975 8.00996C30.8654 8.28465 30.9493 8.65854 30.9493 9.13162V11.7526C30.9646 11.8595 31.0218 11.9434 31.1211 12.0044C31.2203 12.0579 31.3347 12.096 31.4645 12.1189L31.4301 13.1719C31.308 13.1719 31.1859 13.1719 31.0638 13.1719C30.9493 13.1795 30.8387 13.1795 30.7318 13.1719C30.625 13.1719 30.5296 13.1643 30.4456 13.149C30.2701 13.1261 30.1175 13.0803 29.9877 13.0117C29.8656 12.943 29.7664 12.8705 29.6901 12.7942C29.568 12.8476 29.4039 12.9086 29.1978 12.9773C28.9918 13.046 28.7666 13.1032 28.5224 13.149C28.2858 13.1948 28.0454 13.2177 27.8012 13.2177ZM28.1675 12.0846C28.3125 12.0846 28.4652 12.0693 28.6254 12.0388C28.7857 12.0083 28.9345 11.9739 29.0719 11.9358C29.2169 11.89 29.3314 11.848 29.4153 11.8099V10.4936L28.2477 10.5966C27.9958 10.6195 27.8127 10.6958 27.6982 10.8256C27.5913 10.9476 27.5379 11.1231 27.5379 11.3521C27.5379 11.581 27.5875 11.7603 27.6867 11.89C27.7936 12.0197 27.9538 12.0846 28.1675 12.0846Z"
+            fill="#919191"
+          />
+          <path
+            d="M19.9531 13.0924V5.27515H23.0669C23.5859 5.27515 24.0323 5.34 24.4063 5.46972C24.7803 5.59944 25.0703 5.80927 25.2763 6.09923C25.49 6.38155 25.5969 6.76307 25.5969 7.24378C25.5969 7.57188 25.5625 7.85039 25.4938 8.0793C25.4328 8.30058 25.3336 8.49134 25.1962 8.65158C25.0665 8.80419 24.8947 8.94535 24.681 9.07506C24.91 9.159 25.1084 9.27345 25.2763 9.41843C25.4519 9.55578 25.5854 9.74272 25.677 9.97926C25.7686 10.2082 25.8144 10.5134 25.8144 10.8949C25.8144 11.3146 25.7495 11.6656 25.6198 11.9479C25.49 12.2302 25.303 12.4553 25.0588 12.6232C24.8222 12.791 24.5437 12.9131 24.2231 12.9894C23.9026 13.0581 23.5515 13.0924 23.1699 13.0924H19.9531ZM21.5329 11.925H23.0555C23.3226 11.925 23.5439 11.8945 23.7194 11.8334C23.9026 11.7648 24.04 11.6465 24.1316 11.4786C24.2308 11.3108 24.2804 11.078 24.2804 10.7804C24.2804 10.5515 24.2422 10.3646 24.1659 10.2196C24.0896 10.0746 23.9904 9.96782 23.8683 9.89914C23.7461 9.82284 23.6088 9.76943 23.4561 9.7389C23.3111 9.70838 23.1661 9.69312 23.0211 9.69312H21.5329V11.925ZM21.5329 8.57146H23.0097C23.2692 8.57146 23.479 8.53331 23.6393 8.457C23.7996 8.37307 23.9179 8.25099 23.9942 8.09075C24.0705 7.92288 24.1087 7.71304 24.1087 7.46124C24.1087 7.10262 24.0133 6.84318 23.8225 6.68295C23.6393 6.52271 23.3493 6.44259 22.9524 6.44259H21.5329V8.57146Z"
+            fill="#919191"
+          />
+        </svg>
       </a>
-    </section>
+    </footer>
   );
 };
 

package/src/ui/review-dialog/index.tsx

@@ -1,29 +1,27 @@
 import { ReviewProps } from '@/lib/types'
 import { Rating } from '@/ui/review-dialog/rating'
 import { useLocalTranslation } from '../../useLocalTranslation'
-import CloseCircle from '../../assets/icons/closeCircle.svg'
 import { useState } from 'react';
+import SolarCloseCircleLineDuotone from '~icons/solar/close-circle-line-duotone'
 import { Button } from '@/components';
 
 interface ReviewDialogProps {
-    handleSubmit: ({ comment, rating }: ReviewProps) => void;
+    handleSubmit: ({ rating }: ReviewProps) => void;
     onClose: () => void;
+    isSubmitting?: boolean;
 }
 
 const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
     const { t } = useLocalTranslation()
-    const [comment, setComment] = useState<string>('')
     const [rating, setRating] = useState<number>(0)
     const [error, setError] = useState<{ comment?: string; rating?: string }>({})
 
-    const isCommentValid = comment.length >= 10 && comment.length <= 500
+
     const isRatingValid = rating >= 1 && rating <= 5
 
     const validateAndSubmit = () => {
         const newError: typeof error = {}
-        if (!isCommentValid) {
-            newError.comment = t('homeSdk.ReviewDialog.comment_error') || 'Comment must be between 10 and 500 characters.'
-        }
+
         if (!isRatingValid) {
             newError.rating = t('homeSdk.ReviewDialog.rating_error') || 'Rating must be between 1 and 5.'
         }
@@ -34,14 +32,7 @@ const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
         }
 
         setError({})
-        props.handleSubmit({ comment, rating })
-    }
-
-    const handleCommentChange = (val: string) => {
-        setComment(val)
-        if (error.comment && val.length >= 10 && val.length <= 500) {
-            setError((prev) => ({ ...prev, comment: undefined }))
-        }
+        props.handleSubmit({ rating })
     }
 
     const handleRatingChange = (val: number) => {
@@ -52,61 +43,53 @@ 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='babylai-border-t-0 babylai-border-x-0 babylai-border-b babylai-border-solid babylai-border-gray-400 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 babylai-m-0">{t('homeSdk.ReviewDialog.title')}</h2>
-                <CloseCircle
-                    className="babylai-w-6 babylai-h-6 babylai-cursor-pointer babylai-text-primary-500 dark:babylai-text-white"
+        <section 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={props.onClose}></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:cursor-pointer babylai:mb-6 babylai:ms-auto babylai:text-card-foreground"
+                    type='button'
                     onClick={props.onClose}
-                />
-            </header>
-            <div className="babylai-flex babylai-flex-col babylai-gap-2">
-                <p className="babylai-text-sm babylai-mb-3 babylai-mt-0 babylai-text-gray-600 dark:babylai-text-white">
+                >
+                    <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'>
+                    <Rating value={rating} onChange={handleRatingChange} size='lg' />
+                </section>
+
+                <h2 className="babylai:text-2xl babylai:text-center babylai:font-bold babylai:mb-2 babylai:text-card-foreground">{t('homeSdk.ReviewDialog.title')}</h2>
+
+                <p className="babylai:text-sm babylai:text-center babylai:text-muted-foreground babylai:mb-4">
                     {t('homeSdk.ReviewDialog.description')}
                 </p>
 
-                <div className="babylai-flex babylai-flex-col babylai-gap-2">
-                    <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} />
-                    </div>
-                    <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>
-
-                <div className="babylai-flex babylai-flex-col babylai-gap-2">
-                    <label htmlFor='comment' className="babylai-text-base babylai-font-medium dark:babylai-text-white">{t('homeSdk.ReviewDialog.comment_label')}</label>
-                    <textarea
-                        id='comment'
-                        className="babylai-bg-black-white-100 babylai-p-6 babylai-rounded-xl babylai-resize-none babylai-border-none dark:babylai-bg-storm-dust-900 dark:babylai-text-white"
-                        rows={4}
-                        placeholder={t('homeSdk.ReviewDialog.comment_placeholder')}
-                        value={comment}
-                        onChange={(e) => handleCommentChange(e.target.value)}
-                    />
-                    <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>
+                <footer className="babylai:flex babylai:justify-between babylai:gap-3 babylai:mt-6">
+                    <Button
+                        onClick={props.onClose}
+                        variant='secondary'
+                        disabled={props.isSubmitting}
+                    >
+                        {t('homeSdk.ReviewDialog.skip_button')}
+                    </Button>
+                    <Button
+                        onClick={validateAndSubmit}
+                        variant='default'
+                        disabled={props.isSubmitting}
+                    >
+                        {props.isSubmitting ? (
+                            <span className="babylai:inline-flex babylai:items-center babylai:gap-2">
+                                <span
+                                    className="babylai:inline-block babylai:animate-spin babylai:rounded-full babylai:h-4 babylai:w-4 babylai:border-2 babylai:border-white babylai:border-t-transparent babylai:box-border"
+                                    aria-hidden
+                                />
+                                {t('homeSdk.ReviewDialog.submit_button')}
+                            </span>
+                        ) : (
+                            t('homeSdk.ReviewDialog.submit_button')
+                        )}
+                    </Button>
+                </footer>
             </div>
-
-            <footer className="babylai-flex babylai-justify-between babylai-gap-4 babylai-border-t babylai-pt-4">
-                <Button
-                    variant='default'
-                    onClick={validateAndSubmit}
-                    className='babylai-text-sm babylai-w-full !babylai-font-bold'
-                >
-                    {t('homeSdk.ReviewDialog.submit_button')}
-                </Button>
-                <Button
-                    variant='outline'
-                    onClick={props.onClose}
-                    className='babylai-text-sm babylai-w-full babylai-text-primary-500 !babylai-font-bold'
-                >
-                    {t('homeSdk.ReviewDialog.skip_button')}
-                </Button>
-            </footer>
         </section>
     )
 }

package/src/ui/review-dialog/rating.tsx

@@ -20,9 +20,9 @@ const iconMap = {
 }
 
 const sizeMap = {
-  sm: 'babylai-w-4 babylai-h-4',
-  md: 'babylai-w-6 babylai-h-6',
-  lg: 'babylai-w-8 babylai-h-8'
+  sm: 'babylai:w-4 babylai:h-4',
+  md: 'babylai:w-7 babylai:h-7',
+  lg: 'babylai:w-13 babylai:h-13'
 }
 
 export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
@@ -47,7 +47,7 @@ export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
     }
 
     return (
-      <div ref={ref} className={cn('babylai-flex babylai-items-center', className)} {...props}>
+      <div ref={ref} className={cn('babylai:inline-flex babylai:gap-2', 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],
-                'babylai-cursor-pointer babylai-transition-colors',
-                filled ? 'babylai-text-yellow-400 babylai-fill-yellow-400' : 'babylai-text-gray-300',
-                readOnly && 'babylai-cursor-default'
+                'babylai:cursor-pointer babylai:transition-colors',
+                filled ? 'babylai:text-primary-500 babylai:fill-primary-500' : 'babylai:text-gray-300',
+                readOnly && 'babylai:cursor-default'
               )}
               onMouseEnter={() => handleMouseEnter(index + 1)}
               onMouseLeave={handleMouseLeave}

package/dist/components/ui/header.d.ts

@@ -1,6 +0,0 @@
-interface HeaderProps {
-    onClose: () => void;
-    logoUrl?: string;
-}
-declare const Header: ({ onClose, logoUrl }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
-export default Header;

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

@@ -1,6 +0,0 @@
-interface CardProps {
-    text: string;
-    handleClick: () => void;
-}
-declare const Card: React.FC<CardProps>;
-export default Card;

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

@@ -1,5 +0,0 @@
-interface ChatNowCardProps {
-    setIsShowList: (isShowList: boolean) => void;
-}
-declare const ChatNowCard: React.FC<ChatNowCardProps>;
-export default ChatNowCard;