@repzo/widget-react-native 1.0.0 → 1.0.4

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

@@ -7,11 +7,16 @@ exports.ChatView = ChatView;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _agentUiBlocks = require("../../../agent-ui-blocks.js");
+var _pickers = require("../../../attachments/pickers.js");
 var _AgentUiBlocks = require("../../components/AgentUiBlocks.js");
+var _AttachmentChips = require("../../components/AttachmentChips.js");
+var _AttachmentMenu = require("../../components/AttachmentMenu.js");
 var _Avatar = require("../../components/Avatar.js");
+var _ImageViewer = require("../../components/ImageViewer.js");
 var _ErrorBoundary = require("../../components/ErrorBoundary.js");
 var _Gradient = require("../../components/Gradient.js");
 var _icons = require("../../components/icons.js");
+var _TeamAvatars = require("../../components/TeamAvatars.js");
 var _Markdown = require("../../components/Markdown.js");
 var _useReduceMotion = require("../../hooks/use-reduce-motion.js");
 var _global = require("../../styles/global.js");
@@ -28,7 +33,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * 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`).
  */
 
 function ChatView({
@@ -39,11 +45,17 @@ function ChatView({
   color,
   agentName,
   agentAvatar,
+  agentOnline,
   isOnline,
+  teamName,
+  teamAvatars = [],
+  replyTimeLabel,
   locale,
   prefillText,
   offlineMessage,
   labels,
+  attachmentSources = [],
+  onPickAttachments,
   onSendMessage,
   onIdentifyVisitor,
   onLoadMore,
@@ -53,14 +65,38 @@ function ChatView({
 }) {
   const [input, setInput] = (0, _react.useState)(prefillText || '');
   const [composerFocused, setComposerFocused] = (0, _react.useState)(false);
+  const [drafts, setDrafts] = (0, _react.useState)([]);
+  const [menuOpen, setMenuOpen] = (0, _react.useState)(false);
+  const [viewerImage, setViewerImage] = (0, _react.useState)(null);
+  const [picking, setPicking] = (0, _react.useState)(false);
+  // Only attachment sends hold the composer; text sends stay fire-and-forget.
+  const [sending, setSending] = (0, _react.useState)(false);
+  const [notice, setNotice] = (0, _react.useState)(null);
   const reduceMotion = (0, _useReduceMotion.useReduceMotion)();
   const scrollRef = (0, _react.useRef)(null);
   const typingStopTimer = (0, _react.useRef)(null);
+  const noticeTimer = (0, _react.useRef)(null);
+  const pickerTimer = (0, _react.useRef)(null);
+  const mounted = (0, _react.useRef)(false);
   (0, _react.useEffect)(() => {
     if (prefillText) setInput(prefillText);
   }, [prefillText]);
-  (0, _react.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.
+  (0, _react.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 = (0, _react.useCallback)(message => {
+    if (noticeTimer.current) clearTimeout(noticeTimer.current);
+    setNotice(message);
+    if (message) noticeTimer.current = setTimeout(() => setNotice(null), 5000);
   }, []);
   const scrollToBottom = (0, _react.useCallback)((animated = true) => {
     scrollRef.current?.scrollToEnd({
@@ -104,15 +140,101 @@ 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, _pickers.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 >= _pickers.MAX_ATTACHMENTS) {
+      showNotice(labels.attach.tooMany);
+      return;
+    }
+    const only = attachmentSources.length === 1 ? attachmentSources[0] : undefined;
+    if (only) {
+      void handlePick(only);
+      return;
+    }
+    const native = (0, _AttachmentMenu.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);
@@ -129,12 +251,19 @@ function ChatView({
         phone: stringPayload(action.payload.phone)
       });
     }
-    onSendMessage((0, _agentUiBlocks.formatAgentUiActionMessage)(action), undefined, action);
+    onSendMessage((0, _agentUiBlocks.formatAgentUiActionMessage)(action), undefined, action).catch(() => {});
     scrollToBottom();
   }, [onIdentifyVisitor, onSendMessage, scrollToBottom]);
   const headerTextColor = (0, _theme.contrastingTextColor)(color);
   const onDarkHeader = headerTextColor === _theme.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, (0, _theme.mixHex)(color, '#000000', 0.16)];
@@ -161,7 +290,10 @@ function ChatView({
           direction: (0, _rtl.backDirection)(),
           color: headerTextColor
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      }), agentName ?
+      /*#__PURE__*/
+      // A teammate joined: their photo, name and own presence.
+      (0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: _ChatViewStyles.styles.headerIdentity,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: _ChatViewStyles.styles.avatarWrapper,
@@ -171,7 +303,7 @@ function ChatView({
             size: 36,
             translucent: onDarkHeader,
             color: _theme.palette.ink
-          }), isOnline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          }), agentIsActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
             style: _ChatViewStyles.styles.onlineDot
           }) : null]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -181,15 +313,48 @@ function ChatView({
               color: headerTextColor
             }],
             numberOfLines: 1,
-            children: agentName || labels.team
+            children: agentName
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [_ChatViewStyles.styles.headerStatus, {
               color: (0, _theme.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.
+      (0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: _ChatViewStyles.styles.headerIdentity,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TeamAvatars.TeamAvatars, {
+          avatars: teamAvatars,
+          size: 30,
+          color: _theme.palette.ink,
+          ringColor: color,
+          translucent: onDarkHeader
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: _ChatViewStyles.styles.headerText,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [_ChatViewStyles.styles.headerName, {
+              color: headerTextColor
+            }],
+            numberOfLines: 1,
+            children: teamName || labels.team
+          }), replyTimeLabel ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: _ChatViewStyles.styles.headerReplyTime,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClockIcon, {
+              size: 12,
+              color: (0, _theme.withAlpha)(headerTextColor, 0.75)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [_ChatViewStyles.styles.headerStatus, _ChatViewStyles.styles.headerReplyTimeText, {
+                color: (0, _theme.withAlpha)(headerTextColor, 0.75)
+              }],
+              numberOfLines: 1,
+              children: replyTimeLabel
+            })]
+          }) : null]
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         onPress: onClose,
         accessibilityRole: "button",
@@ -266,14 +431,26 @@ function ChatView({
               message: message,
               color: color,
               labels: labels,
+              onOpenImage: setViewerImage,
               senderLabel: isAgentMessage && (startsRun || startsDay) ? message.senderName || agentName || labels.team : null,
               timeLabel: (0, _conversations.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      }), awaitingTeammate ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: _ChatViewStyles.styles.waitingRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TeamAvatars.TeamAvatars, {
+          avatars: teamAvatars,
+          size: 20,
+          color: color
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: _ChatViewStyles.styles.waitingText,
+          children: labels.waitingForTeammate
+        })]
+      }) : null, agentTyping ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: _ChatViewStyles.styles.typingRow,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: _ChatViewStyles.styles.typingBubble,
@@ -298,13 +475,44 @@ function ChatView({
         style: _ChatViewStyles.styles.offlineText,
         children: offlineMessage
       })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: _ChatViewStyles.styles.composerWrapper,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [_ChatViewStyles.styles.composer, composerFocused && _ChatViewStyles.styles.composerFocused, composerFocused && {
+      children: [notice ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.composerNotice,
+        accessibilityRole: "alert",
+        accessibilityLiveRegion: "polite",
+        children: notice
+      }) : null, drafts.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AttachmentChips.AttachmentChips, {
+        attachments: drafts,
+        disabled: sending,
+        removeLabel: labels.attach.remove,
+        onRemove: id => {
+          setDrafts(current => current.filter(draft => draft.id !== id));
+          showNotice(null);
+        }
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [_ChatViewStyles.styles.composer, showAttach && _ChatViewStyles.styles.composerWithAttach, composerFocused && _ChatViewStyles.styles.composerFocused, composerFocused && {
           borderColor: (0, _theme.withAlpha)(color, 0.55)
         }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        children: [showAttach ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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
+          }) => [_ChatViewStyles.styles.attachButton, (pressed || sending || picking) && _global.globalStyles.pressed],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PaperclipIcon, {
+            size: 20,
+            color: _theme.palette.textMuted
+          })
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
           value: input,
           onChangeText: handleChangeText,
           onFocus: () => setComposerFocused(true),
@@ -332,7 +540,21 @@ function ChatView({
             color: canSend ? (0, _theme.contrastingTextColor)(color) : _theme.palette.textSubtle
           })
         })]
-      })
+      })]
+    }), showAttach && _reactNative.Platform.OS !== 'ios' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AttachmentMenu.AttachmentMenu, {
+      visible: menuOpen,
+      options: menuOptions,
+      cancelLabel: labels.attach.cancel,
+      onSelect: handleMenuSelect,
+      onClose: () => setMenuOpen(false)
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageViewer.ImageViewer, {
+      image: viewerImage,
+      labels: labels.viewer,
+      onClose: () => setViewerImage(null),
+      onOpenExternally: url => {
+        setViewerImage(null);
+        void (0, _safeUrl.openExternalUrl)(url);
+      }
     })]
   });
 }
@@ -342,9 +564,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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_ChatViewStyles.styles.systemRow, _ChatViewStyles.styles.joinedRow],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+        avatar: typeof message.metadata?.agentAvatar === 'string' ? message.metadata.agentAvatar : null,
+        name: joinedName,
+        size: 20,
+        color: _theme.palette.ink
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.systemText,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: _ChatViewStyles.styles.joinedName,
+          children: joinedName
+        }), " ", labels.joinedConversation]
+      })]
+    });
+  }
   if (message.messageType === 'system') {
     const text = message.bodyPlain || (0, _html.stripHtml)(message.body || '') || labels.conversationUpdated;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -356,6 +598,18 @@ function MessageBubble({
     });
   }
   const isVisitor = message.direction === 'inbound';
+  if (message.deletedAt) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_ChatViewStyles.styles.messageRow, isVisitor ? _ChatViewStyles.styles.messageRowRight : _ChatViewStyles.styles.messageRowLeft],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: _ChatViewStyles.styles.deletedBubble,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: _ChatViewStyles.styles.deletedText,
+          children: labels.messageDeleted
+        })
+      })
+    });
+  }
   const rtl = (0, _rtl.isRTL)();
   const messageText = message.bodyPlain || (0, _html.stripHtml)(message.body || '');
   const hasBody = !!messageText;
@@ -383,7 +637,8 @@ function MessageBubble({
         style: [_ChatViewStyles.styles.attachments, hasBody && _ChatViewStyles.styles.attachmentsSpaced],
         children: message.attachments.map(attachment => /*#__PURE__*/(0, _jsxRuntime.jsx)(AttachmentPreview, {
           attachment: attachment,
-          isVisitor: isVisitor
+          isVisitor: isVisitor,
+          onOpenImage: onOpenImage
         }, attachment.id))
       }) : null, message.status === 'failed' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [_ChatViewStyles.styles.failedText, {
@@ -396,7 +651,10 @@ function MessageBubble({
         }],
         children: timeLabel
       }) : null]
-    }), agentUiBlocks.length > 0 && onAgentUiAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AgentUiBlocks.AgentUiBlocks, {
+    }), receiptLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: _ChatViewStyles.styles.receiptText,
+      children: receiptLabel
+    }) : null, agentUiBlocks.length > 0 && onAgentUiAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AgentUiBlocks.AgentUiBlocks, {
       blocks: agentUiBlocks,
       color: color,
       labels: labels.blocks,
@@ -409,16 +667,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 (0, _safeUrl.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] = (0, _react.useState)(false);
+  const isImage = (0, _pickers.isImageAttachment)(attachment.contentType) && !!attachment.url && !imageFailed;
+  const openable = (0, _safeUrl.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 (0, _safeUrl.openExternalUrl)(attachment.url);
   if (isImage) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
       onPress: open,
+      disabled: !openable,
       accessibilityRole: "imagebutton",
       accessibilityLabel: attachment.name,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
@@ -428,11 +702,16 @@ function AttachmentPreview({
         style: _ChatViewStyles.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__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
     onPress: open,
+    disabled: !openable,
     accessibilityRole: "button",
     style: [_ChatViewStyles.styles.attachmentFile, {
       borderColor: isVisitor ? (0, _theme.withAlpha)(_theme.palette.white, 0.35) : _theme.palette.border