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

package/src/a2ui/A2UISurface.tsx

@@ -6,6 +6,7 @@ import React, {
   useContext,
   useLayoutEffect,
   useMemo,
+  useState,
   useSyncExternalStore,
 } from 'react';
 import { type AccessibilityProps, View as RNView, type ViewProps } from 'react-native';
@@ -147,7 +148,8 @@ const PlacedComponent = ({
 /**
  * One part of a surface: its view from the basic catalog, or the app's component of its type,
  * coming in when it shows, with its weight and what the agent tells assistive technology. A part
- * whose type no catalog has, or that is still on its way, shows nothing.
+ * whose type no catalog has, or that is still on its way, shows nothing, and one that holds other
+ * parts, such as a card, shows once one of them does while the agent writes it.
  */
 // The path of the data model a TextField writes what the person types to, when it is obscured,
 // such as a password, which must never reach the agent.
@@ -161,6 +163,18 @@ const secretPathOf = (node: ComponentNode, resolved: Record<string, unknown>) =>
     : undefined;
 };
 
+// Tells the part around a part that it shows.
+const A2UIPartShowsContext = createContext<(() => void) | undefined>(undefined);
+
+// Whether a part's props hold other parts, as a card's child or a column's children do.
+const holdsParts = (value: unknown): boolean =>
+  isComponentNode(value) ||
+  (Array.isArray(value)
+    ? value.some(holdsParts)
+    : isPlainObject(value) && Object.values(value).some(holdsParts));
+
+const hiddenStyle = { display: 'none' } as const;
+
 const A2UINode = memo(({ node }: { node: ComponentNode }) => {
   const engine = useContext(A2UIEngineContext);
   const axis = useContext(A2UIAxisContext);
@@ -172,11 +186,26 @@ const A2UINode = memo(({ node }: { node: ComponentNode }) => {
   useLayoutEffect(() => {
     if (secretPath && surface) keepSecretPath(surface, secretPath);
   }, [secretPath, surface]);
-  const comesIn = useAIUIComesIn();
-  if (!engine || node.isPlaceholder || node.state !== 'resolved') return null;
-  const View = engine.components[node.type];
-  const isApp = !View && !!engine.appComponent(node.type);
-  if (!View && !isApp) return null;
+  const View = engine?.components[node.type];
+  const isApp = !View && !!engine?.appComponent(node.type);
+  const isReady = !!engine && !node.isPlaceholder && node.state === 'resolved' && (!!View || isApp);
+  const holds = useMemo(() => holdsParts(props), [props]);
+  const [hasShownPart, setHasShownPart] = useState(false);
+  const isWritten = !useContext(A2UIReplyContext)?.isStreaming;
+  const shows = isReady && (!holds || hasShownPart || isWritten);
+  const partShows = useContext(A2UIPartShowsContext);
+  useLayoutEffect(() => {
+    if (shows) partShows?.();
+  }, [partShows, shows]);
+  const onPartShown = useCallback(() => setHasShownPart(true), []);
+  const comesIn = useAIUIComesIn(shows);
+  if (!isReady) return null;
+  const content = (
+    <A2UIPartShowsContext.Provider value={onPartShown}>
+      {View ? <View node={node} props={props} /> : <PlacedComponent node={node} props={props} />}
+    </A2UIPartShowsContext.Provider>
+  );
+  if (!shows) return <RNView style={hiddenStyle}>{content}</RNView>;
   // A weighted part shares the room its row leaves, as flex-grow from nothing does.
   const weight = typeof props.weight === 'number' && axis === 'row' ? props.weight : undefined;
   const Part = comesIn ? EnteringPart : ShownPart;
@@ -186,7 +215,7 @@ const A2UINode = memo(({ node }: { node: ComponentNode }) => {
       style={weight !== undefined ? { flexBasis: 0, flexGrow: weight } : undefined}
       testID={`a2ui-${node.componentId}`}
     >
-      {View ? <View node={node} props={props} /> : <PlacedComponent node={node} props={props} />}
+      {content}
     </Part>
   );
 });

package/src/a2ui/__tests__/A2UIRenderer.test.tsx

@@ -427,6 +427,51 @@ describe('a reply written in A2UI', () => {
     await waitFor(() => expect(screen.getByTestId('trip-map')).toBeTruthy());
   });
 
+  it('holds back a card until something in it shows, while the agent writes it', async () => {
+    const { ui } = setup();
+    const view = (lines: string[], status = 'streaming') => (
+      <StreamTheme>
+        <AIUIView document={documentOf(lines, status)} host={ui} messageId='a1' />
+      </StreamTheme>
+    );
+    const written = [
+      { children: ['title', 'card'], component: 'Column', id: 'root' },
+      { component: 'Text', id: 'title', text: 'Fit check' },
+      { child: 'list', component: 'Card', id: 'card' },
+      { children: ['tag'], component: 'Column', id: 'list' },
+    ];
+    const { rerender } = render(view(surfaceOf(written)));
+    await waitFor(() => expect(screen.getByTestId('a2ui-title')).toBeTruthy());
+    expect(screen.queryByTestId('a2ui-card')).toBeNull();
+    expect(screen.queryByTestId('a2ui-list')).toBeNull();
+
+    rerender(
+      view([
+        ...surfaceOf(written),
+        line({
+          updateComponents: {
+            components: [{ component: 'Text', id: 'tag', text: 'Name tag' }],
+            surfaceId: 's',
+          },
+        }),
+      ]),
+    );
+    await waitFor(() => expect(screen.getByTestId('a2ui-card')).toBeTruthy());
+    expect(screen.getByText('Name tag')).toBeTruthy();
+  });
+
+  it('shows a card that holds nothing yet once the agent has written the reply', async () => {
+    const { ui } = setup();
+    await renderReply(
+      ui,
+      surfaceOf([
+        { child: 'list', component: 'Card', id: 'root' },
+        { children: ['tag'], component: 'Column', id: 'list' },
+      ]),
+    );
+    expect(screen.getByTestId('a2ui-root')).toBeTruthy();
+  });
+
   it('shows a placeholder while the first surface is being written', async () => {
     const { ui } = setup();
     await renderReply(ui, ['{"version":"1.0","createSur'], 'streaming');

package/src/ai-components/README.md

@@ -36,6 +36,14 @@ yarn add victory-native @shopify/react-native-skia
 
 `react-native-reanimated`, `react-native-gesture-handler` and `react-native-svg` are already required by the chat SDK.
 
+`AIConversation` comes from its own entry point, `stream-chat-react-native/ai-components/conversation` (or `stream-chat-expo/ai-components/conversation`), and needs [`react-native-keyboard-controller`](https://kirillzyusko.github.io/react-native-keyboard-controller/) with its `KeyboardProvider` above it:
+
+```bash
+yarn add react-native-keyboard-controller
+```
+
+The rest of the AI components work without it. With it installed and a `KeyboardProvider` above them, `ComposerView` rides the keyboard up; without it, the composer doesn't move with the keyboard.
+
 The `zod` dependency ships `export * as` syntax, which the React Native Babel preset does not transform, so add the `export-namespace-from` plugin to your `babel.config.js`:
 
 ```bash
@@ -299,7 +307,8 @@ An agent can answer with UI instead of text: a form, a list of options, a card w
 
 ```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';
+import { AIUIHost, aiUIActionJSON } from 'stream-chat-react-native/ai-components';
+import { AIConversation } from 'stream-chat-react-native/ai-components/conversation';
 
 const Conversation = ({ messages, session }) => {
   // One host per conversation, kept for as long as it shows, so what a reply's UI holds (a

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

@@ -238,6 +238,26 @@ describe('ComposerView trailing', () => {
   });
 });
 
+describe('ComposerView SpeechToTextButton', () => {
+  const Dictate = () => <Text>dictate</Text>;
+
+  it('shows the one it is given while the message box is empty, and the send button after', () => {
+    renderComposer({ SpeechToTextButton: Dictate });
+    expect(screen.getByText('dictate')).toBeTruthy();
+
+    fireEvent.changeText(screen.getByPlaceholderText('Ask anything'), 'Hello');
+    expect(screen.queryByText('dictate')).toBeNull();
+    expect(screen.getByTestId('send-up')).toBeTruthy();
+  });
+
+  it('shows none with null', () => {
+    renderComposer({ SpeechToTextButton: null });
+    expect(screen.queryByText('dictate')).toBeNull();
+    expect(screen.queryByTestId('send-up')).toBeNull();
+    expect(screen.getByPlaceholderText('Ask anything')).toBeTruthy();
+  });
+});
+
 describe('AISuggestions', () => {
   it('hands the picked suggestion over, and shows nothing without any', () => {
     const onSelect = jest.fn();
@@ -325,7 +345,7 @@ describe('ComposerView with a conversation', () => {
 
     act(() => controller.edit(message));
 
-    expect(screen.getByText('Editing message')).toBeTruthy();
+    expect(screen.getByText('Editing')).toBeTruthy();
     expect(screen.getByPlaceholderText('Ask anything').props.value).toBe('Plan Lisbon');
 
     fireEvent.press(screen.getByRole('button', { name: 'Cancel editing' }));

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

@@ -1,17 +1,19 @@
 import React, { type ReactElement, useEffect } from 'react';
-import { Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
-import { AIPendingMessageTracker, turnsOf } from '../conversation/entries';
 import {
   AIConversation,
   type AIConversationAssistantMessageProps,
+  type AIConversationUserMessageProps,
+} from '../conversation';
+import { AIPendingMessageTracker, turnsOf } from '../conversation/entries';
+import {
   AIConversationController,
   type AIConversationControllerOptions,
   type AIConversationFeed,
   type AIConversationTransport,
-  type AIConversationUserMessageProps,
   type AIMessage,
   type AIToolApprover,
   createFromStreamMessage,
@@ -337,6 +339,44 @@ describe('AIConversation', () => {
     expect(screen.getByText('actions')).toBeTruthy();
   });
 
+  it('keeps the latest reply at its tallest, and lets the person’s message shrink', async () => {
+    const UserMessage = ({ text }: AIConversationUserMessageProps) => <Text>{text}</Text>;
+    const AssistantMessage = ({ text }: AIConversationAssistantMessageProps) => <Text>{text}</Text>;
+    await renderConversation(
+      <AIConversation
+        AssistantMessage={AssistantMessage}
+        messages={[user('u1', 'Hi'), reply('a1', 'Hello')]}
+        ReplyActions={null}
+        UserMessage={UserMessage}
+      />,
+    );
+    // The row is the view around the message with the list's side and top gaps.
+    const rowOf = (text: string) => {
+      let node = screen.getByText(text).parent;
+      while (node) {
+        const style = typeof node.type === 'string' ? StyleSheet.flatten(node.props.style) : null;
+        if (style?.paddingHorizontal !== undefined && style.paddingTop !== undefined) return node;
+        node = node.parent;
+      }
+      return null;
+    };
+    const minHeightOf = (text: string) =>
+      StyleSheet.flatten(rowOf(text)?.props.style)?.minHeight ?? 0;
+    const layOutRow = (text: string, height: number) =>
+      act(() => {
+        rowOf(text)?.props.onLayout?.(layoutOf(height));
+      });
+
+    layOutRow('Hello', 120);
+    layOutRow('Hello', 60);
+    expect(minHeightOf('Hello')).toBe(120);
+
+    layOutRow('Hi', 120);
+    layOutRow('Hi', 60);
+    expect(rowOf('Hi')?.props.onLayout).toBeUndefined();
+    expect(minHeightOf('Hi')).toBe(0);
+  });
+
   it('renders again only the messages that changed', async () => {
     const renders: string[] = [];
     const AssistantMessage = ({ message, text }: AIConversationAssistantMessageProps) => {
@@ -541,6 +581,27 @@ describe('fromStreamMessage', () => {
     expect(reasoningText).toHaveBeenCalledWith('m1', 'r1');
   });
 
+  it('leaves out the link previews Stream made from the text', () => {
+    const message = fromStreamMessage({
+      ai_generated: true,
+      attachments: [
+        {
+          image_url: 'https://cal.com/og/index.png',
+          og_scrape_url: 'Cal.com',
+          title: 'Cal.com | Scheduling Software for Online Bookings',
+          title_link: 'https://cal.com',
+          type: 'image',
+        },
+        { image_url: 'https://cdn.example.com/a.jpg', title: 'a.jpg', type: 'image' },
+      ],
+      id: 'm1',
+      text: 'Book it on Cal.com',
+    });
+    expect(message.attachments).toEqual([
+      { kind: 'image', mimeType: undefined, name: 'a.jpg', url: 'https://cdn.example.com/a.jpg' },
+    ]);
+  });
+
   it('adapts the person’s message', () => {
     expect(fromStreamMessage({ attachments: [], id: 'u1', text: 'Hi' })).toMatchObject({
       isGenerating: false,
@@ -613,6 +674,27 @@ describe('AIConversation with a controller', () => {
     controller.dispose();
   });
 
+  it('leaves the other messages alone while a reply is written', async () => {
+    let renders = 0;
+    const UserMessage = ({ text }: AIConversationUserMessageProps) => {
+      renders++;
+      return <Text>{text}</Text>;
+    };
+    const history = [user('u1', 'Hello'), reply('a1', 'Hi!'), user('u2', 'Plan my day')];
+    const { controller, update } = conversationOf(history);
+    await renderConversation(
+      <AIConversation conversation={controller} UserMessage={UserMessage} />,
+    );
+    await update([...history, reply('a2', 'Here', { isGenerating: true })]);
+    const before = renders;
+    for (const text of ['Here is', 'Here is your', 'Here is your plan.']) {
+      await update([...history, reply('a2', text, { isGenerating: true })]);
+    }
+    expect(screen.getByText('Here is your plan.')).toBeTruthy();
+    expect(renders).toBe(before);
+    controller.dispose();
+  });
+
   it('shows the agent thinking while a reply is written again', async () => {
     const { controller } = conversationOf([user('u1', 'Hello'), reply('a1', 'Hi!')]);
     await renderConversation(<AIConversation conversation={controller} />);

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

@@ -1,5 +1,5 @@
 import type { AIConversationRequest, AIMessage } from '..';
-import { AIConversationExchange } from '../conversation/controller/AIConversationExchange';
+import { AIConversationExchange } from '../conversation-state/controller/AIConversationExchange';
 
 const user = (id: string, text = 'Plan a weekend in Lisbon'): AIMessage => ({
   id,

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

@@ -1,11 +1,11 @@
 import { renderHook } from '@testing-library/react-native';
 
-import type { AIMessage, AIPendingMessage } from '../conversation/types';
 import {
   type ConversationRow,
   useConversationRows,
   type UseConversationRowsOptions,
 } from '../conversation/useConversationRows';
+import type { AIMessage, AIPendingMessage } from '../conversation-state/types';
 import type { AIMessagePartData } from '../message-parts/types';
 
 const user = (id: string, text: string): AIMessage => ({ id, role: 'user', text });

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

@@ -3,8 +3,8 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 
+import { AIConversation } from '../conversation';
 import {
-  AIConversation,
   AIConversationController,
   type AIMessage,
   AIUIComponentView,
@@ -264,6 +264,26 @@ describe('AIConversation with generated UI', () => {
     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');

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

@@ -18,6 +18,7 @@ import {
   StreamTheme,
 } from '../index';
 import { forgetCallStates } from '../message-parts/callStates';
+import { AIThinkingClock, AIThinkingTurnContext } from '../reasoning/thinkingClock';
 
 // Each test's questions start unanswered, though tests reuse calls.
 afterEach(forgetCallStates);
@@ -326,6 +327,47 @@ describe('AIMessageParts', () => {
     version: 1,
   });
 
+  // Whether the step a view is of comes in: an entrance on the way up to the list of steps.
+  const comesIn = (testID: string) => {
+    let node = screen.getByTestId(testID).parent;
+    while (node && node.props.testID !== 'ai-message-parts') {
+      if (node.props.entering) return true;
+      node = node.parent;
+    }
+    return false;
+  };
+  const call = (id: string): AIMessagePartData => ({
+    id,
+    kind: 'ai_tool_call',
+    payload: {},
+    toolCall: toolCall({ id }),
+    version: 1,
+  });
+
+  it('brings in the steps of a reply being written, and shows those of one written before', () => {
+    const { rerender } = renderWithTheme(
+      <AIMessageParts isGenerating messageId='m1' parts={[call('c1')]} />,
+    );
+    expect(comesIn('ai-tool-call')).toBe(true);
+
+    rerender(<AIMessageParts messageId='m1' parts={[call('c1')]} />);
+    expect(comesIn('ai-tool-call')).toBe(true);
+
+    renderWithTheme(<AIMessageParts messageId='m2' parts={[reasoning('r1', 'Done')]} />);
+    expect(comesIn('ai-reasoning')).toBe(false);
+  });
+
+  it('shows at once the step that carries on the agent’s thinking', () => {
+    const clock = new AIThinkingClock();
+    clock.update('t1', true, false, false);
+    renderWithTheme(
+      <AIThinkingTurnContext.Provider value={{ clock, firstStepId: 'r1', key: 't1' }}>
+        <AIMessageParts isGenerating messageId='m1' parts={[reasoning('r1', 'Hmm')]} />
+      </AIThinkingTurnContext.Provider>,
+    );
+    expect(comesIn('ai-reasoning')).toBe(false);
+  });
+
   it('updates its views for another message’s steps, each starting afresh', () => {
     const { rerender } = renderWithTheme(
       <AIMessageParts messageId='m1' parts={[reasoning('r1', 'First')]} />,

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Keyboard, Text } from 'react-native';
+
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+
+import { ComposerView, sheetStore, sheetStoreApi, StreamTheme } from '../index';
+import { dismissKeyboard, KeyboardStickyView, keyboardHeight } from '../internal/keyboard';
+
+jest.mock('react-native-keyboard-controller', () => {
+  throw new Error("Cannot find module 'react-native-keyboard-controller'");
+});
+
+const flushPromises = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+describe('without react-native-keyboard-controller', () => {
+  afterEach(() => {
+    act(() => {
+      sheetStoreApi.closeSheet();
+    });
+    jest.restoreAllMocks();
+  });
+
+  it('lays the sticky view out as a plain view', () => {
+    render(
+      <KeyboardStickyView offset={{ closed: 0, opened: 34 }} testID='sticky'>
+        <Text>inside</Text>
+      </KeyboardStickyView>,
+    );
+
+    const sticky = screen.getByTestId('sticky');
+    expect(sticky.type).toBe('View');
+    expect(sticky.props.offset).toBeUndefined();
+    expect(screen.getByText('inside')).toBeTruthy();
+    expect(keyboardHeight()).toBe(0);
+  });
+
+  it('closes the keyboard with React Native', async () => {
+    const dismiss = jest.spyOn(Keyboard, 'dismiss');
+
+    await expect(dismissKeyboard()).resolves.toBeUndefined();
+    expect(dismiss).toHaveBeenCalled();
+  });
+
+  it('renders the composer and opens its sheet', async () => {
+    const dismiss = jest.spyOn(Keyboard, 'dismiss');
+    render(
+      <StreamTheme>
+        <ComposerView onSendMessage={() => Promise.resolve()} />
+      </StreamTheme>,
+    );
+
+    await act(async () => {
+      fireEvent.press(screen.getByText('+'));
+      await flushPromises();
+    });
+
+    expect(dismiss).toHaveBeenCalled();
+    expect(sheetStore.getLatestValue().open).toBe(true);
+  });
+});

package/src/ai-components/conversation/AIConversation.tsx

@@ -12,18 +12,22 @@ import Animated, { Easing, FadeIn } from 'react-native-reanimated';
 
 import type { LegendListRenderItemProps } from '@legendapp/list/react-native';
 
-import type {
-  AIConversationController,
-  AIConversationControllerState,
-} from './controller/AIConversationController';
-import { editActionOf, replyActionsOf } from './controller/offers';
-import { useAIConversationState } from './controller/useAIConversationState';
 import type { AIConversationEntry } from './entries';
 import { AIChatList } from './list/AIChatList';
-import type { AIMessage, AIPendingMessage } from './types';
 import { type ConversationRow, type RowPosition, useConversationRows } from './useConversationRows';
 
 import { useTheme } from '../contexts';
+import type {
+  AIConversationController,
+  AIConversationControllerState,
+} from '../conversation-state/controller/AIConversationController';
+import {
+  editActionOf,
+  latestUserMessageIdOf,
+  replyActionsOf,
+} from '../conversation-state/controller/offers';
+import { useAIConversationState } from '../conversation-state/controller/useAIConversationState';
+import type { AIMessage, AIPendingMessage } from '../conversation-state/types';
 import type { AIUIHost } from '../generative-ui/AIUIHost';
 import { AIUIGenerated, useAIUIHostRefresh } from '../generative-ui/AIUIView';
 import { primitives } from '../internal/tokens';
@@ -103,8 +107,7 @@ export type AIConversationProps = {
    * How far above the bottom of the screen the composer sits, such as above a tab bar. The
    * keyboard comes up over the conversation, which makes room for it below the latest turn (the
    * room the pinned question leaves takes it first), and covers it only as far as it rises past
-   * this. Defaults to the bottom safe area. Needs a `KeyboardProvider` from
-   * react-native-keyboard-controller above it.
+   * this. Defaults to the bottom safe area.
    */
   keyboardOffset?: number;
   /**
@@ -182,6 +185,8 @@ const DefaultAssistantMessage = ({
 // shrinks (a sign-in going, reasoning folding, the thinking going) only a frame later, and in that
 // frame the question would be pulled down. Below a pinned turn there is room anyway, so it looks
 // the same, and the room stays the list's, which the keyboard takes before it lifts anything.
+// The person's own message is left free: something folding in it, such as a transcript, would
+// leave a gap above the reply.
 type TurnFloor = { heights: Map<string, number>; turnKey: string | undefined };
 
 type ConversationContextValue = {
@@ -224,6 +229,7 @@ type EntryViewProps = {
 const NO_MESSAGES: AIMessage[] = [];
 
 const REPLY_ACTIONS_IN = FadeIn.duration(200).easing(Easing.out(Easing.ease));
+const THINKING_IN = REPLY_ACTIONS_IN;
 
 const useReplyWriting = (messageId: string | undefined, isGenerating: boolean) => {
   const [writing, setWriting] = useState<string>();
@@ -295,14 +301,18 @@ const EntryView = ({
       />
       {showsUI ? (
         <AIUIGenerated
-          isStreaming={uiDocument.isStreaming}
+          isStreaming={uiDocument.isStreaming || wasWatched}
           messageId={message.id}
           onError={(error) => ui?.fail(message.id, error)}
         >
           {generated}
         </AIUIGenerated>
       ) : null}
-      {thinkingSince !== undefined ? <AIThinking since={thinkingSince} /> : null}
+      {thinkingSince !== undefined ? (
+        <Animated.View entering={THINKING_IN}>
+          <AIThinking since={thinkingSince} />
+        </Animated.View>
+      ) : null}
       {ReplyActions && !isGenerating && !isWriting && hasAnswer && !isWritingUI ? (
         <Animated.View entering={wasWatched ? REPLY_ACTIONS_IN : undefined}>
           <ReplyActions isLatestReply={entry.isLatestReply} message={message} text={message.text} />
@@ -328,7 +338,10 @@ const Row = memo(({ row }: { row: ConversationRow }) => {
   // a worklet sent to the UI thread. The floor only rises, long before a row shrinks, so it can
   // follow a frame after the row grows.
   const turnFloor = context?.turnFloor;
-  const isHeld = !!turnFloor && row.turnKey === turnFloor.turnKey;
+  const isHeld =
+    !!turnFloor &&
+    row.turnKey === turnFloor.turnKey &&
+    !(row.kind === 'entry' && row.entry.isFromUser);
   const floor = isHeld ? (turnFloor?.heights.get(row.key) ?? 0) : 0;
   const [, setFloorRaised] = useState(0);
   const onLayout = isHeld
@@ -357,7 +370,11 @@ const Row = memo(({ row }: { row: ConversationRow }) => {
             />
           ) : (
             <>
-              {row.isThinking ? <AIThinking /> : null}
+              {row.isThinking ? (
+                <Animated.View entering={THINKING_IN}>
+                  <AIThinking />
+                </Animated.View>
+              ) : null}
               {row.footer}
             </>
           )}
@@ -423,6 +440,10 @@ const DefaultConversationReplyActions = ({
  * - A button scrolls back to the latest message when the end is out of view.
  * - A message the person sent shows at once (`pendingMessage`) and the agent thinks under it
  *   (`AIThinking`) until its reply shows something.
+ *
+ * Import it from `stream-chat-react-native/ai-components/conversation` (or
+ * `stream-chat-expo/ai-components/conversation`). It needs react-native-keyboard-controller, with
+ * its `KeyboardProvider` above it.
  */
 export const AIConversation = (props: AIConversationProps) =>
   props.conversation ? (
@@ -461,9 +482,10 @@ const ControlledConversation = ({
         replyActionsOf(conversation, { ratings, status }, message, isLatestReply),
     [conversation, ratings, status],
   );
+  const latestUserMessageId = latestUserMessageIdOf(messages);
   const editAction = useMemo<EditAction>(
-    () => (message) => editActionOf(conversation, { messages, status }, message),
-    [conversation, messages, status],
+    () => (message) => editActionOf(conversation, { latestUserMessageId, status }, message),
+    [conversation, latestUserMessageId, status],
   );
   const { ui } = props;
   // A reply that shows only its UI has started, which the controller can't tell without the

package/src/ai-components/conversation/entries.ts

@@ -1,4 +1,4 @@
-import type { AIMessage, AIPendingMessage } from './types';
+import type { AIMessage, AIPendingMessage } from '../conversation-state/types';
 
 import type { AIUIDocument } from '../generative-ui/AIUIDocument';
 import type { AIMessageAttachmentData } from '../message/AIMessageAttachment';

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

@@ -1,5 +1,2 @@
 export * from './AIConversation';
-export * from './controller';
-export * from './fromStreamMessage';
-export * from './types';
 export type { AIConversationCanShowUI, AIConversationEntry, AIConversationTurn } from './entries';

package/src/ai-components/conversation/list/useKeyboardOverlap.ts

@@ -1,7 +1,8 @@
 import { useRef } from 'react';
-import { KeyboardController, useKeyboardHandler } from 'react-native-keyboard-controller';
 import { runOnJS, type SharedValue, useSharedValue } from 'react-native-reanimated';
 
+import { keyboardHeight, useKeyboardHandler } from '../../internal/keyboard';
+
 export type KeyboardFrame = { height: number; progress: number };
 
 /**
@@ -19,7 +20,7 @@ export const keyboardOverlapOf = (keyboard: KeyboardFrame, offset: number) => {
  * once it has finished moving.
  */
 export const useKeyboardFrame = (onSettled?: () => void): SharedValue<KeyboardFrame> => {
-  const initial = KeyboardController.state()?.height ?? 0;
+  const initial = keyboardHeight();
   const keyboard = useSharedValue<KeyboardFrame>({
     height: initial,
     progress: initial > 0 ? 1 : 0,

package/src/ai-components/conversation/useConversationRows.ts

@@ -8,7 +8,8 @@ import {
   hasFinishedSteps,
   turnsOf,
 } from './entries';
-import type { AIMessage, AIPendingMessage } from './types';
+
+import type { AIMessage, AIPendingMessage } from '../conversation-state/types';
 
 import type { AIMessageAttachmentData } from '../message/AIMessageAttachment';
 import { AIThinkingClock } from '../reasoning/thinkingClock';