@repzo/widget-react-native 1.3.0 → 1.4.0

package/lib/module/state/widget-store.js

@@ -16,13 +16,17 @@ import { WidgetRealtime } from "../api/realtime.js";
 import { getDeviceId, rotateDeviceId } from "../device-id.js";
 import { EventEmitter, RepzoWidgetEvents } from "../events.js";
 import { PushManager } from "../push/push-notifications.js";
-import { CONFIG_KEY, LEGACY_CONFIG_KEY, SecureStorage, Storage, UNREAD_KEY, USER_KEY } from "../storage.js";
-import { setAttachmentOptions } from "../attachments/pickers.js";
+import { CONFIG_KEY, LAST_MESSAGE_KEY, LEGACY_CONFIG_KEY, SecureStorage, Storage, UNREAD_KEY, USER_KEY } from "../storage.js";
+import { clearLocalPreviews, rememberLocalPreview } from "../attachments/local-previews.js";
+import { guessContentType, isImageAttachment, setAttachmentOptions } from "../attachments/pickers.js";
 import { DEFAULT_BASE_URL } from "../types.js";
+import { clearRetainedState } from "../ui/hooks/use-retained-state.js";
+import { canRetryMessage, isLocalMessage } from "../ui/utils/conversations.js";
+import { stripHtml } from "../ui/utils/html.js";
 import { setOpenUrlHandler } from "../ui/utils/safe-url.js";
 
 /** 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.4.0';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform() {
@@ -37,6 +41,12 @@ const TYPING_SETTLE_MS = 3_000;
 const TYPING_PING_INTERVAL_MS = 4_000;
 /** Guards against the SSE stream replaying messages after a reconnect. */
 const SEEN_MESSAGE_LIMIT = 100;
+/** Threads whose newest message is remembered across launches. */
+const LAST_MESSAGE_LIMIT = 50;
+/** How far the phone's clock may be from Workstation's for a sent message to still match the list. */
+const SAME_MESSAGE_DRIFT_MS = 120_000;
+/** How far the list's `lastMessageAt` may trail the message's own `createdAt` (7 ms seen live). */
+const LIST_LAG_MS = 1_000;
 /** Logout's server calls are best-effort — a dead network must not block sign-out. */
 const LOGOUT_REQUEST_TIMEOUT_MS = 5_000;
 /** A server that 401s every fresh stream must not spin init (10/min limit). */
@@ -52,6 +62,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;
 
@@ -128,6 +140,10 @@ export class WidgetStore {
 
   /** `boot({ posts })` — Send posts over the app. */
   postsEnabled = true;
+  /** `boot({ photoAlbums })` — a message's photos share one album in the thread. */
+  photoAlbumsEnabled = true;
+  /** `boot({ youPrefix })` — "You:" before the visitor's own newest message in the lists. */
+  youPrefixEnabled = true;
 
   /** Posts whose view was reported this session (the server also dedupes per day). */
   viewedPostIds = new Set();
@@ -182,8 +198,18 @@ export class WidgetStore {
   lastTypingPingAt = 0;
   visitorTypingActive = false;
   seenMessageIds = [];
+
+  /** Who sent each thread's newest message and what it carried; see `withLastMessage`. */
+  lastMessages = {};
+  lastMessagesLoaded = false;
   /** Statuses (e.g. "read") that arrived for an id before a send response revealed it. */
   earlyStatuses = new Map();
+  /** The agent UI action behind a failed bubble, so Retry runs it again too. */
+  failedActions = new Map();
+  /** The next re-read for a sent file's stored copy (see `syncServerCopies`). */
+  serverCopyTimer = null;
+  serverCopyRetries = 0;
+  serverCopySyncing = false;
 
   /**
    * Identity generation. Bumped whenever boot/login/logout is requested; every
@@ -255,6 +281,8 @@ export class WidgetStore {
 
   /** Composer identity: explicit opens reset it; a draft receiving its server ID does not. */
   getThreadGeneration = () => this.threadGeneration;
+  showsPhotoAlbums = () => this.photoAlbumsEnabled;
+  showsYouPrefix = () => this.youPrefixEnabled;
   setState(patch) {
     const previous = this.state;
     const resolved = typeof patch === 'function' ? patch(previous) : patch;
@@ -326,6 +354,8 @@ export class WidgetStore {
     if (options.inAppNotifications !== undefined) {
       this.inAppNotificationsEnabled = options.inAppNotifications !== false;
     }
+    if (options.photoAlbums !== undefined) this.photoAlbumsEnabled = options.photoAlbums !== false;
+    if (options.youPrefix !== undefined) this.youPrefixEnabled = options.youPrefix !== false;
     if (options.posts !== undefined) {
       const wasEnabled = this.postsEnabled;
       this.postsEnabled = options.posts !== false;
@@ -480,13 +510,13 @@ export class WidgetStore {
     // queued op must never see one without the other.
     await Promise.all([this.client.setToken(result.token), userKey ? SecureStorage.setItem(USER_KEY, userKey) : SecureStorage.removeItem(USER_KEY)]);
     if (this.isStale(epoch)) return;
-    const conversations = result.conversations.map(conversation => this.hydrateConversation(conversation));
 
     // Server counts win (they include replies pushed while the app was
     // killed); the locally persisted map only covers older Workstation
     // deployments that don't send unreadCount yet.
-    const storedUnread = await this.loadUnread();
+    const [, storedUnread] = await Promise.all([this.loadLastMessages(epoch), this.loadUnread()]);
     if (this.isStale(epoch)) return;
+    const conversations = result.conversations.map(conversation => this.hydrateConversation(conversation));
     const unreadByConversation = {};
     for (const conversation of conversations) {
       const count = typeof conversation.unreadCount === 'number' ? conversation.unreadCount : storedUnread[conversation.id] ?? 0;
@@ -777,16 +807,20 @@ export class WidgetStore {
     this.userKeyLoaded = true;
     this.pendingAgentByConversation = {};
     this.seenMessageIds = [];
+    this.lastMessages = {};
+    this.lastMessagesLoaded = false;
     this.earlyStatuses.clear();
     this.visitorTypingActive = false;
     this.lastTypingPingAt = 0;
     this.launchCardOffered = false;
     this.resetPost();
+    clearLocalPreviews();
+    clearRetainedState();
     this.setState({
       ...USER_SCOPED_STATE
     });
     const token = await this.client.getToken();
-    await Promise.all([this.client.clearToken(), SecureStorage.removeItem(USER_KEY), Storage.removeItem(UNREAD_KEY),
+    await Promise.all([this.client.clearToken(), SecureStorage.removeItem(USER_KEY), Storage.removeItem(UNREAD_KEY), Storage.removeItem(LAST_MESSAGE_KEY),
     // A new anonymous visitor on this device gets a new tracking identity.
     rotateDeviceId()]);
 
@@ -822,7 +856,9 @@ export class WidgetStore {
     this.threadGeneration += 1;
     this.conversationCreation = null;
     this.draftEvents = [];
+    this.failedActions.clear();
     this.cancelMarkRead();
+    this.cancelServerCopySync();
   }
   requireBootConfig() {
     if (!this.bootConfig) {
@@ -1138,7 +1174,10 @@ export class WidgetStore {
       attachments: this.hydrateAttachments(data?.attachments, messageId),
       metadata: this.hydrateMetadata(data?.metadata || null),
       status: 'delivered',
-      createdAt: data?.createdAt || new Date().toISOString()
+      createdAt: data?.createdAt || new Date().toISOString(),
+      ...(typeof data?.clientMessageId === 'string' ? {
+        clientMessageId: data.clientMessageId
+      } : {})
     };
     const clearsTyping = message.direction === 'outbound' && message.senderType !== 'visitor';
     if (clearsTyping) this.clearTypingTimer();
@@ -1161,18 +1200,20 @@ export class WidgetStore {
 
     // Set inside the updater, read after: `setState` runs synchronously.
     let countedAsUnread = false;
+    const rowFields = rowFieldsOf(message);
     this.setState(current => {
       const conversations = conversationId ? current.conversations.map(conversation => conversation.id === conversationId ? {
         ...conversation,
-        snippet: message.messageType === 'message' ? message.bodyPlain || conversation.snippet : conversation.snippet,
+        ...rowFields,
         lastMessageAt: message.createdAt,
         messageCount: conversation.messageCount + 1
       } : conversation) : 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],
+          messages: alreadyPresent ? adoptServerAttachments(shown, [message]) : [...shown, message],
           agentTyping: clearsTyping ? false : current.agentTyping
         };
       }
@@ -1201,11 +1242,12 @@ export class WidgetStore {
           messageId,
           senderName: message.senderName || conversation?.agentName || null,
           senderAvatar: conversation?.agentAvatar ?? null,
-          preview: (message.bodyPlain ?? '').trim(),
+          preview: plainTextOf(message),
           hasAttachments: (message.attachments?.length ?? 0) > 0
         }
       };
     });
+    if (conversationId && rowFields) this.rememberLastMessage(conversationId, message.createdAt, rowFields, 'stream');
 
     // The visitor is reading it live — move the server cursor too, or the
     // next list/init would badge a reply they already saw.
@@ -1303,10 +1345,112 @@ export class WidgetStore {
     };
   }
   hydrateConversation(conversation) {
-    return this.applyConversationAgent({
+    return this.applyConversationAgent(this.withLastMessage({
       ...conversation,
       agentAvatar: this.client.resolveUrl(conversation.agentAvatar)
+    }));
+  }
+
+  /**
+   * Workstation's list doesn't say who sent the newest message, and calls one
+   * without words "2 attachments". While a row still describes the message
+   * this device saw last, both are filled in from it. `snippet` keeps the
+   * list's words: apps read it, and the lists draw "Photo" or "File" from
+   * `lastMessageAttachment` instead.
+   */
+  withLastMessage(conversation) {
+    const known = this.lastMessages[conversation.id];
+    if (!known || !describesSameMessage(conversation, known)) return conversation;
+    // A list that says who sent it, or what it carried, is used as is.
+    return {
+      ...conversation,
+      lastMessageFromVisitor: conversation.lastMessageFromVisitor ?? known.fromVisitor,
+      lastMessageAttachment: conversation.lastMessageAttachment !== undefined ? conversation.lastMessageAttachment : known.attachment
+    };
+  }
+
+  /**
+   * A send or a streamed message is the newest by arrival, whatever the two
+   * clocks say; a history page only replaces something older. A sent message
+   * is timed by the phone, which may run ahead of Workstation, so instead a
+   * page that has it replaces it: whatever is newest there came after it, and
+   * Workstation's own time then stands in for the phone's.
+   */
+  rememberLastMessage(conversationId, at, fields, source, {
+    messageId,
+    pageIds
+  } = {}) {
+    const known = this.lastMessages[conversationId];
+    if (source === 'history' && known) {
+      const outdated = known.phoneClock && known.messageId ? !pageIds?.has(known.messageId) : Date.parse(known.at) > Date.parse(at);
+      if (outdated) return;
+    }
+    const hint = {
+      at,
+      fromVisitor: !!fields.lastMessageFromVisitor,
+      attachment: fields.lastMessageAttachment ?? null,
+      ...(source === 'sent' ? {
+        phoneClock: true,
+        ...(messageId ? {
+          messageId
+        } : {})
+      } : {})
+    };
+    this.lastMessages = Object.fromEntries(Object.entries({
+      ...this.lastMessages,
+      [conversationId]: hint
+    }).sort(([, a], [, b]) => Date.parse(b.at) - Date.parse(a.at)).slice(0, LAST_MESSAGE_LIMIT));
+    // Until the stored hints are read, saving would overwrite them with these alone.
+    if (this.lastMessagesLoaded) void Storage.setItem(LAST_MESSAGE_KEY, JSON.stringify(this.lastMessages));
+  }
+  async loadLastMessages(epoch) {
+    if (this.lastMessagesLoaded) return;
+    let stored = null;
+    try {
+      stored = JSON.parse((await Storage.getItem(LAST_MESSAGE_KEY)) ?? 'null');
+    } catch {
+      stored = null;
+    }
+    // Left unloaded: the init that replaces this one reads them again.
+    if (this.isStale(epoch) || this.lastMessagesLoaded) return;
+    this.lastMessagesLoaded = true;
+    const learned = Object.keys(this.lastMessages).length > 0;
+    if (stored && typeof stored === 'object') {
+      for (const [conversationId, hint] of Object.entries(stored)) {
+        if (typeof hint?.at !== 'string' || typeof hint.fromVisitor !== 'boolean') continue;
+        const known = this.lastMessages[conversationId];
+        if (known && Date.parse(known.at) >= Date.parse(hint.at)) continue;
+        this.lastMessages[conversationId] = {
+          at: hint.at,
+          fromVisitor: hint.fromVisitor,
+          attachment: hint.attachment === 'photo' || hint.attachment === 'file' ? hint.attachment : null,
+          ...(hint.phoneClock === true ? {
+            phoneClock: true
+          } : {}),
+          ...(typeof hint.messageId === 'string' ? {
+            messageId: hint.messageId
+          } : {})
+        };
+      }
+    }
+    // Hints learned while the stored ones were being read are saved with them.
+    if (learned) void Storage.setItem(LAST_MESSAGE_KEY, JSON.stringify(this.lastMessages));
+  }
+
+  /** A thread's newest page shows who sent its newest message, so its row can say too. */
+  learnLastMessage(conversationId, page) {
+    let newest = null;
+    for (const message of page) {
+      if (!newest || Date.parse(message.createdAt) > Date.parse(newest.createdAt)) newest = message;
+    }
+    const fields = newest && rowFieldsOf(newest);
+    if (!newest || !fields) return;
+    this.rememberLastMessage(conversationId, newest.createdAt, fields, 'history', {
+      pageIds: new Set(page.map(message => message.id))
     });
+    this.setState(current => ({
+      conversations: current.conversations.map(row => row.id === conversationId ? this.withLastMessage(row) : row)
+    }));
   }
 
   /**
@@ -1315,16 +1459,22 @@ export class WidgetStore {
    */
   hydrateAttachments(attachments, messageId) {
     if (!Array.isArray(attachments) || attachments.length === 0) return null;
-    const hydrated = attachments.filter(item => !!item && typeof item === 'object').map((attachment, index) => ({
-      ...attachment,
-      id: typeof attachment.id === 'string' || typeof attachment.id === 'number' ? String(attachment.id) : `${messageId ?? 'attachment'}-${index}`,
-      name: typeof attachment.name === 'string' && attachment.name ? attachment.name : 'Attachment',
-      contentType: typeof attachment.contentType === 'string' ? attachment.contentType : '',
-      size: typeof attachment.size === 'number' ? attachment.size : 0,
-      // Empty (never the raw value) when the URL isn't http(s) — the preview
-      // then renders the name only, with nothing to open.
-      url: this.client.resolveUrl(typeof attachment.url === 'string' ? attachment.url : null) ?? ''
-    }));
+    const hydrated = attachments.filter(item => !!item && typeof item === 'object').map((attachment, index) => {
+      const name = typeof attachment.name === 'string' && attachment.name ? attachment.name : 'Attachment';
+      const declared = typeof attachment.contentType === 'string' ? attachment.contentType : '';
+      return {
+        ...attachment,
+        id: typeof attachment.id === 'string' || typeof attachment.id === 'number' ? String(attachment.id) : `${messageId ?? 'attachment'}-${index}`,
+        name,
+        // Without a type (or with a generic one) the name says what it is,
+        // so a photo still shows as a photo rather than a file row.
+        contentType: declared && !/^application\/octet-stream$/i.test(declared) ? declared : guessContentType(name) ?? declared,
+        size: typeof attachment.size === 'number' ? attachment.size : 0,
+        // Empty (never the raw value) when the URL isn't http(s) — the preview
+        // then renders the name only, with nothing to open.
+        url: this.client.resolveUrl(typeof attachment.url === 'string' ? attachment.url : null) ?? ''
+      };
+    });
     return hydrated.length > 0 ? hydrated : null;
   }
   clearTypingTimer() {
@@ -1580,19 +1730,21 @@ export class WidgetStore {
       const result = await this.client.listMessages(conversationId);
       // Opening A then B quickly: A's page must never land under B.
       if (this.isStale(epoch) || this.threadGeneration !== generation) return;
+      const page = this.hydrateMessages(result.data);
       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
         };
       });
+      this.learnLastMessage(conversationId, page);
     } catch {
       if (!this.isStale(epoch) && this.threadGeneration === generation) {
         this.setState({
@@ -1654,15 +1806,17 @@ export class WidgetStore {
       if (this.isStale(epoch) || this.threadGeneration !== generation) return;
       if (this.state.activeConversationId !== conversationId) return;
       const fresh = this.hydrateMessages(result.data);
+      this.learnLastMessage(conversationId, fresh);
       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), fresh);
+        const upgraded = adoptServerStatuses(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) {
@@ -1687,6 +1841,40 @@ 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.
+   */
+  async syncServerCopies() {
+    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);
+  }
+  cancelServerCopySync() {
+    if (this.serverCopyTimer) clearTimeout(this.serverCopyTimer);
+    this.serverCopyTimer = null;
+  }
+
   /** A history page (newest-first) as the oldest-first list the UI renders. */
   hydrateMessages(page) {
     return page.map(message => ({
@@ -1734,9 +1922,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, attachments = [], agentUiAction) {
     const trimmed = body.trim();
@@ -1744,7 +1934,6 @@ export class WidgetStore {
     const {
       visitorProfile
     } = this.state;
-    const generation = this.threadGeneration;
     const tempId = `temp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
     const optimistic = {
       id: tempId,
@@ -1768,20 +1957,67 @@ export class WidgetStore {
       status: 'pending',
       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', {
       hasText: !!trimmed,
       attachmentCount: attachments.length
     });
-    const markFailed = () => this.setState(current => ({
-      messages: attachments.length > 0 ? current.messages.filter(message => message.id !== tempId) : current.messages.map(message => message.id === tempId ? {
-        ...message,
-        status: 'failed'
-      } : message)
+    return this.deliverMessage(tempId, trimmed, attachments, agentUiAction);
+  }
+
+  /**
+   * Puts a picked file in storage while the visitor is still writing, so
+   * Send goes out at once. Resolves the token `sendMessage` names it by, and
+   * when that token expires.
+   */
+  uploadAttachment(file, signal) {
+    return this.client.uploadAttachment(file, signal);
+  }
+
+  /**
+   * 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) {
+    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 = {
+      ...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. */
+  async deliverMessage(tempId, trimmed, attachments, agentUiAction) {
+    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 ? current.messages.filter(message => message.id !== tempId) : current.messages.map(message => message.id === tempId ? {
+          ...message,
+          status: 'failed'
+        } : message)
+      }));
+    };
     const epoch = this.epoch;
 
     // A draft's first send creates the conversation. Anything sent from the
@@ -1807,27 +2043,56 @@ export class WidgetStore {
     }
     let createdId = null;
     try {
+      // Local files go up first, unless the composer already put them up; the
+      // message names each by its upload token.
+      const sentAttachments = await Promise.all(attachments.map(async ({
+        name,
+        url,
+        fileUri,
+        uploadToken,
+        contentType,
+        size
+      }) => uploadToken ? {
+        name,
+        contentType,
+        size,
+        uploadToken
+      } : fileUri ? {
+        name,
+        contentType,
+        size,
+        uploadToken: (await this.client.uploadAttachment({
+          uri: fileUri,
+          name,
+          contentType,
+          size
+        })).uploadToken
+      } : {
+        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
+        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;
+
+      // Workstation doesn't stream the visitor's own messages back, so the
+      // list row learns about this one here.
+      const sentAt = new Date().toISOString();
+      const sentRow = rowFieldsFor(trimmed, attachments.map(attachment => attachment.contentType), true);
       this.setState(current => {
         // The stream or a catch-up fetch may have delivered this message
         // already — keep one copy, never two bubbles with the same id.
@@ -1837,18 +2102,27 @@ export class WidgetStore {
           id: result.messageId,
           status: this.earlyStatuses.get(result.messageId) ?? 'sent'
         } : message);
-        if (!createdId) return {
-          messages
-        };
+        if (!createdId) {
+          return {
+            messages,
+            conversations: current.conversations.map(row => row.id === result.conversationId ? {
+              ...row,
+              ...sentRow,
+              lastMessageAt: sentAt,
+              messageCount: row.messageCount + (delivered ? 0 : 1)
+            } : row)
+          };
+        }
         const known = current.conversations.some(item => item.id === result.conversationId);
         const conversation = {
           id: result.conversationId,
           subject: null,
           status: 'open',
-          snippet: trimmed ? trimmed.slice(0, 100) : `${attachments.length} attachment${attachments.length === 1 ? '' : 's'}`,
+          snippet: null,
+          ...sentRow,
           messageCount: 1,
-          lastMessageAt: new Date().toISOString(),
-          createdAt: new Date().toISOString(),
+          lastMessageAt: sentAt,
+          createdAt: sentAt,
           agentName: null,
           agentAvatar: null
         };
@@ -1861,8 +2135,18 @@ export class WidgetStore {
           } : {})
         };
       });
+      this.rememberLastMessage(result.conversationId, sentAt, sentRow, 'sent', {
+        messageId: result.messageId
+      });
+
+      // 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 {
@@ -1873,6 +2157,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();
     }
   }
   async identifyVisitor(data) {
@@ -2346,11 +2632,6 @@ function createConversationCreation(generation) {
   };
 }
 
-/** Optimistic visitor bubbles the server hasn't acknowledged (pending/failed). */
-function isLocalMessage(message) {
-  return message.id.startsWith('temp-');
-}
-
 /** A "Seen" missed while the stream was down shows up on the next re-read. */
 function adoptServerStatuses(messages, server) {
   const seen = new Set(server.filter(message => message.status === 'read').map(message => message.id));
@@ -2379,6 +2660,65 @@ function asDeletedPlaceholder(message, deletedAt) {
   };
 }
 
+/** A message's words on one line; replies written in Workstation may only carry HTML. */
+function plainTextOf(message) {
+  return (message.bodyPlain || stripHtml(message.body ?? '')).replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * The newest message of a thread as this device saw it. `at` is its
+ * `createdAt`, which Workstation's list repeats as `lastMessageAt`; for a sent
+ * message it's the phone's clock instead.
+ */
+
+/** `snippet` is absent when there's nothing to quote: the row keeps its words. */
+
+/** The list row once `message` is the newest. Null keeps the row as it is: system rows and notes. */
+function rowFieldsOf(message) {
+  if (message.messageType && message.messageType !== 'message') return null;
+  return rowFieldsFor(plainTextOf(message), (message.attachments ?? []).map(attachment => attachment.contentType), message.senderType === 'visitor' || message.direction === 'inbound', /<img\b/i.test(message.body ?? ''));
+}
+
+/**
+ * Its words, or with none, whether it carried only photos or other files too.
+ * A message with neither (a card) still says who sent it, so a teammate's
+ * card never leaves "You:" on the visitor's earlier message.
+ */
+function rowFieldsFor(text, contentTypes, fromVisitor, inlinePhoto = false) {
+  if (text) return {
+    snippet: text,
+    lastMessageAttachment: null,
+    lastMessageFromVisitor: fromVisitor
+  };
+  const count = contentTypes.length;
+  if (count === 0 && !inlinePhoto) return {
+    lastMessageAttachment: null,
+    lastMessageFromVisitor: fromVisitor
+  };
+  return {
+    // Workstation's list words it this way too, so apps reading `snippet` see the same after a reload.
+    ...(count > 0 ? {
+      snippet: `${count} attachment${count === 1 ? '' : 's'}`
+    } : {}),
+    lastMessageAttachment: contentTypes.every(type => isImageAttachment(type)) ? 'photo' : 'file',
+    lastMessageFromVisitor: fromVisitor
+  };
+}
+
+/**
+ * The list stamps a conversation just after storing its message, so its time
+ * trails the message's own by a few milliseconds, never more than `LIST_LAG_MS`.
+ * A sent message is timed by the phone instead: a little drift either way
+ * still matches, but only when the list rules out a team reply the visitor
+ * hasn't read. Older Workstation deployments don't send `unreadCount`, so
+ * there a sent message must match like any other.
+ */
+function describesSameMessage(conversation, known) {
+  const lag = Date.parse(conversation.lastMessageAt ?? '') - Date.parse(known.at);
+  if (lag >= 0 && lag <= LIST_LAG_MS) return true;
+  return !!known.phoneClock && Math.abs(lag) <= SAME_MESSAGE_DRIFT_MS && conversation.unreadCount === 0;
+}
+
 /** A deletion missed while the stream was down shows up on the next re-read. */
 function adoptServerDeletions(messages, server) {
   const deleted = new Map(server.filter(message => message.deletedAt).map(message => [message.id, message.deletedAt]));
@@ -2404,17 +2744,100 @@ function adoptServerAttachments(messages, server) {
   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: copy.attachments
+      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, server) {
+  // 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 owns = pairByName(local, server);
+  const merged = server.map((attachment, index) => {
+    const own = owns[index];
+    if (!isLocalAttachment(own) || !attachment.url) return own;
+    rememberLocalPreview(attachment.url, own.url);
+    return attachment;
+  });
+  return merged.every((attachment, index) => attachment === local[index]) ? local : merged;
+}
+
+/**
+ * The local attachment each server one replaces. By name first: Workstation
+ * may store a message's files in another order than they were sent, and a
+ * photo paired with the wrong file would show it for the rest of the session.
+ * Any it renamed pair up in the order left.
+ */
+function pairByName(local, server) {
+  const unpaired = [...local];
+  const named = server.map(attachment => {
+    const index = unpaired.findIndex(own => own.name === attachment.name);
+    return index < 0 ? null : unpaired.splice(index, 1)[0];
+  });
+  return named.map(own => own ?? unpaired.shift());
+}
+
+/**
+ * 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, server) {
+  const rows = new Map();
+  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 = [];
+  messages.forEach(message => {
+    const row = isLocalMessage(message) ? rows.get(message.id) : undefined;
+    if (!row) {
+      next.push(message);
+      return;
+    }
+    changed = true;
+    // 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) {
+  return !/^https?:\/\//i.test(attachment.url);
+}
+
+/** A visitor bubble still showing the picked files rather than the uploaded copies. */
+function hasLocalAttachments(message) {
+  return !!message.attachments?.some(isLocalAttachment);
+}
+
+/** A sent bubble whose stored copy hasn't replaced the picked files yet. */
+function isAwaitingServerCopy(message) {
+  return !isLocalMessage(message) && hasLocalAttachments(message);
+}
+
 /** Stable, so same-instant rows keep their order; bad dates sort as oldest. */
 function sortByCreatedAt(messages) {
   const time = message => Date.parse(message.createdAt) || 0;