@aslaluroba/help-center-react 2.1.3 → 3.0.1

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

@@ -34,7 +34,9 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
     <div className='babylai-px-8 babylai-pb-12 babylai-pt-8 babylai-overflow-y-auto  babylai-h-full'>
       <OptionsListHeader handleBack={handleBack} showHelpScreen={showHelpScreen} />
 
-      <h1 className='babylai-text-4xl  babylai-font-bold babylai-text-black-white-800 mb-4'>{helpScreen?.title}</h1>
+      <h1 className='babylai-text-4xl babylai-font-bold mb-4 babylai-text-black-white-800 dark:babylai-text-white'>
+        {helpScreen?.title}
+      </h1>
 
       {helpScreen && (
         <div className='babylai-flex babylai-flex-col babylai-gap-3 babylai-mt-3 babylai-mb-3'>
@@ -42,7 +44,7 @@ const OptionsListScreen: React.FC<OptionsListScreenProps> = ({
             <Card
               key={option.id}
               variant='rounded'
-              className='babylai-cursor-pointer babylai-transition-all babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-1'
+              className='babylai-cursor-pointer babylai-transition-all babylai-hover:babylai-shadow-md !babylai-px-2 !babylai-py-1 dark:!babylai-bg-storm-dust-900'
               onClick={() => handleToggleExpandOption(option)}
             >
               <OptionCard title={option.title} />

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

@@ -12,7 +12,7 @@ const OptionCard: React.FC<OptionCardProps> = (props) => {
           const isLTR = i18n.dir() === 'ltr';
     return (
         <div className="babylai-flex babylai-items-center babylai-justify-between babylai-p-2">
-            <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800">{props.title}</p>
+            <p className="babylai-text-sm babylai-font-medium babylai-text-black-white-800 dark:babylai-text-white">{props.title}</p>
             <Button variant="rounded-icon" size="icon" className="babylai-text-primary-500 hover:babylai-bg-primary-100">
                 <ArrowRight  className={`babylai-w-[12px] babylai-h-[12px] ${
       isLTR ? '' : 'babylai-rotate-180'

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

@@ -0,0 +1,44 @@
+import { Button } from "@/components";
+import { useLocalTranslation } from "@/useLocalTranslation";
+import React from "react";
+
+interface ConfirmationModalProps {
+    title: string;
+    message: string;
+    onCancel: () => void;
+    onConfirm: () => void;
+}
+
+const ConfirmationModal = ({ title, message, onCancel, onConfirm, }: ConfirmationModalProps) => {
+    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-mb-2 babylai-text-center dark:babylai-text-white'>{title}</h3>
+                <p className='babylai-text-black-white-700 babylai-text-xs babylai-mb-4 dark:babylai-text-white'>{message}</p>
+                <div className='babylai-flex babylai-justify-end babylai-gap-2 babylai-w-full'>
+                    <Button
+                        variant='default'
+                        size='sm'
+                        onClick={onConfirm}
+                        className='babylai-text-sm babylai-w-full !babylai-font-bold'
+                    >
+                        {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'
+                    >
+                        {t('homeSdk.ConfirmationModal.cancel_button')}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmationModal;

package/src/ui/help-center.tsx

@@ -1,8 +1,7 @@
 import ReviewDialog from '@/ui/review-dialog';
 import React, { useEffect, useState } from 'react';
 import { apiRequest } from '../core/api';
-import { ClientSignalRService } from '../core/SignalRService';
-import { configService } from '../lib/config';
+import { ClientAblyService } from '../core/AblyService';
 import { useLocalTranslation } from '../useLocalTranslation';
 import '../globals.css';
 import { HelpScreenData, Message, Option, ReviewProps } from '../lib/types';
@@ -42,7 +41,7 @@ export function HelpCenter({
 
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [reviewSessionId, setReviewSessionId] = useState<string | null>(null);
-  const [isSignalRConnected, setIsSignalRConnected] = useState(false);
+  const [isAblyConnected, setIsAblyConnected] = useState(false);
   const [isChatClosed, setIsChatClosed] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [needsAgent, setNeedsAgent] = useState(false);
@@ -73,9 +72,7 @@ export function HelpCenter({
         isSeen: true,
       };
 
-      const updatedMessages = [...prevMessages, newMessage];
-
-      return updatedMessages;
+      return [...prevMessages, newMessage];
     });
 
     setAssistantStatus('idle');
@@ -85,8 +82,8 @@ export function HelpCenter({
     if (!sessionId || !selectedOption) return;
 
     try {
-      await ClientSignalRService.stopConnection();
-      setIsSignalRConnected(false);
+      await ClientAblyService.stopConnection();
+      setIsAblyConnected(false);
       setAssistantStatus('idle');
 
       const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST');
@@ -109,7 +106,7 @@ export function HelpCenter({
       setError('Failed to end chat session');
       setAssistantStatus('idle');
       // Even if there's an error, clear the session state to prevent stuck state
-      setReviewSessionId(sessionId); // Store for review even if there's an error
+      setReviewSessionId(sessionId);
       setSessionId(null);
       setSelectedOption(null);
     }
@@ -125,7 +122,7 @@ export function HelpCenter({
       if (!response.ok) throw new Error('Failed to send chat review');
 
       setIsReviewDialogOpen(false);
-      setReviewSessionId(null); // Clear review session ID after review is sent
+      setReviewSessionId(null);
     } catch (error) {
       console.error('Error sending chat review:', error);
       setError('Failed to send chat review');
@@ -134,7 +131,7 @@ export function HelpCenter({
 
   const handleCloseChatReview = () => {
     setIsReviewDialogOpen(false);
-    setReviewSessionId(null); // Clear review session ID when review is closed
+    setReviewSessionId(null);
   };
 
   const handleStartChat = async (option: Option) => {
@@ -142,16 +139,15 @@ export function HelpCenter({
   };
 
   const startNewChatSession = async (option: Option) => {
-    if (isSignalRConnected || sessionId) {
+    if (isAblyConnected || sessionId) {
       handleEndChat();
     }
+
     try {
       setStatus('loading');
       setError('');
       setMessages([]);
 
-      const tokenResponse = await configService.getToken();
-
       const chatSessionCreateDto = {
         helpScreenId: helpScreenId,
         optionId: option.id,
@@ -170,16 +166,15 @@ export function HelpCenter({
         throw new Error('Failed to create chat session');
       }
 
-      const createdSession = await response.json();
-
-      setSessionId(createdSession.id);
+      const responseData = await response.json();
+      setSessionId(responseData.chatSession.id);
 
-      if (option.assistant?.greeting) {
+      if (responseData.chatSession.assistant?.greeting) {
         setMessages([
           {
             id: Date.now(),
             senderType: 3,
-            messageContent: option.assistant.greeting,
+            messageContent: responseData.chatSession.assistant.greeting,
             sentAt: new Date(),
             isSeen: true,
           },
@@ -196,14 +191,19 @@ export function HelpCenter({
         ]);
       }
 
-      await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
+      await ClientAblyService.startConnection(
+        responseData.chatSession.id,
+        responseData.ablyToken,
+        handleReceiveMessage,
+        responseData.chatSession.tenantId
+      );
 
       // Verify the connection is actually active
-      if (!ClientSignalRService.isConnectionActive()) {
-        throw new Error('SignalR connection failed to establish properly');
+      if (!ClientAblyService.isConnectionActive()) {
+        throw new Error('Ably connection failed to establish properly');
       }
 
-      setIsSignalRConnected(true);
+      setIsAblyConnected(true);
       setIsChatClosed(false);
       setStatus('succeeded');
     } catch (error) {
@@ -213,8 +213,8 @@ export function HelpCenter({
   };
 
   const handleSendMessage = async (message: string) => {
-    // Only send message if SignalR is connected
-    if (!isSignalRConnected) {
+    // Only send message if Ably is connected
+    if (!isAblyConnected) {
       setError('Connection lost. Please try again.');
       return;
     }
@@ -252,17 +252,21 @@ export function HelpCenter({
             throw new Error('Failed to create chat session');
           }
 
-          const createdSession = await response.json();
-          setSessionId(createdSession.id);
-          currentSessionId = createdSession.id;
+          const responseData = await response.json();
+          setSessionId(responseData.chatSession.id);
+          currentSessionId = responseData.chatSession.id;
 
-          const tokenResponse = await configService.getToken();
-          await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
-          setIsSignalRConnected(true);
+          await ClientAblyService.startConnection(
+            responseData.chatSession.id,
+            responseData.ablyToken,
+            handleReceiveMessage,
+            responseData.chatSession.tenantId
+          );
+
+          setIsAblyConnected(true);
         }
 
         const messageDto = { messageContent: message };
-
         const response = await apiRequest(
           `Client/ClientChatSession/${currentSessionId}/send-message`,
           'POST',
@@ -273,11 +277,13 @@ export function HelpCenter({
           throw new Error('Failed to send message');
         }
 
-        setMessages((prevMessages) =>
-          prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg))
-        );
+        setMessages((prevMessages) => {
+          return prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg));
+        });
       } catch (error) {
+        console.error('Error in handleSendMessage:', error);
         setAssistantStatus('idle');
+
         const errorMessage = {
           id: Date.now(),
           senderType: 3,
@@ -334,7 +340,7 @@ export function HelpCenter({
           assistantStatus={assistantStatus}
           sessionId={sessionId}
           isChatClosed={isChatClosed}
-          isSignalRConnected={isSignalRConnected}
+          isAblyConnected={isAblyConnected}
           selectedOption={selectedOption}
           setSelectedOption={setSelectedOption}
           showHelpScreen={showHelpScreen}

package/src/ui/help-popup.tsx

@@ -10,6 +10,7 @@ import ChatIcon from '../assets/icons/chat.svg';
 import { Button } from '@/components';
 import { HelpScreenData, Message, Option } from '@/lib/types';
 import { useLocalTranslation } from '../useLocalTranslation';
+import ConfirmationModal from './confirmation-modal';
 
 type HelpPopupProps = {
   isOpen: boolean;
@@ -26,55 +27,12 @@ type HelpPopupProps = {
   assistantStatus: string;
   sessionId: string | null;
   isChatClosed: boolean;
-  isSignalRConnected: boolean;
+  isAblyConnected: boolean;
   selectedOption: Option | null;
   setSelectedOption: (option: Option | null) => void;
   showHelpScreen: boolean;
 };
 
-// Confirmation Modal Component
-export const ConfirmationModal = ({
-  title,
-  message,
-  onCancel,
-  onConfirm,
-}: {
-  title: string;
-  message: string;
-  onCancel: () => void;
-  onConfirm: () => void;
-}) => {
-  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 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-mb-2 babylai-text-center'>{title}</h3>
-        <p className='babylai-text-black-white-700 babylai-text-xs babylai-mb-4'>{message}</p>
-        <div className='babylai-flex babylai-justify-end babylai-gap-2 babylai-w-full'>
-          <Button
-            variant='default'
-            size='sm'
-            onClick={onConfirm}
-            className='babylai-text-sm babylai-w-full !babylai-font-bold'
-          >
-            {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'
-          >
-            {t('homeSdk.ConfirmationModal.cancel_button')}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export function HelpPopup({
   onClose,
   helpScreen,
@@ -90,7 +48,7 @@ export function HelpPopup({
   selectedOption,
   setSelectedOption,
   showHelpScreen,
-  isSignalRConnected,
+  isAblyConnected,
 }: HelpPopupProps) {
   // ALL HOOKS MUST BE CALLED FIRST - BEFORE ANY EARLY RETURNS
   const [showChat, setShowChat] = useState(false);
@@ -152,11 +110,11 @@ export function HelpPopup({
 
   const handleSendMessage = useCallback(
     (message: string) => {
-      if (message.trim() && isSignalRConnected) {
+      if (message.trim() && isAblyConnected) {
         onSendMessage(message.trim());
       }
     },
-    [onSendMessage]
+    [onSendMessage, isAblyConnected]
   );
 
   const hideEndChatConfirmation = useCallback(() => {
@@ -241,7 +199,7 @@ export function HelpPopup({
             messages={memoizedMessages}
             assistantStatus={assistantStatus}
             needsAgent={needsAgent}
-            isSignalRConnected={isSignalRConnected}
+            isAblyConnected={isAblyConnected}
           />
         </>
       );
@@ -322,7 +280,7 @@ export function HelpPopup({
   if (status === 'loading' && !helpScreen) {
     return (
       <div
-        className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
+        className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px) 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'
       >
@@ -334,7 +292,7 @@ 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-min-w-sm md:babylai-h-[calc(100vh-240px)]
+        className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px) 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'
       >
@@ -345,7 +303,7 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
 
   return (
     <div
-      className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)]
+      className='babylai-fixed babylai-inset-0 md:babylai-inset-auto md:babylai-max-w-sm md:babylai-min-w-sm md:babylai-h-[calc(100vh-240px)] 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'
     >
@@ -354,7 +312,7 @@ md:babylai-bottom-[6rem] md:babylai-right-4 babylai-rounded-none md:babylai-roun
           'babylai-h-full babylai-rounded-none md:babylai-rounded-3xl babylai-flex babylai-flex-col babylai-relative',
           {
             'babylai-bg-gradient-to-b babylai-from-primary-500 babylai-to-primary-500/60': !isShowList,
-            'babylai-bg-black-white-100': isShowList,
+            'babylai-bg-black-white-100 dark:babylai-bg-storm-dust-950': isShowList,
           }
         )}
       >

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

@@ -51,18 +51,18 @@ 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 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">
+        <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='border-b pb-4 babylai-flex babylai-items-center babylai-justify-between babylai-gap-4'>
-                <h2 className="babylai-text-lg babylai-font-semibold">{t('homeSdk.ReviewDialog.title')}</h2>
-                <CloseCircle className="babylai-w-6 babylai-h-6 babylai-cursor-pointer" onClick={props.onClose} />
+                <h2 className="babylai-text-lg babylai-font-semibold dark:babylai-text-white">{t('homeSdk.ReviewDialog.title')}</h2>
+                <CloseCircle className="babylai-w-6 babylai-h-6 babylai-cursor-pointer dark:babylai-text-white" onClick={props.onClose} />
             </header>
             <div className="babylai-flex babylai-flex-col babylai-gap-2">
-                <p className="babylai-text-sm babylai-text-gray-600 mb-3">
+                <p className="babylai-text-sm babylai-text-gray-600 mb-3 dark:babylai-text-white">
                     {t('homeSdk.ReviewDialog.description')}
                 </p>
 
                 <div className="babylai-flex babylai-items-center babylai-gap-2">
-                    <span className="babylai-text-base babylai-font-medium">{t('homeSdk.ReviewDialog.rating_label')}</span>
+                    <span className="babylai-text-base babylai-font-medium dark:babylai-text-white">{t('homeSdk.ReviewDialog.rating_label')}</span>
                     <Rating value={rating} onChange={handleRatingChange} />
                     <span className={`babylai-text-sm babylai-text-red-500 transition-opacity duration-300 ${error.rating ? 'opacity-100' : 'opacity-0'}`}>
                         {error.rating}
@@ -70,10 +70,10 @@ const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
                 </div>
 
                 <div className="babylai-flex babylai-flex-col babylai-gap-2">
-                    <label htmlFor='comment' className="babylai-text-base babylai-font-medium">{t('homeSdk.ReviewDialog.comment_label')}</label>
+                    <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"
+                        className="babylai-bg-black-white-100 babylai-p-6 babylai-rounded-xl babylai-resize-none dark:babylai-bg-storm-dust-900 dark:babylai-text-white"
                         rows={4}
                         placeholder="Write your comment here..."
                         value={comment}