@repzo/widget-react-native 1.0.0 → 1.0.1

package/lib/module/ui/components/ImageViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","ActivityIndicator","Image","Modal","Platform","Pressable","ScrollView","StyleSheet","Text","View","useWidgetInsets","fontSize","palette","spacing","CloseIcon","jsx","_jsx","jsxs","_jsxs","ImageViewer","image","labels","onClose","onOpenExternally","insets","status","setStatus","url","state","visible","transparent","animationType","statusBarTranslucent","onRequestClose","children","style","styles","backdrop","accessibilityViewIsModal","fill","contentContainerStyle","center","maximumZoomScale","minimumZoomScale","centerContent","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","bouncesZoom","source","uri","resizeMode","accessibilityLabel","name","accessibilityIgnoresInvertColors","onLoad","onError","absoluteFill","color","white","failed","failedText","loadFailed","onPress","accessibilityRole","pressed","externalButton","externalLabel","openExternally","header","paddingTop","top","sm","pointerEvents","title","numberOfLines","close","hitSlop","closeButton","size","create","flex","backgroundColor","flexGrow","alignItems","justifyContent","width","height","position","left","right","flexDirection","gap","md","paddingHorizontal","lg","paddingBottom","minWidth","body","fontWeight","borderRadius","opacity","xxl","textAlign","paddingVertical","borderWidth","hairlineWidth","borderColor","meta","OS"],"sourceRoot":"../../../../src","sources":["ui/components/ImageViewer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/components/InAppNotification.js

@@ -0,0 +1,208 @@
+"use strict";
+
+/**
+ * The card that floats over the host app when a team reply arrives while the
+ * messenger is closed — Intercom's in-app notification. It never times out:
+ * tapping it opens the conversation, swiping it left or right dismisses it
+ * (the thread stays unread). The store takes it down on its own once the
+ * messenger opens or the thread is read.
+ *
+ * Pure JS gestures (PanResponder), so hosts need no gesture library.
+ */
+
+import { useEffect, useMemo, useRef } from 'react';
+import { AccessibilityInfo, Animated, PanResponder, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { formatLabel } from "../../i18n.js";
+import { useReduceMotion } from "../hooks/use-reduce-motion.js";
+import { fontSize, palette, radius, shadows, spacing, withAlpha } from "../styles/theme.js";
+import { START_ALIGN } from "../utils/rtl.js";
+import { Avatar } from "./Avatar.js";
+
+/** Share of the card's width a drag must travel to count as a dismiss. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DISMISS_DISTANCE_RATIO = 0.35;
+/** A quick flick dismisses even when it travels less than that. */
+const DISMISS_VELOCITY = 0.6;
+export function InAppNotification({
+  notification,
+  color,
+  bottomInset,
+  labels,
+  onOpen,
+  onDismiss
+}) {
+  const {
+    width
+  } = useWindowDimensions();
+  const reduceMotion = useReduceMotion();
+  // Read as "hold still" until the setting is known (see useReduceMotion).
+  const animate = reduceMotion === false;
+  const entry = useRef(new Animated.Value(animate ? 0 : 1)).current;
+  const dragX = useRef(new Animated.Value(0)).current;
+  const preview = notification.preview || (notification.hasAttachments ? labels.attachment : '');
+  const sender = notification.senderName ? formatLabel(labels.replyFrom, {
+    name: notification.senderName
+  }) : labels.newReply;
+  const accessibilityLabel = [preview, sender].filter(Boolean).join(', ');
+
+  // Mounted once per reply (the provider keys it by message id), so this runs
+  // for every new card: slide it in and tell screen-reader users it arrived.
+  useEffect(() => {
+    if (animate) {
+      Animated.spring(entry, {
+        toValue: 1,
+        useNativeDriver: true,
+        speed: 16,
+        bounciness: 4
+      }).start();
+    }
+    AccessibilityInfo.announceForAccessibility(accessibilityLabel);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const panResponder = useMemo(() => {
+    const settle = () => Animated.spring(dragX, {
+      toValue: 0,
+      useNativeDriver: true,
+      bounciness: 6
+    }).start();
+    return PanResponder.create({
+      // Capture so a horizontal drag wins over the Pressable underneath; taps
+      // and vertical movement still reach it.
+      onMoveShouldSetPanResponderCapture: (_, gesture) => Math.abs(gesture.dx) > 8 && Math.abs(gesture.dx) > Math.abs(gesture.dy) * 1.5,
+      onPanResponderMove: (_, gesture) => dragX.setValue(gesture.dx),
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderRelease: (_, gesture) => {
+        const farEnough = Math.abs(gesture.dx) > width * DISMISS_DISTANCE_RATIO;
+        const fastEnough = Math.abs(gesture.vx) > DISMISS_VELOCITY;
+        if (!farEnough && !fastEnough) {
+          settle();
+          return;
+        }
+        const direction = (gesture.dx || gesture.vx) < 0 ? -1 : 1;
+        Animated.timing(dragX, {
+          toValue: direction * width,
+          duration: animate ? 180 : 0,
+          useNativeDriver: true
+        }).start(() => onDismiss());
+      },
+      onPanResponderTerminate: settle
+    });
+  }, [animate, dragX, onDismiss, width]);
+  const handleAccessibilityAction = event => {
+    if (event.nativeEvent.actionName === 'dismiss') onDismiss();
+    if (event.nativeEvent.actionName === 'activate') onOpen(notification.conversationId);
+  };
+  const opacity = Animated.multiply(entry, dragX.interpolate({
+    inputRange: [-width, 0, width],
+    outputRange: [0, 1, 0],
+    extrapolate: 'clamp'
+  }));
+  const translateY = entry.interpolate({
+    inputRange: [0, 1],
+    outputRange: [spacing.lg, 0]
+  });
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "box-none",
+    style: [styles.wrapper, {
+      bottom: bottomInset + spacing.md
+    }],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      ...panResponder.panHandlers,
+      style: [styles.card, {
+        opacity,
+        transform: [{
+          translateX: dragX
+        }, {
+          translateY
+        }]
+      }],
+      children: /*#__PURE__*/_jsxs(Pressable, {
+        onPress: () => onOpen(notification.conversationId),
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel,
+        accessibilityHint: labels.openHint,
+        accessibilityActions: [{
+          name: 'activate'
+        }, {
+          name: 'dismiss',
+          label: labels.dismiss
+        }],
+        onAccessibilityAction: handleAccessibilityAction,
+        style: ({
+          pressed
+        }) => [styles.row, pressed && styles.pressed],
+        children: [/*#__PURE__*/_jsx(Avatar, {
+          avatar: notification.senderAvatar,
+          name: notification.senderName,
+          color: color,
+          size: 40,
+          style: styles.avatar
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.text,
+          children: [preview ? /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 2,
+            style: styles.preview,
+            children: preview
+          }) : null, /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: styles.sender,
+            children: sender
+          })]
+        })]
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    paddingHorizontal: spacing.lg,
+    alignItems: 'center',
+    // Above the host's navigator even when the provider is mounted before it.
+    zIndex: 1000,
+    elevation: 1000
+  },
+  card: {
+    width: '100%',
+    maxWidth: 480,
+    borderRadius: radius.xl,
+    backgroundColor: palette.text,
+    ...shadows.floating
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    minHeight: 64,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    borderRadius: radius.xl
+  },
+  pressed: {
+    opacity: 0.85
+  },
+  avatar: {
+    borderWidth: 1,
+    borderColor: withAlpha(palette.white, 0.1)
+  },
+  text: {
+    flex: 1,
+    minWidth: 0,
+    gap: 2
+  },
+  preview: {
+    color: palette.white,
+    fontSize: fontSize.body,
+    fontWeight: '600',
+    lineHeight: 20,
+    textAlign: START_ALIGN
+  },
+  sender: {
+    color: withAlpha(palette.white, 0.64),
+    fontSize: fontSize.meta,
+    textAlign: START_ALIGN
+  }
+});
+//# sourceMappingURL=InAppNotification.js.map

package/lib/module/ui/components/InAppNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useRef","AccessibilityInfo","Animated","PanResponder","Pressable","StyleSheet","Text","View","useWindowDimensions","formatLabel","useReduceMotion","fontSize","palette","radius","shadows","spacing","withAlpha","START_ALIGN","Avatar","jsx","_jsx","jsxs","_jsxs","DISMISS_DISTANCE_RATIO","DISMISS_VELOCITY","InAppNotification","notification","color","bottomInset","labels","onOpen","onDismiss","width","reduceMotion","animate","entry","Value","current","dragX","preview","hasAttachments","attachment","sender","senderName","replyFrom","name","newReply","accessibilityLabel","filter","Boolean","join","spring","toValue","useNativeDriver","speed","bounciness","start","announceForAccessibility","panResponder","settle","create","onMoveShouldSetPanResponderCapture","_","gesture","Math","abs","dx","dy","onPanResponderMove","setValue","onPanResponderTerminationRequest","onPanResponderRelease","farEnough","fastEnough","vx","direction","timing","duration","onPanResponderTerminate","handleAccessibilityAction","event","nativeEvent","actionName","conversationId","opacity","multiply","interpolate","inputRange","outputRange","extrapolate","translateY","lg","pointerEvents","style","styles","wrapper","bottom","md","children","panHandlers","card","transform","translateX","onPress","accessibilityRole","accessibilityHint","openHint","accessibilityActions","label","dismiss","onAccessibilityAction","pressed","row","avatar","senderAvatar","size","text","numberOfLines","position","left","right","paddingHorizontal","alignItems","zIndex","elevation","maxWidth","borderRadius","xl","backgroundColor","floating","flexDirection","gap","minHeight","paddingVertical","borderWidth","borderColor","white","flex","minWidth","body","fontWeight","lineHeight","textAlign","meta"],"sourceRoot":"../../../../src","sources":["ui/components/InAppNotification.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAClD,SACEC,iBAAiB,EACjBC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,IAAI,EACJC,mBAAmB,QAEd,cAAc;AAErB,SAASC,WAAW,QAAQ,eAAY;AAExC,SAASC,eAAe,QAAQ,+BAA4B;AAC5D,SAASC,QAAQ,EAAEC,OAAO,EAAEC,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,SAAS,QAAQ,oBAAiB;AACxF,SAASC,WAAW,QAAQ,iBAAc;AAC1C,SAASC,MAAM,QAAQ,aAAU;;AAEjC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMC,sBAAsB,GAAG,IAAI;AACnC;AACA,MAAMC,gBAAgB,GAAG,GAAG;AAkB5B,OAAO,SAASC,iBAAiBA,CAAC;EAChCC,YAAY;EACZC,KAAK;EACLC,WAAW;EACXC,MAAM;EACNC,MAAM;EACNC;AACsB,CAAC,EAAE;EACzB,MAAM;IAAEC;EAAM,CAAC,GAAGxB,mBAAmB,CAAC,CAAC;EACvC,MAAMyB,YAAY,GAAGvB,eAAe,CAAC,CAAC;EACtC;EACA,MAAMwB,OAAO,GAAGD,YAAY,KAAK,KAAK;EAEtC,MAAME,KAAK,GAAGnC,MAAM,CAAC,IAAIE,QAAQ,CAACkC,KAAK,CAACF,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAACG,OAAO;EACjE,MAAMC,KAAK,GAAGtC,MAAM,CAAC,IAAIE,QAAQ,CAACkC,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAEnD,MAAME,OAAO,GAAGb,YAAY,CAACa,OAAO,KAAKb,YAAY,CAACc,cAAc,GAAGX,MAAM,CAACY,UAAU,GAAG,EAAE,CAAC;EAC9F,MAAMC,MAAM,GAAGhB,YAAY,CAACiB,UAAU,GAClClC,WAAW,CAACoB,MAAM,CAACe,SAAS,EAAE;IAAEC,IAAI,EAAEnB,YAAY,CAACiB;EAAW,CAAC,CAAC,GAChEd,MAAM,CAACiB,QAAQ;EACnB,MAAMC,kBAAkB,GAAG,CAACR,OAAO,EAAEG,MAAM,CAAC,CAACM,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC;;EAEvE;EACA;EACApD,SAAS,CAAC,MAAM;IACd,IAAIoC,OAAO,EAAE;MACXhC,QAAQ,CAACiD,MAAM,CAAChB,KAAK,EAAE;QACrBiB,OAAO,EAAE,CAAC;QACVC,eAAe,EAAE,IAAI;QACrBC,KAAK,EAAE,EAAE;QACTC,UAAU,EAAE;MACd,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IACZ;IACAvD,iBAAiB,CAACwD,wBAAwB,CAACV,kBAAkB,CAAC;IAC9D;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMW,YAAY,GAAG3D,OAAO,CAAC,MAAM;IACjC,MAAM4D,MAAM,GAAGA,CAAA,KACbzD,QAAQ,CAACiD,MAAM,CAACb,KAAK,EAAE;MAAEc,OAAO,EAAE,CAAC;MAAEC,eAAe,EAAE,IAAI;MAAEE,UAAU,EAAE;IAAE,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IAEtF,OAAOrD,YAAY,CAACyD,MAAM,CAAC;MACzB;MACA;MACAC,kCAAkC,EAAEA,CAACC,CAAC,EAAEC,OAAO,KAC7CC,IAAI,CAACC,GAAG,CAACF,OAAO,CAACG,EAAE,CAAC,GAAG,CAAC,IAAIF,IAAI,CAACC,GAAG,CAACF,OAAO,CAACG,EAAE,CAAC,GAAGF,IAAI,CAACC,GAAG,CAACF,OAAO,CAACI,EAAE,CAAC,GAAG,GAAG;MAC/EC,kBAAkB,EAAEA,CAACN,CAAC,EAAEC,OAAO,KAAKzB,KAAK,CAAC+B,QAAQ,CAACN,OAAO,CAACG,EAAE,CAAC;MAC9DI,gCAAgC,EAAEA,CAAA,KAAM,KAAK;MAC7CC,qBAAqB,EAAEA,CAACT,CAAC,EAAEC,OAAO,KAAK;QACrC,MAAMS,SAAS,GAAGR,IAAI,CAACC,GAAG,CAACF,OAAO,CAACG,EAAE,CAAC,GAAGlC,KAAK,GAAGT,sBAAsB;QACvE,MAAMkD,UAAU,GAAGT,IAAI,CAACC,GAAG,CAACF,OAAO,CAACW,EAAE,CAAC,GAAGlD,gBAAgB;QAC1D,IAAI,CAACgD,SAAS,IAAI,CAACC,UAAU,EAAE;UAC7Bd,MAAM,CAAC,CAAC;UACR;QACF;QACA,MAAMgB,SAAS,GAAG,CAACZ,OAAO,CAACG,EAAE,IAAIH,OAAO,CAACW,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;QACzDxE,QAAQ,CAAC0E,MAAM,CAACtC,KAAK,EAAE;UACrBc,OAAO,EAAEuB,SAAS,GAAG3C,KAAK;UAC1B6C,QAAQ,EAAE3C,OAAO,GAAG,GAAG,GAAG,CAAC;UAC3BmB,eAAe,EAAE;QACnB,CAAC,CAAC,CAACG,KAAK,CAAC,MAAMzB,SAAS,CAAC,CAAC,CAAC;MAC7B,CAAC;MACD+C,uBAAuB,EAAEnB;IAC3B,CAAC,CAAC;EACJ,CAAC,EAAE,CAACzB,OAAO,EAAEI,KAAK,EAAEP,SAAS,EAAEC,KAAK,CAAC,CAAC;EAEtC,MAAM+C,yBAAyB,GAAIC,KAA+B,IAAK;IACrE,IAAIA,KAAK,CAACC,WAAW,CAACC,UAAU,KAAK,SAAS,EAAEnD,SAAS,CAAC,CAAC;IAC3D,IAAIiD,KAAK,CAACC,WAAW,CAACC,UAAU,KAAK,UAAU,EAAEpD,MAAM,CAACJ,YAAY,CAACyD,cAAc,CAAC;EACtF,CAAC;EAED,MAAMC,OAAO,GAAGlF,QAAQ,CAACmF,QAAQ,CAC/BlD,KAAK,EACLG,KAAK,CAACgD,WAAW,CAAC;IAChBC,UAAU,EAAE,CAAC,CAACvD,KAAK,EAAE,CAAC,EAAEA,KAAK,CAAC;IAC9BwD,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IACtBC,WAAW,EAAE;EACf,CAAC,CACH,CAAC;EACD,MAAMC,UAAU,GAAGvD,KAAK,CAACmD,WAAW,CAAC;IAAEC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAAEC,WAAW,EAAE,CAACzE,OAAO,CAAC4E,EAAE,EAAE,CAAC;EAAE,CAAC,CAAC;EAE1F,oBACEvE,IAAA,CAACb,IAAI;IACHqF,aAAa,EAAC,UAAU;IACxBC,KAAK,EAAE,CAACC,MAAM,CAACC,OAAO,EAAE;MAAEC,MAAM,EAAEpE,WAAW,GAAGb,OAAO,CAACkF;IAAG,CAAC,CAAE;IAAAC,QAAA,eAC9D9E,IAAA,CAAClB,QAAQ,CAACK,IAAI;MAAA,GACRmD,YAAY,CAACyC,WAAW;MAC5BN,KAAK,EAAE,CAACC,MAAM,CAACM,IAAI,EAAE;QAAEhB,OAAO;QAAEiB,SAAS,EAAE,CAAC;UAAEC,UAAU,EAAEhE;QAAM,CAAC,EAAE;UAAEoD;QAAW,CAAC;MAAE,CAAC,CAAE;MAAAQ,QAAA,eACtF5E,KAAA,CAAClB,SAAS;QACRmG,OAAO,EAAEA,CAAA,KAAMzE,MAAM,CAACJ,YAAY,CAACyD,cAAc,CAAE;QACnDqB,iBAAiB,EAAC,QAAQ;QAC1BzD,kBAAkB,EAAEA,kBAAmB;QACvC0D,iBAAiB,EAAE5E,MAAM,CAAC6E,QAAS;QACnCC,oBAAoB,EAAE,CACpB;UAAE9D,IAAI,EAAE;QAAW,CAAC,EACpB;UAAEA,IAAI,EAAE,SAAS;UAAE+D,KAAK,EAAE/E,MAAM,CAACgF;QAAQ,CAAC,CAC1C;QACFC,qBAAqB,EAAE/B,yBAA0B;QACjDc,KAAK,EAAEA,CAAC;UAAEkB;QAAQ,CAAC,KAAK,CAACjB,MAAM,CAACkB,GAAG,EAAED,OAAO,IAAIjB,MAAM,CAACiB,OAAO,CAAE;QAAAb,QAAA,gBAChE9E,IAAA,CAACF,MAAM;UACL+F,MAAM,EAAEvF,YAAY,CAACwF,YAAa;UAClCrE,IAAI,EAAEnB,YAAY,CAACiB,UAAW;UAC9BhB,KAAK,EAAEA,KAAM;UACbwF,IAAI,EAAE,EAAG;UACTtB,KAAK,EAAEC,MAAM,CAACmB;QAAO,CACtB,CAAC,eACF3F,KAAA,CAACf,IAAI;UAACsF,KAAK,EAAEC,MAAM,CAACsB,IAAK;UAAAlB,QAAA,GACtB3D,OAAO,gBACNnB,IAAA,CAACd,IAAI;YAAC+G,aAAa,EAAE,CAAE;YAACxB,KAAK,EAAEC,MAAM,CAACvD,OAAQ;YAAA2D,QAAA,EAC3C3D;UAAO,CACJ,CAAC,GACL,IAAI,eACRnB,IAAA,CAACd,IAAI;YAAC+G,aAAa,EAAE,CAAE;YAACxB,KAAK,EAAEC,MAAM,CAACpD,MAAO;YAAAwD,QAAA,EAC1CxD;UAAM,CACH,CAAC;QAAA,CACH,CAAC;MAAA,CACE;IAAC,CACC;EAAC,CACZ,CAAC;AAEX;AAEA,MAAMoD,MAAM,GAAGzF,UAAU,CAACuD,MAAM,CAAC;EAC/BmC,OAAO,EAAE;IACPuB,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,iBAAiB,EAAE1G,OAAO,CAAC4E,EAAE;IAC7B+B,UAAU,EAAE,QAAQ;IACpB;IACAC,MAAM,EAAE,IAAI;IACZC,SAAS,EAAE;EACb,CAAC;EACDxB,IAAI,EAAE;IACJpE,KAAK,EAAE,MAAM;IACb6F,QAAQ,EAAE,GAAG;IACbC,YAAY,EAAEjH,MAAM,CAACkH,EAAE;IACvBC,eAAe,EAAEpH,OAAO,CAACwG,IAAI;IAC7B,GAAGtG,OAAO,CAACmH;EACb,CAAC;EACDjB,GAAG,EAAE;IACHkB,aAAa,EAAE,KAAK;IACpBR,UAAU,EAAE,QAAQ;IACpBS,GAAG,EAAEpH,OAAO,CAACkF,EAAE;IACfmC,SAAS,EAAE,EAAE;IACbC,eAAe,EAAEtH,OAAO,CAACkF,EAAE;IAC3BwB,iBAAiB,EAAE1G,OAAO,CAAC4E,EAAE;IAC7BmC,YAAY,EAAEjH,MAAM,CAACkH;EACvB,CAAC;EACDhB,OAAO,EAAE;IACP3B,OAAO,EAAE;EACX,CAAC;EACD6B,MAAM,EAAE;IACNqB,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEvH,SAAS,CAACJ,OAAO,CAAC4H,KAAK,EAAE,GAAG;EAC3C,CAAC;EACDpB,IAAI,EAAE;IACJqB,IAAI,EAAE,CAAC;IACPC,QAAQ,EAAE,CAAC;IACXP,GAAG,EAAE;EACP,CAAC;EACD5F,OAAO,EAAE;IACPZ,KAAK,EAAEf,OAAO,CAAC4H,KAAK;IACpB7H,QAAQ,EAAEA,QAAQ,CAACgI,IAAI;IACvBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE,EAAE;IACdC,SAAS,EAAE7H;EACb,CAAC;EACDyB,MAAM,EAAE;IACNf,KAAK,EAAEX,SAAS,CAACJ,OAAO,CAAC4H,KAAK,EAAE,IAAI,CAAC;IACrC7H,QAAQ,EAAEA,QAAQ,CAACoI,IAAI;IACvBD,SAAS,EAAE7H;EACb;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -6,24 +6,29 @@
  *
  * 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, PaperclipIcon } from "../../components/icons.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";
@@ -40,6 +45,8 @@ export function ChatView({
   prefillText,
   offlineMessage,
   labels,
+  attachmentSources = [],
+  onPickAttachments,
   onSendMessage,
   onIdentifyVisitor,
   onLoadMore,
@@ -49,14 +56,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 +131,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,7 +242,7 @@ 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);
@@ -262,9 +379,10 @@ 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,
+              onSubmitProcedureForm: shouldShowProcedureForm(messages, message) ? body => void onSendMessage(body).catch(() => {}) : undefined,
               onAgentUiAction: shouldShowAgentUiBlocks(messages, message) ? handleAgentUiAction : undefined
             })
           })]
@@ -294,13 +412,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 +477,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);
+      }
     })]
   });
 }
@@ -339,7 +502,8 @@ function MessageBubble({
   senderLabel,
   timeLabel,
   onSubmitProcedureForm,
-  onAgentUiAction
+  onAgentUiAction,
+  onOpenImage
 }) {
   if (message.messageType === 'system') {
     const text = message.bodyPlain || stripHtml(message.body || '') || labels.conversationUpdated;
@@ -379,7 +543,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, {
@@ -407,14 +572,24 @@ function MessageBubble({
 }
 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 +599,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