@repzo/widget-react-native 1.0.0 → 1.0.1

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,34 @@ 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, PaperclipIcon } from '../../components/icons';
 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';
@@ -55,6 +72,8 @@ export function ChatView({
   prefillText,
   offlineMessage,
   labels,
+  attachmentSources = [],
+  onPickAttachments,
   onSendMessage,
   onIdentifyVisitor,
   onLoadMore,
@@ -64,20 +83,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 +162,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 +300,7 @@ export function ChatView({
           phone: stringPayload(action.payload.phone),
         });
       }
-      onSendMessage(formatAgentUiActionMessage(action), undefined, action);
+      onSendMessage(formatAgentUiActionMessage(action), undefined, action).catch(() => {});
       scrollToBottom();
     },
     [onIdentifyVisitor, onSendMessage, scrollToBottom]
@@ -292,6 +436,7 @@ export function ChatView({
                   message={message}
                   color={color}
                   labels={labels}
+                  onOpenImage={setViewerImage}
                   senderLabel={
                     isAgentMessage && (startsRun || startsDay)
                       ? message.senderName || agentName || labels.team
@@ -300,7 +445,7 @@ export function ChatView({
                   timeLabel={formatClockTime(message.createdAt, locale)}
                   onSubmitProcedureForm={
                     shouldShowProcedureForm(messages, message)
-                      ? (body) => onSendMessage(body)
+                      ? (body) => void onSendMessage(body).catch(() => {})
                       : undefined
                   }
                   onAgentUiAction={
@@ -331,12 +476,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 +547,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>
   );
 }
@@ -378,6 +578,7 @@ function MessageBubble({
   timeLabel,
   onSubmitProcedureForm,
   onAgentUiAction,
+  onOpenImage,
 }: {
   message: Message;
   color: string;
@@ -386,6 +587,7 @@ function MessageBubble({
   timeLabel: string;
   onSubmitProcedureForm?: (body: string) => void;
   onAgentUiAction?: (action: AgentUiAction) => void | Promise<void>;
+  onOpenImage: (image: { url: string; name: string }) => void;
 }) {
   if (message.messageType === 'system') {
     const text = message.bodyPlain || stripHtml(message.body || '') || labels.conversationUpdated;
@@ -429,6 +631,7 @@ function MessageBubble({
                 key={attachment.id}
                 attachment={attachment}
                 isVisitor={isVisitor}
+                onOpenImage={onOpenImage}
               />
             ))}
           </View>
@@ -479,18 +682,30 @@ function MessageBubble({
 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 +713,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 +724,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,14 @@
 /** 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;
@@ -21,6 +28,23 @@ export interface ChatLabels {
   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 {
@@ -37,7 +61,19 @@ export interface ChatViewProps {
   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;