@aslaluroba/help-center-react 3.2.4 → 3.2.6

package/src/ui/help-center.tsx

@@ -1,5 +1,4 @@
-import ReviewDialog from '@/ui/review-dialog';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { apiRequest } from '../core/api';
 import { ClientAblyService } from '../core/AblyService';
 import { useLocalTranslation } from '../useLocalTranslation';
@@ -10,11 +9,12 @@ import HelpButton from './help-button';
 import HelpPopup from './help-popup';
 import { defaultLanguage } from '@/i18n';
 import { LanguageProvider } from '@/lib/LanguageContext';
-import { getThemeStyles } from '@/lib/theme-utils';
+import { getPrimaryColorStyles } from '@/lib/theme-utils';
+import { useActionHandler } from '@/lib/custom-hooks/useActionHandler';
 
 interface HelpCenterProps {
   helpScreenId: string;
-  language: string;
+  language?: 'ar' | 'en';
   user?: {
     id?: string;
     name?: string;
@@ -23,10 +23,7 @@ interface HelpCenterProps {
   };
   showArrow?: boolean;
   messageLabel?: string | null;
-  showHelpScreen?: boolean;
   primaryColor?: string;
-  secondaryColor?: string;
-  logoUrl?: string;
 }
 
 const HelpCenterContent = ({
@@ -34,11 +31,8 @@ const HelpCenterContent = ({
   user,
   showArrow = true,
   messageLabel = null,
-  showHelpScreen = false,
   primaryColor,
-  secondaryColor,
-  logoUrl,
-  language,
+  language = defaultLanguage,
 }: HelpCenterProps) => {
   const { t } = useLocalTranslation();
   const [isOpen, setIsOpen] = useState(false);
@@ -50,12 +44,17 @@ const HelpCenterContent = ({
 
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [reviewSessionId, setReviewSessionId] = useState<string | null>(null);
+  const [inChatReviewSessionId, setInChatReviewSessionId] = useState<string | null>(null);
   const [isAblyConnected, setIsAblyConnected] = useState(false);
   const [isChatClosed, setIsChatClosed] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [needsAgent, setNeedsAgent] = useState(false);
   const [assistantStatus, setAssistantStatus] = useState('idle');
   const [isReviewDialogOpen, setIsReviewDialogOpen] = useState(false);
+  const [isSubmittingReview, setIsSubmittingReview] = useState(false);
+  const [navigateToOptionsListAfterReview, setNavigateToOptionsListAfterReview] = useState(false);
+
+  const actionHandler = useActionHandler();
 
   const handleTogglePopup = () => {
     setIsOpen(!isOpen);
@@ -70,7 +69,8 @@ const HelpCenterContent = ({
     message: string,
     senderType: number,
     needsAgent: boolean,
-    attachments: string[] = []
+    attachmentUrls: string[] = [],
+    attachmentIds: string[] = []
   ) => {
     if (needsAgent) {
       setNeedsAgent(true);
@@ -83,8 +83,8 @@ const HelpCenterContent = ({
         messageContent: message,
         sentAt: new Date(),
         isSeen: true,
-        // Ably now returns downloadUrls directly, not file IDs
-        ...(attachments.length > 0 && { attachmentUrls: attachments }),
+        ...(attachmentUrls.length > 0 && { attachmentUrls }),
+        ...(attachmentIds.length > 0 && { attachmentIds }),
       };
 
       return [...prevMessages, newMessage];
@@ -93,43 +93,54 @@ const HelpCenterContent = ({
     setAssistantStatus('idle');
   };
 
-  const handleEndChat = async () => {
-    if (!sessionId || !selectedOption) return;
+  const handleEndChat = useCallback(
+    async (options?: { fromChatScreen?: boolean }) => {
+      if (!sessionId || !selectedOption) return;
 
-    try {
-      await ClientAblyService.stopConnection();
-      setIsAblyConnected(false);
-      setAssistantStatus('idle');
+      const fromChatScreen = options?.fromChatScreen === true;
 
-      const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST', null, {
-        language: language,
-      });
-      if (!response.ok) throw new Error('Failed to close chat session');
-
-      // Store sessionId for review before clearing the main sessionId
-      setReviewSessionId(sessionId);
-
-      // Clear the sessionId after successfully closing the session
-      setSessionId(null);
-      setSelectedOption(null);
-      setMessages([]);
+      try {
+        await ClientAblyService.stopConnection();
+        setIsAblyConnected(false);
+        setAssistantStatus('idle');
 
-      setIsReviewDialogOpen(true);
-    } catch (error) {
-      setError('Failed to end chat session');
-      setAssistantStatus('idle');
-      // Even if there's an error, clear the session state to prevent stuck state
-      setReviewSessionId(sessionId);
-      setSessionId(null);
-      setSelectedOption(null);
-    }
-  };
+        const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST', null, {
+          language: language,
+        });
+        if (!response.ok) throw new Error('Failed to close chat session');
+
+        setReviewSessionId(sessionId);
+        setSessionId(null);
+
+        if (fromChatScreen) {
+          setInChatReviewSessionId(sessionId);
+          setIsChatClosed(true);
+          // Keep selectedOption and messages; do not open popup
+        } else {
+          setSelectedOption(null);
+          setMessages([]);
+          setIsReviewDialogOpen(true);
+        }
+      } catch (err) {
+        setError('Failed to end chat session');
+        setAssistantStatus('idle');
+        setReviewSessionId(sessionId);
+        setSessionId(null);
+        if (!fromChatScreen) {
+          setSelectedOption(null);
+        }
+      }
+    },
+    [language, selectedOption, sessionId]
+  );
 
   const handleSendChatReview = async ({ comment, rating }: ReviewProps) => {
     if (!reviewSessionId) return;
 
     const payload = { rating, comment };
+    const wasInChatReview = !!inChatReviewSessionId;
 
+    setIsSubmittingReview(true);
     try {
       const response = await apiRequest(`Client/ClientChatSession/${reviewSessionId}/review`, 'POST', payload, {
         language,
@@ -137,17 +148,24 @@ const HelpCenterContent = ({
       if (!response.ok) throw new Error('Failed to send chat review');
 
       handleCloseChatReview();
-    } catch (error) {
+      if (wasInChatReview) {
+        setNavigateToOptionsListAfterReview(true);
+      }
+    } catch (err) {
       setError('Failed to send chat review');
+    } finally {
+      setIsSubmittingReview(false);
     }
   };
 
   const handleCloseChatReview = () => {
     setIsReviewDialogOpen(false);
     setReviewSessionId(null);
+    setInChatReviewSessionId(null);
   };
 
   const handleStartChat = async (option: Option) => {
+    setInChatReviewSessionId(null);
     setMessages([
       {
         id: Date.now(),
@@ -195,7 +213,10 @@ const HelpCenterContent = ({
         newSessionId,
         responseData.ablyToken,
         handleReceiveMessage,
-        responseData.chatSession.tenantId
+        responseData.chatSession.tenantId,
+        (actionType, messageData) => {
+          void actionHandler.handleAction(actionType, messageData);
+        }
       );
 
       // Verify the connection is actually active
@@ -297,6 +318,24 @@ const HelpCenterContent = ({
     }
   };
 
+  // Register known action handlers for realtime messages
+  useEffect(() => {
+    // "needs_agent" → trigger handoff / needs agent UI flow
+    actionHandler.registerHandler('needs_agent', () => {
+      setNeedsAgent(true);
+    });
+
+    // "end_session" → close session and show in-chat review (user stays in chat)
+    actionHandler.registerHandler('end_session', () => {
+      void handleEndChat({ fromChatScreen: true });
+    });
+
+    return () => {
+      actionHandler.unregisterHandler('needs_agent');
+      actionHandler.unregisterHandler('end_session');
+    };
+  }, [actionHandler, handleEndChat]);
+
   useEffect(() => {
     if (isOpen && helpScreenId) {
       setStatus('loading');
@@ -317,10 +356,10 @@ const HelpCenterContent = ({
     }
   }, [isOpen, helpScreenId]);
 
-  const themeStyles = getThemeStyles({ primaryColor, secondaryColor });
+  const themeStyles = getPrimaryColorStyles(primaryColor);
 
   return (
-    <div className='babylai-help-center-container mb-4' style={themeStyles}>
+    <div className='babylai-theme-root babylai:mb-4' style={themeStyles}>
       {showArrowAnimation && !isOpen && (
         <FloatingMessage onClose={handleCloseArrowAnimation} message={messageLabel || t('homeSdk.needAssistance')} />
       )}
@@ -344,16 +383,20 @@ const HelpCenterContent = ({
           assistantStatus={assistantStatus}
           sessionId={sessionId}
           isChatClosed={isChatClosed}
-          isAblyConnected={isAblyConnected}
           selectedOption={selectedOption}
           setSelectedOption={setSelectedOption}
-          showHelpScreen={showHelpScreen}
-          logoUrl={logoUrl}
+          inChatReviewSessionId={inChatReviewSessionId}
+          onInChatReviewSubmit={handleSendChatReview}
+          onInChatReviewDone={handleCloseChatReview}
+          navigateToOptionsListAfterReview={navigateToOptionsListAfterReview}
+          onNavigatedToOptionsList={() => setNavigateToOptionsListAfterReview(false)}
+          isReviewDialogOpen={isReviewDialogOpen}
+          reviewSessionId={reviewSessionId}
+          isSubmittingReview={isSubmittingReview}
+          onReviewDialogSubmit={handleSendChatReview}
+          onReviewDialogClose={handleCloseChatReview}
         />
       )}
-      {isOpen && !!isReviewDialogOpen && reviewSessionId && (
-        <ReviewDialog handleSubmit={handleSendChatReview} onClose={handleCloseChatReview} />
-      )}
     </div>
   );
 };
@@ -365,10 +408,7 @@ const HelpCenter = ({
   showArrow = true,
   language = defaultLanguage,
   messageLabel = null,
-  showHelpScreen = false,
   primaryColor,
-  secondaryColor,
-  logoUrl,
 }: HelpCenterProps) => {
   return (
     <LanguageProvider language={language}>
@@ -378,10 +418,7 @@ const HelpCenter = ({
         user={user}
         showArrow={showArrow}
         messageLabel={messageLabel}
-        showHelpScreen={showHelpScreen}
         primaryColor={primaryColor}
-        secondaryColor={secondaryColor}
-        logoUrl={logoUrl}
       />
     </LanguageProvider>
   );

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-0 babylai:md:inset-auto babylai:md:max-w-sm babylai:md:h-[calc(100vh-220px)] babylai:max-h-[800px]
+     babylai:overflow-auto babylai:w-full babylai:bg-black-white-50 babylai:md:mb-4
+babylai:md:bottom-24 babylai:md:right-4 babylai:rounded-none babylai:md: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-0 babylai:md:inset-auto babylai:md:max-w-sm babylai:md:h-[calc(100vh-220px)] babylai:max-h-[800px]
+     babylai:overflow-auto babylai:w-full babylai:bg-black-white-50 babylai:md:mb-4
+babylai:md:bottom-24 babylai:md:right-4 babylai:rounded-none babylai:md: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-0 babylai:md:inset-auto babylai:md:max-w-sm babylai:md:h-[calc(100vh-220px)] babylai:max-h-[800px]
+     babylai:overflow-auto babylai:w-full babylai:bg-secondary babylai:md:mb-4
+babylai:md:bottom-24 babylai:md:right-4 babylai:rounded-none babylai:md: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-none babylai:md: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>
   );