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

package/src/__tests__/offline-support/optimistic-update.tsx

@@ -1000,7 +1000,7 @@ export const OptimisticUpdates = () => {
           status: MessageStatusTypes.SENDING,
           text: 'unsent across a restart',
           user: chatClient.user as UserResponse,
-          user_id: chatClient.userID,
+          user_id: chatClient.userId,
         });
 
         jest
@@ -1069,7 +1069,7 @@ export const OptimisticUpdates = () => {
           status: MessageStatusTypes.SENDING,
           text: 'no guard probe please',
           user: chatClient.user as UserResponse,
-          user_id: chatClient.userID,
+          user_id: chatClient.userId,
         });
 
         jest
@@ -1297,14 +1297,14 @@ export const OptimisticUpdates = () => {
           status: MessageStatusTypes.SENDING,
           text: 'offline resend',
           user: chatClient.user as UserResponse,
-          user_id: chatClient.userID,
+          user_id: chatClient.userId,
         });
         const serverMessage = generateMessage({
           cid: channel.cid,
           id: localMessage.id,
           text: localMessage.text,
           user: chatClient.user as UserResponse,
-          user_id: chatClient.userID,
+          user_id: chatClient.userId,
         });
 
         jest
@@ -1412,7 +1412,7 @@ export const OptimisticUpdates = () => {
           status: MessageStatusTypes.SENDING,
           text: 'offline resend unresolved',
           user: chatClient.user as UserResponse,
-          user_id: chatClient.userID,
+          user_id: chatClient.userId,
         });
 
         jest

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