npm - @assistant-ui/mcp-docs-server - Versions diffs - 0.1.14 → 0.1.16 - Mend

@assistant-ui/mcp-docs-server 0.1.14 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/.docs/organized/code-examples/store-example.md +628 -0
package/.docs/organized/code-examples/with-ag-ui.md +792 -178
package/.docs/organized/code-examples/with-ai-sdk-v5.md +762 -209
package/.docs/organized/code-examples/with-assistant-transport.md +707 -254
package/.docs/organized/code-examples/with-cloud.md +848 -202
package/.docs/organized/code-examples/with-custom-thread-list.md +1855 -0
package/.docs/organized/code-examples/with-external-store.md +788 -172
package/.docs/organized/code-examples/with-ffmpeg.md +796 -196
package/.docs/organized/code-examples/with-langgraph.md +864 -230
package/.docs/organized/code-examples/with-parent-id-grouping.md +785 -255
package/.docs/organized/code-examples/with-react-hook-form.md +804 -226
package/.docs/organized/code-examples/with-tanstack.md +1574 -0
package/.docs/raw/blog/2024-07-29-hello/index.mdx +2 -3
package/.docs/raw/docs/api-reference/overview.mdx +6 -6
package/.docs/raw/docs/api-reference/primitives/ActionBar.mdx +85 -4
package/.docs/raw/docs/api-reference/primitives/AssistantIf.mdx +200 -0
package/.docs/raw/docs/api-reference/primitives/Composer.mdx +0 -20
package/.docs/raw/docs/api-reference/primitives/Message.mdx +0 -45
package/.docs/raw/docs/api-reference/primitives/Thread.mdx +0 -50
package/.docs/raw/docs/cli.mdx +396 -0
package/.docs/raw/docs/cloud/persistence/ai-sdk.mdx +2 -3
package/.docs/raw/docs/cloud/persistence/langgraph.mdx +2 -3
package/.docs/raw/docs/devtools.mdx +2 -3
package/.docs/raw/docs/getting-started.mdx +37 -1109
package/.docs/raw/docs/guides/Attachments.mdx +3 -25
package/.docs/raw/docs/guides/Branching.mdx +1 -1
package/.docs/raw/docs/guides/Speech.mdx +1 -1
package/.docs/raw/docs/guides/ToolUI.mdx +1 -1
package/.docs/raw/docs/legacy/styled/AssistantModal.mdx +2 -3
package/.docs/raw/docs/legacy/styled/Decomposition.mdx +6 -5
package/.docs/raw/docs/legacy/styled/Markdown.mdx +2 -3
package/.docs/raw/docs/legacy/styled/Thread.mdx +2 -3
package/.docs/raw/docs/react-compatibility.mdx +2 -5
package/.docs/raw/docs/runtimes/ai-sdk/use-chat.mdx +3 -4
package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +3 -6
package/.docs/raw/docs/runtimes/assistant-transport.mdx +891 -0
package/.docs/raw/docs/runtimes/custom/external-store.mdx +2 -3
package/.docs/raw/docs/runtimes/custom/local.mdx +11 -41
package/.docs/raw/docs/runtimes/data-stream.mdx +15 -11
package/.docs/raw/docs/runtimes/langgraph/index.mdx +4 -4
package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +1 -1
package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +2 -3
package/.docs/raw/docs/runtimes/langserve.mdx +2 -3
package/.docs/raw/docs/runtimes/mastra/full-stack-integration.mdx +2 -3
package/.docs/raw/docs/runtimes/mastra/separate-server-integration.mdx +2 -3
package/.docs/raw/docs/ui/AssistantModal.mdx +3 -25
package/.docs/raw/docs/ui/AssistantSidebar.mdx +2 -24
package/.docs/raw/docs/ui/Attachment.mdx +3 -25
package/.docs/raw/docs/ui/Markdown.mdx +2 -24
package/.docs/raw/docs/ui/Mermaid.mdx +2 -24
package/.docs/raw/docs/ui/Reasoning.mdx +2 -24
package/.docs/raw/docs/ui/Scrollbar.mdx +4 -6
package/.docs/raw/docs/ui/SyntaxHighlighting.mdx +3 -47
package/.docs/raw/docs/ui/Thread.mdx +38 -53
package/.docs/raw/docs/ui/ThreadList.mdx +4 -47
package/.docs/raw/docs/ui/ToolFallback.mdx +2 -24
package/package.json +15 -8

package/.docs/organized/code-examples/with-assistant-transport.md CHANGED Viewed

@@ -151,8 +151,8 @@ export default function RootLayout({
     <html lang="en">
       <body className="font-sans antialiased">
         <div className="flex h-screen flex-col">
-          <header className="bg-background border-b px-4 py-2">
-            <h1 className="text-lg font-semibold">
+          <header className="border-b bg-background px-4 py-2">
+            <h1 className="font-semibold text-lg">
               Assistant Transport Example
             </h1>
           </header>
@@ -181,7 +181,7 @@ import {
   convertLangChainMessages,
   LangChainMessage,
 } from "@assistant-ui/react-langgraph";
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { z } from "zod";
 // Frontend tool with execute function
@@ -265,7 +265,6 @@ const converter = (
   );
   const messages = [...state.messages, ...optimisticStateMessages.flat()];
-  console.log({ state, messages });
   return {
     messages: LangChainMessageConverter.toThreadMessages(messages),
     isRunning: connectionMetadata.isSending || false,
@@ -359,6 +358,247 @@ export default function Home() {
 ```
+## components/assistant-ui/attachment.tsx
+```tsx
+"use client";
+import { PropsWithChildren, useEffect, useState, type FC } from "react";
+import Image from "next/image";
+import { XIcon, PlusIcon, FileText } from "lucide-react";
+import {
+  AttachmentPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  useAssistantState,
+  useAssistantApi,
+} from "@assistant-ui/react";
+import { useShallow } from "zustand/shallow";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
+const useFileSrc = (file: File | undefined) => {
+  const [src, setSrc] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    if (!file) {
+      setSrc(undefined);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  return src;
+};
+const useAttachmentSrc = () => {
+  const { file, src } = useAssistantState(
+    useShallow(({ attachment }): { file?: File; src?: string } => {
+      if (attachment.type !== "image") return {};
+      if (attachment.file) return { file: attachment.file };
+      const src = attachment.content?.filter((c) => c.type === "image")[0]
+        ?.image;
+      if (!src) return {};
+      return { src };
+    }),
+  );
+  return useFileSrc(file) ?? src;
+};
+type AttachmentPreviewProps = {
+  src: string;
+};
+const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  return (
+    <Image
+      src={src}
+      alt="Image Preview"
+      width={1}
+      height={1}
+      className={
+        isLoaded
+          ? "aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain"
+          : "aui-attachment-preview-image-loading hidden"
+      }
+      onLoadingComplete={() => setIsLoaded(true)}
+      priority={false}
+    />
+  );
+};
+const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
+  const src = useAttachmentSrc();
+  if (!src) return children;
+  return (
+    <Dialog>
+      <DialogTrigger
+        className="aui-attachment-preview-trigger cursor-pointer transition-colors hover:bg-accent/50"
+        asChild
+      >
+        {children}
+      </DialogTrigger>
+      <DialogContent className="aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive">
+        <DialogTitle className="aui-sr-only sr-only">
+          Image Attachment Preview
+        </DialogTitle>
+        <div className="aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background">
+          <AttachmentPreview src={src} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+const AttachmentThumb: FC = () => {
+  const isImage = useAssistantState(
+    ({ attachment }) => attachment.type === "image",
+  );
+  const src = useAttachmentSrc();
+  return (
+    <Avatar className="aui-attachment-tile-avatar h-full w-full rounded-none">
+      <AvatarImage
+        src={src}
+        alt="Attachment preview"
+        className="aui-attachment-tile-image object-cover"
+      />
+      <AvatarFallback delayMs={isImage ? 200 : 0}>
+        <FileText className="aui-attachment-tile-fallback-icon size-8 text-muted-foreground" />
+      </AvatarFallback>
+    </Avatar>
+  );
+};
+const AttachmentUI: FC = () => {
+  const api = useAssistantApi();
+  const isComposer = api.attachment.source === "composer";
+  const isImage = useAssistantState(
+    ({ attachment }) => attachment.type === "image",
+  );
+  const typeLabel = useAssistantState(({ attachment }) => {
+    const type = attachment.type;
+    switch (type) {
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
+      default:
+        const _exhaustiveCheck: never = type;
+        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+    }
+  });
+  return (
+    <Tooltip>
+      <AttachmentPrimitive.Root
+        className={cn(
+          "aui-attachment-root relative",
+          isImage &&
+            "aui-attachment-root-composer only:[&>#attachment-tile]:size-24",
+        )}
+      >
+        <AttachmentPreviewDialog>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                "aui-attachment-tile size-14 cursor-pointer overflow-hidden rounded-[14px] border bg-muted transition-opacity hover:opacity-75",
+                isComposer &&
+                  "aui-attachment-tile-composer border-foreground/20",
+              )}
+              role="button"
+              id="attachment-tile"
+              aria-label={`${typeLabel} attachment`}
+            >
+              <AttachmentThumb />
+            </div>
+          </TooltipTrigger>
+        </AttachmentPreviewDialog>
+        {isComposer && <AttachmentRemove />}
+      </AttachmentPrimitive.Root>
+      <TooltipContent side="top">
+        <AttachmentPrimitive.Name />
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+const AttachmentRemove: FC = () => {
+  return (
+    <AttachmentPrimitive.Remove asChild>
+      <TooltipIconButton
+        tooltip="Remove file"
+        className="aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white text-muted-foreground opacity-100 shadow-sm hover:bg-white! [&_svg]:text-black hover:[&_svg]:text-destructive"
+        side="top"
+      >
+        <XIcon className="aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" />
+      </TooltipIconButton>
+    </AttachmentPrimitive.Remove>
+  );
+};
+export const UserMessageAttachments: FC = () => {
+  return (
+    <div className="aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2">
+      <MessagePrimitive.Attachments components={{ Attachment: AttachmentUI }} />
+    </div>
+  );
+};
+export const ComposerAttachments: FC = () => {
+  return (
+    <div className="aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pt-0.5 pb-1 empty:hidden">
+      <ComposerPrimitive.Attachments
+        components={{ Attachment: AttachmentUI }}
+      />
+    </div>
+  );
+};
+export const ComposerAddAttachment: FC = () => {
+  return (
+    <ComposerPrimitive.AddAttachment asChild>
+      <TooltipIconButton
+        tooltip="Add Attachment"
+        side="bottom"
+        variant="ghost"
+        size="icon"
+        className="aui-composer-add-attachment size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+        aria-label="Add Attachment"
+      >
+        <PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
+      </TooltipIconButton>
+    </ComposerPrimitive.AddAttachment>
+  );
+};
+```
 ## components/assistant-ui/markdown-text.tsx
 ```tsx
@@ -399,8 +639,10 @@ const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
   };
   return (
-    <div className="mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
-      <span className="lowercase [&>span]:text-xs">{language}</span>
+    <div className="aui-code-header-root mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-muted-foreground/15 px-4 py-2 font-semibold text-foreground text-sm dark:bg-muted-foreground/20">
+      <span className="aui-code-header-language lowercase [&>span]:text-xs">
+        {language}
+      </span>
       <TooltipIconButton tooltip="Copy" onClick={onCopy}>
         {!isCopied && <CopyIcon />}
         {isCopied && <CheckIcon />}
@@ -432,7 +674,7 @@ const defaultComponents = memoizeMarkdownComponents({
   h1: ({ className, ...props }) => (
     <h1
       className={cn(
-        "mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0",
+        "aui-md-h1 mb-8 scroll-m-20 font-extrabold text-4xl tracking-tight last:mb-0",
         className,
       )}
       {...props}
@@ -441,7 +683,7 @@ const defaultComponents = memoizeMarkdownComponents({
   h2: ({ className, ...props }) => (
     <h2
       className={cn(
-        "mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        "aui-md-h2 mt-8 mb-4 scroll-m-20 font-semibold text-3xl tracking-tight first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -450,7 +692,7 @@ const defaultComponents = memoizeMarkdownComponents({
   h3: ({ className, ...props }) => (
     <h3
       className={cn(
-        "mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        "aui-md-h3 mt-6 mb-4 scroll-m-20 font-semibold text-2xl tracking-tight first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -459,7 +701,7 @@ const defaultComponents = memoizeMarkdownComponents({
   h4: ({ className, ...props }) => (
     <h4
       className={cn(
-        "mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        "aui-md-h4 mt-6 mb-4 scroll-m-20 font-semibold text-xl tracking-tight first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -468,7 +710,7 @@ const defaultComponents = memoizeMarkdownComponents({
   h5: ({ className, ...props }) => (
     <h5
       className={cn(
-        "my-4 text-lg font-semibold first:mt-0 last:mb-0",
+        "aui-md-h5 my-4 font-semibold text-lg first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -476,20 +718,26 @@ const defaultComponents = memoizeMarkdownComponents({
   ),
   h6: ({ className, ...props }) => (
     <h6
-      className={cn("my-4 font-semibold first:mt-0 last:mb-0", className)}
+      className={cn(
+        "aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0",
+        className,
+      )}
       {...props}
     />
   ),
   p: ({ className, ...props }) => (
     <p
-      className={cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className)}
+      className={cn(
+        "aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0",
+        className,
+      )}
       {...props}
     />
   ),
   a: ({ className, ...props }) => (
     <a
       className={cn(
-        "text-primary font-medium underline underline-offset-4",
+        "aui-md-a font-medium text-primary underline underline-offset-4",
         className,
       )}
       {...props}
@@ -497,29 +745,29 @@ const defaultComponents = memoizeMarkdownComponents({
   ),
   blockquote: ({ className, ...props }) => (
     <blockquote
-      className={cn("border-l-2 pl-6 italic", className)}
+      className={cn("aui-md-blockquote border-l-2 pl-6 italic", className)}
       {...props}
     />
   ),
   ul: ({ className, ...props }) => (
     <ul
-      className={cn("my-5 ml-6 list-disc [&>li]:mt-2", className)}
+      className={cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className)}
       {...props}
     />
   ),
   ol: ({ className, ...props }) => (
     <ol
-      className={cn("my-5 ml-6 list-decimal [&>li]:mt-2", className)}
+      className={cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className)}
       {...props}
     />
   ),
   hr: ({ className, ...props }) => (
-    <hr className={cn("my-5 border-b", className)} {...props} />
+    <hr className={cn("aui-md-hr my-5 border-b", className)} {...props} />
   ),
   table: ({ className, ...props }) => (
     <table
       className={cn(
-        "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
+        "aui-md-table my-5 w-full border-separate border-spacing-0 overflow-y-auto",
         className,
       )}
       {...props}
@@ -528,7 +776,7 @@ const defaultComponents = memoizeMarkdownComponents({
   th: ({ className, ...props }) => (
     <th
       className={cn(
-        "bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right",
+        "aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right",
         className,
       )}
       {...props}
@@ -537,7 +785,7 @@ const defaultComponents = memoizeMarkdownComponents({
   td: ({ className, ...props }) => (
     <td
       className={cn(
-        "border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+        "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right",
         className,
       )}
       {...props}
@@ -546,7 +794,7 @@ const defaultComponents = memoizeMarkdownComponents({
   tr: ({ className, ...props }) => (
     <tr
       className={cn(
-        "m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
         className,
       )}
       {...props}
@@ -554,14 +802,14 @@ const defaultComponents = memoizeMarkdownComponents({
   ),
   sup: ({ className, ...props }) => (
     <sup
-      className={cn("[&>a]:text-xs [&>a]:no-underline", className)}
+      className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
       {...props}
     />
   ),
   pre: ({ className, ...props }) => (
     <pre
       className={cn(
-        "overflow-x-auto !rounded-t-none rounded-b-lg bg-black p-4 text-white",
+        "aui-md-pre overflow-x-auto rounded-t-none! rounded-b-lg bg-black p-4 text-white",
         className,
       )}
       {...props}
@@ -572,7 +820,8 @@ const defaultComponents = memoizeMarkdownComponents({
     return (
       <code
         className={cn(
-          !isCodeBlock && "bg-muted rounded border font-semibold",
+          !isCodeBlock &&
+            "aui-md-inline-code rounded border bg-muted font-semibold",
           className,
         )}
         {...props}
@@ -588,45 +837,53 @@ const defaultComponents = memoizeMarkdownComponents({
 ```tsx
 import {
-  ThreadPrimitive,
-  ComposerPrimitive,
-  MessagePrimitive,
+  ComposerAddAttachment,
+  ComposerAttachments,
+  UserMessageAttachments,
+} from "@/components/assistant-ui/attachment";
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
   ActionBarPrimitive,
+  AssistantIf,
   BranchPickerPrimitive,
+  ComposerPrimitive,
   ErrorPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
 } from "@assistant-ui/react";
-import type { FC } from "react";
 import {
   ArrowDownIcon,
   ArrowUpIcon,
-  PlusIcon,
-  CopyIcon,
   CheckIcon,
-  PencilIcon,
-  RefreshCwIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  Square,
+  CopyIcon,
+  DownloadIcon,
+  PencilIcon,
+  RefreshCwIcon,
+  SquareIcon,
 } from "lucide-react";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import { motion } from "framer-motion";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { MarkdownText } from "./markdown-text";
-import { ToolFallback } from "./tool-fallback";
+import type { FC } from "react";
 export const Thread: FC = () => {
   return (
     <ThreadPrimitive.Root
-      className="bg-background flex h-full flex-col"
+      className="aui-root aui-thread-root @container flex h-full flex-col bg-background"
       style={{
-        ["--thread-max-width" as string]: "48rem",
-        ["--thread-padding-x" as string]: "1rem",
+        ["--thread-max-width" as string]: "44rem",
       }}
     >
-      <ThreadPrimitive.Viewport className="relative flex min-w-0 flex-1 flex-col gap-6 overflow-y-scroll">
-        <ThreadWelcome />
+      <ThreadPrimitive.Viewport
+        turnAnchor="top"
+        className="aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4"
+      >
+        <AssistantIf condition={({ thread }) => thread.isEmpty}>
+          <ThreadWelcome />
+        </AssistantIf>
         <ThreadPrimitive.Messages
           components={{
@@ -636,12 +893,11 @@ export const Thread: FC = () => {
           }}
         />
-        <ThreadPrimitive.If empty={false}>
-          <motion.div className="min-h-6 min-w-6 shrink-0" />
-        </ThreadPrimitive.If>
+        <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6">
+          <ThreadScrollToBottom />
+          <Composer />
+        </ThreadPrimitive.ViewportFooter>
       </ThreadPrimitive.Viewport>
-      <Composer />
     </ThreadPrimitive.Root>
   );
 };
@@ -652,7 +908,7 @@ const ThreadScrollToBottom: FC = () => {
       <TooltipIconButton
         tooltip="Scroll to bottom"
         variant="outline"
-        className="dark:bg-background dark:hover:bg-accent absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible"
+        className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent"
       >
         <ArrowDownIcon />
       </TooltipIconButton>
@@ -662,84 +918,59 @@ const ThreadScrollToBottom: FC = () => {
 const ThreadWelcome: FC = () => {
   return (
-    <ThreadPrimitive.Empty>
-      <div className="mx-auto flex w-full max-w-[var(--thread-max-width)] flex-grow flex-col px-[var(--thread-padding-x)]">
-        <div className="flex w-full flex-grow flex-col items-center justify-center">
-          <div className="flex size-full flex-col justify-center px-8 md:mt-20">
-            <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ delay: 0.5 }}
-              className="text-2xl font-semibold"
-            >
-              Hello there!
-            </motion.div>
-            <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ delay: 0.6 }}
-              className="text-muted-foreground/65 text-2xl"
-            >
-              How can I help you today?
-            </motion.div>
-          </div>
+    <div className="aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col">
+      <div className="aui-thread-welcome-center flex w-full grow flex-col items-center justify-center">
+        <div className="aui-thread-welcome-message flex size-full flex-col justify-center px-4">
+          <h1 className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in font-semibold text-2xl duration-200">
+            Hello there!
+          </h1>
+          <p className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in text-muted-foreground text-xl delay-75 duration-200">
+            How can I help you today?
+          </p>
         </div>
       </div>
-    </ThreadPrimitive.Empty>
+      <ThreadSuggestions />
+    </div>
   );
 };
-const ThreadWelcomeSuggestions: FC = () => {
+const SUGGESTIONS = [
+  {
+    title: "What's the weather",
+    label: "in San Francisco?",
+    prompt: "What's the weather in San Francisco?",
+  },
+  {
+    title: "Explain React hooks",
+    label: "like useState and useEffect",
+    prompt: "Explain React hooks like useState and useEffect",
+  },
+] as const;
+const ThreadSuggestions: FC = () => {
   return (
-    <div className="grid w-full gap-2 sm:grid-cols-2">
-      {[
-        {
-          title: "What are the advantages",
-          label: "of using Assistant Cloud?",
-          action: "What are the advantages of using Assistant Cloud?",
-        },
-        {
-          title: "Write code to",
-          label: `demonstrate topological sorting`,
-          action: `Write code to demonstrate topological sorting`,
-        },
-        {
-          title: "Help me write an essay",
-          label: `about AI chat applications`,
-          action: `Help me write an essay about AI chat applications`,
-        },
-        {
-          title: "What is the weather",
-          label: "in San Francisco?",
-          action: "What is the weather in San Francisco?",
-        },
-      ].map((suggestedAction, index) => (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 20 }}
-          transition={{ delay: 0.05 * index }}
-          key={`suggested-action-${suggestedAction.title}-${index}`}
-          className="[&:nth-child(n+3)]:hidden sm:[&:nth-child(n+3)]:block"
+    <div className="aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4">
+      {SUGGESTIONS.map((suggestion, index) => (
+        <div
+          key={suggestion.prompt}
+          className="aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 @md:nth-[n+3]:block nth-[n+3]:hidden animate-in fill-mode-both duration-200"
+          style={{ animationDelay: `${100 + index * 50}ms` }}
         >
-          <ThreadPrimitive.Suggestion
-            prompt={suggestedAction.action}
-            method="replace"
-            autoSend
-            asChild
-          >
+          <ThreadPrimitive.Suggestion prompt={suggestion.prompt} send asChild>
             <Button
               variant="ghost"
-              className="dark:hover:bg-accent/60 h-auto w-full flex-1 flex-wrap items-start justify-start gap-1 rounded-xl border px-4 py-3.5 text-left text-sm sm:flex-col"
-              aria-label={suggestedAction.action}
+              className="aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-2xl border px-4 py-3 text-left text-sm transition-colors hover:bg-muted"
+              aria-label={suggestion.prompt}
             >
-              <span className="font-medium">{suggestedAction.title}</span>
-              <p className="text-muted-foreground">{suggestedAction.label}</p>
+              <span className="aui-thread-welcome-suggestion-text-1 font-medium">
+                {suggestion.title}
+              </span>
+              <span className="aui-thread-welcome-suggestion-text-2 text-muted-foreground">
+                {suggestion.label}
+              </span>
             </Button>
           </ThreadPrimitive.Suggestion>
-        </motion.div>
+        </div>
       ))}
     </div>
   );
@@ -747,64 +978,56 @@ const ThreadWelcomeSuggestions: FC = () => {
 const Composer: FC = () => {
   return (
-    <div className="bg-background relative mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 px-[var(--thread-padding-x)] pb-4 md:pb-6">
-      <ThreadScrollToBottom />
-      <ThreadPrimitive.Empty>
-        <ThreadWelcomeSuggestions />
-      </ThreadPrimitive.Empty>
-      <ComposerPrimitive.Root className="relative flex w-full flex-col rounded-2xl focus-within:ring-2 focus-within:ring-black focus-within:ring-offset-2 dark:focus-within:ring-white">
+    <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col">
+      <ComposerPrimitive.AttachmentDropzone className="aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border border-input bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50">
+        <ComposerAttachments />
         <ComposerPrimitive.Input
           placeholder="Send a message..."
-          className="bg-muted border-border dark:border-muted-foreground/15 focus:outline-primary placeholder:text-muted-foreground max-h-[calc(50dvh)] min-h-16 w-full resize-none rounded-t-2xl border-x border-t px-4 pt-2 pb-3 text-base outline-none"
+          className="aui-composer-input mb-1 max-h-32 min-h-14 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0"
           rows={1}
           autoFocus
           aria-label="Message input"
         />
         <ComposerAction />
-      </ComposerPrimitive.Root>
-    </div>
+      </ComposerPrimitive.AttachmentDropzone>
+    </ComposerPrimitive.Root>
   );
 };
 const ComposerAction: FC = () => {
   return (
-    <div className="bg-muted border-border dark:border-muted-foreground/15 relative flex items-center justify-between rounded-b-2xl border-x border-b p-2">
-      <TooltipIconButton
-        tooltip="Attach file"
-        variant="ghost"
-        className="hover:bg-foreground/15 dark:hover:bg-background/50 scale-115 p-3.5"
-        onClick={() => {
-          console.log("Attachment clicked - not implemented");
-        }}
-      >
-        <PlusIcon />
-      </TooltipIconButton>
+    <div className="aui-composer-action-wrapper relative mx-2 mb-2 flex items-center justify-between">
+      <ComposerAddAttachment />
-      <ThreadPrimitive.If running={false}>
+      <AssistantIf condition={({ thread }) => !thread.isRunning}>
         <ComposerPrimitive.Send asChild>
-          <Button
+          <TooltipIconButton
+            tooltip="Send message"
+            side="bottom"
             type="submit"
             variant="default"
-            className="dark:border-muted-foreground/90 border-muted-foreground/60 hover:bg-primary/75 size-8 rounded-full border"
+            size="icon"
+            className="aui-composer-send size-8 rounded-full"
             aria-label="Send message"
           >
-            <ArrowUpIcon className="size-5" />
-          </Button>
+            <ArrowUpIcon className="aui-composer-send-icon size-4" />
+          </TooltipIconButton>
         </ComposerPrimitive.Send>
-      </ThreadPrimitive.If>
+      </AssistantIf>
-      <ThreadPrimitive.If running>
+      <AssistantIf condition={({ thread }) => thread.isRunning}>
         <ComposerPrimitive.Cancel asChild>
           <Button
             type="button"
             variant="default"
-            className="dark:border-muted-foreground/90 border-muted-foreground/60 hover:bg-primary/75 size-8 rounded-full border"
+            size="icon"
+            className="aui-composer-cancel size-8 rounded-full"
             aria-label="Stop generating"
           >
-            <Square className="size-3.5 fill-white dark:size-4 dark:fill-black" />
+            <SquareIcon className="aui-composer-cancel-icon size-3 fill-current" />
           </Button>
         </ComposerPrimitive.Cancel>
-      </ThreadPrimitive.If>
+      </AssistantIf>
     </div>
   );
 };
@@ -812,8 +1035,8 @@ const ComposerAction: FC = () => {
 const MessageError: FC = () => {
   return (
     <MessagePrimitive.Error>
-      <ErrorPrimitive.Root className="border-destructive bg-destructive/10 dark:bg-destructive/5 text-destructive mt-2 rounded-md border p-3 text-sm dark:text-red-200">
-        <ErrorPrimitive.Message className="line-clamp-2" />
+      <ErrorPrimitive.Root className="aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200">
+        <ErrorPrimitive.Message className="aui-message-error-message line-clamp-2" />
       </ErrorPrimitive.Root>
     </MessagePrimitive.Error>
   );
@@ -821,31 +1044,24 @@ const MessageError: FC = () => {
 const AssistantMessage: FC = () => {
   return (
-    <MessagePrimitive.Root asChild>
-      <motion.div
-        className="relative mx-auto grid w-full max-w-[var(--thread-max-width)] grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] px-[var(--thread-padding-x)] py-4"
-        initial={{ y: 5, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        data-role="assistant"
-      >
-        <div className="ring-border bg-background col-start-1 row-start-1 flex size-8 shrink-0 items-center justify-center rounded-full ring-1">
-          <StarIcon size={14} />
-        </div>
-        <div className="text-foreground col-span-2 col-start-2 row-start-1 ml-4 leading-7 break-words">
-          <MessagePrimitive.Content
-            components={{
-              Text: MarkdownText,
-              tools: { Fallback: ToolFallback },
-            }}
-          />
-          <MessageError />
-        </div>
+    <MessagePrimitive.Root
+      className="aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
+      data-role="assistant"
+    >
+      <div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
+        <MessagePrimitive.Parts
+          components={{
+            Text: MarkdownText,
+            tools: { Fallback: ToolFallback },
+          }}
+        />
+        <MessageError />
+      </div>
+      <div className="aui-assistant-message-footer mt-1 ml-2 flex">
+        <BranchPicker />
         <AssistantActionBar />
-        <BranchPicker className="col-start-2 row-start-2 mr-2 -ml-2" />
-      </motion.div>
+      </div>
     </MessagePrimitive.Root>
   );
 };
@@ -856,18 +1072,23 @@ const AssistantActionBar: FC = () => {
       hideWhenRunning
       autohide="not-last"
       autohideFloat="single-branch"
-      className="text-muted-foreground data-floating:bg-background col-start-3 row-start-2 mt-3 ml-3 flex gap-1 data-floating:absolute data-floating:mt-2 data-floating:rounded-md data-floating:border data-floating:p-1 data-floating:shadow-sm"
+      className="aui-assistant-action-bar-root -ml-1 col-start-3 row-start-2 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm"
     >
       <ActionBarPrimitive.Copy asChild>
         <TooltipIconButton tooltip="Copy">
-          <MessagePrimitive.If copied>
+          <AssistantIf condition={({ message }) => message.isCopied}>
             <CheckIcon />
-          </MessagePrimitive.If>
-          <MessagePrimitive.If copied={false}>
+          </AssistantIf>
+          <AssistantIf condition={({ message }) => !message.isCopied}>
             <CopyIcon />
-          </MessagePrimitive.If>
+          </AssistantIf>
         </TooltipIconButton>
       </ActionBarPrimitive.Copy>
+      <ActionBarPrimitive.ExportMarkdown asChild>
+        <TooltipIconButton tooltip="Export as Markdown">
+          <DownloadIcon />
+        </TooltipIconButton>
+      </ActionBarPrimitive.ExportMarkdown>
       <ActionBarPrimitive.Reload asChild>
         <TooltipIconButton tooltip="Refresh">
           <RefreshCwIcon />
@@ -879,21 +1100,22 @@ const AssistantActionBar: FC = () => {
 const UserMessage: FC = () => {
   return (
-    <MessagePrimitive.Root asChild>
-      <motion.div
-        className="mx-auto grid w-full max-w-[var(--thread-max-width)] auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-1 px-[var(--thread-padding-x)] py-4 [&:where(>*)]:col-start-2"
-        initial={{ y: 5, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        data-role="user"
-      >
-        <UserActionBar />
+    <MessagePrimitive.Root
+      className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
+      data-role="user"
+    >
+      <UserMessageAttachments />
-        <div className="bg-muted text-foreground col-start-2 rounded-3xl px-5 py-2.5 break-words">
-          <MessagePrimitive.Content components={{ Text: MarkdownText }} />
+      <div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
+        <div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
+          <MessagePrimitive.Parts />
         </div>
+        <div className="aui-user-action-bar-wrapper -translate-x-full -translate-y-1/2 absolute top-1/2 left-0 pr-2">
+          <UserActionBar />
+        </div>
+      </div>
-        <BranchPicker className="col-span-full col-start-1 row-start-3 -mr-1 justify-end" />
-      </motion.div>
+      <BranchPicker className="aui-user-branch-picker -mr-1 col-span-full col-start-1 row-start-3 justify-end" />
     </MessagePrimitive.Root>
   );
 };
@@ -903,10 +1125,10 @@ const UserActionBar: FC = () => {
     <ActionBarPrimitive.Root
       hideWhenRunning
       autohide="not-last"
-      className="col-start-1 mt-2.5 mr-3 flex flex-col items-end"
+      className="aui-user-action-bar-root flex flex-col items-end"
     >
       <ActionBarPrimitive.Edit asChild>
-        <TooltipIconButton tooltip="Edit">
+        <TooltipIconButton tooltip="Edit" className="aui-user-action-edit p-4">
           <PencilIcon />
         </TooltipIconButton>
       </ActionBarPrimitive.Edit>
@@ -916,27 +1138,24 @@ const UserActionBar: FC = () => {
 const EditComposer: FC = () => {
   return (
-    <div className="mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 px-[var(--thread-padding-x)]">
-      <ComposerPrimitive.Root className="bg-muted ml-auto flex w-full max-w-7/8 flex-col rounded-xl">
+    <MessagePrimitive.Root className="aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3">
+      <ComposerPrimitive.Root className="aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted">
         <ComposerPrimitive.Input
-          className="text-foreground flex min-h-[60px] w-full resize-none bg-transparent p-4 outline-none"
+          className="aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none"
           autoFocus
         />
-        <div className="mx-3 mb-3 flex items-center justify-center gap-2 self-end">
+        <div className="aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end">
           <ComposerPrimitive.Cancel asChild>
-            <Button variant="ghost" size="sm" aria-label="Cancel edit">
+            <Button variant="ghost" size="sm">
               Cancel
             </Button>
           </ComposerPrimitive.Cancel>
           <ComposerPrimitive.Send asChild>
-            <Button size="sm" aria-label="Update message">
-              Update
-            </Button>
+            <Button size="sm">Update</Button>
           </ComposerPrimitive.Send>
         </div>
       </ComposerPrimitive.Root>
-    </div>
+    </MessagePrimitive.Root>
   );
 };
@@ -948,7 +1167,7 @@ const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
     <BranchPickerPrimitive.Root
       hideWhenSingleBranch
       className={cn(
-        "text-muted-foreground inline-flex items-center text-xs",
+        "aui-branch-picker-root -ml-2 mr-2 inline-flex items-center text-muted-foreground text-xs",
         className,
       )}
       {...rest}
@@ -958,7 +1177,7 @@ const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
           <ChevronLeftIcon />
         </TooltipIconButton>
       </BranchPickerPrimitive.Previous>
-      <span className="font-medium">
+      <span className="aui-branch-picker-state font-medium">
         <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
       </span>
       <BranchPickerPrimitive.Next asChild>
@@ -970,57 +1189,93 @@ const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
   );
 };
-const StarIcon = ({ size = 14 }: { size?: number }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8 0L9.79611 6.20389L16 8L9.79611 9.79611L8 16L6.20389 9.79611L0 8L6.20389 6.20389L8 0Z"
-      fill="currentColor"
-    />
-  </svg>
-);
 ```
 ## components/assistant-ui/tool-fallback.tsx
 ```tsx
-import { ToolCallMessagePartComponent } from "@assistant-ui/react";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  XCircleIcon,
+} from "lucide-react";
 import { useState } from "react";
-import { Button } from "../ui/button";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 export const ToolFallback: ToolCallMessagePartComponent = ({
   toolName,
   argsText,
   result,
+  status,
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(true);
+  const isCancelled =
+    status?.type === "incomplete" && status.reason === "cancelled";
+  const cancelledReason =
+    isCancelled && status.error
+      ? typeof status.error === "string"
+        ? status.error
+        : JSON.stringify(status.error)
+      : null;
   return (
-    <div className="mb-4 flex w-full flex-col gap-3 rounded-lg border py-3">
-      <div className="flex items-center gap-2 px-4">
-        <CheckIcon className="size-4" />
-        <p className="flex-grow">
-          Used tool: <b>{toolName}</b>
+    <div
+      className={cn(
+        "aui-tool-fallback-root mb-4 flex w-full flex-col gap-3 rounded-lg border py-3",
+        isCancelled && "border-muted-foreground/30 bg-muted/30",
+      )}
+    >
+      <div className="aui-tool-fallback-header flex items-center gap-2 px-4">
+        {isCancelled ? (
+          <XCircleIcon className="aui-tool-fallback-icon size-4 text-muted-foreground" />
+        ) : (
+          <CheckIcon className="aui-tool-fallback-icon size-4" />
+        )}
+        <p
+          className={cn(
+            "aui-tool-fallback-title grow",
+            isCancelled && "text-muted-foreground line-through",
+          )}
+        >
+          {isCancelled ? "Cancelled tool: " : "Used tool: "}
+          <b>{toolName}</b>
         </p>
         <Button onClick={() => setIsCollapsed(!isCollapsed)}>
           {isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
         </Button>
       </div>
       {!isCollapsed && (
-        <div className="flex flex-col gap-2 border-t pt-2">
-          <div className="px-4">
-            <pre className="whitespace-pre-wrap">{argsText}</pre>
+        <div className="aui-tool-fallback-content flex flex-col gap-2 border-t pt-2">
+          {cancelledReason && (
+            <div className="aui-tool-fallback-cancelled-root px-4">
+              <p className="aui-tool-fallback-cancelled-header font-semibold text-muted-foreground">
+                Cancelled reason:
+              </p>
+              <p className="aui-tool-fallback-cancelled-reason text-muted-foreground">
+                {cancelledReason}
+              </p>
+            </div>
+          )}
+          <div
+            className={cn(
+              "aui-tool-fallback-args-root px-4",
+              isCancelled && "opacity-60",
+            )}
+          >
+            <pre className="aui-tool-fallback-args-value whitespace-pre-wrap">
+              {argsText}
+            </pre>
           </div>
-          {result !== undefined && (
-            <div className="border-t border-dashed px-4 pt-2">
-              <p className="font-semibold">Result:</p>
-              <pre className="whitespace-pre-wrap">
+          {!isCancelled && result !== undefined && (
+            <div className="aui-tool-fallback-result-root border-t border-dashed px-4 pt-2">
+              <p className="aui-tool-fallback-result-header font-semibold">
+                Result:
+              </p>
+              <pre className="aui-tool-fallback-result-content whitespace-pre-wrap">
                 {typeof result === "string"
                   ? result
                   : JSON.stringify(result, null, 2)}
@@ -1040,7 +1295,7 @@ export const ToolFallback: ToolCallMessagePartComponent = ({
 ```tsx
 "use client";
-import { ComponentPropsWithoutRef, forwardRef } from "react";
+import { ComponentPropsWithRef, forwardRef } from "react";
 import { Slottable } from "@radix-ui/react-slot";
 import {
@@ -1051,7 +1306,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-export type TooltipIconButtonProps = ComponentPropsWithoutRef<typeof Button> & {
+export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
   tooltip: string;
   side?: "top" | "bottom" | "left" | "right";
 };
@@ -1067,11 +1322,11 @@ export const TooltipIconButton = forwardRef<
           variant="ghost"
           size="icon"
           {...rest}
-          className={cn("size-6 p-1", className)}
+          className={cn("aui-button-icon size-6 p-1", className)}
           ref={ref}
         >
           <Slottable>{children}</Slottable>
-          <span className="sr-only">{tooltip}</span>
+          <span className="aui-sr-only sr-only">{tooltip}</span>
         </Button>
       </TooltipTrigger>
       <TooltipContent side={side}>{tooltip}</TooltipContent>
@@ -1083,6 +1338,62 @@ TooltipIconButton.displayName = "TooltipIconButton";
 ```
+## components/ui/avatar.tsx
+```tsx
+"use client";
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "@/lib/utils";
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarImage, AvatarFallback };
+```
 ## components/ui/button.tsx
 ```tsx
@@ -1093,16 +1404,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
@@ -1111,7 +1422,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
       },
@@ -1148,6 +1459,147 @@ export { Button, buttonVariants };
 ```
+## components/ui/dialog.tsx
+```tsx
+"use client";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("font-semibold text-lg leading-none", className)}
+      {...props}
+    />
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
+```
 ## components/ui/tooltip.tsx
 ```tsx
@@ -1199,13 +1651,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs data-[state=closed]:animate-out",
           className,
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-primary fill-primary" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );
@@ -1261,28 +1713,30 @@ export default nextConfig;
     "@assistant-ui/react": "workspace:^",
     "@assistant-ui/react-langgraph": "workspace:^",
     "@assistant-ui/react-markdown": "workspace:^",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/postcss": "^4.1.17",
-    "assistant-stream": "^0.2.41",
+    "assistant-stream": "^0.2.44",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.23.24",
-    "lucide-react": "^0.554.0",
-    "next": "16.0.3",
+    "lucide-react": "^0.556.0",
+    "next": "16.0.7",
     "postcss": "^8.5.6",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.1.12"
+    "zod": "^4.1.13",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
@@ -1290,8 +1744,7 @@ export default nextConfig;
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "eslint ."
+    "start": "next start"
   }
 }