@aslaluroba/help-center-react 3.0.3 → 3.0.4

package/dist/index.esm.js

@@ -10802,7 +10802,7 @@ 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 dark:!babylai-bg-storm-dust-900 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 dark:babylai-text-white' }),
-        React__default.createElement(Button, { variant: 'default', size: 'icon', onClick: props.handleSendMessage, disabled: (props === null || props === void 0 ? void 0 : props.isLoading) || !props.isAblyConnected, 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(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' },
             React__default.createElement(SvgEnvelope, { className: `babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}` }))));
 };
 
@@ -10866,7 +10866,7 @@ const TypingIndicator = React__default.memo(({ firstHumanAgentIndex }) => {
             React__default.createElement("p", { className: 'babylai-text-sm babylai-opacity-70 dark:babylai-text-white' }, "..."))));
 });
 TypingIndicator.displayName = 'TypingIndicator';
-const ChatWindow = React__default.memo(({ onSendMessage, messages, assistantStatus = 'loading', isAblyConnected }) => {
+const ChatWindow = React__default.memo(({ onSendMessage, messages, assistantStatus = 'loading' }) => {
     const [inputMessage, setInputMessage] = useState('');
     const messagesEndRef = useRef(null);
     const scrollTimeoutRef = useRef(null);
@@ -10906,14 +10906,14 @@ const ChatWindow = React__default.memo(({ onSendMessage, messages, assistantStat
         }
     }, [inputMessage, onSendMessage]);
     const handleKeyDown = useCallback((e) => {
-        if (e.key === 'Enter' && !e.shiftKey && isAblyConnected) {
+        if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             if (inputMessage.trim() && assistantStatus !== 'typing') {
                 onSendMessage(inputMessage);
                 setInputMessage('');
             }
         }
-    }, [inputMessage, onSendMessage, assistantStatus, isAblyConnected]);
+    }, [inputMessage, onSendMessage, assistantStatus]);
     // Memoize the first human agent index calculation
     const firstHumanAgentIndex = useMemo(() => {
         return messages.findIndex((message) => message.senderType === 2);
@@ -10934,7 +10934,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, isAblyConnected: isAblyConnected })));
+        React__default.createElement(ChatWindowFooter, { inputMessage: inputMessage, handleKeyDown: handleKeyDown, handleSendMessage: handleSendMessage, setInputMessage: setInputMessage, isLoading: isLoading })));
 });
 ChatWindow.displayName = 'ChatWindow';
 
@@ -11250,10 +11250,10 @@ function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMess
         }
     }, [onStartChat, setSelectedOption, sessionId, setStartNewChatConfirmation, setTempSelectedOption]);
     const handleSendMessage = useCallback((message) => {
-        if (message.trim() && isAblyConnected) {
+        if (message.trim()) {
             onSendMessage(message.trim());
         }
-    }, [onSendMessage, isAblyConnected]);
+    }, [onSendMessage]);
     const hideEndChatConfirmation = useCallback(() => {
         setEndChatConfirmation(false);
     }, []);
@@ -11437,14 +11437,23 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
         setReviewSessionId(null);
     };
     const handleStartChat = async (option) => {
-        await startNewChatSession(option);
+        var _a;
+        setMessages([
+            {
+                id: Date.now(),
+                senderType: 3,
+                messageContent: ((_a = option === null || option === void 0 ? void 0 : option.assistant) === null || _a === void 0 ? void 0 : _a.greeting) || 'مرحباً! كيف يمكنني مساعدتك اليوم؟',
+                sentAt: new Date(),
+                isSeen: true,
+            },
+        ]);
+        setIsChatClosed(false);
+        setStatus('succeeded');
     };
     const startNewChatSession = async (option) => {
-        var _a;
         try {
             setStatus('loading');
             setError('');
-            setMessages([]);
             const chatSessionCreateDto = {
                 helpScreenId: helpScreenId,
                 optionId: option.id,
@@ -11461,30 +11470,9 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
                 throw new Error('Failed to create chat session');
             }
             const responseData = await response.json();
-            setSessionId(responseData.chatSession.id);
-            if ((_a = responseData.chatSession.assistant) === null || _a === void 0 ? void 0 : _a.greeting) {
-                setMessages([
-                    {
-                        id: Date.now(),
-                        senderType: 3,
-                        messageContent: responseData.chatSession.assistant.greeting,
-                        sentAt: new Date(),
-                        isSeen: true,
-                    },
-                ]);
-            }
-            else {
-                setMessages([
-                    {
-                        id: Date.now(),
-                        senderType: 3,
-                        messageContent: 'Hello! How can I assist you today?\nمرحباً! كيف يمكنني مساعدتك اليوم؟',
-                        sentAt: new Date(),
-                        isSeen: true,
-                    },
-                ]);
-            }
-            await ClientAblyService.startConnection(responseData.chatSession.id, responseData.ablyToken, handleReceiveMessage, responseData.chatSession.tenantId);
+            const newSessionId = responseData.chatSession.id;
+            setSessionId(newSessionId);
+            await ClientAblyService.startConnection(newSessionId, responseData.ablyToken, handleReceiveMessage, responseData.chatSession.tenantId);
             // Verify the connection is actually active
             if (!ClientAblyService.isConnectionActive()) {
                 throw new Error('Ably connection failed to establish properly');
@@ -11492,19 +11480,15 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
             setIsAblyConnected(true);
             setIsChatClosed(false);
             setStatus('succeeded');
+            return newSessionId; // Return the session ID
         }
         catch (error) {
             setError(error instanceof Error ? error.message : 'Failed to start chat session');
             setStatus('failed');
+            throw error; // Re-throw to handle in calling function
         }
     };
     const handleSendMessage = async (message) => {
-        // Only send message if Ably is connected
-        if (!isAblyConnected) {
-            setError('Connection lost. Please try again.');
-            return;
-        }
-        let currentSessionId = sessionId;
         if (message.trim() !== '') {
             try {
                 setAssistantStatus('typing');
@@ -11516,25 +11500,13 @@ function HelpCenter({ helpScreenId, user, showArrow = true, language = 'en', mes
                     isSeen: false,
                 };
                 setMessages((prevMessages) => [...prevMessages, userMessage]);
+                // Handle session creation if needed
+                let currentSessionId = sessionId;
+                if (!isAblyConnected && selectedOption) {
+                    currentSessionId = await startNewChatSession(selectedOption);
+                }
                 if (!currentSessionId) {
-                    const chatSessionCreateDto = {
-                        helpScreenId: helpScreenId,
-                        optionId: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id,
-                        user: {
-                            id: user === null || user === void 0 ? void 0 : user.id,
-                            name: user === null || user === void 0 ? void 0 : user.name,
-                            email: user === null || user === void 0 ? void 0 : user.email,
-                        },
-                    };
-                    const response = await apiRequest('Client/ClientChatSession/create-session', 'POST', chatSessionCreateDto);
-                    if (!response.ok) {
-                        throw new Error('Failed to create chat session');
-                    }
-                    const responseData = await response.json();
-                    setSessionId(responseData.chatSession.id);
-                    currentSessionId = responseData.chatSession.id;
-                    await ClientAblyService.startConnection(responseData.chatSession.id, responseData.ablyToken, handleReceiveMessage, responseData.chatSession.tenantId);
-                    setIsAblyConnected(true);
+                    throw new Error('No active session available');
                 }
                 const messageDto = { messageContent: message };
                 const response = await apiRequest(`Client/ClientChatSession/${currentSessionId}/send-message`, 'POST', messageDto);