@repzo/widget-react-native 1.3.0 → 1.4.0

package/src/attachments/pickers.ts

@@ -1,6 +1,10 @@
 /**
- * Visitor attachments: picking photos/files and turning them into the base64
- * data URLs `POST /api/widget/messages` accepts.
+ * Visitor attachments: picking photos/files for `POST /api/widget/messages`.
+ *
+ * A server that takes uploads names its cap (`maxAttachmentBytes`): a picked
+ * file then stays a local URI, which the composer uploads right away. An
+ * older server only takes files inline, as base64 data URLs within the
+ * 1.5 MB / 6 MB caps below.
  *
  * The SDK ships no native code, so every picker is borrowed from the host —
  * the same approach as `storage.ts` and `native-gradient.ts`:
@@ -8,7 +12,7 @@
  * - `expo-document-picker` → any file
  * - `expo-file-system` → reads a picked file as base64 (optional; without it
  *   the file is read through `fetch` + `FileReader`)
- * - `expo-image-manipulator` → shrinks photos to fit the 1.5 MB cap (optional;
+ * - `expo-image-manipulator` → shrinks photos, to fit the 1.5 MB inline cap (optional;
  *   without it a full-resolution camera photo is usually refused as too large)
  *
  * A host without those (or with `react-native-image-picker` etc.) plugs its own
@@ -20,13 +24,14 @@
  */
 
 import type { AttachmentSource, RepzoPickedFile, RepzoWidgetAttachmentOptions } from '../types';
+import { measureFileSize, validSize } from './file-size';
 
 /** The server keeps the first five and silently drops the rest. */
 export const MAX_ATTACHMENTS = 5;
-/** Per file, decoded. The server silently drops anything larger. */
+/** Per inline file, decoded. The server silently drops anything larger. */
 export const MAX_ATTACHMENT_BYTES = 1_500_000;
 /**
- * All files in one message, decoded. Base64 inside JSON inflates bytes by
+ * All inline files in one message, decoded. Base64 inside JSON inflates bytes by
  * ~1.37x and the server caps a request body at 10 MB, so five files at the
  * per-file maximum would come back as a 413.
  */
@@ -35,17 +40,28 @@ export const MAX_TOTAL_ATTACHMENT_BYTES = 6_000_000;
 /** Photos are re-encoded at this JPEG quality — small enough to fit the cap more often. */
 const IMAGE_QUALITY = 0.7;
 
-/** A picked file, encoded and ready to send; what the composer shows as a chip. */
+/** A picked file, ready to send; what the composer shows as a chip. */
 export interface DraftAttachment {
   id: string;
   name: string;
   contentType: string;
   /** Decoded bytes — what the server measures against its cap. */
   size: number;
-  /** `data:<mime>;base64,<…>` — the wire format. */
+  /** `data:<mime>;base64,<…>` for an inline file; empty when `fileUri` is uploaded instead. */
   dataUrl: string;
+  /** The local file uploaded ahead of the message. */
+  fileUri?: string;
   /** What `<Image>` renders locally: the picked file's URI, else the data URL. */
   previewUri: string;
+  /**
+   * Where `fileUri`'s upload stands. The composer starts it as soon as the
+   * file is picked and holds Send until every file is up. Absent for inline files.
+   */
+  uploadStatus?: 'uploading' | 'uploaded' | 'failed';
+  /** What the message names the uploaded file by, once `uploadStatus` is `uploaded`. */
+  uploadToken?: string;
+  /** When `uploadToken` stops working, on this phone's clock (ms). */
+  uploadExpiresAt?: number;
 }
 
 /** Why some (or all) of a pick didn't make it into the composer. */
@@ -113,6 +129,11 @@ export function setAttachmentOptions(options: RepzoWidgetAttachmentOptions | nul
   hostOptions = options;
 }
 
+/** Whether a picked file starts uploading before Send (`attachments.uploadOnPick`). */
+export function uploadsOnPick(): boolean {
+  return hostOptions?.uploadOnPick !== false;
+}
+
 const ALL_SOURCES: AttachmentSource[] = ['photo', 'camera', 'file'];
 
 /**
@@ -139,11 +160,13 @@ const CAMERA_DENIED = 'cameraDenied' as const;
 
 /**
  * Opens the picker for `source` and returns what fits alongside `current`.
+ * `uploadLimit` is the server's upload cap; without it files go inline.
  * Never throws: a cancelled pick is `{ added: [], problem: null }`.
  */
 export async function pickAttachments(
   source: AttachmentSource,
-  current: DraftAttachment[]
+  current: DraftAttachment[],
+  uploadLimit: number | null = null
 ): Promise<PickResult> {
   const slots = MAX_ATTACHMENTS - current.length;
   if (slots <= 0) return { added: [], problem: 'tooMany' };
@@ -152,7 +175,7 @@ export async function pickAttachments(
   try {
     picked = hostOptions?.pick
       ? await hostOptions.pick(source)
-      : await launchBuiltInPicker(source, slots);
+      : await launchBuiltInPicker(source, slots, !!uploadLimit);
   } catch (error) {
     console.warn('[repzo-widget] attachment picker failed', error);
     return { added: [], problem: 'failed' };
@@ -170,8 +193,9 @@ export async function pickAttachments(
     }
     // A size the picker already knows rules a file out before it's read, so
     // a 40 MB video never lands in memory as a base64 string.
-    const declared = file.base64 ? null : validSize(file.size);
-    const early = declared === null ? null : checkAttachmentFits(accepted, declared);
+    const uploads = !!uploadLimit && !!file.uri;
+    const declared = file.base64 && !uploads ? null : validSize(file.size);
+    const early = declared === null ? null : checkAttachmentFits(accepted, declared, uploads ? uploadLimit : null);
     if (early) {
       problem = problem ?? early;
       continue;
@@ -179,7 +203,7 @@ export async function pickAttachments(
 
     let draft: DraftAttachment;
     try {
-      draft = await toDraft(file);
+      draft = uploads ? await toUploadDraft(file, uploadLimit!) : await toDraft(file);
     } catch (error) {
       if (error === TOO_LARGE) {
         problem = problem ?? 'tooLarge';
@@ -189,7 +213,8 @@ export async function pickAttachments(
       problem = problem ?? 'failed';
       continue;
     }
-    const fits = draft.size > 0 ? checkAttachmentFits(accepted, draft.size) : 'failed';
+    const fits =
+      draft.size > 0 ? checkAttachmentFits(accepted, draft.size, uploads ? uploadLimit : null) : 'failed';
     if (fits) {
       problem = problem ?? fits;
       continue;
@@ -201,7 +226,8 @@ export async function pickAttachments(
 
 async function launchBuiltInPicker(
   source: AttachmentSource,
-  slots: number
+  slots: number,
+  uploads: boolean
 ): Promise<RepzoPickedFile[] | null | typeof CAMERA_DENIED> {
   if (source === 'file') {
     if (!documentPicker) return null;
@@ -224,9 +250,10 @@ async function launchBuiltInPicker(
   if (!imagePicker) return null;
   const options = {
     quality: IMAGE_QUALITY,
-    // With the manipulator the photo is re-encoded below, so the picker's own
-    // (full-resolution) base64 would only waste memory.
-    base64: !imageManipulator,
+    // With the manipulator the photo is re-encoded below, and an uploaded
+    // photo is read from its file, so the picker's own (full-resolution)
+    // base64 would only waste memory.
+    base64: !uploads && !imageManipulator,
     exif: false,
   };
 
@@ -246,7 +273,7 @@ async function launchBuiltInPicker(
   const assets: any[] = Array.isArray(result?.assets) ? result.assets : [];
   const files: RepzoPickedFile[] = [];
   for (const [index, asset] of assets.slice(0, slots).entries()) {
-    const shrunk = await shrinkPhoto(asset);
+    const shrunk = await shrinkPhoto(asset, !uploads);
     const type = shrunk
       ? 'image/jpeg'
       : asset.mimeType || guessContentType(asset.fileName || asset.uri) || 'image/jpeg';
@@ -254,7 +281,7 @@ async function launchBuiltInPicker(
     files.push({
       name: `${baseName}.${extensionFor(type)}`,
       type,
-      // No `size`: `fileSize` is the original's, not the re-encoded base64's.
+      // No `size`: `fileSize` is the original's, not the re-encoded file's.
       uri: shrunk?.uri ?? asset.uri,
       base64: shrunk?.base64 ?? asset.base64 ?? undefined,
     });
@@ -282,7 +309,10 @@ async function launchImagePicker(launch: (options: object) => Promise<any>, opti
  * MAX_IMAGE_EDGE. Null when the manipulator isn't installed or fails — the
  * caller then falls back to the picker's own output (and the size check).
  */
-async function shrinkPhoto(asset: any): Promise<{ uri: string; base64: string } | null> {
+async function shrinkPhoto(
+  asset: any,
+  withBase64: boolean
+): Promise<{ uri: string; base64?: string } | null> {
   if (!imageManipulator || !asset?.uri) return null;
   const width = Number(asset.width) || 0;
   const height = Number(asset.height) || 0;
@@ -296,7 +326,7 @@ async function shrinkPhoto(asset: any): Promise<{ uri: string; base64: string }
   const saveOptions = {
     compress: IMAGE_QUALITY,
     format: imageManipulator.SaveFormat?.JPEG ?? 'jpeg',
-    base64: true,
+    base64: withBase64,
   };
   try {
     let output: any;
@@ -308,6 +338,7 @@ async function shrinkPhoto(asset: any): Promise<{ uri: string; base64: string }
       const image = await context.renderAsync();
       output = await image.saveAsync(saveOptions);
     }
+    if (!withBase64) return typeof output?.uri === 'string' && output.uri ? { uri: output.uri } : null;
     return typeof output?.base64 === 'string' && output.base64
       ? { uri: output.uri ?? asset.uri, base64: output.base64 }
       : null;
@@ -340,6 +371,32 @@ async function toDraft(file: RepzoPickedFile): Promise<DraftAttachment> {
   };
 }
 
+/** A file that's uploaded on its own, ahead of the message: only its size is read here. */
+async function toUploadDraft(file: RepzoPickedFile, uploadLimit: number): Promise<DraftAttachment> {
+  const uri = file.uri!;
+  const size = validSize(file.size) ?? (await readFileSize(uri));
+  if (size > uploadLimit) throw TOO_LARGE;
+  const name = (file.name || fileNameFromUri(uri) || 'file').slice(0, 255);
+  return {
+    id: `draft-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    name,
+    contentType: normalizeContentType(file.type) ?? guessContentType(name) ?? 'application/octet-stream',
+    size,
+    dataUrl: '',
+    fileUri: uri,
+    previewUri: uri,
+  };
+}
+
+/** A local file's size in bytes, or 0 when nothing can tell. */
+async function readFileSize(uri: string): Promise<number> {
+  const size = await measureFileSize(uri);
+  if (size !== null) return size;
+  // Last resort: the native blob reads the whole file (on Android, into memory).
+  const blob = await (await fetch(uri)).blob();
+  return validSize(blob.size) ?? 0;
+}
+
 /** Thrown (by identity) when a file is over the per-file cap before it's read. */
 const TOO_LARGE = new Error('File exceeds the attachment cap');
 
@@ -407,14 +464,20 @@ async function readBase64WithFetch(uri: string): Promise<string> {
 
 // ─── Pure helpers ──────────────────────────────────────────────────────────
 
-/** Null when a file of `size` bytes still fits beside `current`; otherwise the limit it breaks. */
+/**
+ * Null when a file of `size` bytes still fits beside `current`; otherwise the
+ * limit it breaks. With `uploadLimit` the file is uploaded on its own, so
+ * only its own size counts; inline files also share one request body.
+ */
 export function checkAttachmentFits(
-  current: ReadonlyArray<{ size: number }>,
-  size: number
+  current: ReadonlyArray<{ size: number; fileUri?: string }>,
+  size: number,
+  uploadLimit: number | null = null
 ): AttachmentProblem | null {
   if (current.length >= MAX_ATTACHMENTS) return 'tooMany';
+  if (uploadLimit) return size > uploadLimit ? 'tooLarge' : null;
   if (size > MAX_ATTACHMENT_BYTES) return 'tooLarge';
-  const total = current.reduce((sum, item) => sum + item.size, 0);
+  const total = current.filter((item) => !item.fileUri).reduce((sum, item) => sum + item.size, 0);
   if (total + size > MAX_TOTAL_ATTACHMENT_BYTES) return 'tooLargeTogether';
   return null;
 }
@@ -462,10 +525,6 @@ export function isImageAttachment(contentType: string | null | undefined): boole
   return !!contentType && contentType.toLowerCase().startsWith('image/');
 }
 
-function validSize(size: unknown): number | null {
-  return typeof size === 'number' && Number.isFinite(size) && size > 0 ? size : null;
-}
-
 function fileNameFromUri(uri: string | undefined): string | null {
   if (!uri) return null;
   const last = uri.split(/[?#]/)[0]?.split('/').pop();
@@ -501,7 +560,8 @@ const CONTENT_TYPES: Record<string, string> = {
   mov: 'video/quicktime',
 };
 
-function guessContentType(nameOrUri: string | null | undefined): string | null {
+/** The type a file name's extension implies, or null for one this table doesn't know. */
+export function guessContentType(nameOrUri: string | null | undefined): string | null {
   const extension = /\.([a-z0-9]+)$/i.exec(nameOrUri?.split(/[?#]/)[0] ?? '')?.[1];
   return extension ? (CONTENT_TYPES[extension.toLowerCase()] ?? null) : null;
 }

package/src/i18n.ts

@@ -59,6 +59,14 @@ export const DEFAULT_LABELS = {
   loadEarlier: 'Load earlier messages',
   emptyConversation: 'Send a message to start the conversation',
   messagePlaceholder: 'Type a message...',
+  // Screen-reader label of the send button beside the message field.
+  sendMessage: 'Send message',
+  // Screen-reader labels of the button that returns to the newest message
+  // after scrolling up; the second when teammates replied in the meantime.
+  jumpToLatest: 'Jump to latest messages',
+  jumpToLatestNew: 'New messages: {count}. Jump to latest',
+  // Screen readers, on the last tile of a photo album showing "+{count}".
+  morePhotos: '{count} more photos',
   attachFile: 'Attach file',
   // Attach menu, composer chips and the notices under them.
   attachPhotoLibrary: 'Photo library',
@@ -70,6 +78,11 @@ export const DEFAULT_LABELS = {
   attachmentsTooLargeTogether:
     'Attachments are too large to send together — send some in another message',
   attachmentFailed: "Couldn't attach that file",
+  // A picked file uploads before Send is enabled. Screen-reader labels for its
+  // chip while it uploads and after it failed, then the notice for a failure.
+  attachmentUploading: 'Uploading {name}',
+  attachmentUploadFailed: "Couldn't upload {name}. Tap to try again",
+  attachmentsUploadFailed: "Couldn't upload a file. Tap it to try again",
   // A file in a message; tapping opens it. `{name}` is the file name.
   openAttachment: 'Open {name}',
   // Voice notes played in the chat (with expo-audio).
@@ -79,9 +92,13 @@ export const DEFAULT_LABELS = {
   // Full-screen image viewer.
   imageLoadFailed: "Couldn't load this image",
   openImageExternally: 'Open image',
+  // Screen readers: which of a message's photos is open.
+  imagePosition: '{current} of {total}',
   cameraPermissionDenied: 'Allow camera access in Settings to take a photo',
   cancel: 'Cancel',
   failedToSend: 'Failed to send',
+  // After "Failed to send" under a message the visitor can send again.
+  tapToRetry: 'Tap to retry',
   thinking: 'Typing',
   messages: 'Messages',
   noMessages: 'No messages yet',
@@ -91,13 +108,17 @@ export const DEFAULT_LABELS = {
   preChatSubtitle: 'Let us know a bit about you so we can help you better.',
   preChatSkip: 'Skip',
   preChatSubmit: 'Start chat',
-  viewPreviousConversations: 'View previous conversations',
-  homeRecentTitle: 'Recent',
-  homeViewAllCount: 'View all ({count})',
+  // Heading of Home's card that shows the newest conversation.
+  homeRecentMessageTitle: 'Recent message',
   homeNoConversations: 'Your conversations will show up here',
   homeStatusOnline: "We're online",
   homeStatusAway: "We're away",
   unreadBadge: '{count} unread',
+  // A conversation row whose newest message was only photos, or other files.
+  lastMessagePhoto: 'Photo',
+  lastMessageFile: 'File',
+  // Before the visitor's own newest message in a conversation row.
+  lastMessageYou: 'You: {message}',
   team: 'Team',
   home: 'Home',
   close: 'Close',

package/src/locales.ts

@@ -20,6 +20,10 @@ const ar: LabelMap = {
   loadEarlier: 'تحميل الرسائل السابقة',
   emptyConversation: 'أرسل رسالة لبدء المحادثة',
   messagePlaceholder: 'اكتب رسالة...',
+  sendMessage: 'إرسال الرسالة',
+  jumpToLatest: 'الانتقال إلى أحدث الرسائل',
+  jumpToLatestNew: 'رسائل جديدة: {count}. الانتقال إلى الأحدث',
+  morePhotos: 'صور أخرى: {count}',
   attachFile: 'إرفاق ملف',
   attachPhotoLibrary: 'مكتبة الصور',
   attachTakePhoto: 'التقاط صورة',
@@ -29,15 +33,20 @@ const ar: LabelMap = {
   attachmentTooMany: 'يمكنك إرفاق {count} ملفات كحد أقصى',
   attachmentsTooLargeTogether: 'المرفقات كبيرة جدًا لإرسالها معًا — أرسل بعضها في رسالة أخرى',
   attachmentFailed: 'تعذر إرفاق هذا الملف',
+  attachmentUploading: 'جارٍ رفع {name}',
+  attachmentUploadFailed: 'تعذر رفع {name}. اضغط لإعادة المحاولة',
+  attachmentsUploadFailed: 'تعذر رفع ملف. اضغط عليه لإعادة المحاولة',
   openAttachment: 'فتح {name}',
   voicePlay: 'تشغيل الرسالة الصوتية',
   voicePause: 'إيقاف الرسالة الصوتية مؤقتًا',
   voiceSpeed: 'سرعة التشغيل',
   imageLoadFailed: 'تعذر تحميل هذه الصورة',
   openImageExternally: 'فتح الصورة',
+  imagePosition: '{current} من {total}',
   cameraPermissionDenied: 'اسمح بالوصول إلى الكاميرا من الإعدادات لالتقاط صورة',
   cancel: 'إلغاء',
   failedToSend: 'تعذر الإرسال',
+  tapToRetry: 'اضغط لإعادة المحاولة',
   thinking: 'يكتب',
   messages: 'الرسائل',
   noMessages: 'لا توجد رسائل بعد',
@@ -47,13 +56,14 @@ const ar: LabelMap = {
   preChatSubtitle: 'أخبرنا قليلاً عنك حتى نتمكن من مساعدتك بشكل أفضل.',
   preChatSkip: 'تخطٍ',
   preChatSubmit: 'ابدأ المحادثة',
-  viewPreviousConversations: 'عرض المحادثات السابقة',
-  homeRecentTitle: 'الأحدث',
-  homeViewAllCount: 'عرض الكل ({count})',
+  homeRecentMessageTitle: 'أحدث رسالة',
   homeNoConversations: 'ستظهر محادثاتك هنا',
   homeStatusOnline: 'نحن متصلون',
   homeStatusAway: 'نحن غير متصلين',
   unreadBadge: '{count} غير مقروءة',
+  lastMessagePhoto: 'صورة',
+  lastMessageFile: 'ملف',
+  lastMessageYou: 'أنت: {message}',
   team: 'الفريق',
   home: 'الرئيسية',
   close: 'إغلاق',