stream-chat-react-native-core 9.12.1 → 9.14.0

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

@@ -0,0 +1,606 @@
+import React, { type ReactElement } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import { AIConversation } from '../conversation';
+import {
+  AIConversationController,
+  type AIMessage,
+  AIUIComponentView,
+  AIUIHost,
+  type AIUIRenderer,
+  AIUIView,
+  defineAIUIComponent,
+  fromStreamMessage,
+  parseAIUIComponentDefinition,
+  StreamTheme,
+} from '../index';
+import { forgetCallStates } from '../message-parts/callStates';
+
+// Each test's questions start unanswered, though tests reuse calls.
+afterEach(forgetCallStates);
+
+jest.mock('../services/clipboard-service', () => ({ setClipboardString: jest.fn() }));
+
+const user = (id: string, text: string): AIMessage => ({ id, role: 'user', text });
+const reply = (
+  id: string,
+  text: string,
+  ui?: Record<string, unknown>,
+  extra: Record<string, unknown> = {},
+): AIMessage =>
+  fromStreamMessage({
+    ai_generated: true,
+    ai_ui: ui,
+    attachments: [],
+    id,
+    text,
+    ...extra,
+  });
+
+// Shows a document's text as a card, or nothing for the content `nothing`.
+const cardRenderer: AIUIRenderer = {
+  createEngine: () => ({
+    view: (document) =>
+      document.content === 'nothing' ? null : <Text testID='card'>{String(document.content)}</Text>,
+  }),
+  format: 'a2ui',
+  supports: (version) => version === undefined || version === '1.0',
+};
+
+const makeHost = () => new AIUIHost({ renderers: [cardRenderer], send: jest.fn() });
+
+const layoutOf = (height: number) => ({
+  nativeEvent: { layout: { height, width: 400, x: 0, y: 0 } },
+});
+
+const settle = () => act(() => new Promise<void>((resolve) => setTimeout(resolve, 20)));
+
+// The list renders its rows once it knows its size, and each one once it is measured.
+const layOut = async () => {
+  const list = screen.queryByTestId('ai-conversation-list');
+  if (!list) return;
+  act(() => {
+    fireEvent(list, 'layout', layoutOf(800));
+  });
+  for (let pass = 0; pass < 10; pass++) {
+    const measured = screen.UNSAFE_root.findAll(
+      (node) => typeof node.type === 'string' && !!node.props.onLayout && node !== list,
+    );
+    act(() => {
+      for (const node of measured) node.props.onLayout(layoutOf(60));
+    });
+    await settle();
+    const waiting = screen.UNSAFE_root.findAll(
+      (node) => typeof node.type === 'string' && node.props.pointerEvents === 'none',
+    );
+    if (waiting.length === 0) return;
+  }
+};
+
+const renderConversation = async (ui: ReactElement) => {
+  const result = render(<StreamTheme>{ui}</StreamTheme>);
+  await layOut();
+  return {
+    ...result,
+    rerender: async (next: ReactElement) => {
+      result.rerender(<StreamTheme>{next}</StreamTheme>);
+      await layOut();
+    },
+  };
+};
+
+// The opacity of the generated UI's stage around `text`.
+const stageOpacityOf = (text: string) => {
+  let node = screen.getByText(text).parent;
+  while (node) {
+    const style = StyleSheet.flatten(node.props.style);
+    if (style && style.transformOrigin === 'top') return style.opacity ?? 1;
+    node = node.parent;
+  }
+  return undefined;
+};
+
+describe('AIConversation with generated UI', () => {
+  it('shows a reply’s UI in place of its text', async () => {
+    await renderConversation(
+      <AIConversation
+        messages={[
+          user('u1', 'Plan a weekend in Ohrid'),
+          reply('a1', "Here's a weekend in Ohrid.", { content: 'Ohrid plan', format: 'a2ui' }),
+        ]}
+        ui={makeHost()}
+      />,
+    );
+    expect(screen.getByTestId('card')).toHaveTextContent('Ohrid plan');
+    expect(screen.queryByText("Here's a weekend in Ohrid.")).toBeNull();
+  });
+
+  it('shows the text of a reply whose UI no renderer shows', async () => {
+    await renderConversation(
+      <AIConversation
+        messages={[
+          user('u1', 'Plan'),
+          reply('a1', 'In OpenUI', { content: 'root = Card()', format: 'openui' }),
+          user('u2', 'Again'),
+          reply('a2', 'A newer A2UI', { content: 'x', format: 'a2ui', version: '2.0' }),
+          user('u3', 'Once more'),
+          reply('a3', 'A newer field', { content: 'x', format: 'a2ui', v: 2 }),
+          user('u4', 'And'),
+          reply('a4', 'Shows nothing of its own', { content: 'nothing', format: 'a2ui' }),
+        ]}
+        ui={makeHost()}
+      />,
+    );
+    for (const text of ['In OpenUI', 'A newer A2UI', 'A newer field', 'Shows nothing of its own']) {
+      expect(screen.getByText(text)).toBeTruthy();
+    }
+    expect(screen.queryByTestId('card')).toBeNull();
+  });
+
+  it('shows the text without a host', async () => {
+    await renderConversation(
+      <AIConversation
+        messages={[
+          user('u1', 'Plan'),
+          reply('a1', 'The words', { content: 'Ohrid plan', format: 'a2ui' }),
+        ]}
+      />,
+    );
+    expect(screen.getByText('The words')).toBeTruthy();
+  });
+
+  it('stops thinking once a reply has UI to show, and keeps thinking while it has none', async () => {
+    const ui = makeHost();
+    const question = user('u1', 'Plan');
+    const { rerender } = await renderConversation(
+      <AIConversation
+        messages={[
+          question,
+          reply(
+            'a1',
+            '',
+            { content: 'x', format: 'openui', status: 'streaming' },
+            { generating: true },
+          ),
+        ]}
+        ui={ui}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Thinking...' })).toBeTruthy();
+
+    await rerender(
+      <AIConversation
+        messages={[
+          question,
+          reply(
+            'a1',
+            '',
+            { content: 'Ohrid', format: 'a2ui', status: 'streaming' },
+            { generating: true },
+          ),
+        ]}
+        ui={ui}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: 'Thinking...' })).toBeNull();
+    expect(screen.getByTestId('card')).toHaveTextContent('Ohrid');
+  });
+
+  it('has the reply’s actions under a finished UI-only reply, not while its UI is written', async () => {
+    const ui = makeHost();
+    const question = user('u1', 'Plan');
+    const { rerender } = await renderConversation(
+      <AIConversation
+        messages={[
+          question,
+          reply('a1', '', { content: 'Ohrid', format: 'a2ui', status: 'streaming' }),
+        ]}
+        ui={ui}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: /copy/i })).toBeNull();
+
+    await rerender(
+      <AIConversation
+        messages={[
+          question,
+          reply('a1', '', { content: 'Ohrid', format: 'a2ui', status: 'complete' }),
+        ]}
+        ui={ui}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /copy/i })).toBeTruthy();
+  });
+
+  it('keeps the UI views of rows it reuses for other replies', async () => {
+    const ui = makeHost();
+    const history = Array.from({ length: 40 }, (_, turn) => [
+      user(`u${turn}`, `Question ${turn}`),
+      reply(`a${turn}`, '', { content: `Card ${turn}`, format: 'a2ui' }),
+    ]).flat();
+    await renderConversation(
+      <AIConversation
+        messages={[...history, user('ul', 'Latest'), reply('al', 'Latest.')]}
+        ui={ui}
+      />,
+    );
+    const cards = screen.getAllByTestId('card');
+    expect(screen.queryByText('Card 0')).toBeNull();
+
+    // Scrolled to the start, the rows at the end show the oldest replies.
+    act(() => {
+      fireEvent.scroll(screen.getByTestId('ai-conversation-list'), {
+        nativeEvent: {
+          contentInset: { bottom: 0, left: 0, right: 0, top: 0 },
+          contentOffset: { x: 0, y: 0 },
+          contentSize: { height: 5000, width: 400 },
+          layoutMeasurement: { height: 800, width: 400 },
+        },
+      });
+    });
+    await layOut();
+    expect(screen.getByText('Card 0')).toBeTruthy();
+    expect(screen.queryByText('Card 39')).toBeNull();
+    const shown = screen.getAllByTestId('card');
+    expect(cards.filter((card) => !shown.includes(card))).toEqual([]);
+  }, 30000);
+
+  // The Reanimated mock doesn't run an animation, so only where each one starts shows.
+  it('shows a UI from history at once, and brings one being written in', async () => {
+    await renderConversation(
+      <AIConversation
+        messages={[
+          user('u1', 'Earlier'),
+          reply('a1', '', { content: 'From history', format: 'a2ui' }),
+          user('u2', 'Plan'),
+          reply('a2', '', { content: 'Being written', format: 'a2ui', status: 'streaming' }),
+        ]}
+        ui={makeHost()}
+      />,
+    );
+    expect(stageOpacityOf('From history')).toBe(1);
+    expect(stageOpacityOf('Being written')).toBe(0);
+  });
+
+  it('brings in a UI that arrives whole once a reply seen being written finishes', async () => {
+    const ui = makeHost();
+    const { rerender } = await renderConversation(
+      <AIConversation
+        messages={[user('u1', 'Plan'), reply('a1', 'Planning', undefined, { generating: true })]}
+        ui={ui}
+      />,
+    );
+    await rerender(
+      <AIConversation
+        messages={[
+          user('u1', 'Plan'),
+          reply('a1', '', { content: 'Arrived whole', format: 'a2ui' }),
+        ]}
+        ui={ui}
+      />,
+    );
+    expect(stageOpacityOf('Arrived whole')).toBe(0);
+  });
+
+  it('hands the replies’ documents to the host as they change', async () => {
+    const ui = makeHost();
+    const receive = jest.spyOn(ui, 'receive');
+    const messages = [user('u1', 'Plan'), reply('a1', '', { content: 'Ohrid', format: 'a2ui' })];
+    await renderConversation(<AIConversation messages={messages} ui={ui} />);
+    expect(receive).toHaveBeenCalledWith(messages);
+  });
+
+  it('shows a reply’s text when its UI throws, and keeps the rest of the conversation', async () => {
+    const Throws = () => {
+      throw new Error('The map had no places');
+    };
+    const throwing: AIUIRenderer = {
+      createEngine: () => ({
+        view: (document) =>
+          document.content === 'boom' ? (
+            <Throws />
+          ) : (
+            <Text testID='card'>{String(document.content)}</Text>
+          ),
+      }),
+      format: 'a2ui',
+    };
+    const onRenderError = jest.fn();
+    const ui = new AIUIHost({ onRenderError, renderers: [throwing], send: jest.fn() });
+    // React reports what a boundary caught.
+    const logged = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    await renderConversation(
+      <AIConversation
+        messages={[
+          user('u1', 'Plan'),
+          reply('a1', 'A weekend by the lake', { content: 'boom', format: 'a2ui' }),
+          user('u2', 'Again'),
+          reply('a2', 'Another', { content: 'Ohrid plan', format: 'a2ui' }),
+        ]}
+        ui={ui}
+      />,
+    );
+    await settle();
+    expect(screen.getByText('A weekend by the lake')).toBeTruthy();
+    expect(screen.getByTestId('card')).toHaveTextContent('Ohrid plan');
+    expect(onRenderError).toHaveBeenCalledTimes(1);
+    expect(onRenderError).toHaveBeenCalledWith(expect.any(Error), 'a1');
+    logged.mockRestore();
+  });
+
+  it('tries a reply’s UI that failed while it was written again once it is written', async () => {
+    const Throws = () => {
+      throw new Error('Half a map');
+    };
+    const throwing: AIUIRenderer = {
+      createEngine: () => ({
+        view: (document) =>
+          document.isStreaming ? <Throws /> : <Text testID='card'>{String(document.content)}</Text>,
+      }),
+      format: 'a2ui',
+    };
+    const onRenderError = jest.fn();
+    const ui = new AIUIHost({ onRenderError, renderers: [throwing], send: jest.fn() });
+    const logged = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    const { rerender } = await renderConversation(
+      <AIConversation
+        messages={[
+          user('u1', 'Plan'),
+          reply('a1', 'A weekend by the lake', {
+            content: 'Ohrid',
+            format: 'a2ui',
+            status: 'streaming',
+          }),
+        ]}
+        ui={ui}
+      />,
+    );
+    await settle();
+    expect(screen.getByText('A weekend by the lake')).toBeTruthy();
+    await rerender(
+      <AIConversation
+        messages={[
+          user('u1', 'Plan'),
+          reply('a1', 'A weekend by the lake', { content: 'Ohrid plan', format: 'a2ui' }),
+        ]}
+        ui={ui}
+      />,
+    );
+    await settle();
+    expect(screen.getByTestId('card')).toHaveTextContent('Ohrid plan');
+    expect(onRenderError).toHaveBeenCalledTimes(1);
+    logged.mockRestore();
+  });
+
+  it('leaves out only an app’s component that throws, and says so once the reply is written', async () => {
+    const definition = parseAIUIComponentDefinition({
+      description: 'A map.',
+      name: 'trip_map',
+      parameters: { properties: { title: { type: 'string' } }, required: ['title'] },
+    });
+    if (!definition) throw new Error('no definition');
+    const tripMap = defineAIUIComponent<{ title: string }>(definition, ({ args }) => {
+      if (args.title === 'nowhere') throw new Error('No places');
+      return <Text testID='map'>{args.title}</Text>;
+    });
+    const withMap: AIUIRenderer = {
+      createEngine: (host) => ({
+        view: (document, messageId) => (
+          <View>
+            <Text testID='card'>Plan</Text>
+            <AIUIComponentView
+              args={{ title: String(document.content) }}
+              component={tripMap}
+              context={{ emit: jest.fn(), host, isStreaming: document.isStreaming, messageId }}
+            />
+          </View>
+        ),
+      }),
+      format: 'a2ui',
+    };
+    const onRenderError = jest.fn();
+    const ui = new AIUIHost({ onRenderError, renderers: [withMap], send: jest.fn() });
+    const logged = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    const messages = (content: string, status: string) => [
+      user('u1', 'Plan'),
+      reply('a1', 'A weekend by the lake', { content, format: 'a2ui', status }),
+    ];
+    const { rerender } = await renderConversation(
+      <AIConversation messages={messages('nowhere', 'streaming')} ui={ui} />,
+    );
+    await settle();
+    expect(screen.getByTestId('card')).toBeTruthy();
+    expect(screen.queryByTestId('map')).toBeNull();
+    expect(onRenderError).not.toHaveBeenCalled();
+
+    await rerender(<AIConversation messages={messages('Ohrid', 'streaming')} ui={ui} />);
+    await settle();
+    expect(screen.getByTestId('map')).toHaveTextContent('Ohrid');
+
+    await rerender(<AIConversation messages={messages('nowhere', 'complete')} ui={ui} />);
+    await settle();
+    expect(screen.getByTestId('card')).toBeTruthy();
+    expect(screen.queryByText('A weekend by the lake')).toBeNull();
+    expect(onRenderError).toHaveBeenCalledTimes(1);
+    expect(onRenderError).toHaveBeenCalledWith(expect.any(Error), 'a1');
+    logged.mockRestore();
+  });
+
+  it('shows the rows again when the host says what a reply shows changed', async () => {
+    let shows = false;
+    const late: AIUIRenderer = {
+      createEngine: () => ({
+        view: (document) => (shows ? <Text testID='card'>{String(document.content)}</Text> : null),
+      }),
+      format: 'a2ui',
+    };
+    const ui = new AIUIHost({ renderers: [late], send: jest.fn() });
+    await renderConversation(
+      <AIConversation
+        messages={[
+          user('u1', 'Plan'),
+          reply('a1', 'The words', { content: 'Ohrid', format: 'a2ui' }),
+        ]}
+        ui={ui}
+      />,
+    );
+    expect(screen.getByText('The words')).toBeTruthy();
+    shows = true;
+    ui.refresh();
+    await settle();
+    expect(screen.getByTestId('card')).toHaveTextContent('Ohrid');
+    expect(screen.queryByText('The words')).toBeNull();
+  });
+});
+
+describe('AIConversation with a controller and generated UI', () => {
+  const controllerWith = (messages: AIMessage[]) =>
+    new AIConversationController({
+      transport: {
+        connect: (feed) => feed.updateMessages(messages),
+        send: () => Promise.resolve(),
+        stop: () => Promise.resolve(),
+      },
+    });
+
+  it('shows a reply that shows only its UI rather than the agent thinking', async () => {
+    const controller = controllerWith([
+      user('u1', 'Plan'),
+      reply(
+        'a1',
+        '',
+        { content: 'Ohrid', format: 'a2ui', status: 'streaming' },
+        { generating: true },
+      ),
+    ]);
+    expect(controller.state.getLatestValue().status).toBe('submitted');
+
+    await renderConversation(<AIConversation conversation={controller} ui={makeHost()} />);
+
+    expect(screen.queryByRole('button', { name: 'Thinking...' })).toBeNull();
+    expect(screen.getByTestId('card')).toHaveTextContent('Ohrid');
+    controller.dispose();
+  });
+
+  it('shows the agent thinking while nothing reads the reply’s UI', async () => {
+    const controller = controllerWith([
+      user('u1', 'Plan'),
+      reply(
+        'a1',
+        '',
+        { content: 'x', format: 'openui', status: 'streaming' },
+        { generating: true },
+      ),
+    ]);
+
+    await renderConversation(<AIConversation conversation={controller} ui={makeHost()} />);
+
+    expect(screen.getByRole('button', { name: 'Thinking...' })).toBeTruthy();
+    controller.dispose();
+  });
+});
+
+describe('AIUIView', () => {
+  it('shows one reply’s UI outside a conversation, or nothing when no renderer shows it', () => {
+    const ui = makeHost();
+    const { rerender } = render(
+      <StreamTheme>
+        <AIUIView
+          document={{ content: 'Alone', format: 'a2ui', isStreaming: false }}
+          host={ui}
+          messageId='a1'
+        />
+      </StreamTheme>,
+    );
+    expect(screen.getByTestId('card')).toHaveTextContent('Alone');
+    rerender(
+      <StreamTheme>
+        <AIUIView
+          document={{ content: 'x', format: 'openui', isStreaming: false }}
+          host={ui}
+          messageId='a1'
+        />
+      </StreamTheme>,
+    );
+    expect(screen.queryByTestId('card')).toBeNull();
+  });
+
+  it('shows another reply’s UI in the same views, as it would in its own', () => {
+    const ui = makeHost();
+    const view = (messageId: string, content: string, isStreaming: boolean) => (
+      <StreamTheme>
+        <AIUIView
+          document={{ content, format: 'a2ui', isStreaming }}
+          host={ui}
+          messageId={messageId}
+        />
+      </StreamTheme>
+    );
+    const { rerender } = render(view('a1', 'Being written', true));
+    const card = screen.getByTestId('card');
+    expect(stageOpacityOf('Being written')).toBe(0);
+
+    rerender(view('a2', 'From history', false));
+    expect(screen.getByTestId('card')).toBe(card);
+    expect(stageOpacityOf('From history')).toBe(1);
+
+    rerender(view('a3', 'Also being written', true));
+    expect(screen.getByTestId('card')).toBe(card);
+    expect(stageOpacityOf('Also being written')).toBe(0);
+  });
+});
+
+describe('AIUIComponentView', () => {
+  const definition = parseAIUIComponentDefinition({
+    description: 'One place of a plan.',
+    events: [{ description: 'Asks about the place.', name: 'ask_about' }],
+    name: 'place_card',
+    parameters: {
+      properties: { place_note: { type: 'string' }, title: { type: 'string' } },
+      required: ['title'],
+      'x-order': ['title', 'place_note'],
+    },
+  });
+  if (!definition) throw new Error('no definition');
+  const placeCard = defineAIUIComponent<{ placeNote?: string; title: string }>(
+    definition,
+    ({ args, context }) => (
+      <Pressable
+        accessibilityRole='button'
+        onPress={() =>
+          context.emit('ask_about', `Tell me more about ${args.title}`, { title: args.title })
+        }
+      >
+        <Text>
+          {args.title}
+          {args.placeNote ? ` · ${args.placeNote}` : null}
+        </Text>
+      </Pressable>
+    ),
+  );
+
+  it('shows an app’s component once its arguments fit, and tells the agent what was done', () => {
+    const emit = jest.fn();
+    const context = { emit, host: makeHost(), isStreaming: true, messageId: 'a1' };
+    const { rerender } = render(
+      <AIUIComponentView
+        args={{ place_note: 'Best at' }}
+        component={placeCard}
+        context={context}
+      />,
+    );
+    expect(screen.queryByRole('button')).toBeNull();
+
+    rerender(
+      <AIUIComponentView
+        args={{ place_note: 'Best at sunset', title: 'Kaneo' }}
+        component={placeCard}
+        context={context}
+      />,
+    );
+    fireEvent.press(screen.getByRole('button', { name: 'Kaneo · Best at sunset' }));
+    expect(emit).toHaveBeenCalledWith('ask_about', 'Tell me more about Kaneo', { title: 'Kaneo' });
+  });
+});

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

@@ -0,0 +1,32 @@
+type Format = typeof import('../internal/format');
+
+const loadFormat = () => {
+  let format: Format | undefined;
+  jest.isolateModules(() => {
+    format = require('../internal/format');
+  });
+  return format as Format;
+};
+
+describe('formatCallDuration', () => {
+  afterEach(() => jest.restoreAllMocks());
+
+  it('writes narrow units', () => {
+    const { formatCallDuration, formatMinutesAndSeconds } = loadFormat();
+    expect(formatCallDuration(0.42)).toBe('0.4s');
+    expect(formatCallDuration(65)).toBe('1m 5s');
+    expect(formatMinutesAndSeconds(120)).toBe('2m');
+  });
+
+  it('writes the same where Intl ignores the narrow width, as Hermes on iOS does', () => {
+    jest
+      .spyOn(Intl, 'NumberFormat')
+      .mockImplementation(
+        () => ({ format: (value: number) => `${value} sec` }) as unknown as Intl.NumberFormat,
+      );
+    const { formatCallDuration, formatMinutesAndSeconds } = loadFormat();
+    expect(formatCallDuration(0.42)).toBe('0.4s');
+    expect(formatCallDuration(65)).toBe('1m 5s');
+    expect(formatMinutesAndSeconds(7)).toBe('7s');
+  });
+});