@repzo/widget-react-native 1.3.1 → 1.5.0

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

@@ -11,10 +11,14 @@ var _deviceId = require("../device-id.js");
 var _events = require("../events.js");
 var _pushNotifications = require("../push/push-notifications.js");
 var _storage = require("../storage.js");
+var _localPreviews = require("../attachments/local-previews.js");
 var _pickers = require("../attachments/pickers.js");
 var _types = require("../types.js");
+var _useRetainedState = require("../ui/hooks/use-retained-state.js");
 var _conversations = require("../ui/utils/conversations.js");
+var _html = require("../ui/utils/html.js");
 var _safeUrl = require("../ui/utils/safe-url.js");
+var _userUpdateQueue = require("./user-update-queue.js");
 /**
  * The widget's single source of truth.
  *
@@ -26,7 +30,7 @@ var _safeUrl = require("../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.1';
+const SDK_VERSION = '@repzo/widget-react-native@1.5.0';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform() {
@@ -41,6 +45,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). */
@@ -118,6 +128,11 @@ const USER_SCOPED_STATE = {
 };
 class WidgetStore {
   client = new _client.WidgetApiClient();
+
+  /** Paces `updateUser()` — see `boot({ throttleUpdateUser })`. */
+  userUpdates = new _userUpdateQueue.UserUpdateQueue(customAttributes => this.client.identify({
+    customAttributes
+  }));
   events = new _events.EventEmitter();
   push = new _pushNotifications.PushManager(this.client, conversationId => {
     void this.openConversation(conversationId);
@@ -134,6 +149,12 @@ 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;
+  /** `boot({ throttleUpdateUser })` — skip unchanged `updateUser()` values and pace the rest. */
+  throttleUpdateUserEnabled = true;
 
   /** Posts whose view was reported this session (the server also dedupes per day). */
   viewedPostIds = new Set();
@@ -188,6 +209,10 @@ 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. */
@@ -267,6 +292,8 @@ 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;
@@ -338,6 +365,11 @@ 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.throttleUpdateUser !== undefined) {
+      this.throttleUpdateUserEnabled = options.throttleUpdateUser !== false;
+    }
     if (options.posts !== undefined) {
       const wasEnabled = this.postsEnabled;
       this.postsEnabled = options.posts !== false;
@@ -492,13 +524,13 @@ class WidgetStore {
     // queued op must never see one without the other.
     await Promise.all([this.client.setToken(result.token), userKey ? _storage.SecureStorage.setItem(_storage.USER_KEY, userKey) : _storage.SecureStorage.removeItem(_storage.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;
@@ -508,6 +540,10 @@ class WidgetStore {
     const onScreenId = this.state.activeConversationId;
     if (onScreenId && this.isThreadOnScreen(onScreenId)) delete unreadByConversation[onScreenId];
     this.persistUnread(unreadByConversation);
+
+    // A new identity (anonymous → signed in) may hold other attributes, so
+    // nothing is skipped as "already sent" for it.
+    if (result.identityId !== this.state.identityId) this.userUpdates.forgetSent();
     this.setState(current => ({
       booted: true,
       loading: false,
@@ -736,9 +772,13 @@ class WidgetStore {
     if (!this.state.booted) await this.bootPromise;
     const customAttributes = sanitizeAttributes(attributes);
     if (Object.keys(customAttributes).length === 0) return;
-    await this.client.identify({
-      customAttributes
-    });
+    if (!this.throttleUpdateUserEnabled) {
+      await this.client.identify({
+        customAttributes
+      });
+      return;
+    }
+    await this.userUpdates.update(customAttributes);
   }
 
   /**
@@ -750,6 +790,7 @@ class WidgetStore {
     this.loggedOut = true;
     this.currentUser = null;
     this.pendingConversationId = null;
+    this.userUpdates.reset();
     this.realtime.close();
     this.clearTypingTimer();
     this.resetThreadTracking();
@@ -781,6 +822,8 @@ class WidgetStore {
   }
   async wipeSessionUnguarded() {
     this.realtime.close();
+    // Attributes waiting for the old visitor must never reach the next one.
+    this.userUpdates.reset();
     this.clearTypingTimer();
     this.resetThreadTracking();
     this.appStateSubscription?.remove();
@@ -789,16 +832,20 @@ 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();
+    (0, _localPreviews.clearLocalPreviews)();
+    (0, _useRetainedState.clearRetainedState)();
     this.setState({
       ...USER_SCOPED_STATE
     });
     const token = await this.client.getToken();
-    await Promise.all([this.client.clearToken(), _storage.SecureStorage.removeItem(_storage.USER_KEY), _storage.Storage.removeItem(_storage.UNREAD_KEY),
+    await Promise.all([this.client.clearToken(), _storage.SecureStorage.removeItem(_storage.USER_KEY), _storage.Storage.removeItem(_storage.UNREAD_KEY), _storage.Storage.removeItem(_storage.LAST_MESSAGE_KEY),
     // A new anonymous visitor on this device gets a new tracking identity.
     (0, _deviceId.rotateDeviceId)()]);
 
@@ -1178,10 +1225,11 @@ 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;
@@ -1219,11 +1267,12 @@ 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.
@@ -1321,10 +1370,112 @@ 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.Storage.setItem(_storage.LAST_MESSAGE_KEY, JSON.stringify(this.lastMessages));
+  }
+  async loadLastMessages(epoch) {
+    if (this.lastMessagesLoaded) return;
+    let stored = null;
+    try {
+      stored = JSON.parse((await _storage.Storage.getItem(_storage.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.Storage.setItem(_storage.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)
+    }));
   }
 
   /**
@@ -1333,16 +1484,22 @@ 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 : (0, _pickers.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() {
@@ -1598,10 +1755,10 @@ 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 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));
@@ -1612,6 +1769,7 @@ class WidgetStore {
           messageCursor: result.meta.nextCursor
         };
       });
+      this.learnLastMessage(conversationId, page);
     } catch {
       if (!this.isStale(epoch) && this.threadGeneration === generation) {
         this.setState({
@@ -1673,6 +1831,7 @@ 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 own = adoptOwnServerRows(current.messages, fresh);
         const known = new Set(own.map(message => message.id));
@@ -1839,6 +1998,15 @@ class WidgetStore {
     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
@@ -1900,23 +2068,30 @@ class WidgetStore {
     }
     let createdId = null;
     try {
-      // Local files go up first; the message names each by its upload token.
+      // 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
-      }) => fileUri ? {
+      }) => uploadToken ? {
         name,
         contentType,
         size,
-        uploadToken: await this.client.uploadAttachment({
+        uploadToken
+      } : fileUri ? {
+        name,
+        contentType,
+        size,
+        uploadToken: (await this.client.uploadAttachment({
           uri: fileUri,
           name,
           contentType,
           size
-        })
+        })).uploadToken
       } : {
         name,
         url,
@@ -1938,6 +2113,11 @@ class WidgetStore {
       });
       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.
@@ -1947,18 +2127,27 @@ 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
         };
@@ -1971,6 +2160,9 @@ 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);
@@ -2442,6 +2634,7 @@ class WidgetStore {
   // ─── Teardown (tests / hot reload) ──────────────────────────────────────
 
   destroy() {
+    this.userUpdates.destroy();
     this.clearPostRecheck();
     this.clearPostThanks();
     this.realtime.close();
@@ -2494,6 +2687,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 || (0, _html.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 => (0, _pickers.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]));
@@ -2541,13 +2793,31 @@ function mergeAttachments(local, server) {
   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 = local[index];
-    return isLocalAttachment(own) && attachment.url ? attachment : own;
+    const own = owns[index];
+    if (!isLocalAttachment(own) || !attachment.url) return own;
+    (0, _localPreviews.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