@repzo/widget-react-native 1.2.2 → 1.3.1

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

@@ -19,10 +19,11 @@ 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 { DEFAULT_BASE_URL } from "../types.js";
+import { canRetryMessage, isLocalMessage } from "../ui/utils/conversations.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.2.2';
+const SDK_VERSION = '@repzo/widget-react-native@1.3.1';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform() {
@@ -52,6 +53,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;
 
@@ -168,6 +171,13 @@ export class WidgetStore {
   /** True once `currentUserKey` mirrors storage — memory is then authoritative. */
   userKeyLoaded = false;
   pendingConversationId = null;
+
+  /**
+   * The screen a thread was opened from, so its back button returns there.
+   * Null when it was opened with the messenger closed (a push, a notification
+   * card, `presentConversation`): there is nothing to go back to.
+   */
+  chatOpenedFrom = null;
   appStateSubscription = null;
 
   /** When the app last went to the background (0: hasn't this session). */
@@ -177,6 +187,12 @@ export class WidgetStore {
   seenMessageIds = [];
   /** 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
@@ -266,6 +282,13 @@ export class WidgetStore {
       next.inAppNotification = null;
     }
     this.state = next;
+
+    // Recorded here because a thread opens from many places (home cards, the
+    // list, the Messages tab, posts) and each would otherwise have to say so.
+    const intoThread = next.view === 'chat' || next.view === 'prechat';
+    if (intoThread && previous.view !== 'chat' && previous.view !== 'prechat') {
+      this.chatOpenedFrom = previous.isOpen && (previous.view === 'home' || previous.view === 'conversations') ? previous.view : null;
+    }
     if (next.unreadCount !== previous.unreadCount) {
       this.events.emit(RepzoWidgetEvents.UnreadCountDidChange, {
         count: next.unreadCount
@@ -808,7 +831,9 @@ export class WidgetStore {
     this.threadGeneration += 1;
     this.conversationCreation = null;
     this.draftEvents = [];
+    this.failedActions.clear();
     this.cancelMarkRead();
+    this.cancelServerCopySync();
   }
   requireBootConfig() {
     if (!this.bootConfig) {
@@ -1124,7 +1149,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();
@@ -1155,10 +1183,11 @@ export class WidgetStore {
         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
         };
       }
@@ -1397,6 +1426,14 @@ export class WidgetStore {
       } : {})
     });
   }
+
+  /**
+   * The thread's back button: the screen it was opened from, or the
+   * conversation list when it was opened from outside the messenger.
+   */
+  leaveConversation() {
+    this.setView(this.chatOpenedFrom ?? (this.state.activeTab === 'messages' ? 'conversations' : 'home'));
+  }
   setActiveTab(tab) {
     if (tab === 'home') {
       this.setState({
@@ -1561,11 +1598,12 @@ export class WidgetStore {
       this.setState(current => {
         // Live replies and optimistic sends may have arrived since this page
         // was requested. Keep them, preferring the live copy for shared ids.
-        const liveIds = new Set(current.messages.map(message => message.id));
         const page = this.hydrateMessages(result.data);
+        const live = adoptOwnServerRows(current.messages, page);
+        const liveIds = new Set(live.map(message => message.id));
         const history = page.filter(message => !liveIds.has(message.id));
         return {
-          messages: sortByCreatedAt([...history, ...adoptServerAttachments(current.messages, page)]),
+          messages: sortByCreatedAt([...history, ...adoptServerAttachments(live, page)]),
           messagesLoading: false,
           hasMoreMessages: result.meta.hasMore,
           messageCursor: result.meta.nextCursor
@@ -1633,14 +1671,15 @@ export class WidgetStore {
       if (this.state.activeConversationId !== conversationId) return;
       const fresh = this.hydrateMessages(result.data);
       this.setState(current => {
-        const known = new Set(current.messages.map(message => message.id));
+        const own = adoptOwnServerRows(current.messages, fresh);
+        const known = new Set(own.map(message => message.id));
         const missing = fresh.filter(message => !known.has(message.id));
-        const upgraded = adoptServerStatuses(adoptServerDeletions(adoptServerAttachments(current.messages, fresh), fresh), 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) {
@@ -1665,6 +1704,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 => ({
@@ -1712,9 +1785,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();
@@ -1722,7 +1797,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,
@@ -1746,20 +1820,58 @@ 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);
+  }
+
+  /**
+   * 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
@@ -1785,24 +1897,41 @@ export class WidgetStore {
     }
     let createdId = null;
     try {
+      // Local files go up first; the message names each by its upload token.
+      const sentAttachments = await Promise.all(attachments.map(async ({
+        name,
+        url,
+        fileUri,
+        contentType,
+        size
+      }) => fileUri ? {
+        name,
+        contentType,
+        size,
+        uploadToken: await this.client.uploadAttachment({
+          uri: fileUri,
+          name,
+          contentType,
+          size
+        })
+      } : {
+        name,
+        url,
+        contentType,
+        size
+      }));
+      if (this.isStale(epoch)) return;
       const result = await this.client.sendMessage({
         conversationId: conversationId || undefined,
         forceNewConversation: !conversationId,
         body: trimmed,
-        attachments: attachments.length > 0 ? attachments.map(({
-          name,
-          url,
-          contentType,
-          size
-        }) => ({
-          name,
-          url,
-          contentType,
-          size
-        })) : undefined,
+        attachments: sentAttachments.length > 0 ? sentAttachments : undefined,
         visitorName: visitorProfile.name,
         visitorEmail: visitorProfile.email,
-        agentUiAction
+        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;
@@ -1839,8 +1968,15 @@ export class WidgetStore {
           } : {})
         };
       });
+
+      // New files to fetch the stored copy of: a fresh round of re-reads.
+      const sent = this.state.messages.find(message => message.id === result.messageId);
+      if (sent && hasLocalAttachments(sent)) this.serverCopyRetries = 0;
     } catch (error) {
       if (this.isStale(epoch)) throw error;
+      // The response was lost, but its stored row has already taken the
+      // bubble's place (newer Workstation deployments): it was sent.
+      if (this.state.messages.some(message => message.clientMessageId === tempId)) return;
       markFailed();
       throw error;
     } finally {
@@ -1851,6 +1987,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) {
@@ -2324,11 +2462,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));
@@ -2382,17 +2515,82 @@ 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 merged = server.map((attachment, index) => {
+    const own = local[index];
+    return isLocalAttachment(own) && attachment.url ? attachment : own;
+  });
+  return merged.every((attachment, index) => attachment === local[index]) ? local : merged;
+}
+
+/**
+ * Newer Workstation deployments echo `clientMessageId` on the visitor's own
+ * rows. Such a row replaces the pending or failed bubble it came from instead
+ * of showing beside it: no duplicate while a send is in flight, and no retry
+ * for a message that was stored although its response was lost.
+ */
+function adoptOwnServerRows(messages, 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;