assistant-ui 0.0.119 → 0.0.121

package/src/lib/cloud-url.ts

@@ -0,0 +1,19 @@
+export const validateCloudUrl = (value: string): string => {
+  const url = new URL(value);
+  if (
+    url.username ||
+    url.password ||
+    url.search ||
+    url.hash ||
+    (url.protocol !== "https:" &&
+      !(
+        url.protocol === "http:" &&
+        ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname)
+      ))
+  ) {
+    throw new Error(
+      "Cloud, accounts and setup URLs must use HTTPS or HTTP localhost for development.",
+    );
+  }
+  return value.replace(/\/+$/, "");
+};

package/src/program.ts

@@ -8,6 +8,7 @@ import { mcp } from "./commands/mcp";
 import { agent } from "./commands/agent";
 import { info } from "./commands/info";
 import { doctor } from "./commands/doctor";
+import { cloud } from "./commands/cloud";
 
 export function buildProgram() {
   return new Command()
@@ -21,6 +22,7 @@ export function buildProgram() {
     .addCommand(upgradeCommand)
     .addCommand(update)
     .addCommand(agent)
+    .addCommand(cloud)
     .addCommand(info)
     .addCommand(doctor);
 }

package/templates/cloud-harness/.assistant-ui/template.json

@@ -0,0 +1,3 @@
+{
+  "template": "cloud-harness"
+}

package/templates/cloud-harness/.env.example

@@ -0,0 +1 @@
+OPENAI_API_KEY=

package/templates/cloud-harness/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/templates/cloud-harness/README.md

@@ -0,0 +1,28 @@
+# Shared cloud chat
+
+This Next.js starter connects assistant-ui to a hosted harness. Browser clients
+on the same URL share conversation state, replies, and cancellation through
+`HarnessCloudThreadList`.
+
+Run `npx assistant-ui@latest cloud setup .` from this app to sign in and configure a project and harness.
+Add your `OPENAI_API_KEY` to `.env.local`, install dependencies, and run `npm run dev`.
+Open the app in two browser windows, or use **Share this chat** to copy its link.
+Send a message from either window; both show the same reply as it streams.
+Reload either window to restore the conversation.
+
+The URL fragment selects the thread. A fresh app uses `main` in the
+configured shared workspace. The server mints short-lived browser credentials for the
+shared `hackathon` user. `ASSISTANT_API_KEY` and `OPENAI_API_KEY` stay in the
+server environment. This starter admits visitors as the same shared user.
+Both `/api/credential` and `/api/chat` admit public visitors in this hackathon
+starter. Add your application authentication to both routes before deploying a
+private workspace.
+
+During local development, the existing harness runtime serves model requests
+through the browser's localhost tunnel. Keep a browser connected while a run
+is active. For deployment, add the application's HTTPS `/api/chat` endpoint to
+the harness's allowed endpoints.
+
+The harness runtimes are bundled as local package tarballs while their public
+packages are in preview. See [vendor/README.md](vendor/README.md) for their source
+revision, license, and reproduction command.

package/templates/cloud-harness/app/api/chat/route.ts

@@ -0,0 +1,13 @@
+import { openai } from "@ai-sdk/openai";
+import { convertToModelMessages, streamText, type UIMessage } from "ai";
+
+export const maxDuration = 30;
+
+export const POST = async (request: Request) => {
+  const { messages } = (await request.json()) as { messages: UIMessage[] };
+  const result = streamText({
+    model: openai.responses("gpt-6-luna"),
+    messages: await convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+};

package/templates/cloud-harness/app/api/credential/route.ts

@@ -0,0 +1,14 @@
+import { AssistantCloud } from "assistant-cloud";
+
+export const GET = async () => {
+  const cloud = new AssistantCloud({
+    baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL!,
+    apiKey: process.env.ASSISTANT_API_KEY!,
+    workspaceId: process.env.NEXT_PUBLIC_ASSISTANT_WORKSPACE_ID!,
+    userId: "hackathon",
+  });
+  const credential = await cloud.auth.tokens.create();
+  return Response.json(credential, {
+    headers: { "Cache-Control": "no-store" },
+  });
+};

package/templates/cloud-harness/app/assistant.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { AuiConfig, AuiProvider } from "@assistant-ui/react";
+import { HarnessCloudThreadList } from "@assistant-ui/react-harness-sdk";
+import { useSyncExternalStore } from "react";
+import { Thread } from "@/components/assistant-ui/elements/thread.aui";
+import { Button } from "@/components/ui/button";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
+
+const credential = async () => {
+  const response = await fetch("/api/credential", { cache: "no-store" });
+  if (!response.ok) throw new Error(await response.text());
+  const { token } = (await response.json()) as { token: string };
+  return token;
+};
+
+const ShareThread = () => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => copyToClipboard(window.location.href)}
+    >
+      {isCopied ? "Link copied" : "Share this chat"}
+    </Button>
+  );
+};
+
+const ConnectedAssistant = ({ threadId }: { threadId: string }) => {
+  const config = AuiConfig({
+    threads: HarnessCloudThreadList({
+      url: "/api/chat",
+      origin: process.env.NEXT_PUBLIC_ASSISTANT_HARNESS_URL!,
+      workspaceId: process.env.NEXT_PUBLIC_ASSISTANT_WORKSPACE_ID!,
+      credential,
+      threadId,
+      onThreadIdChange: (threadId) => {
+        window.location.hash = threadId ?? crypto.randomUUID();
+      },
+    }),
+  });
+  return (
+    <AuiProvider config={config}>
+      <div className="flex h-dvh flex-col">
+        <header className="flex items-center justify-between border-b px-6 py-3">
+          <div>
+            <h1 className="font-semibold">Shared chat</h1>
+            <p className="text-muted-foreground text-sm">
+              Open the same link in another browser to chat together.
+            </p>
+          </div>
+          <ShareThread />
+        </header>
+        <div className="min-h-0 flex-1">
+          <Thread />
+        </div>
+      </div>
+    </AuiProvider>
+  );
+};
+
+export const Assistant = () => {
+  const threadId = useSyncExternalStore(
+    subscribeToHash,
+    currentThreadId,
+    () => null,
+  );
+  if (threadId === null)
+    return (
+      <p className="p-6" role="status">
+        Connecting to your chat…
+      </p>
+    );
+  return <ConnectedAssistant threadId={threadId} />;
+};
+
+const currentThreadId = () => window.location.hash.slice(1) || "main";
+
+const subscribeToHash = (onChange: () => void) => {
+  window.addEventListener("hashchange", onChange);
+  return () => window.removeEventListener("hashchange", onChange);
+};

package/templates/cloud-harness/app/globals.css

@@ -0,0 +1,139 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "tw-shimmer";
+
+@custom-variant data-open (&:where([data-state="open"], [data-open]:not([data-open="false"])));
+@custom-variant data-closed (&:where([data-state="closed"], [data-closed]:not([data-closed="false"])));
+
+@theme inline {
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(
+        --radix-collapsible-content-height,
+        var(--collapsible-panel-height, auto)
+      );
+    }
+  }
+  @keyframes collapsible-up {
+    from {
+      height: var(
+        --radix-collapsible-content-height,
+        var(--collapsible-panel-height, auto)
+      );
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-inter);
+  --font-mono: var(--font-ibm-plex-mono);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: 1.5rem;
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  :root {
+    color-scheme: light;
+  }
+
+  :root.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-optical-sizing: auto;
+  }
+}

package/templates/cloud-harness/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { IBM_Plex_Mono, Inter } from "next/font/google";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import "./globals.css";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+  axes: ["opsz"],
+});
+
+const ibmPlexMono = IBM_Plex_Mono({
+  variable: "--font-ibm-plex-mono",
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+});
+
+export const metadata: Metadata = {
+  title: "Shared cloud chat",
+  description: "Generated by create-assistant-ui",
+};
+
+const RootLayout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return (
+    <html lang="en" className="dark">
+      <body className={`${inter.variable} ${ibmPlexMono.variable} antialiased`}>
+        <TooltipProvider>{children}</TooltipProvider>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;

package/templates/cloud-harness/app/page.tsx

@@ -0,0 +1,5 @@
+import { Assistant } from "./assistant";
+
+const Home = () => <Assistant />;
+
+export default Home;

package/templates/cloud-harness/components/assistant-ui/elements/attachment.aui.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import {
+  type PropsWithChildren,
+  useState,
+  type FC,
+  isValidElement,
+} from "react";
+import {
+  XIcon,
+  PlusIcon,
+  FileText,
+  Loader2Icon,
+  AlertCircleIcon,
+} from "lucide-react";
+import {
+  AttachmentPrimitive,
+  ComposerPrimitive,
+  MessagePrimitive,
+  useAuiState,
+  useAui,
+} from "@assistant-ui/react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  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/elements/tooltip-icon-button";
+import { useAttachmentSrc } from "@/hooks/use-attachment-src";
+import { cn } from "@/lib/utils";
+
+type AttachmentPreviewProps = {
+  src: string;
+  name: string;
+};
+
+const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src, name }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  return (
+    <img
+      src={src}
+      alt={`Preview of ${name}`}
+      className={cn(
+        "block h-auto max-h-[80vh] w-auto max-w-full rounded-sm object-contain transition-opacity duration-300 motion-reduce:transition-none",
+        isLoaded
+          ? "aui-attachment-preview-image-loaded opacity-100"
+          : "aui-attachment-preview-image-loading opacity-0",
+      )}
+      onLoad={() => setIsLoaded(true)}
+    />
+  );
+};
+
+type AttachmentPreviewDialogProps = PropsWithChildren<{
+  src: string | undefined;
+  name: string;
+}>;
+
+const AttachmentPreviewDialog: FC<AttachmentPreviewDialogProps> = ({
+  children,
+  src,
+  name,
+}) => {
+  if (!src) return children;
+
+  return (
+    <Dialog>
+      <DialogTrigger
+        nativeButton={false}
+        className="aui-attachment-preview-trigger cursor-zoom-in"
+        render={
+          isValidElement(children) ? (
+            children
+          ) : (
+            <button type="button">{children}</button>
+          )
+        }
+      />
+      <DialogContent className="aui-attachment-preview-dialog-content [&>button]:bg-foreground/60 [&>button]:hover:bg-foreground/80 [&_svg]:text-background p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0!">
+        <DialogTitle className="aui-sr-only sr-only">
+          Preview {name}
+        </DialogTitle>
+        <div className="aui-attachment-preview bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden rounded-sm">
+          <AttachmentPreview src={src} name={name} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const AttachmentThumb: FC<{ src: string | undefined }> = ({ src }) => {
+  return (
+    <Avatar className="aui-attachment-tile-avatar h-full w-full rounded-none after:hidden">
+      <AvatarImage
+        src={src}
+        alt=""
+        className="aui-attachment-tile-image rounded-none object-cover"
+      />
+      <AvatarFallback>
+        <FileText className="aui-attachment-tile-fallback-icon text-muted-foreground/80 size-6 stroke-[1.5]" />
+      </AvatarFallback>
+    </Avatar>
+  );
+};
+
+const AttachmentUI: FC = () => {
+  const aui = useAui();
+  const isComposer = aui.attachment.source !== "message";
+  const src = useAttachmentSrc();
+
+  const isImage = useAuiState((s) => s.attachment.type === "image");
+  const name = useAuiState((s) => s.attachment.name);
+  const typeLabel = useAuiState((s) => {
+    const type = s.attachment.type;
+    switch (type) {
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
+      default:
+        return type;
+    }
+  });
+
+  // An attachment on a submission is still being prepared, whether or not the
+  // adapter reports progress while it uploads.
+  const uploadState = useAuiState((s) =>
+    s.attachment.status.type === "incomplete" &&
+    s.attachment.status.reason === "error"
+      ? "error"
+      : s.attachment.status.type === "running" ||
+          (s.optional.message?.submission !== undefined &&
+            s.attachment.status.type !== "complete")
+        ? "uploading"
+        : undefined,
+  );
+  const isUploading = uploadState === "uploading";
+  const isError = uploadState === "error";
+
+  const errorMessage = useAuiState((s) =>
+    s.attachment.status.type === "incomplete" &&
+    s.attachment.status.reason === "error"
+      ? (s.attachment.status.message ?? "Upload failed")
+      : undefined,
+  );
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <AttachmentPrimitive.Root
+          className={cn(
+            "aui-attachment-root relative",
+            isComposer &&
+              "animate-in fade-in-0 zoom-in-95 duration-200 motion-reduce:animate-none",
+            isImage &&
+              !isComposer &&
+              "aui-attachment-root-message only:*:first:size-24",
+          )}
+        >
+          <AttachmentPreviewDialog src={src} name={name}>
+            <TooltipTrigger
+              render={
+                <div
+                  className={cn(
+                    "aui-attachment-tile bg-muted hover:after:bg-foreground/10 focus-visible:ring-ring/50 relative size-14 overflow-hidden rounded-[calc(var(--composer-radius,1rem)-var(--composer-padding,8px))] transition-transform outline-none after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-black/10 after:transition-colors after:ring-inset focus-visible:ring-1 motion-reduce:transition-none dark:after:ring-white/10",
+                    src
+                      ? "cursor-zoom-in active:scale-[0.96]"
+                      : "cursor-default",
+                    isError &&
+                      "after:ring-destructive/60 dark:after:ring-destructive/60",
+                  )}
+                  role={src ? "button" : "group"}
+                  tabIndex={0}
+                  aria-label={`${src ? `Preview ${name}` : `${typeLabel} attachment ${name}`}${
+                    isError
+                      ? ", upload failed"
+                      : isUploading
+                        ? ", uploading"
+                        : ""
+                  }`}
+                />
+              }
+            >
+              <AttachmentThumb src={src} />
+              {isUploading && (
+                <div
+                  aria-hidden="true"
+                  className="aui-attachment-tile-uploading bg-background/60 animate-in fade-in-0 absolute inset-0 flex items-center justify-center backdrop-blur-[2px] motion-reduce:animate-none"
+                >
+                  <Loader2Icon className="text-muted-foreground size-4 animate-spin" />
+                </div>
+              )}
+              {isError && (
+                <div
+                  aria-hidden="true"
+                  className="aui-attachment-tile-error bg-background/70 animate-in fade-in-0 absolute inset-0 flex items-center justify-center backdrop-blur-[2px] motion-reduce:animate-none"
+                >
+                  <AlertCircleIcon className="text-destructive size-4" />
+                </div>
+              )}
+            </TooltipTrigger>
+          </AttachmentPreviewDialog>
+          {isComposer && <AttachmentRemove name={name} />}
+        </AttachmentPrimitive.Root>
+        <TooltipContent side="top">
+          <AttachmentPrimitive.Name />
+          {errorMessage && (
+            <p className="aui-attachment-error-message">{errorMessage}</p>
+          )}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+const AttachmentRemove: FC<{ name: string }> = ({ name }) => {
+  return (
+    <AttachmentPrimitive.Remove
+      render={
+        <TooltipIconButton
+          tooltip={`Remove ${name}`}
+          className="aui-attachment-tile-remove absolute end-1 top-1 size-5 rounded-full bg-black/50! text-white after:absolute after:-inset-1.5 hover:bg-black/70! hover:text-white! active:scale-[0.96] motion-reduce:transition-none"
+          side="top"
+        />
+      }
+    >
+      <XIcon className="aui-attachment-remove-icon size-3 stroke-[2.5]" />
+    </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 empty:hidden">
+      <MessagePrimitive.Attachments>
+        {() => <AttachmentUI />}
+      </MessagePrimitive.Attachments>
+    </div>
+  );
+};
+
+export const ComposerAttachments: FC = () => {
+  return (
+    <div className="aui-composer-attachments flex w-full flex-row items-center gap-2 overflow-x-auto empty:hidden">
+      <ComposerPrimitive.Attachments>
+        {() => <AttachmentUI />}
+      </ComposerPrimitive.Attachments>
+    </div>
+  );
+};
+
+export const ComposerAddAttachment: FC = () => {
+  return (
+    <ComposerPrimitive.AddAttachment
+      render={
+        <TooltipIconButton
+          tooltip="Add Attachment"
+          side="bottom"
+          variant="ghost"
+          size="icon"
+          className="aui-composer-add-attachment text-muted-foreground hover:text-foreground hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30 size-7 rounded-full active:scale-[0.96] motion-reduce:transition-none"
+          aria-label="Add Attachment"
+        />
+      }
+    >
+      <PlusIcon className="aui-attachment-add-icon size-4" />
+    </ComposerPrimitive.AddAttachment>
+  );
+};