@repzo/widget-react-native 1.2.2 → 1.3.1

package/src/ui/components/ImageViewer.tsx

@@ -1,17 +1,15 @@
 /**
  * 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-to-zoom
- * uses the native ScrollView zoom (iOS); Android shows the image fitted.
+ * stays inside the messenger instead of bouncing to the browser. Pinch, drag
+ * and double-tap zoom work on iOS and Android (see ZoomableImage).
  */
 
 import { useState } from 'react';
 import {
   ActivityIndicator,
-  Image,
   Modal,
   Platform,
   Pressable,
-  ScrollView,
   StyleSheet,
   Text,
   View,
@@ -19,7 +17,9 @@ import {
 
 import { useWidgetInsets } from '../hooks/use-widget-insets';
 import { fontSize, palette, spacing } from '../styles/theme';
+import { isHttpUrl } from '../utils/safe-url';
 import { CloseIcon } from './icons';
+import { ZoomableImage } from './ZoomableImage';
 
 export interface ImageViewerLabels {
   close: string;
@@ -52,25 +52,14 @@ export function ImageViewer({ image, labels, onClose, onOpenExternally }: ImageV
       onRequestClose={onClose}>
       <View style={styles.backdrop} accessibilityViewIsModal>
         {image ? (
-          <ScrollView
-            style={styles.fill}
-            contentContainerStyle={styles.center}
-            maximumZoomScale={4}
-            minimumZoomScale={1}
-            centerContent
-            showsHorizontalScrollIndicator={false}
-            showsVerticalScrollIndicator={false}
-            bouncesZoom>
-            <Image
-              source={{ uri: image.url }}
-              style={styles.image}
-              resizeMode="contain"
-              accessibilityLabel={image.name}
-              accessibilityIgnoresInvertColors
-              onLoad={() => setStatus({ url: image.url, state: 'ready' })}
-              onError={() => setStatus({ url: image.url, state: 'failed' })}
-            />
-          </ScrollView>
+          // 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' })}
+          />
         ) : null}
 
         {image && state === 'loading' ? (
@@ -80,12 +69,15 @@ export function ImageViewer({ image, labels, onClose, onOpenExternally }: ImageV
         {image && state === 'failed' ? (
           <View style={[StyleSheet.absoluteFill, styles.center, styles.failed]}>
             <Text style={styles.failedText}>{labels.loadFailed}</Text>
-            <Pressable
-              onPress={() => onOpenExternally(image.url)}
-              accessibilityRole="button"
-              style={({ pressed }) => [styles.externalButton, pressed && styles.pressed]}>
-              <Text style={styles.externalLabel}>{labels.openExternally}</Text>
-            </Pressable>
+            {/* A visitor's local photo has no web copy to open yet. */}
+            {isHttpUrl(image.url) ? (
+              <Pressable
+                onPress={() => onOpenExternally(image.url)}
+                accessibilityRole="button"
+                style={({ pressed }) => [styles.externalButton, pressed && styles.pressed]}>
+                <Text style={styles.externalLabel}>{labels.openExternally}</Text>
+              </Pressable>
+            ) : null}
           </View>
         ) : null}
 
@@ -112,18 +104,11 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#000000',
   },
-  fill: {
-    flex: 1,
-  },
   center: {
     flexGrow: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
   header: {
     position: 'absolute',
     top: 0,

package/src/ui/components/MessagesSkeleton.tsx

@@ -0,0 +1,92 @@
+/**
+ * Placeholder bubbles while a conversation's messages load: the shape of a
+ * thread (team on one side, visitor on the other) that gently pulses, so the
+ * screen reads as "messages are coming" instead of a line of text.
+ */
+
+import { useEffect, useState } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+
+import { useReduceMotion } from '../hooks/use-reduce-motion';
+import { palette, radius, spacing, withAlpha } from '../styles/theme';
+import { isRTL } from '../utils/rtl';
+
+/** Who "sent" each placeholder, its width, and how many lines it holds. */
+const ROWS: { visitor: boolean; width: `${number}%`; lines: number }[] = [
+  { visitor: false, width: '62%', lines: 2 },
+  { visitor: false, width: '40%', lines: 1 },
+  { visitor: true, width: '48%', lines: 1 },
+  { visitor: false, width: '70%', lines: 3 },
+  { visitor: true, width: '56%', lines: 2 },
+  { visitor: false, width: '34%', lines: 1 },
+];
+
+const LINE_HEIGHT = 20;
+const PULSE_MS = 900;
+
+export function MessagesSkeleton({ color, label }: { color: string; label: string }) {
+  const reduceMotion = useReduceMotion();
+  const [opacity] = useState(() => new Animated.Value(1));
+  const rtl = isRTL();
+
+  useEffect(() => {
+    // `null` (not known yet) holds still too, so the bubbles never jump.
+    if (reduceMotion !== false) return undefined;
+    const pulse = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.45,
+          duration: PULSE_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: PULSE_MS,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    pulse.start();
+    return () => pulse.stop();
+  }, [opacity, reduceMotion]);
+
+  return (
+    <Animated.View
+      style={[styles.root, { opacity }]}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      accessibilityState={{ busy: true }}>
+      {ROWS.map((row, i) => (
+        <View key={i} style={row.visitor ? styles.rowVisitor : styles.rowAgent}>
+          <View
+            style={[
+              styles.bubble,
+              row.visitor
+                ? [styles.bubbleVisitor, rtl && styles.bubbleVisitorRTL, { backgroundColor: withAlpha(color, 0.16) }]
+                : [styles.bubbleAgent, rtl && styles.bubbleAgentRTL],
+              { width: row.width, height: row.lines * LINE_HEIGHT + spacing.sm * 2 + 4 },
+            ]}
+          />
+        </View>
+      ))}
+    </Animated.View>
+  );
+}
+
+// The same corners as real bubbles, so the thread doesn't reshape when it loads.
+const BUBBLE_RADIUS = radius.lg + 4;
+const TAIL_RADIUS = 4;
+
+const styles = StyleSheet.create({
+  root: { gap: spacing.sm },
+  rowAgent: { alignItems: 'flex-start' },
+  rowVisitor: { alignItems: 'flex-end' },
+  bubble: { borderRadius: BUBBLE_RADIUS },
+  bubbleAgent: { backgroundColor: palette.surfaceAlt, borderBottomLeftRadius: TAIL_RADIUS },
+  bubbleAgentRTL: { borderBottomLeftRadius: BUBBLE_RADIUS, borderBottomRightRadius: TAIL_RADIUS },
+  bubbleVisitor: { borderBottomRightRadius: TAIL_RADIUS },
+  bubbleVisitorRTL: { borderBottomRightRadius: BUBBLE_RADIUS, borderBottomLeftRadius: TAIL_RADIUS },
+});

package/src/ui/components/VoiceNote.tsx

@@ -2,8 +2,8 @@
  * A voice note (or any audio attachment) played inside the chat, laid out the
  * way messaging apps do it: a play button beside a waveform the visitor can
  * tap or drag to jump through the note, the time under it, and a speed chip
- * once the note has been started. Only rendered when the host app has
- * `expo-audio` (see `src/audio/voice.ts`); without it audio stays a file row.
+ * once the note has been started. Only rendered when the app can play audio
+ * (see `src/audio/voice.ts`); otherwise audio stays a file row.
  */
 
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
@@ -18,13 +18,7 @@ import {
   type LayoutChangeEvent,
 } from 'react-native';
 
-import {
-  audioPlayerOptions,
-  claimVoicePlayback,
-  formatVoiceClock,
-  voicePlaybackModule,
-  voiceWaveformLevels,
-} from '../../audio/voice';
+import { claimVoicePlayback, formatVoiceClock, useVoicePlayer, voiceWaveformLevels } from '../../audio/voice';
 import { PauseIcon, PlayIcon } from './icons';
 import { fontSize, palette, withAlpha } from '../styles/theme';
 
@@ -75,12 +69,10 @@ export function VoiceNote(props: VoiceNoteProps) {
   );
 }
 
-/** A note that has been started: owns its expo-audio player and plays on mount. */
+/** A note that has been started: owns its player and plays on mount. */
 function ActiveVoiceNote(props: VoiceNoteProps) {
   const { url, onError } = props;
-  const audio = voicePlaybackModule();
-  const player = audio.useAudioPlayer({ uri: url }, audioPlayerOptions());
-  const status = audio.useAudioPlayerStatus(player);
+  const { player, status } = useVoicePlayer(url);
   const [speedIndex, setSpeedIndex] = useState(0);
   const [scrub, setScrub] = useState<number | null>(null);
   const [trackWidth, setTrackWidth] = useState(0);
@@ -94,7 +86,7 @@ function ActiveVoiceNote(props: VoiceNoteProps) {
   const currentTime = Math.max(Number(status?.currentTime) || 0, 0);
   const playing = !!status?.playing;
   const finished = !!status?.didJustFinish || (duration > 0 && currentTime >= duration - 0.1);
-  // `isLoaded` / `isBuffering` are compared strictly: an expo-audio that
+  // `isLoaded` / `isBuffering` are compared strictly: a player that
   // doesn't report them never gets a spinner that can't go away.
   const loading = wantsPlay && !playing && (status?.isLoaded === false || status?.isBuffering === true);
 

package/src/ui/components/ZoomableImage.tsx

@@ -0,0 +1,250 @@
+/**
+ * An image the visitor can pinch to zoom, drag around once zoomed, and
+ * double-tap to zoom in on a spot (and again to zoom back out). Built on
+ * PanResponder and Animated, so it behaves the same on iOS and Android
+ * without a gesture library in the host app.
+ */
+
+import { useRef, useState } from 'react';
+import {
+  Animated,
+  PanResponder,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type ImageLoadEventData,
+  type LayoutChangeEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+
+import { useReduceMotion } from '../hooks/use-reduce-motion';
+
+export const MAX_ZOOM = 4;
+export const DOUBLE_TAP_ZOOM = 2.5;
+const DOUBLE_TAP_MS = 300;
+const DOUBLE_TAP_SLOP = 30;
+const TAP_SLOP = 10;
+
+/** Scale and offset (from the centre of the view) of the image. */
+export interface ZoomView {
+  scale: number;
+  x: number;
+  y: number;
+}
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+/** The size the image is drawn at with `contain`, before any zoom. */
+export function fittedSize(box: Size, image: Size | null): Size {
+  if (!image || image.width <= 0 || image.height <= 0) return box;
+  const fit = Math.min(box.width / image.width, box.height / image.height);
+  return { width: image.width * fit, height: image.height * fit };
+}
+
+/**
+ * Keeps the image inside the screen: zoom between 1× and `MAX_ZOOM`, and no
+ * empty space past an edge the zoomed image is wider (or taller) than.
+ */
+export function clampView(view: ZoomView, box: Size, content: Size): ZoomView {
+  const scale = Math.min(MAX_ZOOM, Math.max(1, view.scale));
+  const maxX = Math.max(0, (content.width * scale - box.width) / 2);
+  const maxY = Math.max(0, (content.height * scale - box.height) / 2);
+  return {
+    scale,
+    x: Math.min(maxX, Math.max(-maxX, view.x)),
+    y: Math.min(maxY, Math.max(-maxY, view.y)),
+  };
+}
+
+/**
+ * The view at `scale` that keeps the spot that was under `from` (a point
+ * relative to the centre, in the `start` view) under `to`. Pinching zooms
+ * around the fingers this way, and moving them pans at the same time.
+ */
+export function zoomAround(start: ZoomView, scale: number, from: { x: number; y: number }, to: { x: number; y: number }): ZoomView {
+  const spotX = (from.x - start.x) / start.scale;
+  const spotY = (from.y - start.y) / start.scale;
+  return { scale, x: to.x - scale * spotX, y: to.y - scale * spotY };
+}
+
+interface Touch {
+  pageX: number;
+  pageY: number;
+}
+
+const centreOf = (touches: Touch[]) => ({
+  x: touches.reduce((sum, t) => sum + t.pageX, 0) / touches.length,
+  y: touches.reduce((sum, t) => sum + t.pageY, 0) / touches.length,
+});
+const spreadOf = (touches: Touch[]) =>
+  touches.length < 2 ? 0 : Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);
+
+export function ZoomableImage({
+  uri,
+  accessibilityLabel,
+  onLoad,
+  onError,
+}: {
+  uri: string;
+  accessibilityLabel: string;
+  onLoad: () => void;
+  onError: () => void;
+}) {
+  const reduceMotion = useReduceMotion();
+  const [scale] = useState(() => new Animated.Value(1));
+  const [x] = useState(() => new Animated.Value(0));
+  const [y] = useState(() => new Animated.Value(0));
+
+  // Gesture state, read by the (stable) PanResponder below.
+  const g = useRef({
+    view: { scale: 1, x: 0, y: 0 } as ZoomView,
+    box: { width: 0, height: 0 } as Size,
+    // Where the box sits on screen, so touches can be measured from its centre.
+    origin: { x: 0, y: 0 },
+    image: null as Size | null,
+    // The view, finger centre and finger spread when the current set of fingers went down.
+    start: { view: { scale: 1, x: 0, y: 0 } as ZoomView, centre: { x: 0, y: 0 }, spread: 0, count: 0 },
+    moved: false,
+    grantedAt: 0,
+    lastTap: null as { at: number; x: number; y: number } | null,
+    reduceMotion: false as boolean | null,
+    native: false,
+  }).current;
+  g.reduceMotion = reduceMotion;
+
+  const boxRef = useRef<View>(null);
+
+  const show = (view: ZoomView, animate: boolean) => {
+    g.view = view;
+    if (!animate || g.reduceMotion !== false) {
+      scale.setValue(view.scale);
+      x.setValue(view.x);
+      y.setValue(view.y);
+      return;
+    }
+    const spring = (value: Animated.Value, toValue: number) =>
+      Animated.spring(value, { toValue, useNativeDriver: true, bounciness: 0, speed: 18 });
+    Animated.parallel([spring(scale, view.scale), spring(x, view.x), spring(y, view.y)]).start();
+  };
+
+  // Hands the transform to the native driver as soon as the image is on
+  // screen. Until a native animation had run, Android (new architecture) didn't
+  // draw finger moves, so pinching only worked after a double tap.
+  const goNative = () => {
+    if (g.native) return;
+    g.native = true;
+    const settle = (value: Animated.Value, toValue: number) =>
+      Animated.spring(value, { toValue, useNativeDriver: true, bounciness: 0, speed: 18 });
+    Animated.parallel([settle(scale, g.view.scale), settle(x, g.view.x), settle(y, g.view.y)]).start();
+  };
+
+  const fromCentre = (point: { x: number; y: number }) => ({
+    x: point.x - g.origin.x - g.box.width / 2,
+    y: point.y - g.origin.y - g.box.height / 2,
+  });
+  const content = () => fittedSize(g.box, g.image);
+
+  const begin = (touches: Touch[]) => {
+    g.start = { view: g.view, centre: fromCentre(centreOf(touches)), spread: spreadOf(touches), count: touches.length };
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      // Never hand the gesture over: nothing else in the full-screen viewer
+      // wants it, and giving it up at 1× ended a pinch as it started.
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: (event: GestureResponderEvent) => {
+        g.moved = false;
+        g.grantedAt = Date.now();
+        begin(event.nativeEvent.touches);
+      },
+      onPanResponderMove: (event: GestureResponderEvent, gesture) => {
+        const touches = event.nativeEvent.touches;
+        if (touches.length === 0) return;
+        // A finger landed or lifted: carry on from where the image is now.
+        if (touches.length !== g.start.count) begin(touches);
+        if (Math.abs(gesture.dx) > TAP_SLOP || Math.abs(gesture.dy) > TAP_SLOP || touches.length > 1) {
+          g.moved = true;
+        }
+        const centre = fromCentre(centreOf(touches));
+        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));
+          show(zoomAround(g.start.view, zoom, g.start.centre, centre), false);
+        } else if (g.start.view.scale > 1) {
+          // One finger drags the zoomed image; at 1× there's nothing to drag.
+          const dragged = {
+            ...g.start.view,
+            x: g.start.view.x + centre.x - g.start.centre.x,
+            y: g.start.view.y + centre.y - g.start.centre.y,
+          };
+          show(clampView(dragged, g.box, content()), false);
+        }
+      },
+      onPanResponderRelease: (event: GestureResponderEvent) => {
+        const now = Date.now();
+        const { pageX, pageY } = event.nativeEvent;
+        const isTap = !g.moved && now - g.grantedAt < DOUBLE_TAP_MS;
+        const last = g.lastTap;
+        if (
+          isTap &&
+          last &&
+          now - last.at < DOUBLE_TAP_MS &&
+          Math.hypot(pageX - last.x, pageY - last.y) < DOUBLE_TAP_SLOP
+        ) {
+          g.lastTap = null;
+          // Zooming in keeps the tapped spot under the finger (as far as the edges allow).
+          const tapped = fromCentre({ x: pageX, y: pageY });
+          const target =
+            g.view.scale > 1.01
+              ? { scale: 1, x: 0, y: 0 }
+              : zoomAround({ scale: 1, x: 0, y: 0 }, DOUBLE_TAP_ZOOM, tapped, tapped);
+          show(clampView(target, g.box, content()), true);
+          return;
+        }
+        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),
+    })
+  ).current;
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    g.box = { width, height };
+    goNative();
+    boxRef.current?.measureInWindow?.((left, top) => {
+      g.origin = { x: left, y: top };
+    });
+  };
+
+  const handleLoad = (event: NativeSyntheticEvent<ImageLoadEventData>) => {
+    const source = event?.nativeEvent?.source;
+    if (source && source.width > 0 && source.height > 0) g.image = { width: source.width, height: source.height };
+    onLoad();
+  };
+
+  return (
+    <View ref={boxRef} style={styles.box} onLayout={onLayout} {...pan.panHandlers}>
+      <Animated.Image
+        source={{ uri }}
+        style={[styles.image, { transform: [{ translateX: x }, { translateY: y }, { scale }] }]}
+        resizeMode="contain"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityIgnoresInvertColors
+        onLoad={handleLoad}
+        onError={onError}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { flex: 1, overflow: 'hidden' },
+  image: { width: '100%', height: '100%' },
+});

package/src/ui/components/icons.tsx

@@ -322,20 +322,18 @@ export function AlertIcon({ size = 16, color = palette.warningIcon, style }: Ico
   );
 }
 
-export function PaperclipIcon({ size = 18, color = palette.textMuted, style }: IconProps) {
-  const thickness = Math.max(1.5, size * 0.1);
+/** Two upright crossed bars — the composer's attach button. */
+export function PlusIcon({ size = 18, color = palette.textMuted, style }: IconProps) {
+  const thickness = Math.max(2, size * 0.1);
+  const bar: ViewStyle = {
+    position: 'absolute',
+    borderRadius: thickness / 2,
+    backgroundColor: color,
+  };
   return (
     <View style={[{ width: size, height: size }, styles.center, style]}>
-      <View
-        style={{
-          width: size * 0.42,
-          height: size * 0.82,
-          borderRadius: size * 0.21,
-          borderWidth: thickness,
-          borderColor: color,
-          transform: [{ rotate: '35deg' }],
-        }}
-      />
+      <View style={[bar, { width: size * 0.8, height: thickness }]} />
+      <View style={[bar, { width: thickness, height: size * 0.8 }]} />
     </View>
   );
 }

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

@@ -84,6 +84,11 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
     justifyContent: 'center',
   },
+  // Placeholders sit at the bottom, where the newest messages will land.
+  messagesContentLoading: {
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+  },
   emptyState: {
     alignItems: 'center',
     paddingHorizontal: spacing.xl,
@@ -117,13 +122,6 @@ export const styles = StyleSheet.create({
     fontSize: fontSize.meta,
     fontWeight: '600',
   },
-  stateText: {
-    textAlign: 'center',
-    paddingVertical: 40,
-    paddingHorizontal: spacing.xl,
-    color: palette.textSubtle,
-    fontSize: fontSize.meta,
-  },
   messageRow: {
     maxWidth: '100%',
   },
@@ -214,9 +212,19 @@ export const styles = StyleSheet.create({
     height: 140,
     borderRadius: radius.md,
   },
+  // Follows the bubble's side. Under the visitor's it lines up with
+  // `receiptText`, which it replaces on a failed message.
+  failedRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    marginTop: 3,
+    marginEnd: spacing.xs,
+  },
   failedText: {
-    fontSize: fontSize.caption,
-    marginTop: spacing.xs,
+    fontSize: 11,
+    fontWeight: '600',
+    color: palette.danger,
   },
   deletedBubble: {
     maxWidth: '80%',