@assistant-ui/react-native 0.1.43 → 0.1.45

package/src/primitives/message/MessageContent.test.tsx

@@ -1,4 +1,4 @@
-import { act, type ReactElement } from "react";
+import { act, useState, type ReactElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MessageContent } from "./MessageContent";
@@ -9,6 +9,7 @@ const h = vi.hoisted(() => ({
   addToolResult: vi.fn(),
   resumeToolCall: vi.fn(),
   respondToToolApproval: vi.fn(),
+  unstable_recordInteraction: vi.fn(),
   state: {
     message: {
       content: [] as AnyPart[],
@@ -17,7 +18,10 @@ const h = vi.hoisted(() => ({
       },
     },
     tools: { toolUIs: {} as Record<string, unknown> },
-    dataRenderers: { renderers: {} as Record<string, unknown> },
+    dataRenderers: {
+      renderers: {} as Record<string, unknown>,
+      fallbacks: [] as unknown[],
+    },
   },
 }));
 
@@ -28,6 +32,8 @@ vi.mock("@assistant-ui/store", () => {
       resumeToolCall: (...args: unknown[]) => h.resumeToolCall(index, ...args),
       respondToToolApproval: (...args: unknown[]) =>
         h.respondToToolApproval(index, ...args),
+      unstable_recordInteraction: (...args: unknown[]) =>
+        h.unstable_recordInteraction(index, ...args),
     }),
   });
   const aui = { message };
@@ -47,9 +53,11 @@ describe("MessageContent", () => {
     h.addToolResult.mockReset();
     h.resumeToolCall.mockReset();
     h.respondToToolApproval.mockReset();
+    h.unstable_recordInteraction.mockReset();
     h.state.message.content = [];
     h.state.tools.toolUIs = {};
     h.state.dataRenderers.renderers = {};
+    h.state.dataRenderers.fallbacks = [];
 
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -71,6 +79,51 @@ describe("MessageContent", () => {
     });
   };
 
+  it("keeps a text seed while streaming and resets it for a replacement id", async () => {
+    const SeededText = ({ text }: { text: string }) => {
+      const [seed] = useState(text);
+      return <span>{`${seed}:${text}`}</span>;
+    };
+    const renderText: NonNullable<
+      Parameters<typeof MessageContent>[0]["renderText"]
+    > = ({ part }) => <SeededText text={part.text} />;
+
+    h.state.message.content = [{ type: "text", id: "p1", text: "old" }];
+    await mount({ renderText });
+    h.state.message.content = [
+      { type: "text", id: "p1", text: "old streamed" },
+    ];
+    await mount({ renderText });
+    expect(container.textContent).toBe("old:old streamed");
+
+    h.state.message.content = [{ type: "text", id: "p2", text: "new" }];
+    await mount({ renderText });
+    expect(container.textContent).toBe("new:new");
+  });
+
+  it("keeps each seed with its id when identified parts swap", async () => {
+    const SeededText = ({ text }: { text: string }) => {
+      const [seed] = useState(text);
+      return <span>{`${seed}:${text}`}</span>;
+    };
+    const renderText: NonNullable<
+      Parameters<typeof MessageContent>[0]["renderText"]
+    > = ({ part }) => <SeededText text={part.text} />;
+    h.state.message.content = [
+      { type: "text", id: "p1", text: "first" },
+      { type: "text", id: "p2", text: "second" },
+    ];
+    await mount({ renderText });
+    h.state.message.content = [
+      { type: "text", id: "p2", text: "second updated" },
+      { type: "text", id: "p1", text: "first updated" },
+    ];
+    await mount({ renderText });
+    expect(
+      Array.from(container.querySelectorAll("span"), (el) => el.textContent),
+    ).toEqual(["second:second updated", "first:first updated"]);
+  });
+
   it("renders a text part through the default text renderer", async () => {
     h.state.message.content = [{ type: "text", text: "hello world" }];
     await mount();
@@ -152,6 +205,10 @@ describe("MessageContent", () => {
         (props.addResult as () => void)();
         (props.resume as () => void)();
         (props.respondToApproval as () => void)();
+        (props.unstable_recordInteraction as (input: unknown) => void)({
+          type: "action",
+          payload: { choice: "retry" },
+        });
         return <span data-testid="tool">tool:{String(props.toolName)}</span>;
       });
       h.state.tools.toolUIs = { search: [{ render: ToolRender }] };
@@ -163,6 +220,10 @@ describe("MessageContent", () => {
       expect(h.addToolResult).toHaveBeenCalledWith(0);
       expect(h.resumeToolCall).toHaveBeenCalledWith(0);
       expect(h.respondToToolApproval).toHaveBeenCalledWith(0);
+      expect(h.unstable_recordInteraction).toHaveBeenCalledWith(0, {
+        type: "action",
+        payload: { choice: "retry" },
+      });
     });
 
     it("picks the first registration when multiple are registered", async () => {
@@ -218,7 +279,7 @@ describe("MessageContent", () => {
       const DataRender = vi.fn((props: Record<string, unknown>) => (
         <span data-testid="data">data:{String(props.name)}</span>
       ));
-      h.state.dataRenderers.renderers = { chart: DataRender };
+      h.state.dataRenderers.renderers = { chart: [DataRender] };
 
       await mount();
 
@@ -251,6 +312,51 @@ describe("MessageContent", () => {
       expect(el?.textContent).toBe("fallback:chart:0");
     });
 
+    it("uses dataRenderers.fallbacks[0] before renderData when no named renderer matches", async () => {
+      h.state.message.content = [{ type: "data", name: "chart", data: {} }];
+      const DataFallback = vi.fn((props: Record<string, unknown>) => (
+        <span data-testid="gfallback">global:{String(props.name)}</span>
+      ));
+      h.state.dataRenderers.fallbacks = [DataFallback];
+      const renderData = vi.fn(({ part, index }): ReactElement => (
+        <span data-testid="dfallback">
+          fallback:{String(part.name)}:{index}
+        </span>
+      ));
+      await mount({ renderData });
+
+      expect(
+        container.querySelector('[data-testid="gfallback"]')?.textContent,
+      ).toBe("global:chart");
+      expect(DataFallback.mock.calls[0]?.[0]).toEqual({
+        type: "data",
+        name: "chart",
+        data: {},
+      });
+      expect(renderData).not.toHaveBeenCalled();
+    });
+
+    it("prefers a named data renderer over dataRenderers.fallbacks", async () => {
+      h.state.message.content = [{ type: "data", name: "chart", data: {} }];
+      const DataRender = vi.fn((props: Record<string, unknown>) => (
+        <span data-testid="data">data:{String(props.name)}</span>
+      ));
+      const DataFallback = vi.fn(() => (
+        <span data-testid="gfallback">global-fallback</span>
+      ));
+      h.state.dataRenderers.renderers = { chart: [DataRender] };
+      h.state.dataRenderers.fallbacks = [DataFallback];
+      await mount({
+        renderData: () => <span data-testid="dfallback">render prop</span>,
+      });
+
+      expect(container.querySelector('[data-testid="data"]')?.textContent).toBe(
+        "data:chart",
+      );
+      expect(DataFallback).not.toHaveBeenCalled();
+      expect(container.querySelector('[data-testid="dfallback"]')).toBeNull();
+    });
+
     it("renders null when no data renderer is registered and no fallback is given", async () => {
       h.state.message.content = [{ type: "data", name: "chart", data: {} }];
       await mount();
@@ -268,7 +374,7 @@ describe("MessageContent", () => {
       t: [{ render: () => <span>[tool]</span> }],
     };
     h.state.dataRenderers.renderers = {
-      d: () => <span>[data]</span>,
+      d: [() => <span>[data]</span>],
     };
     await mount();
 

package/src/primitives/message/MessageContent.tsx

@@ -1,5 +1,6 @@
 import { type ReactElement, Fragment, useMemo } from "react";
 import { Text } from "react-native";
+import { getMessagePartKeys } from "@assistant-ui/core/internal";
 import type {
   ThreadUserMessagePart,
   ThreadAssistantMessagePart,
@@ -81,6 +82,9 @@ const ToolUIDisplay = ({
         addResult={partMethods.addToolResult}
         resume={partMethods.resumeToolCall}
         respondToApproval={partMethods.respondToToolApproval}
+        {...(partMethods.unstable_recordInteraction && {
+          unstable_recordInteraction: partMethods.unstable_recordInteraction,
+        })}
       />
     );
   }
@@ -103,9 +107,8 @@ const DataUIDisplay = ({
   index: number;
 }) => {
   const Render = useAuiState((s) => {
-    const renders = s.dataRenderers.renderers[part.name];
-    if (Array.isArray(renders)) return renders[0];
-    return renders;
+    const named = s.dataRenderers.renderers[part.name]?.[0];
+    return named ?? s.dataRenderers.fallbacks[0];
   });
   if (Render) return <Render {...(part as DataMessagePartProps)} />;
   if (Fallback) return <Fallback part={part} index={index} />;
@@ -122,11 +125,12 @@ export const MessageContent = ({
   renderData,
 }: MessageContentProps) => {
   const content = useAuiState((s) => s.message.parts);
+  const partKeys = getMessagePartKeys(content);
 
   return (
     <>
       {content.map((part, index) => {
-        const key = `${part.type}-${index}`;
+        const key = partKeys[index];
         switch (part.type) {
           case "text":
             return (

package/src/primitives/thread/ThreadMessages.test.tsx

@@ -3,6 +3,7 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { FlatList, FlatListProps } from "react-native";
 import type { ThreadMessage } from "@assistant-ui/core";
+import type { MessageState } from "@assistant-ui/core/store";
 import { ThreadMessages, ThreadMessagesFlatList } from "./ThreadMessages";
 
 type Msg = { id: string; role: string };
@@ -12,7 +13,7 @@ const h = vi.hoisted(() => ({
     thread: { messages: [] as Msg[] },
     message: { role: "user" as string, composer: { isEditing: false } },
   },
-  itemState: { role: "user" } as { role: string },
+  itemState: { role: "user" } as { role: string; parts?: unknown[] },
   events: {} as Record<string, Set<() => void>>,
   flatListProps: null as Record<string, unknown> | null,
   scrollToOffset: vi.fn(),
@@ -303,13 +304,15 @@ describe("ThreadMessages", () => {
   describe("children mode", () => {
     it("renders via the children render prop", async () => {
       h.state.thread.messages = [{ id: "1", role: "user" }];
-      h.itemState = { role: "user" };
-      const children = vi.fn(({ message }: { message: { role: string } }) => (
-        <span data-testid="child">child:{message.role}</span>
+      h.itemState = { role: "user", parts: [] };
+      const children = vi.fn(({ message }: { message: MessageState }) => (
+        <span data-testid="child">
+          child:{message.role}:{message.parts.length}
+        </span>
       ));
       await mount({ children });
       const el = container.querySelector('[data-testid="child"]');
-      expect(el?.textContent).toBe("child:user");
+      expect(el?.textContent).toBe("child:user:0");
       expect(children).toHaveBeenCalled();
     });
   });
@@ -420,6 +423,109 @@ describe("ThreadMessages", () => {
       expect(getFlatListProps().onStartReached).toBeUndefined();
     });
 
+    it("loads one page when start reached fires again before rerender", async () => {
+      const loadMore = vi.fn();
+      const callerOnStartReached = vi.fn();
+
+      await mountFlatList({
+        components: messageComponents,
+        history: { hasMore: true, isLoadingMore: false, loadMore },
+        onStartReached: callerOnStartReached,
+      });
+      const installedOnStartReached = getFlatListProps().onStartReached;
+
+      installedOnStartReached?.({ distanceFromStart: 0 });
+      installedOnStartReached?.({ distanceFromStart: 0 });
+
+      expect(loadMore).toHaveBeenCalledOnce();
+      expect(callerOnStartReached).toHaveBeenCalledTimes(2);
+    });
+
+    it("loads again after a commit without a loading transition", async () => {
+      const loadMore = vi.fn();
+      const history = { hasMore: true, isLoadingMore: false, loadMore };
+
+      await mountFlatList({ components: messageComponents, history });
+      getFlatListProps().onStartReached?.({ distanceFromStart: 0 });
+
+      await mountFlatList({ components: messageComponents, history });
+      getFlatListProps().onStartReached?.({ distanceFromStart: 0 });
+
+      expect(loadMore).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not carry a request latch to another history source", async () => {
+      const firstLoadMore = vi.fn();
+      const secondLoadMore = vi.fn();
+
+      await mountFlatList({
+        components: messageComponents,
+        history: {
+          hasMore: true,
+          isLoadingMore: false,
+          loadMore: firstLoadMore,
+        },
+      });
+      getFlatListProps().onStartReached?.({ distanceFromStart: 0 });
+
+      await mountFlatList({
+        components: messageComponents,
+        history: {
+          hasMore: true,
+          isLoadingMore: false,
+          loadMore: secondLoadMore,
+        },
+      });
+      getFlatListProps().onStartReached?.({ distanceFromStart: 0 });
+
+      expect(firstLoadMore).toHaveBeenCalledOnce();
+      expect(secondLoadMore).toHaveBeenCalledOnce();
+    });
+
+    it("loads again after the previous history request settles", async () => {
+      const loadMore = vi.fn();
+
+      await mountFlatList({
+        components: messageComponents,
+        history: { hasMore: true, isLoadingMore: false, loadMore },
+      });
+      getFlatListProps().onStartReached?.({ distanceFromStart: 0 });
+
+      await mountFlatList({
+        components: messageComponents,
+        history: { hasMore: true, isLoadingMore: true, loadMore },
+      });
+      await mountFlatList({
+        components: messageComponents,
+        history: { hasMore: true, isLoadingMore: false, loadMore },
+      });
+      getFlatListProps().onStartReached?.({ distanceFromStart: 0 });
+
+      expect(loadMore).toHaveBeenCalledTimes(2);
+    });
+
+    it("allows retrying when loadMore throws synchronously", async () => {
+      const loadError = new Error("load failed");
+      const loadMore = vi
+        .fn()
+        .mockImplementationOnce(() => {
+          throw loadError;
+        })
+        .mockImplementationOnce(() => undefined);
+
+      await mountFlatList({
+        components: messageComponents,
+        history: { hasMore: true, isLoadingMore: false, loadMore },
+      });
+      const onStartReached = getFlatListProps().onStartReached;
+
+      expect(() => onStartReached?.({ distanceFromStart: 0 })).toThrow(
+        loadError,
+      );
+      expect(() => onStartReached?.({ distanceFromStart: 0 })).not.toThrow();
+      expect(loadMore).toHaveBeenCalledTimes(2);
+    });
+
     it("defaults the history threshold and preserves a caller override", async () => {
       const history = {
         hasMore: true,

package/src/primitives/thread/ThreadMessages.tsx

@@ -17,7 +17,8 @@ import {
   type NativeScrollEvent,
   type NativeSyntheticEvent,
 } from "react-native";
-import type { MessageState, ThreadMessage } from "@assistant-ui/core";
+import type { ThreadMessage } from "@assistant-ui/core";
+import type { MessageState } from "@assistant-ui/core/store";
 import {
   RenderChildrenWithAccessor,
   useAuiEvent,
@@ -82,6 +83,42 @@ export type ThreadMessagesProps = ThreadMessagesFlatListProps;
 const DEFAULT_SYSTEM_MESSAGE = () => null;
 const AT_BOTTOM_THRESHOLD = 4;
 
+const useHistoryLoad = (
+  history: ThreadMessagesFlatListProps["history"],
+  onStartReached: FlatListProps<ThreadMessage>["onStartReached"],
+) => {
+  const loadRequestedRef = useRef(false);
+  const hasMore = history?.hasMore ?? false;
+  const isLoadingMore = history?.isLoadingMore ?? false;
+
+  // The latch is scoped to one commit so a no-op load cannot disable paging.
+  useEffect(() => {
+    loadRequestedRef.current = isLoadingMore;
+  });
+
+  const handleStartReached = useCallback<
+    NonNullable<FlatListProps<ThreadMessage>["onStartReached"]>
+  >(
+    (info) => {
+      onStartReached?.(info);
+      if (loadRequestedRef.current) return;
+      loadRequestedRef.current = true;
+      try {
+        history?.loadMore();
+      } catch (error) {
+        loadRequestedRef.current = false;
+        throw error;
+      }
+    },
+    [history, onStartReached],
+  );
+
+  return {
+    canLoadMore: hasMore && !isLoadingMore,
+    handleStartReached,
+  };
+};
+
 const getComponent = (
   components: MessageComponents,
   role: ThreadMessage["role"],
@@ -495,16 +532,9 @@ export const ThreadMessagesFlatList = forwardRef<
       [handleAutoScrollContentSizeChange, onContentSizeChange],
     );
 
-    const canLoadMore = history?.hasMore && !history.isLoadingMore;
-
-    const handleStartReached = useCallback<
-      NonNullable<FlatListProps<ThreadMessage>["onStartReached"]>
-    >(
-      (info) => {
-        onStartReached?.(info);
-        history?.loadMore();
-      },
-      [history, onStartReached],
+    const { canLoadMore, handleStartReached } = useHistoryLoad(
+      history,
+      onStartReached,
     );
 
     return (

package/src/primitives/threadList/ThreadListNew.test.tsx

@@ -6,6 +6,7 @@ import { ThreadListNew } from "./ThreadListNew";
 const h = vi.hoisted(() => ({
   switchToNewThread: vi.fn<() => void>(),
   state: { threads: { newThreadId: "new", mainThreadId: "other" } },
+  platform: { os: "web" },
   pressableProps: null as Record<string, unknown> | null,
 }));
 
@@ -41,7 +42,16 @@ vi.mock("react-native", async (importOriginal) => {
     );
   });
 
-  return { ...actual, Pressable: PressableMock };
+  return {
+    ...actual,
+    Platform: {
+      ...actual.Platform,
+      get OS() {
+        return h.platform.os;
+      },
+    },
+    Pressable: PressableMock,
+  };
 });
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
@@ -58,6 +68,7 @@ describe("ThreadListNew", () => {
   beforeEach(() => {
     h.switchToNewThread.mockReset();
     h.state.threads = { newThreadId: "new", mainThreadId: "other" };
+    h.platform.os = "web";
     h.pressableProps = null;
 
     container = document.createElement("div");
@@ -110,39 +121,55 @@ describe("ThreadListNew", () => {
     expect(h.switchToNewThread).not.toHaveBeenCalled();
   });
 
-  it("marks itself selected while the new thread is the current one", async () => {
+  it("marks itself current on the web while the new thread is current", async () => {
     h.state.threads = { newThreadId: "new", mainThreadId: "new" };
 
-    await mount();
+    const el = await mount();
 
+    expect(el.getAttribute("aria-current")).toBe("true");
+    expect(el.hasAttribute("aria-selected")).toBe(false);
     expect(accessibilityState()).toMatchObject({ selected: true });
   });
 
-  it("is not selected while another thread is current", async () => {
-    await mount();
+  it("is not current while another thread is current", async () => {
+    const el = await mount();
 
+    expect(el.hasAttribute("aria-current")).toBe(false);
     expect(accessibilityState()).toMatchObject({ selected: false });
   });
 
+  it("marks itself selected without aria-current on native", async () => {
+    h.platform.os = "ios";
+    h.state.threads = { newThreadId: "new", mainThreadId: "new" };
+
+    const el = await mount();
+
+    expect(el.hasAttribute("aria-current")).toBe(false);
+    expect(accessibilityState()).toMatchObject({ selected: true });
+  });
+
   it("keeps other accessibility state the caller passes", async () => {
     h.state.threads = { newThreadId: "new", mainThreadId: "new" };
 
-    await mount({ accessibilityState: { busy: true } });
+    const el = await mount({ accessibilityState: { busy: true } });
 
+    expect(el.getAttribute("aria-current")).toBe("true");
     expect(accessibilityState()).toMatchObject({ selected: true, busy: true });
   });
 
   it("lets the caller override the selected state", async () => {
     h.state.threads = { newThreadId: "new", mainThreadId: "new" };
 
-    await mount({ accessibilityState: { selected: false } });
+    const el = await mount({ accessibilityState: { selected: false } });
 
+    expect(el.hasAttribute("aria-current")).toBe(false);
     expect(accessibilityState()).toMatchObject({ selected: false });
   });
 
   it("lets the caller select a control the state reports inactive", async () => {
-    await mount({ accessibilityState: { selected: true } });
+    const el = await mount({ accessibilityState: { selected: true } });
 
+    expect(el.getAttribute("aria-current")).toBe("true");
     expect(accessibilityState()).toMatchObject({ selected: true });
   });
 

package/src/primitives/threadList/ThreadListNew.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import {
+  Platform,
   Pressable,
   type PressableProps,
   type PressableStateCallbackType,
@@ -27,12 +28,14 @@ export const ThreadListNew = ({
     (s) => s.threads.newThreadId === s.threads.mainThreadId,
   );
   const { switchToNewThread } = useThreadListNew();
+  const selected = accessibilityState?.selected ?? isActive;
 
   return (
     <Pressable
       onPress={switchToNewThread}
       accessibilityRole="button"
-      accessibilityState={{ selected: isActive, ...accessibilityState }}
+      accessibilityState={{ ...accessibilityState, selected }}
+      aria-current={Platform.OS === "web" && selected ? "true" : undefined}
       {...pressableProps}
     >
       {typeof children === "function"

package/src/primitives/threadListItem/ThreadListItemTrigger.test.tsx

@@ -9,6 +9,7 @@ const h = vi.hoisted(() => ({
     threads: { mainThreadId: "thread-1" },
     threadListItem: { id: "thread-1" },
   },
+  platform: { os: "web" },
   pressableProps: null as Record<string, unknown> | null,
 }));
 
@@ -37,7 +38,16 @@ vi.mock("react-native", async (importOriginal) => {
       { ...props, ref },
     );
   });
-  return { ...actual, Pressable: PressableMock };
+  return {
+    ...actual,
+    Platform: {
+      ...actual.Platform,
+      get OS() {
+        return h.platform.os;
+      },
+    },
+    Pressable: PressableMock,
+  };
 });
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
@@ -55,6 +65,7 @@ describe("ThreadListItemTrigger", () => {
     h.switchTo.mockReset();
     h.state.threads.mainThreadId = "thread-1";
     h.state.threadListItem.id = "thread-1";
+    h.platform.os = "web";
     h.pressableProps = null;
 
     container = document.createElement("div");
@@ -107,23 +118,38 @@ describe("ThreadListItemTrigger", () => {
     expect(h.switchTo).not.toHaveBeenCalled();
   });
 
-  it("marks the current thread selected", async () => {
-    await mount();
+  it("marks the current thread current on the web", async () => {
+    const el = await mount();
 
+    expect(el.getAttribute("aria-current")).toBe("true");
+    expect(el.hasAttribute("aria-selected")).toBe(false);
     expect(accessibilityState()).toMatchObject({ selected: true });
   });
 
-  it("does not mark another thread selected", async () => {
+  it("does not mark another thread current", async () => {
     h.state.threads.mainThreadId = "thread-2";
 
-    await mount();
+    const el = await mount();
 
+    expect(el.hasAttribute("aria-current")).toBe(false);
     expect(accessibilityState()).toMatchObject({ selected: false });
   });
 
+  it("marks the current thread selected without aria-current on native", async () => {
+    h.platform.os = "ios";
+
+    const el = await mount();
+
+    expect(el.hasAttribute("aria-current")).toBe(false);
+    expect(accessibilityState()).toMatchObject({ selected: true });
+  });
+
   it("keeps caller accessibility state overrides", async () => {
-    await mount({ accessibilityState: { busy: true, selected: false } });
+    const el = await mount({
+      accessibilityState: { busy: true, selected: false },
+    });
 
+    expect(el.hasAttribute("aria-current")).toBe(false);
     expect(accessibilityState()).toMatchObject({ busy: true, selected: false });
   });
 

package/src/primitives/threadListItem/ThreadListItemTrigger.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import {
+  Platform,
   Pressable,
   type PressableProps,
   type PressableStateCallbackType,
@@ -27,12 +28,14 @@ export const ThreadListItemTrigger = ({
     (s) => s.threads.mainThreadId === s.threadListItem.id,
   );
   const { switchTo } = useThreadListItemTrigger();
+  const selected = accessibilityState?.selected ?? isActive;
 
   return (
     <Pressable
       onPress={switchTo}
       accessibilityRole="button"
-      accessibilityState={{ selected: isActive, ...accessibilityState }}
+      accessibilityState={{ ...accessibilityState, selected }}
+      aria-current={Platform.OS === "web" && selected ? "true" : undefined}
       {...pressableProps}
     >
       {typeof children === "function"