@repzo/widget-react-native 1.0.0 → 1.0.4

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

@@ -4,7 +4,8 @@
  *
  * 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';
@@ -12,6 +13,7 @@ import {
   Animated,
   Easing,
   Image,
+  Platform,
   Pressable,
   ScrollView,
   Text,
@@ -25,19 +27,35 @@ import {
   getAgentUiBlocks,
   getProcedureForm,
 } from '../../../agent-ui-blocks';
-import type { AgentUiAction, AgentProcedureForm, Message, WidgetAttachment } from '../../../types';
+import {
+  MAX_ATTACHMENTS,
+  isImageAttachment,
+  type AttachmentProblem,
+  type DraftAttachment,
+} from '../../../attachments/pickers';
+import type {
+  AgentUiAction,
+  AgentProcedureForm,
+  AttachmentSource,
+  Message,
+  WidgetAttachment,
+} from '../../../types';
 import { AgentUiBlocks } from '../../components/AgentUiBlocks';
+import { AttachmentChips } from '../../components/AttachmentChips';
+import { AttachmentMenu, showNativeAttachmentMenu } from '../../components/AttachmentMenu';
 import { Avatar } from '../../components/Avatar';
+import { ImageViewer } from '../../components/ImageViewer';
 import { WidgetErrorBoundary } from '../../components/ErrorBoundary';
 import { GradientBackground } from '../../components/Gradient';
-import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon } from '../../components/icons';
+import { ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PaperclipIcon } from '../../components/icons';
+import { TeamAvatars } from '../../components/TeamAvatars';
 import { Markdown } from '../../components/Markdown';
 import { useReduceMotion } from '../../hooks/use-reduce-motion';
 import { globalStyles } from '../../styles/global';
 import { contrastingTextColor, mixHex, palette, withAlpha } from '../../styles/theme';
 import { formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
 import { stripHtml } from '../../utils/html';
-import { openExternalUrl } from '../../utils/safe-url';
+import { isHttpUrl, openExternalUrl } from '../../utils/safe-url';
 import { backDirection, isRTL } from '../../utils/rtl';
 import { styles } from './ChatView.styles';
 import type { ChatLabels, ChatViewProps } from './ChatView.types';
@@ -50,11 +68,17 @@ export function ChatView({
   color,
   agentName,
   agentAvatar,
+  agentOnline,
   isOnline,
+  teamName,
+  teamAvatars = [],
+  replyTimeLabel,
   locale,
   prefillText,
   offlineMessage,
   labels,
+  attachmentSources = [],
+  onPickAttachments,
   onSendMessage,
   onIdentifyVisitor,
   onLoadMore,
@@ -64,20 +88,41 @@ export function ChatView({
 }: ChatViewProps) {
   const [input, setInput] = useState(prefillText || '');
   const [composerFocused, setComposerFocused] = useState(false);
+  const [drafts, setDrafts] = useState<DraftAttachment[]>([]);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [viewerImage, setViewerImage] = useState<{ url: string; name: string } | null>(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<string | null>(null);
   const reduceMotion = useReduceMotion();
   const scrollRef = useRef<ScrollView>(null);
   const typingStopTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const noticeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pickerTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const mounted = useRef(false);
 
   useEffect(() => {
     if (prefillText) setInput(prefillText);
   }, [prefillText]);
 
-  useEffect(
-    () => () => {
+  // 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: string | null) => {
+    if (noticeTimer.current) clearTimeout(noticeTimer.current);
+    setNotice(message);
+    if (message) noticeTimer.current = setTimeout(() => setNotice(null), 5000);
+  }, []);
 
   const scrollToBottom = useCallback((animated = true) => {
     scrollRef.current?.scrollToEnd({ animated });
@@ -122,16 +167,120 @@ export function ChatView({
     [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: AttachmentProblem | null): string | null => {
+    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: AttachmentSource) => {
+    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: AttachmentSource) => {
+    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: unknown) => {
+        // 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 as { status?: unknown } | null)?.status;
+        showNotice(status === 413 ? labels.attach.tooLargeTogether : labels.failedToSend);
+      })
+      .finally(() => {
+        if (mounted.current) setSending(false);
+      });
   };
 
   const handleChangeText = (text: string) => {
@@ -156,7 +305,7 @@ export function ChatView({
           phone: stringPayload(action.payload.phone),
         });
       }
-      onSendMessage(formatAgentUiActionMessage(action), undefined, action);
+      onSendMessage(formatAgentUiActionMessage(action), undefined, action).catch(() => {});
       scrollToBottom();
     },
     [onIdentifyVisitor, onSendMessage, scrollToBottom]
@@ -165,6 +314,17 @@ export function ChatView({
   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)];
@@ -190,28 +350,57 @@ export function ChatView({
           <ChevronIcon size={18} direction={backDirection()} color={headerTextColor} />
         </Pressable>
 
-        <View style={styles.headerIdentity}>
-          <View style={styles.avatarWrapper}>
-            <Avatar
-              avatar={agentAvatar}
-              name={agentName}
-              size={36}
-              translucent={onDarkHeader}
+        {agentName ? (
+          // A teammate joined: their photo, name and own presence.
+          <View style={styles.headerIdentity}>
+            <View style={styles.avatarWrapper}>
+              <Avatar
+                avatar={agentAvatar}
+                name={agentName}
+                size={36}
+                translucent={onDarkHeader}
+                color={palette.ink}
+              />
+              {agentIsActive ? <View style={styles.onlineDot} /> : null}
+            </View>
+            <View style={styles.headerText}>
+              <Text style={[styles.headerName, { color: headerTextColor }]} numberOfLines={1}>
+                {agentName}
+              </Text>
+              <Text
+                style={[styles.headerStatus, { color: withAlpha(headerTextColor, 0.75) }]}
+                numberOfLines={1}>
+                {agentIsActive ? labels.statusOnline : labels.statusAway}
+              </Text>
+            </View>
+          </View>
+        ) : (
+          // No teammate yet, or the conversation closed: the team, Intercom-style.
+          <View style={styles.headerIdentity}>
+            <TeamAvatars
+              avatars={teamAvatars}
+              size={30}
               color={palette.ink}
+              ringColor={color}
+              translucent={onDarkHeader}
             />
-            {isOnline ? <View style={styles.onlineDot} /> : null}
-          </View>
-          <View style={styles.headerText}>
-            <Text style={[styles.headerName, { color: headerTextColor }]} numberOfLines={1}>
-              {agentName || labels.team}
-            </Text>
-            <Text
-              style={[styles.headerStatus, { color: withAlpha(headerTextColor, 0.75) }]}
-              numberOfLines={1}>
-              {isOnline ? labels.statusOnline : labels.statusAway}
-            </Text>
+            <View style={styles.headerText}>
+              <Text style={[styles.headerName, { color: headerTextColor }]} numberOfLines={1}>
+                {teamName || labels.team}
+              </Text>
+              {replyTimeLabel ? (
+                <View style={styles.headerReplyTime}>
+                  <ClockIcon size={12} color={withAlpha(headerTextColor, 0.75)} />
+                  <Text
+                    style={[styles.headerStatus, styles.headerReplyTimeText, { color: withAlpha(headerTextColor, 0.75) }]}
+                    numberOfLines={1}>
+                    {replyTimeLabel}
+                  </Text>
+                </View>
+              ) : null}
+            </View>
           </View>
-        </View>
+        )}
 
         <Pressable
           onPress={onClose}
@@ -292,15 +481,17 @@ 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)}
+                  receiptLabel={message.id === lastVisitorMessageId ? receiptLabel(message, labels) : undefined}
                   onSubmitProcedureForm={
                     shouldShowProcedureForm(messages, message)
-                      ? (body) => onSendMessage(body)
+                      ? (body) => void onSendMessage(body).catch(() => {})
                       : undefined
                   }
                   onAgentUiAction={
@@ -312,6 +503,13 @@ export function ChatView({
           );
         })}
 
+        {awaitingTeammate ? (
+          <View style={styles.waitingRow}>
+            <TeamAvatars avatars={teamAvatars} size={20} color={color} />
+            <Text style={styles.waitingText}>{labels.waitingForTeammate}</Text>
+          </View>
+        ) : null}
+
         {agentTyping ? (
           <View style={styles.typingRow}>
             <View style={styles.typingBubble}>
@@ -331,12 +529,48 @@ export function ChatView({
       ) : null}
 
       <View style={styles.composerWrapper}>
+        {notice ? (
+          <Text
+            style={styles.composerNotice}
+            accessibilityRole="alert"
+            accessibilityLiveRegion="polite">
+            {notice}
+          </Text>
+        ) : null}
+        {drafts.length > 0 ? (
+          <AttachmentChips
+            attachments={drafts}
+            disabled={sending}
+            removeLabel={labels.attach.remove}
+            onRemove={(id) => {
+              setDrafts((current) => current.filter((draft) => draft.id !== id));
+              showNotice(null);
+            }}
+          />
+        ) : null}
         <View
           style={[
             styles.composer,
+            showAttach && styles.composerWithAttach,
             composerFocused && styles.composerFocused,
             composerFocused && { borderColor: withAlpha(color, 0.55) },
           ]}>
+          {showAttach ? (
+            <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,
+              ]}>
+              <PaperclipIcon size={20} color={palette.textMuted} />
+            </Pressable>
+          ) : null}
           <TextInput
             value={input}
             onChangeText={handleChangeText}
@@ -366,6 +600,25 @@ export function ChatView({
           </Pressable>
         </View>
       </View>
+
+      {showAttach && Platform.OS !== 'ios' ? (
+        <AttachmentMenu
+          visible={menuOpen}
+          options={menuOptions}
+          cancelLabel={labels.attach.cancel}
+          onSelect={handleMenuSelect}
+          onClose={() => setMenuOpen(false)}
+        />
+      ) : null}
+      <ImageViewer
+        image={viewerImage}
+        labels={labels.viewer}
+        onClose={() => setViewerImage(null)}
+        onOpenExternally={(url) => {
+          setViewerImage(null);
+          void openExternalUrl(url);
+        }}
+      />
     </View>
   );
 }
@@ -376,17 +629,38 @@ function MessageBubble({
   labels,
   senderLabel,
   timeLabel,
+  receiptLabel,
   onSubmitProcedureForm,
   onAgentUiAction,
+  onOpenImage,
 }: {
   message: Message;
   color: string;
   labels: ChatLabels;
   senderLabel?: string | null;
   timeLabel: string;
+  receiptLabel?: string;
   onSubmitProcedureForm?: (body: string) => void;
   onAgentUiAction?: (action: AgentUiAction) => void | Promise<void>;
+  onOpenImage: (image: { url: string; name: string }) => void;
 }) {
+  const joinedName = message.metadata?.event === 'agent_joined' ? message.metadata?.agentName : null;
+  if (message.messageType === 'system' && typeof joinedName === 'string' && joinedName) {
+    return (
+      <View style={[styles.systemRow, styles.joinedRow]}>
+        <Avatar
+          avatar={typeof message.metadata?.agentAvatar === 'string' ? message.metadata.agentAvatar : null}
+          name={joinedName}
+          size={20}
+          color={palette.ink}
+        />
+        <Text style={styles.systemText}>
+          <Text style={styles.joinedName}>{joinedName}</Text> {labels.joinedConversation}
+        </Text>
+      </View>
+    );
+  }
+
   if (message.messageType === 'system') {
     const text = message.bodyPlain || stripHtml(message.body || '') || labels.conversationUpdated;
     return (
@@ -397,6 +671,17 @@ function MessageBubble({
   }
 
   const isVisitor = message.direction === 'inbound';
+
+  if (message.deletedAt) {
+    return (
+      <View style={[styles.messageRow, isVisitor ? styles.messageRowRight : styles.messageRowLeft]}>
+        <View style={styles.deletedBubble}>
+          <Text style={styles.deletedText}>{labels.messageDeleted}</Text>
+        </View>
+      </View>
+    );
+  }
+
   const rtl = isRTL();
   const messageText = message.bodyPlain || stripHtml(message.body || '');
   const hasBody = !!messageText;
@@ -429,6 +714,7 @@ function MessageBubble({
                 key={attachment.id}
                 attachment={attachment}
                 isVisitor={isVisitor}
+                onOpenImage={onOpenImage}
               />
             ))}
           </View>
@@ -455,6 +741,8 @@ function MessageBubble({
         ) : null}
       </View>
 
+      {receiptLabel ? <Text style={styles.receiptText}>{receiptLabel}</Text> : null}
+
       {agentUiBlocks.length > 0 && onAgentUiAction ? (
         <AgentUiBlocks
           blocks={agentUiBlocks}
@@ -476,21 +764,39 @@ function MessageBubble({
   );
 }
 
+/** Sent once the server has it, Seen once a teammate opened the conversation. */
+function receiptLabel(message: Message, labels: ChatLabels): string | undefined {
+  if (message.deletedAt || message.status === 'pending' || message.status === 'failed') return undefined;
+  return message.status === 'read' ? labels.messageSeen : labels.messageSent;
+}
+
 function AttachmentPreview({
   attachment,
   isVisitor,
+  onOpenImage,
 }: {
   attachment: WidgetAttachment;
   isVisitor: boolean;
+  onOpenImage: (image: { url: string; name: string }) => void;
 }) {
   // `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 (
       <Pressable
         onPress={open}
+        disabled={!openable}
         accessibilityRole="imagebutton"
         accessibilityLabel={attachment.name}>
         <Image
@@ -498,6 +804,9 @@ function AttachmentPreview({
           style={styles.attachmentImage}
           resizeMode="cover"
           accessibilityIgnoresInvertColors
+          // 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)}
         />
       </Pressable>
     );
@@ -506,6 +815,7 @@ function AttachmentPreview({
   return (
     <Pressable
       onPress={open}
+      disabled={!openable}
       accessibilityRole="button"
       style={[
         styles.attachmentFile,

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

@@ -1,7 +1,15 @@
+import type { TeamAvatar } from '../../../types';
 /** Props and label bundle for the chat thread. */
 
-import type { AgentUiAction, Message, WidgetAttachment } from '../../../types';
+import type { DraftAttachment, PickResult } from '../../../attachments/pickers';
+import type {
+  AgentUiAction,
+  AttachmentSource,
+  Message,
+  OutgoingAttachment,
+} from '../../../types';
 import type { AgentUiBlockLabels } from '../../components/AgentUiBlocks';
+import type { ImageViewerLabels } from '../../components/ImageViewer';
 
 export interface ChatLabels {
   back: string;
@@ -18,9 +26,31 @@ export interface ChatLabels {
   today: string;
   yesterday: string;
   conversationUpdated: string;
+  messageDeleted: string;
+  messageSent: string;
+  messageSeen: string;
+  waitingForTeammate: string;
+  joinedConversation: string;
   procedureSend: string;
   procedureSent: string;
   blocks: AgentUiBlockLabels;
+  attach: AttachLabels;
+  viewer: ImageViewerLabels;
+}
+
+/** Composer attachment copy. Limits are already filled in; `remove` keeps `{name}`. */
+export interface AttachLabels {
+  button: string;
+  photoLibrary: string;
+  takePhoto: string;
+  file: string;
+  cancel: string;
+  remove: string;
+  tooLarge: string;
+  tooMany: string;
+  tooLargeTogether: string;
+  failed: string;
+  cameraDenied: string;
 }
 
 export interface ChatViewProps {
@@ -32,12 +62,31 @@ export interface ChatViewProps {
   /** Whoever is handling this thread, once the backend assigns someone. */
   agentName?: string | null;
   agentAvatar?: string | null;
+  /** The assigned teammate's own presence; falls back to `isOnline` when absent. */
+  agentOnline?: boolean | null;
   isOnline: boolean;
+  /** Header title with no teammate yet (or after close); falls back to the Team label. */
+  teamName?: string | null;
+  teamAvatars?: TeamAvatar[];
+  /** e.g. "We usually reply within a few minutes", under the team name. */
+  replyTimeLabel?: string;
   prefillText?: string;
   offlineMessage?: string;
   locale: string;
   labels: ChatLabels;
-  onSendMessage: (body: string, attachments?: WidgetAttachment[], action?: AgentUiAction) => void;
+  /**
+   * Menu options for the attach button, in order. Empty (or absent) hides the
+   * button — attachments are off, or no picker is installed.
+   */
+  attachmentSources?: AttachmentSource[];
+  /** Opens a picker and returns what fits beside `current`. Never rejects. */
+  onPickAttachments?: (source: AttachmentSource, current: DraftAttachment[]) => Promise<PickResult>;
+  /** Rejects when the send fails, so the composer can keep its attachments. */
+  onSendMessage: (
+    body: string,
+    attachments?: OutgoingAttachment[],
+    action?: AgentUiAction
+  ) => Promise<void>;
   onIdentifyVisitor?: (data: { email?: string; name?: string; phone?: string }) => Promise<void>;
   onLoadMore: () => void;
   onTyping: (isTyping: boolean) => void;