@repzo/widget-react-native 1.3.0 → 1.4.0

package/src/state/widget-store.ts

@@ -10,13 +10,22 @@
 
 import { AppState, type AppStateStatus, Platform } from 'react-native';
 
-import { isTerminalErrorCode, RepzoWidgetError, WidgetApiClient } from '../api/client';
+import { isTerminalErrorCode, RepzoWidgetError, WidgetApiClient, type UploadedFile } from '../api/client';
 import { WidgetRealtime } from '../api/realtime';
 import { getDeviceId, rotateDeviceId } from '../device-id';
 import { EventEmitter, RepzoWidgetEvents } from '../events';
 import { PushManager } from '../push/push-notifications';
-import { CONFIG_KEY, LEGACY_CONFIG_KEY, SecureStorage, Storage, UNREAD_KEY, USER_KEY } from '../storage';
-import { setAttachmentOptions } from '../attachments/pickers';
+import {
+  CONFIG_KEY,
+  LAST_MESSAGE_KEY,
+  LEGACY_CONFIG_KEY,
+  SecureStorage,
+  Storage,
+  UNREAD_KEY,
+  USER_KEY,
+} from '../storage';
+import { clearLocalPreviews, rememberLocalPreview } from '../attachments/local-previews';
+import { guessContentType, isImageAttachment, setAttachmentOptions } from '../attachments/pickers';
 import { DEFAULT_BASE_URL } from '../types';
 import type {
   AgentUiAction,
@@ -37,10 +46,13 @@ import type {
   WidgetUser,
   WidgetView,
 } from '../types';
+import { clearRetainedState } from '../ui/hooks/use-retained-state';
+import { canRetryMessage, isLocalMessage } from '../ui/utils/conversations';
+import { stripHtml } from '../ui/utils/html';
 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.4.0';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform(): 'ios' | 'android' | 'web' {
@@ -61,6 +73,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). */
@@ -76,6 +94,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;
 
@@ -171,6 +191,10 @@ export class WidgetStore {
 
   /** `boot({ posts })` — Send posts over the app. */
   private postsEnabled = true;
+  /** `boot({ photoAlbums })` — a message's photos share one album in the thread. */
+  private photoAlbumsEnabled = true;
+  /** `boot({ youPrefix })` — "You:" before the visitor's own newest message in the lists. */
+  private youPrefixEnabled = true;
 
   /** Posts whose view was reported this session (the server also dedupes per day). */
   private viewedPostIds = new Set<string>();
@@ -233,8 +257,19 @@ export class WidgetStore {
   private visitorTypingActive = false;
 
   private seenMessageIds: string[] = [];
+
+  /** Who sent each thread's newest message and what it carried; see `withLastMessage`. */
+  private lastMessages: Record<string, LastMessageHint> = {};
+
+  private lastMessagesLoaded = false;
   /** 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
@@ -312,6 +347,10 @@ export class WidgetStore {
   /** Composer identity: explicit opens reset it; a draft receiving its server ID does not. */
   getThreadGeneration = (): number => this.threadGeneration;
 
+  showsPhotoAlbums = (): boolean => this.photoAlbumsEnabled;
+
+  showsYouPrefix = (): boolean => this.youPrefixEnabled;
+
   private setState(patch: Partial<WidgetState> | ((current: WidgetState) => Partial<WidgetState>)) {
     const previous = this.state;
     const resolved = typeof patch === 'function' ? patch(previous) : patch;
@@ -385,6 +424,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;
@@ -546,15 +587,15 @@ export class WidgetStore {
     ]);
     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: Record<string, number> = {};
     for (const conversation of conversations) {
       const count =
@@ -842,11 +883,15 @@ 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();
@@ -854,6 +899,7 @@ export class WidgetStore {
       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(),
     ]);
@@ -890,7 +936,9 @@ export class WidgetStore {
     this.threadGeneration += 1;
     this.conversationCreation = null;
     this.draftEvents = [];
+    this.failedActions.clear();
     this.cancelMarkRead();
+    this.cancelServerCopySync();
   }
 
   private requireBootConfig() {
@@ -1244,6 +1292,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';
@@ -1272,6 +1321,7 @@ 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
@@ -1279,10 +1329,7 @@ export class WidgetStore {
             conversation.id === conversationId
               ? {
                   ...conversation,
-                  snippet:
-                    message.messageType === 'message'
-                      ? message.bodyPlain || conversation.snippet
-                      : conversation.snippet,
+                  ...rowFields,
                   lastMessageAt: message.createdAt,
                   messageCount: conversation.messageCount + 1,
                 }
@@ -1291,12 +1338,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,
         };
       }
@@ -1323,12 +1371,14 @@ 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.
     if ((onScreen || readInPost) && isTeamReply && conversationId) this.scheduleMarkRead(conversationId);
@@ -1425,10 +1475,116 @@ export class WidgetStore {
   }
 
   private hydrateConversation(conversation: Conversation): 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.
+   */
+  private withLastMessage(conversation: Conversation): 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,
-      agentAvatar: this.client.resolveUrl(conversation.agentAvatar),
+      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.
+   */
+  private rememberLastMessage(
+    conversationId: string,
+    at: string,
+    fields: LastMessageFields,
+    source: 'sent' | 'stream' | 'history',
+    { messageId, pageIds }: { messageId?: string; pageIds?: ReadonlySet<string> } = {}
+  ): void {
+    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: LastMessageHint = {
+      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));
+  }
+
+  private async loadLastMessages(epoch: number): Promise<void> {
+    if (this.lastMessagesLoaded) return;
+    let stored: unknown = 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 as Record<string, Partial<LastMessageHint>>)) {
+        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. */
+  private learnLastMessage(conversationId: string, page: Message[]): void {
+    let newest: Message | null = 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
+      ),
+    }));
   }
 
   /**
@@ -1439,21 +1595,30 @@ export class WidgetStore {
     if (!Array.isArray(attachments) || attachments.length === 0) return null;
     const hydrated = attachments
       .filter((item): item is Record<string, unknown> => !!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) ?? '',
-      }));
+      .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;
   }
 
@@ -1694,19 +1859,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({ messagesLoading: false });
@@ -1764,17 +1931,19 @@ export class WidgetStore {
       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),
+          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 +1964,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 +2044,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 +2059,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 +2089,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 +2107,52 @@ export class WidgetStore {
       attachmentCount: attachments.length,
     });
 
-    const markFailed = () =>
+    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: { uri: string; name: string; contentType: string; size: number },
+    signal?: AbortSignal
+  ): Promise<UploadedFile> {
+    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: 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 +2161,7 @@ export class WidgetStore {
                 message.id === tempId ? { ...message, status: 'failed' } : message
               ),
       }));
+    };
 
     const epoch = this.epoch;
 
@@ -1928,26 +2189,43 @@ export class WidgetStore {
 
     let createdId: string | null = 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,
+        // 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.
@@ -1960,19 +2238,27 @@ export class WidgetStore {
                 : 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: 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,
         };
@@ -1988,8 +2274,16 @@ 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 {
@@ -2000,6 +2294,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 +2758,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));
@@ -2485,6 +2776,77 @@ function asDeletedPlaceholder(message: Message, deletedAt: string): Message {
   return { ...message, body: null, bodyPlain: null, attachments: null, metadata: null, deletedAt };
 }
 
+/** A message's words on one line; replies written in Workstation may only carry HTML. */
+function plainTextOf(message: Message): string {
+  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.
+ */
+interface LastMessageHint {
+  at: string;
+  fromVisitor: boolean;
+  attachment: 'photo' | 'file' | null;
+  phoneClock?: boolean;
+  /** A sent message's id: a page from Workstation that has it can retime it. */
+  messageId?: string;
+}
+
+/** `snippet` is absent when there's nothing to quote: the row keeps its words. */
+type LastMessageFields = Pick<Conversation, 'lastMessageAttachment' | 'lastMessageFromVisitor'> & {
+  snippet?: string;
+};
+
+/** The list row once `message` is the newest. Null keeps the row as it is: system rows and notes. */
+function rowFieldsOf(message: Message): LastMessageFields | null {
+  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: string,
+  contentTypes: Array<string | null | undefined>,
+  fromVisitor: boolean,
+  inlinePhoto = false
+): LastMessageFields {
+  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: Conversation, known: LastMessageHint): boolean {
+  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: Message[], server: Message[]): Message[] {
   const deleted = new Map(
@@ -2514,14 +2876,101 @@ 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: copy.attachments };
+    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 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: WidgetAttachment[], server: WidgetAttachment[]): WidgetAttachment[] {
+  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: 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;
+    // 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;