@repzo/widget-react-native 1.2.2 → 1.3.1

package/src/audio/voice.ts

@@ -1,6 +1,9 @@
 /**
- * Voice notes (and any audio file) play inside the chat when the host app has
- * `expo-audio`; without it they stay a file row that opens in the browser.
+ * Voice notes (and any audio file) play inside the chat with the SDK's own
+ * native player (`src/audio/native-player.ts`). Where that isn't built into
+ * the app (Expo Go, bare React Native, an app built with SDK 1.2.2 or older),
+ * they play with the host app's `expo-audio` if it has one; otherwise they
+ * stay a file row that opens in the browser.
  *
  * Resolved once at module load, like the attachment pickers: each `require` is
  * static so Metro can see it, and with `allowOptionalDependencies` (see
@@ -8,6 +11,8 @@
  * `try` around it catches.
  */
 
+import { hasNativeVoicePlayer, useNativeVoicePlayer } from './native-player';
+
 let expoAudio: any = null;
 try {
   const mod = require('expo-audio');
@@ -31,9 +36,11 @@ try {
 /** How often the playhead moves while a note plays. */
 const UPDATE_INTERVAL_MS = 100;
 
-/** The installed expo-audio module, or null when the app doesn't have it. */
-export function voicePlaybackModule(): any {
-  return expoAudio;
+/** Which player voice notes use in this app, or null when audio stays a file row. */
+const backend: 'native' | 'expo-audio' | null = hasNativeVoicePlayer() ? 'native' : expoAudio ? 'expo-audio' : null;
+
+export function voicePlaybackBackend(): 'native' | 'expo-audio' | null {
+  return backend;
 }
 
 /** The second argument to `useAudioPlayer` for the installed expo-audio. */
@@ -41,9 +48,26 @@ export function audioPlayerOptions(): unknown {
   return takesOptionsObject ? { updateInterval: UPDATE_INTERVAL_MS } : UPDATE_INTERVAL_MS;
 }
 
+/** expo-audio's player for a note, on the same terms as the native one. */
+function useExpoAudioPlayer(url: string): { player: any; status: any } {
+  const player = expoAudio.useAudioPlayer({ uri: url }, audioPlayerOptions());
+  const status = expoAudio.useAudioPlayerStatus(player);
+  return { player, status };
+}
+
+/**
+ * The player for one note: `play()`, `pause()`, `seekTo(seconds)`,
+ * `setPlaybackRate(rate)`, and its status (`currentTime`, `duration`,
+ * `playing`, `isLoaded`, `isBuffering`, `didJustFinish`, `error`). Only use it
+ * when `voicePlaybackBackend()` isn't null. Picked once, since the backend
+ * never changes while the app runs.
+ */
+export const useVoicePlayer: (url: string) => { player: any; status: any } =
+  backend === 'native' ? useNativeVoicePlayer : useExpoAudioPlayer;
+
 /** Audio the chat can play in place: an `audio/*` attachment with a web address. */
 export function isPlayableAudio(contentType: string | null | undefined, url: string | null | undefined): boolean {
-  return !!expoAudio && (contentType ?? '').toLowerCase().startsWith('audio/') && /^https?:\/\//i.test(url ?? '');
+  return backend != null && (contentType ?? '').toLowerCase().startsWith('audio/') && /^https?:\/\//i.test(url ?? '');
 }
 
 // ─── One note at a time ─────────────────────────────────────────────────────

package/src/i18n.ts

@@ -82,6 +82,8 @@ export const DEFAULT_LABELS = {
   cameraPermissionDenied: 'Allow camera access in Settings to take a photo',
   cancel: 'Cancel',
   failedToSend: 'Failed to send',
+  // After "Failed to send" under a message the visitor can send again.
+  tapToRetry: 'Tap to retry',
   thinking: 'Typing',
   messages: 'Messages',
   noMessages: 'No messages yet',

package/src/locales.ts

@@ -38,6 +38,7 @@ const ar: LabelMap = {
   cameraPermissionDenied: 'اسمح بالوصول إلى الكاميرا من الإعدادات لالتقاط صورة',
   cancel: 'إلغاء',
   failedToSend: 'تعذر الإرسال',
+  tapToRetry: 'اضغط لإعادة المحاولة',
   thinking: 'يكتب',
   messages: 'الرسائل',
   noMessages: 'لا توجد رسائل بعد',

package/src/state/widget-store.ts

@@ -37,10 +37,11 @@ import type {
   WidgetUser,
   WidgetView,
 } from '../types';
+import { canRetryMessage, isLocalMessage } from '../ui/utils/conversations';
 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.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(): 'ios' | 'android' | 'web' {
@@ -76,6 +77,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;
 
@@ -216,6 +219,13 @@ export class WidgetStore {
 
   private pendingConversationId: string | null = 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.
+   */
+  private chatOpenedFrom: 'home' | 'conversations' | null = null;
+
   private appStateSubscription: { remove(): void } | null = null;
 
   /** When the app last went to the background (0: hasn't this session). */
@@ -228,6 +238,12 @@ export class WidgetStore {
   private seenMessageIds: string[] = [];
   /** 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
@@ -321,6 +337,14 @@ export class WidgetStore {
     }
     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 });
     }
@@ -875,7 +899,9 @@ export class WidgetStore {
     this.threadGeneration += 1;
     this.conversationCreation = null;
     this.draftEvents = [];
+    this.failedActions.clear();
     this.cancelMarkRead();
+    this.cancelServerCopySync();
   }
 
   private requireBootConfig() {
@@ -1229,6 +1255,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';
@@ -1276,12 +1303,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,
         };
       }
@@ -1524,6 +1552,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(): void {
+    this.setView(this.chatOpenedFrom ?? (this.state.activeTab === 'messages' ? 'conversations' : 'home'));
+  }
+
   setActiveTab(tab: WidgetSpaceType): void {
     if (tab === 'home') {
       this.setState({ activeTab: 'home', view: 'home' });
@@ -1674,11 +1710,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,
@@ -1742,16 +1779,17 @@ export class WidgetStore {
 
       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),
+          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) {
@@ -1772,6 +1810,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
@@ -1816,9 +1890,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,
@@ -1829,7 +1905,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,
@@ -1860,8 +1935,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', {
@@ -1869,7 +1953,40 @@ export class WidgetStore {
       attachmentCount: attachments.length,
     });
 
-    const markFailed = () =>
+    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: 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
@@ -1878,6 +1995,7 @@ export class WidgetStore {
                 message.id === tempId ? { ...message, status: 'failed' } : message
               ),
       }));
+    };
 
     const epoch = this.epoch;
 
@@ -1905,22 +2023,31 @@ export class WidgetStore {
 
     let createdId: string | null = 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,
+        // 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;
@@ -1965,8 +2092,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 {
@@ -1977,6 +2111,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();
     }
   }
 
@@ -2439,11 +2575,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));
@@ -2491,14 +2622,83 @@ 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 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: 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;

package/src/types.ts

@@ -64,6 +64,12 @@ export interface WidgetConfig {
   proactiveFrequency: 'session' | 'visitor';
   proactiveOpenMode: 'home' | 'new_message';
   attachmentsEnabled: boolean;
+  /**
+   * Largest file a visitor may attach. Set by servers that take uploads
+   * (`/api/widget/uploads`); absent on older ones, which only take files
+   * inline in the message.
+   */
+  maxAttachmentBytes?: number;
   analyticsEnabled: boolean;
   toursEnabled: boolean;
   defaultLocale: string;
@@ -94,7 +100,10 @@ export interface WidgetAttachment {
  */
 export interface OutgoingAttachment {
   name: string;
+  /** A base64 data URL; empty when `fileUri` is set. */
   url: string;
+  /** A local file uploaded before the message is sent (servers with `maxAttachmentBytes`). */
+  fileUri?: string;
   contentType: string;
   /** Decoded bytes. */
   size: number;
@@ -136,6 +145,14 @@ export interface Message {
   createdAt: string;
   /** Set when a teammate deleted the message; the content fields are then empty. */
   deletedAt?: string | null;
+  /**
+   * On the visitor's own messages: the id this device sent it under, which
+   * stays the same when a failed message is retried. Lets a stored message
+   * replace its pending or failed bubble. Only newer Workstation deployments
+   * send it.
+   * @since 1.3.1
+   */
+  clientMessageId?: string | null;
 }
 
 export interface OutboundMessage {

package/src/ui/WidgetProvider.tsx

@@ -25,11 +25,12 @@ import {
   MAX_ATTACHMENT_BYTES,
   MAX_ATTACHMENTS,
   pickAttachments,
+  type DraftAttachment,
 } from '../attachments/pickers';
 import { controller } from '../controller';
 import { buildLabels, createTranslator, formatLabel, localizeWelcomeText } from '../i18n';
 import { useWidgetState } from '../state/use-widget-state';
-import type { AgentUiAction, OutgoingAttachment, PostInteractionKind, WidgetSpaceType } from '../types';
+import type { AgentUiAction, AttachmentSource, OutgoingAttachment, PostInteractionKind, WidgetSpaceType } from '../types';
 import { WidgetErrorBoundary } from './components/ErrorBoundary';
 import { AlertIcon } from './components/icons';
 import { InAppNotification } from './components/InAppNotification';
@@ -163,13 +164,15 @@ export function RepzoWidgetProvider({
       file: labels.attachChooseFile,
       cancel: labels.cancel,
       remove: labels.removeAttachment,
-      tooLarge: formatLabel(labels.attachmentTooLarge, { max: formatBytes(MAX_ATTACHMENT_BYTES) }),
+      tooLarge: formatLabel(labels.attachmentTooLarge, {
+        max: formatBytes(theme.maxAttachmentBytes ?? MAX_ATTACHMENT_BYTES),
+      }),
       tooMany: formatLabel(labels.attachmentTooMany, { count: MAX_ATTACHMENTS }),
       tooLargeTogether: labels.attachmentsTooLargeTogether,
       failed: labels.attachmentFailed,
       cameraDenied: labels.cameraPermissionDenied,
     }),
-    [labels]
+    [labels, theme.maxAttachmentBytes]
   );
 
   // Stable across renders so each message bubble only re-renders when its
@@ -182,6 +185,7 @@ export function RepzoWidgetProvider({
       emptyConversation: labels.emptyConversation,
       messagePlaceholder: labels.messagePlaceholder,
       failedToSend: labels.failedToSend,
+      tapToRetry: labels.tapToRetry,
       openAttachment: labels.openAttachment,
       thinking: labels.thinking,
       team: labels.team,
@@ -238,6 +242,11 @@ export function RepzoWidgetProvider({
   const attachmentSources = theme.attachmentsEnabled ? getAttachmentSources() : [];
 
   const handleClose = useCallback(() => store.hide(), [store]);
+  const handlePickAttachments = useCallback(
+    (source: AttachmentSource, current: DraftAttachment[]) =>
+      pickAttachments(source, current, theme.maxAttachmentBytes),
+    [theme.maxAttachmentBytes]
+  );
 
   const handleOpenNotification = useCallback(
     (conversationId: string) => void store.openConversation(conversationId),
@@ -304,6 +313,7 @@ export function RepzoWidgetProvider({
       store.sendMessage(body, attachments ?? [], action),
     [store]
   );
+  const handleRetryMessage = useCallback((messageId: string) => store.retryMessage(messageId), [store]);
 
   const handleIdentifyVisitor = useCallback(
     (data: { email?: string; name?: string; phone?: string }) => store.identifyVisitor(data),
@@ -332,9 +342,7 @@ export function RepzoWidgetProvider({
     [store]
   );
 
-  const handleBack = useCallback(() => {
-    store.setView(state.activeTab === 'messages' ? 'conversations' : 'home');
-  }, [state.activeTab, store]);
+  const handleBack = useCallback(() => store.leaveConversation(), [store]);
 
   const handleStartConversation = useCallback(() => {
     if (!theme.allowNewConversations) return;
@@ -444,8 +452,9 @@ export function RepzoWidgetProvider({
           offlineMessage={theme.offlineMessage}
           labels={chatLabels}
           attachmentSources={attachmentSources}
-          onPickAttachments={pickAttachments}
+          onPickAttachments={handlePickAttachments}
           onSendMessage={handleSendMessage}
+          onRetryMessage={handleRetryMessage}
           onIdentifyVisitor={handleIdentifyVisitor}
           onRateConversation={handleRateConversation}
           onLoadMore={handleLoadMore}