@repzo/widget-react-native 1.2.1 → 1.2.2

package/src/api/client.ts

@@ -62,6 +62,16 @@ export class RepzoWidgetError extends Error {
   }
 }
 
+/** A Send message part asked for on its own, which may share one request with others. */
+type SendPart = 'post' | 'outbound';
+
+interface SendPartAsk {
+  part: SendPart;
+  own: () => Promise<unknown>;
+  resolve: (value: unknown) => void;
+  reject: (error: unknown) => void;
+}
+
 interface RequestOptions {
   method?: 'GET' | 'POST' | 'DELETE';
   body?: unknown;
@@ -92,6 +102,9 @@ export class WidgetApiClient {
   /** Set by the store: a 403 with a terminal `code` came back from any endpoint. */
   onTerminalError: ((error: RepzoWidgetError) => void) | null = null;
 
+  /** Send parts asked for in this tick — see askSendPart. */
+  private sendPartBatch: SendPartAsk[] | null = null;
+
   configure(baseUrl: string, channelAccountId: string) {
     this.baseUrl = baseUrl.replace(/\/$/, '');
     this.channelAccountId = channelAccountId;
@@ -194,7 +207,9 @@ export class WidgetApiClient {
   }
 
   getOutboundMessage(): Promise<{ message: OutboundMessage | null }> {
-    return this.request(`/api/widget/outbound/${encodeURIComponent(this.channelAccountId)}`);
+    return this.askSendPart('outbound', () =>
+      this.request(`/api/widget/outbound/${encodeURIComponent(this.channelAccountId)}`)
+    );
   }
 
   /**
@@ -202,7 +217,46 @@ export class WidgetApiClient {
    * `recheckInMs`: ask again after this long — the shown one stops then.
    */
   getPost(): Promise<{ post: WidgetPost | null; recheckInMs?: number | null }> {
-    return this.request('/api/widget/send/post?platform=mobile');
+    return this.askSendPart('post', () => this.request('/api/widget/send/post?platform=mobile'));
+  }
+
+  /**
+   * The post and the launcher's chat message are both asked for right after a
+   * session starts: asks made in the same tick go out as one request (each
+   * part answers the way its own endpoint does). A lone ask, a Workstation
+   * deployment that doesn't know a part yet (it leaves it out — the
+   * `outbound` part is newer than the combined endpoint), or a failed combined
+   * request falls back to each part's own endpoint, as before.
+   */
+  private askSendPart<T>(part: SendPart, own: () => Promise<T>): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+      if (!this.sendPartBatch) {
+        this.sendPartBatch = [];
+        setTimeout(() => void this.flushSendParts(), 0);
+      }
+      this.sendPartBatch.push({ part, own, resolve: resolve as (value: unknown) => void, reject });
+    });
+  }
+
+  private async flushSendParts(): Promise<void> {
+    const asks = this.sendPartBatch ?? [];
+    this.sendPartBatch = null;
+    const parts = Array.from(new Set(asks.map((ask) => ask.part)));
+    let answer: Record<string, unknown> | null = null;
+    if (parts.length > 1) {
+      try {
+        answer = await this.request<Record<string, unknown>>(
+          `/api/widget/send/messages?include=${parts.join(',')}&platform=mobile`
+        );
+      } catch {
+        answer = null;
+      }
+    }
+    for (const ask of asks) {
+      const value = answer?.[ask.part];
+      if (value && typeof value === 'object') ask.resolve(value);
+      else ask.own().then(ask.resolve, ask.reject);
+    }
   }
 
   /**

package/src/audio/voice.ts

@@ -0,0 +1,103 @@
+/**
+ * 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.
+ *
+ * Resolved once at module load, like the attachment pickers: each `require` is
+ * static so Metro can see it, and with `allowOptionalDependencies` (see
+ * metro.js) an uninstalled one bundles as a require that throws, which the
+ * `try` around it catches.
+ */
+
+let expoAudio: any = null;
+try {
+  const mod = require('expo-audio');
+  if (typeof mod?.useAudioPlayer === 'function' && typeof mod?.useAudioPlayerStatus === 'function') {
+    expoAudio = mod;
+  }
+} catch {
+  expoAudio = null;
+}
+
+// expo-audio 1.x (Expo SDK 54+) takes `{ updateInterval }`; 0.x (SDK 53) took
+// the interval itself. Passing the wrong shape would break the player.
+let takesOptionsObject = true;
+try {
+  const version: unknown = require('expo-audio/package.json')?.version;
+  if (typeof version === 'string') takesOptionsObject = Number(version.split('.')[0]) >= 1;
+} catch {
+  takesOptionsObject = true;
+}
+
+/** 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;
+}
+
+/** The second argument to `useAudioPlayer` for the installed expo-audio. */
+export function audioPlayerOptions(): unknown {
+  return takesOptionsObject ? { updateInterval: UPDATE_INTERVAL_MS } : UPDATE_INTERVAL_MS;
+}
+
+/** 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 ?? '');
+}
+
+// ─── One note at a time ─────────────────────────────────────────────────────
+// Each bubble owns its own player, so starting a second note would otherwise
+// talk over the first.
+
+let playing: { pause: () => void } | null = null;
+
+/**
+ * Called as a note starts: pauses whichever note was playing and returns a
+ * release for this one's claim (call it when the note goes away).
+ */
+export function claimVoicePlayback(pause: () => void): () => void {
+  const claim = { pause };
+  const previous = playing;
+  playing = claim;
+  if (previous) {
+    try {
+      previous.pause();
+    } catch {
+      // Its player was released with its bubble: nothing is playing.
+    }
+  }
+  return () => {
+    if (playing === claim) playing = null;
+  };
+}
+
+// ─── Waveform ───────────────────────────────────────────────────────────────
+
+/**
+ * Bar heights (0.15–1) for a note's waveform. Workstation doesn't send the
+ * recorded loudness to visitors, so the pattern is made up — seeded from the
+ * attachment, so the same note always draws the same bars.
+ */
+export function voiceWaveformLevels(seed: string, count: number): number[] {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i += 1) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  const levels: number[] = [];
+  for (let i = 0; i < count; i += 1) {
+    h ^= h << 13;
+    h ^= h >>> 17;
+    h ^= h << 5;
+    const n = ((h >>> 0) % 1000) / 1000;
+    levels.push(0.15 + Math.pow(n, 0.85) * 0.85);
+  }
+  return levels;
+}
+
+/** `m:ss` for a playback position or length. */
+export function formatVoiceClock(seconds: number): string {
+  const s = Math.max(0, Math.floor(Number.isFinite(seconds) ? seconds : 0));
+  return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
+}

package/src/i18n.ts

@@ -70,6 +70,12 @@ export const DEFAULT_LABELS = {
   attachmentsTooLargeTogether:
     'Attachments are too large to send together — send some in another message',
   attachmentFailed: "Couldn't attach that file",
+  // A file in a message; tapping opens it. `{name}` is the file name.
+  openAttachment: 'Open {name}',
+  // Voice notes played in the chat (with expo-audio).
+  voicePlay: 'Play voice message',
+  voicePause: 'Pause voice message',
+  voiceSpeed: 'Playback speed',
   // Full-screen image viewer.
   imageLoadFailed: "Couldn't load this image",
   openImageExternally: 'Open image',

package/src/locales.ts

@@ -29,6 +29,10 @@ const ar: LabelMap = {
   attachmentTooMany: 'يمكنك إرفاق {count} ملفات كحد أقصى',
   attachmentsTooLargeTogether: 'المرفقات كبيرة جدًا لإرسالها معًا — أرسل بعضها في رسالة أخرى',
   attachmentFailed: 'تعذر إرفاق هذا الملف',
+  openAttachment: 'فتح {name}',
+  voicePlay: 'تشغيل الرسالة الصوتية',
+  voicePause: 'إيقاف الرسالة الصوتية مؤقتًا',
+  voiceSpeed: 'سرعة التشغيل',
   imageLoadFailed: 'تعذر تحميل هذه الصورة',
   openImageExternally: 'فتح الصورة',
   cameraPermissionDenied: 'اسمح بالوصول إلى الكاميرا من الإعدادات لالتقاط صورة',

package/src/state/use-widget-state.ts

@@ -4,7 +4,7 @@
  * component is mounted; this hook only subscribes to it.
  */
 
-import { useSyncExternalStore } from 'react';
+import { useRef, useSyncExternalStore } from 'react';
 
 import { controller } from '../controller';
 import type { WidgetState } from '../types';
@@ -18,3 +18,32 @@ export function useWidgetState(): WidgetState {
 export function useWidgetStore(): WidgetStore {
   return controller.store;
 }
+
+/**
+ * A slice of the state that re-renders only when the slice changes (by
+ * `isEqual`) — for UI that lives on the host's own screens, like the launcher,
+ * which shouldn't redraw on every message or typing event. Internal.
+ */
+export function useWidgetSelector<T>(
+  select: (state: WidgetState) => T,
+  isEqual: (previous: T, next: T) => boolean
+): T {
+  const store = controller.store;
+  const last = useRef<{ state: WidgetState; value: T } | null>(null);
+  const getSnapshot = () => {
+    const state = store.getState();
+    const previous = last.current;
+    if (previous && previous.state === state) return previous.value;
+    const value = select(state);
+    // Same slice from a newer state: keep the old value so React bails out.
+    last.current = { state, value: previous && isEqual(previous.value, value) ? previous.value : value };
+    return last.current.value;
+  };
+  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+
+/** Same keys, same values (by identity). */
+export function shallowEqual<T extends Record<string, unknown>>(previous: T, next: T): boolean {
+  const keys = Object.keys(previous);
+  return keys.length === Object.keys(next).length && keys.every((key) => Object.is(previous[key], next[key]));
+}

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.1';
+const SDK_VERSION = '@repzo/widget-react-native@1.2.2';
 
 /** The platform this session reports — mobile sessions get the Mobile SDKs overrides. */
 function sessionPlatform(): 'ios' | 'android' | 'web' {
@@ -67,6 +67,13 @@ const LOGOUT_REQUEST_TIMEOUT_MS = 5_000;
 const STREAM_REAUTH_MIN_INTERVAL_MS = 30_000;
 /** Live replies in the open thread advance the server read cursor, batched. */
 const MARK_READ_DEBOUNCE_MS = 1_000;
+/**
+ * Back from the background sooner than this, availability and the post are
+ * still current enough to skip re-asking. Reps hop to maps or the camera and
+ * back all day; the list and the open thread still catch up every time, since
+ * the stream was closed meanwhile.
+ */
+const FOREGROUND_REFRESH_AFTER_MS = 5 * 60_000;
 /** Live events held back while a draft's first send is creating its thread. */
 const DRAFT_EVENT_BUFFER_LIMIT = 50;
 /** How long a post stays up after a reaction, thanking them, before it goes. */
@@ -211,6 +218,9 @@ export class WidgetStore {
 
   private appStateSubscription: { remove(): void } | null = null;
 
+  /** When the app last went to the background (0: hasn't this session). */
+  private backgroundedAt = 0;
+
   private lastTypingPingAt = 0;
 
   private visitorTypingActive = false;
@@ -914,10 +924,14 @@ export class WidgetStore {
 
   private watchAppState() {
     if (this.appStateSubscription) return;
+    // Booted while already in the background (a push woke the app): coming
+    // to the foreground is a return from the background too.
+    if (AppState.currentState === 'background') this.backgroundedAt = Date.now();
     this.appStateSubscription = AppState.addEventListener('change', (status: AppStateStatus) => {
       if (status === 'active') {
         void this.resumeFromBackground();
       } else if (status === 'background') {
+        this.backgroundedAt = Date.now();
         this.realtime.close();
       }
     });
@@ -931,6 +945,12 @@ export class WidgetStore {
       if (this.state.error) await this.retry();
       return;
     }
+    // Only the background closes the stream. Back from merely inactive (a
+    // system sheet, Face ID, the notification shade) it never stopped, so
+    // there is nothing to catch up on.
+    if (!this.backgroundedAt) return;
+    const awayMs = Date.now() - this.backgroundedAt;
+    this.backgroundedAt = 0;
     const epoch = this.epoch;
     const token = await this.client.getToken();
     if (!token || this.isStale(epoch)) return;
@@ -938,6 +958,7 @@ export class WidgetStore {
     // The stream had a gap: refresh the list so unread/snippets are correct,
     // and the thread on screen so replies sent meanwhile show up.
     await Promise.all([this.refreshConversations(), this.refreshOpenThread()]);
+    if (awayMs < FOREGROUND_REFRESH_AFTER_MS) return;
     await this.refreshConfig();
     // A post may have gone live (or ended) while the app was away.
     if (!this.isStale(epoch)) this.loadPost();

package/src/ui/WidgetProvider.tsx

@@ -182,6 +182,7 @@ export function RepzoWidgetProvider({
       emptyConversation: labels.emptyConversation,
       messagePlaceholder: labels.messagePlaceholder,
       failedToSend: labels.failedToSend,
+      openAttachment: labels.openAttachment,
       thinking: labels.thinking,
       team: labels.team,
       statusOnline: labels.homeStatusOnline,
@@ -224,6 +225,11 @@ export function RepzoWidgetProvider({
         loadFailed: labels.imageLoadFailed,
         openExternally: labels.openImageExternally,
       },
+      voice: {
+        play: labels.voicePlay,
+        pause: labels.voicePause,
+        speed: labels.voiceSpeed,
+      },
     }),
     [labels, blockLabels, attachLabels]
   );

package/src/ui/components/FileCard.tsx

@@ -0,0 +1,111 @@
+/**
+ * An attachment that opens outside the chat (PDF, video, sheet…), drawn as a
+ * card that reads as tappable: a tile with the file's type, its name, the
+ * type and size under it, and an arrow — instead of a bare name in a box.
+ */
+
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { formatBytes } from '../../attachments/pickers';
+import { ChevronIcon, PlayIcon } from './icons';
+import { fontSize, palette, radius, spacing, withAlpha } from '../styles/theme';
+import { forwardDirection, START_ALIGN } from '../utils/rtl';
+
+/** `PDF`, `MP4`, `XLSX` — from the name, else the MIME subtype; at most 4 letters. */
+export function fileTypeLabel(name: string, contentType: string | null | undefined): string {
+  const fromName = /\.([a-z0-9]{1,8})$/i.exec(name.trim())?.[1];
+  const fromType = (contentType ?? '').split('/')[1]?.split(/[;+.-]/)[0];
+  const label = (fromName || fromType || 'file').toUpperCase();
+  return label.length > 4 ? label.slice(0, 4) : label;
+}
+
+export function FileCard({
+  name,
+  contentType,
+  size,
+  color,
+  onBrandBubble,
+  openLabel,
+  onPress,
+}: {
+  name: string;
+  contentType: string;
+  size: number;
+  /** The workspace color. */
+  color: string;
+  /** In a visitor bubble, which is filled with `color`: the card turns white-on-color. */
+  onBrandBubble: boolean;
+  /** Screen-reader label, e.g. "Open report.pdf". */
+  openLabel: string;
+  /** Missing while there's nothing to open yet (an unsent file). */
+  onPress?: () => void;
+}) {
+  const type = fileTypeLabel(name, contentType);
+  const isVideo = (contentType ?? '').toLowerCase().startsWith('video/');
+  const meta = size > 0 ? `${type} · ${formatBytes(size)}` : type;
+  const accent = onBrandBubble ? palette.white : color;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={!onPress}
+      accessibilityRole="button"
+      accessibilityLabel={openLabel}
+      style={({ pressed }) => [
+        styles.card,
+        onBrandBubble
+          ? { backgroundColor: withAlpha(palette.white, 0.16), borderColor: withAlpha(palette.white, 0.35) }
+          : { backgroundColor: palette.white, borderColor: palette.border },
+        !onPress && styles.unavailable,
+        pressed && styles.pressed,
+      ]}>
+      <View style={[styles.tile, { backgroundColor: onBrandBubble ? palette.white : withAlpha(color, 0.12) }]}>
+        {isVideo ? (
+          <PlayIcon size={16} color={color} />
+        ) : (
+          <Text style={[styles.tileLabel, { color }]} numberOfLines={1}>
+            {type}
+          </Text>
+        )}
+      </View>
+
+      <View style={styles.text}>
+        <Text style={[styles.name, { color: onBrandBubble ? palette.white : palette.ink }]} numberOfLines={2}>
+          {name}
+        </Text>
+        <Text style={[styles.meta, { color: onBrandBubble ? withAlpha(palette.white, 0.8) : palette.textMuted }]}>
+          {meta}
+        </Text>
+      </View>
+
+      {onPress ? <ChevronIcon size={14} color={accent} direction={forwardDirection()} /> : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm + 2,
+    minWidth: 220,
+    paddingVertical: spacing.sm + 1,
+    paddingHorizontal: spacing.sm + 2,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: radius.lg,
+  },
+  pressed: { opacity: 0.7 },
+  unavailable: { opacity: 0.6 },
+  tile: {
+    width: 40,
+    height: 40,
+    borderRadius: radius.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tileLabel: { fontSize: 11, fontWeight: '800', letterSpacing: 0.3 },
+  text: { flex: 1, minWidth: 0, gap: 2 },
+  // A Latin file name in an Arabic chat still lines up with the card's start.
+  name: { fontSize: fontSize.meta + 1, fontWeight: '600', textAlign: START_ALIGN },
+  meta: { fontSize: fontSize.caption, textAlign: START_ALIGN },
+});

package/src/ui/components/Launcher.tsx

@@ -10,7 +10,7 @@
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { createTranslator, DEFAULT_LABELS } from '../../i18n';
-import { useWidgetState } from '../../state/use-widget-state';
+import { shallowEqual, useWidgetSelector } from '../../state/use-widget-state';
 import { controller } from '../../controller';
 import { ChatIcon, ChevronIcon } from './icons';
 import {
@@ -37,7 +37,12 @@ export function Launcher({
   horizontalPadding,
   hidden = false,
 }: LauncherProps) {
-  const state = useWidgetState();
+  // Only what the launcher draws: it sits on the host's screens and shouldn't
+  // redraw on every message or typing event.
+  const state = useWidgetSelector(
+    ({ booted, config, isOpen, locale, unreadCount }) => ({ booted, config, isOpen, locale, unreadCount }),
+    shallowEqual
+  );
   const config = state.config;
 
   if (hidden || !state.booted || config?.showLauncher === false) return null;