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

package/src/ai-components/__tests__/voiceDriver.test.ts

@@ -0,0 +1,317 @@
+import {
+  bounceScale,
+  createBounce,
+  easeOut,
+  scaleAt,
+  startBounce,
+} from '../voice-visualization/bounce';
+import {
+  advanceDriver,
+  createDriverState,
+  driverReact,
+  driverScale,
+  ease,
+  hoverDriver,
+  LEVEL_RESPONSE,
+  type LevelResponse,
+  NO_TAP,
+  tapDriver,
+  type VoiceDriverInput,
+  type VoiceDriverState,
+} from '../voice-visualization/driver';
+import type { Hsv, VoiceAgentState } from '../voice-visualization/types';
+
+// Ported from stream-chat-android's VoiceVisualizationDriverTest and VoiceVisualizationBounceTest,
+// so the platforms keep moving alike.
+
+const blue: Hsv = { hue: 218 / 360, saturation: 1, value: 1 };
+const red: Hsv = { hue: 0, saturation: 1, value: 1 };
+const FRAME = 1 / 60;
+
+const input = (
+  state: VoiceAgentState,
+  overrides: Partial<Omit<VoiceDriverInput, 'state'>> = {},
+): VoiceDriverInput => ({
+  audioLevel: null,
+  colors: [blue],
+  expressivity: 1,
+  reduceMotion: false,
+  state,
+  ...overrides,
+});
+
+/** A driver with the input it reads each frame, as the view keeps them. */
+const createDriver = (initial: VoiceDriverInput, response?: LevelResponse) => {
+  const driver = { input: initial, state: createDriverState(initial, response) };
+  return {
+    ...driver,
+    advance: (seconds: number) => advanceDriver(driver.state, driver.input, seconds),
+    run: (seconds: number) => {
+      for (let i = 0; i < Math.floor(seconds / FRAME); i++) {
+        advanceDriver(driver.state, driver.input, FRAME);
+      }
+    },
+    setInput: (next: VoiceDriverInput) => {
+      driver.input = next;
+    },
+    get d(): VoiceDriverState {
+      return driver.state;
+    },
+    get input() {
+      return driver.input;
+    },
+  };
+};
+
+const expectNear = (actual: number, expected: number, tolerance: number) =>
+  expect(Math.abs(actual - expected)).toBeLessThanOrEqual(tolerance);
+
+describe('voice visualization driver', () => {
+  it('starts settled on the state', () => {
+    const { d } = createDriver(input('speaking'));
+
+    expect(driverReact(d)).toBe(1);
+    expect(d.load).toBe(0);
+    expect(d.flow).toBe(0);
+    expect(d.bright).toBe(1);
+    expect(d.time).toBe(0);
+    expect(d.count).toBe(1);
+    expect(driverScale(d)).toBe(1);
+    expect(d.tapAge).toBe(NO_TAP);
+    expect(d.colors[0]).toEqual(blue);
+    expect(d.colors[4]).toEqual(blue);
+  });
+
+  it('does not share its colors with the caller’s palette', () => {
+    const palette = [{ ...blue }];
+    const driver = createDriver(input('idle', { colors: palette }));
+    driver.setInput(input('idle', { colors: [red] }));
+
+    driver.run(1);
+
+    expect(palette[0]).toEqual(blue);
+  });
+
+  it('eases toward the motion of a new state', () => {
+    const driver = createDriver(input('idle'));
+    driver.setInput(input('connecting'));
+
+    driver.advance(FRAME);
+    expectNear(driver.d.load, 0.08, 1e-4);
+    driver.run(2);
+    expectNear(driver.d.load, 1, 1e-3);
+    expectNear(driverReact(driver.d), 0, 1e-3);
+  });
+
+  it('eases the same at any frame rate', () => {
+    const at60 = createDriver(input('idle'));
+    const at120 = createDriver(input('idle'));
+    at60.setInput(input('speaking'));
+    at120.setInput(input('speaking'));
+
+    for (let i = 0; i < 30; i++) at60.advance(1 / 60);
+    for (let i = 0; i < 60; i++) at120.advance(1 / 120);
+
+    expectNear(driverReact(at60.d), driverReact(at120.d), 1e-4);
+    expectNear(at60.d.time, at120.d.time, 1e-2);
+  });
+
+  it('clamps a long frame', () => {
+    const driver = createDriver(input('idle'));
+
+    driver.advance(5);
+
+    expectNear(driver.d.time, 0.05 * 0.4, 1e-5);
+  });
+
+  it('turns the flow only while thinking', () => {
+    const driver = createDriver(input('speaking'));
+    driver.run(1);
+    expect(driver.d.flowSpin).toBe(0);
+
+    driver.setInput(input('thinking'));
+    driver.run(1);
+    expect(driver.d.flowSpin).toBeGreaterThan(0);
+  });
+
+  it('keeps the colors turning in every state', () => {
+    const driver = createDriver(input('idle'));
+
+    driver.run(1);
+
+    expect(driver.d.orbSpin).toBeGreaterThan(0);
+  });
+
+  it('scales amplitude and speed with expressivity', () => {
+    const lively = createDriver(input('speaking', { expressivity: 2 }));
+    const still = createDriver(input('speaking', { expressivity: 0 }));
+
+    expectNear(driverReact(lively.d), 1.85, 1e-5);
+    expectNear(driverReact(still.d), 0.15, 1e-5);
+    lively.advance(0.05);
+    expectNear(lively.d.time, 0.05 * 1.25 * 1.4, 1e-5);
+  });
+
+  it('slows time and ignores the pointer under reduced motion', () => {
+    const driver = createDriver(input('idle', { reduceMotion: true }));
+
+    tapDriver(driver.d, driver.input, 0.1, 0.1);
+    hoverDriver(driver.d, driver.input, 0.1, 0.1);
+    driver.advance(0.05);
+
+    expectNear(driver.d.time, 0.05 * 0.07 * 0.4, 1e-6);
+    expect(driver.d.tapAge).toBeGreaterThan(NO_TAP);
+    expect(driverScale(driver.d)).toBe(1);
+    expect(driver.d.hoverAmount).toBe(0);
+  });
+
+  it('stops hovering once motion is reduced', () => {
+    const driver = createDriver(input('idle'));
+    hoverDriver(driver.d, driver.input, 0.1, 0.1);
+    driver.run(1);
+
+    driver.setInput(input('idle', { reduceMotion: true }));
+    driver.run(1);
+
+    expectNear(driver.d.hoverAmount, 0, 1e-3);
+  });
+
+  it('ripples from a tap and bounces', () => {
+    const driver = createDriver(input('idle'));
+
+    tapDriver(driver.d, driver.input, 0.1, -0.2);
+    expect(driver.d.tapX).toBe(0.1);
+    expect(driver.d.tapY).toBe(-0.2);
+    expect(driver.d.tapAge).toBe(0);
+
+    driver.advance(0.05);
+    expectNear(driver.d.tapAge, 0.05, 1e-6);
+    expect(driverScale(driver.d)).toBeLessThan(1);
+    driver.run(0.5);
+    expect(driverScale(driver.d)).toBe(1);
+  });
+
+  it('eases hovering in and out', () => {
+    const driver = createDriver(input('idle'));
+
+    hoverDriver(driver.d, driver.input, 0.2, 0.1);
+    driver.run(1);
+    expectNear(driver.d.hoverAmount, 1, 1e-3);
+    expect(driver.d.hoverX).toBe(0.2);
+
+    hoverDriver(driver.d, driver.input, null, null);
+    driver.run(1);
+    expectNear(driver.d.hoverAmount, 0, 1e-3);
+    expect(driver.d.hoverX).toBe(0.2);
+  });
+
+  it('lifts the motion to a live audio level', () => {
+    const driver = createDriver(input('idle', { audioLevel: 0.8 }));
+
+    driver.run(2);
+    expectNear(driver.d.mic, 0.8, 1e-3);
+    expectNear(driver.d.voice, 1, 1e-3);
+    expectNear(driverReact(driver.d), 0.8, 1e-3);
+
+    driver.setInput(input('idle'));
+    driver.run(2);
+    expectNear(driver.d.voice, 0, 1e-3);
+    expectNear(driverReact(driver.d), 0.12, 1e-3);
+  });
+
+  const settled = (response: LevelResponse, audioLevel: number) => {
+    const driver = createDriver(input('idle', { audioLevel }), response);
+    driver.run(1);
+    return driver;
+  };
+
+  it('catches up with a louder level within a word when smooth', () => {
+    const driver = settled(LEVEL_RESPONSE.smooth, 0);
+
+    driver.setInput(input('idle', { audioLevel: 1 }));
+    driver.run(0.1);
+    expect(driver.d.mic).toBeGreaterThanOrEqual(0.5);
+    expect(driver.d.mic).toBeLessThanOrEqual(0.8);
+    driver.run(0.3);
+    expect(driver.d.mic).toBeGreaterThan(0.95);
+  });
+
+  it('lets a quieter level fall away over a pause, not a syllable, when smooth', () => {
+    const driver = settled(LEVEL_RESPONSE.smooth, 1);
+
+    driver.setInput(input('idle', { audioLevel: 0 }));
+    driver.run(0.1);
+    expect(driver.d.mic).toBeGreaterThan(0.7);
+    driver.run(0.9);
+    expect(driver.d.mic).toBeLessThan(0.1);
+  });
+
+  it('follows a quieter level within a syllable when steady', () => {
+    const driver = settled(LEVEL_RESPONSE.steady, 1);
+
+    driver.setInput(input('idle', { audioLevel: 0 }));
+    driver.run(0.1);
+    expect(driver.d.mic).toBeLessThan(0.1);
+  });
+
+  it('eases a hue the short way round', () => {
+    const driver = createDriver(
+      input('idle', { colors: [{ hue: 0.95, saturation: 1, value: 1 }] }),
+    );
+    driver.setInput(input('idle', { colors: [{ hue: 0.05, saturation: 1, value: 1 }] }));
+
+    driver.advance(FRAME);
+    expectNear(driver.d.colors[0].hue, 0.962, 1e-4);
+    driver.run(2);
+    expectNear(driver.d.colors[0].hue, 0.05, 1e-3);
+  });
+
+  it('repeats the first color in empty slots and crossfades the count', () => {
+    const driver = createDriver(input('idle', { colors: [blue, red] }));
+    expect(driver.d.colors[1]).toEqual(red);
+    expect(driver.d.colors[2]).toEqual(blue);
+
+    driver.setInput(input('idle', { colors: [blue, red, red] }));
+    driver.advance(FRAME);
+    expectNear(driver.d.count, 2.12, 1e-4);
+  });
+
+  it('moves the per-frame share at 60 Hz', () => {
+    expectNear(ease(0.08, 1 / 60), 0.08, 1e-5);
+    expect(ease(0.08, 0)).toBe(0);
+  });
+});
+
+describe('voice visualization bounce', () => {
+  it('follows the keyframes', () => {
+    expect(scaleAt(0)).toBe(1);
+    expectNear(scaleAt(0.15), 0.965, 1e-5);
+    expectNear(scaleAt(0.3), 0.93, 1e-5);
+    expectNear(scaleAt(0.62), 1.03, 1e-5);
+    expectNear(scaleAt(1), 1, 1e-5);
+  });
+
+  it('times them with the CSS ease-out', () => {
+    expectNear(easeOut(0), 0, 1e-4);
+    expectNear(easeOut(0.5), 0.684, 2e-3);
+    expectNear(easeOut(1), 1, 1e-4);
+  });
+
+  it('dips, overshoots and settles', () => {
+    const bounce = createBounce();
+    expect(bounceScale(bounce)).toBe(1);
+
+    startBounce(bounce);
+    const scales = Array.from({ length: 21 }, () => {
+      const scale = bounceScale(bounce);
+      bounce.age += 1 / 60;
+      return scale;
+    });
+
+    expectNear(scales[0], 1, 1e-9);
+    expectNear(Math.min(...scales), 0.93, 0.01);
+    expectNear(Math.max(...scales), 1.03, 0.01);
+    expect(scales.indexOf(Math.min(...scales))).toBeLessThan(scales.indexOf(Math.max(...scales)));
+    expect(bounceScale(bounce)).toBe(1);
+  });
+});

package/src/ai-components/__tests__/voicePalette.test.ts

@@ -0,0 +1,124 @@
+import { audioLevelInput, expressivityInput, speechEnv } from '../voice-visualization/math';
+import { luminance, parseColor, rgbToHsv, toHsvPalette } from '../voice-visualization/palette';
+import { snoise } from '../voice-visualization/simplex';
+import { GLOW_STYLE, WAVE_STYLE } from '../voice-visualization/styles';
+
+describe('voice visualization palette', () => {
+  it('keeps a color’s full hue, saturation and value', () => {
+    const hsv = rgbToHsv([0, 95 / 255, 1]);
+
+    expect(hsv.hue * 360).toBeCloseTo(217.6, 1);
+    expect(hsv.saturation).toBeCloseTo(1, 4);
+    expect(hsv.value).toBeCloseTo(1, 4);
+  });
+
+  it('keeps a muted color muted', () => {
+    // hsv(108°, 25%, 60%)
+    const hsv = rgbToHsv([0.48, 0.6, 0.45]);
+
+    expect(hsv.hue).toBeCloseTo(0.3, 2);
+    expect(hsv.saturation).toBeCloseTo(0.25, 2);
+    expect(hsv.value).toBeCloseTo(0.6, 4);
+  });
+
+  it('gives a gray no saturation', () => {
+    const hsv = rgbToHsv([0.5, 0.5, 0.5]);
+
+    expect(hsv.saturation).toBe(0);
+    expect(hsv.value).toBe(0.5);
+  });
+
+  it.each([
+    ['#005fff', [0, 95 / 255, 1]],
+    ['#0af', [0, 170 / 255, 1]],
+    ['#005fff80', [0, 95 / 255, 1]],
+    ['rgb(0, 95, 255)', [0, 95 / 255, 1]],
+    ['rgba(0, 95, 255, 0.5)', [0, 95 / 255, 1]],
+    ['hsl(0, 100%, 50%)', [1, 0, 0]],
+    ['rebeccapurple', [0.4, 0.2, 0.6]],
+    ['#000000', [0, 0, 0]],
+  ])('reads %s', (color, expected) => {
+    const rgb = parseColor(color);
+    expect(rgb).not.toBeNull();
+    rgb?.forEach((channel, i) => expect(channel).toBeCloseTo(expected[i], 2));
+  });
+
+  it('skips colors it cannot read', () => {
+    expect(parseColor('not-a-color')).toBeNull();
+    expect(parseColor('#12345')).toBeNull();
+    expect(parseColor('')).toBeNull();
+    expect(toHsvPalette(['nope', '#ff0000'])).toHaveLength(1);
+  });
+
+  it('keeps only the first five colors', () => {
+    expect(toHsvPalette(Array.from({ length: 7 }, () => '#ff0000'))).toHaveLength(5);
+  });
+
+  it('measures luminance for the light or dark look', () => {
+    expect(luminance('#ffffff')).toBeCloseTo(1, 4);
+    expect(luminance('#000000')).toBe(0);
+    expect(luminance('#1c1e22')).toBeLessThan(0.5);
+    expect(luminance('')).toBeNull();
+  });
+});
+
+describe('voice visualization inputs', () => {
+  it('clamps expressivity to 0-2 and replaces one that is not a number', () => {
+    expect(expressivityInput(3)).toBe(2);
+    expect(expressivityInput(-1)).toBe(0);
+    expect(expressivityInput(0.5)).toBe(0.5);
+    expect(expressivityInput(Number.NaN)).toBe(1);
+    expect(expressivityInput(Number.POSITIVE_INFINITY)).toBe(1);
+    expect(expressivityInput(undefined)).toBe(1);
+  });
+
+  it('clamps the audio level to 0-1 and treats one that is not a number as no audio', () => {
+    expect(audioLevelInput(2)).toBe(1);
+    expect(audioLevelInput(-1)).toBe(0);
+    expect(audioLevelInput(0.4)).toBe(0.4);
+    expect(audioLevelInput(Number.NaN)).toBeNull();
+    expect(audioLevelInput(null)).toBeNull();
+    expect(audioLevelInput(undefined)).toBeNull();
+  });
+});
+
+describe('voice visualization noise', () => {
+  it('matches the shader’s simplex noise as a GPU computes it', () => {
+    // Read back from the shader's own snoise on a GPU (stream-chat-react's fixtures).
+    const gpu: Array<[number, number, number, number]> = [
+      [0.3, 21, 0, 0.7696],
+      [1.7, 5, 0, 0.208],
+      [0.12, 0, 0, 0.049],
+      [2.5, 9, 0, 0.3869],
+      [10.2, 14, 0, 0.603],
+      [3.3, 1.1, 0.9, -0.7541],
+      [0.05, 0.05, 0.05, -0.5481],
+    ];
+    for (const [x, y, z, expected] of gpu) {
+      expect(snoise(x, y, z)).toBeCloseTo(expected, 2);
+    }
+  });
+
+  it('gives speech phrases and pauses', () => {
+    const samples = Array.from({ length: 2000 }, (_, i) => speechEnv(i * 0.01));
+
+    expect(Math.min(...samples)).toBe(0);
+    expect(Math.max(...samples)).toBeGreaterThan(0.6);
+    expect(Math.max(...samples)).toBeLessThanOrEqual(1);
+  });
+});
+
+describe('voice visualization hit areas', () => {
+  it('takes the globe within a third of the shorter side', () => {
+    expect(GLOW_STYLE.contains(0, 0)).toBe(true);
+    expect(GLOW_STYLE.contains(0.2, 0.2)).toBe(true);
+    expect(GLOW_STYLE.contains(0.3, 0.3)).toBe(false);
+  });
+
+  it('takes the string across, and only near its line', () => {
+    expect(WAVE_STYLE.contains(0.45, 0)).toBe(true);
+    expect(WAVE_STYLE.contains(0, 0.1)).toBe(true);
+    expect(WAVE_STYLE.contains(0, 0.2)).toBe(false);
+    expect(WAVE_STYLE.contains(0.55, 0)).toBe(false);
+  });
+});

package/src/ai-components/charts/components/PieLegend.tsx

@@ -37,7 +37,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 6,
-    maxWidth: '48%', // lets two items sit per row, tweak as needed
+    maxWidth: '48%', // Two items per row.
   },
   swatch: {
     borderRadius: 2,

package/src/ai-components/charts/components/VictoryChart.tsx

@@ -2,16 +2,7 @@ import React from 'react';
 import { Platform, View } from 'react-native';
 
 import { LinearGradient, matchFont, vec } from '@shopify/react-native-skia';
-import {
-  Area,
-  Bar,
-  CartesianChart,
-  Line,
-  Pie,
-  PolarChart,
-  Scatter,
-  // useChartTransformState,
-} from 'victory-native';
+import { Area, Bar, CartesianChart, Line, Pie, PolarChart, Scatter } from 'victory-native';
 
 import { PieLegend } from './PieLegend';
 
@@ -40,11 +31,6 @@ const DEFAULT_WIDTH = 225;
 export const VictoryChart = (props: VictoryChartProps) => {
   const { spec, height = DEFAULT_HEIGHT, width = DEFAULT_WIDTH } = props;
 
-  // const { state: transformState } = useChartTransformState({
-  //   scaleX: 1.5,
-  //   scaleY: 1.0,
-  // });
-
   if (spec.type === 'pie') {
     if (!spec?.data.length) return null;
     return (
@@ -128,11 +114,6 @@ export const VictoryChart = (props: VictoryChartProps) => {
         }}
         yAxis={[{ font }]}
         padding={{ bottom: hasLongLabels ? 2 * maxTickCharCount + 12 : 0 }}
-        // transformState={transformState}
-        // transformConfig={{
-        //   pinch: { enabled: false },
-        //   pan: { enabled: true, dimensions: 'x', activateAfterLongPress: 10 },
-        // }}
       >
         {({ points, chartBounds }) => (
           <>

package/src/ai-components/charts/index.ts

@@ -1,13 +1,9 @@
-// components
 export * from './Chart';
 export * from './components';
 
-// schemas and parsers
 export * from './vega-lite';
 export * from './mermaid';
 
-// utils
 export * from './utils';
 
-// types
 export * from './types';

package/src/ai-components/charts/types.ts

@@ -1,13 +1,12 @@
 export type Dim = string;
 
 export type Datum = {
-  /** The categorical/temporal dimension (label, category, or time). */
+  /** The categorical or temporal dimension: a label, category or time. */
   dimension: Dim;
-  /** The numeric measure/value. */
   value: number;
-  /** Color for this datum; the renderer will fall back to series color. */
+  /** Color of this datum. In non-pie charts, datums sharing a color form one series. */
   color: string;
-  /** Optional series key for multi-series charts (e.g., region). */
+  /** Optional series key for multi-series charts. */
   series?: string;
 };
 

package/src/ai-components/charts/utils/generate-pie-colors.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-bitwise -- FNV-1a hashing and xorshift PRNG are bitwise by definition */
-// hashing and rng
 export const hashLabel = (raw: string) => {
   const s = raw.trim().toLowerCase().normalize('NFKC');
   let h = 2166136261 >>> 0; // FNV-1a
@@ -20,7 +19,6 @@ export const xorshift32 = (seed: number) => {
   };
 };
 
-// color utils
 export const hslToHex = (h: number, s = 68, l = 52) => {
   const S = s / 100,
     L = l / 100;
@@ -51,7 +49,8 @@ export const hslToHex = (h: number, s = 68, l = 52) => {
   return `#${r}${g}${b}`;
 };
 
-// ensure hues not closer than MIN_SEP degrees within the same chart
+// Derives a stable color from `label`. Its hue is nudged away from `usedHues` (by at least
+// `minSep` degrees, over at most 48 attempts) and then appended to `usedHues`.
 export const colorFromLabel = (
   label: string,
   usedHues: number[],
@@ -61,10 +60,9 @@ export const colorFromLabel = (
   const seed = hashLabel(label);
   const rand = xorshift32(seed);
 
-  // base hue from RNG (looks random, but stable)
+  // Seeded by the label, so the base hue is stable.
   let hue = Math.floor(rand() * 360);
 
-  // nudge away from already used hues in THIS chart
   let attempts = 0;
   const tooClose = (h: number) =>
     usedHues.some((u) => {

package/src/ai-components/charts/utils/parse-json-chart.ts

@@ -2,13 +2,11 @@ import type { ChartSpec } from '../types';
 import { parseVegalite, VegaLiteSchema } from '../vega-lite';
 
 export const parseJsonChart = (code: string): ChartSpec => {
-  const json = JSON.parse(code);
-
   try {
-    const parsedVegaLite = VegaLiteSchema.parse(json);
+    const parsedVegaLite = VegaLiteSchema.parse(JSON.parse(code));
     return parseVegalite(parsedVegaLite);
   } catch (_error) {
-    /* do nothing */
+    // Invalid JSON or not a supported chart spec: fall through to the error below.
   }
 
   throw new Error('Unknown type of JSON formatted chart.');

package/src/ai-components/charts/vega-lite/schema.ts

@@ -1,6 +1,5 @@
 import { z } from 'zod';
 
-/* primitives */
 export const VLType = z.enum(['quantitative', 'ordinal', 'nominal', 'temporal']);
 
 const FieldRef = z.object({
@@ -14,29 +13,13 @@ const ColorXY = z.object({
 });
 const ColorPie = z.object({ field: z.string(), type: VLType.optional() });
 
-/* we support only these currently */
-const MarkName = z.enum([
-  'bar',
-  'line',
-  'area',
-  'point',
-  'arc',
-  // 'rect',
-  // 'rule',
-  // 'text',
-  // 'tick',
-  // 'circle',
-  // 'square',
-  // 'trail',
-  // 'geoshape',
-  // 'image',
-]);
+// Supported mark types.
+const MarkName = z.enum(['bar', 'line', 'area', 'point', 'arc']);
 
 const MarkDef = z.looseObject({
   type: z.union([MarkName, z.string()]).optional(),
 });
 
-/* encodings */
 const XyEncoding = z.object({
   x: FieldRef,
   y: FieldRef,
@@ -48,7 +31,6 @@ const PieEncoding = z.object({
   color: ColorPie.optional(),
 });
 
-/* base spec */
 const BaseVL = z.object({
   archetype: z.literal('vegalite'),
   $schema: z.string().optional(),
@@ -61,7 +43,6 @@ const BaseVL = z.object({
   markName: MarkName,
 });
 
-/* branches (with explicit kind) */
 const VL_XY = BaseVL.extend({
   type: z.literal('xy'),
   encoding: XyEncoding,
@@ -97,7 +78,8 @@ const deriveMarkName = (o: any): string | undefined => {
 
 export const VegaLiteCore = z.discriminatedUnion('type', [VL_XY, VL_PIE]);
 
-/* final schema: preprocess to inject needed metadata, then discriminated union */
+// Injects `type` (`pie` for an `arc` mark or a `theta` encoding, else `xy`), `archetype` and
+// `markName`, then validates against the discriminated union.
 export const VegaLiteSchema = z.preprocess((raw) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- untyped JSON input, validated by the zod schema below
   const o: any = raw ?? {};

package/src/ai-components/components/BottomSheet.tsx

@@ -75,7 +75,7 @@ export function BottomSheet({ children }: Props) {
           : next;
     })
     .onEnd((e) => {
-      // very basic momentum bias
+      // Snap to the nearest end, biased by the release velocity.
       const projected = e.translationY + e.velocityY * 0.15;
       const nearest = projected >= bottomSheetHeight * 0.5 ? maxTranslateY : bottomSheetY;
       translateY.value = withTiming(nearest, SPRING, (finished) => {

package/src/ai-components/index.ts

@@ -1,29 +1,24 @@
-// primitives
 export * from './markdown';
 export * from './syntax-highlighting';
 export * from './charts';
 export * from './message-composer';
 export * from './StreamingMessageView';
 export * from './AITypingIndicatorView';
+export * from './voice-visualization';
 
-// components
 export * from './components';
 
-// contexts
 export * from './contexts';
 
-// services
 export * from './services';
 export * from './transcription/useDictation';
-export { isDictationAvailable } from './native/AIDictation';
+export * from './transcription/useDictationAudioLevel';
+export { isDictationAvailable, type DictationLevel } from './native/AIDictation';
 
-// state-stores
 export * from './store';
 
-// theme
 export * from './theme';
 
-// Native handler registration, used by the `stream-chat-react-native/ai-components` and
-// `stream-chat-expo/ai-components` entry points to register only the native pieces this entry
-// point needs (without importing, and therefore bundling, the main SDK entry point).
+// Lets the `stream-chat-react-native/ai-components` and `stream-chat-expo/ai-components` entry
+// points register only the native pieces needed here, without bundling the main SDK entry point.
 export { registerNativeHandlers } from '../native';