@assistant-ui/react-native 0.1.36 → 0.1.38

package/src/primitives/branchPicker/BranchPickerPrevious.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useBranchPickerPrevious } from "@assistant-ui/core/react";
 
-export type BranchPickerPreviousProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type BranchPickerPreviousProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const BranchPickerPrevious = ({
@@ -17,6 +19,7 @@ export const BranchPickerPrevious = ({
     <Pressable
       onPress={previous}
       disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.tsx

@@ -1,12 +1,12 @@
-import { useCallback, type ReactNode } from "react";
+import { useCallback } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useAuiState, useAui } from "@assistant-ui/store";
 
 export type ChainOfThoughtAccordionTriggerProps = Omit<
   PressableProps,
-  "onPress"
+  "onPress" | "children"
 > & {
-  children: ReactNode;
+  children: PressableProps["children"];
 };
 
 export const ChainOfThoughtAccordionTrigger = ({
@@ -21,7 +21,7 @@ export const ChainOfThoughtAccordionTrigger = ({
   }, [aui, collapsed]);
 
   return (
-    <Pressable onPress={onPress} {...pressableProps}>
+    <Pressable onPress={onPress} accessibilityRole="button" {...pressableProps}>
       {children}
     </Pressable>
   );

package/src/primitives/composer/ComposerAddAttachment.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useComposerAddAttachment } from "@assistant-ui/core/react";
 
-export type ComposerAddAttachmentProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ComposerAddAttachmentProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 /**
@@ -21,7 +23,11 @@ export const ComposerAddAttachment = ({
   const { disabled } = useComposerAddAttachment();
 
   return (
-    <Pressable disabled={disabledProp ?? disabled} {...pressableProps}>
+    <Pressable
+      disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
       {children}
     </Pressable>
   );

package/src/primitives/composer/ComposerCancel.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useComposerCancel } from "@assistant-ui/core/react";
 
-export type ComposerCancelProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ComposerCancelProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const ComposerCancel = ({
@@ -17,6 +19,7 @@ export const ComposerCancel = ({
     <Pressable
       onPress={cancel}
       disabled={disabled ?? hookDisabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

package/src/primitives/composer/ComposerInput.tsx

@@ -1,14 +1,13 @@
 import { useCallback, useEffect, useRef } from "react";
-import {
-  Platform,
-  TextInput,
-  type NativeSyntheticEvent,
-  type TextInputKeyPressEventData,
-  type TextInputProps,
-} from "react-native";
+import { Platform, TextInput, type TextInputProps } from "react-native";
 import { useAui, useAuiState } from "@assistant-ui/store";
 import { flushTapSync } from "@assistant-ui/tap";
 
+type TextInputInstance = React.ComponentRef<typeof TextInput>;
+type TextInputKeyPressEvent = Parameters<
+  NonNullable<TextInputProps["onKeyPress"]>
+>[0];
+
 export type ComposerInputProps = Omit<
   TextInputProps,
   "value" | "onChangeText"
@@ -31,7 +30,9 @@ const getWebTextareaMaxHeight = (el: HTMLTextAreaElement) => {
   return Number.isFinite(inlineMaxHeight) ? inlineMaxHeight : null;
 };
 
-const adjustWebTextareaHeight = (ref: React.RefObject<TextInput | null>) => {
+const adjustWebTextareaHeight = (
+  ref: React.RefObject<TextInputInstance | null>,
+) => {
   if (Platform.OS !== "web") return;
   // On web, the TextInput ref IS the DOM element
   const el = ref.current as unknown as HTMLTextAreaElement | null;
@@ -62,7 +63,7 @@ export const ComposerInput = ({
 }: ComposerInputProps) => {
   const aui = useAui();
   const text = useAuiState((s) => s.composer.text);
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<TextInputInstance>(null);
 
   const onChangeText = useCallback(
     (value: string) => {
@@ -85,18 +86,19 @@ export const ComposerInput = ({
   }, [text]);
 
   const onKeyPress = useCallback(
-    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    (e: TextInputKeyPressEvent) => {
       onKeyPressProp?.(e);
       if (e.isDefaultPrevented()) return;
 
       if (Platform.OS !== "web") return;
       if (submitMode !== "enter") return;
 
-      const nativeEvent = e.nativeEvent as TextInputKeyPressEventData & {
-        shiftKey?: boolean;
-        isComposing?: boolean;
-        keyCode?: number;
-      };
+      const nativeEvent =
+        e.nativeEvent as TextInputKeyPressEvent["nativeEvent"] & {
+          shiftKey?: boolean;
+          isComposing?: boolean;
+          keyCode?: number;
+        };
       // react-native-web forwards the raw DOM keydown before its own composition guard, so re-check it here (mirrors isEventComposing)
       if (nativeEvent.isComposing || nativeEvent.keyCode === 229) return;
       if (nativeEvent.key === "Enter" && !nativeEvent.shiftKey) {

package/src/primitives/composer/ComposerQueue.test.tsx

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import { ComposerPrimitiveQueue } from "@assistant-ui/core/react";
+import { ComposerQueue } from "./ComposerQueue";
+
+describe("ComposerPrimitive.Queue", () => {
+  it("re-exports the shared core queue primitive", () => {
+    expect(ComposerQueue).toBe(ComposerPrimitiveQueue);
+  });
+});

package/src/primitives/composer/ComposerQueue.tsx

@@ -0,0 +1 @@
+export { ComposerPrimitiveQueue as ComposerQueue } from "@assistant-ui/core/react";

package/src/primitives/composer/ComposerQuote.test.tsx

@@ -0,0 +1,163 @@
+import { act, type ReactElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "react-native";
+import { ComposerQuote } from "./ComposerQuote";
+import { ComposerQuoteDismiss } from "./ComposerQuoteDismiss";
+import { ComposerQuoteText } from "./ComposerQuoteText";
+
+const h = vi.hoisted(() => ({
+  quote: undefined as { text: string } | undefined,
+  setQuote: vi.fn<(quote: undefined) => void>(),
+}));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return {
+    ...actual,
+    useAui: () => ({ composer: { setQuote: h.setQuote } }),
+    useAuiState: <T,>(selector: (state: { composer: typeof h }) => T) =>
+      selector({ composer: h }),
+  };
+});
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("Composer quote primitives", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.quote = undefined;
+    h.setQuote.mockReset();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const render = async (element: ReactElement) => {
+    await act(async () => {
+      root.render(element);
+    });
+  };
+
+  const press = async (testID: string) => {
+    const element = container.querySelector(`[data-testid="${testID}"]`);
+    expect(element).not.toBeNull();
+    await act(async () => {
+      element!.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      );
+    });
+  };
+
+  it("renders quote children only when a quote exists", async () => {
+    await render(
+      <ComposerQuote>
+        <Text testID="quote">quoted</Text>
+      </ComposerQuote>,
+    );
+    expect(container.querySelector('[data-testid="quote"]')).toBeNull();
+
+    h.quote = { text: "quoted text" };
+    await render(
+      <ComposerQuote>
+        <Text testID="quote">quoted</Text>
+      </ComposerQuote>,
+    );
+    expect(container.querySelector('[data-testid="quote"]')).not.toBeNull();
+  });
+
+  it("renders quote text and allows children to override it", async () => {
+    h.quote = { text: "quoted text" };
+    await render(<ComposerQuoteText testID="text" />);
+    expect(container.querySelector('[data-testid="text"]')?.textContent).toBe(
+      "quoted text",
+    );
+
+    await render(
+      <ComposerQuoteText testID="text">
+        <Text>override</Text>
+      </ComposerQuoteText>,
+    );
+    expect(container.querySelector('[data-testid="text"]')?.textContent).toBe(
+      "override",
+    );
+  });
+
+  it("renders nothing when there is no quote text, even with children", async () => {
+    await render(
+      <ComposerQuoteText testID="text">
+        <Text>fallback</Text>
+      </ComposerQuoteText>,
+    );
+    expect(container.querySelector('[data-testid="text"]')).toBeNull();
+  });
+
+  it("renders children override when quote text is an empty string", async () => {
+    h.quote = { text: "" };
+    await render(
+      <ComposerQuoteText testID="text">
+        <Text>override</Text>
+      </ComposerQuoteText>,
+    );
+    expect(container.querySelector('[data-testid="text"]')?.textContent).toBe(
+      "override",
+    );
+  });
+
+  it("renders an empty Text when quote text is an empty string and no children are provided", async () => {
+    h.quote = { text: "" };
+    await render(<ComposerQuoteText testID="text" />);
+    expect(container.querySelector('[data-testid="text"]')?.textContent).toBe(
+      "",
+    );
+  });
+
+  it("clears the quote when dismissed", async () => {
+    await render(
+      <ComposerQuoteDismiss testID="dismiss">
+        <Text>dismiss</Text>
+      </ComposerQuoteDismiss>,
+    );
+    await press("dismiss");
+    expect(h.setQuote).toHaveBeenCalledWith(undefined);
+  });
+
+  it("does not clear the quote when dismiss is disabled", async () => {
+    await render(
+      <ComposerQuoteDismiss testID="dismiss" disabled>
+        <Text>dismiss</Text>
+      </ComposerQuoteDismiss>,
+    );
+    await press("dismiss");
+    expect(h.setQuote).not.toHaveBeenCalled();
+  });
+
+  it("passes the Pressable press state to function children", async () => {
+    await render(
+      <ComposerQuoteDismiss testID="dismiss">
+        {({ pressed }) => (pressed ? "pressed" : "idle")}
+      </ComposerQuoteDismiss>,
+    );
+    expect(
+      container.querySelector('[data-testid="dismiss"]')?.textContent,
+    ).toBe("idle");
+
+    await render(
+      <ComposerQuoteDismiss testID="dismiss" testOnly_pressed>
+        {({ pressed }) => (pressed ? "pressed" : "idle")}
+      </ComposerQuoteDismiss>,
+    );
+    expect(
+      container.querySelector('[data-testid="dismiss"]')?.textContent,
+    ).toBe("pressed");
+  });
+});

package/src/primitives/composer/ComposerQuote.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type ComposerQuoteProps = ViewProps & {
+  children: ReactNode;
+};
+
+export const ComposerQuote = ({
+  children,
+  ...viewProps
+}: ComposerQuoteProps) => {
+  const hasQuote = useAuiState((s) => s.composer.quote !== undefined);
+  if (!hasQuote) return null;
+
+  return <View {...viewProps}>{children}</View>;
+};

package/src/primitives/composer/ComposerQuoteDismiss.tsx

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAui } from "@assistant-ui/store";
+
+export type ComposerQuoteDismissProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
+};
+
+export const ComposerQuoteDismiss = ({
+  children,
+  ...pressableProps
+}: ComposerQuoteDismissProps) => {
+  const aui = useAui();
+
+  const handleDismiss = useCallback(() => {
+    aui.composer.setQuote(undefined);
+  }, [aui]);
+
+  return (
+    <Pressable
+      onPress={handleDismiss}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/ComposerQuoteText.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type ComposerQuoteTextProps = TextProps & {
+  children?: ReactNode;
+};
+
+export const ComposerQuoteText = ({
+  children,
+  ...textProps
+}: ComposerQuoteTextProps) => {
+  const text = useAuiState((s) => s.composer.quote?.text);
+  if (text === undefined) return null;
+
+  return <Text {...textProps}>{children ?? text}</Text>;
+};

package/src/primitives/composer/ComposerSend.test.tsx

@@ -113,4 +113,30 @@ describe("ComposerSend", () => {
 
     expect(h.send).toHaveBeenCalledTimes(1);
   });
+
+  it("passes the Pressable press state to function children", async () => {
+    await act(async () => {
+      root.render(
+        <ComposerSend testID="send">
+          {({ pressed }) => (pressed ? "pressed" : "idle")}
+        </ComposerSend>,
+      );
+    });
+
+    expect(container.querySelector('[data-testid="send"]')?.textContent).toBe(
+      "idle",
+    );
+
+    await act(async () => {
+      root.render(
+        <ComposerSend testID="send" testOnly_pressed>
+          {({ pressed }) => (pressed ? "pressed" : "idle")}
+        </ComposerSend>,
+      );
+    });
+
+    expect(container.querySelector('[data-testid="send"]')?.textContent).toBe(
+      "pressed",
+    );
+  });
 });

package/src/primitives/composer/ComposerSend.tsx

@@ -1,9 +1,8 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useComposerSend } from "@assistant-ui/core/react";
 
-export type ComposerSendProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ComposerSendProps = Omit<PressableProps, "onPress" | "children"> & {
+  children: PressableProps["children"];
 };
 
 export const ComposerSend = ({
@@ -17,6 +16,7 @@ export const ComposerSend = ({
     <Pressable
       onPress={() => send()}
       disabled={disabled ?? hookDisabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

package/src/primitives/composer.ts

@@ -25,3 +25,16 @@ export {
   type ComposerAddAttachmentProps as AddAttachmentProps,
 } from "./composer/ComposerAddAttachment";
 export { ComposerIf as If } from "./composer/ComposerIf";
+export {
+  ComposerQuote as Quote,
+  type ComposerQuoteProps as QuoteProps,
+} from "./composer/ComposerQuote";
+export {
+  ComposerQuoteText as QuoteText,
+  type ComposerQuoteTextProps as QuoteTextProps,
+} from "./composer/ComposerQuoteText";
+export {
+  ComposerQuoteDismiss as QuoteDismiss,
+  type ComposerQuoteDismissProps as QuoteDismissProps,
+} from "./composer/ComposerQuoteDismiss";
+export { ComposerQueue as Queue } from "./composer/ComposerQueue";

package/src/primitives/message/MessageIf.tsx

@@ -9,6 +9,9 @@ export type MessageIfProps = {
   last?: boolean | undefined;
 };
 
+/**
+ * @deprecated Use `<AuiIf condition={(s) => s.message...} />` instead.
+ */
 export const MessageIf = ({
   children,
   user,

package/src/primitives/queueItem/QueueItem.test.tsx

@@ -0,0 +1,132 @@
+import { act, type ReactElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "react-native";
+import { QueueItemRemove } from "./QueueItemRemove";
+import { QueueItemSteer } from "./QueueItemSteer";
+import { QueueItemText } from "./QueueItemText";
+
+const h = vi.hoisted(() => ({
+  parts: [] as Array<{ type: "text" | "file"; text?: string }> | undefined,
+  remove: vi.fn<() => void>(),
+  steer: vi.fn<() => void>(),
+}));
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return {
+    ...actual,
+    useAui: () => ({ queueItem: { remove: h.remove, steer: h.steer } }),
+    useAuiState: <T,>(selector: (state: { queueItem: typeof h }) => T) =>
+      selector({ queueItem: h }),
+  };
+});
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("Queue item primitives", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    h.parts = [];
+    h.remove.mockReset();
+    h.steer.mockReset();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const render = async (element: ReactElement) => {
+    await act(async () => {
+      root.render(element);
+    });
+  };
+
+  const press = async (testID: string) => {
+    const element = container.querySelector(`[data-testid="${testID}"]`);
+    expect(element).not.toBeNull();
+    await act(async () => {
+      element!.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      );
+    });
+  };
+
+  it("renders only text parts and supports child overrides", async () => {
+    h.parts = [
+      { type: "text", text: "hello" },
+      { type: "file", text: "not rendered" },
+      { type: "text", text: "world" },
+    ];
+    await render(<QueueItemText testID="text" />);
+    expect(container.querySelector('[data-testid="text"]')?.textContent).toBe(
+      "hello\n\nworld",
+    );
+
+    await render(
+      <QueueItemText testID="text">
+        <Text>override</Text>
+      </QueueItemText>,
+    );
+    expect(container.querySelector('[data-testid="text"]')?.textContent).toBe(
+      "override",
+    );
+  });
+
+  it("removes a queue item when pressed", async () => {
+    await render(<QueueItemRemove testID="remove">remove</QueueItemRemove>);
+    await press("remove");
+    expect(h.remove).toHaveBeenCalledTimes(1);
+  });
+
+  it("steers a queue item when pressed", async () => {
+    await render(<QueueItemSteer testID="steer">steer</QueueItemSteer>);
+    await press("steer");
+    expect(h.steer).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders nothing extra when queue item parts are missing", async () => {
+    h.parts = undefined;
+    await render(<QueueItemText testID="text" />);
+    expect(container.querySelector('[data-testid="text"]')?.textContent).toBe(
+      "",
+    );
+  });
+
+  it("passes the Pressable press state to function children", async () => {
+    await render(
+      <QueueItemRemove testID="remove">
+        {({ pressed }) => (pressed ? "pressed" : "idle")}
+      </QueueItemRemove>,
+    );
+    expect(container.querySelector('[data-testid="remove"]')?.textContent).toBe(
+      "idle",
+    );
+
+    await render(
+      <QueueItemRemove testID="remove" testOnly_pressed>
+        {({ pressed }) => (pressed ? "pressed" : "idle")}
+      </QueueItemRemove>,
+    );
+    expect(container.querySelector('[data-testid="remove"]')?.textContent).toBe(
+      "pressed",
+    );
+
+    await render(
+      <QueueItemSteer testID="steer" testOnly_pressed>
+        {({ pressed }) => (pressed ? "pressed" : "idle")}
+      </QueueItemSteer>,
+    );
+    expect(container.querySelector('[data-testid="steer"]')?.textContent).toBe(
+      "pressed",
+    );
+  });
+});

package/src/primitives/queueItem/QueueItemRemove.tsx

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAui } from "@assistant-ui/store";
+
+export type QueueItemRemoveProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
+};
+
+export const QueueItemRemove = ({
+  children,
+  ...pressableProps
+}: QueueItemRemoveProps) => {
+  const aui = useAui();
+
+  const handleRemove = useCallback(() => {
+    aui.queueItem.remove();
+  }, [aui]);
+
+  return (
+    <Pressable
+      onPress={handleRemove}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};