@repzo/widget-react-native 1.3.1 → 1.4.0

package/lib/typescript/module/ui/screens/home/HomeView.types.d.ts

@@ -1,11 +1,10 @@
 /** Props and label bundle for the Home space. */
 import type { Conversation, WidgetConfig } from '../../../types';
+import type { LastMessageLabels } from '../../components/ConversationRow';
 import type { RelativeTimeLabels, TeamAgent } from '../../utils/conversations';
 export interface HomeViewLabels {
     close: string;
-    /** Accessibility label for the "view all" control. */
-    viewPrevious: string;
-    viewAll: string;
+    /** Heading inside the "Recent message" card. */
     recentTitle: string;
     noConversations: string;
     statusOnline: string;
@@ -15,14 +14,15 @@ export interface HomeViewLabels {
     time: RelativeTimeLabels;
     /** Template with a `{count}` token. */
     unread: string;
+    lastMessage: LastMessageLabels;
 }
 export interface HomeViewProps {
     config: WidgetConfig | null;
     color: string;
     visitorName?: string;
     conversationCount: number;
-    /** Already sorted newest-first and capped by the provider. */
-    recentConversations: Conversation[];
+    /** The newest conversation, picked by the provider; none before the first one. */
+    recentConversation?: Conversation;
     unreadByConversation: Record<string, number>;
     teamAgents: TeamAgent[];
     isOnline: boolean;
@@ -34,7 +34,6 @@ export interface HomeViewProps {
     labels: HomeViewLabels;
     onClose: () => void;
     onStartConversation: () => void;
-    onViewConversations: () => void;
     onOpenConversation: (conversationId: string) => void;
 }
 //# sourceMappingURL=HomeView.types.d.ts.map

package/lib/typescript/module/ui/screens/home/HomeView.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomeView.types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/home/HomeView.types.ts"],"names":[],"mappings":"AAAA,iDAAiD;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE/E,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,kBAAkB,CAAC;IACzB,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,8DAA8D;IAC9D,mBAAmB,EAAE,YAAY,EAAE,CAAC;IACpC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,yBAAyB,EAAE,OAAO,CAAC;IACnC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,kBAAkB,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD"}
+{"version":3,"file":"HomeView.types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/home/HomeView.types.ts"],"names":[],"mappings":"AAAA,iDAAiD;AAEjD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE/E,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,kBAAkB,CAAC;IACzB,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,iBAAiB,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAClC,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,yBAAyB,EAAE,OAAO,CAAC;IACnC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,kBAAkB,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD"}

package/lib/typescript/module/ui/utils/html.d.ts

@@ -6,6 +6,11 @@
 export declare function decodeEntities(text: string): string;
 /** Block-level tags become newlines so paragraphs survive the strip. */
 export declare function stripHtml(html: string): string;
+/**
+ * Agent reply HTML → the Markdown subset `Markdown` draws: paragraphs, line
+ * breaks, lists, bold, italic, inline code and links. Other tags keep their text.
+ */
+export declare function htmlToMarkdown(html: string): string;
 /** Single-line flattening used for campaign cards and list snippets. */
 export declare function htmlToText(html: string): string;
 //# sourceMappingURL=html.d.ts.map

package/lib/typescript/module/ui/utils/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../../../src/ui/utils/html.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAoBH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAInD;AAED,wEAAwE;AACxE,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAW9C;AAED,wEAAwE;AACxE,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAU/C"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../../../src/ui/utils/html.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAoBH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAInD;AAED,wEAAwE;AACxE,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAW9C;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAoBnD;AAED,wEAAwE;AACxE,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAU/C"}

package/lib/typescript/module/ui/utils/image-load-queue.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Lets images load a few at a time, highest priority first. The chat runs its
+ * large images through it: Android holds a whole download in a memory pool
+ * capped at three quarters of the app's heap (192 MB on a 256 MB phone), so
+ * several 30–50 MB photos at once overflow it and every one of them fails.
+ *
+ * No `react-native` import on purpose: it stays testable in plain Node.
+ */
+export declare class ImageLoadQueue {
+    private readonly concurrency;
+    private readonly waiting;
+    private readonly loading;
+    private readonly done;
+    /** The images on screen; null until the list says, so all of them count. */
+    private onScreen;
+    private readonly listeners;
+    private scheduled;
+    constructor(concurrency: number);
+    /** Queues a mounted image; the returned cleanup gives up its place. */
+    add(key: string, priority: number): () => void;
+    /** Loaded or failed: it keeps showing, and the next image may start. */
+    finish(key: string): void;
+    canLoad: (key: string) => boolean;
+    subscribe: (listener: () => void) => (() => void);
+    /**
+     * The images now on screen. One that scrolls off before it has loaded
+     * gives up its place and waits, so it can't hold up the ones in view:
+     * Android detaches a row scrolled out of view, and a detached image never
+     * finishes loading. Only images on screen are started.
+     */
+    setOnScreen(keys: Iterable<string>): void;
+    /** Scrolled out of the list before it loaded: it queues again if it comes back. */
+    private remove;
+    /**
+     * Hands out places once the render that mounted an image is done, so all
+     * the images mounted together are queued first, whatever order they
+     * mounted in.
+     */
+    private schedule;
+    /** Starts what fits; true when anything started (listeners were told). */
+    private advance;
+    private notify;
+}
+//# sourceMappingURL=image-load-queue.d.ts.map

package/lib/typescript/module/ui/utils/image-load-queue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-load-queue.d.ts","sourceRoot":"","sources":["../../../../../src/ui/utils/image-load-queue.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,qBAAa,cAAc;IAUb,OAAO,CAAC,QAAQ,CAAC,WAAW;IARxC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA6B;IACrD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA6B;IACrD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAqB;IAC1C,4EAA4E;IAC5E,OAAO,CAAC,QAAQ,CAAoC;IACpD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,SAAS,CAAS;gBAEG,WAAW,EAAE,MAAM;IAEhD,uEAAuE;IACvE,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,IAAI;IAQ9C,wEAAwE;IACxE,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAMzB,OAAO,GAAI,KAAK,MAAM,KAAG,OAAO,CAAgD;IAEhF,SAAS,GAAI,UAAU,MAAM,IAAI,KAAG,CAAC,MAAM,IAAI,CAAC,CAK9C;IAEF;;;;;OAKG;IACH,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,IAAI;IAYzC,mFAAmF;IACnF,OAAO,CAAC,MAAM;IAKd;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAShB,0EAA0E;IAC1E,OAAO,CAAC,OAAO;IAoBf,OAAO,CAAC,MAAM;CAGf"}

package/lib/typescript/module/ui/utils/inline-attachments.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Agent replies with images between their paragraphs. Workstation marks such
+ * images `inline` among the message's attachments and keeps an `<img>` for
+ * each in the HTML body, where the teammate put it. Same split as the web
+ * Messenger, so both show the text and images in the order they were written.
+ */
+import type { WidgetAttachment } from '../../types';
+/** Markdown for the bubble to draw, or one attachment. */
+export type MessagePart = {
+    text: string;
+} | {
+    attachment: WidgetAttachment;
+};
+/**
+ * The body and its inline images in order, plus the other attachments
+ * (`files`) that show after them. Null when nothing is inline: the bubble then
+ * shows the body, followed by every attachment.
+ *
+ * An `<img>` finds its attachment by the id in its URL. In a body whose
+ * images carry no ids, they take the attachments in order instead; in one
+ * that does, an image without an id (a logo, an emoji) isn't one of the files
+ * and takes nothing. One whose id names no remaining attachment (the same file
+ * twice) takes nothing either. Inline attachments with no `<img>` go at the end.
+ */
+export declare function splitInlineAttachments(body: string | null | undefined, attachments: WidgetAttachment[] | null | undefined): {
+    parts: MessagePart[];
+    files: WidgetAttachment[];
+} | null;
+//# sourceMappingURL=inline-attachments.d.ts.map

package/lib/typescript/module/ui/utils/inline-attachments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-attachments.d.ts","sourceRoot":"","sources":["../../../../../src/ui/utils/inline-attachments.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,UAAU,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAE9E;;;;;;;;;;GAUG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,WAAW,EAAE,gBAAgB,EAAE,GAAG,IAAI,GAAG,SAAS,GACjD;IAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,GAAG,IAAI,CA8B5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repzo/widget-react-native",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Repzo chat widget for React Native",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/api/client.ts

@@ -8,6 +8,7 @@
  * The token itself lives in `SecureStorage`.
  */
 
+import { measureFileSize } from '../attachments/file-size';
 import { SecureStorage, TOKEN_KEY } from '../storage';
 import type {
   AgentUiAction,
@@ -84,6 +85,60 @@ interface RequestOptions {
   authToken?: string | null;
 }
 
+/**
+ * Sends a local file as the request body straight from disk and resolves the
+ * HTTP status. React Native streams a `{ uri }` body natively; `fetch` would
+ * stringify it, so this goes through XMLHttpRequest.
+ */
+function sendFileFromDisk(
+  url: string,
+  method: string,
+  headers: Record<string, string>,
+  file: { uri: string; contentType: string },
+  signal?: AbortSignal
+): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const cancel = () => xhr.abort();
+    const settle = (finish: () => void) => {
+      signal?.removeEventListener('abort', cancel);
+      finish();
+    };
+    xhr.onload = () => settle(() => resolve(xhr.status));
+    xhr.onerror = () => settle(() => reject(new RepzoWidgetError('Network request failed', 0, 'network')));
+    xhr.ontimeout = xhr.onerror;
+    xhr.onabort = () => settle(() => reject(new RepzoWidgetError('Upload cancelled', 0, 'network')));
+    xhr.open(method, url);
+    Object.entries(headers).forEach(([name, value]) => xhr.setRequestHeader(name, value));
+    // Android refuses a `{ uri }` body without one.
+    if (!Object.keys(headers).some((name) => name.toLowerCase() === 'content-type')) {
+      xhr.setRequestHeader('Content-Type', file.contentType);
+    }
+    signal?.addEventListener('abort', cancel);
+    xhr.send({ uri: file.uri } as unknown as XMLHttpRequestBodyInit);
+  });
+}
+
+/**
+ * How long Workstation keeps an upload for a message to name, when its answer
+ * has no usable `expiresAt` (deployments without it, or a phone clock that
+ * reads it as already past).
+ */
+const UPLOAD_LIFETIME_MS = 60 * 60 * 1000;
+
+/** A file in storage, waiting for the message that names it. */
+export interface UploadedFile {
+  uploadToken: string;
+  /** When Workstation stops taking `uploadToken`, on this phone's clock (ms). */
+  expiresAt: number;
+}
+
+function uploadExpiry(expiresAt: unknown, now: number): number {
+  const at =
+    typeof expiresAt === 'string' ? Date.parse(expiresAt) : typeof expiresAt === 'number' ? expiresAt : NaN;
+  return at > now ? at : now + UPLOAD_LIFETIME_MS;
+}
+
 export class WidgetApiClient {
   private baseUrl = '';
 
@@ -360,54 +415,81 @@ export class WidgetApiClient {
   /**
    * Puts a local file in storage ahead of the message, which then names it by
    * the returned upload token. The target is presigned storage, or a path on
-   * the server where its storage can't presign. The file is read as a native
-   * blob, so it never becomes a JS string; its size is the blob's, since the
-   * upload URL is signed for exactly the size asked for.
+   * the server where its storage can't presign. The upload URL is signed for
+   * exactly the size asked for: a `file://` file whose size `expo-file-system`
+   * can read streams from disk, anything else is read as a native blob and
+   * measured. `signal` cancels the transfer (the visitor removed the file, or
+   * left the conversation). Resolves the token and when it expires.
    */
-  async uploadAttachment(file: {
-    uri: string;
-    name: string;
-    contentType: string;
-    size: number;
-  }): Promise<string> {
-    let blob: Blob;
-    try {
-      blob = await (await fetch(file.uri)).blob();
-    } catch (error) {
-      throw new RepzoWidgetError(
-        error instanceof Error ? error.message : 'Could not read the file',
-        0,
-        'network'
-      );
+  async uploadAttachment(
+    file: {
+      uri: string;
+      name: string;
+      contentType: string;
+      size: number;
+    },
+    signal?: AbortSignal
+  ): Promise<UploadedFile> {
+    // A file removed early is never read, nor given a slot in storage.
+    const stopIfCancelled = () => {
+      if (signal?.aborted) throw new RepzoWidgetError('Upload cancelled', 0, 'network');
+    };
+    stopIfCancelled();
+    // Streaming matters on Android: React Native also copies a blob it reads
+    // into a Base64 string for its network inspector, so a file past ~30 MB
+    // runs the app out of memory. Only file:// gives an exact Content-Length.
+    const streamedSize = urlScheme(file.uri) === 'file:' ? await measureFileSize(file.uri) : null;
+    let blob: Blob | null = null;
+    if (streamedSize === null) {
+      try {
+        blob = await (await fetch(file.uri, { signal })).blob();
+      } catch (error) {
+        throw new RepzoWidgetError(
+          error instanceof Error ? error.message : 'Could not read the file',
+          0,
+          'network'
+        );
+      }
     }
+    stopIfCancelled();
     const target = await this.request<{
       uploadUrl: string;
       method?: string;
       headers?: Record<string, string>;
       uploadToken: string;
+      expiresAt?: string | number;
     }>('/api/widget/uploads', {
       method: 'POST',
-      body: { fileName: file.name, contentType: file.contentType, size: blob.size || file.size },
+      body: {
+        fileName: file.name,
+        contentType: file.contentType,
+        size: streamedSize ?? (blob?.size || file.size),
+      },
     });
+    // Counted from when the token was issued, not from when the file is up.
+    const expiresAt = uploadExpiry(target.expiresAt, Date.now());
     const uploadUrl = this.resolveUrl(target.uploadUrl);
     if (!uploadUrl) throw new RepzoWidgetError('Invalid upload target', 0, 'http');
+    stopIfCancelled();
 
-    let response: Response;
-    try {
-      response = await fetch(uploadUrl, {
-        method: target.method ?? 'PUT',
-        headers: target.headers ?? { 'Content-Type': file.contentType },
-        body: blob,
-      });
-    } catch (error) {
-      throw new RepzoWidgetError(
-        error instanceof Error ? error.message : 'Upload failed',
-        0,
-        'network'
-      );
+    const method = target.method ?? 'PUT';
+    const headers = target.headers ?? { 'Content-Type': file.contentType };
+    let status: number;
+    if (blob) {
+      try {
+        status = (await fetch(uploadUrl, { method, headers, body: blob, signal })).status;
+      } catch (error) {
+        throw new RepzoWidgetError(
+          error instanceof Error ? error.message : 'Upload failed',
+          0,
+          'network'
+        );
+      }
+    } else {
+      status = await sendFileFromDisk(uploadUrl, method, headers, file, signal);
     }
-    if (!response.ok) throw new RepzoWidgetError('Upload failed', response.status, 'http');
-    return target.uploadToken;
+    if (status < 200 || status >= 300) throw new RepzoWidgetError('Upload failed', status, 'http');
+    return { uploadToken: target.uploadToken, expiresAt };
   }
 
   listConversations(): Promise<{ data: Conversation[] }> {

package/src/attachments/file-size.ts

@@ -0,0 +1,42 @@
+/**
+ * Local file sizes from the host's `expo-file-system` (optional, like the
+ * pickers): read from the file's metadata, never from its contents. Shared by
+ * the pickers and the upload client, so the client doesn't pull in pickers.
+ *
+ * No `react-native` import on purpose: it stays testable in plain Node.
+ */
+
+let fileSystem: any = null;
+try {
+  fileSystem = require('expo-file-system') ?? null;
+} catch {
+  fileSystem = null;
+}
+
+/** A positive, finite byte count, or null. */
+export function validSize(size: unknown): number | null {
+  return typeof size === 'number' && Number.isFinite(size) && size > 0 ? size : null;
+}
+
+/**
+ * A local file's exact size in bytes, from its metadata without reading it.
+ * Null without `expo-file-system`, or when it can't tell.
+ */
+export async function measureFileSize(uri: string): Promise<number | null> {
+  if (typeof fileSystem?.File === 'function') {
+    try {
+      const size = validSize(new fileSystem.File(uri).size);
+      if (size !== null) return size;
+    } catch {
+      // Fall through to the next reader.
+    }
+  }
+  if (typeof fileSystem?.getInfoAsync === 'function') {
+    try {
+      return validSize((await fileSystem.getInfoAsync(uri, { size: true }))?.size);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}

package/src/attachments/local-previews.ts

@@ -0,0 +1,32 @@
+/**
+ * The phone's copy of each file the visitor sent, by the URL of the stored
+ * copy that replaced it in the thread. Right after a send the stored copy
+ * may not load yet (Workstation can still be storing it), so a photo keeps
+ * showing from the phone instead of turning into a file row. Kept in memory
+ * only: a later session shows the stored copy.
+ */
+
+const MAX_PREVIEWS = 50;
+const previews = new Map<string, string>();
+
+export function rememberLocalPreview(storedUrl: string, localUrl: string): void {
+  if (!storedUrl || !localUrl) return;
+  previews.delete(storedUrl);
+  previews.set(storedUrl, localUrl);
+  // Oldest first: a Map iterates in insertion order.
+  if (previews.size > MAX_PREVIEWS) previews.delete(previews.keys().next().value as string);
+}
+
+export function localPreviewFor(storedUrl: string): string | null {
+  return (storedUrl && previews.get(storedUrl)) || null;
+}
+
+/** One that failed to load (the OS cleared the picker's cache): every view moves to the stored copy. */
+export function forgetLocalPreview(storedUrl: string): void {
+  previews.delete(storedUrl);
+}
+
+/** Signing out forgets them: the next visitor on the phone doesn't inherit the paths. */
+export function clearLocalPreviews(): void {
+  previews.clear();
+}

package/src/attachments/pickers.ts

@@ -2,7 +2,7 @@
  * 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 and is uploaded when the message is sent. An
+ * 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.
  *
@@ -24,6 +24,7 @@
  */
 
 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;
@@ -48,10 +49,19 @@ export interface DraftAttachment {
   size: number;
   /** `data:<mime>;base64,<…>` for an inline file; empty when `fileUri` is uploaded instead. */
   dataUrl: string;
-  /** The local file uploaded when the message is sent. */
+  /** 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. */
@@ -119,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'];
 
 /**
@@ -356,7 +371,7 @@ async function toDraft(file: RepzoPickedFile): Promise<DraftAttachment> {
   };
 }
 
-/** A file that's uploaded when the message is sent: only its size is read here. */
+/** 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));
@@ -375,23 +390,9 @@ async function toUploadDraft(file: RepzoPickedFile, uploadLimit: number): Promis
 
 /** A local file's size in bytes, or 0 when nothing can tell. */
 async function readFileSize(uri: string): Promise<number> {
-  if (typeof fileSystem?.File === 'function') {
-    try {
-      const size = validSize(new fileSystem.File(uri).size);
-      if (size !== null) return size;
-    } catch {
-      // Fall through to the next reader.
-    }
-  }
-  if (typeof fileSystem?.getInfoAsync === 'function') {
-    try {
-      const size = validSize((await fileSystem.getInfoAsync(uri, { size: true }))?.size);
-      if (size !== null) return size;
-    } catch {
-      // Fall through to fetch.
-    }
-  }
-  // A native blob: its size is known without reading it into JS.
+  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;
 }
@@ -524,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();
@@ -563,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,6 +92,8 @@ 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',
@@ -93,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,12 +33,16 @@ 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: 'تعذر الإرسال',
@@ -48,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: 'إغلاق',