@aslaluroba/help-center-react 3.0.2 → 3.0.4

package/dist/ui/chatbot-popup/chat-window-screen/footer.d.ts

@@ -5,7 +5,6 @@ interface ChatWindowFooterProps {
     handleKeyDown: (e: React.KeyboardEvent) => void;
     handleSendMessage: () => void;
     isLoading: boolean;
-    isAblyConnected: boolean;
 }
 declare const ChatWindowFooter: React.FC<ChatWindowFooterProps>;
 export default ChatWindowFooter;

package/dist/ui/chatbot-popup/chat-window-screen/index.d.ts

@@ -7,5 +7,5 @@ interface ChatWindowProps {
     needsAgent: boolean;
     isAblyConnected: boolean;
 }
-export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus, isAblyConnected }: ChatWindowProps) => React.JSX.Element>;
+export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus }: ChatWindowProps) => React.JSX.Element>;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "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/chatbot-popup/chat-window-screen/footer.tsx

@@ -9,7 +9,6 @@ interface ChatWindowFooterProps {
   handleKeyDown: (e: React.KeyboardEvent) => void;
   handleSendMessage: () => void;
   isLoading: boolean;
-  isAblyConnected: boolean;
 }
 
 const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
@@ -28,7 +27,7 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
         variant='default'
         size='icon'
         onClick={props.handleSendMessage}
-        disabled={props?.isLoading || !props.isAblyConnected}
+        disabled={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'
       >
         <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />

package/src/ui/chatbot-popup/chat-window-screen/index.tsx

@@ -93,114 +93,111 @@ const TypingIndicator = React.memo(({ firstHumanAgentIndex }: { firstHumanAgentI
 
 TypingIndicator.displayName = 'TypingIndicator';
 
-export const ChatWindow = React.memo(
-  ({ onSendMessage, messages, assistantStatus = 'loading', isAblyConnected }: ChatWindowProps) => {
-    const [inputMessage, setInputMessage] = useState('');
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const lastMessageCountRef = useRef(messages.length);
-
-    // Debounced scroll to bottom function
-    const scrollToBottom = useCallback(() => {
+export const ChatWindow = React.memo(({ onSendMessage, messages, assistantStatus = 'loading' }: ChatWindowProps) => {
+  const [inputMessage, setInputMessage] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastMessageCountRef = useRef(messages.length);
+
+  // Debounced scroll to bottom function
+  const scrollToBottom = useCallback(() => {
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+
+    scrollTimeoutRef.current = setTimeout(() => {
+      messagesEndRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      });
+    }, 100);
+  }, []);
+
+  // Only scroll when new messages are added or status changes
+  useEffect(() => {
+    if (messages.length !== lastMessageCountRef.current || assistantStatus === 'typing') {
+      lastMessageCountRef.current = messages.length;
+      scrollToBottom();
+    }
+  }, [messages.length, assistantStatus, scrollToBottom]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
       if (scrollTimeoutRef.current) {
         clearTimeout(scrollTimeoutRef.current);
       }
-
-      scrollTimeoutRef.current = setTimeout(() => {
-        messagesEndRef.current?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'end',
-        });
-      }, 100);
-    }, []);
-
-    // Only scroll when new messages are added or status changes
-    useEffect(() => {
-      if (messages.length !== lastMessageCountRef.current || assistantStatus === 'typing') {
-        lastMessageCountRef.current = messages.length;
-        scrollToBottom();
-      }
-    }, [messages.length, assistantStatus, scrollToBottom]);
-
-    // Cleanup timeout on unmount
-    useEffect(() => {
-      return () => {
-        if (scrollTimeoutRef.current) {
-          clearTimeout(scrollTimeoutRef.current);
+    };
+  }, []);
+
+  const handleSendMessage = useCallback(() => {
+    if (inputMessage.trim()) {
+      onSendMessage(inputMessage);
+      setInputMessage('');
+    }
+  }, [inputMessage, onSendMessage]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (inputMessage.trim() && assistantStatus !== 'typing') {
+          onSendMessage(inputMessage);
+          setInputMessage('');
         }
-      };
-    }, []);
-
-    const handleSendMessage = useCallback(() => {
-      if (inputMessage.trim()) {
-        onSendMessage(inputMessage);
-        setInputMessage('');
       }
-    }, [inputMessage, onSendMessage]);
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter' && !e.shiftKey && isAblyConnected) {
-          e.preventDefault();
-          if (inputMessage.trim() && assistantStatus !== 'typing') {
-            onSendMessage(inputMessage);
-            setInputMessage('');
-          }
-        }
-      },
-      [inputMessage, onSendMessage, assistantStatus, isAblyConnected]
-    );
-
-    // Memoize the first human agent index calculation
-    const firstHumanAgentIndex = useMemo(() => {
-      return messages.findIndex((message) => message.senderType === 2);
-    }, [messages]);
-
-    // Memoize the message list to prevent unnecessary re-renders
-    const messagesList = useMemo(() => {
-      return messages.map((message, index) => (
-        <MessageComponent
-          key={`${message.id}-${index}`}
-          message={message}
-          index={index}
-          messages={messages}
-          firstHumanAgentIndex={firstHumanAgentIndex}
-          onType={scrollToBottom}
-        />
-      ));
-    }, [messages, firstHumanAgentIndex, scrollToBottom]);
-
-    // Memoize loading state check
-    const isLoading = useMemo(() => {
-      return (
-        assistantStatus === 'typing' ||
-        assistantStatus === 'loading' ||
-        assistantStatus === 'error' ||
-        inputMessage.trim() === ''
-      );
-    }, [assistantStatus, inputMessage]);
+    },
+    [inputMessage, onSendMessage, assistantStatus]
+  );
 
+  // Memoize the first human agent index calculation
+  const firstHumanAgentIndex = useMemo(() => {
+    return messages.findIndex((message) => message.senderType === 2);
+  }, [messages]);
+
+  // Memoize the message list to prevent unnecessary re-renders
+  const messagesList = useMemo(() => {
+    return messages.map((message, index) => (
+      <MessageComponent
+        key={`${message.id}-${index}`}
+        message={message}
+        index={index}
+        messages={messages}
+        firstHumanAgentIndex={firstHumanAgentIndex}
+        onType={scrollToBottom}
+      />
+    ));
+  }, [messages, firstHumanAgentIndex, scrollToBottom]);
+
+  // Memoize loading state check
+  const isLoading = useMemo(() => {
     return (
-      <>
-        <div className='babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full'>
-          {messagesList}
+      assistantStatus === 'typing' ||
+      assistantStatus === 'loading' ||
+      assistantStatus === 'error' ||
+      inputMessage.trim() === ''
+    );
+  }, [assistantStatus, inputMessage]);
 
-          {assistantStatus === 'typing' && <TypingIndicator firstHumanAgentIndex={firstHumanAgentIndex} />}
+  return (
+    <>
+      <div className='babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full'>
+        {messagesList}
 
-          <div ref={messagesEndRef} />
-        </div>
+        {assistantStatus === 'typing' && <TypingIndicator firstHumanAgentIndex={firstHumanAgentIndex} />}
 
-        <ChatWindowFooter
-          inputMessage={inputMessage}
-          handleKeyDown={handleKeyDown}
-          handleSendMessage={handleSendMessage}
-          setInputMessage={setInputMessage}
-          isLoading={isLoading}
-          isAblyConnected={isAblyConnected}
-        />
-      </>
-    );
-  }
-);
+        <div ref={messagesEndRef} />
+      </div>
+
+      <ChatWindowFooter
+        inputMessage={inputMessage}
+        handleKeyDown={handleKeyDown}
+        handleSendMessage={handleSendMessage}
+        setInputMessage={setInputMessage}
+        isLoading={isLoading}
+      />
+    </>
+  );
+});
 
 ChatWindow.displayName = 'ChatWindow';

package/src/ui/help-center.tsx

@@ -98,7 +98,6 @@ export function HelpCenter({
       setMessages([]);
 
       setIsReviewDialogOpen(true);
-
     } catch (error) {
       console.error('Error ending chat:', error);
       setError('Failed to end chat session');
@@ -119,7 +118,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');
 
-      handleCloseChatReview()
+      handleCloseChatReview();
     } catch (error) {
       console.error('Error sending chat review:', error);
       setError('Failed to send chat review');
@@ -132,15 +131,23 @@ export function HelpCenter({
   };
 
   const handleStartChat = async (option: Option) => {
-    await startNewChatSession(option);
+    setMessages([
+      {
+        id: Date.now(),
+        senderType: 3,
+        messageContent: option?.assistant?.greeting || 'مرحباً! كيف يمكنني مساعدتك اليوم؟',
+        sentAt: new Date(),
+        isSeen: true,
+      },
+    ]);
+    setIsChatClosed(false);
+    setStatus('succeeded');
   };
 
-  const startNewChatSession = async (option: Option) => {
-
+  const startNewChatSession = async (option: Option): Promise<string> => {
     try {
       setStatus('loading');
       setError('');
-      setMessages([]);
 
       const chatSessionCreateDto = {
         helpScreenId: helpScreenId,
@@ -161,32 +168,12 @@ export function HelpCenter({
       }
 
       const responseData = await response.json();
-      setSessionId(responseData.chatSession.id);
-
-      if (responseData.chatSession.assistant?.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,
-          },
-        ]);
-      }
+      const newSessionId = responseData.chatSession.id;
+
+      setSessionId(newSessionId);
 
       await ClientAblyService.startConnection(
-        responseData.chatSession.id,
+        newSessionId,
         responseData.ablyToken,
         handleReceiveMessage,
         responseData.chatSession.tenantId
@@ -200,21 +187,16 @@ export function HelpCenter({
       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: string) => {
-    // 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');
@@ -229,35 +211,15 @@ export function HelpCenter({
 
         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?.id,
-            user: {
-              id: user?.id,
-              name: user?.name,
-              email: 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 };

package/src/ui/help-popup.tsx

@@ -110,11 +110,11 @@ export function HelpPopup({
 
   const handleSendMessage = useCallback(
     (message: string) => {
-      if (message.trim() && isAblyConnected) {
+      if (message.trim()) {
         onSendMessage(message.trim());
       }
     },
-    [onSendMessage, isAblyConnected]
+    [onSendMessage]
   );
 
   const hideEndChatConfirmation = useCallback(() => {
@@ -133,7 +133,7 @@ export function HelpPopup({
         })
         .finally(() => {
           setTempSelectedOption(null);
-        })
+        });
     }
   };
 

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)}
                     />