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

package/src/a2ui/useReplyState.ts

@@ -0,0 +1,26 @@
+import { type Dispatch, type SetStateAction, useCallback, useContext, useState } from 'react';
+
+import { A2UIReplyContext } from './A2UIContexts';
+
+const resolve = <T>(initial: T | (() => T)) =>
+  typeof initial === 'function' ? (initial as () => T)() : initial;
+
+/** `useState` for a part's own state, which starts again from `initial` for another reply. */
+export const useReplyState = <T>(initial: T | (() => T)): [T, Dispatch<SetStateAction<T>>] => {
+  const messageId = useContext(A2UIReplyContext)?.messageId;
+  const [held, setHeld] = useState(() => ({ messageId, value: resolve(initial) }));
+  let { value } = held;
+  if (held.messageId !== messageId) {
+    value = resolve(initial);
+    setHeld({ messageId, value });
+  }
+  const setValue = useCallback<Dispatch<SetStateAction<T>>>(
+    (next) =>
+      setHeld((current) => ({
+        ...current,
+        value: typeof next === 'function' ? (next as (value: T) => T)(current.value) : next,
+      })),
+    [],
+  );
+  return [value, setValue];
+};

package/src/ai-components/AITypingIndicatorView.tsx

@@ -1,31 +1,17 @@
 import { useMemo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 
 import { useTheme } from './contexts';
-
-import { NativeShimmerView } from '../components/UIComponents/NativeShimmerView';
+import { Shimmer } from './internal/Shimmer';
+import { primitives } from './internal/tokens';
 
 export const AITypingIndicatorView = ({ text }: { text: string }) => {
-  const {
-    theme: {
-      colors: { shimmer },
-    },
-  } = useTheme();
   const styles = useStyles();
 
-  // The native shimmer paints behind its children, so it is laid over the text instead: the
-  // highlight has to sweep across the glyphs, which a transparent background would otherwise hide.
   return (
-    <View style={styles.wrapper}>
+    <Shimmer style={styles.wrapper}>
       <Text style={styles.text}>{text}</Text>
-      <NativeShimmerView
-        baseColor={'transparent'}
-        duration={1200}
-        gradientColor={shimmer}
-        pointerEvents='none'
-        style={[StyleSheet.absoluteFill, styles.shimmer]}
-      />
-    </View>
+    </Shimmer>
   );
 };
 
@@ -35,10 +21,8 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        // The native highlight band is soft and wide, so it is kept fairly strong over the text.
-        shimmer: { opacity: 0.8 },
         text: {
-          fontSize: 16,
+          fontSize: primitives.typographyFontSizeMd,
           color: theme.colors.grey_dark,
         },
         wrapper: {

package/src/ai-components/README.md

@@ -6,6 +6,7 @@
 - `ComposerView` - a prompt composer with attachments and speech input
 - `SpeechToTextButton` - records voice input and streams the recognized transcript into your UI
 - `AITypingIndicatorView` - displays the state of the LLM (thinking, checking external sources, etc.)
+- Generated UI - draws the UI an agent writes for its replies, such as A2UI, with your own components
 
 The components live in their own entry point. Apps that never import `stream-chat-react-native/ai-components` do not bundle any of it, and apps that only use the AI components do not bundle the rest of the chat SDK.
 
@@ -246,7 +247,7 @@ The `SpeechToTextButton` is already integrated within the `ComposerView`, howeve
 
 ### `VoiceGlow` and `VoiceWave`
 
-Two visualizations of a voice agent, alike on iOS, Android, the web and React Native:
+Two visualizations of a voice agent:
 
 - `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.
@@ -288,9 +289,60 @@ The motion runs entirely on the UI thread with Reanimated and Skia, so the visua
 
 **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.
+**Accessibility.** Each is an image named "Voice agent" with its state as the value ("Ready", "Connecting", "Listening", "Thinking", "Speaking"). 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.
+**Rendering.** The glow's shader runs through Skia on every Android version, so there is no fallback rendering, and it does not switch to a cheaper look in battery saver. A visualization keeps animating while it is mounted, even when scrolled off screen; it pauses only while the app is in the background.
+
+### Generated UI
+
+An agent can answer with UI instead of text: a form, a list of options, a card with buttons. The backend splits the model's UI block out of the reply into the message's `ai_ui` field, and the app draws it with a renderer for the format the agent writes. Today that is [A2UI](https://a2ui.org) v1.0, from its own entry point, so apps that don't use it don't bundle it:
+
+```tsx
+import { createA2UIRenderer } from 'stream-chat-react-native/a2ui'; // or 'stream-chat-expo/a2ui'
+import { AIConversation, AIUIHost, aiUIActionJSON } from 'stream-chat-react-native/ai-components';
+
+const Conversation = ({ messages, session }) => {
+  // One host per conversation, kept for as long as it shows, so what a reply's UI holds (a
+  // half-filled form) survives scrolling it away and back.
+  const [ui] = useState(
+    () =>
+      new AIUIHost({
+        renderers: [createA2UIRenderer()],
+        // What the person did goes to the agent as their next message.
+        send: action => session.responses.create(action.label, { uiAction: aiUIActionJSON(action) }),
+      }),
+  );
+
+  return <AIConversation messages={messages} ui={ui} />;
+};
+```
+
+The label of the message an action sends is the text of the control the person tapped, never text the agent wrote. Values typed into obscured text fields never leave the device. A reply's UI shows a placeholder until its first surface arrives, and a finished reply whose UI draws nothing shows its text instead.
+
+`createA2UIRenderer` draws all 18 components of A2UI's basic catalog natively, and takes:
+
+| Name           | Description                                                                                                          |
+| -------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `components`   | Your own views for basic components, by type, such as `{ Card: MyCard }`. Each gets the node and its resolved props. |
+| `icons`        | Your own icons for the names `Icon` takes, over the Material icons drawn by default.                                 |
+| `removing`     | Basic components or functions to leave out, such as `['Video']`. The agent's instructions leave them out too.        |
+| `locale`       | The locale numbers and dates are formatted in. `en-US` by default.                                                   |
+| `mediaUrl`     | Decides what an `Image`, `Video` or `AudioPlayer` loads for a link. Public web links only by default.                |
+| `instructions` | What you tell the model before A2UI's own instructions, such as which answers to write as UI.                        |
+| `catalogId`    | The id of the catalog with your own components.                                                                      |
+| `onError`      | Called with what was wrong in a reply's A2UI. The rest of the reply still shows. Logged by default.                  |
+
+**Your own components.** Define a component with `defineAIUIComponent(definition, View)` and pass it to the host's `components`. The definition is portable JSON (name, description, parameters, events), so the same `UIComponents.json` can describe it to the agent and to your apps on other platforms. A component calls `context.emit(name, label, payload)` to send an action.
+
+**Tools.** The host's `tools` are functions of yours that a reply's UI can call, such as reading something on the device. They are the same `AIClientTool`s an `AIClientToolRunner` takes, so a tool is defined once. A tool runs by itself as a reply shows only when its definition says it is read-only (`annotations: { readOnlyHint: true }`); any other runs only from something the person did, such as a tap. Output that isn't JSON is refused, and what the person typed into a password field never reaches a tool.
+
+**Instructions for the model.** `await ui.capabilities()` returns what the backend needs to tell the model: each renderer's format and instructions, your components and your tools. To write them yourself, use `a2uiInstructions({ components, removing, tools, examples })`, which refuses examples that wouldn't render. `a2uiProblems(text)` checks a reply's A2UI the same way.
+
+**Links.** Only web and email links open by default, since the agent writes them. Pass the host an `open` function to allow others.
+
+**Theming.** The theme's `a2ui` key styles the basic components: `colors` (`accent`, `onAccent`, `text`, `secondaryText`, `surface`, `subtleSurface`, `border`, `error`) and one style per part (`surfaces`, `card`, `button`, `buttonText`, `input`, `label`, `chip`, `chipText`, `tab`, `tabText`, `divider`, `caption`, `image`).
+
+**Media.** `Image`, `Video` and `AudioPlayer` load only public web links by default, never addresses on the person's network such as `192.168.1.1` or `localhost`, since the agent writes the links. Pass `mediaUrl` to decide otherwise. `Video` and `AudioPlayer` play in place with the player you registered for the chat SDK's own video and voice messages. Without one they show a link that opens where the device plays it.
 
 ### Theming
 

package/src/ai-components/StreamingMessageView.tsx

@@ -17,12 +17,28 @@ export const useStreamingMessage = ({
   letterInterval = 0,
   renderingLetterCount = 2,
   text,
-}: UseStreamingMessageProps): { streamedMessageText: string } => {
+}: UseStreamingMessageProps): { isWriting: boolean; streamedMessageText: string } => {
   const [streamedMessageText, setStreamedMessageText] = useState<string>(text);
   const textCursor = useRef<number>(text.length);
+  // How much of the text is typed out, to say whether it still is.
+  const [typedLength, setTypedLength] = useState(text.length);
+
+  // Only text added to the end is typed out. Another text, such as another message's when a list
+  // reuses this view, shows at once, from this render rather than after the old text's.
+  const [lastText, setLastText] = useState(text);
+  if (text !== lastText) {
+    setLastText(text);
+    if (!text.startsWith(lastText)) {
+      setStreamedMessageText(text);
+      setTypedLength(text.length);
+    }
+  }
+  const typedToward = useRef(text);
 
   useEffect(() => {
     const textLength = text.length;
+    if (!text.startsWith(typedToward.current)) textCursor.current = textLength;
+    typedToward.current = text;
     const interval = setInterval(() => {
       if (!text || textCursor.current >= textLength) {
         clearInterval(interval);
@@ -33,6 +49,7 @@ export const useStreamingMessage = ({
       const codeBlockCounts = (newText.match(/```/g) || []).length;
       const shouldOptimisticallyCloseCodeBlock = codeBlockCounts > 0 && codeBlockCounts % 2 > 0;
       setStreamedMessageText(shouldOptimisticallyCloseCodeBlock ? newText + '```' : newText);
+      setTypedLength(textCursor.current);
     }, letterInterval);
 
     return () => {
@@ -40,7 +57,7 @@ export const useStreamingMessage = ({
     };
   }, [letterInterval, renderingLetterCount, text]);
 
-  return { streamedMessageText };
+  return { isWriting: typedLength < text.length, streamedMessageText };
 };
 
 export const StreamingMessageView = ({
@@ -49,6 +66,7 @@ export const StreamingMessageView = ({
   rules,
   onLink: onLinkParam,
   letterInterval,
+  onWritingChange,
   renderingLetterCount,
 }: {
   text: string;
@@ -56,15 +74,21 @@ export const StreamingMessageView = ({
   rules?: MarkdownRules;
   onLink?: (url: string) => void;
   letterInterval?: number;
+  /** Called when the text starts or stops being typed out, such as to show what follows it once it is. */
+  onWritingChange?: (isWriting: boolean) => void;
   renderingLetterCount?: number;
 }) => {
   const markdownText = useMemo(() => generateMarkdownText(text), [text]);
 
-  const { streamedMessageText } = useStreamingMessage({
+  const { isWriting, streamedMessageText } = useStreamingMessage({
     text: markdownText ?? '',
     letterInterval,
     renderingLetterCount,
   });
+  const reportWriting = useStableCallback((writing: boolean) => onWritingChange?.(writing));
+  useEffect(() => {
+    reportWriting(isWriting);
+  }, [isWriting, reportWriting]);
 
   const onLink = useStableCallback((url: string): void | Promise<void> =>
     onLinkParam

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

@@ -1,9 +1,13 @@
 import React from 'react';
-import { Image, Text } from 'react-native';
+import { Image, Pressable, Text } from 'react-native';
+import { KeyboardController } from 'react-native-keyboard-controller';
 
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
 import {
+  AIConversationController,
+  type AIConversationFeed,
+  AISuggestions,
   ComposerView,
   type ComposerViewProps,
   sheetStore,
@@ -73,7 +77,12 @@ describe('ai-components ComposerView', () => {
       mediaPickerService,
     });
 
-    fireEvent.press(screen.getByText('+'));
+    await act(async () => {
+      fireEvent.press(screen.getByText('+'));
+      await flushPromises();
+    });
+    // Once the keyboard has closed, which a sheet opening over it leaves to stray events.
+    expect(KeyboardController.dismiss).toHaveBeenCalled();
     expect(sheetStore.getLatestValue().open).toBe(true);
     expect(screen.getByText('Camera')).toBeTruthy();
     expect(screen.getByText('Custom option')).toBeTruthy();
@@ -110,4 +119,220 @@ describe('ai-components ComposerView', () => {
       screen.UNSAFE_queryAllByType(Text).some((t) => t.props.children === 'With an image'),
     ).toBe(false);
   });
+
+  it('sends the picked chat option, which stays picked until removed', async () => {
+    const think = {
+      description: 'More time to reason before answering',
+      id: 'think_harder',
+      shortTitle: 'Think',
+      title: 'Think harder',
+    };
+    const { onSendMessage } = renderComposer({ chatOptions: [think] });
+
+    await act(async () => {
+      fireEvent.press(screen.getByText('+'));
+      await flushPromises();
+    });
+    expect(screen.getByText('More time to reason before answering')).toBeTruthy();
+    expect(screen.getByRole('radio', { checked: false })).toBeTruthy();
+    await act(async () => {
+      fireEvent.press(screen.getByText('Think harder'));
+      await flushPromises();
+    });
+    expect(sheetStore.getLatestValue().open).toBe(false);
+    expect(screen.getByTestId('ai-selected-chat-option')).toBeTruthy();
+    expect(screen.getByText('Think')).toBeTruthy();
+
+    fireEvent.changeText(screen.getByPlaceholderText('Ask anything'), 'Why is the sky blue?');
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('send-up'));
+      await flushPromises();
+    });
+    expect(onSendMessage).toHaveBeenCalledWith(
+      expect.objectContaining({ chatOption: think, text: 'Why is the sky blue?' }),
+    );
+    expect(screen.getByText('Think')).toBeTruthy();
+
+    fireEvent.press(screen.getByLabelText('Remove option: Think'));
+    expect(screen.queryByTestId('ai-selected-chat-option')).toBeNull();
+
+    fireEvent.changeText(screen.getByPlaceholderText('Ask anything'), 'And now?');
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('send-up'));
+      await flushPromises();
+    });
+    expect(onSendMessage).toHaveBeenLastCalledWith(
+      expect.objectContaining({ chatOption: undefined, text: 'And now?' }),
+    );
+  });
+
+  it('removes the picked chat option when it is picked again', async () => {
+    renderComposer({ chatOptions: [{ id: 'search', title: 'Web search' }] });
+
+    act(() => {
+      sheetStoreApi.openSheet();
+    });
+    await act(async () => {
+      fireEvent.press(screen.getByText('Web search'));
+      await flushPromises();
+    });
+    // Without a short title, the chip shows the title.
+    expect(screen.getByLabelText('Remove option: Web search')).toBeTruthy();
+
+    act(() => {
+      sheetStoreApi.openSheet();
+    });
+    expect(screen.getByRole('radio', { checked: true })).toBeTruthy();
+    await act(async () => {
+      fireEvent.press(screen.getByRole('radio'));
+      await flushPromises();
+    });
+    expect(screen.queryByTestId('ai-selected-chat-option')).toBeNull();
+  });
+
+  it('shows a picked file that is not an image as a file, with a way to remove it', () => {
+    const mediaPickerService = new FakeMediaPickerService();
+    mediaPickerService.appendAssets([
+      { name: 'clip.mp4', size: 2048, type: 'video/mp4', uri: 'file:///clip.mp4' },
+    ]);
+    renderComposer({ mediaPickerService });
+
+    expect(screen.UNSAFE_queryAllByType(Image)).toHaveLength(0);
+    expect(screen.getByText('clip.mp4')).toBeTruthy();
+    expect(screen.getByText('MP4 · 2.00 kB')).toBeTruthy();
+
+    fireEvent.press(screen.getByLabelText('Remove attachment'));
+    expect(mediaPickerService.state.getLatestValue().assets).toEqual([]);
+  });
+});
+
+describe('ComposerView header', () => {
+  it('shows what it is given above the composer', () => {
+    render(
+      <StreamTheme>
+        <ComposerView
+          header={<Text>Starters</Text>}
+          onSendMessage={jest.fn(() => Promise.resolve())}
+        />
+      </StreamTheme>,
+    );
+    expect(screen.getByText('Starters')).toBeTruthy();
+  });
+});
+
+describe('ComposerView trailing', () => {
+  it('shows what it is given after the message box, and its presses reach it', () => {
+    const onTalk = jest.fn();
+    render(
+      <StreamTheme>
+        <ComposerView
+          onSendMessage={jest.fn(() => Promise.resolve())}
+          trailing={
+            <Pressable accessibilityLabel='Talk' accessibilityRole='button' onPress={onTalk} />
+          }
+        />
+      </StreamTheme>,
+    );
+    fireEvent.press(screen.getByRole('button', { name: 'Talk' }));
+    expect(onTalk).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('AISuggestions', () => {
+  it('hands the picked suggestion over, and shows nothing without any', () => {
+    const onSelect = jest.fn();
+    const { rerender } = render(
+      <StreamTheme>
+        <AISuggestions onSelect={onSelect} suggestions={['Plan a weekend in Lisbon', 'Cook']} />
+      </StreamTheme>,
+    );
+    fireEvent.press(screen.getByRole('button', { name: 'Plan a weekend in Lisbon' }));
+    expect(onSelect).toHaveBeenCalledWith('Plan a weekend in Lisbon');
+
+    rerender(
+      <StreamTheme>
+        <AISuggestions onSelect={onSelect} suggestions={[]} />
+      </StreamTheme>,
+    );
+    expect(screen.queryByTestId('ai-suggestions')).toBeNull();
+  });
+});
+
+describe('ComposerView with a conversation', () => {
+  const conversationOf = (messages: { id: string; role: string; text: string }[] = []) => {
+    const transport = {
+      connect: (feed: AIConversationFeed) => feed.updateMessages(messages),
+      send: jest.fn(() => Promise.resolve()),
+      stop: jest.fn(() => Promise.resolve()),
+    };
+    return { controller: new AIConversationController({ transport }), transport };
+  };
+
+  const renderWith = (controller: AIConversationController) =>
+    render(
+      <StreamTheme>
+        <ComposerView conversation={controller} />
+      </StreamTheme>,
+    );
+
+  it('sends to the conversation, and stops the agent while it answers', async () => {
+    const { controller, transport } = conversationOf([{ id: 'u1', role: 'user', text: 'Hi' }]);
+    renderWith(controller);
+
+    fireEvent.changeText(screen.getByPlaceholderText('Ask anything'), 'Plan a weekend in Lisbon');
+    await act(async () => {
+      fireEvent.press(screen.getByTestId('send-up'));
+      await flushPromises();
+    });
+
+    expect(transport.send).toHaveBeenCalledWith(
+      expect.objectContaining({ kind: 'message', text: 'Plan a weekend in Lisbon' }),
+    );
+    expect(controller.state.getLatestValue().status).toBe('submitted');
+
+    fireEvent.press(screen.getByTestId('stop-generating'));
+    await act(flushPromises);
+
+    expect(transport.stop).toHaveBeenCalledTimes(1);
+    expect(controller.state.getLatestValue().status).toBe('ready');
+    controller.dispose();
+  });
+
+  it('shows the draft of the conversation it is given', () => {
+    const first = conversationOf().controller;
+    const second = conversationOf().controller;
+    first.composer.partialNext({ text: 'Lisbon' });
+    second.composer.partialNext({ text: 'Porto' });
+    const { rerender } = renderWith(first);
+    expect(screen.getByPlaceholderText('Ask anything').props.value).toBe('Lisbon');
+
+    rerender(
+      <StreamTheme>
+        <ComposerView conversation={second} />
+      </StreamTheme>,
+    );
+
+    expect(screen.getByPlaceholderText('Ask anything').props.value).toBe('Porto');
+    first.dispose();
+    second.dispose();
+  });
+
+  it('says the person is editing a message, and cancels it', () => {
+    const message = { id: 'u1', role: 'user', text: 'Plan Lisbon' };
+    const { controller } = conversationOf([message, { id: 'a1', role: 'assistant', text: 'Done' }]);
+    renderWith(controller);
+    expect(screen.queryByTestId('ai-editing-message')).toBeNull();
+
+    act(() => controller.edit(message));
+
+    expect(screen.getByText('Editing message')).toBeTruthy();
+    expect(screen.getByPlaceholderText('Ask anything').props.value).toBe('Plan Lisbon');
+
+    fireEvent.press(screen.getByRole('button', { name: 'Cancel editing' }));
+
+    expect(screen.queryByTestId('ai-editing-message')).toBeNull();
+    expect(controller.editingMessage).toBeUndefined();
+    expect(screen.getByPlaceholderText('Ask anything').props.value).toBe('');
+    controller.dispose();
+  });
 });

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import { StyleSheet } from 'react-native';
 
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
 import { Markdown, mergeThemes, StreamTheme } from '../index';
+import { primitives } from '../internal/tokens';
 
 const mockSetString = jest.fn();
 jest.mock(
@@ -81,6 +83,17 @@ describe('ai-components Markdown', () => {
     expect(screen.getByText('json')).toBeTruthy();
   });
 
+  it('sizes text from the design tokens, leaving headings and inline code their own size', () => {
+    renderMarkdown('## Heading\n\nbody with `code`');
+
+    const fontSizeOf = (text: string) =>
+      StyleSheet.flatten(screen.getByText(text).props.style).fontSize;
+    expect(fontSizeOf('body with ')).toBe(primitives.typographyFontSizeMd);
+    // The size comes from the heading or inline code around the text.
+    expect(fontSizeOf('Heading')).toBeUndefined();
+    expect(fontSizeOf('code')).toBeUndefined();
+  });
+
   it('applies theme overrides', () => {
     const theme = mergeThemes({ style: { markdown: { text: { color: 'rgb(1, 2, 3)' } } } });
     render(

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

@@ -41,6 +41,53 @@ describe('ai-components streaming', () => {
       expect(result.current.streamedMessageText).toBe('Hello world');
     });
 
+    it('shows another text at once rather than typing it out', () => {
+      const { result, rerender } = renderHook(
+        ({ text }: { text: string }) =>
+          useStreamingMessage({ letterInterval: 10, renderingLetterCount: 2, text }),
+        { initialProps: { text: 'Hi' } },
+      );
+
+      // As when a list reuses the view for another, longer message.
+      rerender({ text: 'Goodbye, and thanks for all the fish' });
+      expect(result.current.streamedMessageText).toBe('Goodbye, and thanks for all the fish');
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+      expect(result.current.streamedMessageText).toBe('Goodbye, and thanks for all the fish');
+
+      // And one shorter than what was shown.
+      rerender({ text: 'Bye' });
+      expect(result.current.streamedMessageText).toBe('Bye');
+
+      // Text added to the end of it is still typed out.
+      rerender({ text: 'Bye now' });
+      act(() => {
+        jest.advanceTimersByTime(10);
+      });
+      expect(result.current.streamedMessageText).toBe('Bye n');
+    });
+
+    it('says whether text is still being typed out', () => {
+      const { result, rerender } = renderHook(
+        ({ text }: { text: string }) =>
+          useStreamingMessage({ letterInterval: 10, renderingLetterCount: 2, text }),
+        { initialProps: { text: 'Hello' } },
+      );
+      expect(result.current.isWriting).toBe(false);
+
+      rerender({ text: 'Hello world' });
+      expect(result.current.isWriting).toBe(true);
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+      expect(result.current.isWriting).toBe(false);
+
+      // Another text shows at once, so nothing is being typed.
+      rerender({ text: 'Bye' });
+      expect(result.current.isWriting).toBe(false);
+    });
+
     it('optimistically closes a code fence while it is being streamed', () => {
       const { result, rerender } = renderHook(
         ({ text }: { text: string }) =>
@@ -57,6 +104,28 @@ describe('ai-components streaming', () => {
   });
 
   describe('StreamingMessageView', () => {
+    it('reports when it starts and stops typing', () => {
+      const onWritingChange = jest.fn();
+      const { rerender } = render(
+        <StreamTheme>
+          <StreamingMessageView letterInterval={10} onWritingChange={onWritingChange} text='Hi' />
+        </StreamTheme>,
+      );
+      rerender(
+        <StreamTheme>
+          <StreamingMessageView
+            letterInterval={10}
+            onWritingChange={onWritingChange}
+            text='Hi there, friend'
+          />
+        </StreamTheme>,
+      );
+      act(() => {
+        jest.advanceTimersByTime(200);
+      });
+      expect(onWritingChange.mock.calls.map(([writing]) => writing)).toEqual([false, true, false]);
+    });
+
     it('renders markdown and handles links with the provided callback', () => {
       const onLink = jest.fn();
       render(