@assistant-ui/react 0.7.34 → 0.7.36

package/src/runtimes/edge/converters/fromLanguageModelMessages.ts

@@ -49,9 +49,16 @@ export const fromLanguageModelMessages = (
                 throw new Error("Only images with URL data are supported");
               }
               case "file": {
-                // TODO
-                throw new Error("File content parts are not supported");
+                if (part.data instanceof URL) {
+                  return {
+                    type: "file",
+                    data: part.data.href,
+                    mimeType: part.mimeType,
+                  };
+                }
+                throw new Error("Only files with URL data are supported");
               }
+
               default: {
                 const unhandledType: never = type;
                 throw new Error(`Unknown content part type: ${unhandledType}`);

package/src/runtimes/edge/converters/toLanguageModelMessages.ts

@@ -1,4 +1,5 @@
 import {
+  LanguageModelV1FilePart,
   LanguageModelV1ImagePart,
   LanguageModelV1Message,
   LanguageModelV1TextPart,
@@ -90,7 +91,12 @@ export function toLanguageModelMessages(
         const msg: LanguageModelV1Message = {
           role: "user",
           content: content.map(
-            (part): LanguageModelV1TextPart | LanguageModelV1ImagePart => {
+            (
+              part,
+            ):
+              | LanguageModelV1TextPart
+              | LanguageModelV1ImagePart
+              | LanguageModelV1FilePart => {
               const type = part.type;
               switch (type) {
                 case "text": {
@@ -104,6 +110,14 @@ export function toLanguageModelMessages(
                   };
                 }
 
+                case "file": {
+                  return {
+                    type: "file",
+                    data: new URL(part.data),
+                    mimeType: part.mimeType,
+                  };
+                }
+
                 default: {
                   const unhandledType: "ui" | "audio" = type;
                   throw new Error(

package/src/runtimes/edge/useEdgeRuntime.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { LocalRuntimeOptions, useLocalRuntime } from "..";
 import { EdgeChatAdapterOptions, EdgeChatAdapter } from "./EdgeChatAdapter";
 import { splitLocalRuntimeOptions } from "../local/LocalRuntimeOptions";

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

@@ -11,11 +11,12 @@ import {
   ThreadUserMessage,
   ThreadSystemMessage,
   CompleteAttachment,
+  FileContentPart,
+  Unstable_AudioContentPart,
 } from "../../types";
 import {
   CoreToolCallContentPart,
   ThreadStep,
-  Unstable_AudioContentPart,
 } from "../../types/AssistantTypes";
 
 export type ThreadMessageLike = {
@@ -25,6 +26,7 @@ export type ThreadMessageLike = {
     | readonly (
         | TextContentPart
         | ImageContentPart
+        | FileContentPart
         | Unstable_AudioContentPart
         | ToolCallContentPart<any, any>
         | CoreToolCallContentPart<any, any>
@@ -93,8 +95,10 @@ export const fromThreadMessageLike = (
               }
 
               default: {
-                const unhandledType: "image" | "audio" = type;
-                throw new Error(`Unknown content part type: ${unhandledType}`);
+                const unhandledType: "image" | "audio" | "file" = type;
+                throw new Error(
+                  `Unsupported assistant content part type: ${unhandledType}`,
+                );
               }
             }
           })
@@ -118,11 +122,14 @@ export const fromThreadMessageLike = (
             case "ui":
             case "image":
             case "audio":
+            case "file":
               return part;
 
             default: {
               const unhandledType: "tool-call" = type;
-              throw new Error(`Unknown content part type: ${unhandledType}`);
+              throw new Error(
+                `Unsupported user content part type: ${unhandledType}`,
+              );
             }
           }
         }),

package/src/runtimes/external-store/external-message-converter.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo } from "react";
 import { ThreadMessageConverter } from "./ThreadMessageConverter";
 import {

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useMemo, useState } from "react";
 import { ExternalStoreRuntimeCore } from "./ExternalStoreRuntimeCore";
 import { ExternalStoreAdapter } from "./ExternalStoreAdapter";

package/src/runtimes/local/ChatModelAdapter.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type {
   MessageStatus,
   RunConfig,

package/src/runtimes/local/LocalRuntimeCore.tsx

@@ -2,14 +2,20 @@ import type { CoreMessage } from "../../types/AssistantTypes";
 import { BaseAssistantRuntimeCore } from "../core/BaseAssistantRuntimeCore";
 import { LocalThreadRuntimeCore } from "./LocalThreadRuntimeCore";
 import { LocalRuntimeOptionsBase } from "./LocalRuntimeOptions";
-import { fromCoreMessages } from "../edge/converters/fromCoreMessage";
 import { LocalThreadListRuntimeCore } from "./LocalThreadListRuntimeCore";
 import { ExportedMessageRepository } from "../utils/MessageRepository";
+import { ThreadMessageLike } from "../external-store";
+import { fromThreadMessageLike } from "../external-store/ThreadMessageLike";
+import { generateId } from "../../internal";
+import { getAutoStatus } from "../external-store/auto-status";
 
 const getExportFromInitialMessages = (
-  initialMessages: readonly CoreMessage[],
+  initialMessages: readonly ThreadMessageLike[],
 ): ExportedMessageRepository => {
-  const messages = fromCoreMessages(initialMessages);
+  const messages = initialMessages.map((i, idx) => {
+    const isLast = idx === initialMessages.length - 1;
+    return fromThreadMessageLike(i, generateId(), getAutoStatus(isLast, false));
+  });
   return {
     messages: messages.map((m, idx) => ({
       parentId: messages[idx - 1]?.id ?? null,
@@ -26,7 +32,7 @@ export class LocalRuntimeCore extends BaseAssistantRuntimeCore {
 
   constructor(
     options: LocalRuntimeOptionsBase,
-    initialMessages: readonly CoreMessage[] | undefined,
+    initialMessages: readonly ThreadMessageLike[] | undefined,
   ) {
     super();
 

package/src/runtimes/local/LocalRuntimeOptions.tsx

@@ -1,5 +1,5 @@
-import type { CoreMessage } from "../../types";
 import { AttachmentAdapter } from "../attachment/AttachmentAdapter";
+import { ThreadMessageLike } from "../external-store";
 import { FeedbackAdapter } from "../feedback/FeedbackAdapter";
 import { SpeechSynthesisAdapter } from "../speech/SpeechAdapterTypes";
 import { ChatModelAdapter } from "./ChatModelAdapter";
@@ -16,7 +16,7 @@ export type LocalRuntimeOptionsBase = {
 
 // TODO align LocalRuntimeOptions with LocalRuntimeOptionsBase
 export type LocalRuntimeOptions = Omit<LocalRuntimeOptionsBase, "adapters"> & {
-  initialMessages?: readonly CoreMessage[] | undefined;
+  initialMessages?: readonly ThreadMessageLike[] | undefined;
   adapters?: Omit<LocalRuntimeOptionsBase["adapters"], "chatModel"> | undefined;
 };
 

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useCallback, useRef, useEffect, memo, useMemo } from "react";
 import { UseBoundStore, StoreApi, create } from "zustand";
 import { useAssistantRuntime } from "../../context";

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { ThreadListRuntimeCore } from "../core/ThreadListRuntimeCore";
 import { generateId } from "../../internal";
 import { RemoteThreadListAdapter } from "./types";

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

@@ -1,11 +1,16 @@
 import { AssistantCloudAPI, AssistantCloudConfig } from "./AssistantCloudAPI";
+import { AssistantCloudAuthTokens } from "./AssistantCloudAuthTokens";
 import { AssistantCloudThreads } from "./AssistantCloudThreads";
 
 export class AssistantCloud {
   public readonly threads;
+  public readonly auth;
 
   constructor(config: AssistantCloudConfig) {
     const api = new AssistantCloudAPI(config);
     this.threads = new AssistantCloudThreads(api);
+    this.auth = {
+      tokens: new AssistantCloudAuthTokens(api),
+    };
   }
 }

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

@@ -0,0 +1,13 @@
+import { AssistantCloudAPI } from "./AssistantCloudAPI";
+
+type AssistantCloudAuthTokensCreateResponse = {
+  token: string;
+};
+
+export class AssistantCloudAuthTokens {
+  constructor(private cloud: AssistantCloudAPI) {}
+
+  public async create(): Promise<AssistantCloudAuthTokensCreateResponse> {
+    return this.cloud.makeRequest("/auth/tokens", { method: "POST" });
+  }
+}

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

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, useEffect, useMemo } from "react";
 import { BaseAssistantRuntimeCore } from "../core/BaseAssistantRuntimeCore";
 import { RemoteThreadListThreadListRuntimeCore } from "./RemoteThreadListThreadListRuntimeCore";

package/src/styles/tailwindcss/thread.css

@@ -93,7 +93,7 @@
 }
 
 .aui-attachment-name {
-  @apply text-aui-muted-foreground line-clamp-1 text-ellipsis text-xs font-bold;
+  @apply text-aui-muted-foreground line-clamp-1 text-ellipsis break-all text-xs font-bold;
 }
 
 .aui-attachment-type {

package/src/types/AssistantTypes.ts

@@ -13,6 +13,12 @@ export type ImageContentPart = {
   readonly image: string;
 };
 
+export type FileContentPart = {
+  readonly type: "file";
+  readonly data: string;
+  readonly mimeType: string;
+};
+
 export type Unstable_AudioContentPart = {
   readonly type: "audio";
   readonly audio: {
@@ -21,6 +27,43 @@ export type Unstable_AudioContentPart = {
   };
 };
 
+/**
+ * @deprecated UI content parts are deprecated and will be removed in v0.8.0.
+ * Migration guide for external-store users using UI content parts:
+ * If you must, store UI elements on your external store messages, update your
+ * external store converter:
+ * ```ts
+ * const UI_PLACEHOLDER = Object.freeze({ type: "text", text: "UI content placeholder" });
+ * const convertMessage = (message: TMessage): ThreadMessageLike => ({
+ *   content: [
+ *     // other content parts,
+ *     UI_PLACEHOLDER
+ *   ],
+ * });
+ * ```
+ *
+ * Then, define a custom `TextContentPartComponent`:
+ *
+ * ```tsx
+ * const MyText: FC = () => {
+ *   const isUIPlaceholder = useContentPart(p => p === UI_PLACEHOLDER);
+ *
+ *   // this assumes that you have a `display` field on your original message objects before conversion.
+ *   const ui = useMessage(m => isUIPlaceholder ? getExternalStoreMessage(m).display : undefined);
+ *   if (ui) {
+ *     return ui;
+ *   }
+ *
+ *   return <MarkdownText />; // your default text component
+ * }
+ * ```
+ *
+ *  Pass this component to your Thread:
+ *
+ * ```tsx
+ * <Thread assistantMessage={{ components: { Text: MyText } }} userMessage={{ components: { Text: MyText } }} />
+ * ```
+ */
 export type UIContentPart = {
   readonly type: "ui";
   readonly display: ReactNode;
@@ -48,6 +91,7 @@ export type ToolCallContentPart<
 export type ThreadUserContentPart =
   | TextContentPart
   | ImageContentPart
+  | FileContentPart
   | Unstable_AudioContentPart
   | UIContentPart;
 
@@ -178,6 +222,7 @@ export type ThreadMessage = BaseThreadMessage &
 export type CoreUserContentPart =
   | TextContentPart
   | ImageContentPart
+  | FileContentPart
   | Unstable_AudioContentPart;
 export type CoreAssistantContentPart =
   | TextContentPart

package/src/types/ContentPartComponentTypes.tsx

@@ -1,7 +1,7 @@
-"use client";
 import type { ComponentType } from "react";
 import type {
   ContentPartStatus,
+  FileContentPart,
   ImageContentPart,
   TextContentPart,
   ToolCallContentPart,
@@ -21,6 +21,9 @@ export type TextContentPartComponent = ComponentType<TextContentPartProps>;
 export type ImageContentPartProps = ContentPartState & ImageContentPart;
 export type ImageContentPartComponent = ComponentType<ImageContentPartProps>;
 
+export type FileContentPartProps = ContentPartState & FileContentPart;
+export type FileContentPartComponent = ComponentType<FileContentPartProps>;
+
 export type Unstable_AudioContentPartProps = ContentPartState &
   Unstable_AudioContentPart;
 export type Unstable_AudioContentPartComponent =

package/src/types/index.ts

@@ -9,6 +9,8 @@ export type {
   AppendMessage,
   TextContentPart,
   ImageContentPart,
+  FileContentPart,
+  Unstable_AudioContentPart,
   ToolCallContentPart,
   UIContentPart,
   MessageStatus,
@@ -28,9 +30,6 @@ export type {
   CoreUserMessage,
   CoreAssistantMessage,
   CoreMessage,
-
-  // TODO
-  Unstable_AudioContentPart,
 } from "./AssistantTypes";
 
 export type {
@@ -40,12 +39,14 @@ export type {
   TextContentPartComponent,
   ImageContentPartProps,
   ImageContentPartComponent,
+  FileContentPartProps,
+  FileContentPartComponent,
+  Unstable_AudioContentPartProps,
+  Unstable_AudioContentPartComponent,
   UIContentPartProps,
   UIContentPartComponent,
   ToolCallContentPartProps,
   ToolCallContentPartComponent,
-  Unstable_AudioContentPartProps,
-  Unstable_AudioContentPartComponent,
 } from "./ContentPartComponentTypes";
 
 export type {

package/src/ui/base/avatar.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 

package/src/ui/base/button.tsx

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { Primitive } from "@radix-ui/react-primitive";
-import { ElementRef, forwardRef } from "react";
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
 
 const buttonVariants = cva("aui-button", {
   variants: {
@@ -22,9 +22,7 @@ const buttonVariants = cva("aui-button", {
 
 type ButtonElement = ElementRef<typeof Primitive.button>;
 
-export type ButtonProps = React.ComponentPropsWithoutRef<
-  typeof Primitive.button
-> &
+export type ButtonProps = ComponentPropsWithoutRef<typeof Primitive.button> &
   VariantProps<typeof buttonVariants>;
 
 const Button = forwardRef<ButtonElement, ButtonProps>(

package/src/ui/base/dialog.tsx

@@ -1,9 +1,7 @@
-"use client";
-
-import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 import classNames from "classnames";
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -13,9 +11,9 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+const DialogOverlay = forwardRef<
+  ElementRef<typeof DialogPrimitive.Overlay>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
@@ -25,9 +23,9 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+const DialogContent = forwardRef<
+  ElementRef<typeof DialogPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
@@ -49,7 +47,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 // const DialogHeader = ({
 //   className,
 //   ...props
-// }: React.HTMLAttributes<HTMLDivElement>) => (
+// }: HTMLAttributes<HTMLDivElement>) => (
 //   <div
 //     className={classNames(
 //       "flex flex-col space-y-1.5 text-center sm:text-left",
@@ -63,7 +61,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 // const DialogFooter = ({
 //   className,
 //   ...props
-// }: React.HTMLAttributes<HTMLDivElement>) => (
+// }: HTMLAttributes<HTMLDivElement>) => (
 //   <div
 //     className={classNames(
 //       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
@@ -74,9 +72,9 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 // );
 // DialogFooter.displayName = "DialogFooter";
 
-// const DialogTitle = React.forwardRef<
-//   React.ElementRef<typeof DialogPrimitive.Title>,
-//   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+// const DialogTitle = forwardRef<
+//   ElementRef<typeof DialogPrimitive.Title>,
+//   ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 // >(({ className, ...props }, ref) => (
 //   <DialogPrimitive.Title
 //     ref={ref}
@@ -89,9 +87,9 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 // ));
 // DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-// const DialogDescription = React.forwardRef<
-//   React.ElementRef<typeof DialogPrimitive.Description>,
-//   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+// const DialogDescription = forwardRef<
+//   ElementRef<typeof DialogPrimitive.Description>,
+//   ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 // >(({ className, ...props }, ref) => (
 //   <DialogPrimitive.Description
 //     ref={ref}

package/src/ui/base/tooltip-icon-button.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { forwardRef } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 import { Button, ButtonProps } from "./button";

package/src/ui/base/tooltip.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { withDefaults } from "../utils/withDefaults";
 import { FC } from "react";

package/src/ui/content-part.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { ContentPartPrimitive } from "../primitives";
 import { useSmoothStatus, withSmoothContextProvider } from "../utils/smooth";

package/src/ui/user-message.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ComponentPropsWithoutRef, forwardRef, type FC } from "react";
 
 import BranchPicker from "./branch-picker";

package/src/utils/RequireAtLeastOne.tsx

@@ -1,4 +1,3 @@
-"use client";
 export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
   T,
   Exclude<keyof T, Keys>

package/src/utils/combined/useCombinedStore.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo } from "react";
 import {
   type CombinedSelector,

package/src/utils/createActionButton.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import {
   ElementRef,
   forwardRef,

package/src/utils/hooks/useOnScrollToBottom.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useEffect } from "react";
 import { useThreadViewport } from "../../context/react/ThreadContext";

package/src/utils/smooth/SmoothContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   ComponentType,
   createContext,

package/src/utils/smooth/index.ts

@@ -1,3 +1,6 @@
+"use client";
+// TODO createContextStoreHook does not work well with server-side nextjs bundler
+// use client necessary here for now
+
 export { useSmooth } from "./useSmooth";
-export { useSmoothStatus } from "./SmoothContext";
-export { withSmoothContextProvider } from "./SmoothContext";
+export { useSmoothStatus, withSmoothContextProvider } from "./SmoothContext";