@aslaluroba/help-center-react 3.0.2 → 3.0.4

package/dist/index.esm.js

@@ -265,6 +265,7 @@ var homeSdk$1 = {
 		description: "We appreciate your feedback! Please take a moment to rate your experience and share your thoughts in the comment section below. Your review helps us improve our services and assists other users in making informed decisions. Thank you!",
 		rating_label: "Rating:",
 		comment_label: "Comment:",
+		comment_placeholder: "Write your comment here...",
 		submit_button: "Submit Review",
 		comment_error: "Comment must be between 10 and 500 characters.",
 		rating_error: "Rating must be between 1 and 5.",
@@ -299,6 +300,7 @@ var homeSdk = {
 		description: "نحن نقدر ملاحظاتك! يُرجى تخصيص لحظة لتقييم تجربتك ومشاركة آرائك في قسم التعليقات أدناه. يساعدنا تقييمك في تحسين خدماتنا ويساعد المستخدمين الآخرين في اتخاذ قرارات مستنيرة. شكرًا لك!",
 		rating_label: "التقييم:",
 		comment_label: "التعليق:",
+		comment_placeholder: "اكتب تعليقك هنا...",
 		submit_button: "إرسال التقييم",
 		comment_error: "يجب أن يكون التعليق بين 10 و500 حرف.",
 		rating_error: "يجب أن يكون التقييم بين 1 و5.",
@@ -308,7 +310,9 @@ var homeSdk = {
 		title: "تأكيد",
 		message: "هل أنت متأكد أنك تريد إنهاء المحادثة؟",
 		confirmation_button: "إنهاء",
-		cancel_button: "إلغاء"
+		cancel_button: "إلغاء",
+		endAndStartNewChatTitle: "إنهاء وبدء محادثة جديدة",
+		endAndStartNewChatMessage: "هل أنت متأكد أنك تريد إنهاء هذه المحادثة وبدء محادثة جديدة؟"
 	}
 };
 var ar = {
@@ -398,7 +402,7 @@ const ReviewDialog = (props) => {
                 React__default.createElement("span", { className: `babylai-text-sm babylai-text-red-500 transition-opacity duration-300 ${error.rating ? 'opacity-100' : 'opacity-0'}` }, error.rating)),
             React__default.createElement("div", { className: "babylai-flex babylai-flex-col babylai-gap-2" },
                 React__default.createElement("label", { htmlFor: 'comment', className: "babylai-text-base babylai-font-medium dark:babylai-text-white" }, t('homeSdk.ReviewDialog.comment_label')),
-                React__default.createElement("textarea", { id: 'comment', 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, onChange: (e) => handleCommentChange(e.target.value) }),
+                React__default.createElement("textarea", { id: 'comment', 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: t('homeSdk.ReviewDialog.comment_placeholder'), value: comment, onChange: (e) => handleCommentChange(e.target.value) }),
                 React__default.createElement("span", { className: `babylai-text-sm babylai-text-red-500 transition-opacity duration-300 ${error.comment ? 'opacity-100' : 'opacity-0'}` }, error.comment))),
         React__default.createElement("footer", { className: "babylai-flex babylai-justify-between babylai-gap-4 babylai-border-t babylai-pt-4" },
             React__default.createElement("button", { className: "babylai-px-4 babylai-py-2 babylai-rounded-lg babylai-bg-gray-200 babylai-text-gray-700 hover:babylai-bg-gray-300 transition-all", onClick: props.onClose }, t('homeSdk.ReviewDialog.skip_button')),
@@ -10798,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' : ''}` }))));
 };
 
@@ -10862,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);
@@ -10902,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);
@@ -10930,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';
 
@@ -11246,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);
     }, []);
@@ -11433,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,
@@ -11457,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');
@@ -11488,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');
@@ -11512,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);