@assistant-ui/react 0.7.68 → 0.7.70

package/src/context/react/ThreadViewportContext.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { createContext } from "react";
+import { ReadonlyStore } from "../ReadonlyStore";
+import { UseBoundStore } from "zustand";
+import { createContextHook } from "./utils/createContextHook";
+import { createContextStoreHook } from "./utils/createContextStoreHook";
+import { ThreadViewportState } from "../stores";
+
+export type ThreadViewportContextValue = {
+  useThreadViewport: UseBoundStore<ReadonlyStore<ThreadViewportState>>;
+};
+
+export const ThreadViewportContext =
+  createContext<ThreadViewportContextValue | null>(null);
+
+const useThreadViewportContext = createContextHook(
+  ThreadViewportContext,
+  "ThreadPrimitive.Viewport",
+);
+
+export const { useThreadViewport, useThreadViewportStore } =
+  createContextStoreHook(useThreadViewportContext, "useThreadViewport");

package/src/context/react/index.ts

@@ -18,9 +18,12 @@ export {
    * @deprecated This method was renamed to `useThreadModelContext`.
    */
   useThreadModelContext as useThreadModelConfig,
+} from "./ThreadContext";
+
+export {
   useThreadViewport,
   useThreadViewportStore,
-} from "./ThreadContext";
+} from "./ThreadViewportContext";
 
 export {
   useThreadListItemRuntime,

package/src/context/stores/ThreadViewport.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { create } from "zustand";
 import type { Unsubscribe } from "../../types/Unsubscribe";
 

package/src/model-context/ModelContextTypes.ts

@@ -27,10 +27,16 @@ export type LanguageModelConfig = z.infer<typeof LanguageModelConfigSchema>;
 type ToolExecuteFunction<TArgs, TResult> = (
   args: TArgs,
   context: {
+    toolCallId: string;
     abortSignal: AbortSignal;
   },
 ) => TResult | Promise<TResult>;
 
+type OnSchemaValidationErrorFunction<TResult> = ToolExecuteFunction<
+  unknown,
+  TResult
+>;
+
 export type Tool<
   TArgs extends Record<string, unknown> = Record<string | number, unknown>,
   TResult = unknown,
@@ -38,6 +44,7 @@ export type Tool<
   description?: string | undefined;
   parameters: z.ZodSchema<TArgs> | JSONSchema7;
   execute?: ToolExecuteFunction<TArgs, TResult>;
+  experimental_onSchemaValidationError?: OnSchemaValidationErrorFunction<TResult>;
 };
 
 export type ModelContext = {

package/src/primitives/index.ts

@@ -12,3 +12,4 @@ export * as ThreadListItemPrimitive from "./threadListItem";
 export { useContentPartDisplay } from "./contentPart/useContentPartDisplay";
 export { useContentPartImage } from "./contentPart/useContentPartImage";
 export { useContentPartText } from "./contentPart/useContentPartText";
+export { useThreadViewportAutoScroll } from "./thread/useThreadViewportAutoScroll";

package/src/primitives/thread/ThreadScrollToBottom.tsx

@@ -6,8 +6,7 @@ import {
   createActionButton,
 } from "../../utils/createActionButton";
 import { useCallback } from "react";
-import { useThreadViewport } from "../../context";
-import { useThreadViewportStore } from "../../context/react/ThreadContext";
+import { useThreadViewport, useThreadViewportStore } from "../../context/react/ThreadViewportContext";
 
 const useThreadScrollToBottom = () => {
   const isAtBottom = useThreadViewport((s) => s.isAtBottom);

package/src/primitives/thread/ThreadSuggestion.tsx

@@ -14,7 +14,7 @@ const useThreadSuggestion = ({
   autoSend,
 }: {
   prompt: string;
-  method: "replace";
+  method?: "replace";
   autoSend?: boolean | undefined;
 }) => {
   const threadRuntime = useThreadRuntime();
@@ -23,7 +23,6 @@ const useThreadSuggestion = ({
   const callback = useCallback(() => {
     if (autoSend && !threadRuntime.getState().isRunning) {
       threadRuntime.append(prompt);
-      threadRuntime.composer.setText("");
     } else {
       threadRuntime.composer.setText(prompt);
     }

package/src/primitives/thread/ThreadViewport.tsx

@@ -4,6 +4,7 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Primitive } from "@radix-ui/react-primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
 import { useThreadViewportAutoScroll } from "./useThreadViewportAutoScroll";
+import { ThreadViewportProvider } from "../../context/providers/ThreadViewportProvider";
 
 export namespace ThreadPrimitiveViewport {
   export type Element = ComponentRef<typeof Primitive.div>;
@@ -12,7 +13,7 @@ export namespace ThreadPrimitiveViewport {
   };
 }
 
-export const ThreadPrimitiveViewport = forwardRef<
+const ThreadPrimitiveViewportScrollable = forwardRef<
   ThreadPrimitiveViewport.Element,
   ThreadPrimitiveViewport.Props
 >(({ autoScroll, children, ...rest }, forwardedRef) => {
@@ -29,4 +30,15 @@ export const ThreadPrimitiveViewport = forwardRef<
   );
 });
 
+export const ThreadPrimitiveViewport = forwardRef<
+  ThreadPrimitiveViewport.Element,
+  ThreadPrimitiveViewport.Props
+>((props, ref) => {
+  return (
+    <ThreadViewportProvider>
+      <ThreadPrimitiveViewportScrollable {...props} ref={ref} />
+    </ThreadViewportProvider>
+  );
+});
+
 ThreadPrimitiveViewport.displayName = "ThreadPrimitive.Viewport";

package/src/primitives/thread/useThreadViewportAutoScroll.tsx

@@ -2,14 +2,12 @@
 
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { RefCallback, useEffect, useRef } from "react";
-import {
-  useThreadRuntime,
-  useThreadViewportStore,
-} from "../../context/react/ThreadContext";
+import { useThreadRuntime } from "../../context/react/ThreadContext";
 import { useOnResizeContent } from "../../utils/hooks/useOnResizeContent";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
 import { writableStore } from "../../context/ReadonlyStore";
+import { useThreadViewportStore } from "../../context/react/ThreadViewportContext";
 
 export namespace useThreadViewportAutoScroll {
   export type Options = {

package/src/runtimes/composer/DefaultEditComposerRuntimeCore.tsx

@@ -18,7 +18,7 @@ export class DefaultEditComposerRuntimeCore extends BaseComposerRuntimeCore {
   private _parentId;
   private _sourceId;
   constructor(
-    private runtime: Omit<ThreadRuntimeCore, "composer"> & {
+    private runtime: ThreadRuntimeCore & {
       adapters?: { attachments?: AttachmentAdapter | undefined } | undefined;
     },
     private endEditCallback: () => void,
@@ -36,6 +36,9 @@ export class DefaultEditComposerRuntimeCore extends BaseComposerRuntimeCore {
     this._nonTextParts = message.content.filter(
       (part) => part.type !== "text" && part.type !== "ui",
     );
+
+    // Use the runConfig from the regular (non-edit) composer as the initial runConfig for the edit composer
+    this.setRunConfig({ ...runtime.composer.runConfig });
   }
 
   public async handleSend(

package/src/runtimes/edge/streams/toolResultStream.ts

@@ -75,30 +75,32 @@ export function toolResultStream(
             return;
           }
 
-          if (tool.parameters instanceof z.ZodType) {
-            const result = tool.parameters.safeParse(args);
-            if (!result.success) {
-              controller.enqueue({
-                type: "tool-result",
-                toolCallType,
-                toolCallId,
-                toolName,
-                result:
-                  "Function parameter validation failed. " +
-                  JSON.stringify(result.error.issues),
-                isError: true,
-              });
-              return;
-            }
-          }
-
           toolCallExecutions.set(
             toolCallId,
             (async () => {
               if (!tool.execute) return;
 
+              let executeFn = tool.execute;
+
+              if (tool.parameters instanceof z.ZodType) {
+                const result = tool.parameters.safeParse(args);
+                if (!result.success) {
+                  executeFn =
+                    tool.experimental_onSchemaValidationError ??
+                    (() => {
+                      throw (
+                        "Function parameter validation failed. " +
+                        JSON.stringify(result.error.issues)
+                      );
+                    });
+                }
+              }
+
               try {
-                const result = await tool.execute(args, { abortSignal });
+                const result = await executeFn(args, {
+                  toolCallId,
+                  abortSignal,
+                });
 
                 controller.enqueue({
                   type: "tool-result",

package/src/styles/tailwindcss/thread.css

@@ -9,7 +9,7 @@
 }
 
 .aui-thread-viewport-footer {
-  @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;
+  @apply max-w-[var(--aui-thread-max-width)] 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 max-w-aui-thread flex w-full flex-grow flex-col;
+  @apply max-w-[var(--aui-thread-max-width)] 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 max-w-aui-thread w-full py-4;
+  @apply max-w-[var(--aui-thread-max-width)] w-full py-4;
 }
 
 :where(.aui-user-message-root) > .aui-user-action-bar-root {
@@ -146,7 +146,7 @@
 /* edit composer */
 
 .aui-edit-composer-root {
-  @apply bg-aui-muted max-w-aui-thread my-4 flex w-full flex-col gap-2 rounded-xl;
+  @apply bg-aui-muted max-w-[var(--aui-thread-max-width)] 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 max-w-aui-thread relative w-full py-4;
+  @apply max-w-[var(--aui-thread-max-width)] relative w-full py-4;
 }
 
 :where(.aui-assistant-message-root) > .aui-avatar-root {

package/src/utils/hooks/useOnScrollToBottom.tsx

@@ -2,7 +2,7 @@
 
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useEffect } from "react";
-import { useThreadViewport } from "../../context/react/ThreadContext";
+import { useThreadViewport } from "../../context/react/ThreadViewportContext";
 
 export const useOnScrollToBottom = (callback: () => void) => {
   const callbackRef = useCallbackRef(callback);