@repzo/widget-react-native 1.2.2 → 1.3.1

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

@@ -49,19 +49,20 @@ 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';
 import { VoiceNote, type VoiceNoteLabels } from '../../components/VoiceNote';
 import { FileCard } from '../../components/FileCard';
+import { MessagesSkeleton } from '../../components/MessagesSkeleton';
 import { backDirection, isRTL } from '../../utils/rtl';
 import { styles } from './ChatView.styles';
 import type { ChatLabels, ChatViewProps } from './ChatView.types';
@@ -86,6 +87,7 @@ export function ChatView({
   attachmentSources = [],
   onPickAttachments,
   onSendMessage,
+  onRetryMessage,
   onIdentifyVisitor,
   onRateConversation,
   defaultLocale,
@@ -267,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,
@@ -324,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]);
@@ -331,6 +344,7 @@ export function ChatView({
   const headerTextColor = contrastingTextColor(color);
   const onDarkHeader = headerTextColor === palette.white;
   const isEmptyThread = !loading && messages.length === 0;
+  const isLoadingThread = loading && messages.length === 0;
   const agentIsActive = agentOnline ?? isOnline;
   // "Waiting for a teammate" until someone replies: no teammate in the header
   // and the visitor spoke last (bot replies before that still count as waiting).
@@ -439,6 +453,7 @@ export function ChatView({
         contentContainerStyle={[
           styles.messagesContent,
           isEmptyThread && styles.messagesContentEmpty,
+          isLoadingThread && styles.messagesContentLoading,
         ]}
         keyboardShouldPersistTaps="handled"
         // Interactive dismissal drags the keyboard down under the finger while
@@ -455,9 +470,7 @@ export function ChatView({
           </Pressable>
         ) : null}
 
-        {loading && messages.length === 0 ? (
-          <Text style={styles.stateText}>{labels.loading}</Text>
-        ) : null}
+        {isLoadingThread ? <MessagesSkeleton color={color} label={labels.loading} /> : null}
 
         {isEmptyThread ? (
           <View style={styles.emptyState}>
@@ -520,6 +533,7 @@ export function ChatView({
                   onAgentUiAction={
                     thread.agentBlocksShown.has(message.id) ? handleAgentUiAction : undefined
                   }
+                  onRetry={onRetryMessage && canRetryMessage(message) ? handleRetryMessage : undefined}
                 />
               </WidgetErrorBoundary>
             </Fragment>
@@ -591,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
@@ -662,6 +676,7 @@ const MessageBubble = memo(function MessageBubble({
   onOpenImage,
   onRateConversation,
   locales,
+  onRetry,
 }: {
   message: Message;
   color: string;
@@ -674,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) {
@@ -771,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={[
@@ -794,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}
@@ -838,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.
@@ -872,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);
+}