@assistant-ui/react 0.7.23 → 0.7.25

package/src/runtimes/remote-thread-list/EMPTY_THREAD_CORE.tsx

@@ -0,0 +1,158 @@
+import { ThreadRuntimeCore } from "../../internal";
+
+const EMPTY_THREAD_ERROR = new Error(
+  "This is the empty thread, a placeholder for the main thread. You cannot perform any actions on this thread instance. This error is probably because you tried to call a thread method in your render function. Call the method inside a `useEffect` hook instead.",
+);
+export const EMPTY_THREAD_CORE: ThreadRuntimeCore = {
+  getMessageById() {
+    return undefined;
+  },
+
+  getBranches() {
+    return [];
+  },
+
+  switchToBranch() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  append() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  startRun() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  cancelRun() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  addToolResult() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  speak() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  stopSpeaking() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  getSubmittedFeedback() {
+    return undefined;
+  },
+
+  submitFeedback() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  getModelConfig() {
+    return {};
+  },
+
+  composer: {
+    attachments: [],
+
+    getAttachmentAccept() {
+      return "*";
+    },
+
+    async addAttachment() {
+      throw EMPTY_THREAD_ERROR;
+    },
+
+    async removeAttachment() {
+      throw EMPTY_THREAD_ERROR;
+    },
+
+    isEditing: false,
+
+    canCancel: false,
+    isEmpty: true,
+
+    text: "",
+
+    setText() {
+      throw EMPTY_THREAD_ERROR;
+    },
+
+    role: "user",
+
+    setRole() {
+      throw EMPTY_THREAD_ERROR;
+    },
+
+    runConfig: {},
+
+    setRunConfig() {
+      throw EMPTY_THREAD_ERROR;
+    },
+
+    reset() {
+      throw EMPTY_THREAD_ERROR;
+    },
+
+    send() {
+      throw EMPTY_THREAD_ERROR;
+    },
+
+    cancel() {
+      throw EMPTY_THREAD_ERROR;
+    },
+
+    subscribe() {
+      return () => {};
+    },
+
+    unstable_on() {
+      return () => {};
+    },
+  },
+
+  getEditComposer() {
+    return undefined;
+  },
+
+  beginEdit() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  speech: undefined,
+
+  capabilities: {
+    switchToBranch: false,
+    edit: false,
+    reload: false,
+    cancel: false,
+    unstable_copy: false,
+    speech: false,
+    attachments: false,
+    feedback: false,
+  },
+
+  isDisabled: true,
+
+  messages: [],
+
+  suggestions: [],
+
+  extras: undefined,
+
+  subscribe() {
+    return () => {};
+  },
+
+  import() {
+    throw EMPTY_THREAD_ERROR;
+  },
+
+  export() {
+    return { messages: [] };
+  },
+
+  unstable_on() {
+    return () => {};
+  },
+};

package/src/runtimes/remote-thread-list/OptimisticState.ts

@@ -0,0 +1,82 @@
+import { BaseSubscribable } from "./BaseSubscribable";
+
+type Transform<TState, TResult> = {
+  execute: () => Promise<TResult>;
+
+  /** transform the state after the promise resolves */
+  then?: (state: TState, result: TResult) => TState;
+
+  /** transform the state during resolution and afterwards */
+  optimistic?: (state: TState) => TState;
+
+  /** transform the state only while loading */
+  loading?: (state: TState) => TState;
+};
+
+const pipeTransforms = <TState, TExtra>(
+  initialState: TState,
+  extraParam: TExtra,
+  transforms: (((state: TState, extra: TExtra) => TState) | undefined)[],
+): TState => {
+  return transforms.reduce((state, transform) => {
+    return transform?.(state, extraParam) ?? state;
+  }, initialState);
+};
+
+export class OptimisticState<TState> extends BaseSubscribable {
+  private readonly _pendingTransforms: Array<Transform<TState, any>> = [];
+  private _baseValue: TState;
+  private _cachedValue: TState;
+
+  public constructor(initialState: TState) {
+    super();
+    this._baseValue = initialState;
+    this._cachedValue = initialState;
+  }
+
+  private _updateState(): void {
+    this._cachedValue = this._pendingTransforms.reduce((state, transform) => {
+      return pipeTransforms(state, undefined, [
+        transform.loading,
+        transform.optimistic,
+      ]);
+    }, this._baseValue);
+
+    this._notifySubscribers();
+  }
+
+  public get baseValue(): TState {
+    return this._baseValue;
+  }
+
+  public get value(): TState {
+    return this._cachedValue;
+  }
+
+  public update(state: TState): void {
+    this._baseValue = state;
+    this._updateState();
+  }
+
+  public async optimisticUpdate<TResult>(
+    transform: Transform<TState, TResult>,
+  ): Promise<TResult> {
+    this._pendingTransforms.push(transform);
+    this._updateState();
+
+    try {
+      const result = await transform.execute();
+      this._baseValue = pipeTransforms(this._baseValue, result, [
+        transform.optimistic,
+        transform.then,
+      ]);
+      return result;
+    } finally {
+      const index = this._pendingTransforms.indexOf(transform);
+      if (index > -1) {
+        this._pendingTransforms.splice(index, 1);
+      }
+      this._updateState();
+    }
+  }
+}

package/src/runtimes/remote-thread-list/RemoteThreadListHookInstanceManager.tsx

@@ -0,0 +1,132 @@
+import { FC, useCallback, useRef, useEffect, memo, useMemo } from "react";
+import { UseBoundStore, StoreApi, create } from "zustand";
+import { useAssistantRuntime } from "../../context";
+import { ThreadListItemRuntimeProvider } from "../../context/providers/ThreadListItemRuntimeProvider";
+import { useThreadListItem } from "../../context/react/ThreadListItemContext";
+import { ThreadRuntimeCore, ThreadRuntimeImpl } from "../../internal";
+import { BaseSubscribable } from "./BaseSubscribable";
+import { RemoteThreadListHook } from "./types";
+
+type RemoteThreadListHookInstance = {
+  runtime?: ThreadRuntimeCore;
+};
+export class RemoteThreadListHookInstanceManager extends BaseSubscribable {
+  private useRuntimeHook: UseBoundStore<
+    StoreApi<{ useRuntime: RemoteThreadListHook }>
+  >;
+  private instances = new Map<string, RemoteThreadListHookInstance>();
+  private useAliveThreadsKeysChanged = create(() => ({}));
+
+  constructor(runtimeHook: RemoteThreadListHook) {
+    super();
+    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)
+      throw new Error(
+        "getThreadRuntimeCore not found. This is a bug in assistant-ui.",
+      );
+    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 = () => {
+    const { id } = useThreadListItem();
+
+    const { useRuntime } = this.useRuntimeHook();
+    const runtime = useRuntime();
+
+    const threadBinding = (runtime.thread as ThreadRuntimeImpl)
+      .__internal_threadBinding;
+
+    const updateRuntime = useCallback(() => {
+      const aliveThread = this.instances.get(id);
+      if (!aliveThread)
+        throw new Error("Thread not found. This is a bug in assistant-ui.");
+
+      aliveThread.runtime = threadBinding.getState();
+
+      if (isMounted) {
+        this._notifySubscribers();
+      }
+    }, [id, threadBinding]);
+
+    const isMounted = useRef(false);
+    if (!isMounted.current) {
+      updateRuntime();
+    }
+
+    useEffect(() => {
+      isMounted.current = true;
+      updateRuntime();
+      return threadBinding.outerSubscribe(updateRuntime);
+    }, [threadBinding]);
+
+    return null;
+  };
+
+  private _OuterActiveThreadProvider: FC<{ threadId: string }> = memo(
+    ({ threadId }) => {
+      const assistantRuntime = useAssistantRuntime();
+      const threadListItemRuntime = useMemo(
+        () => assistantRuntime.threadList.getItemById(threadId),
+        [assistantRuntime, threadId],
+      );
+
+      return (
+        <ThreadListItemRuntimeProvider runtime={threadListItemRuntime}>
+          <this._InnerActiveThreadProvider />
+        </ThreadListItemRuntimeProvider>
+      );
+    },
+  );
+
+  public __internal_RenderThreadRuntimes: FC = () => {
+    this.useAliveThreadsKeysChanged(); // trigger re-render on alive threads change
+
+    return [
+      ...this.instances
+        .keys()
+        .map((threadId) => (
+          <this._OuterActiveThreadProvider key={threadId} threadId={threadId} />
+        )),
+    ];
+  };
+}