stream-chat-react-native-core 10.0.0-rc.2 → 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/index.ts

@@ -4,6 +4,7 @@ export * from './charts';
 export * from './message-composer';
 export * from './StreamingMessageView';
 export * from './AITypingIndicatorView';
+export * from './voice-visualization';
 
 export * from './components';
 
@@ -11,7 +12,8 @@ export * from './contexts';
 
 export * from './services';
 export * from './transcription/useDictation';
-export { isDictationAvailable } from './native/AIDictation';
+export * from './transcription/useDictationAudioLevel';
+export { isDictationAvailable, type DictationLevel } from './native/AIDictation';
 
 export * from './store';
 

package/src/ai-components/message-composer/ComposerView.tsx

@@ -19,7 +19,7 @@ import type {
   AbstractMediaPickerService,
   MediaPickerState,
 } from '../services/media-picker-service/AbstractMediaPickerService';
-import { useComposerText } from '../store';
+import { COMPOSER_DICTATION_SOURCE, useComposerText } from '../store';
 import type { ComposerState } from '../store';
 import { useDictationState } from '../store/dictation/useDictationState';
 import { useDictationTranscript } from '../store/dictation/useDictationTranscript';
@@ -100,7 +100,7 @@ export const AIMessageInput = () => {
   } = useTheme();
   const styles = useStyles();
 
-  const { error, isRecording } = useDictationState();
+  const { error, isRecording, source } = useDictationState();
   const { text } = useComposerText();
   const { transcript } = useDictationTranscript();
   const { setText } = useMessageComposerContext();
@@ -109,10 +109,13 @@ export const AIMessageInput = () => {
   useEffect(() => {
     const transcriptChanged = transcript !== previousTranscript.current;
     previousTranscript.current = transcript;
+    // Only dictation from the composer's own button fills the input; dictation started elsewhere
+    // (a voice mode, say) must not overwrite what the user typed.
+    if (source !== COMPOSER_DICTATION_SOURCE) return;
     if (!error && (isRecording || transcriptChanged)) {
       setText(transcript);
     }
-  }, [isRecording, transcript, error, setText]);
+  }, [isRecording, transcript, error, setText, source]);
 
   return (
     <TextInput

package/src/ai-components/message-composer/SpeechToTextButton.tsx

@@ -9,7 +9,7 @@ import { Mic } from '../internal/icons/Mic';
 
 import { isDictationAvailable, warnIfDictationUnavailable } from '../native/AIDictation';
 import type { DictationStartOptions } from '../native-specs/NativeAIDictation';
-import { dictationStore, type DictationStoreState } from '../store';
+import { COMPOSER_DICTATION_SOURCE, dictationStore, type DictationStoreState } from '../store';
 import { useDictation } from '../transcription/useDictation';
 
 const selector = ({ isRecording }: DictationStoreState) => ({
@@ -30,6 +30,9 @@ export const SpeechToTextButton = (props: SpeechToTextButtonProps) => {
   return <AvailableSpeechToTextButton {...props} />;
 };
 
+// Marks this button's dictation as the composer's, so `ComposerView` fills its input with it.
+const DICTATION_OPTIONS = { source: COMPOSER_DICTATION_SOURCE };
+
 const AvailableSpeechToTextButton = ({ options }: SpeechToTextButtonProps) => {
   const {
     theme: {
@@ -38,7 +41,7 @@ const AvailableSpeechToTextButton = ({ options }: SpeechToTextButtonProps) => {
     },
   } = useTheme();
 
-  const { cancel, toggle } = useDictation(options);
+  const { cancel, toggle } = useDictation(options, DICTATION_OPTIONS);
   const { isRecording } = useStateStore(dictationStore, selector);
 
   useEffect(() => {

package/src/ai-components/native/AIDictation.ts

@@ -11,6 +11,10 @@ import NativeAIDictation, {
 const ON_STATE_EVENT = 'AIDictationOnState';
 const ON_RESULT_EVENT = 'AIDictationOnResult';
 const ON_ERROR_EVENT = 'AIDictationOnError';
+const ON_LEVEL_EVENT = 'AIDictationOnLevel';
+
+/** The microphone's level while dictation listens, from 0 to 1. */
+export type DictationLevel = { level: number };
 
 let eventEmitter: NativeEventEmitter | undefined;
 const getEventEmitter = () => {
@@ -75,4 +79,11 @@ export const AIDictation = {
     );
     return sub ? () => sub.remove() : noop;
   },
+  /** The microphone's level while dictation listens, about 10 to 30 times a second. */
+  addLevelListener(listener: (payload: DictationLevel) => void) {
+    const sub = getEventEmitter()?.addListener(ON_LEVEL_EVENT, (event) =>
+      listener(event as DictationLevel),
+    );
+    return sub ? () => sub.remove() : noop;
+  },
 };

package/src/ai-components/store/dictation/store.ts

@@ -7,6 +7,11 @@ export type DictationStoreState = {
   transcript: string;
   isRecording: boolean;
   error?: DictationError | null;
+  /**
+   * Who started the current dictation, as passed to `useDictation`, or `null`. Lets a consumer
+   * such as `ComposerView` pick up only the transcripts meant for it.
+   */
+  source?: string | null;
 };
 
 const DEFAULT_STATE: DictationStoreState = {
@@ -14,8 +19,12 @@ const DEFAULT_STATE: DictationStoreState = {
   transcript: '',
   isRecording: false,
   error: null,
+  source: null,
 };
 
+/** The `source` of dictation started by the composer's own `SpeechToTextButton`. */
+export const COMPOSER_DICTATION_SOURCE = 'composer';
+
 export const dictationStore = new StateStore<DictationStoreState>(DEFAULT_STATE);
 
 const reset = () => dictationStore.next(DEFAULT_STATE);

package/src/ai-components/store/dictation/useDictationState.ts

@@ -2,10 +2,11 @@ import { useStateStore } from '@stream-io/state-store/react-bindings';
 
 import { dictationStore, type DictationStoreState } from './store';
 
-const selector = ({ state, isRecording, error }: DictationStoreState) => ({
+const selector = ({ state, isRecording, error, source }: DictationStoreState) => ({
   state,
   isRecording,
   error,
+  source,
 });
 
 export const useDictationState = () => useStateStore(dictationStore, selector);

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

@@ -6,3 +6,5 @@ export * from './composer/useComposerHasText';
 export * from './composer/useComposerText';
 
 export * from './dictation/store';
+export * from './dictation/useDictationState';
+export * from './dictation/useDictationTranscript';

package/src/ai-components/theme.ts

@@ -56,6 +56,19 @@ export type Theme = {
   aiTypingIndicatorView: {
     text: TextStyle;
   };
+  /**
+   * `VoiceGlow` and `VoiceWave`. Optional, so a hand-built `Theme` without it keeps type-checking;
+   * the visualizations fall back to the default accent then.
+   */
+  voiceVisualization?: {
+    /** One to five colors, used when a visualization is given no `colors` of its own. */
+    colors: string[];
+    /**
+     * The color the visualizations sit on, which tells them to draw for a light or a dark
+     * background. Defaults to the system's color scheme.
+     */
+    backdropColor?: string;
+  };
 };
 
 export const defaultTheme: Theme = {
@@ -135,4 +148,7 @@ export const defaultTheme: Theme = {
   aiTypingIndicatorView: {
     text: {},
   },
+  voiceVisualization: {
+    colors: [colors.accent_blue],
+  },
 };

package/src/ai-components/transcription/useDictation.ts

@@ -27,7 +27,19 @@ const selector = ({ isRecording }: DictationStoreState) => ({
 });
 
 // TODO: add proper jsdocs
-export const useDictation = (defaultOptions: DictationStartOptions = DEFAULT_OPTIONS) => {
+export type UseDictationOptions = {
+  /**
+   * Who is dictating, stored as the dictation store's `source` when dictation starts. The
+   * `ComposerView` only fills its input with dictation whose source is the composer's own, so
+   * dictation started elsewhere (a voice mode, say) leaves the composer's text alone.
+   */
+  source?: string;
+};
+
+export const useDictation = (
+  defaultOptions: DictationStartOptions = DEFAULT_OPTIONS,
+  { source }: UseDictationOptions = {},
+) => {
   const { isRecording } = useStateStore(dictationStore, selector);
 
   useEffect(() => {
@@ -65,11 +77,12 @@ export const useDictation = (defaultOptions: DictationStartOptions = DEFAULT_OPT
             code: 'NO_PERMISSION',
             message: 'Microphone permission not granted',
           },
+          source: source ?? null,
         });
         return;
       }
 
-      dictationStore.partialNext({ error: null, transcript: '' });
+      dictationStore.partialNext({ error: null, source: source ?? null, transcript: '' });
 
       const opts: DictationStartOptions = {
         ...defaultOptions,
@@ -78,7 +91,7 @@ export const useDictation = (defaultOptions: DictationStartOptions = DEFAULT_OPT
 
       AIDictation.start(opts);
     },
-    [defaultOptions],
+    [defaultOptions, source],
   );
 
   const stop = useCallback(() => {