@aslaluroba/help-center-react 2.0.5 → 2.0.7

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

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

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

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

package/dist/ui/help-popup.d.ts

@@ -26,5 +26,5 @@ export declare const ConfirmationModal: ({ title, message, onCancel, onConfirm,
     onCancel: () => void;
     onConfirm: () => void;
 }) => React.JSX.Element;
-export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, }: HelpPopupProps): React.JSX.Element;
+export declare function HelpPopup({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isSignalRConnected, }: HelpPopupProps): 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": "2.0.5",
+  "version": "2.0.7",
   "description": "BabylAI Help Center Widget for React and Next.js",
   "private": false,
   "exports": {

package/src/lib/config.ts

@@ -24,8 +24,6 @@ class ConfigService {
   }
 
   initialize(config: Config) {
-    console.log('🔧 Initializing config with:', config);
-
     this.config = {
       baseUrl: config.baseUrl || 'https://babylai.net/api',
       hubUrl: config.hubUrl || config.baseUrl || 'https://babylai.net/api',
@@ -34,19 +32,15 @@ class ConfigService {
       getToken: config.getToken,
     };
 
-    console.log('📋 Final config:', this.config);
-
     // Initialize API with the getToken function directly
     if (!this.config.getToken) {
       throw new Error('getToken function is required in configuration');
     }
 
-    console.log('🌐 Initializing API with baseUrl:', this.config.baseUrl);
     initializeAPI(this.config.baseUrl || 'https://babylai.net/api', this.config.getToken);
 
     // Initialize SignalR
     const hubUrl = this.config.hubUrl || this.config.baseUrl || 'https://babylai.net/api';
-    console.log('🔌 Initializing SignalR with hubUrl:', hubUrl);
     ClientSignalRService.initialize(hubUrl);
   }
 

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

@@ -1,39 +1,40 @@
-import { Button } from '@/components'
-import React from 'react'
-import EnvelopeIcon from './../../../assets/icons/envelope.svg'
-import { useLocalTranslation } from '../../../useLocalTranslation'
+import { Button } from '@/components';
+import React from 'react';
+import EnvelopeIcon from './../../../assets/icons/envelope.svg';
+import { useLocalTranslation } from '../../../useLocalTranslation';
 
 interface ChatWindowFooterProps {
-  inputMessage: string
-  setInputMessage: (e: string) => void
-  handleKeyDown: (e: React.KeyboardEvent) => void
-  handleSendMessage: () => void
-  isLoading: boolean
+  inputMessage: string;
+  setInputMessage: (e: string) => void;
+  handleKeyDown: (e: React.KeyboardEvent) => void;
+  handleSendMessage: () => void;
+  isLoading: boolean;
+  isSignalRConnected: boolean;
 }
 
 const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
-  const { t, dir } = useLocalTranslation()
+  const { t, dir } = useLocalTranslation();
   return (
-    <footer className="babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white babylai-m-4 md:babylai-m-6 md:babylai-py-3 md:babylai-px-4">
+    <footer className='babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white babylai-m-4 md:babylai-m-6 md:babylai-py-3 md:babylai-px-4'>
       <input
-        type="text"
+        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"
+        className='babylai-flex-1 babylai-py-2 babylai-px-4 babylai-bg-transparent babylai-outline-none babylai-text-sm'
       />
       <Button
-        variant="default"
-        size="icon"
+        variant='default'
+        size='icon'
         onClick={props.handleSendMessage}
-        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"
+        disabled={props?.isLoading || !props.isSignalRConnected}
+        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' : ''}`} />
       </Button>
     </footer>
-  )
-}
+  );
+};
 
-export default ChatWindowFooter
+export default ChatWindowFooter;

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

@@ -11,6 +11,7 @@ interface ChatWindowProps {
   messages: Message[];
   assistantStatus: string;
   needsAgent: boolean;
+  isSignalRConnected: boolean;
 }
 
 // Memoize individual message component to prevent unnecessary re-renders
@@ -83,111 +84,114 @@ const TypingIndicator = React.memo(({ firstHumanAgentIndex }: { firstHumanAgentI
 
 TypingIndicator.displayName = 'TypingIndicator';
 
-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 () => {
+export const ChatWindow = React.memo(
+  ({ onSendMessage, messages, assistantStatus = 'loading', isSignalRConnected }: 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);
       }
-    };
-  }, []);
-
-  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('');
-        }
+
+      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();
       }
-    },
-    [inputMessage, onSendMessage, assistantStatus]
-  );
+    }, [messages.length, assistantStatus, scrollToBottom]);
 
-  // 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() === ''
+    // 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 && isSignalRConnected) {
+          e.preventDefault();
+          if (inputMessage.trim() && assistantStatus !== 'typing') {
+            onSendMessage(inputMessage);
+            setInputMessage('');
+          }
+        }
+      },
+      [inputMessage, onSendMessage, assistantStatus, isSignalRConnected]
     );
-  }, [assistantStatus, inputMessage]);
 
-  return (
-    <>
-      <div className='babylai-flex-1 babylai-overflow-y-auto babylai-p-4 babylai-h-full'>
-        {messagesList}
+    // 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]);
 
-        {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}
-      />
-    </>
-  );
-});
+          <div ref={messagesEndRef} />
+        </div>
+
+        <ChatWindowFooter
+          inputMessage={inputMessage}
+          handleKeyDown={handleKeyDown}
+          handleSendMessage={handleSendMessage}
+          setInputMessage={setInputMessage}
+          isLoading={isLoading}
+          isSignalRConnected={isSignalRConnected}
+        />
+      </>
+    );
+  }
+);
 
 ChatWindow.displayName = 'ChatWindow';