@assistant-ui/react 0.7.25 → 0.7.27

package/src/model-config/useAssistantInstructions.tsx

@@ -3,9 +3,27 @@
 import { useEffect } from "react";
 import { useAssistantRuntime } from "../context";
 
-export const useAssistantInstructions = (instruction: string) => {
+type AssistantInstructionsConfig = {
+  disabled?: boolean | undefined;
+  instruction: string;
+};
+
+const getInstructions = (
+  instruction: string | AssistantInstructionsConfig,
+): AssistantInstructionsConfig => {
+  if (typeof instruction === "string") return { instruction };
+  return instruction;
+};
+
+export const useAssistantInstructions = (
+  config: string | AssistantInstructionsConfig,
+) => {
+  const { instruction, disabled = false } = getInstructions(config);
   const assistantRuntime = useAssistantRuntime();
+
   useEffect(() => {
+    if (disabled) return;
+
     const config = {
       system: instruction,
     };

package/src/runtimes/core/AssistantRuntimeCore.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { ComponentType, PropsWithChildren } from "react";
 import type { ModelConfigProvider } from "../../types/ModelConfigTypes";
 import type { Unsubscribe } from "../../types/Unsubscribe";
 import { ThreadListRuntimeCore } from "./ThreadListRuntimeCore";
@@ -8,5 +8,12 @@ export type AssistantRuntimeCore = {
 
   registerModelConfigProvider: (provider: ModelConfigProvider) => Unsubscribe;
 
-  __internal_RenderComponent?: React.FC<PropsWithChildren>;
+  /**
+   * A Provider component that wraps the app via `AssistantRuntimeProvider`.
+   *
+   * Note: This field is expected to never change.
+   * Refer to the source implementation of `ExternalStoreRuntimeCore`
+   * for an example of updating the provider via a zustand store.
+   */
+  readonly Provider: ComponentType<PropsWithChildren> | undefined;
 };

package/src/runtimes/core/BaseAssistantRuntimeCore.tsx

@@ -3,10 +3,14 @@ import type { Unsubscribe } from "../../types/Unsubscribe";
 import type { AssistantRuntimeCore } from "./AssistantRuntimeCore";
 import { ProxyConfigProvider } from "../../utils/ProxyConfigProvider";
 import { ThreadListRuntimeCore } from "./ThreadListRuntimeCore";
+import { ComponentType } from "react";
 
 export abstract class BaseAssistantRuntimeCore implements AssistantRuntimeCore {
   protected readonly _proxyConfigProvider = new ProxyConfigProvider();
   public abstract get threadList(): ThreadListRuntimeCore;
+  public abstract get Provider():
+    | ComponentType<React.PropsWithChildren>
+    | undefined;
 
   constructor() {}
 

package/src/runtimes/core/ThreadRuntimeCore.tsx

@@ -89,6 +89,11 @@ export type ThreadRuntimeCore = Readonly<{
   isDisabled: boolean;
   messages: readonly ThreadMessage[];
   suggestions: readonly ThreadSuggestion[];
+
+  /**
+   * @deprecated This field is deprecated and will be removed in 0.8.0.
+   * Please migrate to using `AssistantRuntimeCore.Provider` instead.
+   */
   extras: unknown;
 
   subscribe: (callback: () => void) => Unsubscribe;

package/src/runtimes/external-store/ExternalStoreAdapter.tsx

@@ -1,3 +1,4 @@
+import { PropsWithChildren } from "react";
 import { AppendMessage, ThreadMessage } from "../../types";
 import { AttachmentAdapter } from "../attachment";
 import {
@@ -53,6 +54,11 @@ type ExternalStoreAdapterBase<T> = {
   isRunning?: boolean | undefined;
   messages: T[];
   suggestions?: readonly ThreadSuggestion[] | undefined;
+
+  /**
+   * @deprecated This field is deprecated and will be removed in 0.8.0. 
+   * Please migrate to `Provider` and a custom react context provider component instead.
+   */
   extras?: unknown;
 
   setMessages?: ((messages: T[]) => void) | undefined;
@@ -82,6 +88,8 @@ type ExternalStoreAdapterBase<T> = {
         copy?: boolean | undefined;
       }
     | undefined;
+
+  unstable_Provider?: React.ComponentType<PropsWithChildren> | undefined;
 };
 
 export type ExternalStoreAdapter<T = ThreadMessage> =

package/src/runtimes/external-store/ExternalStoreRuntimeCore.tsx

@@ -2,6 +2,9 @@ import { BaseAssistantRuntimeCore } from "../../internal";
 import { ExternalStoreThreadListRuntimeCore } from "./ExternalStoreThreadListRuntimeCore";
 import { ExternalStoreAdapter } from "./ExternalStoreAdapter";
 import { ExternalStoreThreadRuntimeCore } from "./ExternalStoreThreadRuntimeCore";
+import { Fragment } from "react/jsx-runtime";
+import { PropsWithChildren } from "react";
+import { create } from "zustand";
 
 const getThreadListAdapter = (store: ExternalStoreAdapter<any>) => {
   return {
@@ -12,18 +15,35 @@ const getThreadListAdapter = (store: ExternalStoreAdapter<any>) => {
 export class ExternalStoreRuntimeCore extends BaseAssistantRuntimeCore {
   public readonly threadList;
 
-  constructor(store: ExternalStoreAdapter<any>) {
+  private useRenderComponent;
+
+  constructor(adapter: ExternalStoreAdapter<any>) {
     super();
+    this.useRenderComponent = create(() => ({
+      RenderComponent: adapter.unstable_Provider ?? Fragment,
+    }));
     this.threadList = new ExternalStoreThreadListRuntimeCore(
-      getThreadListAdapter(store),
+      getThreadListAdapter(adapter),
       () =>
-        new ExternalStoreThreadRuntimeCore(this._proxyConfigProvider, store),
+        new ExternalStoreThreadRuntimeCore(this._proxyConfigProvider, adapter),
     );
   }
 
-  public setStore(store: ExternalStoreAdapter<any>) {
+  public setAdapter(adapter: ExternalStoreAdapter<any>) {
     // Update the thread list adapter and propagate store changes to the main thread
-    this.threadList.__internal_setAdapter(getThreadListAdapter(store));
-    this.threadList.getMainThreadRuntimeCore().__internal_setStore(store);
+    this.threadList.__internal_setAdapter(getThreadListAdapter(adapter));
+    this.threadList.getMainThreadRuntimeCore().__internal_setAdapter(adapter);
+
+    const RenderComponent = adapter.unstable_Provider ?? Fragment;
+    if (
+      RenderComponent !== this.useRenderComponent.getState().RenderComponent
+    ) {
+      this.useRenderComponent.setState({ RenderComponent }, true);
+    }
   }
+
+  public readonly Provider = ({ children }: PropsWithChildren) => {
+    const RenderComponent = this.useRenderComponent.getState().RenderComponent;
+    return <RenderComponent>{children}</RenderComponent>;
+  };
 }

package/src/runtimes/external-store/ExternalStoreThreadRuntimeCore.tsx

@@ -80,10 +80,10 @@ export class ExternalStoreThreadRuntimeCore
     store: ExternalStoreAdapter<any>,
   ) {
     super(configProvider);
-    this.__internal_setStore(store);
+    this.__internal_setAdapter(store);
   }
 
-  public __internal_setStore(store: ExternalStoreAdapter<any>) {
+  public __internal_setAdapter(store: ExternalStoreAdapter<any>) {
     if (this._store === store) return;
 
     const isRunning = store.isRunning ?? false;

package/src/runtimes/external-store/useExternalStoreRuntime.tsx

@@ -8,7 +8,7 @@ export const useExternalStoreRuntime = <T,>(store: ExternalStoreAdapter<T>) => {
   const [runtime] = useState(() => new ExternalStoreRuntimeCore(store));
 
   useEffect(() => {
-    runtime.setStore(store);
+    runtime.setAdapter(store);
   });
 
   return useMemo(

package/src/runtimes/local/LocalRuntimeCore.tsx

@@ -20,6 +20,7 @@ const getExportFromInitialMessages = (
 
 export class LocalRuntimeCore extends BaseAssistantRuntimeCore {
   public readonly threadList;
+  public readonly Provider = undefined;
 
   private _options: LocalRuntimeOptionsBase;
 

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

@@ -90,8 +90,12 @@ export const EMPTY_THREAD_CORE: ThreadRuntimeCore = {
       throw EMPTY_THREAD_ERROR;
     },
 
-    reset() {
-      throw EMPTY_THREAD_ERROR;
+    async reset() {
+      // noop
+    },
+
+    async clearAttachments() {
+      // noop
     },
 
     send() {
@@ -99,7 +103,7 @@ export const EMPTY_THREAD_CORE: ThreadRuntimeCore = {
     },
 
     cancel() {
-      throw EMPTY_THREAD_ERROR;
+      // noop
     },
 
     subscribe() {

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

@@ -5,7 +5,7 @@ import { RemoteThreadListHookInstanceManager } from "./RemoteThreadListHookInsta
 import { BaseSubscribable } from "./BaseSubscribable";
 import { EMPTY_THREAD_CORE } from "./EMPTY_THREAD_CORE";
 import { OptimisticState } from "./OptimisticState";
-import { FC, PropsWithChildren, useEffect, useId } from "react";
+import { FC, Fragment, PropsWithChildren, useEffect, useId } from "react";
 import { create } from "zustand";
 import { CloudInitializeResponse } from "./cloud/CloudContext";
 
@@ -25,10 +25,6 @@ type RemoteThreadData =
       readonly title?: string | undefined;
     };
 
-const DEFAULT_RENDER_COMPONENT: FC<PropsWithChildren> = ({ children }) => {
-  return children;
-};
-
 type THREAD_MAPPING_ID = string & { __brand: "THREAD_MAPPING_ID" };
 function createThreadMappingId(id: string): THREAD_MAPPING_ID {
   return id as THREAD_MAPPING_ID;
@@ -157,8 +153,7 @@ export class RemoteThreadListThreadListRuntimeCore
       adapter.runtimeHook,
     );
     this.useRenderComponent = create(() => ({
-      RenderComponent:
-        adapter.__internal_RenderComponent ?? DEFAULT_RENDER_COMPONENT,
+      RenderComponent: adapter.unstable_Provider ?? Fragment,
     }));
     this.__internal_setAdapter(adapter);
 
@@ -234,8 +229,7 @@ export class RemoteThreadListThreadListRuntimeCore
     this._disposeOldAdapter?.();
     this._disposeOldAdapter = this._adapter.onInitialize(this._onInitialize);
 
-    const RenderComponent =
-      adapter.__internal_RenderComponent ?? DEFAULT_RENDER_COMPONENT;
+    const RenderComponent = adapter.unstable_Provider ?? Fragment;
     if (
       RenderComponent !== this.useRenderComponent.getState().RenderComponent
     ) {
@@ -460,7 +454,7 @@ export class RemoteThreadListThreadListRuntimeCore
 
   private useBoundIds = create<string[]>(() => []);
 
-  public __internal_RenderComponent: FC<PropsWithChildren> = ({ children }) => {
+  public __internal_Provider: FC<PropsWithChildren> = ({ children }) => {
     const id = useId();
     useEffect(() => {
       this.useBoundIds.setState((s) => [...s, id], true);

package/src/runtimes/remote-thread-list/cloud/useCloudThreadListRuntime.tsx

@@ -86,8 +86,7 @@ export const useCloudThreadListRuntime = (adapter: CloudThreadListAdapter) => {
     onInitialize: (callback) => {
       return cloudContextValue.subscribe(callback);
     },
-    __internal_RenderComponent: ({ children }: PropsWithChildren) => {
-      console.log("RENDER COMPONENT");
+    unstable_Provider: ({ children }: PropsWithChildren) => {
       return (
         <CloudContext.Provider value={cloudContextValue}>
           {children}

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

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from "react";
+import { ComponentType, PropsWithChildren } from "react";
 import { AssistantRuntime } from "../../api";
 import { Unsubscribe } from "../../types";
 import { CloudInitializeResponse } from "./cloud/CloudContext";
@@ -30,5 +30,5 @@ export type RemoteThreadListAdapter = {
     callback: (task: Promise<CloudInitializeResponse>) => Promise<void>,
   ): Unsubscribe;
 
-  __internal_RenderComponent?: FC<PropsWithChildren>;
+  unstable_Provider?: ComponentType<PropsWithChildren>;
 };

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

@@ -12,8 +12,8 @@ class RemoteThreadListRuntimeCore extends BaseAssistantRuntimeCore {
     this.threadList = new RemoteThreadListThreadListRuntimeCore(adapter);
   }
 
-  public get __internal_RenderComponent() {
-    return this.threadList.__internal_RenderComponent;
+  public get Provider() {
+    return this.threadList.__internal_Provider;
   }
 }
 

package/src/styles/tailwindcss/thread.css

@@ -9,7 +9,7 @@
 }
 
 .aui-thread-viewport-footer {
-  @apply sticky bottom-0 mt-3 flex w-full max-w-2xl flex-col items-center justify-end rounded-t-lg bg-inherit pb-4;
+  @apply max-w-aui-thread sticky bottom-0 mt-3 flex w-full flex-col items-center justify-end rounded-t-lg bg-inherit pb-4;
 }
 
 .aui-thread-scroll-to-bottom {
@@ -27,7 +27,7 @@
 /* thread welcome */
 
 .aui-thread-welcome-root {
-  @apply flex w-full max-w-2xl flex-grow flex-col;
+  @apply max-w-aui-thread flex w-full flex-grow flex-col;
 }
 
 .aui-thread-welcome-center {
@@ -108,7 +108,7 @@
 
 .aui-user-message-root {
   @apply grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 [&>*]:col-start-2;
-  @apply w-full max-w-2xl py-4;
+  @apply max-w-aui-thread w-full py-4;
 }
 
 :where(.aui-user-message-root) > .aui-user-action-bar-root {
@@ -130,7 +130,7 @@
 }
 
 .aui-user-message-content {
-  @apply bg-aui-muted text-aui-foreground max-w-xl break-words rounded-3xl px-5 py-2.5;
+  @apply bg-aui-muted text-aui-foreground max-w-[calc(var(--aui-thread-max-width)*0.8)] break-words rounded-3xl px-5 py-2.5;
 }
 
 .aui-user-message-attachments {
@@ -146,7 +146,7 @@
 /* edit composer */
 
 .aui-edit-composer-root {
-  @apply bg-aui-muted my-4 flex w-full max-w-2xl flex-col gap-2 rounded-xl;
+  @apply bg-aui-muted max-w-aui-thread my-4 flex w-full flex-col gap-2 rounded-xl;
 }
 
 .aui-edit-composer-input {
@@ -161,7 +161,7 @@
 
 .aui-assistant-message-root {
   @apply grid grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr];
-  @apply relative w-full max-w-2xl py-4;
+  @apply max-w-aui-thread relative w-full py-4;
 }
 
 :where(.aui-assistant-message-root) > .aui-avatar-root {
@@ -183,7 +183,7 @@
 }
 
 .aui-assistant-message-content {
-  @apply text-aui-foreground max-w-xl break-words leading-7;
+  @apply text-aui-foreground max-w-[calc(var(--aui-thread-max-width)*0.8)] break-words leading-7;
 }
 
 /* assistant action bar */

package/src/styles/themes/default.css

@@ -28,6 +28,9 @@
   --aui-ring: 240 10% 3.9%;
 
   --aui-radius: 0.5rem;
+
+  /* aui specific */
+  --aui-thread-max-width: 42rem;
 }
 
 .dark {

package/src/styles/themes/shadcn-extras.css

@@ -0,0 +1,4 @@
+/* duplicates from default.css for properties outside what is included in shadcn-ui themes */
+:root {
+  --aui-thread-max-width: 42rem;
+}

package/src/tailwindcss/index.ts

@@ -3,6 +3,7 @@ import baseComponentsCSS from "../../dist/styles/tailwindcss/base-components.css
 import threadCSS from "../../dist/styles/tailwindcss/thread.css.json";
 import modalCSS from "../../dist/styles/tailwindcss/modal.css.json";
 import defaultThemeCSS from "../../dist/styles/themes/default.css.json";
+import shadcnExtrasCSS from "../../dist/styles/themes/shadcn-extras.css.json";
 
 type AssistantTailwindPluginColors = {
   border: string;
@@ -60,6 +61,9 @@ const auiPlugin = plugin.withOptions<AssisstantTailwindPluginOptions>(
       if (defaultTheme || (base && !shadcn)) {
         addComponents(defaultThemeCSS);
       }
+      if (!defaultTheme && base && shadcn) {
+        addComponents(shadcnExtrasCSS);
+      }
 
       if (base) {
         addComponents(baseComponentsCSS);
@@ -79,6 +83,9 @@ const auiPlugin = plugin.withOptions<AssisstantTailwindPluginOptions>(
       safelist: [{ pattern: /aui-/ }],
       theme: {
         extend: {
+          maxWidth: {
+            "aui-thread": "var(--aui-thread-max-width)",
+          },
           colors: {
             aui: {
               border: colors.border ?? `hsl(var(${prefix}border))`,

package/dist/primitive-hooks/thread/useThread.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=useThread.d.ts.map

package/dist/primitive-hooks/thread/useThread.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useThread.d.ts","sourceRoot":"","sources":["../../../src/primitive-hooks/thread/useThread.tsx"],"names":[],"mappings":""}

package/dist/primitive-hooks/thread/useThread.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=useThread.js.map

package/dist/primitive-hooks/thread/useThread.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/primitive-hooks/thread/useThread.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=useThread.mjs.map

package/dist/primitive-hooks/thread/useThread.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/src/primitive-hooks/thread/useThread.tsx

@@ -1 +0,0 @@
-