@aslaluroba/help-center-react 3.0.0 → 3.0.2

package/package.json

@@ -3,7 +3,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {

package/src/core/AblyService.ts

@@ -69,7 +69,7 @@ export class ClientAblyService {
       throw new Error('Chat client not initialized');
     }
 
-    const roomName = `session:${tenantId}-${sessionId}`;
+    const roomName = `session:${tenantId}:${sessionId}`;
 
     // Set up raw channel subscription for server messages
     if (this.client) {
@@ -80,11 +80,12 @@ export class ClientAblyService {
         try {
           const messageContent =
             typeof message.data === 'string' ? message.data : message.data?.content || message.data?.message;
-          const senderType = 3; // Assistant
+          const senderType = message.data?.senderType || 3; // Assistant
           const needsAgent = message.data?.needsAgent || false;
 
           onMessageReceived(messageContent, senderType, needsAgent);
         } catch (error) {
+          // Handle error silently
           console.error('[AblyService] Error processing ReceiveMessage:', error);
         }
       });
@@ -117,7 +118,6 @@ export class ClientAblyService {
       this.isConnected = false;
       this.sessionId = null;
     } catch (error) {
-      console.error('[AblyService] Error stopping Ably connection:', error);
       // Reset state even if there's an error
       this.isConnected = false;
       this.sessionId = null;
@@ -134,4 +134,23 @@ export class ClientAblyService {
   static getConnectionState(): string {
     return this.client?.connection.state || 'disconnected';
   }
+
+  // Method to manually send a message (if needed for debugging or direct messaging)
+  static async sendMessage(messageContent: string, senderType: number = 1) {
+    if (!this.channel || !this.isConnected) {
+      throw new Error('Connection not active');
+    }
+
+    try {
+      await this.channel.publish('message', {
+        text: messageContent,
+        metadata: {
+          senderType,
+          sentAt: new Date().toISOString(),
+        },
+      });
+    } catch (error) {
+      throw error;
+    }
+  }
 }

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

@@ -5,6 +5,7 @@ import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react'
 import LoadingGif from './../../../assets/animatedLogo.gif';
 import Seperator from './../../../assets/icons/seperator.svg';
 import LogoIcon from './../../../assets/logo.svg';
+import HumanIcon from './../../../assets/icons/user.svg';
 
 interface ChatWindowProps {
   onSendMessage: (message: string) => void;
@@ -41,10 +42,18 @@ const MessageComponent = React.memo(
           </div>
         )}
         <div className={`babylai-mb-4 babylai-flex ${textDirection}`}>
-          {isFirstInSequence && message.senderType === 3 && (
+          {isFirstInSequence && (message.senderType === 3 || message.senderType === 2) && (
             <div className='babylai-flex-shrink-0 babylai-me-3'>
-              <div className='babylai-w-8 babylai-h-8 babylai-rounded-full babylai-bg-purple-500 babylai-flex babylai-items-center babylai-justify-center'>
-                <LogoIcon className='babylai-w-4 babylai-h-4 babylai-text-white' />
+              <div
+                className={`babylai-w-8 babylai-h-8 babylai-rounded-full babylai-flex babylai-items-center babylai-justify-center ${
+                  message?.senderType === 3 ? 'babylai-bg-primary' : 'babylai-bg-black-white-50'
+                }`}
+              >
+                {message?.senderType === 3 ? (
+                  <LogoIcon className='babylai-w-4 babylai-h-4 babylai-text-white' />
+                ) : (
+                  <HumanIcon className='babylai-w-4 babylai-h-4 babylai-text-primary' />
+                )}
               </div>
             </div>
           )}

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);