@aslaluroba/help-center-react 3.2.17 → 3.2.18

package/src/components/ui/agent-response/doc.md

@@ -1,88 +0,0 @@
-# AgentResponse Component
-
-## Overview
-
-The `AgentResponse` component renders a chat message in a conversational interface, supporting user and agent messages with optional typewriter animation for agent responses. It uses `react-markdown` to render the message content, allowing Markdown formatting, and applies conditional styling based on the sender type.
-
-## Props
-
-| Prop Name        | Type   | Required | Description                                                                 |
-|------------------|--------|----------|-----------------------------------------------------------------------------|
-| `messageContent` | string | Yes      | The content of the message to display, supports Markdown formatting.         |
-| `senderType`     | number | Yes      | The type of sender: `1` for user, `2` or `3` for agents (triggers animation). |
-| `messageId`      | number | Yes      | A unique identifier for the message, used to track seen messages.            |
-| `onType`         | () => void | No      | A Callback function, used to trigger scroll on typing.            |
-
-## Features
-
-- **Conditional Styling**:
-  - User messages (`senderType === 1`): Rendered with a primary background (`babylai-bg-primary-500`), white text (`!babylai-text-black-white-50`), and aligned to the right (`babylai-self-end`).
-  - Agent messages (`senderType === 2` or `3`): Rendered with a neutral background (`babylai-bg-black-white-50`).
-- **Typewriter Animation**:
-  - Applied to agent messages (`senderType === 2` or `3`) on first render (when `messageId` is not in `seenMessagesRef`).
-  - Uses the `useTypewriter` hook with a 20ms delay per character.
-  - Animation is skipped for subsequent renders of the same `messageId`.
-- **Markdown Support**:
-  - Renders `messageContent` using `react-markdown`.
-  - Customizes `<p>` tags with classes for consistent styling (`babylai-m-0`, `babylai-leading-6`, `babylai-text-sm`, `babylai-text-right`, `babylai-font-sans`).
-- **Seen Message Tracking**:
-  - Maintains a global `seenMessagesRef` Set to track which `messageId`s have been fully animated.
-  - Adds `messageId` to `seenMessagesRef` when animation completes (`animatedText === messageContent`).
-
-## Usage
-
-### Example
-
-```tsx
-import { AgentResponse } from './agent-response';
-
-function Chat() {
-    return (
-        <div>
-            {/* User message */}
-            <AgentResponse
-                senderType={1}
-                messageContent="Hello, how can I help?"
-                messageId={1}
-            />
-            {/* Agent message with animation */}
-            <AgentResponse
-                senderType={2}
-                messageContent="Hi! I'm here to assist."
-                messageId={2}
-            />
-        </div>
-    );
-}
-```
-
-### Styling
-
-The component uses the following Tailwind/custom classes:
-- Container: `babylai-max-w-[80%] babylai-rounded-2xl babylai-p-4 babylai-text-right`
-- User-specific: `babylai-bg-primary-500 !babylai-text-black-white-50 babylai-self-end`
-- Agent-specific: `babylai-bg-black-white-50`
-- Paragraph: `babylai-m-0 babylai-leading-6 babylai-text-sm babylai-text-right babylai-font-sans`
-
-Ensure these classes are defined in your CSS (e.g., Tailwind configuration).
-
-## Notes
-
-- **Animation**: The typewriter effect is only applied to agent messages (`senderType` 2 or 3) on their first render. Once the animation completes, the `messageId` is marked as seen, and subsequent renders use the full message.
-- **Markdown**: Supports basic Markdown (e.g., bold, italic). Complex Markdown features depend on `react-markdown` capabilities.
-- **Performance**: The `seenMessagesRef` is a global `Set`, so ensure `messageId`s are unique to avoid conflicts across instances.
-
-## Dependencies
-
-- `react-markdown`: For rendering Markdown content.
-- `@/lib/custom-hooks/useTypewriter`: Custom hook for typewriter animation.
-
-## Testing
-
-The component is tested with Jest and React Testing Library, covering:
-- Rendering and styling for user (`senderType=1`) and agent (`senderType=2/3`) messages.
-- Animation behavior for unseen and seen messages.
-- `seenMessagesRef` updates when animation completes.
-- Markdown rendering with custom paragraph styling.
-
-See `agent-response.test.tsx` for the full test suite.

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

@@ -1,119 +0,0 @@
-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; // File ID (for user-sent messages, requires presignDownload)
-  imageUrl?: string; // Direct URL (for received messages from Ably)
-  className?: string;
-  enablePreview?: boolean;
-  onClick?: () => void;
-}
-
-export const ImageAttachment: React.FC<ImageAttachmentProps> = ({
-  fileId,
-  imageUrl: propImageUrl,
-  className,
-  enablePreview = true,
-  onClick,
-}) => {
-  const { i18n } = useLocalTranslation();
-  const [imageUrl, setImageUrl] = useState<string | null>(propImageUrl || null);
-  const [loading, setLoading] = useState(!propImageUrl && !!fileId);
-  const [error, setError] = useState(false);
-  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
-
-  useEffect(() => {
-    // If we have a direct URL, use it immediately
-    if (propImageUrl) {
-      setImageUrl(propImageUrl);
-      setLoading(false);
-      return;
-    }
-
-    // If we only have a fileId, fetch the URL using presignDownload
-    if (fileId) {
-      const fetchImageUrl = async () => {
-        try {
-          setLoading(true);
-          setError(false);
-          const response = await presignDownload(fileId, i18n.language as 'ar' | 'en');
-          setImageUrl(response.downloadUrl);
-        } catch (err) {
-          setError(true);
-        } finally {
-          setLoading(false);
-        }
-      };
-
-      fetchImageUrl();
-    }
-  }, [fileId, propImageUrl, i18n.language as 'ar' | 'en']);
-
-  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 babylai:hover: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

@@ -1,400 +0,0 @@
-import React, { useEffect, useCallback, useRef, useState } from 'react';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components';
-import MaterialSymbolsCloseSmallOutlineRounded from '~icons/material-symbols/close-small-outline-rounded'
-import SolarArrowRightBoldDuotone from '~icons/solar/arrow-right-bold-duotone';
-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 handleDownload = useCallback(async () => {
-    if (!currentImageUrl) return;
-
-    try {
-      // Fetch the image as a blob
-      const response = await fetch(currentImageUrl);
-      const blob = await response.blob();
-      
-      // Create a temporary URL for the blob
-      const blobUrl = URL.createObjectURL(blob);
-      
-      // Extract filename from URL or use a default
-      const urlParts = currentImageUrl.split('/');
-      const filename = urlParts[urlParts.length - 1].split('?')[0] || 'image.png';
-      
-      // Create a temporary anchor element and trigger download
-      const link = document.createElement('a');
-      link.href = blobUrl;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      
-      // Cleanup
-      document.body.removeChild(link);
-      URL.revokeObjectURL(blobUrl);
-    } catch (error) {
-      console.error('Failed to download image:', error);
-      // Fallback: open in new tab if download fails
-      window.open(currentImageUrl, '_blank');
-    }
-  }, [currentImageUrl]);
-
-  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 babylai:hover:text-white/80 babylai:hover:bg-white/10',
-            'babylai:h-10 babylai:w-10 babylai:rounded-full'
-          )}
-          aria-label='Close preview'
-          type='button'
-        >
-          <MaterialSymbolsCloseSmallOutlineRounded 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 babylai:hover:text-white/80 babylai:hover:bg-white/10',
-                'babylai:h-12 babylai:w-12 babylai:rounded-full',
-                'babylai:disabled:opacity-30'
-              )}
-              aria-label='Previous image'
-              type='button'
-            >
-              <SolarArrowRightBoldDuotone 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 babylai:hover:text-white/80 babylai:hover:bg-white/10',
-                'babylai:h-12 babylai:w-12 babylai:rounded-full',
-                'babylai:disabled:opacity-30'
-              )}
-              aria-label='Next image'
-              type='button'
-            >
-              <SolarArrowRightBoldDuotone 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 babylai:hover:text-white/80 babylai:hover:bg-white/10 babylai:h-9 babylai:w-9 babylai:disabled: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 babylai:hover:text-white/80 babylai:hover:bg-white/10 babylai:h-9 babylai:w-9 babylai:disabled: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 babylai:hover:text-white/80 babylai:hover:bg-white/10 babylai:h-9 babylai:px-3 babylai:ml-2'
-              aria-label='Reset zoom'
-              type='button'
-            >
-              Reset
-            </Button>
-          )}
-          {/* Download Button */}
-          <div className='babylai:h-9 babylai:w-px babylai:bg-white/20 babylai:mx-1' />
-          <Button
-            variant='ghost'
-            size='icon'
-            onClick={handleDownload}
-            className='babylai:text-white babylai:hover:text-white/80 babylai:hover:bg-white/10 babylai:h-9 babylai:w-9'
-            aria-label='Download image'
-            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='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' />
-            </svg>
-          </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

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