stream-chat-react-native-core 9.12.1-beta.1 → 9.13.0

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

@@ -0,0 +1,85 @@
+import React, { type PropsWithChildren } from 'react';
+
+import { renderHook } from '@testing-library/react-native';
+import type { TFunction } from 'i18next';
+
+import {
+  TranslationProvider as ChatTranslationProvider,
+  type TranslationContextValue,
+} from '../../contexts/translationContext';
+import { Streami18n } from '../../utils/i18n/Streami18n';
+import {
+  type AITranslate,
+  defaultAITranslate,
+  interpolateAIString,
+  TranslationProvider,
+  useAITranslation,
+} from '../contexts';
+
+const withValue =
+  (value: TranslationContextValue) =>
+  ({ children }: PropsWithChildren) => (
+    <ChatTranslationProvider value={value}>{children}</ChatTranslationProvider>
+  );
+
+describe('AI translation', () => {
+  it('fills placeholders and leaves unknown ones', () => {
+    expect(interpolateAIString('Thought for {{ duration }}', { duration: '12s' })).toBe(
+      'Thought for 12s',
+    );
+    expect(interpolateAIString('Connected to {{provider}}', { provider: 'Linear' })).toBe(
+      'Connected to Linear',
+    );
+    expect(interpolateAIString('Thought for {{ duration }}', {})).toBe(
+      'Thought for {{ duration }}',
+    );
+    expect(interpolateAIString('Thinking...')).toBe('Thinking...');
+    expect(interpolateAIString('{{ count }} files', { count: 0 })).toBe('0 files');
+  });
+
+  it('is English without <Chat>', () => {
+    const { result } = renderHook(() => useAITranslation());
+    expect(result.current.t).toBe(defaultAITranslate);
+    expect(result.current.t('Thinking... {{ duration }}', { duration: '4s' })).toBe(
+      'Thinking... 4s',
+    );
+  });
+
+  it('follows the chat SDK translator, as inside <Chat>', async () => {
+    const i18n = new Streami18n({ language: 'fr' });
+    // `registerTranslation` only takes keys in `en.json`; the AI keys join it with the views.
+    i18n.registerTranslation('fr', {
+      'Thought for {{ duration }}': 'Réfléchi pendant {{ duration }}',
+    } as Parameters<typeof i18n.registerTranslation>[1]);
+    const translators = (await i18n.getTranslators()) as unknown as TranslationContextValue;
+
+    const { result } = renderHook(() => useAITranslation(), {
+      wrapper: withValue({ ...translators, userLanguage: 'fr' }),
+    });
+    expect(result.current.t('Thought for {{ duration }}', { duration: '12s' })).toBe(
+      'Réfléchi pendant 12s',
+    );
+  });
+
+  it('is the same provider as the chat SDK, for apps without <Chat>', () => {
+    expect(TranslationProvider).toBe(ChatTranslationProvider);
+    const t = ((key: string) => `[es] ${key}`) as unknown as TFunction;
+    const { result } = renderHook(() => useAITranslation(), {
+      wrapper: ({ children }: PropsWithChildren) => (
+        <TranslationProvider
+          value={{ t, tDateTimeParser: (input) => input ?? 0, userLanguage: 'es' }}
+        >
+          {children}
+        </TranslationProvider>
+      ),
+    });
+    expect(result.current.t('Allow')).toBe('[es] Allow');
+  });
+
+  it('takes the chat SDK translator as it is', () => {
+    // A compile-time check: core's `t` (i18next's TFunction) must be assignable without a cast.
+    const coreT = ((key: string) => key) as unknown as TFunction;
+    const t: AITranslate = coreT;
+    expect(t('Allow')).toBe('Allow');
+  });
+});

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

@@ -21,9 +21,6 @@ import {
 } 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;

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

@@ -84,7 +84,7 @@ describe('voice visualization inputs', () => {
 
 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).
+    // Read back from the shader's own snoise on a GPU.
     const gpu: Array<[number, number, number, number]> = [
       [0.3, 21, 0, 0.7696],
       [1.7, 5, 0, 0.208],

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { primitives } from '../../internal/tokens';
 import type { Datum } from '../types';
 
 export const PieLegend = ({ items, maxRows = 3 }: { items: Datum[]; maxRows?: number }) => {
@@ -45,6 +46,6 @@ const styles = StyleSheet.create({
     height: 12,
   },
   label: {
-    fontSize: 13,
+    fontSize: primitives.typographyFontSizeXs,
   },
 });

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

@@ -15,7 +15,9 @@ import {
 
 import { PieLegend } from './PieLegend';
 
+import { primitives } from '../../internal/tokens';
 import type { ChartSpec } from '../types';
+import { formatTimeLabel } from '../utils/format-time-label';
 
 const font = matchFont({
   fontFamily: Platform.select({
@@ -23,7 +25,7 @@ const font = matchFont({
     android: 'sans-serif',
     default: 'serif',
   }),
-  fontSize: 12,
+  fontSize: primitives.typographyFontSizeXxs,
   fontWeight: 'normal',
   fontStyle: 'normal',
 });
@@ -96,8 +98,13 @@ export const VictoryChart = (props: VictoryChartProps) => {
         ),
       );
 
+  // A time axis is labelled short (`29 Oct`, `13:45`), so it is never turned on its side.
   const hasLongLabels =
-    (visibleBars > 4 ? maxTickCharCount > 1 : maxTickCharCount > 5) && !spec.isNumericDim;
+    (visibleBars > 4 ? maxTickCharCount > 1 : maxTickCharCount > 5) &&
+    !spec.isNumericDim &&
+    !spec.isTemporalDim;
+  const times = spec.isTemporalDim ? table.map((entry) => new Date(entry.x).getTime()) : [];
+  const timeSpan = times.length > 1 ? Math.max(...times) - Math.min(...times) : 0;
 
   const lowestValue = minY < 0 ? minY - 20 : 0;
 
@@ -116,6 +123,7 @@ export const VictoryChart = (props: VictoryChartProps) => {
         xAxis={{
           font,
           formatXLabel: (label: number | string) => {
+            if (spec.isTemporalDim) return formatTimeLabel(label, timeSpan);
             const parsedLabel = (typeof label === 'number' ? String(label) : label) ?? '';
             if (hasLongLabels && parsedLabel.length > 4) {
               return `${parsedLabel.slice(0, 3)}...`;

package/src/ai-components/charts/utils/format-time-label.ts

@@ -0,0 +1,18 @@
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+const twoDigits = (value: number) => String(value).padStart(2, '0');
+
+/**
+ * A short label for a point on a time axis: the time of day when the chart spans a day or less,
+ * such as `13:45`, and otherwise the day and month, such as `29 Oct`. A date written out in full
+ * doesn't fit under a point. Anything that isn't a date is labelled as it is.
+ */
+export const formatTimeLabel = (value: unknown, spanMs: number): string => {
+  const date =
+    value instanceof Date ? value : typeof value === 'number' ? new Date(value) : undefined;
+  if (!date || Number.isNaN(date.getTime())) return String(value ?? '');
+  if (spanMs <= DAY_MS) return `${twoDigits(date.getHours())}:${twoDigits(date.getMinutes())}`;
+  return `${date.getDate()} ${MONTHS[date.getMonth()]}`;
+};

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

@@ -56,7 +56,7 @@ const BaseVL = z.object({
     values: z.array(z.record(z.string(), z.unknown())),
   }),
   mark: z.union([MarkName, MarkDef, z.string()]).optional(),
-  layer: z.array(z.looseObject({ mark: MarkDef })).optional(),
+  layer: z.array(z.looseObject({ mark: z.union([MarkDef, z.string()]) })).optional(),
   marks: z.array(MarkDef).optional(),
   markName: MarkName,
 });
@@ -95,12 +95,29 @@ const deriveMarkName = (o: any): string | undefined => {
   return Array.isArray(o?.marks) && o.marks.length > 0 ? normalizeMarkName(o.marks[0]) : undefined;
 };
 
+const DRAWN_MARKS = new Set<string>(MarkName.options);
+
+// A layered chart keeps its encoding, and often its data, in its layers: it is drawn as the first
+// layer that draws data the way this renders, with the chart's data when the layer has none.
+// Other layers, such as a rule marking a threshold or text labels, are left out.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- untyped JSON input, validated by the zod schema below
+const withPrimaryLayer = (o: any) => {
+  if (o?.encoding || !Array.isArray(o?.layer)) return o;
+  const layer = o.layer.find(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- an untyped layer of the input
+    (each: any) => each?.encoding && DRAWN_MARKS.has(normalizeMarkName(each.mark) ?? ''),
+  );
+  return layer
+    ? { ...o, data: layer.data ?? o.data, encoding: layer.encoding, mark: layer.mark }
+    : o;
+};
+
 export const VegaLiteCore = z.discriminatedUnion('type', [VL_XY, VL_PIE]);
 
 /* final schema: preprocess to inject needed metadata, then 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 ?? {};
+  const o: any = withPrimaryLayer(raw ?? {});
   const markName = deriveMarkName(o);
   const hasTheta = !!o?.encoding?.theta;
 

package/src/ai-components/contexts/composer-context.tsx

@@ -4,6 +4,7 @@ import type { StateStore } from '@stream-io/state-store';
 
 import { useStableCallback } from '../internal/hooks/useStableCallback';
 import type { ComposerViewProps } from '../message-composer';
+import type { AIChatOption } from '../message-composer/ChatOptions';
 import { MediaPickerService } from '../services';
 import type { AbstractMediaPickerService } from '../services/media-picker-service/AbstractMediaPickerService';
 import { type ComposerState, createNewComposerStore } from '../store';
@@ -11,6 +12,8 @@ import { type ComposerState, createNewComposerStore } from '../store';
 export type ComposerContext = {
   state: StateStore<ComposerState>;
   setText: (text: string) => void | Promise<void>;
+  /** Picks the chat option for the next message, or removes it with `null`. */
+  setChatOption: (option: AIChatOption | null) => void;
   sendMessage: () => void | Promise<void>;
   mediaPickerService?: AbstractMediaPickerService;
 };
@@ -30,9 +33,13 @@ export const ComposerProvider = ({
   const [mediaPickerService] = useState(
     () => mediaPickerServiceOverride ?? (MediaPickerService ? new MediaPickerService() : undefined),
   );
-  const [state] = useState(() => stateOverride ?? createNewComposerStore());
+  const [ownState] = useState(createNewComposerStore);
+  const state = stateOverride ?? ownState;
 
   const setText = useStableCallback((text: string) => state.partialNext({ text }));
+  const setChatOption = useStableCallback((chatOption: AIChatOption | null) =>
+    state.partialNext({ chatOption }),
+  );
 
   const clearState = useStableCallback(() => {
     setText('');
@@ -40,22 +47,23 @@ export const ComposerProvider = ({
   });
 
   const sendMessage = useStableCallback(async () => {
-    const { text, custom } = state.getLatestValue();
+    const { chatOption, custom, text } = state.getLatestValue();
 
     const data = {
       text,
       attachments: mediaPickerService?.state.getLatestValue().assets,
+      chatOption: chatOption ?? undefined,
       custom,
     };
 
     clearState();
 
-    await onSendMessage(data);
+    await onSendMessage?.(data);
   });
 
   const contextValue = useMemo(
-    () => ({ mediaPickerService, state, setText, sendMessage, clearState }),
-    [state, mediaPickerService, setText, sendMessage, clearState],
+    () => ({ mediaPickerService, state, setChatOption, setText, sendMessage, clearState }),
+    [state, mediaPickerService, setChatOption, setText, sendMessage, clearState],
   );
 
   return <ComposerContext.Provider value={contextValue}>{children}</ComposerContext.Provider>;

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

@@ -1,2 +1,3 @@
 export * from './composer-context';
 export * from './theme-context';
+export * from './translation-context';

package/src/ai-components/contexts/theme-context.tsx

@@ -2,7 +2,7 @@ import React, { createContext, type PropsWithChildren, useContext, useMemo } fro
 
 import merge from 'lodash/merge';
 
-import { defaultTheme, type Theme } from '../theme';
+import { defaultTheme, PALETTE_COLORED_PARTS, type Theme } from '../theme';
 
 export type DeepPartial<T> = T extends (...args: never[]) => unknown
   ? T
@@ -26,15 +26,30 @@ export type ThemeContextValue = {
 
 export const mergeThemes = (params: MergedThemesParams) => {
   const { style, theme } = params;
+  // Icons are components, which the JSON copy below would drop and a deep merge would take apart,
+  // so they are carried over as they are.
+  const { icons: themeIcons, ...themeRest } = theme ?? {};
+  const { icons: styleIcons, ...styleRest } = style ?? {};
   // TODO: Use structured-clone here or something similar.
   const finalTheme = (
-    !theme || Object.keys(theme).length === 0
+    !theme || Object.keys(themeRest).length === 0
       ? JSON.parse(JSON.stringify(defaultTheme))
-      : JSON.parse(JSON.stringify(theme))
+      : JSON.parse(JSON.stringify(themeRest))
   ) as Theme;
 
   if (style) {
-    merge(finalTheme, style);
+    merge(finalTheme, styleRest);
+    // The parts drawn in a palette color follow it when the style changes it, as for dark mode.
+    const parts = styleRest as Record<string, Record<string, unknown> | undefined>;
+    const sections = finalTheme as unknown as Record<string, Record<string, unknown>>;
+    for (const [section, part, color] of PALETTE_COLORED_PARTS) {
+      if (styleRest.colors?.[color] === undefined || parts[section]?.[part] !== undefined) continue;
+      (sections[section] ??= {})[part] = finalTheme.colors[color];
+    }
+  }
+
+  if (themeIcons || styleIcons) {
+    finalTheme.icons = { ...themeIcons, ...styleIcons } as Theme['icons'];
   }
 
   return finalTheme;

package/src/ai-components/contexts/translation-context.tsx

@@ -0,0 +1,44 @@
+import { useContext, useMemo } from 'react';
+
+import { TranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { defaultTranslatorFunction } from '../../utils/i18n/utils';
+
+// The chat SDK's own provider, for apps that use the AI components without `<Chat>`.
+export {
+  TranslationProvider,
+  type TranslationContextValue,
+} from '../../contexts/translationContext/TranslationContext';
+
+/**
+ * Translates one of the AI components' strings. The key is the English string itself, with
+ * `{{ name }}` placeholders filled from `options`, as in the chat SDK's i18n files.
+ */
+export type AITranslate = (key: string, options?: Record<string, unknown>) => string;
+
+const PLACEHOLDER = /{{\s*([\w.]+)\s*}}/g;
+
+/** Fills `{{ name }}` placeholders in `text` from `options`, leaving unknown ones as they are. */
+export const interpolateAIString = (text: string, options?: Record<string, unknown>) =>
+  options
+    ? text.replace(PLACEHOLDER, (placeholder, name: string) =>
+        options[name] === undefined || options[name] === null ? placeholder : String(options[name]),
+      )
+    : text;
+
+/** English: the key itself, with its placeholders filled. */
+export const defaultAITranslate: AITranslate = (key, options) => interpolateAIString(key, options);
+
+/**
+ * The chat SDK's translator, so the AI components follow the chat's language inside `<Chat>`. With
+ * no translator set up (no `<Chat>`, or before it has one) they are in English.
+ */
+export const useAITranslation = () => {
+  const { t, userLanguage } = useContext(TranslationContext);
+  return useMemo(
+    () => ({
+      t: t === defaultTranslatorFunction ? defaultAITranslate : (t as AITranslate),
+      userLanguage: userLanguage ?? 'en',
+    }),
+    [t, userLanguage],
+  );
+};