@assistant-ui/react 0.7.46 → 0.7.48

package/src/context/react/utils/createContextHook.ts

@@ -12,11 +12,9 @@ export function createContextHook<T>(
   context: Context<T | null>,
   providerName: string,
 ) {
-  function useContextHook(options?: { optional?: false | undefined }): T;
   function useContextHook(options?: {
     optional?: boolean | undefined;
-  }): T | null;
-  function useContextHook(options?: { optional?: boolean | undefined }) {
+  }): T | null {
     const contextValue = useContext(context);
     if (!options?.optional && !contextValue) {
       throw new Error(`This component must be used within ${providerName}.`);

package/src/context/react/utils/createStateHookForRuntime.ts

@@ -0,0 +1,80 @@
+import {
+  SubscribableRuntime,
+  useRuntimeStateInternal,
+} from "./useRuntimeState";
+
+export function createStateHookForRuntime<TState>(
+  useRuntime: (options: {
+    optional: boolean | undefined;
+  }) => SubscribableRuntime<TState> | null,
+) {
+  // empty
+  function useStoreHook(): TState;
+
+  // selector
+  function useStoreHook<TSelected>(
+    selector: (state: TState) => TSelected,
+  ): TSelected;
+
+  // selector?
+  function useStoreHook<TSelected>(
+    selector: ((state: TState) => TSelected) | undefined,
+  ): TSelected | TState;
+
+  // optional=false
+  function useStoreHook(options: { optional?: false | undefined }): TState;
+
+  // optional?
+  function useStoreHook(options: {
+    optional?: boolean | undefined;
+  }): TState | null;
+
+  // optional=false, selector
+  function useStoreHook<TSelected>(options: {
+    optional?: false | undefined;
+    selector: (state: TState) => TSelected;
+  }): TSelected;
+
+  // optional=false, selector?
+  function useStoreHook<TSelected>(options: {
+    optional?: false | undefined;
+    selector: ((state: TState) => TSelected) | undefined;
+  }): TSelected | TState;
+
+  // optional?, selector
+  function useStoreHook<TSelected>(options: {
+    optional?: boolean | undefined;
+    selector: (state: TState) => TSelected;
+  }): TSelected | null;
+
+  // optional?, selector?
+  function useStoreHook<TSelected>(options: {
+    optional?: boolean | undefined;
+    selector: ((state: TState) => TSelected) | undefined;
+  }): TSelected | TState | null;
+
+  function useStoreHook<TSelected>(
+    param?:
+      | ((state: TState) => TSelected)
+      | {
+          optional?: boolean | undefined;
+          selector?: ((state: TState) => TSelected) | undefined;
+        },
+  ): TSelected | TState | null {
+    let optional = false;
+    let selector: ((state: TState) => TSelected) | undefined;
+
+    if (typeof param === "function") {
+      selector = param;
+    } else if (param) {
+      optional = !!param.optional;
+      selector = param.selector;
+    }
+
+    const store = useRuntime({ optional });
+    if (!store) return null;
+    return useRuntimeStateInternal(store, selector);
+  }
+
+  return useStoreHook;
+}

package/src/context/react/utils/ensureBinding.ts

@@ -0,0 +1,45 @@
+type Bindable = {
+  __internal_bindMethods?: () => void;
+  __isBound?: boolean;
+};
+const debugVerifyPrototype = (
+  runtime: Record<string, unknown>,
+  prototype: any,
+) => {
+  const unboundMethods = Object.getOwnPropertyNames(prototype).filter(
+    (methodStr) => {
+      const descriptor = Object.getOwnPropertyDescriptor(prototype, methodStr);
+      const isMethod = descriptor && typeof descriptor.value === "function";
+      if (!isMethod) return false;
+
+      const methodName = methodStr as keyof typeof runtime | "constructor";
+      return (
+        isMethod &&
+        !methodName.startsWith("_") &&
+        methodName !== "constructor" &&
+        prototype[methodName] === runtime[methodName]
+      );
+    },
+  );
+
+  if (unboundMethods.length > 0) {
+    throw new Error(
+      "The following methods are not bound: " + JSON.stringify(unboundMethods),
+    );
+  }
+
+  const prototypePrototype = Object.getPrototypeOf(prototype);
+  if (prototypePrototype && prototypePrototype !== Object.prototype) {
+    debugVerifyPrototype(runtime, prototypePrototype);
+  }
+};
+export const ensureBinding = (r: unknown) => {
+  const runtime = r as Bindable;
+  if (runtime.__isBound) return;
+
+  runtime.__internal_bindMethods?.();
+  runtime.__isBound = true;
+
+  // @ts-ignore - strip this out in production build
+  DEV: debugVerifyPrototype(runtime, Object.getPrototypeOf(runtime));
+};

package/src/context/react/utils/useRuntimeState.ts

@@ -0,0 +1,46 @@
+import { useDebugValue, useSyncExternalStore } from "react";
+import { Unsubscribe } from "../../../types";
+import { ensureBinding } from "./ensureBinding";
+
+export type SubscribableRuntime<TState> = {
+  getState: () => TState;
+  subscribe: (callback: () => void) => Unsubscribe;
+};
+
+export function useRuntimeStateInternal<TState, TSelected>(
+  runtime: SubscribableRuntime<TState>,
+  selector: ((state: TState) => TSelected) | undefined = identity as any,
+): TSelected | TState {
+  // TODO move to useRuntimeState
+  ensureBinding(runtime);
+
+  const slice = useSyncExternalStore(
+    runtime.subscribe,
+    () => selector(runtime.getState()),
+    () => selector(runtime.getState()),
+  );
+  useDebugValue(slice);
+  return slice;
+}
+
+const identity = <T>(arg: T): T => arg;
+export function useRuntimeState<TState>(
+  runtime: SubscribableRuntime<TState>,
+): TState;
+export function useRuntimeState<TState, TSelected>(
+  runtime: SubscribableRuntime<TState>,
+  selector: (state: TState) => TSelected,
+): TSelected;
+export function useRuntimeState<TState, TSelected>(
+  runtime: SubscribableRuntime<TState>,
+  selector: ((state: TState) => TSelected) | undefined,
+): TSelected | TState;
+export function useRuntimeState<TState, TSelected>(
+  runtime: SubscribableRuntime<TState>,
+  selector?: ((state: TState) => TSelected) | undefined,
+): TSelected | TState {
+  // ensure that the runtime is bound
+  // ensureBinding(runtime);
+
+  return useRuntimeStateInternal(runtime, selector);
+}

package/src/runtimes/adapters/attachment/AttachmentAdapter.ts

@@ -7,7 +7,9 @@ import {
 export type AttachmentAdapter = {
   accept: string;
 
-  add(state: { file: File }): Promise<PendingAttachment>;
+  add(state: {
+    file: File;
+  }): Promise<PendingAttachment> | AsyncGenerator<PendingAttachment, void>;
   remove(attachment: Attachment): Promise<void>;
   send(attachment: PendingAttachment): Promise<CompleteAttachment>;
 };

package/src/runtimes/adapters/attachment/CompositeAttachmentAdapter.ts

@@ -65,7 +65,7 @@ export class CompositeAttachmentAdapter implements AttachmentAdapter {
     }
   }
 
-  public async add(state: { file: File }) {
+  public add(state: { file: File }) {
     for (const adapter of this._adapters) {
       if (fileMatchesAccept(state.file, adapter.accept)) {
         return adapter.add(state);

package/src/runtimes/adapters/thread-history/ThreadHistoryAdapter.ts

@@ -3,6 +3,7 @@ import {
   ExportedMessageRepositoryItem,
 } from "../../utils/MessageRepository";
 
+// TODO external store - which version to save? how to restore?
 export type ThreadHistoryAdapter = {
   load(): Promise<ExportedMessageRepository>;
   append(item: ExportedMessageRepositoryItem): Promise<void>;

package/src/runtimes/composer/BaseComposerRuntimeCore.tsx

@@ -158,9 +158,31 @@ export abstract class BaseComposerRuntimeCore
     const adapter = this.getAttachmentAdapter();
     if (!adapter) throw new Error("Attachments are not supported");
 
-    const attachment = await adapter.add({ file });
+    const upsertAttachment = (a: PendingAttachment) => {
+      const idx = this._attachments.findIndex((attachment) => attachment.id === a.id);
+      if (idx !== -1)
+        this._attachments = [
+          ...this._attachments.slice(0, idx),
+          a,
+          ...this._attachments.slice(idx + 1),
+        ];
+      else {
+        this._attachments = [...this._attachments, a];
+        this._notifyEventSubscribers("attachment_add");
+      }
+
+      this._notifySubscribers();
+    };
+
+    const promiseOrGenerator = adapter.add({ file });
+    if (Symbol.asyncIterator in promiseOrGenerator) {
+      for await (const r of promiseOrGenerator) {
+        upsertAttachment(r);
+      }
+    } else {
+      upsertAttachment(await promiseOrGenerator);
+    }
 
-    this._attachments = [...this._attachments, attachment as PendingAttachment];
     this._notifyEventSubscribers("attachment_add");
     this._notifySubscribers();
   }

package/src/runtimes/local/useLocalRuntime.tsx

@@ -19,6 +19,11 @@ class LocalRuntimeImpl extends AssistantRuntimeImpl implements LocalRuntime {
     super(core, ThreadRuntimeImpl);
   }
 
+  public override __internal_bindMethods() {
+    super.__internal_bindMethods();
+    this.reset = this.reset.bind(this);
+  }
+
   public reset(options?: Parameters<LocalRuntimeCore["reset"]>[0]) {
     this.core.reset(options);
   }