stream-chat-react-native-core 9.10.2 → 9.11.0-beta.3

package/lib/typescript/ai-components/voice-visualization/styles.d.ts

@@ -0,0 +1,24 @@
+import { type LevelResponse } from './driver';
+/**
+ * What tells the glow and the wave apart besides how they draw, as on iOS.
+ *
+ * - `levelResponse`: the wave's height tracks the level directly, so it follows it smoothly;
+ *   per-syllable jumps would make it jitter. The glow follows it closely.
+ * - `maxScale`: the densest it renders. The glow is soft all over, so 2x is enough; the wave's
+ *   thin line is drawn at the screen's own scale, up to 3x, to stay crisp.
+ * - `contains`: whether a point, centred and normalized to the shorter side with y up, is on the
+ *   shape rather than the empty space around it.
+ */
+export type VoiceVisualizationStyle = {
+    contains: (x: number, y: number) => boolean;
+    /** The shape's bounds as a share of the shorter side, for the area that takes touches. */
+    hitArea: {
+        width: number;
+        height: number;
+    };
+    levelResponse: LevelResponse;
+    maxScale: number;
+};
+export declare const GLOW_STYLE: VoiceVisualizationStyle;
+export declare const WAVE_STYLE: VoiceVisualizationStyle;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/ai-components/voice-visualization/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/ai-components/voice-visualization/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9D;;;;;;;;;GASG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,0FAA0F;IAC1F,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAKF,eAAO,MAAM,UAAU,EAAE,uBAQxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,uBAQxB,CAAC"}

package/lib/typescript/ai-components/voice-visualization/types.d.ts

@@ -0,0 +1,45 @@
+import type { ViewProps } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+/**
+ * What a voice agent is doing, which a voice visualization shows as motion.
+ *
+ * The states differ only in how a visualization moves, never in its colors, and changing the
+ * state eases from one motion into the next.
+ *
+ * - `idle`: waiting to be spoken to, a calm, barely-there shimmer.
+ * - `connecting`: not ready yet, a loader sweep with a pulsing breath.
+ * - `listening`: hearing somebody, a gentle expand and contract.
+ * - `thinking`: working on an answer, a slow turn or a travelling wave.
+ * - `speaking`: talking, strong motion that ebbs and pauses like speech.
+ */
+export type VoiceAgentState = 'idle' | 'connecting' | 'listening' | 'thinking' | 'speaking';
+export type VoiceVisualizationProps = Omit<ViewProps, 'children'> & {
+    /** What the agent is doing, which sets how the visualization moves. */
+    state: VoiceAgentState;
+    /**
+     * The level of whoever is talking, from 0 to 1, read once a frame on the UI thread. Feed it at
+     * 15 Hz or more for the visualization to move with the words; `null` animates speech on its own.
+     * See `useDictationAudioLevel` for the level of the microphone while dictating.
+     */
+    audioLevel?: SharedValue<number | null>;
+    /**
+     * One to five colors. Past five are ignored, and colors that cannot be read are skipped. When
+     * omitted or empty, the theme's `voiceVisualization.colors` are used.
+     */
+    colors?: string[];
+    /** From 0 to 2: how far and how fast it moves. Colors never change with it. Defaults to 1. */
+    expressivity?: number;
+    /**
+     * What screen readers read as the value for each state, for example to translate them. Defaults
+     * to "Ready", "Connecting", "Listening", "Thinking" and "Speaking". The label, "Voice agent", is
+     * `accessibilityLabel`.
+     */
+    stateLabels?: Partial<Record<VoiceAgentState, string>>;
+};
+/** A color as hue (a fraction of a turn), saturation and value, each from 0 to 1. */
+export type Hsv = {
+    hue: number;
+    saturation: number;
+    value: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/ai-components/voice-visualization/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ai-components/voice-visualization/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AAE5F,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAClE,uEAAuE;IACvE,KAAK,EAAE,eAAe,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;CACxD,CAAC;AAEF,qFAAqF;AACrF,MAAM,MAAM,GAAG,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC"}

package/lib/typescript/ai-components/voice-visualization/useReduceMotion.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether the system asks for less motion: Reduce Motion on iOS, animations off on Android. It
+ * follows the setting while mounted.
+ *
+ * The AI entry point cannot reach the core SDK's own hook, which also only applies once its
+ * accessibility layer is enabled; the voice visualizations always honour the setting, as on iOS
+ * and Android.
+ */
+export declare const useReduceMotion: () => boolean;
+//# sourceMappingURL=useReduceMotion.d.ts.map

package/lib/typescript/ai-components/voice-visualization/useReduceMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReduceMotion.d.ts","sourceRoot":"","sources":["../../../../src/ai-components/voice-visualization/useReduceMotion.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,eAsB3B,CAAC"}

package/lib/typescript/ai-components/voice-visualization/useVoiceVisualization.d.ts

@@ -0,0 +1,18 @@
+import type { VoiceVisualizationStyle } from './styles';
+import type { VoiceVisualizationProps } from './types';
+/**
+ * A voice visualization's motion, advanced once a frame on the UI thread.
+ *
+ * The driver lives in a shared value the renderers derive from, so a frame redraws without
+ * re-rendering React, and `audioLevel` is read in the frame callback, so a level changing many
+ * times a second re-renders nothing either.
+ */
+export declare const useVoiceVisualization: ({ audioLevel, colors, expressivity, state }: VoiceVisualizationProps, style: VoiceVisualizationStyle) => {
+    dark: import("react-native-reanimated").SharedValue<number>;
+    driver: import("react-native-reanimated").SharedValue<import("./driver").VoiceDriverState>;
+    hover: (x: number | null, y: number | null) => void;
+    opacity: import("react-native-reanimated").SharedValue<number>;
+    tap: (x: number, y: number) => void;
+};
+export type VoiceVisualization = ReturnType<typeof useVoiceVisualization>;
+//# sourceMappingURL=useVoiceVisualization.d.ts.map

package/lib/typescript/ai-components/voice-visualization/useVoiceVisualization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVoiceVisualization.d.ts","sourceRoot":"","sources":["../../../../src/ai-components/voice-visualization/useVoiceVisualization.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAkBvD;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAChC,6CAA6C,uBAAuB,EACpE,OAAO,uBAAuB;;;eAwFxB,MAAM,GAAG,IAAI,KAAK,MAAM,GAAG,IAAI;;aAf/B,MAAM,KAAK,MAAM;CA6BxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/lib/typescript/ai-components/voice-visualization/waveGeometry.d.ts

@@ -0,0 +1,25 @@
+import { type SkPath } from '@shopify/react-native-skia';
+import { type VoiceDriverState } from './driver';
+export declare const WAVE_STOPS = 13;
+export declare const WAVE_START = -0.42;
+export declare const WAVE_END = 0.42;
+/** The stops' positions along the gradient, evenly spaced. */
+export declare const WAVE_POSITIONS: number[];
+/** The string's height above its centre line at each point, centred and normalized, y up. */
+export declare const waveHeights: (d: VoiceDriverState) => {
+    xs: number[];
+    ys: number[];
+};
+/**
+ * The wave as a path in a `width` by `height` canvas. Newer Skia versions build immutable paths with
+ * `PathBuilder`; earlier 2.x versions mutate `SkPath` itself.
+ */
+export declare const wavePath: (d: VoiceDriverState, width: number, height: number) => SkPath;
+/**
+ * The string's colors at its gradient stops, as RGBA from 0 to 1: up to five bands drifting along
+ * it, weighed by how near their centres are, its ends fading out.
+ */
+export declare const waveColors: (d: VoiceDriverState, dark: number) => Float32Array<ArrayBufferLike>[];
+/** The line is 0.6% of the shorter side, and never under 1.5 device pixels, as on Android and iOS. */
+export declare const waveStrokeWidth: (width: number, height: number, pixelRatio: number) => number;
+//# sourceMappingURL=waveGeometry.d.ts.map

package/lib/typescript/ai-components/voice-visualization/waveGeometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"waveGeometry.d.ts","sourceRoot":"","sources":["../../../../src/ai-components/voice-visualization/waveGeometry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI3E,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,UAAU,QAAQ,CAAC;AAChC,eAAO,MAAM,QAAQ,OAAO,CAAC;AAE7B,8DAA8D;AAC9D,eAAO,MAAM,cAAc,UAAqE,CAAC;AAuBjG,6FAA6F;AAC7F,eAAO,MAAM,WAAW,GAAI,GAAG,gBAAgB;;;CAkC9C,CAAC;AAOF;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,GAAG,gBAAgB,EAAE,OAAO,MAAM,EAAE,QAAQ,MAAM,KAAG,MAiB7E,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,GAAG,gBAAgB,EAAE,MAAM,MAAM,oCA6B3D,CAAC;AAEF,sGAAsG;AACtG,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,EAAE,QAAQ,MAAM,EAAE,YAAY,MAAM,WACpB,CAAC"}

package/lib/typescript/components/MessageInput/MessageComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageComposer.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/MessageComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAoBlD,OAAO,EACL,gBAAgB,EAIjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,mBAAmB,EAEpB,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EACL,8BAA8B,EAE/B,MAAM,iEAAiE,CAAC;AAEzE,OAAO,EACL,wBAAwB,EAEzB,MAAM,wDAAwD,CAAC;AAGhE,OAAO,EACL,uBAAuB,EAExB,MAAM,sDAAsD,CAAC;AAK9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AAIrF,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,wCAAwC,CAAC;AAqFzF,KAAK,+BAA+B,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GACvE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,GAC7D,IAAI,CACF,wBAAwB,EACtB,sBAAsB,GACtB,0BAA0B,GAC1B,8BAA8B,GAC9B,uBAAuB,GACvB,2BAA2B,GAC3B,mCAAmC,GACnC,oCAAoC,GACpC,uBAAuB,GACvB,sBAAsB,GACtB,aAAa,GACb,sBAAsB,GACtB,yBAAyB,GACzB,eAAe,GACf,wBAAwB,GACxB,yBAAyB,GACzB,wBAAwB,GACxB,aAAa,GACb,qBAAqB,CACxB,GACD,IAAI,CAAC,uBAAuB,EAAE,GAAG,CAAC,GAClC,IAAI,CAAC,8BAA8B,EAAE,mBAAmB,CAAC,GACzD,IAAI,CAAC,yBAAyB,EAAE,WAAW,CAAC,GAAG;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;IAChD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AA4aJ,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAE5E;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;YAAW,oBAAoB;;CAkF1D,CAAC"}
+{"version":3,"file":"MessageComposer.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/MessageComposer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAoBlD,OAAO,EACL,gBAAgB,EAIjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,mBAAmB,EAEpB,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EACL,8BAA8B,EAE/B,MAAM,iEAAiE,CAAC;AAEzE,OAAO,EACL,wBAAwB,EAEzB,MAAM,wDAAwD,CAAC;AAGhE,OAAO,EACL,uBAAuB,EAExB,MAAM,sDAAsD,CAAC;AAK9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AAIrF,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,wCAAwC,CAAC;AAqFzF,KAAK,+BAA+B,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GACvE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,GAC7D,IAAI,CACF,wBAAwB,EACtB,sBAAsB,GACtB,0BAA0B,GAC1B,8BAA8B,GAC9B,uBAAuB,GACvB,2BAA2B,GAC3B,mCAAmC,GACnC,oCAAoC,GACpC,uBAAuB,GACvB,sBAAsB,GACtB,aAAa,GACb,sBAAsB,GACtB,yBAAyB,GACzB,eAAe,GACf,wBAAwB,GACxB,yBAAyB,GACzB,wBAAwB,GACxB,aAAa,GACb,qBAAqB,CACxB,GACD,IAAI,CAAC,uBAAuB,EAAE,GAAG,CAAC,GAClC,IAAI,CAAC,8BAA8B,EAAE,mBAAmB,CAAC,GACzD,IAAI,CAAC,yBAAyB,EAAE,WAAW,CAAC,GAAG;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;IAChD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AA8aJ,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,+BAA+B,CAAC,CAAC;AAE5E;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;YAAW,oBAAoB;;CAkF1D,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.10.2",
+  "version": "9.11.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -84,7 +84,7 @@
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^2.0.0",
     "react-syntax-highlighter": "^16.1.0",
-    "stream-chat": "^9.54.1",
+    "stream-chat": "^9.54.2",
     "use-sync-external-store": "^1.5.0",
     "zod": "^4.1.12"
   },

package/src/ai-components/README.md

@@ -22,12 +22,12 @@ These components used to ship as the standalone `@stream-io/chat-react-native-ai
 
 2. Dictation is now opt-in on iOS (see [Dictation](#dictation-speech-to-text)): add `$StreamChatEnableDictation = true` to your `Podfile`, or, with Expo, replace the `@stream-io/chat-react-native-ai` config plugin with `stream-chat-expo`.
 3. Keep the `export-namespace-from` Babel plugin (see [Installation](#️-installation)); it is needed by the `zod` dependency.
-4. `ShimmeringView` and `toHexFromRNColor` were removed. `AITypingIndicatorView` now uses the SDK's native shimmer, so `@shopify/react-native-skia` is only needed for charts.
+4. `ShimmeringView` and `toHexFromRNColor` were removed. `AITypingIndicatorView` now uses the SDK's native shimmer, so `@shopify/react-native-skia` is only needed for charts and the voice visualizations.
 5. `SpeechToTextButton` and `isDictationAvailable` are now exported.
 
 ## 🛠️ Installation
 
-The AI components ship with `stream-chat-react-native` and `stream-chat-expo`; their JavaScript dependencies are installed with them. Charts additionally need the following peer dependencies, which only apps using the AI components have to install:
+The AI components ship with `stream-chat-react-native` and `stream-chat-expo`; their JavaScript dependencies are installed with them. Charts and the voice visualizations (`VoiceGlow`, `VoiceWave`) additionally need the following peer dependencies, which only apps using the AI components have to install:
 
 ```bash
 yarn add victory-native @shopify/react-native-skia
@@ -244,6 +244,54 @@ const options = {
 
 The `SpeechToTextButton` is already integrated within the `ComposerView`, however feel free to use it elsewhere as well. It renders nothing when dictation is not part of the build (see [Dictation](#dictation-speech-to-text)); `isDictationAvailable()` tells you whether it is.
 
+### `VoiceGlow` and `VoiceWave`
+
+Two visualizations of a voice agent, alike on iOS, Android, the web and React Native:
+
+- `VoiceGlow`: a soft, airy globe whose color masses orbit inside it and swell with speech. It is drawn by a Skia shader, every pixel on the GPU.
+- `VoiceWave`: a single string carrying a wave packet that erupts with speech, its colors flowing along it.
+
+Neither has a size of its own: each draws in the middle of the view it is given, the glow about half as wide as its shorter side and the wave about 80% as wide, so give the glow a square and the wave a square or a wide box. Both take the same props, and any other `View` prop goes to their root:
+
+| Name           | Type                                                                | Required | Description                                                                                                                                                                                              |
+| -------------- | ------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `state`        | `'idle' \| 'connecting' \| 'listening' \| 'thinking' \| 'speaking'` | yes      | What the agent is doing. The states differ only in how it moves, never in its colors, and changing the state eases from one motion into the next.                                                        |
+| `audioLevel`   | `SharedValue<number \| null>`                                       | no       | The level of whoever is talking, from 0 to 1, read once a frame on the UI thread. Feed it at 15 Hz or more for the motion to follow the words. While it is `null` or absent, speech animates on its own. |
+| `colors`       | `string[]`                                                          | no       | One to five colors. Past five are ignored, and colors that cannot be read are skipped. Defaults to the theme's `voiceVisualization.colors`.                                                              |
+| `expressivity` | `number`                                                            | no       | From 0 to 2: how far and how fast it moves. Colors never change with it. Defaults to `1`.                                                                                                                |
+| `stateLabels`  | `Partial<Record<VoiceAgentState, string>>`                          | no       | What screen readers read as the value for each state, for example to translate them. Defaults to "Ready", "Connecting", "Listening", "Thinking" and "Speaking".                                          |
+
+```tsx
+import { useDictationAudioLevel, VoiceGlow, VoiceWave } from 'stream-chat-react-native/ai-components';
+
+const VoiceAgent = ({ agentState, isListening }) => {
+  const micLevel = useDictationAudioLevel();
+
+  return (
+    <>
+      <VoiceGlow state={agentState} style={{ width: 320, height: 320 }} />
+      <VoiceWave
+        audioLevel={micLevel}
+        state={isListening ? 'listening' : 'idle'}
+        style={{ width: '100%', height: 120 }}
+      />
+    </>
+  );
+};
+```
+
+The motion runs entirely on the UI thread with Reanimated and Skia, so the visualizations stay smooth while the JS thread is busy streaming a reply, and a changing `audioLevel` re-renders nothing.
+
+**Audio level.** `useDictationAudioLevel()` gives the microphone's level while `useDictation` (or the `SpeechToTextButton`) is listening, and `null` otherwise. For any other source, such as a remote participant's audio level from Stream Video, keep a shared value of your own and write to it: `const level = useSharedValue<number | null>(null)`, then `level.value = participant.audioLevel`.
+
+**Interaction.** Tapping the shape bounces it and sends out a ripple, and a hovering mouse or pen ripples it too. Touches are only observed, never claimed, so a `Pressable` around the visualization still gets its press; touches beside the shape reach whatever is behind it.
+
+**Theming.** The theme's `voiceVisualization.colors` are the default palette (the accent color unless you set them). The visualizations draw for a light or a dark background following `voiceVisualization.backdropColor` when you set it, and the system color scheme otherwise.
+
+**Accessibility.** Each is an image named "Voice agent" with its state as the value ("Ready", "Connecting", "Listening", "Thinking", "Speaking"), as on iOS and Android. Pass `stateLabels` to translate the state values, `accessibilityLabel` to change the label, or `accessibilityValue` to replace the value outright. Under the system's Reduce Motion (animations off on Android), they barely move and ignore taps.
+
+**Differences from the native SDKs.** The glow has no `rendering` option: the shader runs on every Android version through Skia, so there is no Canvas fallback, and it does not switch to a cheaper look in battery saver as on Android. A visualization keeps animating while it is mounted, even when scrolled off screen; it pauses only while the app is in the background.
+
 ### Theming
 
 Each one of the components in the SDK is fully theme-compatible. The `StreamTheme` provider takes care of this for you.

package/src/ai-components/__tests__/VoiceVisualization.test.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import { AccessibilityInfo, Pressable } from 'react-native';
+
+import { act, fireEvent, render, renderHook, screen } from '@testing-library/react-native';
+
+import { type DeepPartial, StreamTheme, type Theme, VoiceGlow, VoiceWave } from '../index';
+import { rgbToHsv } from '../voice-visualization/palette';
+import { GLOW_STYLE, WAVE_STYLE } from '../voice-visualization/styles';
+import type { VoiceVisualizationProps } from '../voice-visualization/types';
+import { useVoiceVisualization } from '../voice-visualization/useVoiceVisualization';
+import { waveColors, wavePath } from '../voice-visualization/waveGeometry';
+
+const themed =
+  (style?: DeepPartial<Theme>) =>
+  ({ children }: { children: React.ReactNode }) => (
+    <StreamTheme style={style}>{children}</StreamTheme>
+  );
+
+const layout = (width: number, height: number) => ({
+  nativeEvent: { layout: { height, width, x: 0, y: 0 } },
+});
+
+const renderVisualization = (
+  props: Partial<VoiceVisualizationProps> = {},
+  style?: DeepPartial<Theme>,
+  visualStyle = GLOW_STYLE,
+) =>
+  renderHook(
+    (hookProps: VoiceVisualizationProps) => useVoiceVisualization(hookProps, visualStyle),
+    { initialProps: { state: 'idle', ...props }, wrapper: themed(style) },
+  );
+
+const hueOf = (color: [number, number, number]) => rgbToHsv(color).hue;
+
+describe('VoiceGlow and VoiceWave', () => {
+  afterEach(() => jest.restoreAllMocks());
+
+  it.each([
+    ['VoiceGlow', VoiceGlow],
+    ['VoiceWave', VoiceWave],
+  ])('%s names itself and its state, as on iOS and Android', (_, Component) => {
+    const { rerender } = render(<Component state='idle' />, { wrapper: themed() });
+
+    const root = screen.getByLabelText('Voice agent');
+    expect(root.props.accessibilityRole).toBe('image');
+    expect(root.props.accessibilityValue).toEqual({ text: 'Ready' });
+
+    rerender(<Component state='speaking' />);
+    expect(screen.getByLabelText('Voice agent').props.accessibilityValue).toEqual({
+      text: 'Speaking',
+    });
+  });
+
+  it('takes a label and value of its own', () => {
+    render(
+      <VoiceGlow
+        accessibilityLabel='Assistant'
+        accessibilityValue={{ text: 'Talking' }}
+        state='speaking'
+      />,
+      { wrapper: themed() },
+    );
+
+    expect(screen.getByLabelText('Assistant').props.accessibilityValue).toEqual({
+      text: 'Talking',
+    });
+  });
+
+  it.each([
+    ['VoiceGlow', VoiceGlow],
+    ['VoiceWave', VoiceWave],
+  ])('%s draws once it has a size', (_, Component) => {
+    render(<Component state='thinking' />, { wrapper: themed() });
+    expect(screen.queryByTestId('skia-canvas')).toBeNull();
+
+    fireEvent(screen.getByLabelText('Voice agent'), 'layout', layout(300, 200));
+
+    expect(screen.getByTestId('skia-canvas')).toBeTruthy();
+    expect(screen.getByTestId('voice-visualization-hit-area')).toBeTruthy();
+  });
+
+  it('lets a press on the shape reach a parent', () => {
+    const onPress = jest.fn();
+    render(
+      <Pressable onPress={onPress}>
+        <VoiceGlow state='idle' />
+      </Pressable>,
+      { wrapper: themed() },
+    );
+    fireEvent(screen.getByLabelText('Voice agent'), 'layout', layout(300, 300));
+
+    const hitArea = screen.getByTestId('voice-visualization-hit-area');
+    fireEvent(hitArea, 'touchEnd', { nativeEvent: { locationX: 96, locationY: 96 } });
+    fireEvent.press(hitArea);
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('compiles the glow shader once for every glow', () => {
+    // A fresh copy of the module, so a shader compiled by an earlier test doesn't hide a miss.
+    jest.isolateModules(() => {
+      const { Skia: freshSkia } = require('@shopify/react-native-skia');
+      const { getGlowEffect } = require('../voice-visualization/glowShader');
+      const make = jest.spyOn(freshSkia.RuntimeEffect, 'Make');
+
+      const first = getGlowEffect();
+      const second = getGlowEffect();
+
+      expect(make).toHaveBeenCalledTimes(1);
+      expect(second).toBe(first);
+    });
+  });
+
+  it('keeps the touch area as a real view, so taps on the shape land', () => {
+    render(<VoiceWave state='idle' />, { wrapper: themed() });
+    fireEvent(screen.getByLabelText('Voice agent'), 'layout', layout(300, 200));
+
+    expect(screen.getByTestId('voice-visualization-hit-area').props.collapsable).toBe(false);
+  });
+
+  it('reads translated state values', () => {
+    render(<VoiceGlow state='thinking' stateLabels={{ thinking: 'Denkt nach' }} />, {
+      wrapper: themed(),
+    });
+
+    expect(screen.getByLabelText('Voice agent').props.accessibilityValue).toEqual({
+      text: 'Denkt nach',
+    });
+  });
+});
+
+describe('voice visualization motion', () => {
+  afterEach(() => jest.restoreAllMocks());
+
+  it('uses its own colors first', () => {
+    const { result } = renderVisualization({ colors: ['#ff0000', 'nope', '#00ff00'] });
+
+    expect(result.current.driver.value.colors[0].hue).toBe(hueOf([1, 0, 0]));
+    expect(result.current.driver.value.colors[1].hue).toBe(hueOf([0, 1, 0]));
+    expect(result.current.driver.value.count).toBe(2);
+  });
+
+  it('falls back to the theme, then to the default accent', () => {
+    const fromTheme = renderVisualization(
+      { colors: [] },
+      {
+        voiceVisualization: { colors: ['#00ff00'] },
+      },
+    );
+    expect(fromTheme.result.current.driver.value.colors[0].hue).toBe(hueOf([0, 1, 0]));
+
+    const fallback = renderVisualization(
+      { colors: ['nope'] },
+      {
+        voiceVisualization: { colors: ['also-nope'] },
+      },
+    );
+    expect(fallback.result.current.driver.value.colors[0].hue).toBe(hueOf([0, 95 / 255, 1]));
+  });
+
+  it('draws for a dark backdrop', () => {
+    const light = renderVisualization({}, { voiceVisualization: { backdropColor: '#ffffff' } });
+    const dark = renderVisualization({}, { voiceVisualization: { backdropColor: '#101010' } });
+
+    expect(light.result.current.dark.value).toBe(0);
+    expect(dark.result.current.dark.value).toBe(1);
+  });
+
+  it('takes the wave’s smooth level response and the glow’s steady one', () => {
+    const glow = renderVisualization({}, undefined, GLOW_STYLE);
+    const wave = renderVisualization({}, undefined, WAVE_STYLE);
+
+    expect(glow.result.current.driver.value.levelResponse).toBe(GLOW_STYLE.levelResponse);
+    expect(wave.result.current.driver.value.levelResponse).toBe(WAVE_STYLE.levelResponse);
+  });
+
+  it('bounces on a tap, unless motion is reduced', async () => {
+    const motion = renderVisualization();
+    act(() => motion.result.current.tap(0.1, 0.1));
+    expect(motion.result.current.driver.value.tapAge).toBe(0);
+    expect(motion.result.current.driver.value.tapX).toBe(0.1);
+
+    jest.spyOn(AccessibilityInfo, 'isReduceMotionEnabled').mockResolvedValueOnce(true);
+    const reduced = renderVisualization();
+    await act(async () => {
+      await Promise.resolve();
+    });
+    act(() => reduced.result.current.tap(0.1, 0.1));
+    expect(reduced.result.current.driver.value.tapAge).toBeGreaterThan(0);
+  });
+
+  it('draws the wave as one stroke with its ends faded out', () => {
+    const { result } = renderVisualization({ state: 'speaking' }, undefined, WAVE_STYLE);
+    const d = result.current.driver.value;
+
+    const path = wavePath(d, 300, 200) as unknown as { commands: Array<[string, number, number]> };
+    expect(path.commands).toHaveLength(161);
+    expect(path.commands[0][0]).toBe('M');
+    expect(path.commands[0][1]).toBeCloseTo(150 - 0.42 * 200, 4);
+    expect(path.commands[160][1]).toBeCloseTo(150 + 0.42 * 200, 4);
+
+    const stops = waveColors(d, 0);
+    expect(stops).toHaveLength(13);
+    expect(stops[0][3]).toBe(0);
+    expect(stops[12][3]).toBe(0);
+    expect(stops[6][3]).toBeCloseTo(1, 4);
+  });
+});

package/src/ai-components/__tests__/dictation.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DeviceEventEmitter } from 'react-native';
 
-import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import { act, fireEvent, render, renderHook, screen } from '@testing-library/react-native';
 
 import * as aiComponents from '../index';
 import { AIDictation } from '../native/AIDictation';
@@ -162,5 +162,62 @@ describe('ai-components dictation', () => {
         state: 'idle',
       });
     });
+
+    it('streams the microphone level while listening and clears it afterwards', () => {
+      mockNativeModule = createNativeModule();
+      const levels: number[] = [];
+      const unsubscribe = AIDictation.addLevelListener(({ level }) => levels.push(level));
+      const { result, unmount } = renderHook(() => aiComponents.useDictationAudioLevel());
+      expect(result.current.value).toBeNull();
+
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnState', { state: 'listening' });
+        DeviceEventEmitter.emit('AIDictationOnLevel', { level: 0.4 });
+      });
+      expect(levels).toEqual([0.4]);
+      expect(result.current.value).toBe(0.4);
+
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnState', { state: 'idle' });
+      });
+      expect(result.current.value).toBeNull();
+
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnLevel', { level: 0.7 });
+        DeviceEventEmitter.emit('AIDictationOnError', { code: 'X', message: 'boom' });
+      });
+      expect(result.current.value).toBeNull();
+
+      unsubscribe();
+      unmount();
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnLevel', { level: 0.9 });
+      });
+      expect(levels).toEqual([0.4, 0.7]);
+    });
+
+    it('leaves the composer text alone for dictation started elsewhere', async () => {
+      mockNativeModule = createNativeModule();
+      const composer = renderComposer();
+      fireEvent.changeText(composer.getByPlaceholderText('Ask anything'), 'my draft');
+
+      const { result } = renderHook(() =>
+        aiComponents.useDictation(undefined, { source: 'voice-mode' }),
+      );
+      await act(async () => {
+        await result.current.start();
+      });
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnState', { state: 'listening' });
+        DeviceEventEmitter.emit('AIDictationOnResult', { isFinal: true, text: 'spoken question' });
+        DeviceEventEmitter.emit('AIDictationOnState', { state: 'idle' });
+      });
+
+      expect(aiComponents.dictationStore.getLatestValue()).toMatchObject({
+        source: 'voice-mode',
+        transcript: 'spoken question',
+      });
+      expect(composer.getByPlaceholderText('Ask anything').props.value).toBe('my draft');
+    });
   });
 });