@aslaluroba/help-center-react 3.0.3 → 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.3",
+  "version": "3.0.4",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {

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