@assistant-ui/react-native 0.1.0 → 0.1.2

package/src/primitives/message/MessageParts.tsx

@@ -0,0 +1,60 @@
+import type { FC } from "react";
+import { Text } from "react-native";
+import {
+  MessagePrimitiveParts as MessagePrimitivePartsBase,
+  MessagePartComponent as MessagePartComponentBase,
+  MessagePrimitivePartByIndex as MessagePrimitivePartByIndexBase,
+  messagePartsDefaultComponents,
+} from "@assistant-ui/core/react";
+
+const rnDefaultComponents = {
+  ...messagePartsDefaultComponents,
+  Text: ({ text }: { text: string }) => <Text>{text}</Text>,
+} satisfies MessagePrimitiveParts.Props["components"];
+
+export namespace MessagePrimitiveParts {
+  export type Props = MessagePrimitivePartsBase.Props;
+}
+
+/**
+ * Renders the parts of a message with React Native-specific default components.
+ */
+export const MessagePrimitiveParts: FC<MessagePrimitiveParts.Props> = ({
+  components,
+  ...rest
+}) => {
+  const merged = components
+    ? {
+        Text: components.Text ?? rnDefaultComponents.Text,
+        Image: components.Image ?? messagePartsDefaultComponents.Image,
+        Reasoning:
+          components.Reasoning ?? messagePartsDefaultComponents.Reasoning,
+        Source: components.Source ?? messagePartsDefaultComponents.Source,
+        File: components.File ?? messagePartsDefaultComponents.File,
+        Unstable_Audio:
+          components.Unstable_Audio ??
+          messagePartsDefaultComponents.Unstable_Audio,
+        ...("ChainOfThought" in components
+          ? { ChainOfThought: components.ChainOfThought }
+          : {
+              tools: components.tools,
+              data: components.data,
+              ToolGroup:
+                components.ToolGroup ?? messagePartsDefaultComponents.ToolGroup,
+              ReasoningGroup:
+                components.ReasoningGroup ??
+                messagePartsDefaultComponents.ReasoningGroup,
+            }),
+        Empty: components.Empty,
+      }
+    : rnDefaultComponents;
+
+  return <MessagePrimitivePartsBase components={merged as any} {...rest} />;
+};
+
+MessagePrimitiveParts.displayName = "MessagePrimitive.Parts";
+
+export {
+  MessagePartComponentBase as MessagePartComponent,
+  MessagePrimitivePartByIndexBase as MessagePrimitivePartByIndex,
+};

package/src/primitives/message/index.ts

@@ -1,3 +1,11 @@
 export { MessageRoot, type MessageRootProps } from "./MessageRoot";
 export { MessageContent, type MessageContentProps } from "./MessageContent";
+export {
+  MessagePrimitiveParts,
+  MessagePrimitivePartByIndex,
+} from "./MessageParts";
 export { MessageIf, type MessageIfProps } from "./MessageIf";
+export {
+  MessageAttachments,
+  MessageAttachmentByIndex,
+} from "./MessageAttachments";

package/src/primitives/suggestion/SuggestionDescription.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type SuggestionDescriptionProps = TextProps & {
+  children?: ReactNode;
+};
+
+export const SuggestionDescription = ({
+  children,
+  ...textProps
+}: SuggestionDescriptionProps) => {
+  const label = useAuiState((s) => s.suggestion.label);
+
+  return <Text {...textProps}>{children ?? label}</Text>;
+};

package/src/primitives/suggestion/SuggestionTitle.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type SuggestionTitleProps = TextProps & {
+  children?: ReactNode;
+};
+
+export const SuggestionTitle = ({
+  children,
+  ...textProps
+}: SuggestionTitleProps) => {
+  const title = useAuiState((s) => s.suggestion.title);
+
+  return <Text {...textProps}>{children ?? title}</Text>;
+};

package/src/primitives/suggestion/SuggestionTrigger.tsx

@@ -0,0 +1,64 @@
+import { useCallback, type ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAuiState, useAui } from "@assistant-ui/store";
+
+export type SuggestionTriggerProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+  /**
+   * When true, automatically sends the message.
+   * When false, replaces or appends the composer text with the suggestion.
+   */
+  send?: boolean | undefined;
+  /**
+   * Whether to clear the composer. When send is false, determines if composer
+   * text is replaced (true) or appended (false).
+   * @default true
+   */
+  clearComposer?: boolean | undefined;
+};
+
+export const SuggestionTrigger = ({
+  children,
+  send,
+  clearComposer = true,
+  disabled: disabledProp,
+  ...pressableProps
+}: SuggestionTriggerProps) => {
+  const aui = useAui();
+  const isDisabled = useAuiState((s) => s.thread.isDisabled);
+  const prompt = useAuiState((s) => s.suggestion.prompt);
+  const resolvedSend = send ?? false;
+
+  const onPress = useCallback(() => {
+    const isRunning = aui.thread().getState().isRunning;
+
+    if (resolvedSend && !isRunning) {
+      aui.thread().append({
+        content: [{ type: "text", text: prompt }],
+        runConfig: aui.composer().getState().runConfig,
+      });
+      if (clearComposer) {
+        aui.composer().setText("");
+      }
+    } else {
+      if (clearComposer) {
+        aui.composer().setText(prompt);
+      } else {
+        const currentText = aui.composer().getState().text;
+        aui
+          .composer()
+          .setText(currentText.trim() ? `${currentText} ${prompt}` : prompt);
+      }
+    }
+  }, [aui, resolvedSend, clearComposer, prompt]);
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabledProp ?? isDisabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/suggestion/index.ts

@@ -0,0 +1,12 @@
+export {
+  SuggestionTitle,
+  type SuggestionTitleProps,
+} from "./SuggestionTitle";
+export {
+  SuggestionDescription,
+  type SuggestionDescriptionProps,
+} from "./SuggestionDescription";
+export {
+  SuggestionTrigger,
+  type SuggestionTriggerProps,
+} from "./SuggestionTrigger";

package/src/primitives/thread/ThreadIf.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useThread } from "../../hooks/useThread";
+import { useAuiState } from "@assistant-ui/store";
 
 export type ThreadIfProps = {
   children: ReactNode;
@@ -8,7 +8,7 @@ export type ThreadIfProps = {
 };
 
 export const ThreadIf = ({ children, empty, running }: ThreadIfProps) => {
-  const thread = useThread();
+  const thread = useAuiState((s) => s.thread);
 
   if (empty !== undefined) {
     const isEmpty = thread.messages.length === 0;

package/src/primitives/thread/ThreadSuggestion.tsx

@@ -0,0 +1,66 @@
+import { useCallback, type ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAuiState, useAui } from "@assistant-ui/store";
+
+export type ThreadSuggestionProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+  /** The suggestion prompt. */
+  prompt: string;
+  /**
+   * When true, automatically sends the message.
+   * When false, replaces or appends the composer text with the suggestion.
+   */
+  send?: boolean | undefined;
+  /**
+   * Whether to clear the composer. When send is false, determines if composer
+   * text is replaced (true) or appended (false).
+   * @default true
+   */
+  clearComposer?: boolean | undefined;
+};
+
+export const ThreadSuggestion = ({
+  children,
+  prompt,
+  send,
+  clearComposer = true,
+  disabled: disabledProp,
+  ...pressableProps
+}: ThreadSuggestionProps) => {
+  const aui = useAui();
+  const isDisabled = useAuiState((s) => s.thread.isDisabled);
+  const resolvedSend = send ?? false;
+
+  const onPress = useCallback(() => {
+    const isRunning = aui.thread().getState().isRunning;
+
+    if (resolvedSend && !isRunning) {
+      aui.thread().append({
+        content: [{ type: "text", text: prompt }],
+        runConfig: aui.composer().getState().runConfig,
+      });
+      if (clearComposer) {
+        aui.composer().setText("");
+      }
+    } else {
+      if (clearComposer) {
+        aui.composer().setText(prompt);
+      } else {
+        const currentText = aui.composer().getState().text;
+        aui
+          .composer()
+          .setText(currentText.trim() ? `${currentText} ${prompt}` : prompt);
+      }
+    }
+  }, [aui, resolvedSend, clearComposer, prompt]);
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabledProp ?? isDisabled}
+      {...pressableProps}
+    >
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/thread/index.ts

@@ -1,4 +1,16 @@
 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";
+export {
+  ThreadSuggestion,
+  type ThreadSuggestionProps,
+} from "./ThreadSuggestion";
+export {
+  ThreadPrimitiveSuggestions,
+  ThreadPrimitiveSuggestionByIndex,
+} from "@assistant-ui/core/react";

package/src/primitives/threadList/ThreadListItems.tsx

@@ -1,6 +1,6 @@
 import { type ReactElement, useCallback } from "react";
 import { FlatList, type FlatListProps } from "react-native";
-import { useThreadList } from "../../hooks/useThreadList";
+import { useAuiState } from "@assistant-ui/store";
 
 export type ThreadListItemsProps = Omit<
   FlatListProps<string>,
@@ -13,7 +13,7 @@ export const ThreadListItems = ({
   renderItem,
   ...flatListProps
 }: ThreadListItemsProps) => {
-  const threadIds = useThreadList((s) => s.threadIds);
+  const threadIds = useAuiState((s) => s.threads.threadIds);
 
   const renderFlatListItem = useCallback(
     ({ item, index }: { item: string; index: number }) => {

package/src/primitives/threadListItem/ThreadListItemArchive.tsx

@@ -0,0 +1,24 @@
+import { useCallback, type ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAui } from "@assistant-ui/store";
+
+export type ThreadListItemArchiveProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ThreadListItemArchive = ({
+  children,
+  ...pressableProps
+}: ThreadListItemArchiveProps) => {
+  const aui = useAui();
+
+  const onPress = useCallback(() => {
+    aui.threadListItem().archive();
+  }, [aui]);
+
+  return (
+    <Pressable onPress={onPress} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/threadListItem/ThreadListItemDelete.tsx

@@ -0,0 +1,24 @@
+import { useCallback, type ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAui } from "@assistant-ui/store";
+
+export type ThreadListItemDeleteProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ThreadListItemDelete = ({
+  children,
+  ...pressableProps
+}: ThreadListItemDeleteProps) => {
+  const aui = useAui();
+
+  const onPress = useCallback(() => {
+    aui.threadListItem().delete();
+  }, [aui]);
+
+  return (
+    <Pressable onPress={onPress} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

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

package/src/primitives/threadListItem/ThreadListItemTrigger.tsx

@@ -0,0 +1,24 @@
+import { useCallback, type ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAui } from "@assistant-ui/store";
+
+export type ThreadListItemTriggerProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ThreadListItemTrigger = ({
+  children,
+  ...pressableProps
+}: ThreadListItemTriggerProps) => {
+  const aui = useAui();
+
+  const onPress = useCallback(() => {
+    aui.threadListItem().switchTo();
+  }, [aui]);
+
+  return (
+    <Pressable onPress={onPress} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/threadListItem/ThreadListItemUnarchive.tsx

@@ -0,0 +1,24 @@
+import { useCallback, type ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAui } from "@assistant-ui/store";
+
+export type ThreadListItemUnarchiveProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ThreadListItemUnarchive = ({
+  children,
+  ...pressableProps
+}: ThreadListItemUnarchiveProps) => {
+  const aui = useAui();
+
+  const onPress = useCallback(() => {
+    aui.threadListItem().unarchive();
+  }, [aui]);
+
+  return (
+    <Pressable onPress={onPress} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/threadListItem/index.ts

@@ -0,0 +1,21 @@
+export {
+  ThreadListItemRoot,
+  type ThreadListItemRootProps,
+} from "./ThreadListItemRoot";
+export { ThreadListItemPrimitiveTitle as ThreadListItemTitle } from "@assistant-ui/core/react";
+export {
+  ThreadListItemTrigger,
+  type ThreadListItemTriggerProps,
+} from "./ThreadListItemTrigger";
+export {
+  ThreadListItemDelete,
+  type ThreadListItemDeleteProps,
+} from "./ThreadListItemDelete";
+export {
+  ThreadListItemArchive,
+  type ThreadListItemArchiveProps,
+} from "./ThreadListItemArchive";
+export {
+  ThreadListItemUnarchive,
+  type ThreadListItemUnarchiveProps,
+} from "./ThreadListItemUnarchive";

package/src/runtimes/RemoteThreadListThreadListRuntimeCore.tsx

@@ -24,6 +24,7 @@ import {
 import { create } from "zustand";
 import { AssistantMessageStream } from "assistant-stream";
 import type { ModelContextProvider } from "@assistant-ui/core";
+import { RuntimeAdapterProvider } from "../context/providers/RuntimeAdapterProvider";
 
 export class RemoteThreadListThreadListRuntimeCore
   extends BaseSubscribable
@@ -118,11 +119,14 @@ export class RemoteThreadListThreadListRuntimeCore
     return this._loadThreadsPromise;
   }
 
+  private readonly contextProvider: ModelContextProvider;
+
   constructor(
     options: RemoteThreadListOptions,
-    _contextProvider: ModelContextProvider,
+    contextProvider: ModelContextProvider,
   ) {
     super();
+    this.contextProvider = contextProvider;
 
     this._state.subscribe(() => this._notifySubscribers());
     this._hookManager = new RemoteThreadListHookInstanceManager(
@@ -516,12 +520,18 @@ export class RemoteThreadListThreadListRuntimeCore
     const boundIds = this.useBoundIds();
     const { Provider } = this.useProvider();
 
+    const adapters = {
+      modelContext: this.contextProvider,
+    };
+
     return (
       (boundIds.length === 0 || boundIds[0] === id) && (
         // only render if the component is the first one mounted
-        <this._hookManager.__internal_RenderThreadRuntimes
-          provider={Provider}
-        />
+        <RuntimeAdapterProvider adapters={adapters}>
+          <this._hookManager.__internal_RenderThreadRuntimes
+            provider={Provider}
+          />
+        </RuntimeAdapterProvider>
       )
     );
   };

package/src/runtimes/useLocalRuntime.ts

@@ -39,12 +39,12 @@ const useInnerLocalRuntime = (
   >,
 ): AssistantRuntime => {
   const { initialMessages, ...restOptions } = options;
-  const runtimeAdapters = useRuntimeAdapters();
+  const { modelContext, ...threadListAdapters } = useRuntimeAdapters() ?? {};
 
   const opt: LocalRuntimeOptionsBase = {
     ...restOptions,
     adapters: {
-      ...runtimeAdapters,
+      ...threadListAdapters,
       ...restOptions.adapters,
       chatModel,
     },
@@ -72,6 +72,11 @@ const useInnerLocalRuntime = (
     runtime.threads.getMainThreadRuntimeCore().__internal_load();
   });
 
+  useEffect(() => {
+    if (!modelContext) return undefined;
+    return runtime.registerModelContextProvider(modelContext);
+  }, [modelContext, runtime]);
+
   return useMemo(() => new AssistantRuntimeImpl(runtime), [runtime]);
 };
 

package/src/runtimes/useRemoteThreadListRuntime.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import {
   BaseAssistantRuntimeCore,
   AssistantRuntimeImpl,
@@ -44,11 +44,27 @@ const useRemoteThreadListRuntimeImpl = (
 export const useRemoteThreadListRuntime = (
   options: RemoteThreadListOptions,
 ): AssistantRuntime => {
+  const runtimeHookRef = useRef(options.runtimeHook);
+  runtimeHookRef.current = options.runtimeHook;
+
+  const stableRuntimeHook = useCallback(() => {
+    return runtimeHookRef.current();
+  }, []);
+
+  const stableOptions = useMemo<RemoteThreadListOptions>(
+    () => ({
+      adapter: options.adapter,
+      allowNesting: options.allowNesting,
+      runtimeHook: stableRuntimeHook,
+    }),
+    [options.adapter, options.allowNesting, stableRuntimeHook],
+  );
+
   const aui = useAui();
   const isNested = aui.threadListItem.source !== null;
 
   if (isNested) {
-    if (!options.allowNesting) {
+    if (!stableOptions.allowNesting) {
       throw new Error(
         "useRemoteThreadListRuntime cannot be nested inside another RemoteThreadListRuntime. " +
           "Set allowNesting: true to allow nesting (the inner runtime will become a no-op).",
@@ -57,8 +73,8 @@ export const useRemoteThreadListRuntime = (
 
     // If allowNesting is true and already inside a thread list context,
     // just call the runtimeHook directly (no-op behavior)
-    return options.runtimeHook();
+    return stableRuntimeHook();
   }
 
-  return useRemoteThreadListRuntimeImpl(options);
+  return useRemoteThreadListRuntimeImpl(stableOptions);
 };

package/src/types/index.ts

@@ -0,0 +1,23 @@
+// React component types (from core/react)
+export type {
+  EmptyMessagePartComponent,
+  EmptyMessagePartProps,
+  TextMessagePartComponent,
+  TextMessagePartProps,
+  ReasoningMessagePartComponent,
+  ReasoningMessagePartProps,
+  ReasoningGroupProps,
+  ReasoningGroupComponent,
+  SourceMessagePartComponent,
+  SourceMessagePartProps,
+  ImageMessagePartComponent,
+  ImageMessagePartProps,
+  FileMessagePartComponent,
+  FileMessagePartProps,
+  Unstable_AudioMessagePartComponent,
+  Unstable_AudioMessagePartProps,
+  DataMessagePartComponent,
+  DataMessagePartProps,
+  ToolCallMessagePartComponent,
+  ToolCallMessagePartProps,
+} from "@assistant-ui/core/react";

package/src/types/scopes/index.ts

@@ -0,0 +1,59 @@
+// Re-export core scope types
+export type {
+  ThreadsState,
+  ThreadsMethods,
+  ThreadsClientSchema,
+  ThreadListItemState,
+  ThreadListItemMethods,
+  ThreadListItemMeta,
+  ThreadListItemEvents,
+  ThreadListItemClientSchema,
+  ThreadState,
+  ThreadMethods,
+  ThreadMeta,
+  ThreadEvents,
+  ThreadClientSchema,
+  MessageState,
+  MessageMethods,
+  MessageMeta,
+  MessageClientSchema,
+  PartState,
+  PartMethods,
+  PartMeta,
+  PartClientSchema,
+  ComposerState,
+  ComposerMethods,
+  ComposerMeta,
+  ComposerEvents,
+  ComposerClientSchema,
+  AttachmentState,
+  AttachmentMethods,
+  AttachmentMeta,
+  AttachmentClientSchema,
+  SuggestionsState,
+  SuggestionsMethods,
+  SuggestionsClientSchema,
+  Suggestion,
+  SuggestionState,
+  SuggestionMethods,
+  SuggestionMeta,
+  SuggestionClientSchema,
+  ModelContextState,
+  ModelContextMethods,
+  ModelContextClientSchema,
+  ChainOfThoughtState,
+  ChainOfThoughtMethods,
+  ChainOfThoughtMeta,
+  ChainOfThoughtClientSchema,
+  ChainOfThoughtPart,
+} from "@assistant-ui/core/store";
+
+// Scope types from core/react
+export type {
+  ToolsState,
+  ToolsMethods,
+  ToolsClientSchema,
+  DataRenderersState,
+  DataRenderersMethods,
+  DataRenderersClientSchema,
+} from "@assistant-ui/core/react";

package/dist/hooks/index.d.ts

@@ -1,6 +0,0 @@
-export { useThread } from "./useThread.js";
-export { useMessage } from "./useMessage.js";
-export { useComposer } from "./useComposer.js";
-export { useContentPart } from "./useContentPart.js";
-export { useThreadList } from "./useThreadList.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,uBAAoB;AACxC,OAAO,EAAE,UAAU,EAAE,wBAAqB;AAC1C,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAC5C,OAAO,EAAE,cAAc,EAAE,4BAAyB;AAClD,OAAO,EAAE,aAAa,EAAE,2BAAwB"}

package/dist/hooks/index.js

@@ -1,6 +0,0 @@
-export { useThread } from "./useThread.js";
-export { useMessage } from "./useMessage.js";
-export { useComposer } from "./useComposer.js";
-export { useContentPart } from "./useContentPart.js";
-export { useThreadList } from "./useThreadList.js";
-//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,uBAAoB;AACxC,OAAO,EAAE,UAAU,EAAE,wBAAqB;AAC1C,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAC5C,OAAO,EAAE,cAAc,EAAE,4BAAyB;AAClD,OAAO,EAAE,aAAa,EAAE,2BAAwB"}

package/dist/hooks/useComposer.d.ts

@@ -1,4 +0,0 @@
-import type { ComposerState } from "@assistant-ui/core/store";
-export declare function useComposer(): ComposerState;
-export declare function useComposer<TSelected>(selector: (state: ComposerState) => TSelected): TSelected;
-//# sourceMappingURL=useComposer.d.ts.map