@aslaluroba/help-center-react 3.0.1 → 3.0.3

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {
@@ -65,13 +65,13 @@
     "@ably/chat": "^0.8.0",
     "@microsoft/signalr": "^7.0.14",
     "ably": "^2.9.0",
-    "axios": "^1.7.9",
+    "axios": "^1.10.0",
     "class-variance-authority": "^0.7.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
+    "@babel/core": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^21.1.0",
@@ -85,23 +85,23 @@
     "@types/hast": "^3.0.4",
     "@types/node": "^16.18.126",
     "@types/react": "^17.0.83",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "clsx": "^2.1.1",
     "concurrently": "^9.1.2",
     "i18next": "^25.2.1",
-    "postcss": "^8.4.24",
-    "react-i18next": "^15.5.2",
+    "postcss": "^8.5.6",
+    "react-i18next": "^15.5.3",
     "react-markdown": "^10.1.0",
     "rimraf": "^6.0.1",
     "rollup": "^2.79.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwind-merge": "^3.3.0",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.3.2",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-rtl": "^0.9.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.8.3",
     "webpack": "^5.99.9"
   },
   "publishConfig": {

package/src/locales/ar.json

@@ -1,4 +1,5 @@
-{  "homeSdk": {
+{
+  "homeSdk": {
     "chatTitle": "تحدث مع",
     "tryBabylAi": "جرّب Babyl AI مجانًا 🎉",
     "contactSdk": "تواصل معنا، دعنا نتحدث!",
@@ -9,22 +10,25 @@
     "endChat": "إنهاء المحادثة",
     "needAssistance": "هل تحتاج مساعدة؟ لاتردد في اخباري اضغط هنا",
     "placeholder": "اكتب سؤالك هنا",
+    
     "ReviewDialog": {
       "title": "أضف تقييمك",
       "description": "نحن نقدر ملاحظاتك! يُرجى تخصيص لحظة لتقييم تجربتك ومشاركة آرائك في قسم التعليقات أدناه. يساعدنا تقييمك في تحسين خدماتنا ويساعد المستخدمين الآخرين في اتخاذ قرارات مستنيرة. شكرًا لك!",
       "rating_label": "التقييم:",
       "comment_label": "التعليق:",
+      "comment_placeholder": "اكتب تعليقك هنا...",
       "submit_button": "إرسال التقييم",
       "comment_error": "يجب أن يكون التعليق بين 10 و500 حرف.",
       "rating_error": "يجب أن يكون التقييم بين 1 و5.",
       "skip_button": "تخطي"
     },
     "ConfirmationModal": {
-      "title" : "تأكيد",
-      "message" : "هل أنت متأكد أنك تريد إنهاء المحادثة؟",
+      "title": "تأكيد",
+      "message": "هل أنت متأكد أنك تريد إنهاء المحادثة؟",
       "confirmation_button": "إنهاء",
-      "cancel_button": "إلغاء"
+      "cancel_button": "إلغاء",
+      "endAndStartNewChatTitle": "إنهاء وبدء محادثة جديدة",
+      "endAndStartNewChatMessage": "هل أنت متأكد أنك تريد إنهاء هذه المحادثة وبدء محادثة جديدة؟"
     }
-
   }
-}
+}

package/src/locales/en.json

@@ -16,6 +16,7 @@
       "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.",

package/src/ui/help-center.tsx

@@ -78,7 +78,7 @@ export function HelpCenter({
     setAssistantStatus('idle');
   };
 
-  const handleEndChat = async (option?: Option) => {
+  const handleEndChat = async () => {
     if (!sessionId || !selectedOption) return;
 
     try {
@@ -98,9 +98,7 @@ export function HelpCenter({
       setMessages([]);
 
       setIsReviewDialogOpen(true);
-      if (option) {
-        handleStartChat(option);
-      }
+
     } catch (error) {
       console.error('Error ending chat:', error);
       setError('Failed to end chat session');
@@ -121,8 +119,7 @@ export function HelpCenter({
       const response = await apiRequest(`Client/ClientChatSession/${reviewSessionId}/review`, 'POST', payload);
       if (!response.ok) throw new Error('Failed to send chat review');
 
-      setIsReviewDialogOpen(false);
-      setReviewSessionId(null);
+      handleCloseChatReview()
     } catch (error) {
       console.error('Error sending chat review:', error);
       setError('Failed to send chat review');
@@ -139,9 +136,6 @@ export function HelpCenter({
   };
 
   const startNewChatSession = async (option: Option) => {
-    if (isAblyConnected || sessionId) {
-      handleEndChat();
-    }
 
     try {
       setStatus('loading');
@@ -346,7 +340,7 @@ export function HelpCenter({
           showHelpScreen={showHelpScreen}
         />
       )}
-      {isOpen && !!isReviewDialogOpen && (
+      {isOpen && !!isReviewDialogOpen && reviewSessionId && (
         <ReviewDialog handleSubmit={handleSendChatReview} onClose={handleCloseChatReview} />
       )}
     </div>

package/src/ui/help-popup.tsx

@@ -121,61 +121,28 @@ export function HelpPopup({
     setEndChatConfirmation(false);
   }, []);
 
-  const handleEndAndStartNewChat = useCallback(async () => {
+  const handleEndAndStartNewChat = async () => {
     if (tempSelectedOption) {
       setStartNewChatConfirmation(false);
 
-      try {
-        // First end the current chat and wait for it to complete
-        await onEndChat();
-
-        // Wait for sessionId to be cleared (indicating the session is fully closed)
-        // We'll use a polling mechanism to wait for the state to update
-        const maxAttempts = 50; // 5 seconds max wait time
-        let attempts = 0;
-
-        while (sessionId && attempts < maxAttempts) {
-          await new Promise((resolve) => setTimeout(resolve, 100)); // Wait 100ms
-          attempts++;
-        }
-
-        // Only start new chat after current session is fully closed
-        if (!sessionId) {
-          setShowChat(true);
-          onStartChat(tempSelectedOption);
-          setSelectedOption(tempSelectedOption);
-        } else {
-          console.warn('Session did not close properly, but proceeding with new chat');
+      await handleEndChat()
+        .then(() => {
           setShowChat(true);
           onStartChat(tempSelectedOption);
           setSelectedOption(tempSelectedOption);
-        }
-      } catch (error) {
-        console.error('Error ending current chat:', error);
-        // Even if ending fails, try to start new chat
-        setShowChat(true);
-        onStartChat(tempSelectedOption);
-        setSelectedOption(tempSelectedOption);
-      } finally {
-        setTempSelectedOption(null);
-      }
+        })
+        .finally(() => {
+          setTempSelectedOption(null);
+        })
     }
-  }, [
-    onEndChat,
-    onStartChat,
-    setSelectedOption,
-    setTempSelectedOption,
-    tempSelectedOption,
-    setStartNewChatConfirmation,
-    sessionId,
-  ]);
+  };
 
-  const handleEndChat = useCallback(() => {
+  const handleEndChat = async () => {
     setEndChatConfirmation(false);
-    onEndChat();
+    await onEndChat();
     setShowChat(false);
     setSelectedOption(null);
-  }, [selectedOption, onEndChat, setSelectedOption]);
+  };
 
   const handleShowActiveChat = useCallback(() => {
     setShowChat(true);

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

@@ -75,7 +75,7 @@ const ReviewDialog: React.FC<ReviewDialogProps> = (props) => {
                         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..."
+                        placeholder={t('homeSdk.ReviewDialog.comment_placeholder')}
                         value={comment}
                         onChange={(e) => handleCommentChange(e.target.value)}
                     />