@repzo/widget-react-native 1.3.0 → 1.3.1

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 and is uploaded when the message is sent. 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
@@ -23,10 +27,10 @@ import type { AttachmentSource, RepzoPickedFile, RepzoWidgetAttachmentOptions }
 
 /** 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,15 +39,17 @@ 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 when the message is sent. */
+  fileUri?: string;
   /** What `<Image>` renders locally: the picked file's URI, else the data URL. */
   previewUri: string;
 }
@@ -139,11 +145,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 +160,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 +178,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 +188,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 +198,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 +211,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 +235,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 +258,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 +266,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 +294,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 +311,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 +323,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 +356,46 @@ async function toDraft(file: RepzoPickedFile): Promise<DraftAttachment> {
   };
 }
 
+/** A file that's uploaded when the message is sent: 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> {
+  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 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 +463,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;
 }

package/src/i18n.ts

@@ -82,6 +82,8 @@ export const DEFAULT_LABELS = {
   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',

package/src/locales.ts

@@ -38,6 +38,7 @@ const ar: LabelMap = {
   cameraPermissionDenied: 'اسمح بالوصول إلى الكاميرا من الإعدادات لالتقاط صورة',
   cancel: 'إلغاء',
   failedToSend: 'تعذر الإرسال',
+  tapToRetry: 'اضغط لإعادة المحاولة',
   thinking: 'يكتب',
   messages: 'الرسائل',
   noMessages: 'لا توجد رسائل بعد',

package/src/state/widget-store.ts

@@ -37,10 +37,11 @@ import type {
   WidgetUser,
   WidgetView,
 } from '../types';
+import { canRetryMessage, isLocalMessage } from '../ui/utils/conversations';
 import { setOpenUrlHandler } from '../ui/utils/safe-url';
 
 /** Sent on every init; must match `package.json` (tests/version.test.js checks). */
-const SDK_VERSION = '@repzo/widget-react-native@1.3.0';
+const SDK_VERSION = '@repzo/widget-react-native@1.3.1';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform(): 'ios' | 'android' | 'web' {
@@ -76,6 +77,8 @@ const MARK_READ_DEBOUNCE_MS = 1_000;
 const FOREGROUND_REFRESH_AFTER_MS = 5 * 60_000;
 /** Live events held back while a draft's first send is creating its thread. */
 const DRAFT_EVENT_BUFFER_LIMIT = 50;
+/** Waits between re-reads for a sent file's stored copy while Workstation is still storing it. */
+const SERVER_COPY_RETRY_MS = [2_000, 5_000, 15_000];
 /** How long a post stays up after a reaction, thanking them, before it goes. */
 export const POST_THANKS_MS = 1600;
 
@@ -235,6 +238,12 @@ export class WidgetStore {
   private seenMessageIds: string[] = [];
   /** Statuses (e.g. "read") that arrived for an id before a send response revealed it. */
   private earlyStatuses = new Map<string, string>();
+  /** The agent UI action behind a failed bubble, so Retry runs it again too. */
+  private failedActions = new Map<string, AgentUiAction>();
+  /** The next re-read for a sent file's stored copy (see `syncServerCopies`). */
+  private serverCopyTimer: ReturnType<typeof setTimeout> | null = null;
+  private serverCopyRetries = 0;
+  private serverCopySyncing = false;
 
   /**
    * Identity generation. Bumped whenever boot/login/logout is requested; every
@@ -890,7 +899,9 @@ export class WidgetStore {
     this.threadGeneration += 1;
     this.conversationCreation = null;
     this.draftEvents = [];
+    this.failedActions.clear();
     this.cancelMarkRead();
+    this.cancelServerCopySync();
   }
 
   private requireBootConfig() {
@@ -1244,6 +1255,7 @@ export class WidgetStore {
       metadata: this.hydrateMetadata(data?.metadata || null),
       status: 'delivered',
       createdAt: data?.createdAt || new Date().toISOString(),
+      ...(typeof data?.clientMessageId === 'string' ? { clientMessageId: data.clientMessageId } : {}),
     };
 
     const clearsTyping = message.direction === 'outbound' && message.senderType !== 'visitor';
@@ -1291,12 +1303,13 @@ export class WidgetStore {
         : current.conversations;
 
       if (onScreen) {
-        const alreadyPresent = current.messages.some((existing) => existing.id === message.id);
+        const shown = adoptOwnServerRows(current.messages, [message]);
+        const alreadyPresent = shown.some((existing) => existing.id === message.id);
         return {
           conversations,
           messages: alreadyPresent
-            ? adoptServerAttachments(current.messages, [message])
-            : [...current.messages, message],
+            ? adoptServerAttachments(shown, [message])
+            : [...shown, message],
           agentTyping: clearsTyping ? false : current.agentTyping,
         };
       }
@@ -1697,11 +1710,12 @@ export class WidgetStore {
       this.setState((current) => {
         // Live replies and optimistic sends may have arrived since this page
         // was requested. Keep them, preferring the live copy for shared ids.
-        const liveIds = new Set(current.messages.map((message) => message.id));
         const page = this.hydrateMessages(result.data);
+        const live = adoptOwnServerRows(current.messages, page);
+        const liveIds = new Set(live.map((message) => message.id));
         const history = page.filter((message) => !liveIds.has(message.id));
         return {
-          messages: sortByCreatedAt([...history, ...adoptServerAttachments(current.messages, page)]),
+          messages: sortByCreatedAt([...history, ...adoptServerAttachments(live, page)]),
           messagesLoading: false,
           hasMoreMessages: result.meta.hasMore,
           messageCursor: result.meta.nextCursor,
@@ -1765,16 +1779,17 @@ export class WidgetStore {
 
       const fresh = this.hydrateMessages(result.data);
       this.setState((current) => {
-        const known = new Set(current.messages.map((message) => message.id));
+        const own = adoptOwnServerRows(current.messages, fresh);
+        const known = new Set(own.map((message) => message.id));
         const missing = fresh.filter((message) => !known.has(message.id));
         const upgraded = adoptServerStatuses(
-          adoptServerDeletions(adoptServerAttachments(current.messages, fresh), fresh),
+          adoptServerDeletions(adoptServerAttachments(own, fresh), fresh),
           fresh
         );
         if (missing.length === 0) return upgraded === current.messages ? {} : { messages: upgraded };
 
-        const local = current.messages.filter(isLocalMessage);
-        const hasServerMessages = local.length < current.messages.length;
+        const local = own.filter(isLocalMessage);
+        const hasServerMessages = local.length < own.length;
         // No overlap means the gap is longer than a page: restart from the
         // newest page (keeping unsent bubbles) rather than leave a hole.
         if (missing.length === fresh.length || !hasServerMessages) {
@@ -1795,6 +1810,42 @@ export class WidgetStore {
     }
   }
 
+  /**
+   * Until its stored copy replaces it, a sent bubble points at the visitor's
+   * local files: a photo still opens in the viewer, but a PDF has nothing to
+   * open. When the stream's echo hasn't brought that copy, re-read the
+   * thread, and try again a few times while Workstation is still storing it.
+   */
+  private async syncServerCopies(): Promise<void> {
+    this.cancelServerCopySync();
+    if (this.serverCopySyncing || !this.state.messages.some(isAwaitingServerCopy)) return;
+    // A send still in flight would come back as a stored row beside its own
+    // pending bubble. It syncs again when it settles.
+    if (this.state.messages.some((message) => isLocalMessage(message) && message.status === 'pending')) return;
+    // Off screen: the thread reloads in full when it's opened again.
+    const conversationId = this.state.activeConversationId;
+    if (!conversationId || !this.isThreadOnScreen(conversationId)) return;
+
+    const generation = this.threadGeneration;
+    this.serverCopySyncing = true;
+    try {
+      // A no-op while a page load is in flight; the retry below covers it.
+      await this.refreshOpenThread();
+    } finally {
+      this.serverCopySyncing = false;
+    }
+    if (this.threadGeneration !== generation || !this.state.messages.some(isAwaitingServerCopy)) return;
+    const delay = SERVER_COPY_RETRY_MS[this.serverCopyRetries];
+    if (delay === undefined) return;
+    this.serverCopyRetries += 1;
+    this.serverCopyTimer = setTimeout(() => void this.syncServerCopies(), delay);
+  }
+
+  private cancelServerCopySync(): void {
+    if (this.serverCopyTimer) clearTimeout(this.serverCopyTimer);
+    this.serverCopyTimer = null;
+  }
+
   /** A history page (newest-first) as the oldest-first list the UI renders. */
   private hydrateMessages(page: Message[]): Message[] {
     return page
@@ -1839,9 +1890,11 @@ export class WidgetStore {
 
   /**
    * Rejects when the message wasn't sent, so the composer can keep
-   * attachments for a retry. A text-only bubble is marked failed; one with
-   * attachments is removed instead — the composer's chips are the retry, and
-   * keeping both would leave a duplicate after a successful resend.
+   * attachments for a retry. A text-only bubble is marked failed and can be
+   * re-sent with `retryMessage`; one with attachments is removed instead — the
+   * composer's chips are the retry, and keeping both would leave a duplicate
+   * after a successful resend. Likewise an agent UI action replaces the
+   * failed bubble of the same action, since its card stays tappable.
    */
   async sendMessage(
     body: string,
@@ -1852,7 +1905,6 @@ export class WidgetStore {
     if (!trimmed && attachments.length === 0) return;
 
     const { visitorProfile } = this.state;
-    const generation = this.threadGeneration;
     const tempId = `temp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
     const optimistic: Message = {
       id: tempId,
@@ -1883,8 +1935,17 @@ export class WidgetStore {
       createdAt: new Date().toISOString(),
     };
 
+    // Tapping the card again is the retry: offering the old bubble's retry
+    // too would run the action twice (two items in the cart, two bookings).
+    const superseded = agentUiAction
+      ? [...this.failedActions]
+          .filter(([, failed]) => failed.id === agentUiAction.id && failed.type === agentUiAction.type)
+          .map(([messageId]) => messageId)
+      : [];
+    superseded.forEach((messageId) => this.failedActions.delete(messageId));
+
     this.setState((current) => ({
-      messages: [...current.messages, optimistic],
+      messages: [...current.messages.filter((message) => !superseded.includes(message.id)), optimistic],
       prefillText: '',
     }));
     this.track('widget_message_sent', {
@@ -1892,7 +1953,40 @@ export class WidgetStore {
       attachmentCount: attachments.length,
     });
 
-    const markFailed = () =>
+    return this.deliverMessage(tempId, trimmed, attachments, agentUiAction);
+  }
+
+  /**
+   * Re-sends a text bubble that failed. It moves to the end of the thread,
+   * since it now goes out after anything sent meanwhile. Rejects like
+   * `sendMessage` when it fails again; the bubble is then failed once more.
+   */
+  async retryMessage(messageId: string): Promise<void> {
+    const failed = this.state.messages.find(
+      (message) => message.id === messageId && canRetryMessage(message)
+    );
+    if (!failed) return;
+    const agentUiAction = this.failedActions.get(messageId);
+    this.failedActions.delete(messageId);
+    const pending: Message = { ...failed, status: 'pending', createdAt: new Date().toISOString() };
+    this.setState((current) => ({
+      messages: [...current.messages.filter((message) => message.id !== messageId), pending],
+    }));
+    return this.deliverMessage(messageId, failed.bodyPlain ?? '', [], agentUiAction);
+  }
+
+  /** Sends the optimistic bubble `tempId`, already on screen as pending. */
+  private async deliverMessage(
+    tempId: string,
+    trimmed: string,
+    attachments: OutgoingAttachment[],
+    agentUiAction: AgentUiAction | undefined
+  ): Promise<void> {
+    const { visitorProfile } = this.state;
+    const generation = this.threadGeneration;
+
+    const markFailed = () => {
+      if (agentUiAction && attachments.length === 0) this.failedActions.set(tempId, agentUiAction);
       this.setState((current) => ({
         messages:
           attachments.length > 0
@@ -1901,6 +1995,7 @@ export class WidgetStore {
                 message.id === tempId ? { ...message, status: 'failed' } : message
               ),
       }));
+    };
 
     const epoch = this.epoch;
 
@@ -1928,22 +2023,31 @@ export class WidgetStore {
 
     let createdId: string | null = null;
     try {
+      // Local files go up first; the message names each by its upload token.
+      const sentAttachments = await Promise.all(
+        attachments.map(async ({ name, url, fileUri, contentType, size }) =>
+          fileUri
+            ? {
+                name,
+                contentType,
+                size,
+                uploadToken: await this.client.uploadAttachment({ uri: fileUri, name, contentType, size }),
+              }
+            : { name, url, contentType, size }
+        )
+      );
+      if (this.isStale(epoch)) return;
       const result = await this.client.sendMessage({
         conversationId: conversationId || undefined,
         forceNewConversation: !conversationId,
         body: trimmed,
-        attachments:
-          attachments.length > 0
-            ? attachments.map(({ name, url, contentType, size }) => ({
-                name,
-                url,
-                contentType,
-                size,
-              }))
-            : undefined,
+        attachments: sentAttachments.length > 0 ? sentAttachments : undefined,
         visitorName: visitorProfile.name,
         visitorEmail: visitorProfile.email,
         agentUiAction,
+        // The bubble's id, the same on every retry: a newer Workstation stores
+        // the message once even when an earlier attempt's response was lost.
+        clientMessageId: tempId,
       });
       if (this.isStale(epoch)) return;
       if (ownCreation) createdId = result.conversationId;
@@ -1988,8 +2092,15 @@ export class WidgetStore {
             : {}),
         };
       });
+
+      // New files to fetch the stored copy of: a fresh round of re-reads.
+      const sent = this.state.messages.find((message) => message.id === result.messageId);
+      if (sent && hasLocalAttachments(sent)) this.serverCopyRetries = 0;
     } catch (error) {
       if (this.isStale(epoch)) throw error;
+      // The response was lost, but its stored row has already taken the
+      // bubble's place (newer Workstation deployments): it was sent.
+      if (this.state.messages.some((message) => message.clientMessageId === tempId)) return;
       markFailed();
       throw error;
     } finally {
@@ -2000,6 +2111,8 @@ export class WidgetStore {
         // Anything held back for the draft now has a home (or goes to unread).
         this.replayDraftEvents();
       }
+      // Waits for every send to settle, so this runs when the last one does.
+      if (!this.isStale(epoch)) void this.syncServerCopies();
     }
   }
 
@@ -2462,11 +2575,6 @@ function createConversationCreation(generation: number): ConversationCreation {
   return { generation, promise, resolve };
 }
 
-/** Optimistic visitor bubbles the server hasn't acknowledged (pending/failed). */
-function isLocalMessage(message: Message): boolean {
-  return message.id.startsWith('temp-');
-}
-
 /** A "Seen" missed while the stream was down shows up on the next re-read. */
 function adoptServerStatuses(messages: Message[], server: Message[]): Message[] {
   const seen = new Set(server.filter((message) => message.status === 'read').map((message) => message.id));
@@ -2514,14 +2622,83 @@ function adoptServerAttachments(messages: Message[], server: Message[]): Message
   let changed = false;
   const next = messages.map((message) => {
     const copy = serverCopies.get(message.id);
-    const hasLocal = message.attachments?.some((attachment) => !/^https?:\/\//i.test(attachment.url));
-    if (!copy || !hasLocal) return message;
+    if (!copy || !hasLocalAttachments(message)) return message;
+    const attachments = mergeAttachments(message.attachments!, copy.attachments!);
+    if (attachments === message.attachments) return message;
+    changed = true;
+    return { ...message, attachments };
+  });
+  return changed ? next : messages;
+}
+
+/**
+ * Each attachment's server copy, except one without a usable URL: that would
+ * only blank its local preview, so the preview stays until a later copy has it.
+ * Returns `local` itself when nothing changes.
+ */
+function mergeAttachments(local: WidgetAttachment[], server: WidgetAttachment[]): WidgetAttachment[] {
+  // Without a one-to-one match, only a fully usable server copy is safe to take.
+  if (local.length !== server.length) {
+    return server.every((attachment) => attachment.url) ? server : local;
+  }
+  const merged = server.map((attachment, index) => {
+    const own = local[index]!;
+    return isLocalAttachment(own) && attachment.url ? attachment : own;
+  });
+  return merged.every((attachment, index) => attachment === local[index]) ? local : merged;
+}
+
+/**
+ * Newer Workstation deployments echo `clientMessageId` on the visitor's own
+ * rows. Such a row replaces the pending or failed bubble it came from instead
+ * of showing beside it: no duplicate while a send is in flight, and no retry
+ * for a message that was stored although its response was lost.
+ */
+function adoptOwnServerRows(messages: Message[], server: Message[]): Message[] {
+  const rows = new Map<string, Message>();
+  server.forEach((row) => {
+    if (typeof row.clientMessageId === 'string' && row.clientMessageId) rows.set(row.clientMessageId, row);
+  });
+  if (rows.size === 0) return messages;
+
+  const shown = new Set(messages.map((message) => message.id));
+  let changed = false;
+  const next: Message[] = [];
+  messages.forEach((message) => {
+    const row = isLocalMessage(message) ? rows.get(message.id) : undefined;
+    if (!row) {
+      next.push(message);
+      return;
+    }
     changed = true;
-    return { ...message, attachments: copy.attachments };
+    // Already on screen under its server id (an earlier echo): drop the bubble.
+    if (shown.has(row.id)) return;
+    next.push({
+      ...row,
+      attachments:
+        row.attachments && message.attachments
+          ? mergeAttachments(message.attachments, row.attachments)
+          : (row.attachments ?? message.attachments),
+    });
   });
   return changed ? next : messages;
 }
 
+/** Still the picked file (a `file://` URI, or no URL at all), not the uploaded copy. */
+function isLocalAttachment(attachment: WidgetAttachment): boolean {
+  return !/^https?:\/\//i.test(attachment.url);
+}
+
+/** A visitor bubble still showing the picked files rather than the uploaded copies. */
+function hasLocalAttachments(message: Message): boolean {
+  return !!message.attachments?.some(isLocalAttachment);
+}
+
+/** A sent bubble whose stored copy hasn't replaced the picked files yet. */
+function isAwaitingServerCopy(message: Message): boolean {
+  return !isLocalMessage(message) && hasLocalAttachments(message);
+}
+
 /** Stable, so same-instant rows keep their order; bad dates sort as oldest. */
 function sortByCreatedAt(messages: Message[]): Message[] {
   const time = (message: Message) => Date.parse(message.createdAt) || 0;