@repzo/widget-react-native 1.2.2 → 1.3.0

package/lib/typescript/module/ui/screens/chat/ChatView.styles.d.ts

@@ -78,6 +78,10 @@ export declare const styles: {
         flexGrow: number;
         justifyContent: "center";
     };
+    messagesContentLoading: {
+        flexGrow: number;
+        justifyContent: "flex-end";
+    };
     emptyState: {
         alignItems: "center";
         paddingHorizontal: 20;
@@ -111,13 +115,6 @@ export declare const styles: {
         fontSize: 13;
         fontWeight: "600";
     };
-    stateText: {
-        textAlign: "center";
-        paddingVertical: number;
-        paddingHorizontal: 20;
-        color: "#9ca3af";
-        fontSize: 13;
-    };
     messageRow: {
         maxWidth: "100%";
     };

package/lib/typescript/module/ui/screens/chat/ChatView.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatView.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/chat/ChatView.styles.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAOlF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ZjB,CAAC"}
+{"version":3,"file":"ChatView.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/screens/chat/ChatView.styles.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAOlF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwZjB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@repzo/widget-react-native",
-  "version": "1.2.2",
-  "description": "Repzo chat widget for React Native \u2014 pure JavaScript, no native modules",
+  "version": "1.3.0",
+  "description": "Repzo chat widget for React Native",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
@@ -30,7 +30,14 @@
     "!**/__mocks__",
     "!**/.*",
     "metro.js",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    "android",
+    "!android/build",
+    "!android/.gradle",
+    "!android/.cxx",
+    "ios",
+    "expo-module.config.json",
+    "react-native.config.js"
   ],
   "scripts": {
     "test": "bob build && jest",

package/react-native.config.js

@@ -0,0 +1,12 @@
+// The native voice player is an Expo module, linked through
+// expo-module.config.json. This keeps the React Native CLI from also trying
+// to link it as a classic native module, which apps without Expo modules
+// would fail to build. Without Expo modules, voice notes stay a file row.
+module.exports = {
+  dependency: {
+    platforms: {
+      android: null,
+      ios: null,
+    },
+  },
+};

package/src/audio/native-player.ts

@@ -0,0 +1,106 @@
+/**
+ * The SDK's own voice-note player (`ios/` and `android/`), on the system
+ * players: AVPlayer on iOS, MediaPlayer on Android. It's an Expo module, so it
+ * exists in apps with Expo modules after a native build; in Expo Go, bare
+ * React Native apps and an over-the-air update to an app built with an older
+ * SDK it's missing, and `src/audio/voice.ts` falls back to `expo-audio` or the
+ * file row.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+
+interface NativeAudioModule {
+  create(id: string, url: string): Promise<void>;
+  play(id: string): Promise<void>;
+  pause(id: string): Promise<void>;
+  seekTo(id: string, seconds: number): Promise<void>;
+  setRate(id: string, rate: number): Promise<void>;
+  release(id: string): Promise<void>;
+  addListener?(event: 'onStatus', listener: (status: NativeVoiceStatus) => void): { remove(): void };
+}
+
+/** What the player reports; the same fields `expo-audio`'s status has. */
+export interface NativeVoiceStatus {
+  id: string;
+  currentTime: number;
+  duration: number;
+  playing: boolean;
+  isLoaded: boolean;
+  isBuffering: boolean;
+  didJustFinish: boolean;
+  error?: string | null;
+}
+
+function loadNativeAudio(): NativeAudioModule | null {
+  let mod: any = null;
+  try {
+    mod = require('expo-modules-core').requireOptionalNativeModule('RepzoWidgetAudio');
+  } catch {
+    mod = null;
+  }
+  // Without the JS package (an unusual setup), the module can still be installed.
+  mod = mod ?? (globalThis as any).expo?.modules?.RepzoWidgetAudio ?? null;
+  return mod && typeof mod.create === 'function' && typeof mod.play === 'function' ? mod : null;
+}
+
+const nativeAudio = loadNativeAudio();
+
+/** Subscribes to every player's status; null when events can't be received. */
+function addStatusListener(listener: (status: NativeVoiceStatus) => void): { remove(): void } | null {
+  if (!nativeAudio) return null;
+  try {
+    if (typeof nativeAudio.addListener === 'function') return nativeAudio.addListener('onStatus', listener);
+    // Expo SDK 51 and older: native modules aren't event emitters themselves.
+    const { EventEmitter } = require('expo-modules-core');
+    return new EventEmitter(nativeAudio).addListener('onStatus', listener);
+  } catch {
+    return null;
+  }
+}
+
+/** Whether the app has the SDK's own player. */
+export function hasNativeVoicePlayer(): boolean {
+  return nativeAudio != null;
+}
+
+let nextPlayerId = 0;
+
+const ignore = () => {};
+
+/**
+ * A player for one note, released when the component goes away. Shaped like
+ * `expo-audio`'s `useAudioPlayer` + `useAudioPlayerStatus`, so the voice note
+ * drives either the same way.
+ */
+export function useNativeVoicePlayer(url: string) {
+  const id = useMemo(() => `repzo-voice-${(nextPlayerId += 1)}`, []);
+  const [status, setStatus] = useState<Partial<NativeVoiceStatus>>({ isLoaded: false });
+
+  useEffect(() => {
+    const audio = nativeAudio!;
+    const subscription = addStatusListener((next) => {
+      if (next?.id === id) setStatus(next);
+    });
+    if (!subscription) {
+      setStatus({ isLoaded: false, error: 'Voice notes need a newer Expo SDK' });
+      return undefined;
+    }
+    audio.create(id, url).catch((error: unknown) => setStatus({ isLoaded: false, error: String(error) }));
+    return () => {
+      subscription.remove();
+      audio.release(id).catch(ignore);
+    };
+  }, [id, url]);
+
+  const player = useMemo(
+    () => ({
+      play: () => void nativeAudio!.play(id).catch(ignore),
+      pause: () => void nativeAudio!.pause(id).catch(ignore),
+      seekTo: (seconds: number) => nativeAudio!.seekTo(id, seconds).catch(ignore),
+      setPlaybackRate: (rate: number) => void nativeAudio!.setRate(id, rate).catch(ignore),
+    }),
+    [id]
+  );
+
+  return { player, status };
+}

package/src/audio/voice.ts

@@ -1,6 +1,9 @@
 /**
- * Voice notes (and any audio file) play inside the chat when the host app has
- * `expo-audio`; without it they stay a file row that opens in the browser.
+ * Voice notes (and any audio file) play inside the chat with the SDK's own
+ * native player (`src/audio/native-player.ts`). Where that isn't built into
+ * the app (Expo Go, bare React Native, an app built with SDK 1.2.2 or older),
+ * they play with the host app's `expo-audio` if it has one; otherwise they
+ * stay a file row that opens in the browser.
  *
  * Resolved once at module load, like the attachment pickers: each `require` is
  * static so Metro can see it, and with `allowOptionalDependencies` (see
@@ -8,6 +11,8 @@
  * `try` around it catches.
  */
 
+import { hasNativeVoicePlayer, useNativeVoicePlayer } from './native-player';
+
 let expoAudio: any = null;
 try {
   const mod = require('expo-audio');
@@ -31,9 +36,11 @@ try {
 /** How often the playhead moves while a note plays. */
 const UPDATE_INTERVAL_MS = 100;
 
-/** The installed expo-audio module, or null when the app doesn't have it. */
-export function voicePlaybackModule(): any {
-  return expoAudio;
+/** Which player voice notes use in this app, or null when audio stays a file row. */
+const backend: 'native' | 'expo-audio' | null = hasNativeVoicePlayer() ? 'native' : expoAudio ? 'expo-audio' : null;
+
+export function voicePlaybackBackend(): 'native' | 'expo-audio' | null {
+  return backend;
 }
 
 /** The second argument to `useAudioPlayer` for the installed expo-audio. */
@@ -41,9 +48,26 @@ export function audioPlayerOptions(): unknown {
   return takesOptionsObject ? { updateInterval: UPDATE_INTERVAL_MS } : UPDATE_INTERVAL_MS;
 }
 
+/** expo-audio's player for a note, on the same terms as the native one. */
+function useExpoAudioPlayer(url: string): { player: any; status: any } {
+  const player = expoAudio.useAudioPlayer({ uri: url }, audioPlayerOptions());
+  const status = expoAudio.useAudioPlayerStatus(player);
+  return { player, status };
+}
+
+/**
+ * The player for one note: `play()`, `pause()`, `seekTo(seconds)`,
+ * `setPlaybackRate(rate)`, and its status (`currentTime`, `duration`,
+ * `playing`, `isLoaded`, `isBuffering`, `didJustFinish`, `error`). Only use it
+ * when `voicePlaybackBackend()` isn't null. Picked once, since the backend
+ * never changes while the app runs.
+ */
+export const useVoicePlayer: (url: string) => { player: any; status: any } =
+  backend === 'native' ? useNativeVoicePlayer : useExpoAudioPlayer;
+
 /** Audio the chat can play in place: an `audio/*` attachment with a web address. */
 export function isPlayableAudio(contentType: string | null | undefined, url: string | null | undefined): boolean {
-  return !!expoAudio && (contentType ?? '').toLowerCase().startsWith('audio/') && /^https?:\/\//i.test(url ?? '');
+  return backend != null && (contentType ?? '').toLowerCase().startsWith('audio/') && /^https?:\/\//i.test(url ?? '');
 }
 
 // ─── One note at a time ─────────────────────────────────────────────────────

package/src/state/widget-store.ts

@@ -40,7 +40,7 @@ import type {
 import { setOpenUrlHandler } from '../ui/utils/safe-url';
 
 /** Sent on every init; must match `package.json` (tests/version.test.js checks). */
-const SDK_VERSION = '@repzo/widget-react-native@1.2.2';
+const SDK_VERSION = '@repzo/widget-react-native@1.3.0';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform(): 'ios' | 'android' | 'web' {
@@ -216,6 +216,13 @@ export class WidgetStore {
 
   private pendingConversationId: string | null = null;
 
+  /**
+   * The screen a thread was opened from, so its back button returns there.
+   * Null when it was opened with the messenger closed (a push, a notification
+   * card, `presentConversation`): there is nothing to go back to.
+   */
+  private chatOpenedFrom: 'home' | 'conversations' | null = null;
+
   private appStateSubscription: { remove(): void } | null = null;
 
   /** When the app last went to the background (0: hasn't this session). */
@@ -321,6 +328,14 @@ export class WidgetStore {
     }
     this.state = next;
 
+    // Recorded here because a thread opens from many places (home cards, the
+    // list, the Messages tab, posts) and each would otherwise have to say so.
+    const intoThread = next.view === 'chat' || next.view === 'prechat';
+    if (intoThread && previous.view !== 'chat' && previous.view !== 'prechat') {
+      this.chatOpenedFrom =
+        previous.isOpen && (previous.view === 'home' || previous.view === 'conversations') ? previous.view : null;
+    }
+
     if (next.unreadCount !== previous.unreadCount) {
       this.events.emit(RepzoWidgetEvents.UnreadCountDidChange, { count: next.unreadCount });
     }
@@ -1524,6 +1539,14 @@ export class WidgetStore {
     });
   }
 
+  /**
+   * The thread's back button: the screen it was opened from, or the
+   * conversation list when it was opened from outside the messenger.
+   */
+  leaveConversation(): void {
+    this.setView(this.chatOpenedFrom ?? (this.state.activeTab === 'messages' ? 'conversations' : 'home'));
+  }
+
   setActiveTab(tab: WidgetSpaceType): void {
     if (tab === 'home') {
       this.setState({ activeTab: 'home', view: 'home' });

package/src/ui/WidgetProvider.tsx

@@ -332,9 +332,7 @@ export function RepzoWidgetProvider({
     [store]
   );
 
-  const handleBack = useCallback(() => {
-    store.setView(state.activeTab === 'messages' ? 'conversations' : 'home');
-  }, [state.activeTab, store]);
+  const handleBack = useCallback(() => store.leaveConversation(), [store]);
 
   const handleStartConversation = useCallback(() => {
     if (!theme.allowNewConversations) return;

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,
@@ -20,6 +18,7 @@ import {
 import { useWidgetInsets } from '../hooks/use-widget-insets';
 import { fontSize, palette, spacing } from '../styles/theme';
 import { CloseIcon } from './icons';
+import { ZoomableImage } from './ZoomableImage';
 
 export interface ImageViewerLabels {
   close: string;
@@ -52,25 +51,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' ? (
@@ -112,18 +100,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);