@repzo/widget-react-native 1.3.0 → 1.3.1

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),
@@ -442,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}

package/src/ui/components/ImageViewer.tsx

@@ -17,6 +17,7 @@ import {
 
 import { useWidgetInsets } from '../hooks/use-widget-insets';
 import { fontSize, palette, spacing } from '../styles/theme';
+import { isHttpUrl } from '../utils/safe-url';
 import { CloseIcon } from './icons';
 import { ZoomableImage } from './ZoomableImage';
 
@@ -68,12 +69,15 @@ export function ImageViewer({ image, labels, onClose, onOpenExternally }: ImageV
         {image && state === 'failed' ? (
           <View style={[StyleSheet.absoluteFill, styles.center, styles.failed]}>
             <Text style={styles.failedText}>{labels.loadFailed}</Text>
-            <Pressable
-              onPress={() => onOpenExternally(image.url)}
-              accessibilityRole="button"
-              style={({ pressed }) => [styles.externalButton, pressed && styles.pressed]}>
-              <Text style={styles.externalLabel}>{labels.openExternally}</Text>
-            </Pressable>
+            {/* A visitor's local photo has no web copy to open yet. */}
+            {isHttpUrl(image.url) ? (
+              <Pressable
+                onPress={() => onOpenExternally(image.url)}
+                accessibilityRole="button"
+                style={({ pressed }) => [styles.externalButton, pressed && styles.pressed]}>
+                <Text style={styles.externalLabel}>{labels.openExternally}</Text>
+              </Pressable>
+            ) : null}
           </View>
         ) : null}
 

package/src/ui/components/icons.tsx

@@ -322,20 +322,18 @@ export function AlertIcon({ size = 16, color = palette.warningIcon, style }: Ico
   );
 }
 
-export function PaperclipIcon({ size = 18, color = palette.textMuted, style }: IconProps) {
-  const thickness = Math.max(1.5, size * 0.1);
+/** Two upright crossed bars — the composer's attach button. */
+export function PlusIcon({ size = 18, color = palette.textMuted, style }: IconProps) {
+  const thickness = Math.max(2, size * 0.1);
+  const bar: ViewStyle = {
+    position: 'absolute',
+    borderRadius: thickness / 2,
+    backgroundColor: color,
+  };
   return (
     <View style={[{ width: size, height: size }, styles.center, style]}>
-      <View
-        style={{
-          width: size * 0.42,
-          height: size * 0.82,
-          borderRadius: size * 0.21,
-          borderWidth: thickness,
-          borderColor: color,
-          transform: [{ rotate: '35deg' }],
-        }}
-      />
+      <View style={[bar, { width: size * 0.8, height: thickness }]} />
+      <View style={[bar, { width: thickness, height: size * 0.8 }]} />
     </View>
   );
 }

package/src/ui/screens/chat/ChatView.styles.ts

@@ -212,9 +212,19 @@ export const styles = StyleSheet.create({
     height: 140,
     borderRadius: radius.md,
   },
+  // Follows the bubble's side. Under the visitor's it lines up with
+  // `receiptText`, which it replaces on a failed message.
+  failedRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    marginTop: 3,
+    marginEnd: spacing.xs,
+  },
   failedText: {
-    fontSize: fontSize.caption,
-    marginTop: spacing.xs,
+    fontSize: 11,
+    fontWeight: '600',
+    color: palette.danger,
   },
   deletedBubble: {
     maxWidth: '80%',

package/src/ui/screens/chat/ChatView.tsx

@@ -49,14 +49,14 @@ import { ImageViewer } from '../../components/ImageViewer';
 import { getRatingRequest, RatingCard } from '../../components/RatingCard';
 import { WidgetErrorBoundary } from '../../components/ErrorBoundary';
 import { GradientBackground } from '../../components/Gradient';
-import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PaperclipIcon } from '../../components/icons';
+import { AlertIcon, ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PlusIcon } from '../../components/icons';
 import { TeamAvatars } from '../../components/TeamAvatars';
 import { Markdown } from '../../components/Markdown';
 import { useReduceMotion } from '../../hooks/use-reduce-motion';
 import { useTopInset } from '../../hooks/use-top-inset';
 import { globalStyles } from '../../styles/global';
 import { contrastingTextColor, mixHex, palette, spacing, withAlpha } from '../../styles/theme';
-import { formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
+import { canRetryMessage, formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
 import { stripHtml } from '../../utils/html';
 import { isHttpUrl, openExternalUrl } from '../../utils/safe-url';
 import { isPlayableAudio } from '../../../audio/voice';
@@ -87,6 +87,7 @@ export function ChatView({
   attachmentSources = [],
   onPickAttachments,
   onSendMessage,
+  onRetryMessage,
   onIdentifyVisitor,
   onRateConversation,
   defaultLocale,
@@ -268,6 +269,7 @@ export function ChatView({
       sent.map((draft) => ({
         name: draft.name,
         url: draft.dataUrl,
+        fileUri: draft.fileUri,
         contentType: draft.contentType,
         size: draft.size,
         previewUrl: draft.previewUri,
@@ -325,6 +327,16 @@ export function ChatView({
     [onSendMessage]
   );
 
+  // The retried bubble moves to the end of the thread; follow it there.
+  // A second failure shows on the bubble again.
+  const handleRetryMessage = useCallback(
+    (messageId: string) => {
+      onRetryMessage?.(messageId).catch(() => {});
+      scrollToBottom();
+    },
+    [onRetryMessage, scrollToBottom]
+  );
+
   // Recomputed only when the list changes — never on a keystroke.
   const thread = useMemo(() => deriveThread(messages), [messages]);
   const locales = useMemo(() => [locale, defaultLocale], [locale, defaultLocale]);
@@ -521,6 +533,7 @@ export function ChatView({
                   onAgentUiAction={
                     thread.agentBlocksShown.has(message.id) ? handleAgentUiAction : undefined
                   }
+                  onRetry={onRetryMessage && canRetryMessage(message) ? handleRetryMessage : undefined}
                 />
               </WidgetErrorBoundary>
             </Fragment>
@@ -592,7 +605,7 @@ export function ChatView({
                 styles.attachButton,
                 (pressed || sending || picking) && globalStyles.pressed,
               ]}>
-              <PaperclipIcon size={20} color={palette.textMuted} />
+              <PlusIcon size={20} color={palette.textMuted} />
             </Pressable>
           ) : null}
           <TextInput
@@ -663,6 +676,7 @@ const MessageBubble = memo(function MessageBubble({
   onOpenImage,
   onRateConversation,
   locales,
+  onRetry,
 }: {
   message: Message;
   color: string;
@@ -675,6 +689,8 @@ const MessageBubble = memo(function MessageBubble({
   onOpenImage: (image: { url: string; name: string }) => void;
   onRateConversation?: ChatViewProps['onRateConversation'];
   locales: Array<string | null | undefined>;
+  /** Re-sends this message when it failed. */
+  onRetry?: (messageId: string) => void;
 }) {
   const joinedName = message.metadata?.event === 'agent_joined' ? message.metadata?.agentName : null;
   if (message.messageType === 'system' && typeof joinedName === 'string' && joinedName) {
@@ -772,16 +788,6 @@ const MessageBubble = memo(function MessageBubble({
           </View>
         ) : null}
 
-        {message.status === 'failed' ? (
-          <Text
-            style={[
-              styles.failedText,
-              { color: isVisitor ? withAlpha(palette.white, 0.7) : palette.danger },
-            ]}>
-            {labels.failedToSend}
-          </Text>
-        ) : null}
-
         {timeLabel ? (
           <Text
             style={[
@@ -795,6 +801,22 @@ const MessageBubble = memo(function MessageBubble({
 
       {receiptLabel ? <Text style={styles.receiptText}>{receiptLabel}</Text> : null}
 
+      {/* Under the bubble, where Sent/Seen would be: in the danger color it
+          reads on any brand color, and the whole line is the retry target. */}
+      {message.status === 'failed' ? (
+        <Pressable
+          onPress={onRetry ? () => onRetry(message.id) : undefined}
+          disabled={!onRetry}
+          accessibilityRole={onRetry ? 'button' : 'text'}
+          hitSlop={8}
+          style={({ pressed }) => [styles.failedRow, pressed && globalStyles.pressed]}>
+          <AlertIcon size={12} color={palette.danger} />
+          <Text style={styles.failedText}>
+            {onRetry ? `${labels.failedToSend} · ${labels.tapToRetry}` : labels.failedToSend}
+          </Text>
+        </Pressable>
+      ) : null}
+
       {agentUiBlocks.length > 0 && onAgentUiAction ? (
         <AgentUiBlocks
           blocks={agentUiBlocks}
@@ -839,18 +861,20 @@ function AttachmentPreview({
   onOpenImage: (image: { url: string; name: string }) => void;
 }) {
   // `url` is empty when the server sent a non-http(s) URL (see resolveUrl).
-  // An unsent attachment shows its local file (or data URL): it renders, but
-  // there is nothing to open until the server copy arrives.
+  // The visitor's own attachment points at the picked file until the server
+  // copy replaces it (or is empty without one).
   const [imageFailed, setImageFailed] = useState(false);
   const [audioFailed, setAudioFailed] = useState(false);
   const isImage = isImageAttachment(attachment.contentType) && !!attachment.url && !imageFailed;
   const openable = isHttpUrl(attachment.url);
-  // Images open in the in-app viewer; other files (PDF, sheets) need the OS.
-  const open = !openable
-    ? undefined
-    : isImage
-      ? () => onOpenImage({ url: attachment.url, name: attachment.name })
-      : () => void openExternalUrl(attachment.url);
+  // Images open in the in-app viewer, a local photo too since it already
+  // renders here. Other files (PDF, sheets) need the OS, which can only open
+  // the server copy.
+  const open = isImage
+    ? () => onOpenImage({ url: attachment.url, name: attachment.name })
+    : openable
+      ? () => void openExternalUrl(attachment.url)
+      : undefined;
 
   // Voice notes from the team (and any other audio) play in place, like the
   // web Messenger — when the app has expo-audio; otherwise the file row below.
@@ -873,7 +897,6 @@ function AttachmentPreview({
     return (
       <Pressable
         onPress={open}
-        disabled={!openable}
         accessibilityRole="imagebutton"
         accessibilityLabel={attachment.name}>
         <Image

package/src/ui/screens/chat/ChatView.types.ts

@@ -21,6 +21,8 @@ export interface ChatLabels {
   emptyConversation: string;
   messagePlaceholder: string;
   failedToSend: string;
+  /** After `failedToSend` on a bubble that can be re-sent. */
+  tapToRetry: string;
   thinking: string;
   team: string;
   statusOnline: string;
@@ -104,6 +106,8 @@ export interface ChatViewProps {
     attachments?: OutgoingAttachment[],
     action?: AgentUiAction
   ) => Promise<void>;
+  /** Re-sends a failed bubble; rejects when it fails again. Absent: no retry. */
+  onRetryMessage?: (messageId: string) => Promise<void>;
   onIdentifyVisitor?: (data: { email?: string; name?: string; phone?: string }) => Promise<void>;
   /** Answers a rating card; rejects with the server error (409 locked, 410 expired). */
   onRateConversation?: (

package/src/ui/styles/theme.ts

@@ -68,6 +68,8 @@ export interface WidgetTheme {
   allowNewConversations: boolean;
   showPreviousConversations: boolean;
   attachmentsEnabled: boolean;
+  /** The server's upload cap; null when it only takes files inline in the message. */
+  maxAttachmentBytes: number | null;
   preChatEnabled: boolean;
 }
 
@@ -94,6 +96,10 @@ export function buildTheme(config: WidgetConfig | null): WidgetTheme {
     allowNewConversations: config?.allowNewConversations ?? true,
     showPreviousConversations: config?.showPreviousConversations ?? true,
     attachmentsEnabled: config?.attachmentsEnabled ?? true,
+    maxAttachmentBytes:
+      typeof config?.maxAttachmentBytes === 'number' && config.maxAttachmentBytes > 0
+        ? config.maxAttachmentBytes
+        : null,
     preChatEnabled: config?.preChatEnabled ?? false,
   };
 }

package/src/ui/utils/conversations.ts

@@ -1,11 +1,12 @@
 /**
  * Conversation selectors and formatting shared by the Home and Messages
- * spaces, so the two can never disagree about ordering or wording.
+ * spaces (and the store and chat thread, for message helpers), so they can
+ * never disagree about ordering or wording.
  * Pure and free of React so they stay trivial to test.
  */
 
 import { formatLabel } from '../../i18n';
-import type { Conversation } from '../../types';
+import type { Conversation, Message } from '../../types';
 
 export interface TeamAgent {
   name: string | null;
@@ -120,3 +121,16 @@ export function formatDayLabel(
     return date.toDateString();
   }
 }
+
+/** Optimistic visitor bubbles the server hasn't acknowledged (pending/failed). */
+export function isLocalMessage(message: Message): boolean {
+  return message.id.startsWith('temp-');
+}
+
+/**
+ * The visitor's own bubble that never reached the server. A `failed` status
+ * the server sets on any other message isn't something this device can re-send.
+ */
+export function canRetryMessage(message: Message): boolean {
+  return message.status === 'failed' && message.direction === 'inbound' && isLocalMessage(message);
+}