stream-chat-react-native-core 9.9.4 → 9.10.0-beta.1

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Image, Text } from 'react-native';
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+
+import {
+  ComposerView,
+  type ComposerViewProps,
+  sheetStore,
+  sheetStoreApi,
+  StreamTheme,
+} from '../index';
+import {
+  AbstractMediaPickerService,
+  type MediaAsset,
+} from '../services/media-picker-service/AbstractMediaPickerService';
+
+const flushPromises = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+class FakeMediaPickerService extends AbstractMediaPickerService {
+  pickMedia = jest.fn(() => {
+    const assets: MediaAsset[] = [{ name: 'a.png', uri: 'file:///a.png' }];
+    this.appendAssets(assets);
+    return Promise.resolve({ assets, cancelled: false });
+  });
+
+  takeMedia = jest.fn(() => Promise.resolve({ cancelled: true }));
+}
+
+const renderComposer = (props: Partial<ComposerViewProps> = {}) => {
+  const onSendMessage = jest.fn(() => Promise.resolve());
+  const utils = render(
+    <StreamTheme>
+      <ComposerView onSendMessage={onSendMessage} {...props} />
+    </StreamTheme>,
+  );
+  return { ...utils, onSendMessage };
+};
+
+describe('ai-components ComposerView', () => {
+  afterEach(() => {
+    act(() => {
+      sheetStoreApi.closeSheet();
+    });
+  });
+
+  it('sends the typed text and clears the input', async () => {
+    const { onSendMessage } = renderComposer();
+
+    fireEvent.changeText(screen.getByPlaceholderText('Ask anything'), 'Hello there');
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('send-up'));
+      await flushPromises();
+    });
+
+    expect(onSendMessage).toHaveBeenCalledWith(expect.objectContaining({ text: 'Hello there' }));
+    expect(screen.getByPlaceholderText('Ask anything').props.value).toBe('');
+  });
+
+  it('shows the stop button while generating', () => {
+    const stopGenerating = jest.fn(() => Promise.resolve());
+    renderComposer({ isGenerating: true, stopGenerating });
+
+    fireEvent.changeText(screen.getByPlaceholderText('Ask anything'), 'Hello');
+    expect(screen.queryByTestId('send-up')).toBeNull();
+  });
+
+  it('opens the attachment sheet, picks media and sends it along', async () => {
+    const mediaPickerService = new FakeMediaPickerService();
+    const action = jest.fn();
+    const { onSendMessage } = renderComposer({
+      bottomSheetOptions: [{ action, subtitle: 'Do it', title: 'Custom option' }],
+      mediaPickerService,
+    });
+
+    fireEvent.press(screen.getByText('+'));
+    expect(sheetStore.getLatestValue().open).toBe(true);
+    expect(screen.getByText('Camera')).toBeTruthy();
+    expect(screen.getByText('Custom option')).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.press(screen.getByText('Photos'));
+      await flushPromises();
+    });
+    expect(mediaPickerService.pickMedia).toHaveBeenCalled();
+    expect(sheetStore.getLatestValue().open).toBe(false);
+    await waitFor(() => expect(screen.UNSAFE_getAllByType(Image)).toHaveLength(1));
+
+    act(() => {
+      sheetStoreApi.openSheet();
+    });
+    await act(async () => {
+      fireEvent.press(screen.getByText('Custom option'));
+      await flushPromises();
+    });
+    expect(action).toHaveBeenCalled();
+
+    fireEvent.changeText(screen.getByPlaceholderText('Ask anything'), 'With an image');
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('send-up'));
+      await flushPromises();
+    });
+    expect(onSendMessage).toHaveBeenCalledWith({
+      attachments: [{ name: 'a.png', uri: 'file:///a.png' }],
+      custom: undefined,
+      text: 'With an image',
+    });
+    expect(mediaPickerService.state.getLatestValue().assets).toEqual([]);
+    expect(
+      screen.UNSAFE_queryAllByType(Text).some((t) => t.props.children === 'With an image'),
+    ).toBe(false);
+  });
+});

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

@@ -0,0 +1,94 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { Markdown, mergeThemes, StreamTheme } from '../index';
+
+const mockSetString = jest.fn();
+jest.mock(
+  '@react-native-clipboard/clipboard',
+  () => ({ __esModule: true, default: { setString: (text: string) => mockSetString(text) } }),
+  { virtual: true },
+);
+
+const renderMarkdown = (text: string, props: Partial<React.ComponentProps<typeof Markdown>> = {}) =>
+  render(
+    <StreamTheme>
+      <Markdown {...props}>{text}</Markdown>
+    </StreamTheme>,
+  );
+
+describe('ai-components Markdown', () => {
+  beforeEach(() => {
+    mockSetString.mockClear();
+  });
+
+  it('renders headings, emphasis, lists and links', () => {
+    const onLink = jest.fn();
+    renderMarkdown(
+      '# Title\n\nSome **bold** and *italic* and ~~gone~~ text.\n\n- one\n- two\n\n1. first\n2. second\n\n[docs](https://getstream.io)',
+      { onLink },
+    );
+
+    expect(screen.getByText('Title')).toBeTruthy();
+    expect(screen.getByText('bold')).toBeTruthy();
+    expect(screen.getByText('italic')).toBeTruthy();
+    expect(screen.getByText('one')).toBeTruthy();
+    expect(screen.getByText('second')).toBeTruthy();
+
+    fireEvent.press(screen.getByText('docs'));
+    expect(onLink).toHaveBeenCalledWith('https://getstream.io');
+  });
+
+  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');
+
+    expect(screen.getByText('a')).toBeTruthy();
+    expect(screen.getByText('2')).toBeTruthy();
+    expect(screen.getByText('quoted')).toBeTruthy();
+    expect(screen.getByText('npm i')).toBeTruthy();
+    expect(screen.getByText('after')).toBeTruthy();
+  });
+
+  it('renders a code block with its language and copies its content', () => {
+    renderMarkdown('```js\nconst a = 1;\n```');
+
+    expect(screen.getByText('js')).toBeTruthy();
+    expect(screen.getByText(/const/)).toBeTruthy();
+
+    fireEvent.press(screen.getByText('\u29C9'));
+    expect(mockSetString).toHaveBeenCalledWith('const a = 1;');
+  });
+
+  it('renders a mermaid pie chart instead of a code block', () => {
+    renderMarkdown('```mermaid\npie\n"Dogs" : 3\n"Cats" : 2\n```');
+
+    expect(screen.getByTestId('victory-polar-chart')).toBeTruthy();
+    expect(screen.getByText('Dogs')).toBeTruthy();
+    expect(screen.queryByText('mermaid')).toBeNull();
+  });
+
+  it('renders a vega-lite JSON chart, and falls back to code for other JSON', () => {
+    const chart = JSON.stringify({
+      data: { values: [{ a: 'A', b: 1 }] },
+      encoding: { x: { field: 'a' }, y: { field: 'b' } },
+      mark: 'bar',
+    });
+    renderMarkdown('```json\n' + chart + '\n```');
+    expect(screen.getByTestId('victory-cartesian-chart')).toBeTruthy();
+
+    renderMarkdown('```json\n{ "hello": "world" }\n```');
+    expect(screen.getByText('json')).toBeTruthy();
+  });
+
+  it('applies theme overrides', () => {
+    const theme = mergeThemes({ style: { markdown: { text: { color: 'rgb(1, 2, 3)' } } } });
+    render(
+      <StreamTheme mergedStyle={theme}>
+        <Markdown>{'# Themed'}</Markdown>
+      </StreamTheme>,
+    );
+
+    expect(screen.getByText('Themed')).toHaveStyle({ color: 'rgb(1, 2, 3)' });
+  });
+});

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Linking, StyleSheet, View } from 'react-native';
+
+import { act, fireEvent, render, renderHook, screen } from '@testing-library/react-native';
+
+import { registerNativeHandlers } from '../../native';
+import {
+  AITypingIndicatorView,
+  StreamingMessageView,
+  StreamTheme,
+  useStreamingMessage,
+} from '../index';
+
+describe('ai-components streaming', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  describe('useStreamingMessage', () => {
+    it('renders the initial text immediately and animates text appended later', () => {
+      const { result, rerender } = renderHook(
+        ({ text }: { text: string }) =>
+          useStreamingMessage({ letterInterval: 10, renderingLetterCount: 2, text }),
+        { initialProps: { text: 'Hello' } },
+      );
+      expect(result.current.streamedMessageText).toBe('Hello');
+
+      rerender({ text: 'Hello world' });
+      act(() => {
+        jest.advanceTimersByTime(10);
+      });
+      expect(result.current.streamedMessageText).toBe('Hello w');
+
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+      expect(result.current.streamedMessageText).toBe('Hello world');
+    });
+
+    it('optimistically closes a code fence while it is being streamed', () => {
+      const { result, rerender } = renderHook(
+        ({ text }: { text: string }) =>
+          useStreamingMessage({ letterInterval: 10, renderingLetterCount: 4, text }),
+        { initialProps: { text: '' } },
+      );
+
+      rerender({ text: '```js\ncode' });
+      act(() => {
+        jest.advanceTimersByTime(10);
+      });
+      expect(result.current.streamedMessageText).toBe('```j```');
+    });
+  });
+
+  describe('StreamingMessageView', () => {
+    it('renders markdown and handles links with the provided callback', () => {
+      const onLink = jest.fn();
+      render(
+        <StreamTheme>
+          <StreamingMessageView onLink={onLink} text={'**Hi** see getstream.io'} />
+        </StreamTheme>,
+      );
+
+      expect(screen.getByText('Hi')).toBeTruthy();
+      fireEvent.press(screen.getByText('getstream.io'));
+      expect(onLink).toHaveBeenCalledWith('http://getstream.io');
+    });
+
+    it('opens links with Linking by default', async () => {
+      const canOpenURL = jest.spyOn(Linking, 'canOpenURL').mockResolvedValue(true);
+      const openURL = jest.spyOn(Linking, 'openURL').mockResolvedValue(undefined);
+      render(
+        <StreamTheme>
+          <StreamingMessageView text={'see getstream.io'} />
+        </StreamTheme>,
+      );
+
+      await act(async () => {
+        fireEvent.press(screen.getByText('getstream.io'));
+        // Let the `canOpenURL` promise resolve.
+        await Promise.resolve();
+      });
+
+      expect(canOpenURL).toHaveBeenCalledWith('http://getstream.io');
+      expect(openURL).toHaveBeenCalledWith('http://getstream.io');
+    });
+  });
+
+  describe('AITypingIndicatorView', () => {
+    it('lays the SDK native shimmer over the text', () => {
+      const MockShimmer = jest.fn((props) => <View testID='native-shimmer' {...props} />);
+      registerNativeHandlers({ NativeShimmerView: MockShimmer });
+
+      render(
+        <StreamTheme>
+          <AITypingIndicatorView text={'Thinking...'} />
+        </StreamTheme>,
+      );
+
+      expect(screen.getByText('Thinking...')).toBeTruthy();
+      const shimmer = screen.getByTestId('native-shimmer');
+      // The native shimmer paints behind its children, so it must be a sibling drawn after the
+      // text, covering it, rather than its parent.
+      expect(shimmer.props.children).toBeUndefined();
+      expect(MockShimmer.mock.calls[0]?.[0]).toMatchObject({
+        baseColor: 'transparent',
+        duration: 1200,
+        gradientColor: '#FFFFFF',
+        pointerEvents: 'none',
+      });
+      expect(StyleSheet.flatten(shimmer.props.style)).toMatchObject({
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+      });
+
+      registerNativeHandlers({ NativeShimmerView: null as unknown as undefined });
+    });
+  });
+});

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { registerNativeHandlers } from '../../native';
+import {
+  cssToRNTextStyle,
+  flattenRowsToTextAndColorRanges,
+  generateNewStylesheet,
+  StreamTheme,
+  SyntaxHighlighter,
+} from '../index';
+
+const setPlatform = (os: typeof Platform.OS) =>
+  Object.defineProperty(Platform, 'OS', { configurable: true, get: () => os });
+
+describe('ai-components syntax highlighting', () => {
+  const originalOS = Platform.OS;
+
+  afterEach(() => {
+    setPlatform(originalOS);
+    registerNativeHandlers({ PerfText: null as unknown as undefined });
+  });
+
+  it('converts web CSS into React Native text styles', () => {
+    expect(
+      cssToRNTextStyle({
+        color: '#fff',
+        font: 'italic bold 14px/20px "Fira Code", monospace',
+        letterSpacing: '0.5em',
+        overflow: 'auto',
+      }),
+    ).toEqual({
+      color: '#fff',
+      fontFamily: 'Fira Code',
+      fontSize: 14,
+      fontStyle: 'italic',
+      fontWeight: 'bold',
+      letterSpacing: 8,
+      lineHeight: 20,
+      overflow: 'scroll',
+    });
+    expect(
+      cssToRNTextStyle({ fontSize: '1.5em', lineHeight: 'nope' }, { baseFontSize: 10 }),
+    ).toEqual({
+      fontSize: 15,
+    });
+  });
+
+  it('flattens highlighted rows into one text with merged colour ranges', () => {
+    const { defaultColor, transformedStyle } = generateNewStylesheet({
+      highlighter: 'prism',
+      stylesheet: {
+        'pre[class*="language-"]': { color: '#111111' },
+        keyword: { color: '#ff0000' },
+      },
+    });
+    expect(defaultColor).toBe('#111111');
+
+    const rows = [
+      [
+        {
+          children: [{ type: 'text', value: 'const' }],
+          properties: { className: ['token', 'keyword'] },
+          tagName: 'span',
+          type: 'element',
+        },
+        { type: 'text', value: ' a = 1;' },
+      ],
+      [{ type: 'text', value: 'next' }],
+    ] as unknown as rendererNode[];
+
+    const { ranges, text } = flattenRowsToTextAndColorRanges(rows, {
+      defaultColor: defaultColor as string,
+      // The renderer passes the converted stylesheet through react-syntax-highlighter untyped.
+      stylesheet: transformedStyle as unknown as Parameters<
+        typeof flattenRowsToTextAndColorRanges
+      >[1]['stylesheet'],
+    });
+
+    expect(text).toBe('const a = 1;\nnext');
+    expect(ranges).toHaveLength(3);
+    expect(ranges[0]).toMatchObject({ end: 5, start: 0 });
+    expect(ranges[1]).toMatchObject({ end: 12, start: 5 });
+    expect(ranges[2]).toMatchObject({ end: 17, start: 13 });
+  });
+
+  it('renders nested Text on iOS', () => {
+    setPlatform('ios');
+    render(
+      <StreamTheme>
+        <SyntaxHighlighter highlighter='prism' language='javascript'>
+          {'const a = 1;'}
+        </SyntaxHighlighter>
+      </StreamTheme>,
+    );
+
+    expect(screen.getByText('const')).toBeTruthy();
+  });
+
+  it('highlights with highlight.js by default', () => {
+    setPlatform('ios');
+    render(
+      <StreamTheme>
+        <SyntaxHighlighter language='javascript'>{'const a = 1;'}</SyntaxHighlighter>
+      </StreamTheme>,
+    );
+
+    // Tokenized: the keyword is its own text node, inside a span styled by the highlight.js default
+    // theme (`hljs-keyword` is bold).
+    expect(screen.getByText('const')).toBeTruthy();
+    expect(
+      screen
+        .UNSAFE_getAllByType(Text)
+        .some((node) => StyleSheet.flatten(node.props.style)?.fontWeight === 'bold'),
+    ).toBe(true);
+  });
+
+  it('renders a single PerfText on Android', () => {
+    setPlatform('android');
+    const MockPerfText = jest.fn((props) => <View testID='perf-text' {...props} />);
+    registerNativeHandlers({ PerfText: MockPerfText });
+
+    render(
+      <StreamTheme>
+        <SyntaxHighlighter highlighter='prism' language='javascript'>
+          {'const a = 1;'}
+        </SyntaxHighlighter>
+      </StreamTheme>,
+    );
+
+    expect(screen.getByTestId('perf-text')).toBeTruthy();
+    expect(MockPerfText.mock.calls[0]?.[0]).toMatchObject({ text: 'const a = 1;' });
+  });
+});

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

@@ -0,0 +1,131 @@
+import { colorFromLabel, hashLabel, parseJsonChart, parseMermaid, xorshift32 } from '../charts';
+
+describe('ai-components chart parsers', () => {
+  describe('parseMermaid', () => {
+    it('parses a pie chart with a title', () => {
+      const spec = parseMermaid('pie\ntitle Pets\n"Dogs" : 386\n"Cats" : 85.5\nRats : 15');
+
+      expect(spec.type).toBe('pie');
+      expect(spec.title).toBe('Pets');
+      expect(spec.data.map(({ dimension, value }) => ({ dimension, value }))).toEqual([
+        { dimension: 'Dogs', value: 386 },
+        { dimension: 'Cats', value: 85.5 },
+        { dimension: 'Rats', value: 15 },
+      ]);
+      spec.data.forEach(({ color }) => expect(color).toMatch(/^#[0-9a-f]{6}$/i));
+    });
+
+    it('throws on unsupported diagrams', () => {
+      expect(() => parseMermaid('graph TD\nA-->B')).toThrow('Unknown mermaid diagram type');
+    });
+  });
+
+  describe('parseJsonChart', () => {
+    it('parses a vega-lite bar chart', () => {
+      const spec = parseJsonChart(
+        JSON.stringify({
+          data: {
+            values: [
+              { a: 'A', b: 28 },
+              { a: 'B', b: 55 },
+              { a: 'C', b: 'not a number' },
+            ],
+          },
+          encoding: {
+            x: { field: 'a', type: 'nominal' },
+            y: { field: 'b', type: 'quantitative' },
+          },
+          mark: 'bar',
+        }),
+      );
+
+      expect(spec.type).toBe('bar');
+      expect(spec.data).toEqual([
+        { color: undefined, dimension: 'A', value: 28 },
+        { color: undefined, dimension: 'B', value: 55 },
+      ]);
+    });
+
+    it('parses a vega-lite arc chart as a pie chart', () => {
+      const spec = parseJsonChart(
+        JSON.stringify({
+          data: {
+            values: [
+              { category: 'x', value: 4 },
+              { category: 'y', value: 6 },
+            ],
+          },
+          encoding: {
+            color: { field: 'category', type: 'nominal' },
+            theta: { field: 'value', type: 'quantitative' },
+          },
+          mark: { type: 'arc' },
+        }),
+      );
+
+      expect(spec.type).toBe('pie');
+      expect(spec.data.map(({ dimension, value }) => ({ dimension, value }))).toEqual([
+        { dimension: 'x', value: 4 },
+        { dimension: 'y', value: 6 },
+      ]);
+    });
+
+    it('takes the mark from the first layer', () => {
+      const spec = parseJsonChart(
+        JSON.stringify({
+          data: { values: [{ t: '2024-01-01', v: 1 }] },
+          encoding: { x: { field: 't', type: 'temporal' }, y: { field: 'v' } },
+          layer: [{ mark: { type: 'line' } }],
+        }),
+      );
+
+      expect(spec.type).toBe('line');
+      expect(spec.isTemporalDim).toBe(true);
+      expect(spec.data[0]?.dimension).toBeInstanceOf(Date);
+    });
+
+    it('rejects JSON that is not a supported chart', () => {
+      expect(() => parseJsonChart(JSON.stringify({ hello: 'world' }))).toThrow(
+        'Unknown type of JSON formatted chart.',
+      );
+      expect(() =>
+        parseJsonChart(
+          JSON.stringify({
+            data: { values: [] },
+            encoding: { x: { field: 'a' }, y: { field: 'b' } },
+            mark: 'geoshape',
+          }),
+        ),
+      ).toThrow();
+      expect(() => parseJsonChart('{ not json')).toThrow();
+    });
+  });
+
+  describe('colours', () => {
+    it('hashes labels case and whitespace insensitively', () => {
+      expect(hashLabel(' Dogs ')).toBe(hashLabel('dogs'));
+      expect(hashLabel('dogs')).not.toBe(hashLabel('cats'));
+    });
+
+    it('produces a deterministic pseudo random sequence in [0, 1]', () => {
+      const a = xorshift32(42);
+      const b = xorshift32(42);
+      for (let i = 0; i < 5; i++) {
+        const value = a();
+        expect(value).toBe(b());
+        expect(value).toBeGreaterThanOrEqual(0);
+        expect(value).toBeLessThanOrEqual(1);
+      }
+    });
+
+    it('gives stable, distinct colours per label', () => {
+      const firstRun = ['a', 'b', 'c'].map((label) => colorFromLabel(label, []));
+      const secondRun = ['a', 'b', 'c'].map((label) => colorFromLabel(label, []));
+      expect(firstRun).toEqual(secondRun);
+
+      const usedHues: number[] = [];
+      const distinct = ['a', 'b', 'c', 'd'].map((label) => colorFromLabel(label, usedHues));
+      expect(new Set(distinct).size).toBe(4);
+    });
+  });
+});