@repzo/widget-react-native 1.0.0 → 1.0.4

package/lib/module/locales.js

@@ -19,6 +19,18 @@ const ar = {
   emptyConversation: 'أرسل رسالة لبدء المحادثة',
   messagePlaceholder: 'اكتب رسالة...',
   attachFile: 'إرفاق ملف',
+  attachPhotoLibrary: 'مكتبة الصور',
+  attachTakePhoto: 'التقاط صورة',
+  attachChooseFile: 'ملف',
+  removeAttachment: 'إزالة {name}',
+  attachmentTooLarge: 'الملف كبير جدًا (الحد الأقصى {max})',
+  attachmentTooMany: 'يمكنك إرفاق {count} ملفات كحد أقصى',
+  attachmentsTooLargeTogether: 'المرفقات كبيرة جدًا لإرسالها معًا — أرسل بعضها في رسالة أخرى',
+  attachmentFailed: 'تعذر إرفاق هذا الملف',
+  imageLoadFailed: 'تعذر تحميل هذه الصورة',
+  openImageExternally: 'فتح الصورة',
+  cameraPermissionDenied: 'اسمح بالوصول إلى الكاميرا من الإعدادات لالتقاط صورة',
+  cancel: 'إلغاء',
   failedToSend: 'تعذر الإرسال',
   thinking: 'يكتب',
   messages: 'الرسائل',
@@ -55,6 +67,11 @@ const ar = {
   today: 'اليوم',
   yesterday: 'أمس',
   conversationUpdated: 'تم تحديث المحادثة',
+  messageDeleted: 'تم حذف هذه الرسالة',
+  messageSent: 'تم الإرسال',
+  messageSeen: 'تمت المشاهدة',
+  waitingForTeammate: 'بانتظار أحد أعضاء الفريق',
+  joinedConversation: 'انضم إلى المحادثة',
   procedureSend: 'إرسال التفاصيل',
   procedureSent: 'تم الإرسال',
   fieldRequired: '{field} مطلوب',
@@ -63,6 +80,10 @@ const ar = {
   outboundTitle: 'تحديث جديد',
   outboundCta: 'اعرف المزيد',
   dismiss: 'تجاهل',
+  notificationReplyFrom: 'رد من {name}',
+  notificationNewReply: 'رد جديد',
+  notificationAttachment: 'أرسل مرفقًا',
+  notificationOpenHint: 'يفتح المحادثة',
   blockService: 'خدمة',
   blockProduct: 'منتج',
   blockChooseTime: 'اختر وقتًا',

package/lib/module/locales.js.map

@@ -1 +1 @@
-{"version":3,"names":["ar","back","loading","loadEarlier","emptyConversation","messagePlaceholder","attachFile","failedToSend","thinking","messages","noMessages","historyHidden","startBelow","preChatTitle","preChatSubtitle","preChatSkip","preChatSubmit","viewPreviousConversations","homeRecentTitle","homeViewAllCount","homeNoConversations","homeStatusOnline","homeStatusAway","unreadBadge","team","home","close","retry","connectionError","connecting","chatUnavailable","identityVerificationError","widgetCrashed","timeJustNow","timeMinutes","timeHours","timeDays","timeMonths","timeYears","today","yesterday","conversationUpdated","procedureSend","procedureSent","fieldRequired","invalidEmail","working","outboundTitle","outboundCta","dismiss","blockService","blockProduct","blockChooseTime","blockProfessional","blockPriceOffer","BUNDLED_TRANSLATIONS","baseLanguage","locale","split","toLowerCase"],"sourceRoot":"../../src","sources":["locales.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAMA,MAAMA,EAAY,GAAG;EACnBC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE,iBAAiB;EAC1BC,WAAW,EAAE,uBAAuB;EACpCC,iBAAiB,EAAE,0BAA0B;EAC7CC,kBAAkB,EAAE,eAAe;EACnCC,UAAU,EAAE,WAAW;EACvBC,YAAY,EAAE,cAAc;EAC5BC,QAAQ,EAAE,MAAM;EAChBC,QAAQ,EAAE,SAAS;EACnBC,UAAU,EAAE,mBAAmB;EAC/BC,aAAa,EAAE,oBAAoB;EACnCC,UAAU,EAAE,uBAAuB;EACnCC,YAAY,EAAE,aAAa;EAC3BC,eAAe,EAAE,mDAAmD;EACpEC,WAAW,EAAE,MAAM;EACnBC,aAAa,EAAE,eAAe;EAC9BC,yBAAyB,EAAE,uBAAuB;EAClDC,eAAe,EAAE,QAAQ;EACzBC,gBAAgB,EAAE,oBAAoB;EACtCC,mBAAmB,EAAE,oBAAoB;EACzCC,gBAAgB,EAAE,YAAY;EAC9BC,cAAc,EAAE,gBAAgB;EAChCC,WAAW,EAAE,oBAAoB;EACjCC,IAAI,EAAE,QAAQ;EACdC,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,gBAAgB;EACvBC,eAAe,EAAE,8CAA8C;EAC/DC,UAAU,EAAE,qBAAqB;EACjCC,eAAe,EAAE,4BAA4B;EAC7CC,yBAAyB,EAAE,mDAAmD;EAC9EC,aAAa,EAAE,aAAa;EAC5B;EACAC,WAAW,EAAE,MAAM;EACnBC,WAAW,EAAE,WAAW;EACxBC,SAAS,EAAE,WAAW;EACtBC,QAAQ,EAAE,WAAW;EACrBC,UAAU,EAAE,aAAa;EACzBC,SAAS,EAAE,aAAa;EACxBC,KAAK,EAAE,OAAO;EACdC,SAAS,EAAE,KAAK;EAChBC,mBAAmB,EAAE,mBAAmB;EACxCC,aAAa,EAAE,gBAAgB;EAC/BC,aAAa,EAAE,YAAY;EAC3BC,aAAa,EAAE,eAAe;EAC9BC,YAAY,EAAE,+BAA+B;EAC7CC,OAAO,EAAE,eAAe;EACxBC,aAAa,EAAE,YAAY;EAC3BC,WAAW,EAAE,aAAa;EAC1BC,OAAO,EAAE,OAAO;EAChBC,YAAY,EAAE,MAAM;EACpBC,YAAY,EAAE,MAAM;EACpBC,eAAe,EAAE,YAAY;EAC7BC,iBAAiB,EAAE,QAAQ;EAC3BC,eAAe,EAAE;AACnB,CAAC;AAED,OAAO,MAAMC,oBAA8C,GAAG;EAAEvD;AAAG,CAAC;;AAEpE;AACA,OAAO,SAASwD,YAAYA,CAACC,MAAsB,EAAU;EAC3D,OAAO,CAACA,MAAM,IAAI,EAAE,EAAEC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAEC,WAAW,CAAC,CAAC,IAAI,EAAE;AAC7D","ignoreList":[]}
+{"version":3,"names":["ar","back","loading","loadEarlier","emptyConversation","messagePlaceholder","attachFile","attachPhotoLibrary","attachTakePhoto","attachChooseFile","removeAttachment","attachmentTooLarge","attachmentTooMany","attachmentsTooLargeTogether","attachmentFailed","imageLoadFailed","openImageExternally","cameraPermissionDenied","cancel","failedToSend","thinking","messages","noMessages","historyHidden","startBelow","preChatTitle","preChatSubtitle","preChatSkip","preChatSubmit","viewPreviousConversations","homeRecentTitle","homeViewAllCount","homeNoConversations","homeStatusOnline","homeStatusAway","unreadBadge","team","home","close","retry","connectionError","connecting","chatUnavailable","identityVerificationError","widgetCrashed","timeJustNow","timeMinutes","timeHours","timeDays","timeMonths","timeYears","today","yesterday","conversationUpdated","messageDeleted","messageSent","messageSeen","waitingForTeammate","joinedConversation","procedureSend","procedureSent","fieldRequired","invalidEmail","working","outboundTitle","outboundCta","dismiss","notificationReplyFrom","notificationNewReply","notificationAttachment","notificationOpenHint","blockService","blockProduct","blockChooseTime","blockProfessional","blockPriceOffer","BUNDLED_TRANSLATIONS","baseLanguage","locale","split","toLowerCase"],"sourceRoot":"../../src","sources":["locales.ts"],"mappings":"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","ignoreList":[]}

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

@@ -17,9 +17,10 @@ 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 { DEFAULT_BASE_URL } from "../types.js";
 import { setOpenUrlHandler } from "../ui/utils/safe-url.js";
-const SDK_VERSION = '@repzo/widget-react-native@1.0.0';
+const SDK_VERSION = '@repzo/widget-react-native@1.0.4';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform() {
@@ -67,7 +68,8 @@ const INITIAL_STATE = {
   locale: 'en',
   prefillText: '',
   outboundMessage: null,
-  visitorProfile: {}
+  visitorProfile: {},
+  inAppNotification: null
 };
 
 /** Everything in state that belongs to the signed-in visitor. */
@@ -86,7 +88,8 @@ const USER_SCOPED_STATE = {
   unreadByConversation: {},
   prefillText: '',
   outboundMessage: null,
-  visitorProfile: {}
+  visitorProfile: {},
+  inAppNotification: null
 };
 export class WidgetStore {
   client = new WidgetApiClient();
@@ -100,6 +103,12 @@ export class WidgetStore {
   typingTimer = null;
   pendingAgentByConversation = {};
   bootConfig = null;
+
+  /** `boot({ inAppNotifications })` — the card over the app for new replies. */
+  inAppNotificationsEnabled = true;
+
+  /** The launch card (see showUnreadOnLaunch) is offered once per visitor session. */
+  launchCardOffered = false;
   bootPromise = null;
 
   /** Identity key of the in-flight boot — a boot for someone else is not deduped. */
@@ -116,6 +125,8 @@ export class WidgetStore {
   lastTypingPingAt = 0;
   visitorTypingActive = false;
   seenMessageIds = [];
+  /** Statuses (e.g. "read") that arrived for an id before a send response revealed it. */
+  earlyStatuses = new Map();
 
   /**
    * Identity generation. Bumped whenever boot/login/logout is requested; every
@@ -184,6 +195,9 @@ export class WidgetStore {
     };
   };
   getState = () => this.state;
+
+  /** Composer identity: explicit opens reset it; a draft receiving its server ID does not. */
+  getThreadGeneration = () => this.threadGeneration;
   setState(patch) {
     const previous = this.state;
     const resolved = typeof patch === 'function' ? patch(previous) : patch;
@@ -194,6 +208,13 @@ export class WidgetStore {
     // The total is always derived from the per-thread map, so no surface can
     // zero the badge while threads stay unread.
     next.unreadCount = sumUnread(next.unreadByConversation);
+    // The in-app card only lives while the messenger is closed and its thread
+    // is unread — opening the widget, reading the thread (here or on another
+    // device) or logging out all take it down without each path clearing it.
+    const card = next.inAppNotification;
+    if (card && (next.isOpen || !next.unreadByConversation[card.conversationId])) {
+      next.inAppNotification = null;
+    }
     this.state = next;
     if (next.unreadCount !== previous.unreadCount) {
       this.events.emit(RepzoWidgetEvents.UnreadCountDidChange, {
@@ -237,6 +258,10 @@ export class WidgetStore {
     }
     const baseUrl = assertSecureBaseUrl(options.baseUrl?.trim() || DEFAULT_BASE_URL);
     if (options.onOpenUrl !== undefined) setOpenUrlHandler(options.onOpenUrl ?? null);
+    if (options.attachments !== undefined) setAttachmentOptions(options.attachments ?? null);
+    if (options.inAppNotifications !== undefined) {
+      this.inAppNotificationsEnabled = options.inAppNotifications !== false;
+    }
     const sameTarget = this.bootConfig?.baseUrl === baseUrl && this.bootConfig?.channelAccountId === options.channelAccountId;
     const userKey = options.user ? identityKey(options.user) : null;
     if (sameTarget && this.bootPromise && (!userKey || userKey === this.bootingUserKey)) {
@@ -441,8 +466,12 @@ export class WidgetStore {
     if (this.pendingConversationId) {
       const conversationId = this.pendingConversationId;
       this.pendingConversationId = null;
+      // Launched into a thread (push tap): that is this session's launch, so
+      // a later silent re-init must not offer the card either.
+      this.launchCardOffered = true;
       void this.openConversation(conversationId);
     } else {
+      this.showUnreadOnLaunch();
       // A re-init after a 401 means the stream was down: catch the open
       // thread up (a no-op when nothing is on screen).
       void this.refreshOpenThread();
@@ -656,6 +685,7 @@ export class WidgetStore {
     this.seenMessageIds = [];
     this.visitorTypingActive = false;
     this.lastTypingPingAt = 0;
+    this.launchCardOffered = false;
     this.setState({
       ...USER_SCOPED_STATE
     });
@@ -794,7 +824,7 @@ export class WidgetStore {
     }
   }
   handleRealtimeEvent(event, data) {
-    if ((event === 'message.new' || event === 'conversation.event') && this.shouldHoldForDraft(data?.conversationId)) {
+    if ((event === 'message.new' || event === 'message.deleted' || event === 'message.status' || event === 'conversation.event') && this.shouldHoldForDraft(data?.conversationId)) {
       this.draftEvents.push({
         event,
         data
@@ -818,13 +848,20 @@ export class WidgetStore {
       case 'message.new':
         this.handleNewMessage(data);
         break;
+      case 'message.deleted':
+        this.handleDeletedMessage(data);
+        break;
+      case 'message.status':
+        this.handleMessageStatus(data);
+        break;
       case 'conversation.updated':
         this.rememberConversationAgent(data);
         this.setState(current => ({
           conversations: current.conversations.map(conversation => conversation.id === data?.conversationId ? {
             ...conversation,
             agentName: data.agentName === undefined ? conversation.agentName : data.agentName,
-            agentAvatar: data.agentAvatar === undefined ? conversation.agentAvatar : this.client.resolveUrl(data.agentAvatar)
+            agentAvatar: data.agentAvatar === undefined ? conversation.agentAvatar : this.client.resolveUrl(data.agentAvatar),
+            agentOnline: data.agentOnline === undefined ? conversation.agentOnline : data.agentOnline
           } : conversation)
         }));
         break;
@@ -922,6 +959,50 @@ export class WidgetStore {
     if (this.seenMessageIds.length > SEEN_MESSAGE_LIMIT) this.seenMessageIds.shift();
     return false;
   }
+
+  /**
+   * A teammate deleted a message: the visitor sees "This message was deleted"
+   * in its place (they can't delete anything themselves), and the list is
+   * refreshed so its preview stops showing the text. The id stays in
+   * `seenMessageIds`, so a replayed `message.new` can't restore the content.
+   */
+  /**
+   * A teammate opened the conversation: the visitor's messages are now Seen.
+   * The ids are also remembered, because the event can arrive before the send
+   * response swaps a pending bubble's temporary id for the server id.
+   */
+  handleMessageStatus(data) {
+    const ids = Array.isArray(data?.messageIds) ? data.messageIds : [];
+    const status = typeof data?.status === 'string' ? data.status : undefined;
+    if (!status || ids.length === 0) return;
+    for (const id of ids) this.earlyStatuses.set(id, status);
+    if (this.earlyStatuses.size > SEEN_MESSAGE_LIMIT) {
+      this.earlyStatuses.delete(this.earlyStatuses.keys().next().value);
+    }
+    if (!this.isThreadOnScreen(data?.conversationId)) return;
+    this.setState(current => ({
+      messages: current.messages.map(message => ids.includes(message.id) ? {
+        ...message,
+        status
+      } : message)
+    }));
+  }
+  handleDeletedMessage(data) {
+    const messageId = data?.messageId;
+    if (!messageId) return;
+    if (!this.seenMessageIds.includes(messageId)) this.isReplayedMessage(messageId);
+    if (this.isThreadOnScreen(data?.conversationId)) {
+      this.setState(current => ({
+        messages: current.messages.map(message => message.id === messageId ? asDeletedPlaceholder(message, new Date().toISOString()) : message)
+      }));
+    }
+    if (this.state.inAppNotification?.messageId === messageId) {
+      this.setState({
+        inAppNotification: null
+      });
+    }
+    void this.refreshConversations();
+  }
   handleNewMessage(data) {
     if (this.isReplayedMessage(data?.messageId)) return;
 
@@ -937,7 +1018,7 @@ export class WidgetStore {
       body: data?.body || null,
       bodyPlain: data?.bodyPlain || null,
       attachments: this.hydrateAttachments(data?.attachments, messageId),
-      metadata: data?.metadata || null,
+      metadata: this.hydrateMetadata(data?.metadata || null),
       status: 'delivered',
       createdAt: data?.createdAt || new Date().toISOString()
     };
@@ -962,7 +1043,7 @@ export class WidgetStore {
         const alreadyPresent = current.messages.some(existing => existing.id === message.id);
         return {
           conversations,
-          messages: alreadyPresent ? current.messages : [...current.messages, message],
+          messages: alreadyPresent ? adoptServerAttachments(current.messages, [message]) : [...current.messages, message],
           agentTyping: clearsTyping ? false : current.agentTyping
         };
       }
@@ -975,9 +1056,25 @@ export class WidgetStore {
       };
       this.persistUnread(unreadByConversation);
       countedAsUnread = true;
+      if (!this.inAppNotificationsEnabled || current.isOpen) {
+        return {
+          conversations,
+          unreadByConversation
+        };
+      }
+      // Newest reply wins: one card, not a stack, like the launcher badge.
+      const conversation = conversations.find(item => item.id === conversationId);
       return {
         conversations,
-        unreadByConversation
+        unreadByConversation,
+        inAppNotification: {
+          conversationId,
+          messageId,
+          senderName: message.senderName || conversation?.agentName || null,
+          senderAvatar: conversation?.agentAvatar ?? null,
+          preview: (message.bodyPlain ?? '').trim(),
+          hasAttachments: (message.attachments?.length ?? 0) > 0
+        }
       };
     });
 
@@ -1215,6 +1312,44 @@ export class WidgetStore {
       prefillText: prefill
     });
   }
+
+  /**
+   * Replies that arrived while the app was closed get the same card a live
+   * reply would, once per launch — so a visitor without push (not set up on
+   * the channel, or permission denied) still sees them. Only the newest unread
+   * thread; silent re-inits and foreground returns never re-offer it.
+   */
+  showUnreadOnLaunch() {
+    if (this.launchCardOffered || !this.inAppNotificationsEnabled) return;
+    this.launchCardOffered = true;
+    const {
+      isOpen,
+      inAppNotification,
+      conversations,
+      unreadByConversation
+    } = this.state;
+    if (isOpen || inAppNotification) return;
+    const time = conversation => Date.parse(conversation.lastMessageAt ?? conversation.createdAt) || 0;
+    const newest = conversations.filter(conversation => (unreadByConversation[conversation.id] ?? 0) > 0).sort((a, b) => time(b) - time(a))[0];
+    if (!newest) return;
+    this.setState({
+      inAppNotification: {
+        conversationId: newest.id,
+        messageId: `launch-${newest.id}`,
+        senderName: newest.agentName,
+        senderAvatar: newest.agentAvatar,
+        preview: (newest.snippet ?? '').trim(),
+        hasAttachments: false
+      }
+    });
+  }
+
+  /** The visitor swiped the in-app card away; the thread stays unread. */
+  dismissInAppNotification() {
+    if (this.state.inAppNotification) this.setState({
+      inAppNotification: null
+    });
+  }
   dismissOutboundMessage() {
     const outbound = this.state.outboundMessage;
     if (outbound?.id) this.track('widget_outbound_dismissed', {
@@ -1294,9 +1429,10 @@ export class WidgetStore {
         // 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 history = this.hydrateMessages(result.data).filter(message => !liveIds.has(message.id));
+        const page = this.hydrateMessages(result.data);
+        const history = page.filter(message => !liveIds.has(message.id));
         return {
-          messages: sortByCreatedAt([...history, ...current.messages]),
+          messages: sortByCreatedAt([...history, ...adoptServerAttachments(current.messages, page)]),
           messagesLoading: false,
           hasMoreMessages: result.meta.hasMore,
           messageCursor: result.meta.nextCursor
@@ -1366,7 +1502,10 @@ export class WidgetStore {
       this.setState(current => {
         const known = new Set(current.messages.map(message => message.id));
         const missing = fresh.filter(message => !known.has(message.id));
-        if (missing.length === 0) return {};
+        const upgraded = adoptServerStatuses(adoptServerDeletions(adoptServerAttachments(current.messages, 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;
         // No overlap means the gap is longer than a page: restart from the
@@ -1379,7 +1518,7 @@ export class WidgetStore {
           };
         }
         return {
-          messages: sortByCreatedAt([...current.messages, ...missing])
+          messages: sortByCreatedAt([...upgraded, ...missing])
         };
       });
       // The server just moved the read cursor — mirror it locally.
@@ -1397,9 +1536,26 @@ export class WidgetStore {
   hydrateMessages(page) {
     return page.map(message => ({
       ...message,
-      attachments: this.hydrateAttachments(message.attachments, message.id)
+      attachments: this.hydrateAttachments(message.attachments, message.id),
+      metadata: this.hydrateMetadata(message.metadata)
     })).reverse();
   }
+
+  /** The "joined" line's avatar can be a server-relative media path. */
+  hydrateMetadata(metadata) {
+    if (!metadata || typeof metadata.agentAvatar !== 'string') return metadata ?? null;
+    return {
+      ...metadata,
+      agentAvatar: this.client.resolveUrl(metadata.agentAvatar)
+    };
+  }
+
+  /**
+   * 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.
+   */
   async sendMessage(body, attachments = [], agentUiAction) {
     const trimmed = body.trim();
     if (!trimmed && attachments.length === 0) return;
@@ -1416,7 +1572,16 @@ export class WidgetStore {
       senderName: visitorProfile.name || 'You',
       body: trimmed ? `<p>${trimmed}</p>` : '',
       bodyPlain: trimmed,
-      attachments: attachments.length > 0 ? attachments : null,
+      // The local preview, never a data URL: the bubble shows up at once and
+      // state never holds megabytes of base64. Without a local file the
+      // bubble shows the name until the server copy replaces it.
+      attachments: attachments.length > 0 ? attachments.map((attachment, index) => ({
+        id: `${tempId}-${index}`,
+        name: attachment.name,
+        url: attachment.previewUrl && !/^data:/i.test(attachment.previewUrl) ? attachment.previewUrl : '',
+        contentType: attachment.contentType,
+        size: attachment.size
+      })) : null,
       metadata: null,
       status: 'pending',
       createdAt: new Date().toISOString()
@@ -1430,7 +1595,7 @@ export class WidgetStore {
       attachmentCount: attachments.length
     });
     const markFailed = () => this.setState(current => ({
-      messages: current.messages.map(message => message.id === tempId ? {
+      messages: attachments.length > 0 ? current.messages.filter(message => message.id !== tempId) : current.messages.map(message => message.id === tempId ? {
         ...message,
         status: 'failed'
       } : message)
@@ -1455,7 +1620,7 @@ export class WidgetStore {
       // don't open a thread nobody is looking at.
       if (!conversationId && this.threadGeneration !== generation) {
         markFailed();
-        return;
+        throw new Error('The conversation this message was queued for was never created');
       }
     }
     let createdId = null;
@@ -1464,7 +1629,17 @@ export class WidgetStore {
         conversationId: conversationId || undefined,
         forceNewConversation: !conversationId,
         body: trimmed,
-        attachments: attachments.length > 0 ? attachments : undefined,
+        attachments: attachments.length > 0 ? attachments.map(({
+          name,
+          url,
+          contentType,
+          size
+        }) => ({
+          name,
+          url,
+          contentType,
+          size
+        })) : undefined,
         visitorName: visitorProfile.name,
         visitorEmail: visitorProfile.email,
         agentUiAction
@@ -1478,7 +1653,7 @@ export class WidgetStore {
         const messages = delivered ? current.messages.filter(message => message.id !== tempId) : current.messages.map(message => message.id === tempId ? {
           ...message,
           id: result.messageId,
-          status: 'sent'
+          status: this.earlyStatuses.get(result.messageId) ?? 'sent'
         } : message);
         if (!createdId) return {
           messages
@@ -1612,6 +1787,69 @@ function isLocalMessage(message) {
   return message.id.startsWith('temp-');
 }
 
+/**
+ * A sent visitor message keeps its local previews (a `file://` URI, or no URL
+ * at all) until the server copy shows up — the stream echo or a history page.
+ * Its attachments, the only ones that can be opened, then replace them.
+ */
+/** 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));
+  if (seen.size === 0) return messages;
+  let changed = false;
+  const next = messages.map(message => {
+    if (!seen.has(message.id) || message.status === 'read') return message;
+    changed = true;
+    return {
+      ...message,
+      status: 'read'
+    };
+  });
+  return changed ? next : messages;
+}
+
+/** Keeps who/when, drops everything the visitor could read. */
+function asDeletedPlaceholder(message, deletedAt) {
+  return {
+    ...message,
+    body: null,
+    bodyPlain: null,
+    attachments: null,
+    metadata: null,
+    deletedAt
+  };
+}
+
+/** 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]));
+  if (deleted.size === 0) return messages;
+  let changed = false;
+  const next = messages.map(message => {
+    const deletedAt = deleted.get(message.id);
+    if (!deletedAt || message.deletedAt) return message;
+    changed = true;
+    return asDeletedPlaceholder(message, deletedAt);
+  });
+  return changed ? next : messages;
+}
+function adoptServerAttachments(messages, server) {
+  const serverCopies = new Map(server.filter(message => message.attachments?.length).map(message => [message.id, message]));
+  if (serverCopies.size === 0) return messages;
+  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;
+    changed = true;
+    return {
+      ...message,
+      attachments: copy.attachments
+    };
+  });
+  return changed ? next : messages;
+}
+
 /** Stable, so same-instant rows keep their order; bad dates sort as oldest. */
 function sortByCreatedAt(messages) {
   const time = message => Date.parse(message.createdAt) || 0;