@assistant-ui/react-native 0.1.0 → 0.1.2

package/src/context/AssistantContext.tsx

@@ -1,10 +1,7 @@
-import { type ComponentType, type ReactNode, memo } from "react";
-import { useAui, AuiProvider } from "@assistant-ui/store";
-import type {
-  AssistantRuntime,
-  AssistantRuntimeCore,
-} from "@assistant-ui/core";
-import { RuntimeAdapter } from "../runtimes/runtime-adapter";
+import { type ReactNode, memo } from "react";
+import { useAui } from "@assistant-ui/store";
+import type { AssistantRuntime } from "@assistant-ui/core";
+import { AssistantProviderBase } from "@assistant-ui/core/react";
 
 export const useAssistantRuntime = (): AssistantRuntime => {
   const aui = useAui();
@@ -17,12 +14,6 @@ export const useAssistantRuntime = (): AssistantRuntime => {
   return runtime;
 };
 
-const getRenderComponent = (runtime: AssistantRuntime) => {
-  return (runtime as { _core?: AssistantRuntimeCore })._core?.RenderComponent as
-    | ComponentType
-    | undefined;
-};
-
 export const AssistantProvider = memo(
   ({
     runtime,
@@ -31,14 +22,10 @@ export const AssistantProvider = memo(
     runtime: AssistantRuntime;
     children: ReactNode;
   }) => {
-    const aui = useAui({ threads: RuntimeAdapter(runtime) }, { parent: null });
-    const RenderComponent = getRenderComponent(runtime);
-
     return (
-      <AuiProvider value={aui}>
-        {RenderComponent && <RenderComponent />}
+      <AssistantProviderBase runtime={runtime}>
         {children}
-      </AuiProvider>
+      </AssistantProviderBase>
     );
   },
 );

package/src/context/providers/AttachmentByIndexProvider.tsx

@@ -0,0 +1,4 @@
+export {
+  MessageAttachmentByIndexProvider,
+  ComposerAttachmentByIndexProvider,
+} from "@assistant-ui/core/react";

package/src/context/providers/RuntimeAdapterProvider.tsx

@@ -2,9 +2,11 @@ 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;
 };

package/src/context/providers/ThreadListItemRuntimeProvider.tsx

@@ -1,16 +1 @@
-import { type FC, type PropsWithChildren } from "react";
-import { useAui, AuiProvider } from "@assistant-ui/store";
-import type { ThreadListItemRuntime } from "@assistant-ui/core";
-import { ThreadListItemClient } from "@assistant-ui/core/store/internal";
-
-export const ThreadListItemRuntimeProvider: FC<
-  PropsWithChildren<{
-    runtime: ThreadListItemRuntime;
-  }>
-> = ({ runtime, children }) => {
-  const aui = useAui({
-    threadListItem: ThreadListItemClient({ runtime }),
-  });
-
-  return <AuiProvider value={aui}>{children}</AuiProvider>;
-};
+export { ThreadListItemRuntimeProvider } from "@assistant-ui/core/react";

package/src/index.ts

@@ -1,3 +1,5 @@
+import "@assistant-ui/core/react"; // store-augmentation side-effect (tools, dataRenderers scopes)
+
 // Re-export core types
 export type {
   // Message types
@@ -38,11 +40,31 @@ export type {
   // Attachment types
   Attachment,
   PendingAttachment,
+  CreateAttachment,
   AttachmentRuntime,
+  // Adapter types
+  AttachmentAdapter,
+  ThreadHistoryAdapter,
+  FeedbackAdapter,
+  SuggestionAdapter,
   // Other
   Unsubscribe,
 } from "@assistant-ui/core";
 
+// Re-export core remote thread list types
+export type {
+  RemoteThreadListAdapter,
+  RemoteThreadListOptions,
+} from "@assistant-ui/core";
+export { InMemoryThreadListAdapter } from "@assistant-ui/core";
+
+// Attachment adapter implementations
+export {
+  SimpleImageAttachmentAdapter,
+  SimpleTextAttachmentAdapter,
+  CompositeAttachmentAdapter,
+} from "@assistant-ui/core";
+
 // Re-export store scope state types
 export type {
   ThreadState,
@@ -53,26 +75,25 @@ export type {
   ThreadListItemState,
 } from "@assistant-ui/core/store";
 
-// Store hooks
+// Store hooks and components
 export {
   useAui,
   useAuiState,
   useAuiEvent,
   AuiProvider,
+  AuiIf,
+  type AssistantClient,
+  type AssistantState,
+  type AssistantEventScope,
+  type AssistantEventSelector,
+  type AssistantEventName,
+  type AssistantEventPayload,
+  type AssistantEventCallback,
 } from "@assistant-ui/store";
 
 // Context providers and hooks
 export { AssistantProvider, useAssistantRuntime } from "./context";
 
-// State hooks
-export {
-  useThread,
-  useMessage,
-  useComposer,
-  useContentPart,
-  useThreadList,
-} from "./hooks";
-
 // Primitive hooks
 export {
   useThreadMessages,
@@ -90,6 +111,7 @@ export {
   useActionBarFeedbackNegative,
   useEditComposerSend,
   useEditComposerCancel,
+  useComposerAddAttachment,
 } from "./primitive-hooks";
 
 // Runtime
@@ -99,13 +121,6 @@ export {
   useRemoteThreadListRuntime,
 } from "./runtimes";
 
-// Re-export core remote thread list types
-export type {
-  RemoteThreadListAdapter,
-  RemoteThreadListOptions,
-} from "@assistant-ui/core";
-export { InMemoryThreadListAdapter } from "@assistant-ui/core";
-
 // Primitives
 export * from "./primitives/thread";
 export * from "./primitives/composer";
@@ -113,6 +128,26 @@ 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";
+
+// Re-export shared providers from core/react
+export {
+  ThreadListItemByIndexProvider,
+  ChainOfThoughtByIndicesProvider,
+  MessageByIndexProvider,
+  PartByIndexProvider,
+  TextMessagePartProvider,
+  ChainOfThoughtPartByIndexProvider,
+  SuggestionByIndexProvider,
+} from "@assistant-ui/core/react";
+
+// Model context, tools & clients
+export * from "./model-context";
+export * from "./client";
+export * from "./types";
 
 // Adapters
 export {

package/src/model-context/index.ts

@@ -0,0 +1,44 @@
+// Re-export shared from core/react
+export {
+  makeAssistantTool,
+  type AssistantTool,
+  makeAssistantToolUI,
+  type AssistantToolUI,
+  makeAssistantDataUI,
+  type AssistantDataUI,
+  useAssistantTool,
+  type AssistantToolProps,
+  useAssistantToolUI,
+  type AssistantToolUIProps,
+  useAssistantDataUI,
+  type AssistantDataUIProps,
+  useAssistantInstructions,
+  useInlineRender,
+  type Toolkit,
+  type ToolDefinition,
+  Tools,
+  DataRenderers,
+} from "@assistant-ui/core/react";
+
+// Core pass-through (unchanged)
+export type {
+  ModelContext,
+  ModelContextProvider,
+  LanguageModelConfig,
+  LanguageModelV1CallSettings,
+} from "@assistant-ui/core";
+
+export { mergeModelContexts } from "@assistant-ui/core";
+
+export type { Tool } from "assistant-stream";
+
+export { tool } from "@assistant-ui/core";
+
+export { Suggestions, type SuggestionConfig } from "@assistant-ui/core/store";
+
+export { ModelContextRegistry } from "@assistant-ui/core";
+export type {
+  ModelContextRegistryToolHandle,
+  ModelContextRegistryInstructionHandle,
+  ModelContextRegistryProviderHandle,
+} from "@assistant-ui/core";

package/src/primitive-hooks/index.ts

@@ -17,3 +17,4 @@ export {
 } from "./useActionBarFeedback";
 export { useEditComposerSend } from "./useEditComposerSend";
 export { useEditComposerCancel } from "./useEditComposerCancel";
+export { useComposerAddAttachment } from "./useComposerAddAttachment";

package/src/primitive-hooks/useComposerAddAttachment.ts

@@ -0,0 +1,16 @@
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+import type { CreateAttachment } from "@assistant-ui/core";
+
+export const useComposerAddAttachment = () => {
+  const aui = useAui();
+
+  const addAttachment = useCallback(
+    (file: File | CreateAttachment) => {
+      return aui.composer().addAttachment(file);
+    },
+    [aui],
+  );
+
+  return { addAttachment };
+};

package/src/primitive-hooks/useThreadIsRunning.ts

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

package/src/primitives/attachment/AttachmentName.tsx

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type AttachmentNameProps = TextProps;
+
+export const AttachmentName: FC<AttachmentNameProps> = (props) => {
+  const name = useAuiState((s) => s.attachment.name);
+  return <Text {...props}>{name}</Text>;
+};

package/src/primitives/attachment/AttachmentRemove.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+
+export type AttachmentRemoveProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const AttachmentRemove = ({
+  children,
+  ...pressableProps
+}: AttachmentRemoveProps) => {
+  const aui = useAui();
+
+  const handleRemove = useCallback(() => {
+    aui.attachment().remove();
+  }, [aui]);
+
+  return (
+    <Pressable onPress={handleRemove} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/attachment/AttachmentRoot.tsx

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

package/src/primitives/attachment/AttachmentThumb.tsx

@@ -0,0 +1,13 @@
+import type { FC } from "react";
+import { Text, type TextProps } from "react-native";
+import { useAuiState } from "@assistant-ui/store";
+
+export type AttachmentThumbProps = TextProps;
+
+export const AttachmentThumb: FC<AttachmentThumbProps> = (props) => {
+  const ext = useAuiState((s) => {
+    const parts = s.attachment.name.split(".");
+    return parts.length > 1 ? parts.pop()! : "";
+  });
+  return <Text {...props}>.{ext}</Text>;
+};

package/src/primitives/attachment/index.ts

@@ -0,0 +1,7 @@
+export { AttachmentRoot, type AttachmentRootProps } from "./AttachmentRoot";
+export { AttachmentName, type AttachmentNameProps } from "./AttachmentName";
+export { AttachmentThumb, type AttachmentThumbProps } from "./AttachmentThumb";
+export {
+  AttachmentRemove,
+  type AttachmentRemoveProps,
+} from "./AttachmentRemove";

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.tsx

@@ -0,0 +1,28 @@
+import { useCallback, type ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useAuiState, useAui } from "@assistant-ui/store";
+
+export type ChainOfThoughtAccordionTriggerProps = Omit<
+  PressableProps,
+  "onPress"
+> & {
+  children: ReactNode;
+};
+
+export const ChainOfThoughtAccordionTrigger = ({
+  children,
+  ...pressableProps
+}: ChainOfThoughtAccordionTriggerProps) => {
+  const aui = useAui();
+  const collapsed = useAuiState((s) => s.chainOfThought.collapsed);
+
+  const onPress = useCallback(() => {
+    aui.chainOfThought().setCollapsed(!collapsed);
+  }, [aui, collapsed]);
+
+  return (
+    <Pressable onPress={onPress} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/chainOfThought/ChainOfThoughtRoot.tsx

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

package/src/primitives/chainOfThought/index.ts

@@ -0,0 +1,9 @@
+export {
+  ChainOfThoughtRoot,
+  type ChainOfThoughtRootProps,
+} from "./ChainOfThoughtRoot";
+export {
+  ChainOfThoughtAccordionTrigger,
+  type ChainOfThoughtAccordionTriggerProps,
+} from "./ChainOfThoughtAccordionTrigger";
+export { ChainOfThoughtPrimitiveParts } from "@assistant-ui/core/react";

package/src/primitives/composer/ComposerAddAttachment.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import { useComposerAddAttachment } from "../../primitive-hooks/useComposerAddAttachment";
+import { useAuiState } from "@assistant-ui/store";
+
+export type ComposerAddAttachmentProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+/**
+ * A button that triggers the attachment adding flow.
+ *
+ * Note: The actual file picker implementation is platform-specific.
+ * This component calls `useComposerAddAttachment()` from your primitive-hooks.
+ * You must handle the file selection in your own component using the returned `addAttachment` callback.
+ */
+export const ComposerAddAttachment = ({
+  children,
+  disabled: disabledProp,
+  ...pressableProps
+}: ComposerAddAttachmentProps) => {
+  const isDisabled = useAuiState((s) => !s.composer.isEditing);
+  const { addAttachment: _addAttachment } = useComposerAddAttachment();
+
+  return (
+    <Pressable disabled={disabledProp ?? isDisabled} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/composer/ComposerAttachments.tsx

@@ -0,0 +1,25 @@
+import type { ComponentType } from "react";
+import {
+  ComposerPrimitiveAttachments,
+  ComposerPrimitiveAttachmentByIndex,
+} from "@assistant-ui/core/react";
+
+export type AttachmentComponents = {
+  Image?: ComponentType | undefined;
+  Document?: ComponentType | undefined;
+  File?: ComponentType | undefined;
+  Attachment?: ComponentType | undefined;
+};
+
+export type ComposerAttachmentsProps = {
+  components: AttachmentComponents | undefined;
+};
+
+export type ComposerAttachmentByIndexProps = {
+  index: number;
+  components?: AttachmentComponents | undefined;
+};
+
+export const ComposerAttachmentByIndex = ComposerPrimitiveAttachmentByIndex;
+
+export const ComposerAttachments = ComposerPrimitiveAttachments;

package/src/primitives/composer/ComposerIf.tsx

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

package/src/primitives/composer/index.ts

@@ -1,7 +1,16 @@
 export { ComposerRoot, type ComposerRootProps } from "./ComposerRoot";
+export {
+  ComposerAttachments,
+  ComposerAttachmentByIndex,
+} 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";
 export {
   EditComposerInput,
   type EditComposerInputProps,

package/src/primitives/message/MessageAttachments.tsx

@@ -0,0 +1,18 @@
+import {
+  MessagePrimitiveAttachments,
+  MessagePrimitiveAttachmentByIndex,
+} from "@assistant-ui/core/react";
+import type { AttachmentComponents } from "../composer/ComposerAttachments";
+
+export type MessageAttachmentsProps = {
+  components: AttachmentComponents | undefined;
+};
+
+export type MessageAttachmentByIndexProps = {
+  index: number;
+  components?: AttachmentComponents | undefined;
+};
+
+export const MessageAttachmentByIndex = MessagePrimitiveAttachmentByIndex;
+
+export const MessageAttachments = MessagePrimitiveAttachments;

package/src/primitives/message/MessageContent.tsx

@@ -1,10 +1,16 @@
-import { type ReactElement, Fragment } from "react";
+import { type ReactElement, Fragment, useMemo } from "react";
 import { Text } from "react-native";
 import type {
   ThreadUserMessagePart,
   ThreadAssistantMessagePart,
+  ToolCallMessagePart,
+  DataMessagePart,
 } from "@assistant-ui/core";
-import { useMessage } from "../../hooks/useMessage";
+import { useAui, useAuiState } from "@assistant-ui/store";
+import type {
+  ToolCallMessagePartProps,
+  DataMessagePartProps,
+} from "../../types";
 
 type MessageContentPart = ThreadUserMessagePart | ThreadAssistantMessagePart;
 
@@ -47,6 +53,63 @@ const DefaultTextRenderer = ({
   return <Text>{part.text}</Text>;
 };
 
+const ToolUIDisplay = ({
+  Fallback,
+  part,
+  index,
+}: {
+  Fallback:
+    | ((props: { part: ToolCallMessagePart; index: number }) => ReactElement)
+    | undefined;
+  part: ToolCallMessagePart;
+  index: number;
+}) => {
+  const aui = useAui();
+  const Render = useAuiState((s) => {
+    const renders = s.tools.tools[part.toolName];
+    if (Array.isArray(renders)) return renders[0];
+    return renders;
+  });
+
+  const partMethods = useMemo(
+    () => aui.message().part({ index }),
+    [aui, index],
+  );
+
+  if (Render) {
+    return (
+      <Render
+        {...(part as ToolCallMessagePartProps)}
+        addResult={partMethods.addToolResult}
+        resume={partMethods.resumeToolCall}
+      />
+    );
+  }
+  if (Fallback) return <Fallback part={part} index={index} />;
+  return null;
+};
+
+const DataUIDisplay = ({
+  Fallback,
+  part,
+  index,
+}: {
+  Fallback:
+    | ((props: { part: DataMessagePart; index: number }) => ReactElement)
+    | undefined;
+  part: DataMessagePart;
+  index: number;
+}) => {
+  const Render = useAuiState((s) => {
+    const renders = s.dataRenderers.renderers[part.name];
+    if (Array.isArray(renders)) return renders[0];
+    return renders;
+  });
+  if (Render) return <Render {...(part as DataMessagePartProps)} />;
+  if (Fallback) return <Fallback part={part} index={index} />;
+  return null;
+};
+
 export const MessageContent = ({
   renderText,
   renderToolCall,
@@ -56,7 +119,7 @@ export const MessageContent = ({
   renderFile,
   renderData,
 }: MessageContentProps) => {
-  const content = useMessage((s) => s.content);
+  const content = useAuiState((s) => s.message.content);
 
   return (
     <>
@@ -74,9 +137,14 @@ export const MessageContent = ({
               </Fragment>
             );
           case "tool-call":
-            if (!renderToolCall) return null;
             return (
-              <Fragment key={key}>{renderToolCall({ part, index })}</Fragment>
+              <Fragment key={key}>
+                <ToolUIDisplay
+                  Fallback={renderToolCall}
+                  part={part}
+                  index={index}
+                />
+              </Fragment>
             );
           case "image":
             if (!renderImage) return null;
@@ -97,8 +165,15 @@ export const MessageContent = ({
             if (!renderFile) return null;
             return <Fragment key={key}>{renderFile({ part, index })}</Fragment>;
           case "data":
-            if (!renderData) return null;
-            return <Fragment key={key}>{renderData({ part, index })}</Fragment>;
+            return (
+              <Fragment key={key}>
+                <DataUIDisplay
+                  Fallback={renderData}
+                  part={part}
+                  index={index}
+                />
+              </Fragment>
+            );
           default:
             return null;
         }

package/src/primitives/message/MessageIf.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useMessage } from "../../hooks/useMessage";
+import { useAuiState } from "@assistant-ui/store";
 
 export type MessageIfProps = {
   children: ReactNode;
@@ -16,7 +16,7 @@ export const MessageIf = ({
   running,
   last,
 }: MessageIfProps) => {
-  const message = useMessage();
+  const message = useAuiState((s) => s.message);
 
   if (user !== undefined) {
     if (user !== (message.role === "user")) return null;