@assistant-ui/react 0.7.26 → 0.7.27

package/dist/tailwindcss/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tailwindcss/index.ts"],"sourcesContent":["import plugin from \"tailwindcss/plugin.js\";\nimport baseComponentsCSS from \"../../dist/styles/tailwindcss/base-components.css.json\";\nimport threadCSS from \"../../dist/styles/tailwindcss/thread.css.json\";\nimport modalCSS from \"../../dist/styles/tailwindcss/modal.css.json\";\nimport defaultThemeCSS from \"../../dist/styles/themes/default.css.json\";\n\ntype AssistantTailwindPluginColors = {\n  border: string;\n  input: string;\n  ring: string;\n  background: string;\n  foreground: string;\n  primary: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  secondary: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  destructive: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  muted: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  accent: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  popover: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  card: {\n    DEFAULT: string;\n    foreground: string;\n  };\n};\n\ntype AssisstantTailwindPluginOptions = {\n  components?: (\"default-theme\" | \"base\" | \"thread\" | \"assistant-modal\")[];\n  colors?: AssistantTailwindPluginColors;\n  shadcn?: boolean;\n};\n\nconst auiPlugin = plugin.withOptions<AssisstantTailwindPluginOptions>(\n  ({ components = [\"assistant-modal\", \"thread\"], shadcn = false } = {}) =>\n    ({ addComponents }) => {\n      const assistantModal = components.includes(\"assistant-modal\");\n      const thread = assistantModal || components.includes(\"thread\");\n      const base = thread || components.includes(\"base\");\n      const defaultTheme = components.includes(\"default-theme\");\n\n      if (defaultTheme && shadcn)\n        throw new Error(\"default-theme cannot be used with shadcn\");\n\n      if (defaultTheme || (base && !shadcn)) {\n        addComponents(defaultThemeCSS);\n      }\n\n      if (base) {\n        addComponents(baseComponentsCSS);\n      }\n\n      if (thread) {\n        addComponents(threadCSS);\n      }\n\n      if (assistantModal) {\n        addComponents(modalCSS);\n      }\n    },\n  ({ shadcn = false, colors = {} } = {}) => {\n    const prefix = !shadcn ? \"--aui-\" : \"--\";\n    return {\n      safelist: [{ pattern: /aui-/ }],\n      theme: {\n        extend: {\n          colors: {\n            aui: {\n              border: colors.border ?? `hsl(var(${prefix}border))`,\n              input: colors.input ?? `hsl(var(${prefix}input))`,\n              ring: colors.ring ?? `hsl(var(${prefix}ring))`,\n              background: colors.background ?? `hsl(var(${prefix}background))`,\n              foreground: colors.foreground ?? `hsl(var(${prefix}foreground))`,\n              primary: {\n                DEFAULT:\n                  colors.primary?.DEFAULT ?? `hsl(var(${prefix}primary))`,\n                foreground:\n                  colors.primary?.foreground ??\n                  `hsl(var(${prefix}primary-foreground))`,\n              },\n              secondary: {\n                DEFAULT:\n                  colors.secondary?.DEFAULT ?? `hsl(var(${prefix}secondary))`,\n                foreground:\n                  colors.secondary?.foreground ??\n                  `hsl(var(${prefix}secondary-foreground))`,\n              },\n              destructive: {\n                DEFAULT:\n                  colors.destructive?.DEFAULT ??\n                  `hsl(var(${prefix}destructive))`,\n                foreground: `hsl(var(${prefix}destructive-foreground))`,\n              },\n              muted: {\n                DEFAULT: `hsl(var(${prefix}muted))`,\n                foreground:\n                  colors.muted?.foreground ??\n                  `hsl(var(${prefix}muted-foreground))`,\n              },\n              accent: {\n                DEFAULT: colors.accent?.DEFAULT ?? `hsl(var(${prefix}accent))`,\n                foreground:\n                  colors.accent?.foreground ??\n                  `hsl(var(${prefix}accent-foreground))`,\n              },\n              popover: {\n                DEFAULT:\n                  colors.popover?.DEFAULT ?? `hsl(var(${prefix}popover))`,\n                foreground:\n                  colors.popover?.foreground ??\n                  `hsl(var(${prefix}popover-foreground))`,\n              },\n              card: {\n                DEFAULT: colors.card?.DEFAULT ?? `hsl(var(${prefix}card))`,\n                foreground:\n                  colors.card?.foreground ??\n                  `hsl(var(${prefix}card-foreground))`,\n              },\n            },\n          },\n        },\n      },\n    };\n  },\n);\n\nexport default auiPlugin;\n"],"mappings":";AAAA,OAAO,YAAY;AACnB,OAAO,uBAAuB;AAC9B,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,qBAAqB;AA4C5B,IAAM,YAAY,OAAO;AAAA,EACvB,CAAC,EAAE,aAAa,CAAC,mBAAmB,QAAQ,GAAG,SAAS,MAAM,IAAI,CAAC,MACjE,CAAC,EAAE,cAAc,MAAM;AACrB,UAAM,iBAAiB,WAAW,SAAS,iBAAiB;AAC5D,UAAM,SAAS,kBAAkB,WAAW,SAAS,QAAQ;AAC7D,UAAM,OAAO,UAAU,WAAW,SAAS,MAAM;AACjD,UAAM,eAAe,WAAW,SAAS,eAAe;AAExD,QAAI,gBAAgB;AAClB,YAAM,IAAI,MAAM,0CAA0C;AAE5D,QAAI,gBAAiB,QAAQ,CAAC,QAAS;AACrC,oBAAc,eAAe;AAAA,IAC/B;AAEA,QAAI,MAAM;AACR,oBAAc,iBAAiB;AAAA,IACjC;AAEA,QAAI,QAAQ;AACV,oBAAc,SAAS;AAAA,IACzB;AAEA,QAAI,gBAAgB;AAClB,oBAAc,QAAQ;AAAA,IACxB;AAAA,EACF;AAAA,EACF,CAAC,EAAE,SAAS,OAAO,SAAS,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,UAAM,SAAS,CAAC,SAAS,WAAW;AACpC,WAAO;AAAA,MACL,UAAU,CAAC,EAAE,SAAS,OAAO,CAAC;AAAA,MAC9B,OAAO;AAAA,QACL,QAAQ;AAAA,UACN,QAAQ;AAAA,YACN,KAAK;AAAA,cACH,QAAQ,OAAO,UAAU,WAAW,MAAM;AAAA,cAC1C,OAAO,OAAO,SAAS,WAAW,MAAM;AAAA,cACxC,MAAM,OAAO,QAAQ,WAAW,MAAM;AAAA,cACtC,YAAY,OAAO,cAAc,WAAW,MAAM;AAAA,cAClD,YAAY,OAAO,cAAc,WAAW,MAAM;AAAA,cAClD,SAAS;AAAA,gBACP,SACE,OAAO,SAAS,WAAW,WAAW,MAAM;AAAA,gBAC9C,YACE,OAAO,SAAS,cAChB,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,WAAW;AAAA,gBACT,SACE,OAAO,WAAW,WAAW,WAAW,MAAM;AAAA,gBAChD,YACE,OAAO,WAAW,cAClB,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,aAAa;AAAA,gBACX,SACE,OAAO,aAAa,WACpB,WAAW,MAAM;AAAA,gBACnB,YAAY,WAAW,MAAM;AAAA,cAC/B;AAAA,cACA,OAAO;AAAA,gBACL,SAAS,WAAW,MAAM;AAAA,gBAC1B,YACE,OAAO,OAAO,cACd,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,QAAQ;AAAA,gBACN,SAAS,OAAO,QAAQ,WAAW,WAAW,MAAM;AAAA,gBACpD,YACE,OAAO,QAAQ,cACf,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,SAAS;AAAA,gBACP,SACE,OAAO,SAAS,WAAW,WAAW,MAAM;AAAA,gBAC9C,YACE,OAAO,SAAS,cAChB,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,MAAM;AAAA,gBACJ,SAAS,OAAO,MAAM,WAAW,WAAW,MAAM;AAAA,gBAClD,YACE,OAAO,MAAM,cACb,WAAW,MAAM;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../../src/tailwindcss/index.ts"],"sourcesContent":["import plugin from \"tailwindcss/plugin.js\";\nimport baseComponentsCSS from \"../../dist/styles/tailwindcss/base-components.css.json\";\nimport threadCSS from \"../../dist/styles/tailwindcss/thread.css.json\";\nimport modalCSS from \"../../dist/styles/tailwindcss/modal.css.json\";\nimport defaultThemeCSS from \"../../dist/styles/themes/default.css.json\";\nimport shadcnExtrasCSS from \"../../dist/styles/themes/shadcn-extras.css.json\";\n\ntype AssistantTailwindPluginColors = {\n  border: string;\n  input: string;\n  ring: string;\n  background: string;\n  foreground: string;\n  primary: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  secondary: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  destructive: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  muted: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  accent: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  popover: {\n    DEFAULT: string;\n    foreground: string;\n  };\n  card: {\n    DEFAULT: string;\n    foreground: string;\n  };\n};\n\ntype AssisstantTailwindPluginOptions = {\n  components?: (\"default-theme\" | \"base\" | \"thread\" | \"assistant-modal\")[];\n  colors?: AssistantTailwindPluginColors;\n  shadcn?: boolean;\n};\n\nconst auiPlugin = plugin.withOptions<AssisstantTailwindPluginOptions>(\n  ({ components = [\"assistant-modal\", \"thread\"], shadcn = false } = {}) =>\n    ({ addComponents }) => {\n      const assistantModal = components.includes(\"assistant-modal\");\n      const thread = assistantModal || components.includes(\"thread\");\n      const base = thread || components.includes(\"base\");\n      const defaultTheme = components.includes(\"default-theme\");\n\n      if (defaultTheme && shadcn)\n        throw new Error(\"default-theme cannot be used with shadcn\");\n\n      if (defaultTheme || (base && !shadcn)) {\n        addComponents(defaultThemeCSS);\n      }\n      if (!defaultTheme && base && shadcn) {\n        addComponents(shadcnExtrasCSS);\n      }\n\n      if (base) {\n        addComponents(baseComponentsCSS);\n      }\n\n      if (thread) {\n        addComponents(threadCSS);\n      }\n\n      if (assistantModal) {\n        addComponents(modalCSS);\n      }\n    },\n  ({ shadcn = false, colors = {} } = {}) => {\n    const prefix = !shadcn ? \"--aui-\" : \"--\";\n    return {\n      safelist: [{ pattern: /aui-/ }],\n      theme: {\n        extend: {\n          maxWidth: {\n            \"aui-thread\": \"var(--aui-thread-max-width)\",\n          },\n          colors: {\n            aui: {\n              border: colors.border ?? `hsl(var(${prefix}border))`,\n              input: colors.input ?? `hsl(var(${prefix}input))`,\n              ring: colors.ring ?? `hsl(var(${prefix}ring))`,\n              background: colors.background ?? `hsl(var(${prefix}background))`,\n              foreground: colors.foreground ?? `hsl(var(${prefix}foreground))`,\n              primary: {\n                DEFAULT:\n                  colors.primary?.DEFAULT ?? `hsl(var(${prefix}primary))`,\n                foreground:\n                  colors.primary?.foreground ??\n                  `hsl(var(${prefix}primary-foreground))`,\n              },\n              secondary: {\n                DEFAULT:\n                  colors.secondary?.DEFAULT ?? `hsl(var(${prefix}secondary))`,\n                foreground:\n                  colors.secondary?.foreground ??\n                  `hsl(var(${prefix}secondary-foreground))`,\n              },\n              destructive: {\n                DEFAULT:\n                  colors.destructive?.DEFAULT ??\n                  `hsl(var(${prefix}destructive))`,\n                foreground: `hsl(var(${prefix}destructive-foreground))`,\n              },\n              muted: {\n                DEFAULT: `hsl(var(${prefix}muted))`,\n                foreground:\n                  colors.muted?.foreground ??\n                  `hsl(var(${prefix}muted-foreground))`,\n              },\n              accent: {\n                DEFAULT: colors.accent?.DEFAULT ?? `hsl(var(${prefix}accent))`,\n                foreground:\n                  colors.accent?.foreground ??\n                  `hsl(var(${prefix}accent-foreground))`,\n              },\n              popover: {\n                DEFAULT:\n                  colors.popover?.DEFAULT ?? `hsl(var(${prefix}popover))`,\n                foreground:\n                  colors.popover?.foreground ??\n                  `hsl(var(${prefix}popover-foreground))`,\n              },\n              card: {\n                DEFAULT: colors.card?.DEFAULT ?? `hsl(var(${prefix}card))`,\n                foreground:\n                  colors.card?.foreground ??\n                  `hsl(var(${prefix}card-foreground))`,\n              },\n            },\n          },\n        },\n      },\n    };\n  },\n);\n\nexport default auiPlugin;\n"],"mappings":";AAAA,OAAO,YAAY;AACnB,OAAO,uBAAuB;AAC9B,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,qBAAqB;AAC5B,OAAO,qBAAqB;AA4C5B,IAAM,YAAY,OAAO;AAAA,EACvB,CAAC,EAAE,aAAa,CAAC,mBAAmB,QAAQ,GAAG,SAAS,MAAM,IAAI,CAAC,MACjE,CAAC,EAAE,cAAc,MAAM;AACrB,UAAM,iBAAiB,WAAW,SAAS,iBAAiB;AAC5D,UAAM,SAAS,kBAAkB,WAAW,SAAS,QAAQ;AAC7D,UAAM,OAAO,UAAU,WAAW,SAAS,MAAM;AACjD,UAAM,eAAe,WAAW,SAAS,eAAe;AAExD,QAAI,gBAAgB;AAClB,YAAM,IAAI,MAAM,0CAA0C;AAE5D,QAAI,gBAAiB,QAAQ,CAAC,QAAS;AACrC,oBAAc,eAAe;AAAA,IAC/B;AACA,QAAI,CAAC,gBAAgB,QAAQ,QAAQ;AACnC,oBAAc,eAAe;AAAA,IAC/B;AAEA,QAAI,MAAM;AACR,oBAAc,iBAAiB;AAAA,IACjC;AAEA,QAAI,QAAQ;AACV,oBAAc,SAAS;AAAA,IACzB;AAEA,QAAI,gBAAgB;AAClB,oBAAc,QAAQ;AAAA,IACxB;AAAA,EACF;AAAA,EACF,CAAC,EAAE,SAAS,OAAO,SAAS,CAAC,EAAE,IAAI,CAAC,MAAM;AACxC,UAAM,SAAS,CAAC,SAAS,WAAW;AACpC,WAAO;AAAA,MACL,UAAU,CAAC,EAAE,SAAS,OAAO,CAAC;AAAA,MAC9B,OAAO;AAAA,QACL,QAAQ;AAAA,UACN,UAAU;AAAA,YACR,cAAc;AAAA,UAChB;AAAA,UACA,QAAQ;AAAA,YACN,KAAK;AAAA,cACH,QAAQ,OAAO,UAAU,WAAW,MAAM;AAAA,cAC1C,OAAO,OAAO,SAAS,WAAW,MAAM;AAAA,cACxC,MAAM,OAAO,QAAQ,WAAW,MAAM;AAAA,cACtC,YAAY,OAAO,cAAc,WAAW,MAAM;AAAA,cAClD,YAAY,OAAO,cAAc,WAAW,MAAM;AAAA,cAClD,SAAS;AAAA,gBACP,SACE,OAAO,SAAS,WAAW,WAAW,MAAM;AAAA,gBAC9C,YACE,OAAO,SAAS,cAChB,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,WAAW;AAAA,gBACT,SACE,OAAO,WAAW,WAAW,WAAW,MAAM;AAAA,gBAChD,YACE,OAAO,WAAW,cAClB,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,aAAa;AAAA,gBACX,SACE,OAAO,aAAa,WACpB,WAAW,MAAM;AAAA,gBACnB,YAAY,WAAW,MAAM;AAAA,cAC/B;AAAA,cACA,OAAO;AAAA,gBACL,SAAS,WAAW,MAAM;AAAA,gBAC1B,YACE,OAAO,OAAO,cACd,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,QAAQ;AAAA,gBACN,SAAS,OAAO,QAAQ,WAAW,WAAW,MAAM;AAAA,gBACpD,YACE,OAAO,QAAQ,cACf,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,SAAS;AAAA,gBACP,SACE,OAAO,SAAS,WAAW,WAAW,MAAM;AAAA,gBAC9C,YACE,OAAO,SAAS,cAChB,WAAW,MAAM;AAAA,cACrB;AAAA,cACA,MAAM;AAAA,gBACJ,SAAS,OAAO,MAAM,WAAW,WAAW,MAAM;AAAA,gBAClD,YACE,OAAO,MAAM,cACb,WAAW,MAAM;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,sBAAQ;","names":[]}

package/package.json

@@ -29,7 +29,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.7.26",
+  "version": "0.7.27",
   "license": "MIT",
   "exports": {
     ".": {

package/src/context/providers/AssistantRuntimeProvider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC, PropsWithChildren } from "react";
-import { memo, useEffect, useMemo, useState } from "react";
+import { Fragment, memo, useEffect, useMemo, useState } from "react";
 import { AssistantContext } from "../react/AssistantContext";
 import { makeAssistantToolUIsStore } from "../stores/AssistantToolUIs";
 import { ThreadRuntimeProvider } from "./ThreadRuntimeProvider";
@@ -46,13 +46,9 @@ const useThreadListStore = (runtime: AssistantRuntime) => {
   return store;
 };
 
-const DEFAULT_RENDER_COMPONENT: FC<PropsWithChildren> = ({ children }) =>
-  children;
-
 const getRenderComponent = (runtime: AssistantRuntime) => {
   return (
-    (runtime as { _core?: AssistantRuntimeCore })._core
-      ?.__internal_RenderComponent ?? DEFAULT_RENDER_COMPONENT
+    (runtime as { _core?: AssistantRuntimeCore })._core?.Provider ?? Fragment
   );
 };
 

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/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 @@
-