@assistant-ui/react-native 0.1.0

package/src/internal.ts

@@ -0,0 +1,22 @@
+// Re-export from @assistant-ui/core
+export type {
+  ThreadRuntimeCore,
+  ThreadListRuntimeCore,
+} from "@assistant-ui/core";
+
+// Re-export from @assistant-ui/core/internal
+export {
+  DefaultThreadComposerRuntimeCore,
+  CompositeContextProvider,
+  MessageRepository,
+  BaseAssistantRuntimeCore,
+  generateId,
+  AssistantRuntimeImpl,
+  ThreadRuntimeImpl,
+  fromThreadMessageLike,
+  getAutoStatus,
+} from "@assistant-ui/core/internal";
+export type {
+  ThreadRuntimeCoreBinding,
+  ThreadListItemRuntimeBinding,
+} from "@assistant-ui/core/internal";

package/src/primitive-hooks/index.ts

@@ -0,0 +1,19 @@
+export { useThreadMessages } from "./useThreadMessages";
+export { useThreadIsRunning } from "./useThreadIsRunning";
+export { useThreadIsEmpty } from "./useThreadIsEmpty";
+export { useComposerSend } from "./useComposerSend";
+export { useComposerCancel } from "./useComposerCancel";
+export { useMessageReload } from "./useMessageReload";
+export { useMessageBranching } from "./useMessageBranching";
+export {
+  useActionBarCopy,
+  type UseActionBarCopyOptions,
+} from "./useActionBarCopy";
+export { useActionBarEdit } from "./useActionBarEdit";
+export { useActionBarReload } from "./useActionBarReload";
+export {
+  useActionBarFeedbackPositive,
+  useActionBarFeedbackNegative,
+} from "./useActionBarFeedback";
+export { useEditComposerSend } from "./useEditComposerSend";
+export { useEditComposerCancel } from "./useEditComposerCancel";

package/src/primitive-hooks/useActionBarCopy.ts

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export type UseActionBarCopyOptions = {
+  copiedDuration?: number | undefined;
+  copyToClipboard?: ((text: string) => void | Promise<void>) | undefined;
+};
+
+export const useActionBarCopy = ({
+  copiedDuration = 3000,
+  copyToClipboard,
+}: UseActionBarCopyOptions = {}) => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => {
+    return !(
+      (s.message.role !== "assistant" ||
+        s.message.status?.type !== "running") &&
+      s.message.parts.some((c) => c.type === "text" && c.text.length > 0)
+    );
+  });
+  const isCopied = useAuiState((s) => s.message.isCopied);
+  const isEditing = useAuiState((s) => s.composer.isEditing);
+  const composerValue = useAuiState((s) => s.composer.text);
+
+  const copy = useCallback(() => {
+    const valueToCopy = isEditing ? composerValue : aui.message().getCopyText();
+    if (!valueToCopy) return;
+
+    const write = copyToClipboard ?? (() => {});
+    const result = write(valueToCopy);
+    Promise.resolve(result).then(() => {
+      aui.message().setIsCopied(true);
+      setTimeout(() => aui.message().setIsCopied(false), copiedDuration);
+    });
+  }, [aui, isEditing, composerValue, copiedDuration, copyToClipboard]);
+
+  return { copy, disabled, isCopied };
+};

package/src/primitive-hooks/useActionBarEdit.ts

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useActionBarEdit = () => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => s.composer.isEditing);
+
+  const edit = useCallback(() => {
+    aui.composer().beginEdit();
+  }, [aui]);
+
+  return { edit, disabled };
+};

package/src/primitive-hooks/useActionBarFeedback.ts

@@ -0,0 +1,28 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useActionBarFeedbackPositive = () => {
+  const aui = useAui();
+  const isSubmitted = useAuiState(
+    (s) => s.message.metadata.submittedFeedback?.type === "positive",
+  );
+
+  const submit = useCallback(() => {
+    aui.message().submitFeedback({ type: "positive" });
+  }, [aui]);
+
+  return { submit, isSubmitted };
+};
+
+export const useActionBarFeedbackNegative = () => {
+  const aui = useAui();
+  const isSubmitted = useAuiState(
+    (s) => s.message.metadata.submittedFeedback?.type === "negative",
+  );
+
+  const submit = useCallback(() => {
+    aui.message().submitFeedback({ type: "negative" });
+  }, [aui]);
+
+  return { submit, isSubmitted };
+};

package/src/primitive-hooks/useActionBarReload.ts

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useActionBarReload = () => {
+  const aui = useAui();
+  const disabled = useAuiState(
+    (s) =>
+      s.thread.isRunning ||
+      s.thread.isDisabled ||
+      s.message.role !== "assistant",
+  );
+
+  const reload = useCallback(() => {
+    aui.message().reload();
+  }, [aui]);
+
+  return { reload, disabled };
+};

package/src/primitive-hooks/useComposerCancel.ts

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useComposerCancel = () => {
+  const aui = useAui();
+  const canCancel = useAuiState((s) => s.thread.isRunning);
+
+  const cancel = useCallback(() => {
+    aui.threads().thread("main").cancelRun();
+  }, [aui]);
+
+  return { cancel, canCancel };
+};

package/src/primitive-hooks/useComposerSend.ts

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useComposerSend = () => {
+  const aui = useAui();
+  const canSend = useAuiState((s) => !s.composer.isEmpty);
+
+  const send = useCallback(() => {
+    aui.composer().send();
+  }, [aui]);
+
+  return { send, canSend };
+};

package/src/primitive-hooks/useEditComposerCancel.ts

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+
+export const useEditComposerCancel = () => {
+  const aui = useAui();
+
+  const cancel = useCallback(() => {
+    aui.composer().cancel();
+  }, [aui]);
+
+  return { cancel };
+};

package/src/primitive-hooks/useEditComposerSend.ts

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useEditComposerSend = () => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => s.composer.isEmpty);
+
+  const send = useCallback(() => {
+    aui.composer().send();
+  }, [aui]);
+
+  return { send, disabled };
+};

package/src/primitive-hooks/useMessageBranching.ts

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useMessageBranching = () => {
+  const aui = useAui();
+  const branchNumber = useAuiState((s) => s.message.branchNumber);
+  const branchCount = useAuiState((s) => s.message.branchCount);
+
+  const goToPrev = useCallback(() => {
+    aui.message().switchToBranch({ position: "previous" });
+  }, [aui]);
+
+  const goToNext = useCallback(() => {
+    aui.message().switchToBranch({ position: "next" });
+  }, [aui]);
+
+  return { branchNumber, branchCount, goToPrev, goToNext };
+};

package/src/primitive-hooks/useMessageReload.ts

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export const useMessageReload = () => {
+  const aui = useAui();
+  const canReload = useAuiState((s) => s.message.role === "assistant");
+
+  const reload = useCallback(() => {
+    aui.message().reload();
+  }, [aui]);
+
+  return { reload, canReload };
+};

package/src/primitive-hooks/useThreadIsEmpty.ts

@@ -0,0 +1,5 @@
+import { useAuiState } from "@assistant-ui/store";
+
+export const useThreadIsEmpty = (): boolean => {
+  return useAuiState((s) => s.thread.isEmpty);
+};

package/src/primitive-hooks/useThreadIsRunning.ts

@@ -0,0 +1,5 @@
+import { useThread } from "../hooks/useThread";
+
+export const useThreadIsRunning = (): boolean => {
+  return useThread((s) => s.isRunning);
+};

package/src/primitive-hooks/useThreadMessages.ts

@@ -0,0 +1,6 @@
+import { useAuiState } from "@assistant-ui/store";
+import type { MessageState } from "@assistant-ui/core/store";
+
+export const useThreadMessages = (): readonly MessageState[] => {
+  return useAuiState((s) => s.thread.messages);
+};

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import {
+  useActionBarCopy,
+  type UseActionBarCopyOptions,
+} from "../../primitive-hooks/useActionBarCopy";
+
+export type ActionBarCopyProps = Omit<PressableProps, "onPress" | "children"> &
+  UseActionBarCopyOptions & {
+    children: ReactNode | ((props: { isCopied: boolean }) => ReactNode);
+  };
+
+export const ActionBarCopy = ({
+  children,
+  disabled: disabledProp,
+  copiedDuration,
+  copyToClipboard,
+  ...pressableProps
+}: ActionBarCopyProps) => {
+  const { copy, disabled, isCopied } = useActionBarCopy({
+    copiedDuration,
+    copyToClipboard,
+  });
+
+  return (
+    <Pressable
+      onPress={copy}
+      disabled={disabledProp ?? disabled}
+      {...pressableProps}
+    >
+      {typeof children === "function" ? children({ isCopied }) : children}
+    </Pressable>
+  );
+};

package/src/primitives/actionBar/ActionBarEdit.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useActionBarEdit } from "../../primitive-hooks/useActionBarEdit";
+
+export type ActionBarEditProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ActionBarEdit = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: ActionBarEditProps) => {
+  const { edit, disabled } = useActionBarEdit();
+
+  return (
+    <Pressable
+      onPress={edit}
+      disabled={disabledProp ?? disabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useActionBarFeedbackNegative } from "../../primitive-hooks/useActionBarFeedback";
+
+export type ActionBarFeedbackNegativeProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: ReactNode | ((props: { isSubmitted: boolean }) => ReactNode);
+};
+
+export const ActionBarFeedbackNegative = ({
+  children,
+  ...pressableProps
+}: ActionBarFeedbackNegativeProps) => {
+  const { submit, isSubmitted } = useActionBarFeedbackNegative();
+
+  return (
+    <Pressable onPress={submit} {...pressableProps}>
+      {typeof children === "function" ? children({ isSubmitted }) : children}
+    </Pressable>
+  );
+};

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useActionBarFeedbackPositive } from "../../primitive-hooks/useActionBarFeedback";
+
+export type ActionBarFeedbackPositiveProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: ReactNode | ((props: { isSubmitted: boolean }) => ReactNode);
+};
+
+export const ActionBarFeedbackPositive = ({
+  children,
+  ...pressableProps
+}: ActionBarFeedbackPositiveProps) => {
+  const { submit, isSubmitted } = useActionBarFeedbackPositive();
+
+  return (
+    <Pressable onPress={submit} {...pressableProps}>
+      {typeof children === "function" ? children({ isSubmitted }) : children}
+    </Pressable>
+  );
+};

package/src/primitives/actionBar/ActionBarReload.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useActionBarReload } from "../../primitive-hooks/useActionBarReload";
+
+export type ActionBarReloadProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ActionBarReload = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: ActionBarReloadProps) => {
+  const { reload, disabled } = useActionBarReload();
+
+  return (
+    <Pressable
+      onPress={reload}
+      disabled={disabledProp ?? disabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/actionBar/index.ts

@@ -0,0 +1,11 @@
+export { ActionBarCopy, type ActionBarCopyProps } from "./ActionBarCopy";
+export { ActionBarEdit, type ActionBarEditProps } from "./ActionBarEdit";
+export { ActionBarReload, type ActionBarReloadProps } from "./ActionBarReload";
+export {
+  ActionBarFeedbackPositive,
+  type ActionBarFeedbackPositiveProps,
+} from "./ActionBarFeedbackPositive";
+export {
+  ActionBarFeedbackNegative,
+  type ActionBarFeedbackNegativeProps,
+} from "./ActionBarFeedbackNegative";

package/src/primitives/branchPicker/BranchPickerCount.tsx

@@ -0,0 +1,9 @@
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type BranchPickerCountProps = TextProps;
+
+export const BranchPickerCount = (props: BranchPickerCountProps) => {
+  const branchCount = useAuiState((s) => s.message.branchCount);
+  return <Text {...props}>{branchCount}</Text>;
+};

package/src/primitives/branchPicker/BranchPickerNext.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export type BranchPickerNextProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const BranchPickerNext = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: BranchPickerNextProps) => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => {
+    if (s.message.branchNumber >= s.message.branchCount) return true;
+    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
+      return true;
+    }
+    return false;
+  });
+
+  const goToNext = useCallback(() => {
+    aui.message().switchToBranch({ position: "next" });
+  }, [aui]);
+
+  return (
+    <Pressable
+      onPress={goToNext}
+      disabled={disabledProp ?? disabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/branchPicker/BranchPickerNumber.tsx

@@ -0,0 +1,9 @@
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type BranchPickerNumberProps = TextProps;
+
+export const BranchPickerNumber = (props: BranchPickerNumberProps) => {
+  const branchNumber = useAuiState((s) => s.message.branchNumber);
+  return <Text {...props}>{branchNumber}</Text>;
+};

package/src/primitives/branchPicker/BranchPickerPrevious.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export type BranchPickerPreviousProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const BranchPickerPrevious = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: BranchPickerPreviousProps) => {
+  const aui = useAui();
+  const disabled = useAuiState((s) => {
+    if (s.message.branchNumber <= 1) return true;
+    if (s.thread.isRunning && !s.thread.capabilities.switchBranchDuringRun) {
+      return true;
+    }
+    return false;
+  });
+
+  const goToPrevious = useCallback(() => {
+    aui.message().switchToBranch({ position: "previous" });
+  }, [aui]);
+
+  return (
+    <Pressable
+      onPress={goToPrevious}
+      disabled={disabledProp ?? disabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/branchPicker/index.ts

@@ -0,0 +1,16 @@
+export {
+  BranchPickerPrevious,
+  type BranchPickerPreviousProps,
+} from "./BranchPickerPrevious";
+export {
+  BranchPickerNext,
+  type BranchPickerNextProps,
+} from "./BranchPickerNext";
+export {
+  BranchPickerNumber,
+  type BranchPickerNumberProps,
+} from "./BranchPickerNumber";
+export {
+  BranchPickerCount,
+  type BranchPickerCountProps,
+} from "./BranchPickerCount";

package/src/primitives/composer/ComposerCancel.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useComposerCancel } from "../../primitive-hooks/useComposerCancel";
+
+export type ComposerCancelProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ComposerCancel = ({
+  children,
+  disabled,
+  ...pressableProps
+}: ComposerCancelProps) => {
+  const { cancel, canCancel } = useComposerCancel();
+
+  return (
+    <Pressable
+      onPress={cancel}
+      disabled={disabled ?? !canCancel}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/ComposerInput.tsx

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export type ComposerInputProps = Omit<TextInputProps, "value" | "onChangeText">;
+
+export const ComposerInput = (props: ComposerInputProps) => {
+  const aui = useAui();
+  const text = useAuiState((s) => s.composer.text);
+
+  const onChangeText = useCallback(
+    (value: string) => {
+      aui.composer().setText(value);
+    },
+    [aui],
+  );
+
+  return <TextInput value={text} onChangeText={onChangeText} {...props} />;
+};

package/src/primitives/composer/ComposerRoot.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+export type ComposerRootProps = ViewProps & {
+  children: ReactNode;
+};
+
+export const ComposerRoot = ({ children, ...viewProps }: ComposerRootProps) => {
+  return <View {...viewProps}>{children}</View>;
+};

package/src/primitives/composer/ComposerSend.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useComposerSend } from "../../primitive-hooks/useComposerSend";
+
+export type ComposerSendProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ComposerSend = ({
+  children,
+  disabled,
+  ...pressableProps
+}: ComposerSendProps) => {
+  const { send, canSend } = useComposerSend();
+
+  return (
+    <Pressable
+      onPress={send}
+      disabled={disabled ?? !canSend}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/EditComposerCancel.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useEditComposerCancel } from "../../primitive-hooks/useEditComposerCancel";
+
+export type EditComposerCancelProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const EditComposerCancel = ({
+  children,
+  ...pressableProps
+}: EditComposerCancelProps) => {
+  const { cancel } = useEditComposerCancel();
+
+  return (
+    <Pressable onPress={cancel} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/EditComposerInput.tsx

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import { useAui, useAuiState } from "@assistant-ui/store";
+
+export type EditComposerInputProps = Omit<
+  TextInputProps,
+  "value" | "onChangeText"
+>;
+
+export const EditComposerInput = (props: EditComposerInputProps) => {
+  const aui = useAui();
+  const text = useAuiState((s) => s.composer.text);
+
+  const onChangeText = useCallback(
+    (value: string) => {
+      aui.composer().setText(value);
+    },
+    [aui],
+  );
+
+  return <TextInput value={text} onChangeText={onChangeText} {...props} />;
+};