@aslaluroba/help-center-react 2.0.5 → 2.0.7

package/dist/index.esm.js

@@ -265,7 +265,6 @@ class ConfigService {
         return ConfigService.instance;
     }
     initialize(config) {
-        console.log('🔧 Initializing config with:', config);
         this.config = {
             baseUrl: config.baseUrl || 'https://babylai.net/api',
             hubUrl: config.hubUrl || config.baseUrl || 'https://babylai.net/api',
@@ -273,16 +272,13 @@ class ConfigService {
             apiKey: config.apiKey,
             getToken: config.getToken,
         };
-        console.log('📋 Final config:', this.config);
         // Initialize API with the getToken function directly
         if (!this.config.getToken) {
             throw new Error('getToken function is required in configuration');
         }
-        console.log('🌐 Initializing API with baseUrl:', this.config.baseUrl);
         initializeAPI(this.config.baseUrl || 'https://babylai.net/api', this.config.getToken);
         // Initialize SignalR
         const hubUrl = this.config.hubUrl || this.config.baseUrl || 'https://babylai.net/api';
-        console.log('🔌 Initializing SignalR with hubUrl:', hubUrl);
         ClientSignalRService.initialize(hubUrl);
     }
     getConfig() {
@@ -710,9 +706,9 @@ var SvgEnvelope = function SvgEnvelope(props) {
 
 const ChatWindowFooter = (props) => {
     const { t, dir } = useLocalTranslation();
-    return (React__default.createElement("footer", { className: "babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white babylai-m-4 md:babylai-m-6 md:babylai-py-3 md:babylai-px-4" },
-        React__default.createElement("input", { type: "text", value: props.inputMessage, onChange: (e) => props.setInputMessage(e.target.value), onKeyDown: props.handleKeyDown, placeholder: t('homeSdk.placeholder'), className: "babylai-flex-1 babylai-py-2 babylai-px-4 babylai-bg-transparent babylai-outline-none babylai-text-sm" }),
-        React__default.createElement(Button, { variant: "default", size: "icon", onClick: props.handleSendMessage, disabled: props === null || props === void 0 ? void 0 : props.isLoading, className: "babylai-rounded-full babylai-bg-purple-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 babylai-disabled:babylai-opacity-50" },
+    return (React__default.createElement("footer", { className: 'babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white babylai-m-4 md:babylai-m-6 md:babylai-py-3 md:babylai-px-4' },
+        React__default.createElement("input", { type: 'text', value: props.inputMessage, onChange: (e) => props.setInputMessage(e.target.value), onKeyDown: props.handleKeyDown, placeholder: t('homeSdk.placeholder'), className: 'babylai-flex-1 babylai-py-2 babylai-px-4 babylai-bg-transparent babylai-outline-none babylai-text-sm' }),
+        React__default.createElement(Button, { variant: 'default', size: 'icon', onClick: props.handleSendMessage, disabled: (props === null || props === void 0 ? void 0 : props.isLoading) || !props.isSignalRConnected, className: 'babylai-rounded-full babylai-bg-purple-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 babylai-disabled:babylai-opacity-50' },
             React__default.createElement(SvgEnvelope, { className: `babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}` }))));
 };
 
@@ -765,7 +761,7 @@ const TypingIndicator = React__default.memo(({ firstHumanAgentIndex }) => {
             React__default.createElement("p", { className: 'babylai-text-sm babylai-opacity-70' }, "..."))));
 });
 TypingIndicator.displayName = 'TypingIndicator';
-const ChatWindow = React__default.memo(({ onSendMessage, messages, assistantStatus = 'loading' }) => {
+const ChatWindow = React__default.memo(({ onSendMessage, messages, assistantStatus = 'loading', isSignalRConnected }) => {
     const [inputMessage, setInputMessage] = useState('');
     const messagesEndRef = useRef(null);
     const scrollTimeoutRef = useRef(null);
@@ -805,14 +801,14 @@ const ChatWindow = React__default.memo(({ onSendMessage, messages, assistantStat
         }
     }, [inputMessage, onSendMessage]);
     const handleKeyDown = useCallback((e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
+        if (e.key === 'Enter' && !e.shiftKey && isSignalRConnected) {
             e.preventDefault();
             if (inputMessage.trim() && assistantStatus !== 'typing') {
                 onSendMessage(inputMessage);
                 setInputMessage('');
             }
         }
-    }, [inputMessage, onSendMessage, assistantStatus]);
+    }, [inputMessage, onSendMessage, assistantStatus, isSignalRConnected]);
     // Memoize the first human agent index calculation
     const firstHumanAgentIndex = useMemo(() => {
         return messages.findIndex((message) => message.senderType === 2);
@@ -833,7 +829,7 @@ const ChatWindow = React__default.memo(({ onSendMessage, messages, assistantStat
             messagesList,
             assistantStatus === 'typing' && React__default.createElement(TypingIndicator, { firstHumanAgentIndex: firstHumanAgentIndex }),
             React__default.createElement("div", { ref: messagesEndRef })),
-        React__default.createElement(ChatWindowFooter, { inputMessage: inputMessage, handleKeyDown: handleKeyDown, handleSendMessage: handleSendMessage, setInputMessage: setInputMessage, isLoading: isLoading })));
+        React__default.createElement(ChatWindowFooter, { inputMessage: inputMessage, handleKeyDown: handleKeyDown, handleSendMessage: handleSendMessage, setInputMessage: setInputMessage, isLoading: isLoading, isSignalRConnected: isSignalRConnected })));
 });
 ChatWindow.displayName = 'ChatWindow';
 
@@ -1096,7 +1092,7 @@ const ConfirmationModal = ({ title, message, onCancel, onConfirm, }) => {
                 React__default.createElement(Button, { variant: 'default', size: 'sm', onClick: onConfirm, className: 'babylai-text-sm babylai-w-full !babylai-font-bold' }, t('homeSdk.ConfirmationModal.confirmation_button')),
                 React__default.createElement(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'))))));
 };
-function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, }) {
+function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isSignalRConnected, }) {
     // ALL HOOKS MUST BE CALLED FIRST - BEFORE ANY EARLY RETURNS
     const [showChat, setShowChat] = useState(false);
     const [isShowList, setIsShowList] = useState(!showHelpScreen || false);
@@ -1149,7 +1145,7 @@ function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMess
         }
     }, [onStartChat, setSelectedOption, sessionId, setStartNewChatConfirmation, setTempSelectedOption]);
     const handleSendMessage = useCallback((message) => {
-        if (message.trim()) {
+        if (message.trim() && isSignalRConnected) {
             onSendMessage(message.trim());
         }
     }, [onSendMessage]);
@@ -1178,7 +1174,7 @@ function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMess
         if (showChat && selectedOption) {
             return (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(ChatWindowHeader, { handleBack: handleBack, handleEndChat: showEndChatConfirmation, onClose: onClose, isShowList: isShowList, showChat: showChat, setIsShowList: setIsShowList }),
-                React__default.createElement(ChatWindow, { onSendMessage: handleSendMessage, messages: memoizedMessages, assistantStatus: assistantStatus, needsAgent: needsAgent })));
+                React__default.createElement(ChatWindow, { onSendMessage: handleSendMessage, messages: memoizedMessages, assistantStatus: assistantStatus, needsAgent: needsAgent, isSignalRConnected: isSignalRConnected })));
         }
         if (isShowList) {
             return (React__default.createElement(OptionsListScreen, { helpScreen: helpScreen, expandedOption: expandedOption, setExpandedOption: setExpandedOption, handleStartChat: handleStartChat, handleBack: showHelpScreen ? handleBack : onClose, showHelpScreen: showHelpScreen }));
@@ -1266,17 +1262,7 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
         setShowArrowAnimation(false);
     };
     const handleReceiveMessage = (message, senderType, needsAgent) => {
-        console.log('🎯 Help Center received message:', {
-            message,
-            senderType,
-            needsAgent,
-            timestamp: new Date().toISOString(),
-            currentSessionId: sessionId,
-            isSignalRConnected,
-            messagesCount: messages.length,
-        });
         if (needsAgent) {
-            console.log('🚨 Agent needed for this message');
             setNeedsAgent(true);
         }
         setMessages((prevMessages) => {
@@ -1287,13 +1273,10 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
                 sentAt: new Date(),
                 isSeen: true,
             };
-            console.log('✅ Adding message to state:', newMessage);
             const updatedMessages = [...prevMessages, newMessage];
-            console.log('📊 Total messages after update:', updatedMessages.length);
             return updatedMessages;
         });
         setAssistantStatus('idle');
-        console.log('🔄 Assistant status set to idle');
     };
     const handleEndChat = async (option) => {
         if (!sessionId || !selectedOption)
@@ -1301,6 +1284,7 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
         try {
             await ClientSignalRService.stopConnection();
             setIsSignalRConnected(false);
+            setAssistantStatus('idle');
             const response = await apiRequest(`Client/ClientChatSession/${sessionId}/close`, 'POST');
             if (!response.ok)
                 throw new Error('Failed to close chat session');
@@ -1312,6 +1296,7 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
         catch (error) {
             console.error('Error ending chat:', error);
             setError('Failed to end chat session');
+            setAssistantStatus('idle');
         }
     };
     const handleSendChatReview = async ({ comment, rating }) => {
@@ -1337,6 +1322,9 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
     };
     const startNewChatSession = async (option) => {
         var _a;
+        if (isSignalRConnected || sessionId) {
+            handleEndChat();
+        }
         try {
             setStatus('loading');
             setError('');
@@ -1358,14 +1346,12 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
                 throw new Error('Failed to create chat session');
             }
             const createdSession = await response.json();
-            console.log('Created session:', createdSession);
             setSessionId(createdSession.id);
-            // Add greeting message if available
             if ((_a = option.assistant) === null || _a === void 0 ? void 0 : _a.greeting) {
                 setMessages([
                     {
                         id: Date.now(),
-                        senderType: 3, // AI
+                        senderType: 3,
                         messageContent: option.assistant.greeting,
                         sentAt: new Date(),
                         isSeen: true,
@@ -1373,7 +1359,6 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
                 ]);
             }
             else {
-                // Default greeting if none provided
                 setMessages([
                     {
                         id: Date.now(),
@@ -1384,36 +1369,38 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
                     },
                 ]);
             }
-            // Connect to SignalR
             await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
+            // Verify the connection is actually active
+            if (!ClientSignalRService.isConnectionActive()) {
+                throw new Error('SignalR connection failed to establish properly');
+            }
             setIsSignalRConnected(true);
             setIsChatClosed(false);
             setStatus('succeeded');
         }
         catch (error) {
-            console.error('Chat start error:', error);
             setError(error instanceof Error ? error.message : 'Failed to start chat session');
             setStatus('failed');
         }
     };
     const handleSendMessage = async (message) => {
+        // Only send message if SignalR is connected
+        if (!isSignalRConnected) {
+            setError('Connection lost. Please try again.');
+            return;
+        }
         let currentSessionId = sessionId;
         if (message.trim() !== '') {
             try {
-                // Set loading state
                 setAssistantStatus('typing');
-                // Add user message to the chat immediately
-                setMessages((prevMessages) => [
-                    ...prevMessages,
-                    {
-                        id: Date.now(),
-                        senderType: 1, // Customer
-                        messageContent: message,
-                        sentAt: new Date(),
-                        isSeen: false,
-                    },
-                ]);
-                // Create a new chat session if not started yet
+                const userMessage = {
+                    id: Date.now(),
+                    senderType: 1,
+                    messageContent: message,
+                    sentAt: new Date(),
+                    isSeen: false,
+                };
+                setMessages((prevMessages) => [...prevMessages, userMessage]);
                 if (!currentSessionId) {
                     const chatSessionCreateDto = {
                         helpScreenId: helpScreenId,
@@ -1431,211 +1418,46 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
                     const createdSession = await response.json();
                     setSessionId(createdSession.id);
                     currentSessionId = createdSession.id;
-                    // Connect to SignalR with the new session
                     const tokenResponse = await configService.getToken();
                     await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
                     setIsSignalRConnected(true);
                 }
-                // Send the message
                 const messageDto = { messageContent: message };
                 const response = await apiRequest(`Client/ClientChatSession/${currentSessionId}/send-message`, 'POST', messageDto);
                 if (!response.ok) {
                     throw new Error('Failed to send message');
                 }
-                // Update the sent message as seen
                 setMessages((prevMessages) => prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg)));
             }
             catch (error) {
-                console.error('Error in message handling:', error);
                 setAssistantStatus('idle');
-                setMessages((prevMessages) => [
-                    ...prevMessages,
-                    {
-                        id: Date.now(),
-                        senderType: 3, // System
-                        messageContent: 'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
-                        sentAt: new Date(),
-                        isSeen: true,
-                    },
-                ]);
+                const errorMessage = {
+                    id: Date.now(),
+                    senderType: 3,
+                    messageContent: 'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
+                    sentAt: new Date(),
+                    isSeen: true,
+                };
+                setMessages((prevMessages) => [...prevMessages, errorMessage]);
             }
         }
     };
-    // const startNewChatSession = async (option: Option) => {
-    //   console.log('🚀 Starting new chat session with option:', option);
-    //   if (isSignalRConnected || sessionId) {
-    //     console.log('⚠️ Existing connection detected, ending current chat');
-    //     handleEndChat();
-    //   }
-    //   try {
-    //     setStatus('loading');
-    //     setError('');
-    //     setMessages([]);
-    //     console.log('🔑 Getting token for authentication...');
-    //     const tokenResponse = await configService.getToken();
-    //     console.log('✅ Token obtained successfully');
-    //     const chatSessionCreateDto = {
-    //       helpScreenId: helpScreenId,
-    //       optionId: option.id,
-    //       ...(user && {
-    //         user: {
-    //           id: user.id,
-    //           name: user.name,
-    //           email: user.email,
-    //         },
-    //       }),
-    //     };
-    //     console.log('📡 Creating chat session with data:', chatSessionCreateDto);
-    //     const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
-    //     if (!response.ok) {
-    //       throw new Error('Failed to create chat session');
-    //     }
-    //     const createdSession = await response.json();
-    //     console.log('✅ Chat session created:', createdSession);
-    //     setSessionId(createdSession.id);
-    //     if (option.assistant?.greeting) {
-    //       console.log('💬 Adding custom greeting:', option.assistant.greeting);
-    //       setMessages([
-    //         {
-    //           id: Date.now(),
-    //           senderType: 3,
-    //           messageContent: option.assistant.greeting,
-    //           sentAt: new Date(),
-    //           isSeen: true,
-    //         },
-    //       ]);
-    //     } else {
-    //       console.log('💬 Adding default greeting');
-    //       setMessages([
-    //         {
-    //           id: Date.now(),
-    //           senderType: 3,
-    //           messageContent: 'Hello! How can I assist you today?\nمرحباً! كيف يمكنني مساعدتك اليوم؟',
-    //           sentAt: new Date(),
-    //           isSeen: true,
-    //         },
-    //       ]);
-    //     }
-    //     console.log('🔌 Starting SignalR connection...');
-    //     await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
-    //     console.log('✅ SignalR connection established');
-    //     // Verify the connection is actually active
-    //     if (!ClientSignalRService.isConnectionActive()) {
-    //       throw new Error('SignalR connection failed to establish properly');
-    //     }
-    //     setIsSignalRConnected(true);
-    //     setIsChatClosed(false);
-    //     setStatus('succeeded');
-    //     console.log('🎉 Chat session fully initialized and ready');
-    //   } catch (error) {
-    //     console.error('❌ Chat start error:', error);
-    //     setError(error instanceof Error ? error.message : 'Failed to start chat session');
-    //     setStatus('failed');
-    //   }
-    // };
-    // const handleSendMessage = async (message: string) => {
-    //   console.log('📤 Sending message:', message);
-    //   console.log('📊 Current state:', {
-    //     sessionId,
-    //     isSignalRConnected,
-    //     messagesCount: messages.length,
-    //     selectedOptionId: selectedOption?.id,
-    //   });
-    //   let currentSessionId = sessionId;
-    //   if (message.trim() !== '') {
-    //     try {
-    //       setAssistantStatus('typing');
-    //       console.log('⏳ Assistant status set to typing');
-    //       const userMessage = {
-    //         id: Date.now(),
-    //         senderType: 1,
-    //         messageContent: message,
-    //         sentAt: new Date(),
-    //         isSeen: false,
-    //       };
-    //       console.log('✅ Adding user message to UI:', userMessage);
-    //       setMessages((prevMessages) => [...prevMessages, userMessage]);
-    //       if (!currentSessionId) {
-    //         console.log('🆕 No existing session, creating new one...');
-    //         const chatSessionCreateDto = {
-    //           helpScreenId: helpScreenId,
-    //           optionId: selectedOption?.id,
-    //           user: {
-    //             id: user?.id,
-    //             name: user?.name,
-    //             email: user?.email,
-    //           },
-    //         };
-    //         console.log('📡 Creating new session with data:', chatSessionCreateDto);
-    //         const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
-    //         if (!response.ok) {
-    //           throw new Error('Failed to create chat session');
-    //         }
-    //         const createdSession = await response.json();
-    //         console.log('✅ New session created:', createdSession);
-    //         setSessionId(createdSession.id);
-    //         currentSessionId = createdSession.id;
-    //         console.log('🔌 Starting SignalR connection for new session...');
-    //         const tokenResponse = await configService.getToken();
-    //         await ClientSignalRService.startConnection(createdSession.id, tokenResponse, handleReceiveMessage);
-    //         setIsSignalRConnected(true);
-    //         console.log('✅ SignalR connection established for new session');
-    //       }
-    //       const messageDto = { messageContent: message };
-    //       console.log('📡 Sending message to API:', messageDto);
-    //       console.log('🎯 Target endpoint:', `Client/ClientChatSession/${currentSessionId}/send-message`);
-    //       const response = await apiRequest(
-    //         `Client/ClientChatSession/${currentSessionId}/send-message`,
-    //         'POST',
-    //         messageDto
-    //       );
-    //       if (!response.ok) {
-    //         throw new Error('Failed to send message');
-    //       }
-    //       console.log('✅ Message sent successfully to server');
-    //       console.log('⏳ Waiting for SignalR response...');
-    //       setMessages((prevMessages) =>
-    //         prevMessages.map((msg) => (msg.senderType === 1 && !msg.isSeen ? { ...msg, isSeen: true } : msg))
-    //       );
-    //       console.log('✅ User message marked as seen');
-    //     } catch (error) {
-    //       console.error('❌ Error in message handling:', error);
-    //       setAssistantStatus('idle');
-    //       const errorMessage = {
-    //         id: Date.now(),
-    //         senderType: 3,
-    //         messageContent:
-    //           'Failed to send the message. Please try again.\n لم يتم إرسال الرسالة. يرجى المحاولة مرة أخرى.',
-    //         sentAt: new Date(),
-    //         isSeen: true,
-    //       };
-    //       console.log('📨 Adding error message:', errorMessage);
-    //       setMessages((prevMessages) => [...prevMessages, errorMessage]);
-    //     }
-    //   }
-    // };
     useEffect(() => {
         if (isOpen && helpScreenId) {
-            console.log('📊 Loading help screen data for ID:', helpScreenId);
             setStatus('loading');
             apiRequest(`client/clientHelpScreen/${helpScreenId}`)
                 .then((res) => res.json())
                 .then((data) => {
-                console.log('✅ Help screen data loaded:', data);
                 setHelpScreenData(data);
                 setStatus('succeeded');
                 setError('');
             })
                 .catch((err) => {
-                console.error('❌ Failed to load help screen data:', err);
                 setError(err.message);
                 setStatus('failed');
             });
         }
     }, [isOpen, helpScreenId]);
-    useEffect(() => {
-        console.log('🔄 SignalR connection status', isSignalRConnected);
-    }, [isSignalRConnected]);
     return (React__default.createElement("div", { className: 'babylai-help-center-container mb-4' },
         showArrowAnimation && !isOpen && (React__default.createElement(FloatingMessage, { onClose: handleCloseArrowAnimation, message: messageLabel || t('homeSdk.needAssistance') })),
         React__default.createElement(HelpButton, { onClick: handleTogglePopup }),