@aslaluroba/help-center-react 3.0.20 → 3.2.0

package/src/core/api.ts

@@ -1,4 +1,4 @@
-import { TokenResponse } from '../lib/types';
+import { TokenResponse, PresignUploadRequestDto, PresignUploadResponse, PresignDownloadResponse } from '../lib/types';
 
 let getTokenFunction: (() => Promise<TokenResponse>) | undefined = undefined;
 let baseUrl: string | null = null;
@@ -35,7 +35,6 @@ export async function getValidToken(forceRefresh = false): Promise<string> {
       localStorage.setItem('chatbot-token', storedToken);
       localStorage.setItem('chatbot-token-expiry', storedExpiry);
     } catch (error) {
-      console.error('Failed to refresh token:', error);
       throw error;
     }
   }
@@ -75,7 +74,6 @@ async function fetchWithAuth(url: string, options: RequestInit, retry = true): P
 
       // Handle 401/403 with token refresh
       if ((response.status === 401 || response.status === 403) && retry) {
-        console.warn('Token expired, refreshing...');
         const newToken = await getValidToken(true);
         headers.set('Authorization', `Bearer ${newToken}`);
         options.headers = headers;
@@ -94,7 +92,6 @@ async function fetchWithAuth(url: string, options: RequestInit, retry = true): P
       throw error;
     }
   } catch (error) {
-    console.error('Fetch error:', error);
     throw error;
   }
 }
@@ -139,7 +136,7 @@ export async function apiRequest(
   endpoint: string,
   method = 'GET',
   body: any = null,
-  options: { cache?: boolean; timeout?: number } = {}
+  options: { cache?: boolean; timeout?: number; language: string }
 ) {
   if (!baseUrl) throw new Error('API not initialized');
 
@@ -165,6 +162,7 @@ export async function apiRequest(
     headers: {
       'Content-Type': 'application/json',
       'Cache-Control': method === 'GET' ? 'max-age=30' : 'no-cache',
+      'Accept-Language': options.language,
     },
     body: body ? JSON.stringify(body) : null,
   };
@@ -177,25 +175,36 @@ export async function apiRequest(
         let errorMessage = 'API request failed';
 
         try {
-          const errorData = await response.json();
-          errorMessage = errorData.message || errorMessage;
-        } catch {
-          errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+          // Clone response before reading to avoid consuming the body
+          const errorResponse = response.clone();
+          const errorData = await errorResponse.json();
+          errorMessage = errorData.message || errorData.error || errorMessage;
+        } catch (parseError) {
+          // If JSON parsing fails, try to get text
+          try {
+            const errorResponse = response.clone();
+            const errorText = await errorResponse.text();
+            errorMessage = errorText || `HTTP ${response.status}: ${response.statusText}`;
+          } catch {
+            errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+          }
         }
 
         throw new Error(errorMessage);
       }
 
       // Cache successful GET responses
+      // Note: We clone before caching to avoid consuming the original response body
       if (method === 'GET' && options.cache !== false) {
-        const responseData = await response.clone();
+        const responseData = response.clone();
         const data = await responseData.json();
         setCachedResponse(requestKey, { json: () => Promise.resolve(data) });
       }
 
+      // Return the original response - it's body hasn't been consumed yet
+      // (we only cloned for caching, and the clone was consumed)
       return response;
     } catch (error) {
-      console.error(`API request failed for ${endpoint}:`, error);
       throw error;
     }
   })();
@@ -205,3 +214,64 @@ export async function apiRequest(
 
   return requestPromise;
 }
+
+export async function presignUpload(
+  chatSessionId: string,
+  file: File,
+  language: string
+): Promise<PresignUploadResponse> {
+  const requestBody: PresignUploadRequestDto = {
+    name: file.name,
+    contentType: file.type,
+    sizeBytes: file.size,
+    pathData: {
+      type: 1,
+      chatSessionId: chatSessionId,
+    },
+  };
+
+  const response = await apiRequest('NewFile/presign-upload', 'POST', requestBody, { language });
+
+  if (!response.ok) {
+    throw new Error('Failed to get presigned upload URL');
+  }
+
+  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, {
+      language,
+      cache: false, // Don't cache presigned URLs as they have expiration times
+    });
+
+    // If response is not ok, apiRequest would have thrown an error already
+    // So we can safely read the JSON here
+    try {
+      return await response.json();
+    } catch (jsonError) {
+      // If JSON parsing fails, the response body might have been consumed
+      // or the response might not be valid JSON
+      if (jsonError instanceof Error) {
+        if (jsonError.message.includes('already read')) {
+          throw new Error(`Failed to parse response for file ${fileId}: Response body was already consumed`);
+        }
+        throw new Error(`Failed to parse response for file ${fileId}: ${jsonError.message}`);
+      }
+      throw new Error(`Failed to parse response for file ${fileId}`);
+    }
+  } catch (error) {
+    // Handle all types of errors
+    if (error instanceof Error) {
+      // If it's already a descriptive error from apiRequest, re-throw it
+      if (error.message.includes('API request failed') || error.message.includes('HTTP')) {
+        throw new Error(`Failed to get presigned download URL for file ${fileId}: ${error.message}`);
+      }
+      // Otherwise, re-throw with context
+      throw error;
+    }
+    // Handle non-Error types
+    throw new Error(`Failed to get presigned download URL for file ${fileId}: ${String(error)}`);
+  }
+}

package/src/lib/types.ts

@@ -1,128 +1,154 @@
 export interface HelpCenterProps extends React.HTMLAttributes<HTMLDivElement> {
-  helpScreenId: string
-  primaryColor?: string
-  secondaryColor?: string
-  logoUrl?: string
+  helpScreenId: string;
+  primaryColor?: string;
+  secondaryColor?: string;
+  logoUrl?: string;
 }
 
 export interface Theme {
-  primary: string
-  secondary: string
-  text: string
-  background: string
-  error: string
-  success: string
+  primary: string;
+  secondary: string;
+  text: string;
+  background: string;
+  error: string;
+  success: string;
 }
 
 export interface UserData {
-  id: string
-  name: string
-  email: string
-  avatar?: string
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
 }
 
 export interface Message {
-  id: number
-  senderType: number // 1: Customer, 2: Agent, 3: AI
-  messageContent: string
-  sentAt: Date
-  isSeen: boolean
+  id: number;
+  senderType: number; // 1: Customer, 2: Agent, 3: AI
+  messageContent: string;
+  sentAt: Date;
+  isSeen: boolean;
+  attachmentIds?: string[];
 }
 
 export interface ChatSession {
-  id: string
-  messages: Message[]
-  participants: UserData[]
-  status: 'active' | 'closed'
-  createdAt: Date
-  updatedAt: Date
+  id: string;
+  messages: Message[];
+  participants: UserData[];
+  status: 'active' | 'closed';
+  createdAt: Date;
+  updatedAt: Date;
 }
 
 export interface ChatSessionData {
-  helpScreenId: string
-  user: UserData
-  initialMessage?: string
+  helpScreenId: string;
+  user: UserData;
+  initialMessage?: string;
 }
 
 export interface HelpCenterConfig {
-  baseUrl: string
-  getToken: () => Promise<{ token: string; expiresIn: number }>
-  helpScreenId: string
-  user?: UserData
-  theme?: Partial<Theme>
-  onMessageReceived?: (message: Message) => void
-  onSessionClosed?: () => void
-  onError?: (error: Error) => void
+  baseUrl: string;
+  getToken: () => Promise<{ token: string; expiresIn: number }>;
+  helpScreenId: string;
+  user?: UserData;
+  theme?: Partial<Theme>;
+  onMessageReceived?: (message: Message) => void;
+  onSessionClosed?: () => void;
+  onError?: (error: Error) => void;
 }
 
 export interface HelpScreenOption {
-  id: string
-  title: string
-  paragraphs?: string[]
-  nestedOptions?: HelpScreenOption[]
-  chatWithUs?: boolean
+  id: string;
+  title: string;
+  paragraphs?: string[];
+  nestedOptions?: HelpScreenOption[];
+  chatWithUs?: boolean;
 }
 
 export interface HelpScreen {
-  id: string
-  title: string
-  options: HelpScreenOption[]
+  id: string;
+  title: string;
+  options: HelpScreenOption[];
 }
 
 export interface ApiResponse<T> {
-  data: T
-  success: boolean
-  error?: string
+  data: T;
+  success: boolean;
+  error?: string;
 }
 
 export interface TokenResponse {
-  token: string
-  expiresIn: number
+  token: string;
+  expiresIn: number;
 }
 
 export interface HelpScreenData {
-  id: string
-  tenantId: string
+  id: string;
+  tenantId: string;
   tenant: {
-    id: string
-    name: string
-    key: string
-  }
-  title: string
-  description: string
-  options: Option[]
-  chatWithUs: boolean
+    id: string;
+    name: string;
+    key: string;
+  };
+  title: string;
+  description: string;
+  options: Option[];
+  chatWithUs: boolean;
 }
 
 export interface Option {
-  id: string
-  helpScreenId: string
-  parentOptionId: string | null
-  parentOption: Option | null
-  files: any[]
-  nestedOptions: Option[]
-  title: string
-  paragraphs: string[]
-  chatWithUs: boolean
-  assistantId?: string
+  id: string;
+  helpScreenId: string;
+  parentOptionId: string | null;
+  parentOption: Option | null;
+  files: any[];
+  nestedOptions: Option[];
+  title: string;
+  paragraphs: string[];
+  chatWithUs: boolean;
+  assistantId?: string;
   assistant?: {
-    id: string
-    tenantId: string
+    id: string;
+    tenantId: string;
     tenant: {
-      id: string
-      name: string
-      key: string
-    }
-    name: string
-    openAIAssistantId: string
-    greeting: string
-    closing: string
-  }
-  hasNestedOptions: boolean
-  order: number
+      id: string;
+      name: string;
+      key: string;
+    };
+    name: string;
+    openAIAssistantId: string;
+    greeting: string;
+    closing: string;
+  };
+  hasNestedOptions: boolean;
+  order: number;
 }
 
 export interface ReviewProps {
-  comment: string
-  rating: number
+  comment: string;
+  rating: number;
+}
+
+export interface PresignUploadRequestDto {
+  name: string;
+  contentType: string;
+  sizeBytes: number;
+  pathData: {
+    type: number;
+    chatSessionId: string;
+  };
+}
+
+export interface PresignUploadResponse {
+  id: string;
+  uploadUrl: string;
+  path: string;
+  expiresAt: string;
+}
+
+export interface PresignDownloadResponse {
+  id: string;
+  name: string;
+  downloadUrl: string;
+  contentType: string;
+  expiresAt: string;
 }

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

@@ -1,37 +1,274 @@
+import React, { useRef, useState, useCallback } from 'react';
+import axios from 'axios';
 import { Button } from '@/components';
+import { ImagePreviewDialog } from '@/components/ui';
 import EnvelopeIcon from './../../../assets/icons/envelope.svg';
+import PaperclipIcon from './../../../assets/icons/paperclip.svg';
+import XIcon from './../../../assets/icons/x.svg';
 import { useLocalTranslation } from '../../../useLocalTranslation';
+import { presignUpload } from '@/core/api';
+
+interface SelectedFileDto {
+  file: File;
+  previewUrl: string;
+  uploading: boolean;
+  uploadedId: string | null;
+  error: string | null;
+}
 
 interface ChatWindowFooterProps {
   inputMessage: string;
   setInputMessage: (e: string) => void;
-  handleKeyDown: (e: React.KeyboardEvent) => void;
-  handleSendMessage: () => void;
+  handleSendMessage: (attachmentIds: string[]) => void;
   isLoading: boolean;
+  onEnsureSession: () => Promise<string>;
 }
 
 const ChatWindowFooter: React.FC<ChatWindowFooterProps> = (props) => {
-  const { t, dir } = useLocalTranslation();
-  
+  const { t, dir, i18n } = useLocalTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [selectedFiles, setSelectedFiles] = useState<SelectedFileDto[]>([]);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+
+  const handleAttachClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileSelect = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+
+    // Validate that all files are images
+    const imageFiles = files.filter((file) => file.type.startsWith('image/'));
+
+    // Only image files are allowed
+
+    // Create preview URLs and add to selected files
+    const newFiles: SelectedFileDto[] = imageFiles.map((file) => ({
+      file,
+      previewUrl: URL.createObjectURL(file),
+      uploading: false,
+      uploadedId: null,
+      error: null,
+    }));
+
+    setSelectedFiles((prev) => [...prev, ...newFiles]);
+
+    // Clear the input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+
+    // Start uploading immediately
+    await handleUploadFiles(newFiles);
+  }, []);
+
+  const handleUploadFiles = useCallback(
+    async (filesToUpload: SelectedFileDto[]) => {
+      // Get session ID
+      let sessionId: string;
+      try {
+        sessionId = await props.onEnsureSession();
+      } catch (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
+      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
+          // Important: Content-Type must match the file type (e.g., 'image/png'), not 'multipart/form-data'
+          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}`);
+          }
+
+          // Update with uploaded ID
+          setSelectedFiles((prev) =>
+            prev.map((f) =>
+              f.previewUrl === fileDto.previewUrl
+                ? { ...f, uploading: false, uploadedId: presignResponse.id, error: null }
+                : f
+            )
+          );
+        } catch (error) {
+          setSelectedFiles((prev) =>
+            prev.map((f) =>
+              f.previewUrl === fileDto.previewUrl
+                ? { ...f, uploading: false, error: 'Upload failed', uploadedId: null }
+                : f
+            )
+          );
+        }
+      }
+    },
+    [props.onEnsureSession, i18n.language]
+  );
+
+  const handleRemoveFile = useCallback((previewUrl: string) => {
+    setSelectedFiles((prev) => {
+      const fileToRemove = prev.find((f) => f.previewUrl === previewUrl);
+      if (fileToRemove) {
+        URL.revokeObjectURL(fileToRemove.previewUrl);
+      }
+      return prev.filter((f) => f.previewUrl !== previewUrl);
+    });
+  }, []);
+
+  const handleSendMessageWithAttachments = useCallback(() => {
+    // Only allow sending if all files have finished uploading (either successfully or with error)
+    const hasUploadingFiles = selectedFiles.some((f) => f.uploading);
+    if (hasUploadingFiles) {
+      return; // Prevent sending if any files are still uploading
+    }
+
+    // Get all successfully uploaded file IDs
+    const attachmentIds = selectedFiles.filter((f) => f.uploadedId !== null).map((f) => f.uploadedId as string);
+
+    // Call the original send message with attachment IDs
+    props.handleSendMessage(attachmentIds);
+
+    // Clear selected files and revoke URLs
+    selectedFiles.forEach((f) => URL.revokeObjectURL(f.previewUrl));
+    setSelectedFiles([]);
+  }, [selectedFiles, props]);
+
+  // Check if any files are currently uploading
+  const hasUploadingFiles = selectedFiles.some((f) => f.uploading);
+
+  // Check if there are files that haven't finished (no uploadedId, no error, not uploading)
+  // This shouldn't happen in normal flow, but we check for safety
+  const hasPendingFiles = selectedFiles.some((f) => !f.uploading && f.uploadedId === null && f.error === null);
+
+  // Check if all files have errors (no successful uploads)
+  const hasSuccessfulUploads = selectedFiles.some((f) => f.uploadedId !== null);
+  const allFilesHaveErrors =
+    selectedFiles.length > 0 && !hasSuccessfulUploads && !hasUploadingFiles && !hasPendingFiles;
+
+  const isSendDisabled =
+    props.isLoading || props.inputMessage.trim() === '' || hasUploadingFiles || hasPendingFiles || allFilesHaveErrors;
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (!isSendDisabled) {
+          handleSendMessageWithAttachments();
+        }
+      }
+    },
+    [isSendDisabled, handleSendMessageWithAttachments]
+  );
+
   return (
-    <footer className='babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white dark:!babylai-bg-storm-dust-900 babylai-mx-4 md:babylai-mx-6 md:babylai-py-3 md:babylai-px-4'>
-      <input
-        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 dark:babylai-text-white babylai-border-none'
-      />
-      <Button
-        variant='default'
-        size='icon'
-        onClick={props.handleSendMessage}
-        disabled={props?.isLoading}
-        className='babylai-rounded-full babylai-bg-primary-500 babylai-hover:babylai-bg-purple-600 babylai-w-8 babylai-h-8 disabled:babylai-opacity-50'
-      >
-        <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />
-      </Button>
+    <footer className='babylai-flex babylai-flex-col babylai-gap-2 babylai-mx-4 md:babylai-mx-6'>
+      {selectedFiles.length > 0 && (
+        <div className='babylai-flex babylai-gap-2 babylai-flex-wrap babylai-p-2 babylai-bg-white dark:!babylai-bg-storm-dust-900 babylai-rounded-lg'>
+          {selectedFiles.map((file) => (
+            <div key={file.previewUrl} className='babylai-relative babylai-group'>
+              <img
+                src={file.previewUrl}
+                alt='Preview'
+                className='babylai-w-16 babylai-h-16 babylai-object-cover babylai-rounded-lg babylai-border babylai-border-black-white-200 babylai-cursor-pointer hover:babylai-opacity-80 babylai-transition-opacity'
+                onClick={() => setPreviewImage(file.previewUrl)}
+                role='button'
+                aria-label='Click to preview image'
+              />
+              {file.uploading && (
+                <div className='babylai-absolute babylai-inset-0 babylai-flex babylai-items-center babylai-justify-center babylai-bg-black babylai-bg-opacity-50 babylai-rounded-lg'>
+                  <div className='babylai-animate-spin babylai-rounded-full babylai-h-6 babylai-w-6 babylai-border-2 babylai-border-white babylai-border-t-transparent'></div>
+                </div>
+              )}
+              {file.error && (
+                <div className='babylai-absolute babylai-inset-0 babylai-flex babylai-items-center babylai-justify-center babylai-bg-red-500 babylai-bg-opacity-70 babylai-rounded-lg'>
+                  <span className='babylai-text-white babylai-text-xs'>Error</span>
+                </div>
+              )}
+              <button
+                onClick={() => handleRemoveFile(file.previewUrl)}
+                className='babylai-absolute -babylai-top-2 -babylai-right-2 babylai-bg-red-500 babylai-text-white babylai-rounded-full babylai-w-5 babylai-h-5 babylai-flex babylai-items-center babylai-justify-center babylai-opacity-0 group-hover:babylai-opacity-100 babylai-transition-opacity'
+                type='button'
+                aria-label='Remove image'
+              >
+                <XIcon className='babylai-w-3 babylai-h-3' />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className='babylai-flex babylai-items-center babylai-gap-2 babylai-relative babylai-rounded-full babylai-bg-white dark:!babylai-bg-storm-dust-900 babylai-py-1 babylai-px-2 md:babylai-py-3 md:babylai-px-4'>
+        <input
+          type='file'
+          ref={fileInputRef}
+          onChange={handleFileSelect}
+          accept='image/*'
+          multiple
+          className='babylai-hidden'
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={handleAttachClick}
+          disabled={props.isLoading}
+          className='babylai-rounded-full babylai-w-8 babylai-h-8 babylai-text-black-white-500 hover:babylai-text-primary-500 hover:babylai-bg-transparent'
+          type='button'
+        >
+          <PaperclipIcon className='babylai-w-4 babylai-h-4' />
+        </Button>
+        <input
+          type='text'
+          value={props.inputMessage}
+          onChange={(e) => props.setInputMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={t('homeSdk.placeholder')}
+          className='babylai-flex-1 babylai-py-2 babylai-px-2 babylai-bg-transparent babylai-outline-none babylai-text-sm dark:babylai-text-white babylai-border-none'
+        />
+        <Button
+          variant='default'
+          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'
+          type='button'
+        >
+          <EnvelopeIcon className={`babylai-w-4 babylai-h-4 ${dir === 'rtl' ? 'babylai-rotate-270' : ''}`} />
+        </Button>
+      </div>
+
+      {/* Image Preview Dialog */}
+      {previewImage && (
+        <ImagePreviewDialog
+          imageUrls={[previewImage]}
+          initialIndex={0}
+          isOpen={!!previewImage}
+          onClose={() => setPreviewImage(null)}
+          alt='Image preview'
+        />
+      )}
     </footer>
   );
 };