@repzo/widget-react-native 1.2.1 → 1.2.2

package/src/ui/components/VoiceNote.tsx

@@ -0,0 +1,363 @@
+/**
+ * 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.
+ */
+
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import {
+  ActivityIndicator,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type GestureResponderHandlers,
+  type LayoutChangeEvent,
+} from 'react-native';
+
+import {
+  audioPlayerOptions,
+  claimVoicePlayback,
+  formatVoiceClock,
+  voicePlaybackModule,
+  voiceWaveformLevels,
+} from '../../audio/voice';
+import { PauseIcon, PlayIcon } from './icons';
+import { fontSize, palette, withAlpha } from '../styles/theme';
+
+export interface VoiceNoteLabels {
+  play: string;
+  pause: string;
+  speed: string;
+}
+
+interface VoiceNoteProps {
+  url: string;
+  /** Keeps the made-up waveform the same for this note on every render. */
+  seed: string;
+  /** The workspace color. */
+  color: string;
+  /** In a visitor bubble, which is filled with `color`: the player turns white. */
+  onBrandBubble: boolean;
+  labels: VoiceNoteLabels;
+  /** The note can't be played (expired link, unsupported format). */
+  onError: () => void;
+}
+
+const BAR_COUNT = 32;
+const BAR_WIDTH = 3;
+const BAR_MIN_HEIGHT = 4;
+const BAR_MAX_HEIGHT = 24;
+const BUTTON_SIZE = 36;
+const KNOB_SIZE = 12;
+const SPEEDS = [1, 1.5, 2] as const;
+
+/**
+ * The player is only created once the visitor taps play. The whole thread
+ * renders at once, so a player per note would download every note in the
+ * conversation as soon as the chat opened.
+ */
+export function VoiceNote(props: VoiceNoteProps) {
+  const [started, setStarted] = useState(false);
+  if (started) return <ActiveVoiceNote {...props} />;
+  return (
+    <VoiceNoteLayout
+      {...props}
+      playing={false}
+      loading={false}
+      progress={0}
+      time={null}
+      onToggle={() => setStarted(true)}
+    />
+  );
+}
+
+/** A note that has been started: owns its expo-audio 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 [speedIndex, setSpeedIndex] = useState(0);
+  const [scrub, setScrub] = useState<number | null>(null);
+  const [trackWidth, setTrackWidth] = useState(0);
+  // Whether the visitor asked for playback, so a note still loading shows a
+  // spinner, and one they paused while it loaded doesn't.
+  const [wantsPlay, setWantsPlay] = useState(true);
+  // This note's hold on playback: starting it pauses any other note.
+  const releasePlayback = useRef<(() => void) | null>(null);
+
+  const duration = Math.max(Number(status?.duration) || 0, 0);
+  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
+  // doesn't report them never gets a spinner that can't go away.
+  const loading = wantsPlay && !playing && (status?.isLoaded === false || status?.isBuffering === true);
+
+  const pause = () => {
+    setWantsPlay(false);
+    player.pause();
+  };
+  const start = () => {
+    releasePlayback.current?.();
+    releasePlayback.current = claimVoicePlayback(pause);
+    setWantsPlay(true);
+    player.play();
+  };
+
+  // The visitor tapped play on the idle note, which created this player.
+  // Neither callback changes for the player's lifetime.
+  useEffect(() => {
+    start();
+    return () => releasePlayback.current?.();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // The error is only on the status update that reports it (the next one
+  // clears it), so it is acted on as it arrives.
+  const error = status?.error;
+  useEffect(() => {
+    if (error) onError();
+  }, [error, onError]);
+
+  const togglePlay = async () => {
+    if (playing || loading) {
+      pause();
+      return;
+    }
+    if (finished) await player.seekTo(0);
+    start();
+  };
+
+  const cycleSpeed = () => {
+    const next = (speedIndex + 1) % SPEEDS.length;
+    setSpeedIndex(next);
+    try {
+      player.setPlaybackRate(SPEEDS[next], 'high');
+    } catch {
+      // Some versions take no pitch-correction argument.
+      try {
+        player.setPlaybackRate(SPEEDS[next]);
+      } catch {
+        // Speed unsupported: the note keeps playing at 1×.
+      }
+    }
+  };
+
+  // The latest values for the (stable) PanResponder below.
+  const latest = useRef({ trackWidth, duration, player });
+  latest.current = { trackWidth, duration, player };
+  const ratioAt = (x: number) => {
+    const width = latest.current.trackWidth;
+    return width > 0 ? Math.min(1, Math.max(0, x / width)) : 0;
+  };
+  // Where the finger first touched the track. Later positions are that plus
+  // the drag distance: a move event's own `locationX` is measured from
+  // whatever view is under the finger, not from the track.
+  const startX = useRef(0);
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (event) => {
+        startX.current = event.nativeEvent.locationX;
+        setScrub(ratioAt(startX.current));
+      },
+      onPanResponderMove: (_, gesture) => setScrub(ratioAt(startX.current + gesture.dx)),
+      onPanResponderRelease: (_, gesture) => {
+        const { duration: length, player: current } = latest.current;
+        if (length > 0) void current.seekTo(ratioAt(startX.current + gesture.dx) * length);
+        setScrub(null);
+      },
+      onPanResponderTerminate: () => setScrub(null),
+    })
+  ).current;
+
+  const displayTime =
+    scrub != null ? scrub * duration : playing ? currentTime : finished ? duration : currentTime || duration;
+  // The chip joins once the note was started, so an untouched note shows only its length.
+  const showSpeed = speedIndex > 0 || playing || (currentTime > 0 && !finished);
+
+  return (
+    <VoiceNoteLayout
+      {...props}
+      playing={playing}
+      loading={loading}
+      progress={scrub ?? (duration > 0 ? Math.min(1, currentTime / duration) : 0)}
+      // Nothing to show until the player knows the note's length.
+      time={duration > 0 ? formatVoiceClock(displayTime) : null}
+      onToggle={() => void togglePlay()}
+      track={{ panHandlers: pan.panHandlers, onWidth: setTrackWidth }}
+      speed={showSpeed ? { value: SPEEDS[speedIndex], changed: speedIndex > 0, onPress: cycleSpeed } : null}
+    />
+  );
+}
+
+function VoiceNoteLayout({
+  seed,
+  color,
+  onBrandBubble,
+  labels,
+  playing,
+  loading,
+  progress,
+  time,
+  onToggle,
+  track,
+  speed,
+}: VoiceNoteProps & {
+  playing: boolean;
+  loading: boolean;
+  /** 0–1 through the note. */
+  progress: number;
+  time: string | null;
+  onToggle: () => void;
+  /** Scrubbing; missing on a note that hasn't been started. */
+  track?: { panHandlers: GestureResponderHandlers; onWidth: (width: number) => void };
+  speed?: { value: number; changed: boolean; onPress: () => void } | null;
+}) {
+  const accent = onBrandBubble ? palette.white : color;
+  const onAccent = onBrandBubble ? color : palette.white;
+  const trackColor = onBrandBubble ? withAlpha(palette.white, 0.4) : palette.disabled;
+  const subtle = onBrandBubble ? withAlpha(palette.white, 0.8) : palette.textMuted;
+  const levels = useMemo(() => voiceWaveformLevels(seed, BAR_COUNT), [seed]);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const onTrackLayout = (event: LayoutChangeEvent) => {
+    setTrackWidth(event.nativeEvent.layout.width);
+    track?.onWidth(event.nativeEvent.layout.width);
+  };
+
+  // Bar i's centre sits at this share of the track; the playhead travels the same span.
+  const barCentre = (i: number) =>
+    trackWidth > BAR_WIDTH
+      ? (BAR_WIDTH / 2 + (i * (trackWidth - BAR_WIDTH)) / (BAR_COUNT - 1)) / trackWidth
+      : i / (BAR_COUNT - 1);
+  const knobOffset = trackWidth > 0 ? Math.round(progress * (trackWidth - KNOB_SIZE)) : 0;
+
+  let icon: ReactNode = <PlayIcon size={14} color={onAccent} />;
+  if (loading) icon = <ActivityIndicator size="small" color={onAccent} />;
+  else if (playing) icon = <PauseIcon size={14} color={onAccent} />;
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.row}>
+        <Pressable
+          onPress={onToggle}
+          accessibilityRole="button"
+          accessibilityLabel={playing || loading ? labels.pause : labels.play}
+          accessibilityState={{ busy: loading }}
+          hitSlop={4}
+          style={({ pressed }) => [
+            styles.playButton,
+            { backgroundColor: accent, opacity: pressed ? 0.8 : 1 },
+          ]}>
+          {icon}
+        </Pressable>
+
+        <View
+          style={styles.track}
+          onLayout={onTrackLayout}
+          {...track?.panHandlers}>
+          {levels.map((level, i) => (
+            <View
+              key={i}
+              // Touches land on the track itself, so their position is measured from its edge.
+              pointerEvents="none"
+              style={[
+                styles.bar,
+                {
+                  height: BAR_MIN_HEIGHT + level * (BAR_MAX_HEIGHT - BAR_MIN_HEIGHT),
+                  backgroundColor: barCentre(i) <= progress ? accent : trackColor,
+                },
+              ]}
+            />
+          ))}
+          {trackWidth > 0 ? (
+            <View
+              pointerEvents="none"
+              style={[
+                styles.knob,
+                { backgroundColor: accent, transform: [{ translateX: knobOffset }] },
+              ]}
+            />
+          ) : null}
+        </View>
+      </View>
+
+      <View style={styles.meta}>
+        {time != null ? <Text style={[styles.time, { color: subtle }]}>{time}</Text> : null}
+        {speed ? (
+          <Pressable
+            onPress={speed.onPress}
+            accessibilityRole="button"
+            accessibilityLabel={labels.speed}
+            hitSlop={12}
+            style={({ pressed }) => [
+              styles.speed,
+              { backgroundColor: speed.changed ? accent : trackColor, opacity: pressed ? 0.6 : 1 },
+            ]}>
+            <Text
+              style={[
+                styles.speedText,
+                { color: speed.changed ? onAccent : onBrandBubble ? palette.white : palette.text },
+              ]}>
+              {speed.value}×
+            </Text>
+          </Pressable>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // A timeline runs left to right in every language, so RTL doesn't mirror it
+  // (the touch position and the playhead stay in the same coordinates).
+  root: { minWidth: 200, direction: 'ltr' },
+  row: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  playButton: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    borderRadius: BUTTON_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  track: {
+    flex: 1,
+    minWidth: 0,
+    height: BUTTON_SIZE,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  bar: { width: BAR_WIDTH, borderRadius: BAR_WIDTH / 2 },
+  knob: {
+    position: 'absolute',
+    left: 0,
+    width: KNOB_SIZE,
+    height: KNOB_SIZE,
+    borderRadius: KNOB_SIZE / 2,
+  },
+  meta: {
+    minHeight: 18,
+    marginTop: -2,
+    marginLeft: BUTTON_SIZE + 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  time: { fontSize: fontSize.caption, fontWeight: '500', fontVariant: ['tabular-nums'] },
+  speed: {
+    minWidth: 30,
+    height: 18,
+    paddingHorizontal: 6,
+    borderRadius: 9,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  speedText: { fontSize: 11, fontWeight: '700', fontVariant: ['tabular-nums'] },
+});

package/src/ui/components/icons.tsx

@@ -66,6 +66,39 @@ export function ChevronIcon({
   );
 }
 
+/** A right-pointing triangle, drawn with borders — a voice note's play button. */
+export function PlayIcon({ size = 16, color = palette.white, style }: IconProps) {
+  return (
+    <View style={[{ width: size, height: size }, styles.center, style]}>
+      <View
+        style={{
+          width: 0,
+          height: 0,
+          // The triangle's weight sits left of its box; nudge it to look centred.
+          marginLeft: size * 0.12,
+          borderLeftWidth: size * 0.72,
+          borderTopWidth: size * 0.42,
+          borderBottomWidth: size * 0.42,
+          borderLeftColor: color,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+    </View>
+  );
+}
+
+/** Two upright bars — a playing voice note's pause button. */
+export function PauseIcon({ size = 16, color = palette.white, style }: IconProps) {
+  const bar: ViewStyle = { width: size * 0.26, height: size * 0.8, borderRadius: 1.5, backgroundColor: color };
+  return (
+    <View style={[{ width: size, height: size, flexDirection: 'row', gap: size * 0.2 }, styles.center, style]}>
+      <View style={bar} />
+      <View style={bar} />
+    </View>
+  );
+}
+
 /** Arrow with a shaft — used for the "start a conversation" affordance. */
 export function ArrowRightIcon({ size = 16, color = palette.textMuted, style }: IconProps) {
   const thickness = Math.max(2, size * 0.12);

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

@@ -214,15 +214,6 @@ export const styles = StyleSheet.create({
     height: 140,
     borderRadius: radius.md,
   },
-  attachmentFile: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: radius.md,
-    paddingHorizontal: spacing.sm + 1,
-    paddingVertical: spacing.sm - 1,
-  },
-  attachmentName: {
-    fontSize: fontSize.meta,
-  },
   failedText: {
     fontSize: fontSize.caption,
     marginTop: spacing.xs,

package/src/ui/screens/chat/ChatView.tsx

@@ -59,6 +59,9 @@ import { contrastingTextColor, mixHex, palette, spacing, withAlpha } from '../..
 import { formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
 import { stripHtml } from '../../utils/html';
 import { isHttpUrl, openExternalUrl } from '../../utils/safe-url';
+import { isPlayableAudio } from '../../../audio/voice';
+import { VoiceNote, type VoiceNoteLabels } from '../../components/VoiceNote';
+import { FileCard } from '../../components/FileCard';
 import { backDirection, isRTL } from '../../utils/rtl';
 import { styles } from './ChatView.styles';
 import type { ChatLabels, ChatViewProps } from './ChatView.types';
@@ -759,6 +762,9 @@ const MessageBubble = memo(function MessageBubble({
                 key={attachment.id}
                 attachment={attachment}
                 isVisitor={isVisitor}
+                color={color}
+                voiceLabels={labels.voice}
+                openLabel={labels.openAttachment}
                 onOpenImage={onOpenImage}
               />
             ))}
@@ -818,16 +824,24 @@ function receiptLabel(message: Message, labels: ChatLabels): string | undefined
 function AttachmentPreview({
   attachment,
   isVisitor,
+  color,
+  voiceLabels,
+  openLabel,
   onOpenImage,
 }: {
   attachment: WidgetAttachment;
   isVisitor: boolean;
+  color: string;
+  voiceLabels: VoiceNoteLabels;
+  /** Keeps `{name}`. */
+  openLabel: string;
   onOpenImage: (image: { url: string; name: string }) => void;
 }) {
   // `url` is empty when the server sent a non-http(s) URL (see resolveUrl).
   // 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 [audioFailed, setAudioFailed] = 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.
@@ -837,6 +851,23 @@ function AttachmentPreview({
       ? () => onOpenImage({ url: attachment.url, name: attachment.name })
       : () => void openExternalUrl(attachment.url);
 
+  // Voice notes from the team (and any other audio) play in place, like the
+  // web Messenger — when the app has expo-audio; otherwise the file row below.
+  // One the player can't load (expired link, a format the OS can't decode)
+  // falls back to that row, which opens it in the browser.
+  if (isPlayableAudio(attachment.contentType, attachment.url) && !audioFailed) {
+    return (
+      <VoiceNote
+        url={attachment.url}
+        seed={attachment.id}
+        color={color}
+        onBrandBubble={isVisitor}
+        labels={voiceLabels}
+        onError={() => setAudioFailed(true)}
+      />
+    );
+  }
+
   if (isImage) {
     return (
       <Pressable
@@ -858,20 +889,15 @@ function AttachmentPreview({
   }
 
   return (
-    <Pressable
+    <FileCard
+      name={attachment.name}
+      contentType={attachment.contentType}
+      size={attachment.size}
+      color={color}
+      onBrandBubble={isVisitor}
+      openLabel={openLabel.replace('{name}', attachment.name)}
       onPress={open}
-      disabled={!openable}
-      accessibilityRole="button"
-      style={[
-        styles.attachmentFile,
-        { borderColor: isVisitor ? withAlpha(palette.white, 0.35) : palette.border },
-      ]}>
-      <Text
-        style={[styles.attachmentName, { color: isVisitor ? palette.white : palette.ink }]}
-        numberOfLines={1}>
-        {attachment.name}
-      </Text>
-    </Pressable>
+    />
   );
 }
 

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

@@ -12,6 +12,7 @@ import type {
 import type { AgentUiBlockLabels } from '../../components/AgentUiBlocks';
 import type { ImageViewerLabels } from '../../components/ImageViewer';
 import type { RatingCardLabels } from '../../components/RatingCard';
+import type { VoiceNoteLabels } from '../../components/VoiceNote';
 
 export interface ChatLabels {
   back: string;
@@ -49,6 +50,9 @@ export interface ChatLabels {
   rating: RatingCardLabels;
   attach: AttachLabels;
   viewer: ImageViewerLabels;
+  voice: VoiceNoteLabels;
+  /** Screen-reader label for a file card; keeps `{name}`. */
+  openAttachment: string;
 }
 
 /** Composer attachment copy. Limits are already filled in; `remove` keeps `{name}`. */