@assistant-ui/react-native 0.1.0

package/src/primitives/composer/EditComposerSend.tsx

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

package/src/primitives/composer/index.ts

@@ -0,0 +1,16 @@
+export { ComposerRoot, type ComposerRootProps } from "./ComposerRoot";
+export { ComposerInput, type ComposerInputProps } from "./ComposerInput";
+export { ComposerSend, type ComposerSendProps } from "./ComposerSend";
+export { ComposerCancel, type ComposerCancelProps } from "./ComposerCancel";
+export {
+  EditComposerInput,
+  type EditComposerInputProps,
+} from "./EditComposerInput";
+export {
+  EditComposerSend,
+  type EditComposerSendProps,
+} from "./EditComposerSend";
+export {
+  EditComposerCancel,
+  type EditComposerCancelProps,
+} from "./EditComposerCancel";

package/src/primitives/message/MessageContent.tsx

@@ -0,0 +1,108 @@
+import { type ReactElement, Fragment } from "react";
+import { Text } from "react-native";
+import type {
+  ThreadUserMessagePart,
+  ThreadAssistantMessagePart,
+} from "@assistant-ui/core";
+import { useMessage } from "../../hooks/useMessage";
+
+type MessageContentPart = ThreadUserMessagePart | ThreadAssistantMessagePart;
+
+export type MessageContentProps = {
+  renderText?: (props: {
+    part: Extract<MessageContentPart, { type: "text" }>;
+    index: number;
+  }) => ReactElement;
+  renderToolCall?: (props: {
+    part: Extract<MessageContentPart, { type: "tool-call" }>;
+    index: number;
+  }) => ReactElement;
+  renderImage?: (props: {
+    part: Extract<MessageContentPart, { type: "image" }>;
+    index: number;
+  }) => ReactElement;
+  renderReasoning?: (props: {
+    part: Extract<MessageContentPart, { type: "reasoning" }>;
+    index: number;
+  }) => ReactElement;
+  renderSource?: (props: {
+    part: Extract<MessageContentPart, { type: "source" }>;
+    index: number;
+  }) => ReactElement;
+  renderFile?: (props: {
+    part: Extract<MessageContentPart, { type: "file" }>;
+    index: number;
+  }) => ReactElement;
+  renderData?: (props: {
+    part: Extract<MessageContentPart, { type: "data" }>;
+    index: number;
+  }) => ReactElement;
+};
+
+const DefaultTextRenderer = ({
+  part,
+}: {
+  part: Extract<MessageContentPart, { type: "text" }>;
+}) => {
+  return <Text>{part.text}</Text>;
+};
+
+export const MessageContent = ({
+  renderText,
+  renderToolCall,
+  renderImage,
+  renderReasoning,
+  renderSource,
+  renderFile,
+  renderData,
+}: MessageContentProps) => {
+  const content = useMessage((s) => s.content);
+
+  return (
+    <>
+      {content.map((part, index) => {
+        const key = `${part.type}-${index}`;
+        switch (part.type) {
+          case "text":
+            return (
+              <Fragment key={key}>
+                {renderText ? (
+                  renderText({ part, index })
+                ) : (
+                  <DefaultTextRenderer part={part} />
+                )}
+              </Fragment>
+            );
+          case "tool-call":
+            if (!renderToolCall) return null;
+            return (
+              <Fragment key={key}>{renderToolCall({ part, index })}</Fragment>
+            );
+          case "image":
+            if (!renderImage) return null;
+            return (
+              <Fragment key={key}>{renderImage({ part, index })}</Fragment>
+            );
+          case "reasoning":
+            if (!renderReasoning) return null;
+            return (
+              <Fragment key={key}>{renderReasoning({ part, index })}</Fragment>
+            );
+          case "source":
+            if (!renderSource) return null;
+            return (
+              <Fragment key={key}>{renderSource({ part, index })}</Fragment>
+            );
+          case "file":
+            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>;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};

package/src/primitives/message/MessageIf.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { useMessage } from "../../hooks/useMessage";
+
+export type MessageIfProps = {
+  children: ReactNode;
+  user?: boolean | undefined;
+  assistant?: boolean | undefined;
+  running?: boolean | undefined;
+  last?: boolean | undefined;
+};
+
+export const MessageIf = ({
+  children,
+  user,
+  assistant,
+  running,
+  last,
+}: MessageIfProps) => {
+  const message = useMessage();
+
+  if (user !== undefined) {
+    if (user !== (message.role === "user")) return null;
+  }
+
+  if (assistant !== undefined) {
+    if (assistant !== (message.role === "assistant")) return null;
+  }
+
+  if (running !== undefined) {
+    const isRunning =
+      message.role === "assistant" && message.status.type === "running";
+    if (running !== isRunning) return null;
+  }
+
+  if (last !== undefined) {
+    if (last !== message.isLast) return null;
+  }
+
+  return <>{children}</>;
+};

package/src/primitives/message/MessageRoot.tsx

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

package/src/primitives/message/index.ts

@@ -0,0 +1,3 @@
+export { MessageRoot, type MessageRootProps } from "./MessageRoot";
+export { MessageContent, type MessageContentProps } from "./MessageContent";
+export { MessageIf, type MessageIfProps } from "./MessageIf";

package/src/primitives/thread/ThreadEmpty.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { useThreadIsEmpty } from "../../primitive-hooks/useThreadIsEmpty";
+
+export type ThreadEmptyProps = {
+  children: ReactNode;
+};
+
+export const ThreadEmpty = ({ children }: ThreadEmptyProps) => {
+  const isEmpty = useThreadIsEmpty();
+  if (!isEmpty) return null;
+  return <>{children}</>;
+};

package/src/primitives/thread/ThreadIf.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { useThread } from "../../hooks/useThread";
+
+export type ThreadIfProps = {
+  children: ReactNode;
+  empty?: boolean | undefined;
+  running?: boolean | undefined;
+};
+
+export const ThreadIf = ({ children, empty, running }: ThreadIfProps) => {
+  const thread = useThread();
+
+  if (empty !== undefined) {
+    const isEmpty = thread.messages.length === 0;
+    if (empty !== isEmpty) return null;
+  }
+
+  if (running !== undefined) {
+    if (running !== thread.isRunning) return null;
+  }
+
+  return <>{children}</>;
+};

package/src/primitives/thread/ThreadMessages.tsx

@@ -0,0 +1,61 @@
+import { type ReactElement, 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";
+
+export type ThreadMessagesProps = Omit<
+  FlatListProps<ThreadMessage>,
+  "data" | "renderItem"
+> & {
+  renderMessage: (props: {
+    message: ThreadMessage;
+    index: number;
+  }) => ReactElement;
+};
+
+const MessageScope = ({
+  index,
+  children,
+}: {
+  index: number;
+  children: ReactElement;
+}) => {
+  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>;
+};
+
+export const ThreadMessages = ({
+  renderMessage,
+  ...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>
+      );
+    },
+    [renderMessage],
+  );
+
+  const keyExtractor = useCallback((item: ThreadMessage) => item.id, []);
+
+  return (
+    <FlatList
+      data={messages as unknown as ThreadMessage[]}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      {...flatListProps}
+    />
+  );
+};

package/src/primitives/thread/ThreadRoot.tsx

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

package/src/primitives/thread/index.ts

@@ -0,0 +1,4 @@
+export { ThreadRoot, type ThreadRootProps } from "./ThreadRoot";
+export { ThreadMessages, type ThreadMessagesProps } from "./ThreadMessages";
+export { ThreadEmpty, type ThreadEmptyProps } from "./ThreadEmpty";
+export { ThreadIf, type ThreadIfProps } from "./ThreadIf";

package/src/primitives/threadList/ThreadListItems.tsx

@@ -0,0 +1,35 @@
+import { type ReactElement, useCallback } from "react";
+import { FlatList, type FlatListProps } from "react-native";
+import { useThreadList } from "../../hooks/useThreadList";
+
+export type ThreadListItemsProps = Omit<
+  FlatListProps<string>,
+  "data" | "renderItem"
+> & {
+  renderItem: (props: { threadId: string; index: number }) => ReactElement;
+};
+
+export const ThreadListItems = ({
+  renderItem,
+  ...flatListProps
+}: ThreadListItemsProps) => {
+  const threadIds = useThreadList((s) => s.threadIds);
+
+  const renderFlatListItem = useCallback(
+    ({ item, index }: { item: string; index: number }) => {
+      return renderItem({ threadId: item, index });
+    },
+    [renderItem],
+  );
+
+  const keyExtractor = useCallback((item: string) => item, []);
+
+  return (
+    <FlatList
+      data={threadIds as string[]}
+      renderItem={renderFlatListItem}
+      keyExtractor={keyExtractor}
+      {...flatListProps}
+    />
+  );
+};

package/src/primitives/threadList/ThreadListNew.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 ThreadListNewProps = Omit<PressableProps, "onPress"> & {
+  children: ReactNode;
+};
+
+export const ThreadListNew = ({
+  children,
+  ...pressableProps
+}: ThreadListNewProps) => {
+  const aui = useAui();
+
+  const onPress = useCallback(() => {
+    aui.threads().switchToNewThread();
+  }, [aui]);
+
+  return (
+    <Pressable onPress={onPress} {...pressableProps}>
+      {children}
+    </Pressable>
+  );
+};

package/src/primitives/threadList/ThreadListRoot.tsx

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

package/src/primitives/threadList/index.ts

@@ -0,0 +1,3 @@
+export { ThreadListRoot, type ThreadListRootProps } from "./ThreadListRoot";
+export { ThreadListItems, type ThreadListItemsProps } from "./ThreadListItems";
+export { ThreadListNew, type ThreadListNewProps } from "./ThreadListNew";

package/src/runtimes/RemoteThreadListHookInstanceManager.tsx

@@ -0,0 +1,180 @@
+import {
+  FC,
+  useCallback,
+  useRef,
+  useEffect,
+  memo,
+  PropsWithChildren,
+  ComponentType,
+  useMemo,
+} from "react";
+import { UseBoundStore, StoreApi, create } from "zustand";
+import { useAui } from "@assistant-ui/store";
+import { ThreadListItemRuntimeProvider } from "../context/providers/ThreadListItemRuntimeProvider";
+import type {
+  ThreadListRuntimeCore,
+  ThreadRuntimeCore,
+  AssistantRuntime,
+} from "@assistant-ui/core";
+import {
+  BaseSubscribable,
+  ThreadRuntimeImpl,
+  ThreadListRuntimeImpl,
+} from "@assistant-ui/core/internal";
+
+type RemoteThreadListHook = () => AssistantRuntime;
+
+type RemoteThreadListHookInstance = {
+  runtime?: ThreadRuntimeCore;
+};
+export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
+  private useRuntimeHook: UseBoundStore<
+    StoreApi<{ useRuntime: RemoteThreadListHook }>
+  >;
+  private instances = new Map<string, RemoteThreadListHookInstance>();
+  private useAliveThreadsKeysChanged = create(() => ({}));
+  private parent: ThreadListRuntimeCore;
+
+  constructor(
+    runtimeHook: RemoteThreadListHook,
+    parent: ThreadListRuntimeCore,
+  ) {
+    super();
+    this.parent = parent;
+    this.useRuntimeHook = create(() => ({ useRuntime: runtimeHook }));
+  }
+
+  public startThreadRuntime(threadId: string) {
+    if (!this.instances.has(threadId)) {
+      this.instances.set(threadId, {});
+      this.useAliveThreadsKeysChanged.setState({}, true);
+    }
+
+    return new Promise<ThreadRuntimeCore>((resolve, reject) => {
+      const callback = () => {
+        const instance = this.instances.get(threadId);
+        if (!instance) {
+          dispose();
+          reject(new Error("Thread was deleted before runtime was started"));
+        } else if (!instance.runtime) {
+          return; // misc update
+        } else {
+          dispose();
+          resolve(instance.runtime);
+        }
+      };
+      const dispose = this.subscribe(callback);
+      callback();
+    });
+  }
+
+  public getThreadRuntimeCore(threadId: string) {
+    const instance = this.instances.get(threadId);
+    if (!instance) return undefined;
+    return instance.runtime;
+  }
+
+  public stopThreadRuntime(threadId: string) {
+    this.instances.delete(threadId);
+    this.useAliveThreadsKeysChanged.setState({}, true);
+  }
+
+  public setRuntimeHook(newRuntimeHook: RemoteThreadListHook) {
+    const prevRuntimeHook = this.useRuntimeHook.getState().useRuntime;
+    if (prevRuntimeHook !== newRuntimeHook) {
+      this.useRuntimeHook.setState({ useRuntime: newRuntimeHook }, true);
+    }
+  }
+
+  private _InnerActiveThreadProvider: FC<{
+    threadId: string;
+  }> = ({ threadId }) => {
+    const { useRuntime } = this.useRuntimeHook();
+    const runtime = useRuntime();
+
+    const threadBinding = (runtime.thread as ThreadRuntimeImpl)
+      .__internal_threadBinding;
+
+    const updateRuntime = useCallback(() => {
+      const aliveThread = this.instances.get(threadId);
+      if (!aliveThread)
+        throw new Error("Thread not found. This is a bug in assistant-ui.");
+
+      aliveThread.runtime = threadBinding.getState();
+      this._notifySubscribers();
+    }, [threadId, threadBinding]);
+
+    const isMounted = useRef(false);
+    if (!isMounted.current) {
+      updateRuntime();
+    }
+
+    useEffect(() => {
+      isMounted.current = true;
+      updateRuntime();
+      return threadBinding.outerSubscribe(updateRuntime);
+    }, [threadBinding, updateRuntime]);
+
+    const aui = useAui();
+    const initPromiseRef = useRef<Promise<unknown> | undefined>(undefined);
+
+    useEffect(() => {
+      const runtimeCore = threadBinding.getState();
+      const setGetInitializePromise = (runtimeCore as Record<string, unknown>)[
+        "__internal_setGetInitializePromise"
+      ];
+      if (typeof setGetInitializePromise === "function") {
+        setGetInitializePromise.call(runtimeCore, () => initPromiseRef.current);
+      }
+    }, [threadBinding]);
+
+    useEffect(() => {
+      return runtime.threads.main.unstable_on("initialize", () => {
+        const state = aui.threadListItem().getState();
+        if (state.status === "new") {
+          initPromiseRef.current = aui.threadListItem().initialize();
+
+          const dispose = runtime.thread.unstable_on("runEnd", () => {
+            dispose();
+
+            aui.threadListItem().generateTitle();
+          });
+        }
+      });
+    }, [runtime, aui]);
+
+    return null;
+  };
+
+  private _OuterActiveThreadProvider: FC<{
+    threadId: string;
+    provider: ComponentType<PropsWithChildren>;
+  }> = memo(({ threadId, provider: Provider }) => {
+    const runtime = useMemo(
+      () => new ThreadListRuntimeImpl(this.parent).getItemById(threadId),
+      [threadId],
+    );
+
+    return (
+      <ThreadListItemRuntimeProvider runtime={runtime}>
+        <Provider>
+          <this._InnerActiveThreadProvider threadId={threadId} />
+        </Provider>
+      </ThreadListItemRuntimeProvider>
+    );
+  });
+
+  public __internal_RenderThreadRuntimes: FC<{
+    provider: ComponentType<PropsWithChildren>;
+  }> = ({ provider }) => {
+    this.useAliveThreadsKeysChanged(); // trigger re-render on alive threads change
+
+    return Array.from(this.instances.keys()).map((threadId) => (
+      <this._OuterActiveThreadProvider
+        key={threadId}
+        threadId={threadId}
+        provider={provider}
+      />
+    ));
+  };
+}