@aslaluroba/help-center-react 3.0.21 → 3.2.1

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

@@ -1,9 +1,10 @@
+import React from 'react';
 interface ChatWindowFooterProps {
     inputMessage: string;
     setInputMessage: (e: string) => void;
-    handleKeyDown: (e: React.KeyboardEvent) => void;
-    handleSendMessage: () => void;
+    handleSendMessage: (attachmentIds: string[]) => void;
     isLoading: boolean;
+    onEnsureSession: () => Promise<string>;
 }
 declare const ChatWindowFooter: React.FC<ChatWindowFooterProps>;
 export default ChatWindowFooter;

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

@@ -1,11 +1,12 @@
 import { Message } from '@/lib/types';
 import React from 'react';
 interface ChatWindowProps {
-    onSendMessage: (message: string) => void;
+    onSendMessage: (message: string, attachmentIds: string[]) => void;
+    onEnsureSession: () => Promise<string>;
     messages: Message[];
     assistantStatus: string;
     needsAgent: boolean;
     isAblyConnected: boolean;
 }
-export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, messages, assistantStatus }: ChatWindowProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const ChatWindow: React.MemoExoticComponent<({ onSendMessage, onEnsureSession, messages, assistantStatus, needsAgent }: ChatWindowProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -1,4 +1,4 @@
-import "../globals.css";
+import '../globals.css';
 interface HelpCenterProps {
     helpScreenId: string;
     language: string;

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

@@ -7,7 +7,8 @@ type HelpPopupProps = {
     error: string | null;
     user: any;
     onStartChat: (option: Option) => void;
-    onSendMessage: (message: string) => void;
+    onSendMessage: (message: string, attachmentIds: string[]) => void;
+    onEnsureSession: () => Promise<string>;
     onEndChat: (option?: Option) => void;
     messages: Message[];
     needsAgent: boolean;
@@ -20,5 +21,5 @@ type HelpPopupProps = {
     showHelpScreen: boolean;
     logoUrl?: string;
 };
-declare const HelpPopup: ({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, logoUrl, }: HelpPopupProps) => import("react/jsx-runtime").JSX.Element;
+declare const HelpPopup: ({ onClose, helpScreen, status, error, onStartChat, onSendMessage, onEnsureSession, onEndChat, messages, assistantStatus, needsAgent, sessionId, selectedOption, setSelectedOption, showHelpScreen, isAblyConnected, logoUrl, }: HelpPopupProps) => import("react/jsx-runtime").JSX.Element;
 export default HelpPopup;

package/package.json

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

package/src/assets/icons/paperclip.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
+</svg>

package/src/assets/icons/x.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="18" y1="6" x2="6" y2="18"/>
+  <line x1="6" y1="6" x2="18" y2="18"/>
+</svg>

package/src/components/ui/image-attachment.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { presignDownload } from '@/core/api';
+import { cn } from '@/lib/utils';
+import { useLocalTranslation } from '../../useLocalTranslation';
+import { ImagePreviewDialog } from './image-preview-dialog';
+
+interface ImageAttachmentProps {
+  fileId: string;
+  className?: string;
+  enablePreview?: boolean;
+  onClick?: () => void;
+}
+
+export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
+  fileId,
+  className,
+  enablePreview = true,
+  onClick,
+}) => {
+  const { i18n } = useLocalTranslation();
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+
+  useEffect(() => {
+    const fetchImageUrl = async () => {
+      try {
+        setLoading(true);
+        setError(false);
+        const response = await presignDownload(fileId, i18n.language);
+        setImageUrl(response.downloadUrl);
+      } catch (err) {
+        setError(true);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchImageUrl();
+  }, [fileId, i18n.language]);
+
+  const handleImageClick = () => {
+    if (onClick) {
+      onClick();
+    } else if (enablePreview && imageUrl) {
+      setIsPreviewOpen(true);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div
+        className={cn(
+          'babylai-flex babylai-items-center babylai-justify-center babylai-bg-black-white-100 babylai-rounded-lg babylai-w-16 babylai-h-16',
+          className
+        )}
+      >
+        <div className='babylai-animate-pulse babylai-text-xs babylai-text-black-white-500'>...</div>
+      </div>
+    );
+  }
+
+  if (error || !imageUrl) {
+    return (
+      <div
+        className={cn(
+          'babylai-flex babylai-items-center babylai-justify-center babylai-bg-black-white-100 babylai-rounded-lg babylai-w-16 babylai-h-16 babylai-border babylai-border-black-white-200',
+          className
+        )}
+      >
+        <div className='babylai-text-xs babylai-text-black-white-500'>!</div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <img
+        src={imageUrl}
+        alt='Attachment'
+        className={cn(
+          'babylai-w-16 babylai-h-16 babylai-object-cover babylai-rounded-lg babylai-border babylai-border-black-white-200 babylai-max-w-[50px]',
+          (enablePreview || onClick) && 'babylai-cursor-pointer hover:babylai-opacity-80 babylai-transition-opacity',
+          className
+        )}
+        onError={() => setError(true)}
+        onClick={handleImageClick}
+        role={enablePreview || onClick ? 'button' : undefined}
+        aria-label={enablePreview || onClick ? 'Click to preview image' : undefined}
+      />
+      {enablePreview && !onClick && (
+        <ImagePreviewDialog
+          imageUrls={[imageUrl]}
+          initialIndex={0}
+          isOpen={isPreviewOpen}
+          onClose={() => setIsPreviewOpen(false)}
+          alt='Attachment preview'
+        />
+      )}
+    </>
+  );
+};
+
+ImageAttachment.displayName = 'ImageAttachment';
+
+export default ImageAttachment;

package/src/components/ui/image-preview-dialog.tsx

@@ -0,0 +1,354 @@
+import React, { useEffect, useCallback, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components';
+import XIcon from '../../assets/icons/x.svg';
+import ArrowRightIcon from '../../assets/icons/arrowRight.svg';
+import { useLocalTranslation } from '../../useLocalTranslation';
+
+interface ImagePreviewDialogProps {
+  imageUrls: string[];
+  initialIndex: number;
+  isOpen: boolean;
+  onClose: () => void;
+  alt?: string;
+}
+
+export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
+  imageUrls,
+  initialIndex,
+  isOpen,
+  onClose,
+  alt = 'Preview',
+}) => {
+  const { dir } = useLocalTranslation();
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [imagePosition, setImagePosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const imageRef = useRef<HTMLImageElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const currentImageUrl = imageUrls[currentIndex];
+  const hasMultipleImages = imageUrls.length > 1;
+
+  // Update current index when initialIndex changes
+  useEffect(() => {
+    if (isOpen) {
+      setCurrentIndex(initialIndex);
+      setZoomLevel(1);
+      setImagePosition({ x: 0, y: 0 });
+    }
+  }, [initialIndex, isOpen]);
+
+  const handlePrevious = useCallback(() => {
+    if (currentIndex > 0) {
+      setCurrentIndex(currentIndex - 1);
+      setZoomLevel(1);
+      setImagePosition({ x: 0, y: 0 });
+    }
+  }, [currentIndex]);
+
+  const handleNext = useCallback(() => {
+    if (currentIndex < imageUrls.length - 1) {
+      setCurrentIndex(currentIndex + 1);
+      setZoomLevel(1);
+      setImagePosition({ x: 0, y: 0 });
+    }
+  }, [currentIndex, imageUrls.length]);
+
+  const handleZoomIn = useCallback(() => {
+    setZoomLevel((prev) => Math.min(prev + 0.25, 3));
+  }, []);
+
+  const handleZoomOut = useCallback(() => {
+    setZoomLevel((prev) => Math.max(prev - 0.25, 0.5));
+  }, []);
+
+  const handleResetZoom = useCallback(() => {
+    setZoomLevel(1);
+    setImagePosition({ x: 0, y: 0 });
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setZoomLevel(1);
+    setImagePosition({ x: 0, y: 0 });
+    onClose();
+  }, [onClose]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        if (dir === 'rtl') {
+          handleNext();
+        } else {
+          handlePrevious();
+        }
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (dir === 'rtl') {
+          handlePrevious();
+        } else {
+          handleNext();
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        handleClose();
+      } else if (e.key === '+' || e.key === '=') {
+        e.preventDefault();
+        handleZoomIn();
+      } else if (e.key === '-') {
+        e.preventDefault();
+        handleZoomOut();
+      } else if (e.key === '0') {
+        e.preventDefault();
+        handleResetZoom();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, currentIndex, imageUrls.length, dir, handlePrevious, handleNext, handleZoomIn, handleZoomOut, handleResetZoom, handleClose]);
+
+  // Mouse wheel zoom
+  const handleWheel = useCallback(
+    (e: React.WheelEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        if (e.deltaY < 0) {
+          handleZoomIn();
+        } else {
+          handleZoomOut();
+        }
+      }
+    },
+    [handleZoomIn, handleZoomOut]
+  );
+
+  // Drag to pan when zoomed
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (zoomLevel > 1) {
+        setIsDragging(true);
+        setDragStart({ x: e.clientX - imagePosition.x, y: e.clientY - imagePosition.y });
+      }
+    },
+    [zoomLevel, imagePosition]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (isDragging && zoomLevel > 1) {
+        setImagePosition({
+          x: e.clientX - dragStart.x,
+          y: e.clientY - dragStart.y,
+        });
+      }
+    },
+    [isDragging, zoomLevel, dragStart]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  // Constrain image position when zoomed
+  useEffect(() => {
+    if (zoomLevel <= 1) {
+      setImagePosition({ x: 0, y: 0 });
+    }
+  }, [zoomLevel]);
+
+  // Prevent body scroll when dialog is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  if (!isOpen || !currentImageUrl) return null;
+
+  return (
+    <div
+      className='babylai-fixed babylai-inset-0 babylai-z-[9999] babylai-flex babylai-items-center babylai-justify-center'
+      onClick={handleClose}
+      role='dialog'
+      aria-modal='true'
+      aria-label='Image preview dialog'
+    >
+      {/* Backdrop */}
+      <div className='babylai-absolute babylai-inset-0 babylai-bg-black babylai-bg-opacity-95' />
+
+      {/* Dialog content */}
+      <div
+        ref={containerRef}
+        className='babylai-relative babylai-w-full babylai-h-full babylai-flex babylai-items-center babylai-justify-center babylai-overflow-hidden'
+        onClick={(e) => e.stopPropagation()}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        {/* Close Button */}
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={handleClose}
+          className={cn(
+            'babylai-absolute babylai-top-4 babylai-z-[60]',
+            dir === 'rtl' ? 'babylai-left-4' : 'babylai-right-4',
+            'babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10',
+            'babylai-h-10 babylai-w-10 babylai-rounded-full'
+          )}
+          aria-label='Close preview'
+          type='button'
+        >
+          <XIcon className='babylai-w-6 babylai-h-6' />
+        </Button>
+
+        {/* Navigation Buttons */}
+        {hasMultipleImages && (
+          <>
+            <Button
+              variant='ghost'
+              size='icon'
+              onClick={dir === 'rtl' ? handleNext : handlePrevious}
+              disabled={dir === 'rtl' ? currentIndex === imageUrls.length - 1 : currentIndex === 0}
+              className={cn(
+                'babylai-absolute babylai-top-1/2 -babylai-translate-y-1/2 babylai-z-[60]',
+                dir === 'rtl' ? 'babylai-right-4' : 'babylai-left-4',
+                'babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10',
+                'babylai-h-12 babylai-w-12 babylai-rounded-full',
+                'disabled:babylai-opacity-30'
+              )}
+              aria-label='Previous image'
+              type='button'
+            >
+              <ArrowRightIcon className={cn('babylai-w-8 babylai-h-8', dir === 'rtl' ? '' : 'babylai-rotate-180')} />
+            </Button>
+            <Button
+              variant='ghost'
+              size='icon'
+              onClick={dir === 'rtl' ? handlePrevious : handleNext}
+              disabled={dir === 'rtl' ? currentIndex === 0 : currentIndex === imageUrls.length - 1}
+              className={cn(
+                'babylai-absolute babylai-top-1/2 -babylai-translate-y-1/2 babylai-z-[60]',
+                dir === 'rtl' ? 'babylai-left-4' : 'babylai-right-4',
+                'babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10',
+                'babylai-h-12 babylai-w-12 babylai-rounded-full',
+                'disabled:babylai-opacity-30'
+              )}
+              aria-label='Next image'
+              type='button'
+            >
+              <ArrowRightIcon className={cn('babylai-w-8 babylai-h-8', dir === 'rtl' ? 'babylai-rotate-180' : '')} />
+            </Button>
+          </>
+        )}
+
+        {/* Zoom Controls */}
+        <div
+          className={cn(
+            'babylai-absolute babylai-bottom-4 babylai-z-[60]',
+            'babylai-flex babylai-items-center babylai-gap-2',
+            'babylai-bg-black/50 babylai-backdrop-blur-sm babylai-rounded-lg babylai-p-2',
+            dir === 'rtl' ? 'babylai-right-1/2 babylai-translate-x-1/2' : 'babylai-left-1/2 -babylai-translate-x-1/2'
+          )}
+        >
+          <Button
+            variant='ghost'
+            size='icon'
+            onClick={handleZoomOut}
+            disabled={zoomLevel <= 0.5}
+            className='babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10 babylai-h-9 babylai-w-9 disabled:babylai-opacity-30'
+            aria-label='Zoom out'
+            type='button'
+          >
+            <svg className='babylai-w-5 babylai-h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7' />
+            </svg>
+          </Button>
+          <span className='babylai-text-white babylai-text-sm babylai-font-medium babylai-min-w-12 babylai-text-center'>
+            {Math.round(zoomLevel * 100)}%
+          </span>
+          <Button
+            variant='ghost'
+            size='icon'
+            onClick={handleZoomIn}
+            disabled={zoomLevel >= 3}
+            className='babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10 babylai-h-9 babylai-w-9 disabled:babylai-opacity-30'
+            aria-label='Zoom in'
+            type='button'
+          >
+            <svg className='babylai-w-5 babylai-h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7' />
+            </svg>
+          </Button>
+          {zoomLevel !== 1 && (
+            <Button
+              variant='ghost'
+              size='sm'
+              onClick={handleResetZoom}
+              className='babylai-text-white hover:babylai-text-white/80 hover:babylai-bg-white/10 babylai-h-9 babylai-px-3 babylai-ml-2'
+              aria-label='Reset zoom'
+              type='button'
+            >
+              Reset
+            </Button>
+          )}
+        </div>
+
+        {/* Image Counter */}
+        {hasMultipleImages && (
+          <div
+            className={cn(
+              'babylai-absolute babylai-top-4 babylai-z-[60]',
+              'babylai-bg-black/50 babylai-backdrop-blur-sm babylai-rounded-lg babylai-px-4 babylai-py-2',
+              dir === 'rtl' ? 'babylai-right-1/2 babylai-translate-x-1/2' : 'babylai-left-1/2 -babylai-translate-x-1/2'
+            )}
+          >
+            <span className='babylai-text-white babylai-text-sm babylai-font-medium'>
+              {currentIndex + 1} / {imageUrls.length}
+            </span>
+          </div>
+        )}
+
+        {/* Image Container */}
+        <div
+          className='babylai-flex babylai-items-center babylai-justify-center'
+          style={{
+            transform: `translate(${imagePosition.x}px, ${imagePosition.y}px)`,
+            cursor: zoomLevel > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default',
+          }}
+        >
+          <img
+            ref={imageRef}
+            src={currentImageUrl}
+            alt={alt}
+            className='babylai-max-w-[90vw] babylai-max-h-[85vh] babylai-object-contain babylai-select-none'
+            style={{
+              transform: `scale(${zoomLevel})`,
+              transformOrigin: 'center center',
+            }}
+            draggable={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ImagePreviewDialog.displayName = 'ImagePreviewDialog';
+
+export default ImagePreviewDialog;

package/src/components/ui/index.ts

@@ -0,0 +1,4 @@
+export { ImageAttachment } from './image-attachment';
+export { ImagePreviewDialog } from './image-preview-dialog';
+export { default as AgentResponse } from './agent-response/agent-response';
+export { default as Header } from './header';

package/src/core/AblyService.ts

@@ -81,12 +81,15 @@ export class ClientAblyService {
           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 || false;
+          const needsAgent =
+            message.data?.needsAgent ||
+            message.data?.actionType == "needs_agent" ||
+            false;
+          const attachments = message.data?.attachments || [];
 
-          onMessageReceived(messageContent, senderType, needsAgent);
+          onMessageReceived(messageContent, senderType, needsAgent, attachments);
         } catch (error) {
           // Handle error silently
-          console.error('[AblyService] Error processing ReceiveMessage:', error);
         }
       });
 

package/src/core/ApiService.ts

@@ -61,7 +61,6 @@ export class ApiService {
         this.tokenExpiryTime = currentTime + response.expiresIn;
         return this.currentToken;
       } catch (error) {
-        console.error('Error getting token:', error);
         throw error;
       }
     }
@@ -113,6 +112,5 @@ export class ApiService {
     if (this.config.onError) {
       this.config.onError(error instanceof Error ? error : new Error('Unknown error occurred'));
     }
-    console.error('API Error:', error);
   }
 }