@repzo/widget-react-native 1.0.0 → 1.0.4

package/lib/module/ui/screens/chat/ChatView.js

@@ -6,24 +6,30 @@
  *
  * Mobile differences: older messages load through an explicit "Load earlier
  * messages" control (a scroll-anchored infinite list fights the keyboard), and
- * the composer hides the attach button because v1 has no picker.
+ * the attach button only shows when the host app has a picker to open (see
+ * `attachments/pickers.ts`).
  */
 
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Image, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { Animated, Easing, Image, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
 import { formatAgentUiActionMessage, getAgentUiBlocks, getProcedureForm } from "../../../agent-ui-blocks.js";
+import { MAX_ATTACHMENTS, isImageAttachment } from "../../../attachments/pickers.js";
 import { AgentUiBlocks } from "../../components/AgentUiBlocks.js";
+import { AttachmentChips } from "../../components/AttachmentChips.js";
+import { AttachmentMenu, showNativeAttachmentMenu } from "../../components/AttachmentMenu.js";
 import { Avatar } from "../../components/Avatar.js";
+import { ImageViewer } from "../../components/ImageViewer.js";
 import { WidgetErrorBoundary } from "../../components/ErrorBoundary.js";
 import { GradientBackground } from "../../components/Gradient.js";
-import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon } from "../../components/icons.js";
+import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PaperclipIcon } from "../../components/icons.js";
+import { TeamAvatars } from "../../components/TeamAvatars.js";
 import { Markdown } from "../../components/Markdown.js";
 import { useReduceMotion } from "../../hooks/use-reduce-motion.js";
 import { globalStyles } from "../../styles/global.js";
 import { contrastingTextColor, mixHex, palette, withAlpha } from "../../styles/theme.js";
 import { formatClockTime, formatDayLabel, isSameDay } from "../../utils/conversations.js";
 import { stripHtml } from "../../utils/html.js";
-import { openExternalUrl } from "../../utils/safe-url.js";
+import { isHttpUrl, openExternalUrl } from "../../utils/safe-url.js";
 import { backDirection, isRTL } from "../../utils/rtl.js";
 import { styles } from "./ChatView.styles.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -35,11 +41,17 @@ export function ChatView({
   color,
   agentName,
   agentAvatar,
+  agentOnline,
   isOnline,
+  teamName,
+  teamAvatars = [],
+  replyTimeLabel,
   locale,
   prefillText,
   offlineMessage,
   labels,
+  attachmentSources = [],
+  onPickAttachments,
   onSendMessage,
   onIdentifyVisitor,
   onLoadMore,
@@ -49,14 +61,38 @@ export function ChatView({
 }) {
   const [input, setInput] = useState(prefillText || '');
   const [composerFocused, setComposerFocused] = useState(false);
+  const [drafts, setDrafts] = useState([]);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [viewerImage, setViewerImage] = useState(null);
+  const [picking, setPicking] = useState(false);
+  // Only attachment sends hold the composer; text sends stay fire-and-forget.
+  const [sending, setSending] = useState(false);
+  const [notice, setNotice] = useState(null);
   const reduceMotion = useReduceMotion();
   const scrollRef = useRef(null);
   const typingStopTimer = useRef(null);
+  const noticeTimer = useRef(null);
+  const pickerTimer = useRef(null);
+  const mounted = useRef(false);
   useEffect(() => {
     if (prefillText) setInput(prefillText);
   }, [prefillText]);
-  useEffect(() => () => {
-    if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
+
+  // The provider keys this screen by the store's thread generation. Pending
+  // picks and sends belong to this mount, even before a draft gets a server ID.
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
+      if (noticeTimer.current) clearTimeout(noticeTimer.current);
+      if (pickerTimer.current) clearTimeout(pickerTimer.current);
+    };
+  }, []);
+  const showNotice = useCallback(message => {
+    if (noticeTimer.current) clearTimeout(noticeTimer.current);
+    setNotice(message);
+    if (message) noticeTimer.current = setTimeout(() => setNotice(null), 5000);
   }, []);
   const scrollToBottom = useCallback((animated = true) => {
     scrollRef.current?.scrollToEnd({
@@ -100,15 +136,101 @@ export function ChatView({
     viewportHeight.current = height;
     if (shrank) scrollToBottom(false);
   }, [scrollToBottom]);
-  const canSend = input.trim().length > 0;
+  const showAttach = attachmentSources.length > 0 && !!onPickAttachments;
+  const canSend = !sending && (input.trim().length > 0 || drafts.length > 0);
+  const problemLabel = problem => {
+    switch (problem) {
+      case 'tooMany':
+        return labels.attach.tooMany;
+      case 'tooLarge':
+        return labels.attach.tooLarge;
+      case 'tooLargeTogether':
+        return labels.attach.tooLargeTogether;
+      case 'cameraDenied':
+        return labels.attach.cameraDenied;
+      case 'failed':
+        return labels.attach.failed;
+      default:
+        return null;
+    }
+  };
+  const handlePick = async source => {
+    if (!mounted.current || !onPickAttachments || picking) return;
+    setPicking(true);
+    try {
+      const result = await onPickAttachments(source, drafts);
+      if (!mounted.current) return;
+      if (result.added.length > 0) {
+        setDrafts(current => [...current, ...result.added].slice(0, MAX_ATTACHMENTS));
+      }
+      showNotice(problemLabel(result.problem));
+    } finally {
+      if (mounted.current) setPicking(false);
+    }
+  };
+  const menuOptions = attachmentSources.map(source => ({
+    key: source,
+    label: source === 'photo' ? labels.attach.photoLibrary : source === 'camera' ? labels.attach.takePhoto : labels.attach.file
+  }));
+  const handleAttachPress = () => {
+    if (sending || picking) return;
+    if (drafts.length >= MAX_ATTACHMENTS) {
+      showNotice(labels.attach.tooMany);
+      return;
+    }
+    const only = attachmentSources.length === 1 ? attachmentSources[0] : undefined;
+    if (only) {
+      void handlePick(only);
+      return;
+    }
+    const native = showNativeAttachmentMenu(menuOptions, labels.attach.cancel, source => {
+      if (!mounted.current) return;
+      // Presenting a picker while the action sheet is still animating away
+      // fails silently on iOS; let it finish first.
+      pickerTimer.current = setTimeout(() => void handlePick(source), 350);
+    });
+    if (!native) setMenuOpen(true);
+  };
+  const handleMenuSelect = source => {
+    setMenuOpen(false);
+    void handlePick(source);
+  };
   const handleSend = () => {
     const trimmed = input.trim();
-    if (!trimmed) return;
+    if (!canSend) return;
     setInput('');
     if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
     onTyping(false);
-    onSendMessage(trimmed);
     scrollToBottom();
+    if (drafts.length === 0) {
+      // The failed bubble already surfaces a failure to the visitor.
+      onSendMessage(trimmed).catch(() => {});
+      return;
+    }
+    const sent = drafts;
+    setSending(true);
+    showNotice(null);
+    onSendMessage(trimmed, sent.map(draft => ({
+      name: draft.name,
+      url: draft.dataUrl,
+      contentType: draft.contentType,
+      size: draft.size,
+      previewUrl: draft.previewUri
+    }))).then(() => {
+      if (!mounted.current) return;
+      const sentIds = new Set(sent.map(draft => draft.id));
+      setDrafts(current => current.filter(draft => !sentIds.has(draft.id)));
+    }).catch(error => {
+      // The visitor has moved to another thread: nothing to restore there.
+      if (!mounted.current) return;
+      // Chips stay for a retry; put the text back too unless they've
+      // already started typing something else.
+      setInput(current => current || trimmed);
+      const status = error?.status;
+      showNotice(status === 413 ? labels.attach.tooLargeTogether : labels.failedToSend);
+    }).finally(() => {
+      if (mounted.current) setSending(false);
+    });
   };
   const handleChangeText = text => {
     setInput(text);
@@ -125,12 +247,19 @@ export function ChatView({
         phone: stringPayload(action.payload.phone)
       });
     }
-    onSendMessage(formatAgentUiActionMessage(action), undefined, action);
+    onSendMessage(formatAgentUiActionMessage(action), undefined, action).catch(() => {});
     scrollToBottom();
   }, [onIdentifyVisitor, onSendMessage, scrollToBottom]);
   const headerTextColor = contrastingTextColor(color);
   const onDarkHeader = headerTextColor === palette.white;
   const isEmptyThread = !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).
+  const lastChatMessage = [...messages].reverse().find(message => (message.messageType ?? 'message') === 'message' && !message.deletedAt);
+  const awaitingTeammate = !agentName && !agentTyping && lastChatMessage?.direction === 'inbound';
+  // "Sent" / "Seen" goes under the visitor's latest message only.
+  const lastVisitorMessageId = [...messages].reverse().find(message => message.direction === 'inbound' && (message.messageType ?? 'message') === 'message')?.id;
   // Two stops off the brand color: flat fill looked like an unstyled block.
   // A non-hex brand color falls through mixHex unchanged and renders solid.
   const headerGradient = [color, mixHex(color, '#000000', 0.16)];
@@ -157,7 +286,10 @@ export function ChatView({
           direction: backDirection(),
           color: headerTextColor
         })
-      }), /*#__PURE__*/_jsxs(View, {
+      }), agentName ?
+      /*#__PURE__*/
+      // A teammate joined: their photo, name and own presence.
+      _jsxs(View, {
         style: styles.headerIdentity,
         children: [/*#__PURE__*/_jsxs(View, {
           style: styles.avatarWrapper,
@@ -167,7 +299,7 @@ export function ChatView({
             size: 36,
             translucent: onDarkHeader,
             color: palette.ink
-          }), isOnline ? /*#__PURE__*/_jsx(View, {
+          }), agentIsActive ? /*#__PURE__*/_jsx(View, {
             style: styles.onlineDot
           }) : null]
         }), /*#__PURE__*/_jsxs(View, {
@@ -177,15 +309,48 @@ export function ChatView({
               color: headerTextColor
             }],
             numberOfLines: 1,
-            children: agentName || labels.team
+            children: agentName
           }), /*#__PURE__*/_jsx(Text, {
             style: [styles.headerStatus, {
               color: withAlpha(headerTextColor, 0.75)
             }],
             numberOfLines: 1,
-            children: isOnline ? labels.statusOnline : labels.statusAway
+            children: agentIsActive ? labels.statusOnline : labels.statusAway
           })]
         })]
+      }) :
+      /*#__PURE__*/
+      // No teammate yet, or the conversation closed: the team, Intercom-style.
+      _jsxs(View, {
+        style: styles.headerIdentity,
+        children: [/*#__PURE__*/_jsx(TeamAvatars, {
+          avatars: teamAvatars,
+          size: 30,
+          color: palette.ink,
+          ringColor: color,
+          translucent: onDarkHeader
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.headerText,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.headerName, {
+              color: headerTextColor
+            }],
+            numberOfLines: 1,
+            children: teamName || labels.team
+          }), replyTimeLabel ? /*#__PURE__*/_jsxs(View, {
+            style: styles.headerReplyTime,
+            children: [/*#__PURE__*/_jsx(ClockIcon, {
+              size: 12,
+              color: withAlpha(headerTextColor, 0.75)
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.headerStatus, styles.headerReplyTimeText, {
+                color: withAlpha(headerTextColor, 0.75)
+              }],
+              numberOfLines: 1,
+              children: replyTimeLabel
+            })]
+          }) : null]
+        })]
       }), /*#__PURE__*/_jsx(Pressable, {
         onPress: onClose,
         accessibilityRole: "button",
@@ -262,14 +427,26 @@ export function ChatView({
               message: message,
               color: color,
               labels: labels,
+              onOpenImage: setViewerImage,
               senderLabel: isAgentMessage && (startsRun || startsDay) ? message.senderName || agentName || labels.team : null,
               timeLabel: formatClockTime(message.createdAt, locale),
-              onSubmitProcedureForm: shouldShowProcedureForm(messages, message) ? body => onSendMessage(body) : undefined,
+              receiptLabel: message.id === lastVisitorMessageId ? receiptLabel(message, labels) : undefined,
+              onSubmitProcedureForm: shouldShowProcedureForm(messages, message) ? body => void onSendMessage(body).catch(() => {}) : undefined,
               onAgentUiAction: shouldShowAgentUiBlocks(messages, message) ? handleAgentUiAction : undefined
             })
           })]
         }, message.id);
-      }), agentTyping ? /*#__PURE__*/_jsxs(View, {
+      }), awaitingTeammate ? /*#__PURE__*/_jsxs(View, {
+        style: styles.waitingRow,
+        children: [/*#__PURE__*/_jsx(TeamAvatars, {
+          avatars: teamAvatars,
+          size: 20,
+          color: color
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.waitingText,
+          children: labels.waitingForTeammate
+        })]
+      }) : null, agentTyping ? /*#__PURE__*/_jsxs(View, {
         style: styles.typingRow,
         children: [/*#__PURE__*/_jsxs(View, {
           style: styles.typingBubble,
@@ -294,13 +471,44 @@ export function ChatView({
         style: styles.offlineText,
         children: offlineMessage
       })
-    }) : null, /*#__PURE__*/_jsx(View, {
+    }) : null, /*#__PURE__*/_jsxs(View, {
       style: styles.composerWrapper,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [styles.composer, composerFocused && styles.composerFocused, composerFocused && {
+      children: [notice ? /*#__PURE__*/_jsx(Text, {
+        style: styles.composerNotice,
+        accessibilityRole: "alert",
+        accessibilityLiveRegion: "polite",
+        children: notice
+      }) : null, drafts.length > 0 ? /*#__PURE__*/_jsx(AttachmentChips, {
+        attachments: drafts,
+        disabled: sending,
+        removeLabel: labels.attach.remove,
+        onRemove: id => {
+          setDrafts(current => current.filter(draft => draft.id !== id));
+          showNotice(null);
+        }
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: [styles.composer, showAttach && styles.composerWithAttach, composerFocused && styles.composerFocused, composerFocused && {
           borderColor: withAlpha(color, 0.55)
         }],
-        children: [/*#__PURE__*/_jsx(TextInput, {
+        children: [showAttach ? /*#__PURE__*/_jsx(Pressable, {
+          onPress: handleAttachPress,
+          disabled: sending || picking,
+          accessibilityRole: "button",
+          accessibilityLabel: labels.attach.button,
+          accessibilityState: {
+            disabled: sending || picking
+          }
+          // 36pt circle + 4pt on every side = a 44pt target.
+          ,
+          hitSlop: 4,
+          style: ({
+            pressed
+          }) => [styles.attachButton, (pressed || sending || picking) && globalStyles.pressed],
+          children: /*#__PURE__*/_jsx(PaperclipIcon, {
+            size: 20,
+            color: palette.textMuted
+          })
+        }) : null, /*#__PURE__*/_jsx(TextInput, {
           value: input,
           onChangeText: handleChangeText,
           onFocus: () => setComposerFocused(true),
@@ -328,7 +536,21 @@ export function ChatView({
             color: canSend ? contrastingTextColor(color) : palette.textSubtle
           })
         })]
-      })
+      })]
+    }), showAttach && Platform.OS !== 'ios' ? /*#__PURE__*/_jsx(AttachmentMenu, {
+      visible: menuOpen,
+      options: menuOptions,
+      cancelLabel: labels.attach.cancel,
+      onSelect: handleMenuSelect,
+      onClose: () => setMenuOpen(false)
+    }) : null, /*#__PURE__*/_jsx(ImageViewer, {
+      image: viewerImage,
+      labels: labels.viewer,
+      onClose: () => setViewerImage(null),
+      onOpenExternally: url => {
+        setViewerImage(null);
+        void openExternalUrl(url);
+      }
     })]
   });
 }
@@ -338,9 +560,29 @@ function MessageBubble({
   labels,
   senderLabel,
   timeLabel,
+  receiptLabel,
   onSubmitProcedureForm,
-  onAgentUiAction
+  onAgentUiAction,
+  onOpenImage
 }) {
+  const joinedName = message.metadata?.event === 'agent_joined' ? message.metadata?.agentName : null;
+  if (message.messageType === 'system' && typeof joinedName === 'string' && joinedName) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.systemRow, styles.joinedRow],
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        avatar: typeof message.metadata?.agentAvatar === 'string' ? message.metadata.agentAvatar : null,
+        name: joinedName,
+        size: 20,
+        color: palette.ink
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.systemText,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.joinedName,
+          children: joinedName
+        }), " ", labels.joinedConversation]
+      })]
+    });
+  }
   if (message.messageType === 'system') {
     const text = message.bodyPlain || stripHtml(message.body || '') || labels.conversationUpdated;
     return /*#__PURE__*/_jsx(View, {
@@ -352,6 +594,18 @@ function MessageBubble({
     });
   }
   const isVisitor = message.direction === 'inbound';
+  if (message.deletedAt) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.messageRow, isVisitor ? styles.messageRowRight : styles.messageRowLeft],
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.deletedBubble,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.deletedText,
+          children: labels.messageDeleted
+        })
+      })
+    });
+  }
   const rtl = isRTL();
   const messageText = message.bodyPlain || stripHtml(message.body || '');
   const hasBody = !!messageText;
@@ -379,7 +633,8 @@ function MessageBubble({
         style: [styles.attachments, hasBody && styles.attachmentsSpaced],
         children: message.attachments.map(attachment => /*#__PURE__*/_jsx(AttachmentPreview, {
           attachment: attachment,
-          isVisitor: isVisitor
+          isVisitor: isVisitor,
+          onOpenImage: onOpenImage
         }, attachment.id))
       }) : null, message.status === 'failed' ? /*#__PURE__*/_jsx(Text, {
         style: [styles.failedText, {
@@ -392,7 +647,10 @@ function MessageBubble({
         }],
         children: timeLabel
       }) : null]
-    }), agentUiBlocks.length > 0 && onAgentUiAction ? /*#__PURE__*/_jsx(AgentUiBlocks, {
+    }), receiptLabel ? /*#__PURE__*/_jsx(Text, {
+      style: styles.receiptText,
+      children: receiptLabel
+    }) : null, agentUiBlocks.length > 0 && onAgentUiAction ? /*#__PURE__*/_jsx(AgentUiBlocks, {
       blocks: agentUiBlocks,
       color: color,
       labels: labels.blocks,
@@ -405,16 +663,32 @@ function MessageBubble({
     }) : null]
   });
 }
+
+/** Sent once the server has it, Seen once a teammate opened the conversation. */
+function receiptLabel(message, labels) {
+  if (message.deletedAt || message.status === 'pending' || message.status === 'failed') return undefined;
+  return message.status === 'read' ? labels.messageSeen : labels.messageSent;
+}
 function AttachmentPreview({
   attachment,
-  isVisitor
+  isVisitor,
+  onOpenImage
 }) {
   // `url` is empty when the server sent a non-http(s) URL (see resolveUrl).
-  const isImage = attachment.contentType?.startsWith('image/') && !!attachment.url;
-  const open = () => void openExternalUrl(attachment.url);
+  // An unsent attachment shows its local file (or data URL): it renders, but
+  // there is nothing to open until the server copy arrives.
+  const [imageFailed, setImageFailed] = 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);
   if (isImage) {
     return /*#__PURE__*/_jsx(Pressable, {
       onPress: open,
+      disabled: !openable,
       accessibilityRole: "imagebutton",
       accessibilityLabel: attachment.name,
       children: /*#__PURE__*/_jsx(Image, {
@@ -424,11 +698,16 @@ function AttachmentPreview({
         style: styles.attachmentImage,
         resizeMode: "cover",
         accessibilityIgnoresInvertColors: true
+        // An image that can't load (expired link, deleted file) falls back to
+        // the file row below instead of an empty box.
+        ,
+        onError: () => setImageFailed(true)
       })
     });
   }
   return /*#__PURE__*/_jsx(Pressable, {
     onPress: open,
+    disabled: !openable,
     accessibilityRole: "button",
     style: [styles.attachmentFile, {
       borderColor: isVisitor ? withAlpha(palette.white, 0.35) : palette.border