@repzo/widget-react-native 1.3.1 → 1.5.0

package/src/ui/components/ImageViewer.tsx

@@ -1,47 +1,176 @@
 /**
  * Full-screen viewer for image attachments, so a tap on a photo the agent sent
  * stays inside the messenger instead of bouncing to the browser. Pinch, drag
- * and double-tap zoom work on iOS and Android (see ZoomableImage).
+ * and double-tap zoom work on iOS and Android (see ZoomableImage). With
+ * several photos in one message, a sideways swipe moves between them.
  */
 
-import { useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
+  Animated,
+  Image,
   Modal,
   Platform,
   Pressable,
   StyleSheet,
   Text,
   View,
+  type AccessibilityActionEvent,
 } from 'react-native';
 
+import { formatLabel } from '../../i18n';
+import { useReduceMotion } from '../hooks/use-reduce-motion';
 import { useWidgetInsets } from '../hooks/use-widget-insets';
 import { fontSize, palette, spacing } from '../styles/theme';
+import { isRTL } from '../utils/rtl';
 import { isHttpUrl } from '../utils/safe-url';
 import { CloseIcon } from './icons';
-import { ZoomableImage } from './ZoomableImage';
+import { ZoomableImage, type SwipeHandlers } from './ZoomableImage';
 
 export interface ImageViewerLabels {
   close: string;
   loadFailed: string;
   openExternally: string;
+  /** Screen-reader position in a message's photos; keeps `{current}` and `{total}`. */
+  position: string;
 }
 
+export interface ViewerImage {
+  url: string;
+  name: string;
+  /**
+   * A download big enough to take its turn in the chat (Android's download
+   * pool, see `ImageLoadQueue`): it isn't fetched ahead of a swipe, only once
+   * it's the photo on screen.
+   */
+  large?: boolean;
+  /**
+   * Shown instead when `url` can't load: the stored copy behind a photo the
+   * visitor sent, whose copy on the phone the OS may have cleared.
+   */
+  fallbackUrl?: string;
+}
+
+/** The photos of one message, opened at the one tapped. */
+export interface ViewerGallery {
+  images: ViewerImage[];
+  index: number;
+}
+
+/** A swipe changes photo past this share of the screen, or this fast (px/ms). */
+const SWIPE_DISTANCE = 0.25;
+const SWIPE_VELOCITY = 0.5;
+/** Past the first or last photo the strip only gives this much. */
+const EDGE_RESISTANCE = 0.25;
+
 interface ImageViewerProps {
-  image: { url: string; name: string } | null;
+  gallery: ViewerGallery | null;
   labels: ImageViewerLabels;
   onClose: () => void;
   /** Escape hatch when the image can't render here (e.g. unsupported format). */
   onOpenExternally: (url: string) => void;
 }
 
-export function ImageViewer({ image, labels, onClose, onOpenExternally }: ImageViewerProps) {
+export function ImageViewer({ gallery, labels, onClose, onOpenExternally }: ImageViewerProps) {
   const insets = useWidgetInsets();
-  // Keyed by URL so opening another image starts from a clean loading state.
+  const reduceMotion = useReduceMotion();
+  // The photo on screen, for the gallery it belongs to: a new gallery opens at its own.
+  const [position, setPosition] = useState<{ of: ViewerGallery | null; index: number }>({
+    of: null,
+    index: 0,
+  });
+  const images = gallery?.images ?? [];
+  const index = position.of === gallery ? position.index : (gallery?.index ?? 0);
+  const image = images[index] ?? null;
+  // Photos whose own URL failed, now shown from their fallback.
+  const [fellBack, setFellBack] = useState<ReadonlySet<string>>(() => new Set());
+  const sourceOf = (photo: ViewerImage) =>
+    photo.fallbackUrl && fellBack.has(photo.url) ? photo.fallbackUrl : photo.url;
+  const source = image ? sourceOf(image) : null;
+  // Keyed by URL so each photo starts from a clean loading state.
   const [status, setStatus] = useState<{ url: string | null; state: 'loading' | 'ready' | 'failed' }>(
     { url: null, state: 'loading' }
   );
-  const state = status.url === image?.url ? status.state : 'loading';
+  const state = status.url === source ? status.state : 'loading';
+  // False once there's nothing left to try, so the caller shows the failure.
+  const fallBack = (photo: ViewerImage): boolean => {
+    if (!photo.fallbackUrl || fellBack.has(photo.url)) return false;
+    setFellBack((current) => new Set(current).add(photo.url));
+    return true;
+  };
+  // Photos whose screen-size copy is drawn: no spinner over those while the full one decodes.
+  const [previewed, setPreviewed] = useState<ReadonlySet<string>>(() => new Set());
+  const markPreviewed = (url: string) =>
+    setPreviewed((current) => (current.has(url) ? current : new Set(current).add(url)));
+
+  const [width, setWidth] = useState(0);
+  // One page per photo, never reordered: a swipe slides the strip to the photo
+  // it lands on and leaves it there. (Re-centring three pages instead showed the
+  // wrong photo, then a black frame, for a moment on Android.)
+  const [offset] = useState(() => new Animated.Value(0));
+  const rtl = isRTL();
+  // Pages run left to right in every language; in Arabic the first photo is the rightmost.
+  const restingAt = (photo: number) => -(rtl ? images.length - 1 - photo : photo) * width;
+  const swiping = useRef(false);
+  // Closing the viewer mid-swipe stops the slide unfinished, so it never
+  // settles: the next gallery is placed afresh.
+  useLayoutEffect(() => {
+    swiping.current = false;
+  }, [gallery]);
+  // Places the strip when the viewer opens, the screen turns or the screen reader
+  // moves; after a swipe it is already there.
+  useLayoutEffect(() => {
+    if (!swiping.current) offset.setValue(restingAt(index));
+  });
+
+  // In Arabic the next photo is the one on the left.
+  const step = rtl ? -1 : 1;
+  const neighbour = (side: -1 | 1): number | null => {
+    const next = index + side * step;
+    return next >= 0 && next < images.length ? next : null;
+  };
+  const show = (next: number | null) => {
+    if (next !== null) setPosition({ of: gallery, index: next });
+  };
+
+  const swipe: SwipeHandlers = {
+    move: (dx) => {
+      swiping.current = true;
+      const resisted = neighbour(dx < 0 ? 1 : -1) === null ? dx * EDGE_RESISTANCE : dx;
+      offset.setValue(restingAt(index) + resisted);
+    },
+    end: (dx, vx) => {
+      const next = neighbour(dx < 0 ? 1 : -1);
+      const far =
+        Math.abs(dx) > width * SWIPE_DISTANCE ||
+        (Math.abs(vx) > SWIPE_VELOCITY && Math.sign(vx) === Math.sign(dx));
+      const target = next !== null && dx !== 0 && far ? next : index;
+      const toValue = restingAt(target);
+      // Switched as the finger lifts: the counter changes at once, and the full
+      // photo decodes while the strip is still sliding to it.
+      show(target === index ? null : target);
+      if (reduceMotion !== false) {
+        offset.setValue(toValue);
+        swiping.current = false;
+        return;
+      }
+      const animation =
+        target === index
+          ? Animated.spring(offset, { toValue, useNativeDriver: true, bounciness: 0, speed: 18 })
+          : Animated.timing(offset, { toValue, duration: 180, useNativeDriver: true });
+      // A swipe that starts before this one lands takes over the strip; it settles it.
+      animation.start(({ finished }) => {
+        if (finished) swiping.current = false;
+      });
+    },
+  };
+
+  const several = images.length > 1;
+  const handleAccessibilityAction = (event: AccessibilityActionEvent) => {
+    if (event.nativeEvent.actionName === 'increment' && index < images.length - 1) show(index + 1);
+    if (event.nativeEvent.actionName === 'decrement' && index > 0) show(index - 1);
+  };
 
   return (
     <Modal
@@ -50,29 +179,88 @@ export function ImageViewer({ image, labels, onClose, onOpenExternally }: ImageV
       animationType="fade"
       statusBarTranslucent
       onRequestClose={onClose}>
-      <View style={styles.backdrop} accessibilityViewIsModal>
-        {image ? (
-          // Keyed by URL so the next image opens at 1×, not at the last one's zoom.
-          <ZoomableImage
-            key={image.url}
-            uri={image.url}
-            accessibilityLabel={image.name}
-            onLoad={() => setStatus({ url: image.url, state: 'ready' })}
-            onError={() => setStatus({ url: image.url, state: 'failed' })}
-          />
+      <View
+        style={styles.backdrop}
+        accessibilityViewIsModal
+        onLayout={(event) => setWidth(event.nativeEvent.layout.width)}>
+        {image && width > 0 ? (
+          <Animated.View
+            style={[styles.strip, { width: width * images.length, transform: [{ translateX: offset }] }]}>
+            {(rtl ? [...images].reverse() : images).map((photo) => {
+              const page = images.indexOf(photo);
+              const centre = page === index;
+              const uri = sourceOf(photo);
+              // Only the photo on screen and the ones a swipe reveals are drawn.
+              const near = Math.abs(page - index) <= 1;
+              return (
+                <View
+                  key={`${page}:${photo.url}`}
+                  style={[styles.page, { width }]}
+                  {...(centre && several
+                    ? {
+                        accessible: true,
+                        accessibilityRole: 'adjustable' as const,
+                        accessibilityLabel: photo.name,
+                        accessibilityValue: {
+                          text: formatLabel(labels.position, { current: index + 1, total: images.length }),
+                        },
+                        accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }],
+                        onAccessibilityAction: handleAccessibilityAction,
+                      }
+                    : null)}>
+                  {!near ? null : photo.large ? (
+                    centre ? null : <ActivityIndicator style={styles.layer} color={palette.white} />
+                  ) : (
+                    // Decoded at the screen's size, so it's ready mid-swipe, and shown
+                    // until the full photo on top has decoded.
+                    <Image
+                      source={{ uri }}
+                      style={[styles.layer, centre && state === 'ready' && styles.covered]}
+                      resizeMode="contain"
+                      resizeMethod="resize"
+                      onLoad={() => markPreviewed(uri)}
+                      onError={() => fallBack(photo)}
+                      importantForAccessibility="no"
+                      accessibilityIgnoresInvertColors
+                    />
+                  )}
+                  {centre ? (
+                    // Keyed by URL so each photo opens at 1×, not at the last one's zoom.
+                    <View key={uri} style={styles.layer}>
+                      <ZoomableImage
+                        uri={uri}
+                        accessibilityLabel={photo.name}
+                        onLoad={() => setStatus({ url: uri, state: 'ready' })}
+                        onError={() => {
+                          if (!fallBack(photo)) setStatus({ url: uri, state: 'failed' });
+                        }}
+                        onSwipe={several ? swipe : undefined}
+                      />
+                    </View>
+                  ) : null}
+                </View>
+              );
+            })}
+          </Animated.View>
         ) : null}
 
-        {image && state === 'loading' ? (
-          <ActivityIndicator style={StyleSheet.absoluteFill} color={palette.white} />
+        {/* Both cover the screen but let touches through, so a swipe still
+            moves on from a photo that is loading or failed. */}
+        {image && source && state === 'loading' && !previewed.has(source) ? (
+          <View style={StyleSheet.absoluteFill} pointerEvents="none">
+            <ActivityIndicator style={StyleSheet.absoluteFill} color={palette.white} />
+          </View>
         ) : null}
 
-        {image && state === 'failed' ? (
-          <View style={[StyleSheet.absoluteFill, styles.center, styles.failed]}>
-            <Text style={styles.failedText}>{labels.loadFailed}</Text>
+        {image && source && state === 'failed' ? (
+          <View style={[StyleSheet.absoluteFill, styles.center, styles.failed]} pointerEvents="box-none">
+            <Text style={styles.failedText} pointerEvents="none">
+              {labels.loadFailed}
+            </Text>
             {/* A visitor's local photo has no web copy to open yet. */}
-            {isHttpUrl(image.url) ? (
+            {isHttpUrl(source) ? (
               <Pressable
-                onPress={() => onOpenExternally(image.url)}
+                onPress={() => onOpenExternally(source)}
                 accessibilityRole="button"
                 style={({ pressed }) => [styles.externalButton, pressed && styles.pressed]}>
                 <Text style={styles.externalLabel}>{labels.openExternally}</Text>
@@ -85,6 +273,11 @@ export function ImageViewer({ image, labels, onClose, onOpenExternally }: ImageV
           <Text style={styles.title} numberOfLines={1}>
             {image?.name ?? ''}
           </Text>
+          {several ? (
+            <Text style={styles.counter} accessibilityElementsHidden importantForAccessibility="no">
+              {index + 1} / {images.length}
+            </Text>
+          ) : null}
           <Pressable
             onPress={onClose}
             accessibilityRole="button"
@@ -103,6 +296,26 @@ const styles = StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: '#000000',
+    overflow: 'hidden',
+  },
+  // One screen per photo, laid out left to right in every language (see `restingAt`).
+  strip: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    flexDirection: 'row',
+    direction: 'ltr',
+  },
+  page: {
+    height: '100%',
+  },
+  layer: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  // Hidden, not removed: it shows again the moment its page stops being the middle one.
+  covered: {
+    opacity: 0,
   },
   center: {
     flexGrow: 1,
@@ -128,6 +341,11 @@ const styles = StyleSheet.create({
     fontSize: fontSize.body,
     fontWeight: '600',
   },
+  counter: {
+    color: 'rgba(255,255,255,0.8)',
+    fontSize: fontSize.meta,
+    fontVariant: ['tabular-nums'],
+  },
   closeButton: {
     width: 36,
     height: 36,

package/src/ui/components/RatingCard.tsx

@@ -12,6 +12,7 @@ import { useState } from 'react';
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 
 import type { ConversationRatingResult, RatingReason } from '../../types';
+import { useRetainedState } from '../hooks/use-retained-state';
 import { contrastingTextColor, fontSize, palette, radius, spacing, withAlpha } from '../styles/theme';
 
 /** 1..5, worst to best — Intercom's five faces. */
@@ -102,12 +103,14 @@ export function RatingCard({
   const [rating, setRating] = useState<number | null>(initialRating);
   const [reason, setReason] = useState<string | null>(initialReason);
   const [comment, setComment] = useState<string | null>(initialComment);
-  const [draft, setDraft] = useState('');
+  // Kept while the thread unmounts the card far off screen; the rating
+  // itself is saved on the message.
+  const [draft, setDraft] = useRetainedState(`${ratingId}:draft`, '');
   // The comment is optional: "Done" with nothing typed just closes the box —
   // the face (and reason) are already saved. A card that opens with a saved
   // rating starts closed too, so "Done" sticks when the thread is reopened;
   // tapping the chosen face opens the box again.
-  const [finished, setFinished] = useState(initialRating != null);
+  const [finished, setFinished] = useRetainedState(`${ratingId}:finished`, initialRating != null);
   const [pending, setPending] = useState(false);
   const [closedReason, setClosedReason] = useState<'locked' | 'expired' | null>(initialComment ? 'locked' : null);
   const [failed, setFailed] = useState(false);

package/src/ui/components/ZoomableImage.tsx

@@ -82,16 +82,27 @@ const centreOf = (touches: Touch[]) => ({
 const spreadOf = (touches: Touch[]) =>
   touches.length < 2 ? 0 : Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);
 
+/** A sideways drag at 1×, which the viewer turns into moving between photos. */
+export interface SwipeHandlers {
+  /** Follows the finger: how far it has moved sideways, in px. */
+  move: (dx: number) => void;
+  /** The finger lifted (or a second one landed, with 0s). */
+  end: (dx: number, vx: number) => void;
+}
+
 export function ZoomableImage({
   uri,
   accessibilityLabel,
   onLoad,
   onError,
+  onSwipe,
 }: {
   uri: string;
   accessibilityLabel: string;
   onLoad: () => void;
   onError: () => void;
+  /** Absent: a drag at 1× leaves the image where it is. */
+  onSwipe?: SwipeHandlers;
 }) {
   const reduceMotion = useReduceMotion();
   const [scale] = useState(() => new Animated.Value(1));
@@ -112,8 +123,13 @@ export function ZoomableImage({
     lastTap: null as { at: number; x: number; y: number } | null,
     reduceMotion: false as boolean | null,
     native: false,
+    swipe: undefined as SwipeHandlers | undefined,
+    // A sideways drag at 1× is moving between photos, and how far it got.
+    swiping: false,
+    swipeDx: 0,
   }).current;
   g.reduceMotion = reduceMotion;
+  g.swipe = onSwipe;
 
   const boxRef = useRef<View>(null);
 
@@ -147,8 +163,24 @@ export function ZoomableImage({
   });
   const content = () => fittedSize(g.box, g.image);
 
+  // Measured again whenever fingers go down, not only on layout: a photo swiped
+  // to lays out while the strip is still sliding, so that first reading is off.
+  const measure = () => {
+    boxRef.current?.measureInWindow?.((left, top) => {
+      // Fingers already down were measured from the old spot: keep them where they are.
+      g.start.centre = { x: g.start.centre.x - (left - g.origin.x), y: g.start.centre.y - (top - g.origin.y) };
+      g.origin = { x: left, y: top };
+    });
+  };
+
   const begin = (touches: Touch[]) => {
     g.start = { view: g.view, centre: fromCentre(centreOf(touches)), spread: spreadOf(touches), count: touches.length };
+    measure();
+  };
+
+  const endSwipe = (dx: number, vx: number) => {
+    g.swiping = false;
+    g.swipe?.end(dx, vx);
   };
 
   const pan = useRef(
@@ -160,6 +192,7 @@ export function ZoomableImage({
       onPanResponderTerminationRequest: () => false,
       onPanResponderGrant: (event: GestureResponderEvent) => {
         g.moved = false;
+        g.swiping = false;
         g.grantedAt = Date.now();
         begin(event.nativeEvent.touches);
       },
@@ -172,6 +205,8 @@ export function ZoomableImage({
           g.moved = true;
         }
         const centre = fromCentre(centreOf(touches));
+        // A second finger turns a swipe into a pinch: the photo slides back.
+        if (touches.length > 1 && g.swiping) endSwipe(0, 0);
         if (touches.length > 1 && g.start.spread > 0) {
           // Past the limits while pinching, then springs back on release.
           const zoom = Math.min(MAX_ZOOM * 1.25, Math.max(0.75, (g.start.view.scale * spreadOf(touches)) / g.start.spread));
@@ -184,9 +219,26 @@ export function ZoomableImage({
             y: g.start.view.y + centre.y - g.start.centre.y,
           };
           show(clampView(dragged, g.box, content()), false);
+        } else if (g.swipe && touches.length === 1 && Math.abs(g.start.view.scale - 1) < 0.01) {
+          // At 1× a sideways drag moves between the photos instead. Measured
+          // from where this finger went down alone, not from a pinch before it;
+          // below 1× the finger does nothing and the photo springs back on release.
+          const dx = centre.x - g.start.centre.x;
+          const dy = centre.y - g.start.centre.y;
+          if (g.swiping || (Math.abs(dx) > TAP_SLOP && Math.abs(dx) > Math.abs(dy))) {
+            g.swiping = true;
+            g.swipeDx = dx;
+            g.swipe.move(dx);
+          }
         }
       },
-      onPanResponderRelease: (event: GestureResponderEvent) => {
+      onPanResponderRelease: (event: GestureResponderEvent, gesture?: { vx: number }) => {
+        if (g.swiping) {
+          endSwipe(g.swipeDx, gesture?.vx ?? 0);
+          // A pinch earlier in the gesture may have nudged the photo: it settles too.
+          show(clampView(g.view, g.box, content()), true);
+          return;
+        }
         const now = Date.now();
         const { pageX, pageY } = event.nativeEvent;
         const isTap = !g.moved && now - g.grantedAt < DOUBLE_TAP_MS;
@@ -210,7 +262,10 @@ export function ZoomableImage({
         g.lastTap = isTap ? { at: now, x: pageX, y: pageY } : null;
         show(clampView(g.view, g.box, content()), true);
       },
-      onPanResponderTerminate: () => show(clampView(g.view, g.box, content()), true),
+      onPanResponderTerminate: () => {
+        if (g.swiping) endSwipe(0, 0);
+        show(clampView(g.view, g.box, content()), true);
+      },
     })
   ).current;
 
@@ -218,9 +273,7 @@ export function ZoomableImage({
     const { width, height } = event.nativeEvent.layout;
     g.box = { width, height };
     goNative();
-    boxRef.current?.measureInWindow?.((left, top) => {
-      g.origin = { x: left, y: top };
-    });
+    measure();
   };
 
   const handleLoad = (event: NativeSyntheticEvent<ImageLoadEventData>) => {

package/src/ui/hooks/use-retained-state.ts

@@ -0,0 +1,35 @@
+/**
+ * `useState` that outlives its component. The thread is a FlatList, which
+ * unmounts rows far off screen; a form the visitor half filled in, or a
+ * rating comment, must still be there when they scroll back. Kept in memory
+ * for the session, by a key unique to the message.
+ */
+
+import { useEffect, useRef, useState, type Dispatch, type SetStateAction } from 'react';
+
+const MAX_RETAINED = 100;
+const retained = new Map<string, unknown>();
+
+export function useRetainedState<T>(key: string, initial: T): [T, Dispatch<SetStateAction<T>>] {
+  const [value, setValue] = useState<T>(() => (retained.has(key) ? (retained.get(key) as T) : initial));
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    // Nothing changed yet on mount: only what the visitor did is worth keeping.
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    retained.delete(key);
+    retained.set(key, value);
+    // Oldest first: a Map iterates in insertion order.
+    if (retained.size > MAX_RETAINED) retained.delete(retained.keys().next().value as string);
+  }, [key, value]);
+
+  return [value, setValue];
+}
+
+/** Signing out forgets them: the next visitor on the phone starts clean. */
+export function clearRetainedState(): void {
+  retained.clear();
+}