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

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

@@ -0,0 +1,166 @@
+import React from 'react';
+import { DeviceEventEmitter } from 'react-native';
+
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import * as aiComponents from '../index';
+import { AIDictation } from '../native/AIDictation';
+
+const flushPromises = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+const createNativeModule = () => ({
+  addListener: jest.fn(),
+  cancel: jest.fn(),
+  isRecording: jest.fn(() => false),
+  removeListeners: jest.fn(),
+  start: jest.fn(),
+  stop: jest.fn(),
+});
+
+// The AI components read the native module through this getter, so every test can decide whether
+// the module is "compiled in".
+let mockNativeModule: ReturnType<typeof createNativeModule> | null = null;
+jest.mock('../native-specs/NativeAIDictation', () => ({
+  __esModule: true,
+  get default() {
+    return mockNativeModule;
+  },
+}));
+
+const renderComposer = () =>
+  render(
+    <aiComponents.StreamTheme>
+      <aiComponents.ComposerView onSendMessage={jest.fn(() => Promise.resolve())} />
+    </aiComponents.StreamTheme>,
+  );
+
+describe('ai-components dictation', () => {
+  afterEach(() => {
+    mockNativeModule = null;
+    act(() => {
+      aiComponents.dictationStoreApi.reset();
+    });
+  });
+
+  describe('when the native module is not compiled in', () => {
+    it('reports dictation as unavailable, hides the mic button and warns once in development', () => {
+      const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      expect(aiComponents.isDictationAvailable()).toBe(false);
+      renderComposer();
+      renderComposer();
+
+      expect(screen.UNSAFE_queryAllByProps({ fill: '#7A7A7A' })).toHaveLength(0);
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(warn).toHaveBeenCalledWith(expect.stringContaining('$StreamChatEnableDictation'));
+      warn.mockRestore();
+    });
+
+    it('turns the low-level API into no-ops', () => {
+      expect(() => AIDictation.start()).not.toThrow();
+      expect(AIDictation.isRecording()).toBe(false);
+      const unsubscribe = AIDictation.addResultListener(jest.fn());
+      expect(() => unsubscribe()).not.toThrow();
+    });
+  });
+
+  describe('when the native module is compiled in', () => {
+    it('starts dictation and streams the transcript into the input', async () => {
+      const nativeModule = createNativeModule();
+      mockNativeModule = nativeModule;
+      expect(aiComponents.isDictationAvailable()).toBe(true);
+
+      renderComposer();
+
+      // The mic is the only icon rendered by an empty composer.
+      const mic = screen.UNSAFE_getByProps({ fill: '#7A7A7A' });
+      await act(async () => {
+        fireEvent.press(mic);
+        await flushPromises();
+      });
+      expect(nativeModule.start).toHaveBeenCalledWith({
+        interimResults: true,
+        language: 'en-US',
+        silenceTimeoutMs: 2500,
+      });
+
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnState', { state: 'listening' });
+      });
+      // While recording the mic is highlighted.
+      expect(screen.UNSAFE_getByProps({ fill: '#005FFF' })).toBeTruthy();
+
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnResult', { isFinal: false, text: 'hello wor' });
+      });
+      expect(screen.getByPlaceholderText('Ask anything').props.value).toBe('hello wor');
+
+      // Pressing the mic while listening stops dictation.
+      fireEvent.press(screen.UNSAFE_getByProps({ fill: '#005FFF' }));
+      expect(nativeModule.stop).toHaveBeenCalled();
+
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnState', { state: 'stopping' });
+        DeviceEventEmitter.emit('AIDictationOnResult', { isFinal: true, text: 'hello world' });
+      });
+      expect(aiComponents.dictationStore.getLatestValue()).toMatchObject({
+        isRecording: false,
+        state: 'idle',
+        transcript: 'hello world',
+      });
+      // Once dictation finishes with text in the input, the send button replaces the mic.
+      expect(screen.getByTestId('send-up')).toBeTruthy();
+      expect(nativeModule.cancel).toHaveBeenCalled();
+    });
+
+    it('applies a final result that arrives after the recognizer stopped listening', async () => {
+      mockNativeModule = createNativeModule();
+      renderComposer();
+
+      await act(async () => {
+        fireEvent.press(screen.UNSAFE_getByProps({ fill: '#7A7A7A' }));
+        await flushPromises();
+      });
+      // Some recognizers (e.g. the Android emulator) send no interim results, only a final one
+      // after `stopping`.
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnState', { state: 'listening' });
+        DeviceEventEmitter.emit('AIDictationOnState', { state: 'stopping' });
+        DeviceEventEmitter.emit('AIDictationOnResult', { isFinal: true, text: 'test test' });
+      });
+
+      expect(screen.getByPlaceholderText('Ask anything').props.value).toBe('test test');
+    });
+
+    it('does not restore the transcript of an earlier dictation when the input mounts', () => {
+      mockNativeModule = createNativeModule();
+      act(() => {
+        aiComponents.dictationStore.partialNext({ transcript: 'an earlier dictation' });
+      });
+
+      renderComposer();
+
+      expect(screen.getByPlaceholderText('Ask anything').props.value).toBe('');
+    });
+
+    it('stores native errors', async () => {
+      mockNativeModule = createNativeModule();
+      renderComposer();
+
+      await act(async () => {
+        fireEvent.press(screen.UNSAFE_getByProps({ fill: '#7A7A7A' }));
+        await flushPromises();
+      });
+      act(() => {
+        DeviceEventEmitter.emit('AIDictationOnState', { state: 'listening' });
+        DeviceEventEmitter.emit('AIDictationOnError', { code: 'X', message: 'boom' });
+      });
+
+      expect(aiComponents.dictationStore.getLatestValue()).toMatchObject({
+        error: { code: 'X', message: 'boom' },
+        isRecording: false,
+        state: 'idle',
+      });
+    });
+  });
+});

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

@@ -0,0 +1,54 @@
+import { escapeRegExp, generateMarkdownText, parseLinksFromText } from '../markdown';
+
+describe('ai-components generateMarkdownText', () => {
+  it('returns null for empty input', () => {
+    expect(generateMarkdownText(undefined)).toBeNull();
+    expect(generateMarkdownText('')).toBeNull();
+  });
+
+  it('converts a raw link into a markdown link', () => {
+    expect(generateMarkdownText('Visit getstream.io today')).toBe(
+      'Visit [getstream.io](http://getstream.io) today',
+    );
+  });
+
+  // Regression: every link used to be replaced on the original text, so only the last one survived.
+  it('converts every raw link in the text', () => {
+    expect(generateMarkdownText('See getstream.io and reactnative.dev')).toBe(
+      'See [getstream.io](http://getstream.io) and [reactnative.dev](http://reactnative.dev)',
+    );
+  });
+
+  it('keeps emails as mailto links', () => {
+    expect(generateMarkdownText('Mail hello@getstream.io')).toBe(
+      'Mail [hello@getstream.io](mailto:hello@getstream.io)',
+    );
+  });
+
+  it('closes an unterminated code fence', () => {
+    const result = generateMarkdownText('Code:\n```js\nconst a = 1;');
+    expect((result?.match(/```/g) ?? []).length % 2).toBe(0);
+  });
+
+  it('collapses indentation after newlines but keeps nested list indentation', () => {
+    expect(generateMarkdownText('Line one\n    indented line')).toBe('Line one\nindented line');
+    expect(generateMarkdownText('- parent\n  - child')).toBe('- parent\n  - child');
+  });
+
+  it('preserves code blocks verbatim', () => {
+    const result = generateMarkdownText('```py\ndef f():\n    return 1\n```');
+    expect(result).toContain('def f():\n    return 1');
+  });
+
+  it('parses links and emails, ignoring markdown links', () => {
+    expect(parseLinksFromText('a getstream.io b [x](https://example.com) c me@x.io')).toEqual([
+      { raw: 'getstream.io', url: 'http://getstream.io' },
+      { raw: 'me@x.io', url: 'mailto:me@x.io' },
+    ]);
+    expect(parseLinksFromText(undefined)).toEqual([]);
+  });
+
+  it('escapes regular expression characters', () => {
+    expect(escapeRegExp('a.b*c')).toBe('a\\.b\\*c');
+  });
+});

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { renderHook } from '@testing-library/react-native';
+
+import { defaultTheme, mergeThemes, StreamTheme, useTheme } from '../index';
+
+describe('ai-components theme', () => {
+  it('throws when used outside of StreamTheme', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => renderHook(() => useTheme())).toThrow(
+      'The useTheme hook was called outside the StreamTheme Provider.',
+    );
+    jest.restoreAllMocks();
+  });
+
+  it('deep merges style overrides without mutating the default theme', () => {
+    const merged = mergeThemes({
+      style: { colors: { accent_blue: 'red' }, composer: { inputPillHeight: 60 } },
+    });
+
+    expect(merged.colors.accent_blue).toBe('red');
+    expect(merged.colors.black).toBe(defaultTheme.colors.black);
+    expect(merged.composer.inputPillHeight).toBe(60);
+    expect(defaultTheme.colors.accent_blue).toBe('#005FFF');
+  });
+
+  it('provides the merged theme, or a pre-merged one', () => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => (
+        <StreamTheme style={{ colors: { grey: 'blue' } }}>{children}</StreamTheme>
+      ),
+    });
+    expect(result.current.theme.colors.grey).toBe('blue');
+
+    const mergedStyle = mergeThemes({ style: { colors: { grey: 'green' } } });
+    const { result: preMerged } = renderHook(() => useTheme(), {
+      wrapper: ({ children }) => <StreamTheme mergedStyle={mergedStyle}>{children}</StreamTheme>,
+    });
+    expect(preMerged.current.theme).toBe(mergedStyle);
+  });
+});

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { VictoryChart } from './components';
+import type { ChartSpec } from './types';
+
+export type ChartFromBlockProps = {
+  spec: ChartSpec;
+  height?: number;
+  width?: number;
+};
+
+const Chart = ({ spec, height = 260, width }: ChartFromBlockProps) => {
+  if (!spec) {
+    return null;
+  }
+
+  return <VictoryChart spec={spec} width={width} height={height} />;
+};
+
+export default Chart;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { Datum } from '../types';
+
+export const PieLegend = ({ items, maxRows = 3 }: { items: Datum[]; maxRows?: number }) => {
+  return (
+    <View style={styles.container}>
+      {items.slice(0, maxRows * 4).map((item, i) => (
+        <View key={`${item.dimension}-${i}`} style={styles.item}>
+          <View
+            style={[
+              styles.swatch,
+              {
+                backgroundColor: item.color,
+              },
+            ]}
+          />
+          <Text numberOfLines={1} style={styles.label}>
+            {item.dimension}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    maxWidth: '48%', // lets two items sit per row, tweak as needed
+  },
+  swatch: {
+    borderRadius: 2,
+    width: 12,
+    height: 12,
+  },
+  label: {
+    fontSize: 13,
+  },
+});

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

@@ -0,0 +1,193 @@
+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 { PieLegend } from './PieLegend';
+
+import type { ChartSpec } from '../types';
+
+const font = matchFont({
+  fontFamily: Platform.select({
+    ios: 'Helvetica',
+    android: 'sans-serif',
+    default: 'serif',
+  }),
+  fontSize: 12,
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+});
+
+export type VictoryChartProps = {
+  spec: ChartSpec;
+  width?: number;
+  height?: number;
+};
+
+const DEFAULT_HEIGHT = 260;
+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 (
+      <>
+        <View style={{ height, width: '100%' }}>
+          <PolarChart labelKey={'dimension'} valueKey={'value'} colorKey={'color'} data={spec.data}>
+            <Pie.Chart />
+          </PolarChart>
+        </View>
+        <PieLegend items={spec.data} />
+      </>
+    );
+  }
+
+  // Group by color into series
+  const seriesNames = Array.from(new Set(spec.data.map((d) => d.color ?? 'series')));
+  const yKeys = seriesNames.map((_name, idx) => `y${idx}` as const);
+
+  let minY = 0;
+
+  // Normalize data into one row per x, with columns y0,y1,... for each series
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- victory-native rows are keyed by dynamic series names
+  const rowsMap = new Map<string | number, Record<string, any>>();
+  for (const s of seriesNames) {
+    const keyIndex = seriesNames.indexOf(s);
+    const yKey = yKeys[keyIndex];
+    if (yKey) {
+      for (const pt of spec.data.filter((d) => (d.color ?? 'series') === s)) {
+        const xKey = spec.isTemporalDim ? new Date(pt.dimension).getTime() : pt.dimension;
+        const row = rowsMap.get(xKey) ?? { x: pt.dimension };
+        row[yKey] = pt.value;
+        minY = Math.min(minY, pt.value);
+        rowsMap.set(xKey, row);
+      }
+    }
+  }
+
+  const table = Array.from(rowsMap.values());
+
+  const visibleBars = table.length;
+
+  const estimatedBarWidth = (width - 30 - visibleBars * 2) / visibleBars;
+
+  const maxTickCharCount = spec.isTemporalDim
+    ? 3
+    : Math.max(
+        ...table.map((entry) =>
+          typeof entry.x === 'string' ? entry.x.length : String(entry.x).length,
+        ),
+      );
+
+  const hasLongLabels =
+    (visibleBars > 4 ? maxTickCharCount > 1 : maxTickCharCount > 5) && !spec.isNumericDim;
+
+  const lowestValue = minY < 0 ? minY - 20 : 0;
+
+  return (
+    <View style={{ height, width: '100%', marginTop: 12 }}>
+      <CartesianChart
+        data={table}
+        xKey={'x'}
+        yKeys={yKeys}
+        domain={{ y: [lowestValue] }}
+        domainPadding={{
+          left: estimatedBarWidth * 0.8,
+          right: estimatedBarWidth * 0.8,
+          top: 20,
+        }}
+        xAxis={{
+          font,
+          formatXLabel: (label: number | string) => {
+            const parsedLabel = (typeof label === 'number' ? String(label) : label) ?? '';
+            if (hasLongLabels && parsedLabel.length > 4) {
+              return `${parsedLabel.slice(0, 3)}...`;
+            }
+            return parsedLabel;
+          },
+          labelRotate: hasLongLabels ? 90 : 0,
+          tickCount: visibleBars,
+          labelOffset: hasLongLabels ? 0 : 2,
+        }}
+        yAxis={[{ font }]}
+        padding={{ bottom: hasLongLabels ? 2 * maxTickCharCount + 12 : 0 }}
+        // transformState={transformState}
+        // transformConfig={{
+        //   pinch: { enabled: false },
+        //   pan: { enabled: true, dimensions: 'x', activateAfterLongPress: 10 },
+        // }}
+      >
+        {({ points, chartBounds }) => (
+          <>
+            {/* One primitive per series */}
+            {yKeys.map((yk) => {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any -- victory-native types points per static key, ours are dynamic
+              const pts = (points as Record<string, any[]>)[yk]!;
+              switch (spec.type) {
+                case 'bar':
+                  return (
+                    <Bar
+                      key={yk}
+                      chartBounds={chartBounds}
+                      points={pts}
+                      innerPadding={0.33}
+                      roundedCorners={{
+                        topLeft: estimatedBarWidth * 0.2,
+                        topRight: estimatedBarWidth * 0.2,
+                      }}
+                    >
+                      <LinearGradient
+                        start={vec(0, 0)}
+                        end={vec(0, 400)}
+                        colors={['#a78bfa', '#a78bfa50']}
+                      />
+                    </Bar>
+                  );
+                case 'area':
+                  return (
+                    <Area key={yk} y0={chartBounds.bottom} points={pts} color={'red'}>
+                      <LinearGradient
+                        start={vec(0, 0)}
+                        end={vec(0, 400)}
+                        colors={['#a78bfa', '#a78bfa50']}
+                      />
+                    </Area>
+                  );
+                case 'point':
+                  return <Scatter key={yk} points={pts} radius={3} color={'#a78bfa'} />;
+                case 'line':
+                default:
+                  return (
+                    <Line
+                      key={yk}
+                      points={pts}
+                      strokeWidth={2}
+                      color={'#a78bfa'}
+                      connectMissingData={true}
+                    />
+                  );
+              }
+            })}
+          </>
+        )}
+      </CartesianChart>
+    </View>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './PieLegend';
+export * from './VictoryChart';

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

@@ -0,0 +1,13 @@
+// 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/mermaid/index.ts

@@ -0,0 +1 @@
+export * from './parser';

package/src/ai-components/charts/mermaid/parser.ts

@@ -0,0 +1,33 @@
+import type { ChartSpec, Datum } from '../types';
+import { colorFromLabel } from '../utils';
+
+export const parseMermaidPie = (lines: string[]): ChartSpec => {
+  let title: string | undefined;
+  const data: Datum[] = [];
+  const usedHues: number[] = [];
+  for (const ln of lines.slice(1)) {
+    const t = ln.match(/^title\s+(.+)$/i);
+    // TODO: Check if this is correct ? We only have one group.
+    if (t && t[1]) {
+      title = t[1]?.trim();
+      continue;
+    }
+    const d = ln.match(/^(?:"([^"]+)"|([^"]+))\s*:\s*([+-]?\d+(?:\.\d+)?)/);
+    if (d) {
+      const label = (d[1] ?? d[2] ?? '').trim();
+      data.push({
+        dimension: label,
+        value: Number(d[3]),
+        color: colorFromLabel(label, usedHues),
+      });
+    }
+  }
+  return { type: 'pie', title, data };
+};
+
+export const parseMermaid = (code: string) => {
+  const lines = code.split(/\r?\n/).map((l) => l.trim());
+  if (/^pie\b/i.test(lines[0] || '')) return parseMermaidPie(lines);
+
+  throw new Error('Unknown mermaid diagram type');
+};

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

@@ -0,0 +1,25 @@
+export type Dim = string;
+
+export type Datum = {
+  /** The categorical/temporal dimension (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: string;
+  /** Optional series key for multi-series charts (e.g., region). */
+  series?: string;
+};
+
+export type ChartType = 'bar' | 'line' | 'area' | 'point' | 'pie';
+
+export type ChartSpec = {
+  type: ChartType;
+  data: Datum[];
+  seriesColors?: Record<string, string>;
+  title?: string;
+  orientation?: 'vertical' | 'horizontal';
+  isTemporalDim?: boolean;
+  isNumericDim?: boolean;
+  dimDomain?: Dim[];
+};

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

@@ -0,0 +1,82 @@
+/* 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
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619) >>> 0;
+  }
+  return h >>> 0;
+};
+
+export const xorshift32 = (seed: number) => {
+  let x = seed || 123456789;
+  return () => {
+    x ^= x << 13;
+    x ^= x >>> 17;
+    x ^= x << 5;
+    return (x >>> 0) / 0xffffffff;
+  };
+};
+
+// color utils
+export const hslToHex = (h: number, s = 68, l = 52) => {
+  const S = s / 100,
+    L = l / 100;
+  const C = (1 - Math.abs(2 * L - 1)) * S;
+  const X = C * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = L - C / 2;
+  const [r1, g1, b1] =
+    h < 60
+      ? [C, X, 0]
+      : h < 120
+        ? [X, C, 0]
+        : h < 180
+          ? [0, C, X]
+          : h < 240
+            ? [0, X, C]
+            : h < 300
+              ? [X, 0, C]
+              : [C, 0, X];
+  const r = Math.round((r1 + m) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  const g = Math.round((g1 + m) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  const b = Math.round((b1 + m) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${r}${g}${b}`;
+};
+
+// ensure hues not closer than MIN_SEP degrees within the same chart
+export const colorFromLabel = (
+  label: string,
+  usedHues: number[],
+  opts?: { minSep?: number; sat?: number; light?: number },
+) => {
+  const { minSep = 25, sat = 68, light = 52 } = opts || {};
+  const seed = hashLabel(label);
+  const rand = xorshift32(seed);
+
+  // base hue from RNG (looks random, but 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) => {
+      const d = Math.abs(h - u);
+      return Math.min(d, 360 - d) < minSep;
+    });
+
+  while (tooClose(hue) && attempts < 48) {
+    hue = (hue + 137.508) % 360; // golden-angle hop
+    attempts++;
+  }
+
+  usedHues.push(hue);
+  return hslToHex(hue, sat, light);
+};