@aslaluroba/help-center-react 3.2.5 → 3.2.7

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

@@ -1,5 +1,8 @@
 import { Button } from "@/components";
 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'
 
 interface ConfirmationModalProps {
     title: string;
@@ -12,27 +15,39 @@ const ConfirmationModal = ({ title, message, onCancel, onConfirm }: Confirmation
     const { t } = useLocalTranslation();
 
     return (
-        <div className='babylai-absolute babylai-inset-0 babylai-z-50 babylai-flex babylai-items-center babylai-justify-center babylai-rounded-3xl babylai-overflow-hidden'>
-            <div className='babylai-absolute babylai-inset-0 babylai-bg-black/60' onClick={onCancel}></div>
-            <div className='babylai-bg-black-white-100 dark:babylai-bg-storm-dust-900 babylai-rounded-3xl babylai-p-4 babylai-w-[220px] babylai-z-50 babylai-shadow-lg'>
-                <h3 className='babylai-text-black-white-900 babylai-font-bold babylai-text-sm babylai-mb-2 babylai-text-center babylai-mt-0 dark:babylai-text-white'>{title}</h3>
-                <p className='babylai-text-black-white-700 babylai-text-xs babylai-mb-4 dark:babylai-text-white babylai-mt-0'>{message}</p>
-                <div className='babylai-flex babylai-justify-end babylai-gap-2 babylai-w-full'>
+        <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: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
-                        variant='default'
-                        size='sm'
                         onClick={onConfirm}
-                        className='babylai-text-sm babylai-w-full !babylai-font-bold'
+                        variant='secondary'
                     >
                         {t('homeSdk.ConfirmationModal.confirmation_button')}
                     </Button>
                     <Button
-                        variant='outline'
-                        size='sm'
                         onClick={onCancel}
-                        className='babylai-text-sm babylai-w-full babylai-text-primary-500 !babylai-font-bold'
+                        variant='default'
                     >
                         {t('homeSdk.ConfirmationModal.cancel_button')}
+                        <SolarPlain2BoldDuotone className="babylai:w-6 babylai:h-6" />
                     </Button>
                 </div>
             </div>

package/src/ui/floating-message.tsx

@@ -1,4 +1,5 @@
-import CloseIcon from '@/assets/icons/close.svg'
+import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'
+
 interface FloatingMessageProps {
   message: string
   onClose: () => void
@@ -8,16 +9,16 @@ const FloatingMessage = ({ message, onClose }: FloatingMessageProps) => {
   return (
     <div
       className=" 
-    babylai-fixed babylai-bottom-[6rem] babylai-right-4
-    babylai-z-50 babylai-flex babylai-flex-col babylai-items-end babylai-animate-[float_2s_infinite_ease-in-out]"
+    babylai:fixed babylai:bottom-16 babylai:right-4
+    babylai:z-50 babylai:flex babylai:flex-col babylai:items-end babylai:animate-[float_2s_infinite_ease-in-out]"
     >
-      <div className="babylai-bg-primary-500 babylai-text-white babylai-py-3 babylai-px-4 babylai-rounded-3xl babylai-shadow-lg babylai-mb-4 babylai-max-w-[200px] babylai-relative after:babylai-content-[''] after:babylai-absolute after:babylai--bottom-[10px] after:babylai-right-5 after:babylai-w-0 after:babylai-h-0 after:babylai-border-l-[10px] after:babylai-border-r-[10px] after:babylai-border-t-[10px] after:babylai-border-l-transparent after:babylai-border-r-transparent after:babylai-border-t-primary-500">
-        <p className="babylai-text-xs babylai-font-bold babylai-m-0">{message}</p>
+      <div className="babylai:bg-primary-500 babylai:text-white babylai:py-3 babylai:px-4 babylai:rounded-3xl babylai:shadow-lg babylai:mb-4 babylai:max-w-[200px] babylai:relative after:babylai:content-[''] after:babylai:absolute after:babylai:-bottom-[10px] after:babylai:right-5 after:babylai:w-0 after:babylai:h-0 after:babylai:border-l-[10px] after:babylai:border-r-[10px] after:babylai:border-t-[10px] after:babylai:border-l-transparent after:babylai:border-r-transparent after:babylai:border-t-primary-500">
+        <p className="babylai:text-xs babylai:font-bold babylai:m-0">{message}</p>
         <button
-          className="babylai-absolute babylai--top-2 babylai--right-2 babylai-w-5 babylai-h-5 babylai-rounded-full babylai-bg-white babylai-border-none babylai-cursor-pointer babylai-flex babylai-items-center babylai-justify-center babylai-text-black-white-700 babylai-p-[3px] hover:babylai-bg-primary-400 babylai-hover:text-white babylai-shadow-md"
+          className="babylai:absolute babylai:-top-2 babylai:-right-2 babylai:w-5 babylai:h-5 babylai:rounded-full babylai:bg-white babylai:border-none babylai:cursor-pointer babylai:flex babylai:items-center babylai:justify-center babylai:text-black-white-700 babylai:p-[3px] babylai:hover:bg-primary-400 babylai:hover:text-white babylai:shadow-md"
           onClick={onClose}
         >
-          <CloseIcon className="babylai-w-8 babylai-h-8" />
+          <MaterialSymbolsCloseSmallOutlineRounded className="babylai:w-8 babylai:h-8" />
         </button>
       </div>
     </div>

package/src/ui/help-button.tsx

@@ -9,14 +9,14 @@ const HelpButton = ({ onClick }: HelpButtonProps) => {
   return (
     <button
       className="
-      babylai-fixed babylai-z-50 babylai-bottom-4 babylai-right-4
-    babylai-w-[80px] babylai-h-[80px]
-    babylai-rounded-full babylai-bg-primary-500 babylai-flex babylai-items-center 
-    babylai-justify-center babylai-border-[0.5px] babylai-border-black-white-50 "
+      babylai:fixed babylai:z-50 babylai:bottom-4 babylai:right-4
+    babylai:p-4 
+    babylai:rounded-full babylai:bg-primary-500 babylai:flex babylai:items-center 
+    babylai:justify-center babylai:border-[0.5px] babylai:border-black-white-50 "
       onClick={onClick}
       aria-label="Need Help?"
     >
-      <Logo className="babylai-w-[60%] babylai-h-[60%] babylai-text-primary-500" />
+      <Logo className="babylai:w-8 babylai:h-8 babylai:text-primary-500" />
     </button>
   )
 }

package/src/ui/help-center.tsx

@@ -1,4 +1,3 @@
-import ReviewDialog from '@/ui/review-dialog';
 import { useCallback, useEffect, useState } from 'react';
 import { apiRequest } from '../core/api';
 import { ClientAblyService } from '../core/AblyService';
@@ -10,12 +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;
@@ -24,10 +23,7 @@ interface HelpCenterProps {
   };
   showArrow?: boolean;
   messageLabel?: string | null;
-  showHelpScreen?: boolean;
   primaryColor?: string;
-  secondaryColor?: string;
-  logoUrl?: string;
 }
 
 const HelpCenterContent = ({
@@ -35,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);
@@ -51,12 +44,15 @@ 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();
 
@@ -73,7 +69,8 @@ const HelpCenterContent = ({
     message: string,
     senderType: number,
     needsAgent: boolean,
-    attachments: string[] = []
+    attachmentUrls: string[] = [],
+    attachmentIds: string[] = []
   ) => {
     if (needsAgent) {
       setNeedsAgent(true);
@@ -86,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];
@@ -96,43 +93,54 @@ const HelpCenterContent = ({
     setAssistantStatus('idle');
   };
 
-  const handleEndChat = useCallback(async () => {
-    if (!sessionId || !selectedOption) return;
-
-    try {
-      await ClientAblyService.stopConnection();
-      setIsAblyConnected(false);
-      setAssistantStatus('idle');
-
-      const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST', null, {
-        language: language,
-      });
-      if (!response.ok) throw new Error('Failed to close chat session');
+  const handleEndChat = useCallback(
+    async (options?: { fromChatScreen?: boolean }) => {
+      if (!sessionId || !selectedOption) return;
 
-      // Store sessionId for review before clearing the main sessionId
-      setReviewSessionId(sessionId);
+      const fromChatScreen = options?.fromChatScreen === true;
 
-      // 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);
-    }
-  }, [language, selectedOption, sessionId]);
+        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,
@@ -140,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(),
@@ -310,10 +325,9 @@ const HelpCenterContent = ({
       setNeedsAgent(true);
     });
 
-    // "end_session" → gracefully close the chat session and show review dialog
+    // "end_session" → close session and show in-chat review (user stays in chat)
     actionHandler.registerHandler('end_session', () => {
-      // Reuse existing end chat logic
-      void handleEndChat();
+      void handleEndChat({ fromChatScreen: true });
     });
 
     return () => {
@@ -342,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')} />
       )}
@@ -369,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>
   );
 };
@@ -390,10 +408,7 @@ const HelpCenter = ({
   showArrow = true,
   language = defaultLanguage,
   messageLabel = null,
-  showHelpScreen = false,
   primaryColor,
-  secondaryColor,
-  logoUrl,
 }: HelpCenterProps) => {
   return (
     <LanguageProvider language={language}>
@@ -403,10 +418,7 @@ const HelpCenter = ({
         user={user}
         showArrow={showArrow}
         messageLabel={messageLabel}
-        showHelpScreen={showHelpScreen}
         primaryColor={primaryColor}
-        secondaryColor={secondaryColor}
-        logoUrl={logoUrl}
       />
     </LanguageProvider>
   );