stream-chat-react-native-core 10.0.0-rc.1 → 10.0.0-rc.3

package/src/a11y/hooks/useAccessibilityServiceEnabled.ts

@@ -4,22 +4,13 @@ import { AccessibilityInfo, AppState, Platform } from 'react-native';
 import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
 
 /**
- * Subscribes to Android accessibility service availability and returns the live state.
+ * Tracks whether any Android accessibility service is running (TalkBack, Switch Access, Voice
+ * Access and so on, not only screen readers).
  *
- * `AccessibilityInfo.isAccessibilityServiceEnabled` reports whether ANY a11y service is
- * running - TalkBack, Switch Access, Voice Access, Select to Speak, etc.  not just
- * screen readers. The signal is Android only; iOS doesn't expose it (and doesn't need to,
- * since the SDK's iOS overlay trap uses `accessibilityViewIsModal`).
+ * React Native emits no change event for this signal, so the state is refreshed on
+ * `screenReaderChanged` and when the app returns to the foreground.
  *
- * React Native does not emit a dedicated change event for this signal, so the hook
- * re-polls when the app returns to the foreground - which is the realistic path for a
- * user toggling Accessibility settings and coming back to the app. The most common
- * single service change (TalkBack on/off) is also covered by the `screenReaderChanged`
- * listener.
- *
- * Returns false on non-Android platforms without subscribing.
- * Returns false when the `AccessibilityContext` is disabled so consumers don't pay the
- * listener cost when the SDK's a11y is opted out.
+ * @returns Whether a service is running. Always false on iOS and when accessibility is disabled.
  */
 export const useAccessibilityServiceEnabled = (): boolean => {
   const { enabled } = useAccessibilityContext();
@@ -39,7 +30,7 @@ export const useAccessibilityServiceEnabled = (): boolean => {
           if (!cancelled) setIsEnabled(value);
         })
         .catch(() => {
-          // Older RN versions / certain environments may not implement this; fall back to false.
+          // The API may be unavailable in older RN versions; stay false.
         });
     };
 

package/src/a11y/hooks/useAnnounceOnShow.ts

@@ -9,17 +9,14 @@ type Options = {
 };
 
 /**
- * Announces `message` once each time `visible` flips from false to true.
- * Resets when `visible` flips back to false, so the next show re-announces —
- * unlike `useAnnounceOnStateChange`, which announces on string change and
- * dedupes consecutive identical strings.
+ * Announces `message` each time `visible` flips from false to true, for transient surfaces such as
+ * modals and bottom sheets. Hiding the surface re-arms the announcement. Does nothing while
+ * `message` is `undefined`.
  *
- * Use this for transient surfaces that appear and disappear repeatedly within
- * a session (modals, autocomplete pickers, bottom sheets) where the user
- * benefits from hearing the affordance on every reappearance.
- *
- * When `message` is undefined (typically because `useA11yLabel` returned
- * undefined — a11y disabled or key missing), the hook is a no-op.
+ * @param visible Whether the surface is shown.
+ * @param message Text to announce.
+ * @param params.delayMs Delay before announcing. Defaults to 500.
+ * @param params.priority Announcement priority. Defaults to `polite`.
  */
 export const useAnnounceOnShow = (
   visible: boolean,

package/src/a11y/hooks/useAnnounceOnStateChange.ts

@@ -11,11 +11,12 @@ type UseAnnounceOnStateChangeOptions = {
 };
 
 /**
- * Announces `message` whenever it changes (and is non-empty), with a debounce
- * to avoid spamming the screen reader on rapid transitions.
+ * Announces `message` whenever it changes to a new non-empty value, debounced so rapid transitions
+ * do not flood the screen reader. Repeating the last announced message is skipped.
  *
- * Used by `AITypingIndicatorView` ("Thinking…" → "Generating…" → idle) and
- * the `Indicators` family (loading → loaded → error).
+ * @param message Text to announce.
+ * @param options.debounceMs Debounce before announcing. Defaults to 250.
+ * @param options.priority Announcement priority. Defaults to `polite`.
  */
 export const useAnnounceOnStateChange = (
   message: string | null | undefined,

package/src/a11y/hooks/useReducedMotionPreference.ts

@@ -4,8 +4,9 @@ import { AccessibilityInfo } from 'react-native';
 import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
 
 /**
- * Subscribes to AccessibilityInfo reduce-motion changes and returns the live state.
- * Returns false when the AccessibilityContext is disabled.
+ * Tracks the OS reduce-motion setting.
+ *
+ * @returns Whether reduce motion is on. Always false when accessibility is disabled.
  */
 export const useReducedMotionPreference = (): boolean => {
   const { enabled } = useAccessibilityContext();
@@ -23,7 +24,7 @@ export const useReducedMotionPreference = (): boolean => {
         if (!cancelled) setReduceMotion(value);
       })
       .catch(() => {
-        // Older RN or platforms without the API.
+        // The API may be unavailable on some platforms; stay false.
       });
 
     const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotion);

package/src/a11y/hooks/useResolvedModalAccessibilityProps.ts

@@ -9,15 +9,11 @@ export type ResolvedModalAccessibilityProps = {
 };
 
 /**
- * Returns the platform-appropriate set of a11y props for a modal/sheet root.
- * Equivalent of stream-chat-react's `useResolvedModalAriaProps` — but aware of
- * RN's iOS-vs-Android split:
- *   - iOS uses `accessibilityViewIsModal` to trap focus.
- *   - Android uses `importantForAccessibility="yes"` on the modal root and
- *     `"no-hide-descendants"` on background siblings (caller's responsibility).
+ * Returns the accessibility props for a modal or sheet root: `accessibilityViewIsModal` on iOS
+ * to trap focus, `importantForAccessibility="yes"` on Android. On Android the caller must also set
+ * `"no-hide-descendants"` on background siblings.
  *
- * Returns an empty object when AccessibilityContext is disabled, so the modal
- * stays a no-op for integrators that haven't opted in.
+ * @returns The props to spread on the root, or an empty object when accessibility is disabled.
  */
 export const useResolvedModalAccessibilityProps = (): ResolvedModalAccessibilityProps => {
   const { enabled } = useAccessibilityContext();

package/src/a11y/hooks/useScreenReaderEnabled.ts

@@ -2,12 +2,10 @@ import { useAccessibilityContext } from '../../contexts/accessibilityContext/Acc
 import { useScreenReaderContext } from '../../contexts/screenReaderContext/ScreenReaderContext';
 
 /**
- * Returns the live screen-reader state from the app-wide {@link ScreenReaderContext}.
- * Returns false when the AccessibilityContext is disabled, regardless of the OS state,
- * so consumers don't pay the listener cost when the SDK's a11y is opted out.
+ * Reads the screen-reader state from the app-wide {@link ScreenReaderContext}.
  *
- * `forceScreenReaderMode: true` in the config short-circuits to true (used in tests
- * and for integrator preview).
+ * @returns Whether a screen reader is on. False when accessibility is disabled, whatever the OS
+ * reports; true when `forceScreenReaderMode` is set in the accessibility config.
  */
 export const useScreenReaderEnabled = (): boolean => {
   const { enabled, forceScreenReaderMode } = useAccessibilityContext();

package/src/a11y/hooks/useScreenReaderMountFocus.ts

@@ -7,9 +7,10 @@ import {
 } from './useSetAccessibilityFocus';
 
 /**
- * Moves the screen reader cursor onto `target` as it mounts (and refires once the
- * screen reader state resolves, since that is detected asynchronously). Like
- * {@link useSetAccessibilityFocus}, it only moves accessibility focus.
+ * Moves the screen reader cursor onto `target` on mount, and again once the asynchronously detected
+ * screen reader state resolves. Like {@link useSetAccessibilityFocus}, it only moves focus.
+ *
+ * @param target The ref or native node handle to focus.
  */
 export const useScreenReaderMountFocus = (target: AccessibilityFocusTarget) => {
   const setAccessibilityFocus = useSetAccessibilityFocus();

package/src/a11y/hooks/useSetAccessibilityFocus.ts

@@ -5,10 +5,7 @@ import { useScreenReaderEnabled } from './useScreenReaderEnabled';
 
 type FindNodeHandleArg = Parameters<typeof findNodeHandle>[0];
 
-/**
- * Something the screen reader cursor can be moved onto: a ref (whose `.current` is
- * read at call time), a raw native node handle, or nothing.
- */
+/** A ref (its `.current` is read at call time), a native node handle, or nothing. */
 export type AccessibilityFocusTarget = RefObject<unknown> | number | null | undefined;
 
 const resolveNode = (target: AccessibilityFocusTarget): number | null => {
@@ -23,29 +20,19 @@ const resolveNode = (target: AccessibilityFocusTarget): number | null => {
 };
 
 /**
- * Returns a stable callback that moves the screen reader cursor onto a given
- * target (a ref or a raw node handle). It ONLY moves accessibility focus and it
- * does not activate the target: i.e no keyboard opens and no field becomes first
- * responder. The user still double taps to act on whatever is focused.
- *
- * The target's `.current` is read at call time, so this is safe to wire into a
- * deferred/event callback.
+ * Returns a stable callback that moves the screen reader cursor onto a target on the next frame.
+ * It only moves accessibility focus: it opens no keyboard and does not activate the target.
+ * Does nothing unless a screen reader is running (see {@link useScreenReaderEnabled}).
  *
- * Noop unless a screen reader is running. {@link useScreenReaderEnabled} returns
- * false whenever the SDK's accessibility config is disabled, so this costs nothing
- * for the default (a11y opted out) configuration.
+ * Focus set on mount only sticks on Android forward navigation. On iOS forward navigation and on
+ * back navigation, set it after the screen transition completes (React Navigation's
+ * `transitionEnd`); {@link useScreenReaderMountFocus} covers the mount case.
  *
- * Note: Navigation timing is platform nuanced: Android forward navigation lands a focus
- * set on mount, whereas iOS forward navigation and back navigation on both
- * platforms need it set after the screen transition completes (React Navigation's
- * `transitionEnd`). {@link useScreenReaderMountFocus} covers the mount case; wire
- * `transitionEnd` yourself for the rest (the SampleApp's
- * `useScreenReaderComposerFocusEffect` is a reference implementation).
+ * @returns A callback taking the {@link AccessibilityFocusTarget} to focus.
  */
 export const useSetAccessibilityFocus = () => {
   const screenReaderEnabled = useScreenReaderEnabled();
-  // Track the latest value so the returned callback can stay referentially stable
-  // (it's typically wired into a focus effect and read much later).
+  // A ref keeps the returned callback referentially stable while reading the latest value.
   const screenReaderEnabledRef = useRef(screenReaderEnabled);
   screenReaderEnabledRef.current = screenReaderEnabled;
 
@@ -71,7 +58,7 @@ export const useSetAccessibilityFocus = () => {
     if (rafRef.current != null) {
       cancelAnimationFrame(rafRef.current);
     }
-    // Defer a frame so the target has laid out before we move the cursor onto it.
+    // Defer a frame so the target has laid out before the cursor moves onto it.
     rafRef.current = requestAnimationFrame(() => {
       rafRef.current = null;
       AccessibilityInfo.setAccessibilityFocus(node);

package/src/ai-components/AITypingIndicatorView.tsx

@@ -13,8 +13,7 @@ export const AITypingIndicatorView = ({ text }: { text: string }) => {
   } = useTheme();
   const styles = useStyles();
 
-  // The native shimmer paints behind its children, so it is laid over the text instead: the
-  // highlight has to sweep across the glyphs, which a transparent background would otherwise hide.
+  // The native shimmer paints behind its children, so it overlays the text.
   return (
     <View style={styles.wrapper}>
       <Text style={styles.text}>{text}</Text>
@@ -35,7 +34,7 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        // The native highlight band is soft and wide, so it is kept fairly strong over the text.
+        // The native highlight band is soft and wide, so the opacity stays high.
         shimmer: { opacity: 0.8 },
         text: {
           fontSize: 16,

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__/Markdown.test.tsx

@@ -40,6 +40,26 @@ describe('ai-components Markdown', () => {
     expect(onLink).toHaveBeenCalledWith('https://getstream.io');
   });
 
+  it('logs a rejected onLink without leaving an unhandled rejection', async () => {
+    const unhandled = jest.fn();
+    process.on('unhandledRejection', unhandled);
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    const onLink = jest.fn().mockRejectedValue(new Error('cannot open'));
+
+    try {
+      renderMarkdown('[docs](https://getstream.io)', { onLink });
+      fireEvent.press(screen.getByText('docs'));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(onLink).toHaveBeenCalledWith('https://getstream.io');
+      expect(logSpy).toHaveBeenCalledWith(expect.stringContaining('cannot open'));
+      expect(unhandled).not.toHaveBeenCalled();
+    } finally {
+      process.off('unhandledRejection', unhandled);
+      logSpy.mockRestore();
+    }
+  });
+
   it('renders tables, block quotes, inline code and horizontal rules', () => {
     renderMarkdown('| a | b |\n|---|---|\n| 1 | 2 |\n\n> quoted\n\nuse `npm i`\n\n---\n\nafter');
 

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__/charts.test.ts

@@ -97,7 +97,10 @@ describe('ai-components chart parsers', () => {
           }),
         ),
       ).toThrow();
-      expect(() => parseJsonChart('{ not json')).toThrow();
+    });
+
+    it('rejects invalid JSON with the same error as an unsupported chart', () => {
+      expect(() => parseJsonChart('{ not json')).toThrow('Unknown type of JSON formatted chart.');
     });
   });
 

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');
+    });
   });
 });