@assistant-ui/react 0.7.69 → 0.7.71

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

@@ -14,6 +14,12 @@ export function runResultStream() {
     transform(chunk, controller) {
       const chunkType = chunk.type;
       switch (chunkType) {
+        case "reasoning": {
+          message = appendOrUpdateReasoning(message, chunk.textDelta);
+          controller.enqueue(message);
+          break;
+        }
+
         case "text-delta": {
           message = appendOrUpdateText(message, chunk.textDelta);
           controller.enqueue(message);
@@ -105,6 +111,24 @@ export function runResultStream() {
   });
 }
 
+const appendOrUpdateReasoning= (
+  message: CoreChatModelRunResult,
+  textDelta: string,
+) => {
+  let contentParts = message.content ?? [];
+  let contentPart = message.content?.at(-1);
+  if (contentPart?.type !== "reasoning") {
+    contentPart = { type: "reasoning", text: textDelta };
+  } else {
+    contentParts = contentParts.slice(0, -1);
+    contentPart = { type: "reasoning", text: contentPart.text + textDelta };
+  }
+  return {
+    ...message,
+    content: contentParts.concat([contentPart]),
+  };
+};
+
 const appendOrUpdateText = (
   message: CoreChatModelRunResult,
   textDelta: string,

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",
@@ -126,6 +128,7 @@ export function toolResultStream(
 
         // ignore other parts
         case "text-delta":
+        case "reasoning":
         case "tool-call-delta":
         case "tool-result":
         case "step-finish":

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

@@ -14,7 +14,7 @@ import {
   FileContentPart,
   Unstable_AudioContentPart,
 } from "../../types";
-import { ThreadStep } from "../../types/AssistantTypes";
+import { ReasoningContentPart, ThreadStep } from "../../types/AssistantTypes";
 import {
   ReadonlyJSONObject,
   ReadonlyJSONValue,
@@ -27,6 +27,7 @@ export type ThreadMessageLike = {
     | string
     | readonly (
         | TextContentPart
+        | ReasoningContentPart
         | ImageContentPart
         | FileContentPart
         | Unstable_AudioContentPart
@@ -92,6 +93,7 @@ export const fromThreadMessageLike = (
             const type = part.type;
             switch (type) {
               case "text":
+              case "reasoning":
                 if (part.text.trim().length === 0) return null;
                 return part;
 
@@ -148,7 +150,7 @@ export const fromThreadMessageLike = (
               return part;
 
             default: {
-              const unhandledType: "tool-call" = type;
+              const unhandledType: "tool-call" | "reasoning" = type;
               throw new Error(
                 `Unsupported user content part type: ${unhandledType}`,
               );

package/src/runtimes/local/ChatModelAdapter.tsx

@@ -1,5 +1,6 @@
 import type {
   MessageStatus,
+  ReasoningContentPart,
   RunConfig,
   TextContentPart,
   ThreadAssistantContentPart,
@@ -27,7 +28,7 @@ export type ChatModelRunResult = {
 };
 
 export type CoreChatModelRunResult = Omit<ChatModelRunResult, "content"> & {
-  readonly content: readonly (TextContentPart | ToolCallContentPart)[];
+  readonly content: readonly (TextContentPart | ReasoningContentPart | ToolCallContentPart)[];
 };
 
 export type ChatModelRunOptions = {

package/src/styles/tailwindcss/thread.css

@@ -1,11 +1,10 @@
 /* thread */
 .aui-thread-root {
   @apply bg-aui-background box-border h-full;
-  @apply [&>.aui-thread-viewport]:bg-inherit;
 }
 
 .aui-thread-viewport {
-  @apply bg-aui-background flex h-full flex-col items-center overflow-y-scroll scroll-smooth px-4 pt-8;
+  @apply flex h-full flex-col items-center overflow-y-scroll scroll-smooth bg-inherit px-4 pt-8;
 }
 
 .aui-thread-viewport-footer {
@@ -60,8 +59,12 @@
   @apply placeholder:text-aui-muted-foreground max-h-40 flex-grow resize-none border-none bg-transparent px-2 py-4 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed;
 }
 
-.aui-composer-send,
-.aui-composer-cancel,
+.aui-composer-send {
+  @apply my-2.5 size-8 p-2 transition-opacity ease-in;
+}
+.aui-composer-cancel {
+  @apply my-2.5 size-8 p-2 transition-opacity ease-in;
+}
 .aui-composer-attach {
   @apply my-2.5 size-8 p-2 transition-opacity ease-in;
 }
@@ -111,36 +114,35 @@
   @apply max-w-[var(--aui-thread-max-width)] w-full py-4;
 }
 
-:where(.aui-user-message-root) > .aui-user-action-bar-root {
-  @apply col-start-1 row-start-2 mr-3 mt-2.5;
-}
-
-:where(.aui-user-message-root) > .aui-user-message-attachments {
-  @apply col-span-full col-start-1 row-start-1;
-  @apply justify-end;
-}
-
-:where(.aui-user-message-root) > .aui-user-message-content {
-  @apply col-start-2 row-start-2;
+:where(.aui-user-message-root) > .aui-branch-picker-root {
+  @apply col-span-full col-start-1 row-start-3;
+  @apply -mr-1 justify-end;
 }
 
-:where(.aui-user-message-root) > .aui-branch-picker-root {
+.aui-user-branch-picker {
   @apply col-span-full col-start-1 row-start-3;
   @apply -mr-1 justify-end;
 }
 
 .aui-user-message-content {
   @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;
+  
+  @apply col-start-2 row-start-2;
 }
 
 .aui-user-message-attachments {
   @apply flex w-full flex-row gap-3;
+
+  @apply col-span-full col-start-1 row-start-1;
+  @apply justify-end;
 }
 
 /* user action bar */
 
 .aui-user-action-bar-root {
   @apply flex flex-col items-end;
+
+  @apply col-start-1 row-start-2 mr-3 mt-2.5;
 }
 
 /* edit composer */
@@ -168,28 +170,33 @@
   @apply col-start-1 row-span-full row-start-1 mr-4;
 }
 
+.aui-assistant-avatar {
+  @apply col-start-1 row-span-full row-start-1 mr-4;
+}
+
 :where(.aui-assistant-message-root) > .aui-branch-picker-root {
   @apply col-start-2 row-start-2;
   @apply -ml-2 mr-2;
 }
 
-:where(.aui-assistant-message-root) > .aui-assistant-action-bar-root {
-  @apply col-start-3 row-start-2;
-  @apply -ml-1;
-}
-
-:where(.aui-assistant-message-root) > .aui-assistant-message-content {
-  @apply col-span-2 col-start-2 row-start-1 my-1.5;
+.aui-assistant-branch-picker {
+  @apply col-start-2 row-start-2;
+  @apply -ml-2 mr-2;
 }
 
 .aui-assistant-message-content {
   @apply text-aui-foreground max-w-[calc(var(--aui-thread-max-width)*0.8)] break-words leading-7;
+
+  @apply col-span-2 col-start-2 row-start-1 my-1.5;
 }
 
 /* assistant action bar */
 
 .aui-assistant-action-bar-root {
   @apply text-aui-muted-foreground flex gap-1;
+
+  @apply col-start-3 row-start-2;
+  @apply -ml-1;
 }
 
 :where(.aui-assistant-action-bar-root)[data-floating] {

package/src/types/AssistantTypes.ts

@@ -12,6 +12,12 @@ export type TextContentPart = {
   readonly text: string;
 };
 
+export type ReasoningContentPart = {
+  readonly type: "reasoning";
+  readonly text: string;
+};
+
+
 export type ImageContentPart = {
   readonly type: "image";
   readonly image: string;
@@ -101,6 +107,7 @@ export type ThreadUserContentPart =
 
 export type ThreadAssistantContentPart =
   | TextContentPart
+  | ReasoningContentPart
   | ToolCallContentPart
   | UIContentPart;
 

package/src/types/ContentPartComponentTypes.tsx

@@ -3,6 +3,7 @@ import type {
   ContentPartStatus,
   FileContentPart,
   ImageContentPart,
+  ReasoningContentPart,
   TextContentPart,
   ToolCallContentPart,
   UIContentPart,
@@ -19,6 +20,9 @@ export type EmptyContentPartComponent = ComponentType<EmptyContentPartProps>;
 export type TextContentPartProps = ContentPartState & TextContentPart;
 export type TextContentPartComponent = ComponentType<TextContentPartProps>;
 
+export type ReasoningContentPartProps = ContentPartState & ReasoningContentPart;
+export type ReasoningContentPartComponent = ComponentType<ReasoningContentPartProps>;
+
 export type ImageContentPartProps = ContentPartState & ImageContentPart;
 export type ImageContentPartComponent = ComponentType<ImageContentPartProps>;
 

package/src/types/index.ts

@@ -8,6 +8,7 @@ export type {
 export type {
   AppendMessage,
   TextContentPart,
+  ReasoningContentPart,
   ImageContentPart,
   FileContentPart,
   Unstable_AudioContentPart,
@@ -37,6 +38,8 @@ export type {
   EmptyContentPartComponent,
   TextContentPartProps,
   TextContentPartComponent,
+  ReasoningContentPartProps,
+  ReasoningContentPartComponent,
   ImageContentPartProps,
   ImageContentPartComponent,
   FileContentPartProps,

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);