@aslaluroba/help-center-react 3.2.3 → 3.2.5

package/package.json

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

package/src/core/AblyService.ts

@@ -1,13 +1,22 @@
 import * as Ably from 'ably';
 
+type ActionHandlerCallback = (actionType: string | undefined | null, messageData: any) => void | Promise<void>;
+
 export class ClientAblyService {
   private static client: Ably.Realtime | null = null;
   private static channel: Ably.RealtimeChannel | null = null;
   private static isConnected: boolean = false;
   private static sessionId: string | null = null;
   private static messageUnsubscribe: (() => void) | null = null;
-
-  static async startConnection(sessionId: string, ablyToken: string, onMessageReceived: Function, tenantId: string) {
+  private static onActionReceived: ActionHandlerCallback | null = null;
+
+  static async startConnection(
+    sessionId: string,
+    ablyToken: string,
+    onMessageReceived: Function,
+    tenantId: string,
+    onActionReceived?: ActionHandlerCallback
+  ) {
     // Prevent multiple connections
     if (this.isConnected && this.sessionId === sessionId) {
       return;
@@ -73,6 +82,9 @@ export class ClientAblyService {
         }, 10000);
       });
 
+      // Store optional action handler for this connection
+      this.onActionReceived = onActionReceived ?? null;
+
       // Subscribe to the session room
       await this.joinChannel(sessionId, onMessageReceived, tenantId);
     } catch (error) {
@@ -108,11 +120,17 @@ export class ClientAblyService {
       this.channel.subscribe('ReceiveMessage', (message) => {
         try {
           // Ensure messageContent is always a string (default to empty string if undefined)
+          const rawData = message.data;
+
           const messageContent =
-            typeof message.data === 'string' ? message.data : message.data?.content ?? message.data?.message ?? '';
-          const senderType = message.data?.senderType || 3; // Assistant
-          const needsAgent = message.data?.needsAgent || message.data?.actionType == 'needs_agent' || false;
-          const attachments = message.data?.attachments || [];
+            typeof rawData === 'string' ? rawData : rawData?.content ?? rawData?.message ?? '';
+          const senderType = rawData?.senderType || 3; // Assistant
+          const needsAgent = rawData?.needsAgent || rawData?.actionType == 'needs_agent' || false;
+          const attachments = rawData?.attachments || [];
+          const actionType = (rawData && typeof rawData.actionType === 'string' ? rawData.actionType : '') as
+            | string
+            | undefined
+            | null;
 
           // Extract downloadUrl from attachments (Ably now returns downloadUrl directly)
           // Attachments can be: strings (URLs), objects with downloadUrl, or objects with id
@@ -133,6 +151,19 @@ export class ClientAblyService {
             })
             .filter((url: string | null): url is string => url !== null);
 
+          // Invoke optional action handler first (non-blocking for message processing)
+          if (this.onActionReceived && actionType !== undefined) {
+            try {
+              void this.onActionReceived(actionType, rawData);
+            } catch (actionError) {
+              console.error('[AblyService] Error in action handler callback', {
+                error: actionError,
+                actionType,
+                rawData,
+              });
+            }
+          }
+
           onMessageReceived(messageContent, senderType, needsAgent, attachmentUrls);
         } catch (error) {
           console.error('[AblyService] Error processing message', { error, message });
@@ -166,6 +197,7 @@ export class ClientAblyService {
 
       this.isConnected = false;
       this.sessionId = null;
+      this.onActionReceived = null;
     } catch (error) {
       console.error('[AblyService] Error in stopConnection', { error });
       // Reset state even if there's an error

package/src/core/api.ts

@@ -238,7 +238,6 @@ export async function presignUpload(
 
   return await response.json();
 }
-
 export async function presignDownload(fileId: string, language: string): Promise<PresignDownloadResponse> {
   try {
     const response = await apiRequest(`NewFile/${fileId}/presign-download`, 'GET', null, {

package/src/lib/custom-hooks/useActionHandler.ts

@@ -0,0 +1,102 @@
+import { useCallback, useRef } from 'react';
+
+export type ActionHandler = (messageData: unknown) => void | Promise<void>;
+
+export interface ActionHandlerService {
+  registerHandler(actionType: string, handler: ActionHandler): void;
+  unregisterHandler(actionType: string): void;
+  handleAction(actionType: string | undefined | null, messageData: unknown): Promise<void>;
+  getRegisteredActions(): string[];
+}
+
+export const useActionHandler = (): ActionHandlerService => {
+  const handlersRef = useRef<Map<string, ActionHandler>>(new Map());
+
+  const defaultHandlerRef = useRef<ActionHandler>((messageData) => {
+    const message = (messageData as { actionType?: string } | undefined) ?? {};
+    const actionType = message.actionType || '';
+
+    if (actionType) {
+      // Log unknown actions for debugging but do not crash
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[ActionHandler] Unknown action type received: "${actionType}". Message data:`,
+        messageData
+      );
+    }
+  });
+
+  const registerHandler = useCallback((actionType: string, handler: ActionHandler) => {
+    if (!actionType) {
+      // eslint-disable-next-line no-console
+      console.warn('[ActionHandler] Attempted to register handler with empty action type. Ignored.');
+      return;
+    }
+
+    if (handlersRef.current.has(actionType)) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[ActionHandler] Handler for action type "${actionType}" already exists. Overwriting with new handler.`
+      );
+    }
+
+    handlersRef.current.set(actionType, handler);
+  }, []);
+
+  const unregisterHandler = useCallback((actionType: string) => {
+    if (!actionType) {
+      return;
+    }
+    handlersRef.current.delete(actionType);
+  }, []);
+
+  const handleAction = useCallback(
+    async (actionType: string | undefined | null, messageData: unknown) => {
+      // Ignore empty, null, or undefined action types (no-op)
+      if (!actionType || actionType === '') {
+        return;
+      }
+
+      const handler = handlersRef.current.get(actionType);
+
+      if (handler) {
+        try {
+          await handler(messageData);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `[ActionHandler] Error executing handler for action type "${actionType}":`,
+            error
+          );
+        }
+        return;
+      }
+
+      const defaultHandler = defaultHandlerRef.current;
+      if (defaultHandler) {
+        try {
+          await Promise.resolve(defaultHandler(messageData));
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `[ActionHandler] Error executing default handler for unknown action type "${actionType}":`,
+            error
+          );
+        }
+      }
+    },
+    []
+  );
+
+  const getRegisteredActions = useCallback(() => {
+    return Array.from(handlersRef.current.keys());
+  }, []);
+
+  return {
+    registerHandler,
+    unregisterHandler,
+    handleAction,
+    getRegisteredActions,
+  };
+};
+

package/src/lib/index.ts

@@ -1,3 +1,4 @@
 export * from "./LanguageContext";
 export * from "./utils";
 export * from "./theme-utils";
+export * from "./custom-hooks/useActionHandler";

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

@@ -30,6 +30,7 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [selectedFiles, setSelectedFiles] = useState<SelectedFileDto[]>([]);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [isSending, setIsSending] = useState(false);
 
   const handleAttachClick = useCallback(() => {
     fileInputRef.current?.click();
@@ -74,119 +75,122 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
 
   const handleSendMessageWithAttachments = useCallback(async () => {
     // Prevent sending if already loading
-    if (props.isLoading) {
+    if (props.isLoading || isSending) {
       return;
     }
 
-    // Get files that need to be uploaded (those without uploadedId)
-    const filesToUpload = selectedFiles.filter((f) => f.uploadedId === null && !f.error);
-    const alreadyUploadedIds = selectedFiles.filter((f) => f.uploadedId !== null).map((f) => f.uploadedId as string);
-
-    // Declare uploadedIds outside the if block so it's accessible later
-    let uploadedIds: string[] = [];
-
-    // If there are files to upload, upload them first
-    if (filesToUpload.length > 0) {
-      // Get session ID - only use existing, never create new one
-      let sessionId: string | null = null;
-      try {
-        // Only use existing sessionId, never call onEnsureSession
-        if (props.sessionId) {
-          sessionId = props.sessionId;
-        } else {
+    setIsSending(true);
+
+    try {
+      // Get files that need to be uploaded (those without uploadedId)
+      const filesToUpload = selectedFiles.filter((f) => f.uploadedId === null && !f.error);
+      const alreadyUploadedIds = selectedFiles.filter((f) => f.uploadedId !== null).map((f) => f.uploadedId as string);
+
+      // Declare uploadedIds outside the if block so it's accessible later
+      let uploadedIds: string[] = [];
+
+      // If there are files to upload, upload them first
+      if (filesToUpload.length > 0) {
+        // Get session ID - ensure session exists if needed (for image-only messages)
+        let sessionId: string | null = null;
+        try {
+          // Use existing sessionId if available, otherwise ensure session is created
+          if (props.sessionId) {
+            sessionId = props.sessionId;
+          } else {
+            // Ensure session exists before uploading files (allows starting chat with image only)
+            sessionId = await props.onEnsureSession();
+          }
+        } catch (error) {
+          console.error('[ChatWindowFooter] Failed to get sessionId for file upload:', error);
           // Mark all files as error
           setSelectedFiles((prev) =>
             prev.map((f) =>
               filesToUpload.some((ftl) => ftl.previewUrl === f.previewUrl)
-                ? { ...f, error: 'No session available', uploading: false }
+                ? { ...f, error: 'Failed to initialize session', uploading: false }
                 : f
             )
           );
+          setIsSending(false);
           return;
         }
-      } catch (error) {
-        console.error('[ChatWindowFooter] Failed to get sessionId for file upload:', error);
-        // Mark all files as error
-        setSelectedFiles((prev) =>
-          prev.map((f) =>
-            filesToUpload.some((ftl) => ftl.previewUrl === f.previewUrl)
-              ? { ...f, error: 'Failed to initialize session', uploading: false }
-              : f
-          )
-        );
-        return;
-      }
-
-      // Upload each file and collect uploaded IDs
-      uploadedIds = [];
-      let hasUploadErrors = false;
 
-      for (const fileDto of filesToUpload) {
-        try {
-          // Mark as uploading
-          setSelectedFiles((prev) =>
-            prev.map((f) => (f.previewUrl === fileDto.previewUrl ? { ...f, uploading: true, error: null } : f))
-          );
-
-          // Get presigned URL
-          const presignResponse = await presignUpload(sessionId, fileDto.file, i18n.language);
-
-          // Upload file to presigned URL using axios
-          const uploadResponse = await axios.put(presignResponse.uploadUrl, fileDto.file, {
-            headers: {
-              'Content-Type': fileDto.file.type,
-            },
-            onUploadProgress: () => {
-              // Upload progress tracking (silent)
-            },
-          });
-
-          if (uploadResponse.status !== 200 && uploadResponse.status !== 204) {
-            throw new Error(`Upload failed with status ${uploadResponse.status}`);
+        // Upload each file and collect uploaded IDs
+        uploadedIds = [];
+        let hasUploadErrors = false;
+
+        for (const fileDto of filesToUpload) {
+          try {
+            // Mark as uploading
+            setSelectedFiles((prev) =>
+              prev.map((f) => (f.previewUrl === fileDto.previewUrl ? { ...f, uploading: true, error: null } : f))
+            );
+
+            // Get presigned URL
+            const presignResponse = await presignUpload(sessionId, fileDto.file, i18n.language);
+
+            // Upload file to presigned URL using axios
+            const uploadResponse = await axios.put(presignResponse.uploadUrl, fileDto.file, {
+              headers: {
+                'Content-Type': fileDto.file.type,
+              },
+              onUploadProgress: () => {
+                // Upload progress tracking (silent)
+              },
+            });
+
+            if (uploadResponse.status !== 200 && uploadResponse.status !== 204) {
+              throw new Error(`Upload failed with status ${uploadResponse.status}`);
+            }
+
+            // Collect uploaded ID
+            uploadedIds.push(presignResponse.id);
+
+            // Update with uploaded ID
+            setSelectedFiles((prev) =>
+              prev.map((f) =>
+                f.previewUrl === fileDto.previewUrl
+                  ? { ...f, uploading: false, uploadedId: presignResponse.id, error: null }
+                  : f
+              )
+            );
+          } catch (error) {
+            console.error('[ChatWindowFooter] File upload failed:', error);
+            hasUploadErrors = true;
+            setSelectedFiles((prev) =>
+              prev.map((f) =>
+                f.previewUrl === fileDto.previewUrl
+                  ? { ...f, uploading: false, error: 'Upload failed', uploadedId: null }
+                  : f
+              )
+            );
           }
-
-          // Collect uploaded ID
-          uploadedIds.push(presignResponse.id);
-
-          // Update with uploaded ID
-          setSelectedFiles((prev) =>
-            prev.map((f) =>
-              f.previewUrl === fileDto.previewUrl
-                ? { ...f, uploading: false, uploadedId: presignResponse.id, error: null }
-                : f
-            )
-          );
-        } catch (error) {
-          console.error('[ChatWindowFooter] File upload failed:', error);
-          hasUploadErrors = true;
-          setSelectedFiles((prev) =>
-            prev.map((f) =>
-              f.previewUrl === fileDto.previewUrl
-                ? { ...f, uploading: false, error: 'Upload failed', uploadedId: null }
-                : f
-            )
-          );
         }
-      }
 
-      // If any uploads failed, don't send the message
-      if (hasUploadErrors) {
-        console.error('[ChatWindowFooter] Some files failed to upload, not sending message');
-        return;
+        // If any uploads failed, don't send the message
+        if (hasUploadErrors) {
+          console.error('[ChatWindowFooter] Some files failed to upload, not sending message');
+          setIsSending(false);
+          return;
+        }
       }
-    }
 
-    // Get all successfully uploaded file IDs (already uploaded + newly uploaded)
-    // Use uploadedIds from the upload loop instead of reading from state
-    const allAttachmentIds = [...alreadyUploadedIds, ...uploadedIds];
+      // Get all successfully uploaded file IDs (already uploaded + newly uploaded)
+      // Use uploadedIds from the upload loop instead of reading from state
+      const allAttachmentIds = [...alreadyUploadedIds, ...uploadedIds];
 
-    // Call the original send message with attachment IDs
-    props.handleSendMessage(allAttachmentIds);
+      // Call the original send message with attachment IDs
+      props.handleSendMessage(allAttachmentIds);
 
-    // Clear selected files and revoke URLs
-    selectedFiles.forEach((f) => URL.revokeObjectURL(f.previewUrl));
-    setSelectedFiles([]);
-  }, [selectedFiles, props, i18n.language]);
+      // Clear selected files and revoke URLs
+      selectedFiles.forEach((f) => URL.revokeObjectURL(f.previewUrl));
+      setSelectedFiles([]);
+      setIsSending(false);
+    } catch (error) {
+      console.error('[ChatWindowFooter] Error sending message:', error);
+      setIsSending(false);
+    }
+  }, [selectedFiles, props, i18n.language, isSending]);
 
   // Check if any files are currently uploading
   const hasUploadingFiles = selectedFiles.some((f) => f.uploading);
@@ -196,7 +200,8 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
 
   // Allow sending if there's text OR files selected (files will be uploaded on send)
   const hasContentToSend = props.inputMessage.trim() !== '' || selectedFiles.length > 0;
-  const isSendDisabled = props.isLoading || !hasContentToSend || hasUploadingFiles || hasFileErrors;
+  const isSendDisabled = props.isLoading || isSending || !hasContentToSend || hasUploadingFiles || hasFileErrors;
+  const showLoading = props.isLoading || isSending || hasUploadingFiles;
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -279,10 +284,16 @@ const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
           size='icon'
           onClick={handleSendMessageWithAttachments}
           disabled={isSendDisabled}
-          className='babylai-rounded-full babylai-bg-primary-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 disabled:babylai-opacity-50'
+          className='babylai-rounded-full babylai-bg-primary-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 !babylai-p-0 babylai-flex babylai-items-center babylai-justify-center disabled:babylai-opacity-50'
           type='button'
         >
-          <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />
+          {showLoading ? (
+            <div className='babylai-inline-block babylai-animate-spin babylai-rounded-full babylai-h-4 babylai-w-4 babylai-aspect-square babylai-border-2 babylai-border-white babylai-border-t-transparent babylai-box-border'></div>
+          ) : (
+            <EnvelopeIcon
+              className={`babylai-w-4 babylai-h-4 babylai-flex-shrink-0 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`}
+            />
+          )}
         </Button>
       </div>
 

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

@@ -44,7 +44,7 @@ const MessageComponent = React.memo(
     const handleImageClick = useCallback(
       (clickedIndex: number) => {
         // Use attachmentUrls if available (from Ably), otherwise use attachmentIds (user-sent)
-        const attachments = message.attachmentUrls || message.attachmentIds || [];
+        const attachments = message.attachmentUrls || [];
         if (attachments.length > 0) {
           onImageClick(attachments, clickedIndex);
         }

package/src/ui/help-center.tsx

@@ -1,5 +1,5 @@
 import ReviewDialog from '@/ui/review-dialog';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { apiRequest } from '../core/api';
 import { ClientAblyService } from '../core/AblyService';
 import { useLocalTranslation } from '../useLocalTranslation';
@@ -11,6 +11,7 @@ import HelpPopup from './help-popup';
 import { defaultLanguage } from '@/i18n';
 import { LanguageProvider } from '@/lib/LanguageContext';
 import { getThemeStyles } from '@/lib/theme-utils';
+import { useActionHandler } from '@/lib/custom-hooks/useActionHandler';
 
 interface HelpCenterProps {
   helpScreenId: string;
@@ -57,6 +58,8 @@ const HelpCenterContent = ({
   const [assistantStatus, setAssistantStatus] = useState('idle');
   const [isReviewDialogOpen, setIsReviewDialogOpen] = useState(false);
 
+  const actionHandler = useActionHandler();
+
   const handleTogglePopup = () => {
     setIsOpen(!isOpen);
     setShowArrowAnimation(isOpen);
@@ -93,7 +96,7 @@ const HelpCenterContent = ({
     setAssistantStatus('idle');
   };
 
-  const handleEndChat = async () => {
+  const handleEndChat = useCallback(async () => {
     if (!sessionId || !selectedOption) return;
 
     try {
@@ -123,7 +126,7 @@ const HelpCenterContent = ({
       setSessionId(null);
       setSelectedOption(null);
     }
-  };
+  }, [language, selectedOption, sessionId]);
 
   const handleSendChatReview = async ({ comment, rating }: ReviewProps) => {
     if (!reviewSessionId) return;
@@ -195,7 +198,10 @@ const HelpCenterContent = ({
         newSessionId,
         responseData.ablyToken,
         handleReceiveMessage,
-        responseData.chatSession.tenantId
+        responseData.chatSession.tenantId,
+        (actionType, messageData) => {
+          void actionHandler.handleAction(actionType, messageData);
+        }
       );
 
       // Verify the connection is actually active
@@ -297,6 +303,25 @@ const HelpCenterContent = ({
     }
   };
 
+  // Register known action handlers for realtime messages
+  useEffect(() => {
+    // "needs_agent" → trigger handoff / needs agent UI flow
+    actionHandler.registerHandler('needs_agent', () => {
+      setNeedsAgent(true);
+    });
+
+    // "end_session" → gracefully close the chat session and show review dialog
+    actionHandler.registerHandler('end_session', () => {
+      // Reuse existing end chat logic
+      void handleEndChat();
+    });
+
+    return () => {
+      actionHandler.unregisterHandler('needs_agent');
+      actionHandler.unregisterHandler('end_session');
+    };
+  }, [actionHandler, handleEndChat]);
+
   useEffect(() => {
     if (isOpen && helpScreenId) {
       setStatus('loading');