@assistant-ui/react-native 0.1.2 → 0.1.4

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";

package/src/primitives/threadList/index.ts

@@ -1,3 +1,12 @@
-export { ThreadListRoot, type ThreadListRootProps } from "./ThreadListRoot";
-export { ThreadListItems, type ThreadListItemsProps } from "./ThreadListItems";
-export { ThreadListNew, type ThreadListNewProps } from "./ThreadListNew";
+export {
+  ThreadListRoot as Root,
+  type ThreadListRootProps as RootProps,
+} from "./ThreadListRoot";
+export {
+  ThreadListItems as Items,
+  type ThreadListItemsProps as ItemsProps,
+} from "./ThreadListItems";
+export {
+  ThreadListNew as New,
+  type ThreadListNewProps as NewProps,
+} from "./ThreadListNew";

package/src/primitives/threadListItem/index.ts

@@ -1,21 +1,21 @@
 export {
-  ThreadListItemRoot,
-  type ThreadListItemRootProps,
+  ThreadListItemRoot as Root,
+  type ThreadListItemRootProps as RootProps,
 } from "./ThreadListItemRoot";
-export { ThreadListItemPrimitiveTitle as ThreadListItemTitle } from "@assistant-ui/core/react";
+export { ThreadListItemPrimitiveTitle as Title } from "@assistant-ui/core/react";
 export {
-  ThreadListItemTrigger,
-  type ThreadListItemTriggerProps,
+  ThreadListItemTrigger as Trigger,
+  type ThreadListItemTriggerProps as TriggerProps,
 } from "./ThreadListItemTrigger";
 export {
-  ThreadListItemDelete,
-  type ThreadListItemDeleteProps,
+  ThreadListItemDelete as Delete,
+  type ThreadListItemDeleteProps as DeleteProps,
 } from "./ThreadListItemDelete";
 export {
-  ThreadListItemArchive,
-  type ThreadListItemArchiveProps,
+  ThreadListItemArchive as Archive,
+  type ThreadListItemArchiveProps as ArchiveProps,
 } from "./ThreadListItemArchive";
 export {
-  ThreadListItemUnarchive,
-  type ThreadListItemUnarchiveProps,
+  ThreadListItemUnarchive as Unarchive,
+  type ThreadListItemUnarchiveProps as UnarchiveProps,
 } from "./ThreadListItemUnarchive";

package/src/runtimes/RemoteThreadListHookInstanceManager.tsx

@@ -1,180 +1 @@
-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}
-      />
-    ));
-  };
-}
+export { RemoteThreadListHookInstanceManager } from "@assistant-ui/core/react";