@assistant-ui/react-native 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-native",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "React Native bindings for assistant-ui",
   "keywords": [
     "assistant",
@@ -33,9 +33,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@assistant-ui/core": "^0.1.1",
-    "@assistant-ui/store": "^0.2.1",
-    "@assistant-ui/tap": "^0.5.1",
+    "@assistant-ui/core": "^0.1.3",
+    "@assistant-ui/store": "^0.2.2",
+    "@assistant-ui/tap": "^0.5.2",
     "assistant-stream": "^0.3.4",
     "zustand": "^5.0.11"
   },
@@ -52,9 +52,9 @@
   "devDependencies": {
     "@types/react": "^19.2.14",
     "react": "^19.2.4",
-    "react-native": "^0.84.0",
+    "react-native": "^0.84.1",
     "vitest": "^4.0.18",
-    "@assistant-ui/x-buildutils": "0.0.1"
+    "@assistant-ui/x-buildutils": "0.0.2"
   },
   "publishConfig": {
     "access": "public",

package/src/context/AssistantContext.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, memo } from "react";
-import { useAui } from "@assistant-ui/store";
+import { useAui, type AssistantClient } from "@assistant-ui/store";
 import type { AssistantRuntime } from "@assistant-ui/core";
 import { AssistantProviderBase } from "@assistant-ui/core/react";
 
@@ -14,16 +14,18 @@ export const useAssistantRuntime = (): AssistantRuntime => {
   return runtime;
 };
 
-export const AssistantProvider = memo(
+export const AssistantRuntimeProvider = memo(
   ({
     runtime,
+    aui,
     children,
   }: {
     runtime: AssistantRuntime;
+    aui?: AssistantClient | null;
     children: ReactNode;
   }) => {
     return (
-      <AssistantProviderBase runtime={runtime}>
+      <AssistantProviderBase runtime={runtime} aui={aui ?? null}>
         {children}
       </AssistantProviderBase>
     );

package/src/context/index.ts

@@ -1 +1,4 @@
-export { AssistantProvider, useAssistantRuntime } from "./AssistantContext";
+export {
+  AssistantRuntimeProvider,
+  useAssistantRuntime,
+} from "./AssistantContext";

package/src/context/providers/RuntimeAdapterProvider.tsx

@@ -1,42 +1,5 @@
-import { createContext, FC, ReactNode, useContext } from "react";
-import type {
-  ThreadHistoryAdapter,
-  AttachmentAdapter,
-  ModelContextProvider,
-} from "@assistant-ui/core";
-
-export type RuntimeAdapters = {
-  modelContext?: ModelContextProvider | undefined;
-  history?: ThreadHistoryAdapter | undefined;
-  attachments?: AttachmentAdapter | undefined;
-};
-
-const RuntimeAdaptersContext = createContext<RuntimeAdapters | null>(null);
-
-export namespace RuntimeAdapterProvider {
-  export type Props = {
-    adapters: RuntimeAdapters;
-    children: ReactNode;
-  };
-}
-
-export const RuntimeAdapterProvider: FC<RuntimeAdapterProvider.Props> = ({
-  adapters,
-  children,
-}) => {
-  const context = useContext(RuntimeAdaptersContext);
-  return (
-    <RuntimeAdaptersContext.Provider
-      value={{
-        ...context,
-        ...adapters,
-      }}
-    >
-      {children}
-    </RuntimeAdaptersContext.Provider>
-  );
-};
-
-export const useRuntimeAdapters = () => {
-  return useContext(RuntimeAdaptersContext);
-};
+export {
+  RuntimeAdapterProvider,
+  useRuntimeAdapters,
+  type RuntimeAdapters,
+} from "@assistant-ui/core/react";

package/src/index.ts

@@ -92,7 +92,7 @@ export {
 } from "@assistant-ui/store";
 
 // Context providers and hooks
-export { AssistantProvider, useAssistantRuntime } from "./context";
+export { AssistantRuntimeProvider, useAssistantRuntime } from "./context";
 
 // Primitive hooks
 export {
@@ -109,8 +109,6 @@ export {
   useActionBarReload,
   useActionBarFeedbackPositive,
   useActionBarFeedbackNegative,
-  useEditComposerSend,
-  useEditComposerCancel,
   useComposerAddAttachment,
 } from "./primitive-hooks";
 
@@ -122,16 +120,16 @@ export {
 } from "./runtimes";
 
 // Primitives
-export * from "./primitives/thread";
-export * from "./primitives/composer";
-export * from "./primitives/message";
-export * from "./primitives/threadList";
-export * from "./primitives/actionBar";
-export * from "./primitives/branchPicker";
-export * from "./primitives/attachment";
-export * from "./primitives/threadListItem";
-export * from "./primitives/chainOfThought";
-export * from "./primitives/suggestion";
+export * as ThreadPrimitive from "./primitives/thread";
+export * as ComposerPrimitive from "./primitives/composer";
+export * as MessagePrimitive from "./primitives/message";
+export * as ThreadListPrimitive from "./primitives/threadList";
+export * as ActionBarPrimitive from "./primitives/actionBar";
+export * as BranchPickerPrimitive from "./primitives/branchPicker";
+export * as AttachmentPrimitive from "./primitives/attachment";
+export * as ThreadListItemPrimitive from "./primitives/threadListItem";
+export * as ChainOfThoughtPrimitive from "./primitives/chainOfThought";
+export * as SuggestionPrimitive from "./primitives/suggestion";
 
 // Re-export shared providers from core/react
 export {
@@ -148,10 +146,3 @@ export {
 export * from "./model-context";
 export * from "./client";
 export * from "./types";
-
-// Adapters
-export {
-  type TitleGenerationAdapter,
-  createSimpleTitleAdapter,
-  createLocalStorageAdapter,
-} from "./adapters";

package/src/primitive-hooks/index.ts

@@ -15,6 +15,4 @@ export {
   useActionBarFeedbackPositive,
   useActionBarFeedbackNegative,
 } from "./useActionBarFeedback";
-export { useEditComposerSend } from "./useEditComposerSend";
-export { useEditComposerCancel } from "./useEditComposerCancel";
 export { useComposerAddAttachment } from "./useComposerAddAttachment";

package/src/primitive-hooks/useComposerCancel.ts

@@ -6,7 +6,7 @@ export const useComposerCancel = () => {
   const canCancel = useAuiState((s) => s.thread.isRunning);
 
   const cancel = useCallback(() => {
-    aui.threads().thread("main").cancelRun();
+    aui.composer().cancel();
   }, [aui]);
 
   return { cancel, canCancel };

package/src/primitive-hooks/useComposerSend.ts

@@ -3,7 +3,9 @@ import { useAui, useAuiState } from "@assistant-ui/store";
 
 export const useComposerSend = () => {
   const aui = useAui();
-  const canSend = useAuiState((s) => !s.composer.isEmpty);
+  const canSend = useAuiState(
+    (s) => !s.thread.isRunning && s.composer.isEditing && !s.composer.isEmpty,
+  );
 
   const send = useCallback(() => {
     aui.composer().send();

package/src/primitives/actionBar/index.ts

@@ -1,11 +1,20 @@
-export { ActionBarCopy, type ActionBarCopyProps } from "./ActionBarCopy";
-export { ActionBarEdit, type ActionBarEditProps } from "./ActionBarEdit";
-export { ActionBarReload, type ActionBarReloadProps } from "./ActionBarReload";
 export {
-  ActionBarFeedbackPositive,
-  type ActionBarFeedbackPositiveProps,
+  ActionBarCopy as Copy,
+  type ActionBarCopyProps as CopyProps,
+} from "./ActionBarCopy";
+export {
+  ActionBarEdit as Edit,
+  type ActionBarEditProps as EditProps,
+} from "./ActionBarEdit";
+export {
+  ActionBarReload as Reload,
+  type ActionBarReloadProps as ReloadProps,
+} from "./ActionBarReload";
+export {
+  ActionBarFeedbackPositive as FeedbackPositive,
+  type ActionBarFeedbackPositiveProps as FeedbackPositiveProps,
 } from "./ActionBarFeedbackPositive";
 export {
-  ActionBarFeedbackNegative,
-  type ActionBarFeedbackNegativeProps,
+  ActionBarFeedbackNegative as FeedbackNegative,
+  type ActionBarFeedbackNegativeProps as FeedbackNegativeProps,
 } from "./ActionBarFeedbackNegative";

package/src/primitives/attachment/index.ts

@@ -1,7 +1,16 @@
-export { AttachmentRoot, type AttachmentRootProps } from "./AttachmentRoot";
-export { AttachmentName, type AttachmentNameProps } from "./AttachmentName";
-export { AttachmentThumb, type AttachmentThumbProps } from "./AttachmentThumb";
 export {
-  AttachmentRemove,
-  type AttachmentRemoveProps,
+  AttachmentRoot as Root,
+  type AttachmentRootProps as RootProps,
+} from "./AttachmentRoot";
+export {
+  AttachmentName as Name,
+  type AttachmentNameProps as NameProps,
+} from "./AttachmentName";
+export {
+  AttachmentThumb as Thumb,
+  type AttachmentThumbProps as ThumbProps,
+} from "./AttachmentThumb";
+export {
+  AttachmentRemove as Remove,
+  type AttachmentRemoveProps as RemoveProps,
 } from "./AttachmentRemove";

package/src/primitives/branchPicker/index.ts

@@ -1,16 +1,16 @@
 export {
-  BranchPickerPrevious,
-  type BranchPickerPreviousProps,
+  BranchPickerPrevious as Previous,
+  type BranchPickerPreviousProps as PreviousProps,
 } from "./BranchPickerPrevious";
 export {
-  BranchPickerNext,
-  type BranchPickerNextProps,
+  BranchPickerNext as Next,
+  type BranchPickerNextProps as NextProps,
 } from "./BranchPickerNext";
 export {
-  BranchPickerNumber,
-  type BranchPickerNumberProps,
+  BranchPickerNumber as Number,
+  type BranchPickerNumberProps as NumberProps,
 } from "./BranchPickerNumber";
 export {
-  BranchPickerCount,
-  type BranchPickerCountProps,
+  BranchPickerCount as Count,
+  type BranchPickerCountProps as CountProps,
 } from "./BranchPickerCount";

package/src/primitives/chainOfThought/index.ts

@@ -1,9 +1,9 @@
 export {
-  ChainOfThoughtRoot,
-  type ChainOfThoughtRootProps,
+  ChainOfThoughtRoot as Root,
+  type ChainOfThoughtRootProps as RootProps,
 } from "./ChainOfThoughtRoot";
 export {
-  ChainOfThoughtAccordionTrigger,
-  type ChainOfThoughtAccordionTriggerProps,
+  ChainOfThoughtAccordionTrigger as AccordionTrigger,
+  type ChainOfThoughtAccordionTriggerProps as AccordionTriggerProps,
 } from "./ChainOfThoughtAccordionTrigger";
-export { ChainOfThoughtPrimitiveParts } from "@assistant-ui/core/react";
+export { ChainOfThoughtPrimitiveParts as Parts } from "@assistant-ui/core/react";

package/src/primitives/composer/ComposerInput.tsx

@@ -1,12 +1,48 @@
-import { useCallback } from "react";
-import { TextInput, type TextInputProps } from "react-native";
+import { useCallback, useEffect, useRef } from "react";
+import {
+  Platform,
+  TextInput,
+  type NativeSyntheticEvent,
+  type TextInputKeyPressEventData,
+  type TextInputProps,
+} from "react-native";
 import { useAui, useAuiState } from "@assistant-ui/store";
 
-export type ComposerInputProps = Omit<TextInputProps, "value" | "onChangeText">;
+export type ComposerInputProps = Omit<
+  TextInputProps,
+  "value" | "onChangeText"
+> & {
+  /**
+   * Controls how the Enter key submits messages (web only).
+   * - "enter": Plain Enter submits (Shift+Enter for newline)
+   * - "none": Enter inserts newline (no keyboard submission)
+   * @default "enter"
+   */
+  submitMode?: "enter" | "none";
+};
+
+const adjustWebTextareaHeight = (ref: React.RefObject<TextInput | null>) => {
+  if (Platform.OS !== "web") return;
+  // On web, the TextInput ref IS the DOM element
+  const el = ref.current as unknown as HTMLTextAreaElement | null;
+  if (!el) return;
+  // Ensure rows=1 so scrollHeight reflects actual content
+  if (el.rows !== 1) el.rows = 1;
+  el.style.overflow = "hidden";
+  el.style.height = "auto";
+  el.style.height = `${el.scrollHeight}px`;
+};
 
-export const ComposerInput = (props: ComposerInputProps) => {
+export const ComposerInput = ({
+  submitMode = "enter",
+  onKeyPress: onKeyPressProp,
+  numberOfLines,
+  style,
+  ...props
+}: ComposerInputProps) => {
   const aui = useAui();
   const text = useAuiState((s) => s.composer.text);
+  const inputRef = useRef<TextInput>(null);
 
   const onChangeText = useCallback(
     (value: string) => {
@@ -15,5 +51,39 @@ export const ComposerInput = (props: ComposerInputProps) => {
     [aui],
   );
 
-  return <TextInput value={text} onChangeText={onChangeText} {...props} />;
+  // Auto-resize textarea on web when text changes
+  useEffect(() => {
+    void text; // trigger re-run when text changes
+    adjustWebTextareaHeight(inputRef);
+  }, [text]);
+
+  const onKeyPress = useCallback(
+    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      onKeyPressProp?.(e);
+
+      if (Platform.OS !== "web") return;
+      if (submitMode !== "enter") return;
+
+      const nativeEvent = e.nativeEvent as TextInputKeyPressEventData & {
+        shiftKey?: boolean;
+      };
+      if (nativeEvent.key === "Enter" && !nativeEvent.shiftKey) {
+        (e as unknown as Event).preventDefault?.();
+        aui.composer().send();
+      }
+    },
+    [aui, submitMode, onKeyPressProp],
+  );
+
+  return (
+    <TextInput
+      ref={inputRef}
+      value={text}
+      onChangeText={onChangeText}
+      onKeyPress={onKeyPress}
+      numberOfLines={numberOfLines ?? (Platform.OS === "web" ? 1 : undefined)}
+      style={style}
+      {...props}
+    />
+  );
 };

package/src/primitives/composer/index.ts

@@ -1,25 +1,25 @@
-export { ComposerRoot, type ComposerRootProps } from "./ComposerRoot";
 export {
-  ComposerAttachments,
-  ComposerAttachmentByIndex,
+  ComposerRoot as Root,
+  type ComposerRootProps as RootProps,
+} from "./ComposerRoot";
+export {
+  ComposerAttachments as Attachments,
+  ComposerAttachmentByIndex as AttachmentByIndex,
 } from "./ComposerAttachments";
-export { ComposerInput, type ComposerInputProps } from "./ComposerInput";
-export { ComposerSend, type ComposerSendProps } from "./ComposerSend";
-export { ComposerCancel, type ComposerCancelProps } from "./ComposerCancel";
 export {
-  ComposerAddAttachment,
-  type ComposerAddAttachmentProps,
-} from "./ComposerAddAttachment";
-export { ComposerIf } from "./ComposerIf";
+  ComposerInput as Input,
+  type ComposerInputProps as InputProps,
+} from "./ComposerInput";
 export {
-  EditComposerInput,
-  type EditComposerInputProps,
-} from "./EditComposerInput";
+  ComposerSend as Send,
+  type ComposerSendProps as SendProps,
+} from "./ComposerSend";
 export {
-  EditComposerSend,
-  type EditComposerSendProps,
-} from "./EditComposerSend";
+  ComposerCancel as Cancel,
+  type ComposerCancelProps as CancelProps,
+} from "./ComposerCancel";
 export {
-  EditComposerCancel,
-  type EditComposerCancelProps,
-} from "./EditComposerCancel";
+  ComposerAddAttachment as AddAttachment,
+  type ComposerAddAttachmentProps as AddAttachmentProps,
+} from "./ComposerAddAttachment";
+export { ComposerIf as If } from "./ComposerIf";

package/src/primitives/message/index.ts

@@ -1,11 +1,17 @@
-export { MessageRoot, type MessageRootProps } from "./MessageRoot";
-export { MessageContent, type MessageContentProps } from "./MessageContent";
 export {
-  MessagePrimitiveParts,
-  MessagePrimitivePartByIndex,
+  MessageRoot as Root,
+  type MessageRootProps as RootProps,
+} from "./MessageRoot";
+export {
+  MessageContent as Content,
+  type MessageContentProps as ContentProps,
+} from "./MessageContent";
+export {
+  MessagePrimitiveParts as Parts,
+  MessagePrimitivePartByIndex as PartByIndex,
 } from "./MessageParts";
-export { MessageIf, type MessageIfProps } from "./MessageIf";
+export { MessageIf as If, type MessageIfProps as IfProps } from "./MessageIf";
 export {
-  MessageAttachments,
-  MessageAttachmentByIndex,
+  MessageAttachments as Attachments,
+  MessageAttachmentByIndex as AttachmentByIndex,
 } from "./MessageAttachments";

package/src/primitives/suggestion/index.ts

@@ -1,12 +1,12 @@
 export {
-  SuggestionTitle,
-  type SuggestionTitleProps,
+  SuggestionTitle as Title,
+  type SuggestionTitleProps as TitleProps,
 } from "./SuggestionTitle";
 export {
-  SuggestionDescription,
-  type SuggestionDescriptionProps,
+  SuggestionDescription as Description,
+  type SuggestionDescriptionProps as DescriptionProps,
 } from "./SuggestionDescription";
 export {
-  SuggestionTrigger,
-  type SuggestionTriggerProps,
+  SuggestionTrigger as Trigger,
+  type SuggestionTriggerProps as TriggerProps,
 } from "./SuggestionTrigger";

package/src/primitives/thread/ThreadMessages.tsx

@@ -1,51 +1,125 @@
-import { type ReactElement, useCallback } from "react";
+import { type ComponentType, type FC, memo, useCallback } from "react";
 import { FlatList, type FlatListProps } from "react-native";
 import type { ThreadMessage } from "@assistant-ui/core";
-import { useAui, useAuiState, AuiProvider, Derived } from "@assistant-ui/store";
+import { useAuiState } from "@assistant-ui/store";
+import { MessageByIndexProvider } from "@assistant-ui/core/react";
+
+type MessageComponents =
+  | {
+      Message: ComponentType;
+      EditComposer?: ComponentType | undefined;
+      UserEditComposer?: ComponentType | undefined;
+      AssistantEditComposer?: ComponentType | undefined;
+      SystemEditComposer?: ComponentType | undefined;
+      UserMessage?: ComponentType | undefined;
+      AssistantMessage?: ComponentType | undefined;
+      SystemMessage?: ComponentType | undefined;
+    }
+  | {
+      Message?: ComponentType | undefined;
+      EditComposer?: ComponentType | undefined;
+      UserEditComposer?: ComponentType | undefined;
+      AssistantEditComposer?: ComponentType | undefined;
+      SystemEditComposer?: ComponentType | undefined;
+      UserMessage: ComponentType;
+      AssistantMessage: ComponentType;
+      SystemMessage?: ComponentType | undefined;
+    };
 
 export type ThreadMessagesProps = Omit<
   FlatListProps<ThreadMessage>,
   "data" | "renderItem"
 > & {
-  renderMessage: (props: {
-    message: ThreadMessage;
-    index: number;
-  }) => ReactElement;
+  components: MessageComponents;
+};
+
+const DEFAULT_SYSTEM_MESSAGE = () => null;
+
+const getComponent = (
+  components: MessageComponents,
+  role: ThreadMessage["role"],
+  isEditing: boolean,
+) => {
+  switch (role) {
+    case "user":
+      if (isEditing) {
+        return (
+          components.UserEditComposer ??
+          components.EditComposer ??
+          components.UserMessage ??
+          (components.Message as ComponentType)
+        );
+      } else {
+        return components.UserMessage ?? (components.Message as ComponentType);
+      }
+    case "assistant":
+      if (isEditing) {
+        return (
+          components.AssistantEditComposer ??
+          components.EditComposer ??
+          components.AssistantMessage ??
+          (components.Message as ComponentType)
+        );
+      } else {
+        return (
+          components.AssistantMessage ?? (components.Message as ComponentType)
+        );
+      }
+    case "system":
+      if (isEditing) {
+        return (
+          components.SystemEditComposer ??
+          components.EditComposer ??
+          components.SystemMessage ??
+          (components.Message as ComponentType)
+        );
+      } else {
+        return (
+          components.SystemMessage ??
+          (components.Message as ComponentType) ??
+          DEFAULT_SYSTEM_MESSAGE
+        );
+      }
+    default: {
+      const _exhaustiveCheck: never = role;
+      throw new Error(`Unknown message role: ${_exhaustiveCheck}`);
+    }
+  }
 };
 
-const MessageScope = ({
-  index,
-  children,
-}: {
-  index: number;
-  children: ReactElement;
+const ThreadMessageComponent: FC<{ components: MessageComponents }> = ({
+  components,
 }) => {
-  const aui = useAui({
-    message: Derived({
-      source: "thread",
-      query: { type: "index", index },
-      get: (aui) => aui.threads().thread("main").message({ index }),
-    }),
-  });
-
-  return <AuiProvider value={aui}>{children}</AuiProvider>;
+  const role = useAuiState((s) => s.message.role);
+  const isEditing = useAuiState((s) => s.message.composer.isEditing);
+  const Component = getComponent(components, role, isEditing);
+
+  return <Component />;
 };
 
+const ThreadMessageByIndex = memo(
+  ({ index, components }: { index: number; components: MessageComponents }) => {
+    return (
+      <MessageByIndexProvider index={index}>
+        <ThreadMessageComponent components={components} />
+      </MessageByIndexProvider>
+    );
+  },
+  (prev, next) =>
+    prev.index === next.index && prev.components === next.components,
+);
+
 export const ThreadMessages = ({
-  renderMessage,
+  components,
   ...flatListProps
 }: ThreadMessagesProps) => {
   const messages = useAuiState((s) => s.thread.messages);
 
   const renderItem = useCallback(
-    ({ item, index }: { item: ThreadMessage; index: number }) => {
-      return (
-        <MessageScope index={index}>
-          {renderMessage({ message: item as ThreadMessage, index })}
-        </MessageScope>
-      );
+    ({ index }: { item: ThreadMessage; index: number }) => {
+      return <ThreadMessageByIndex index={index} components={components} />;
     },
-    [renderMessage],
+    [components],
   );
 
   const keyExtractor = useCallback((item: ThreadMessage) => item.id, []);

package/src/primitives/thread/index.ts

@@ -1,16 +1,22 @@
-export { ThreadRoot, type ThreadRootProps } from "./ThreadRoot";
-export { ThreadMessages, type ThreadMessagesProps } from "./ThreadMessages";
 export {
-  ThreadPrimitiveMessages,
-  ThreadPrimitiveMessageByIndex,
-} from "@assistant-ui/core/react";
-export { ThreadEmpty, type ThreadEmptyProps } from "./ThreadEmpty";
-export { ThreadIf, type ThreadIfProps } from "./ThreadIf";
+  ThreadRoot as Root,
+  type ThreadRootProps as RootProps,
+} from "./ThreadRoot";
+export {
+  ThreadMessages as Messages,
+  type ThreadMessagesProps as MessagesProps,
+} from "./ThreadMessages";
+export { ThreadPrimitiveMessageByIndex as MessageByIndex } from "@assistant-ui/core/react";
+export {
+  ThreadEmpty as Empty,
+  type ThreadEmptyProps as EmptyProps,
+} from "./ThreadEmpty";
+export { ThreadIf as If, type ThreadIfProps as IfProps } from "./ThreadIf";
 export {
-  ThreadSuggestion,
-  type ThreadSuggestionProps,
+  ThreadSuggestion as Suggestion,
+  type ThreadSuggestionProps as SuggestionProps,
 } from "./ThreadSuggestion";
 export {
-  ThreadPrimitiveSuggestions,
-  ThreadPrimitiveSuggestionByIndex,
+  ThreadPrimitiveSuggestions as Suggestions,
+  ThreadPrimitiveSuggestionByIndex as SuggestionByIndex,
 } from "@assistant-ui/core/react";