@truefoundry/agent-ui-sdk 0.0.1 → 0.0.3

package/src/atoms/SandboxArtifactList.tsx

@@ -1,63 +0,0 @@
-import { useState } from "react";
-import { DownloadIcon, FileIcon, LoaderIcon } from "lucide-react";
-
-import { cn } from "./lib/cn.js";
-
-export type SandboxArtifactLink = { label: string; path: string };
-
-export type SandboxArtifactListProps = {
-    artifacts: SandboxArtifactLink[];
-    onDownload?: (path: string) => void | Promise<unknown>;
-    className?: string;
-};
-
-export function SandboxArtifactList({ artifacts, onDownload, className }: SandboxArtifactListProps) {
-    const [downloadingPath, setDownloadingPath] = useState<string | null>(null);
-
-    const handleClick = async (path: string) => {
-        if (downloadingPath != null) return;
-        setDownloadingPath(path);
-        try {
-            await onDownload?.(path);
-        } finally {
-            setDownloadingPath(null);
-        }
-    };
-
-    return (
-        <div
-            data-slot="aui_sandbox-artifact-list"
-            className={cn("aui-sandbox-artifact-list my-3 flex w-fit max-w-full flex-wrap items-stretch text-sm", className)}
-        >
-            {artifacts.map((artifact, index) => {
-                const isDownloading = downloadingPath === artifact.path;
-                return (
-                    <button
-                        key={artifact.path}
-                        type="button"
-                        className={cn(
-                            "aui-sandbox-artifact-button text-muted-foreground hover:text-foreground flex min-w-0 items-center gap-1.5 py-1 pr-2 pl-2 transition-colors disabled:pointer-events-none disabled:opacity-70",
-                            index > 0 && "border-border/60 ml-1 border-l pl-3",
-                        )}
-                        disabled={isDownloading}
-                        onClick={() => handleClick(artifact.path)}
-                    >
-                        <FileIcon className="size-4 shrink-0" aria-hidden />
-                        <span className="max-w-40 truncate">{artifact.label}</span>
-                        {isDownloading ? (
-                            <LoaderIcon className="size-3.5 shrink-0 animate-spin [animation-duration:0.6s]" aria-hidden />
-                        ) : (
-                            <DownloadIcon className="size-3.5 shrink-0" aria-hidden />
-                        )}
-                    </button>
-                );
-            })}
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        SandboxArtifactList: typeof SandboxArtifactList;
-    }
-}

package/src/atoms/ScrollToBottomButton.tsx

@@ -1,34 +0,0 @@
-import { forwardRef } from "react";
-import { ArrowDownIcon } from "lucide-react";
-
-import { cn } from "./lib/cn.js";
-import { IconButton, type IconButtonProps } from "./primitives/IconButton.js";
-
-export type ScrollToBottomButtonProps = Omit<IconButtonProps, "tooltip" | "children">;
-
-export const ScrollToBottomButton = forwardRef<HTMLButtonElement, ScrollToBottomButtonProps>(
-    ({ className, ...rest }, ref) => {
-        return (
-            <IconButton
-                ref={ref}
-                tooltip="Scroll to bottom"
-                variant="outline"
-                className={cn(
-                    "aui-thread-scroll-to-bottom dark:border-border dark:bg-background dark:hover:bg-accent absolute -top-14 z-10 self-center rounded-full p-4 disabled:invisible",
-                    className,
-                )}
-                {...rest}
-            >
-                <ArrowDownIcon />
-            </IconButton>
-        );
-    },
-);
-
-ScrollToBottomButton.displayName = "ScrollToBottomButton";
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        ScrollToBottomButton: typeof ScrollToBottomButton;
-    }
-}

package/src/atoms/Skeletons.tsx

@@ -1,32 +0,0 @@
-import { cn } from "./lib/cn.js";
-import { Skeleton } from "./primitives/Skeleton.js";
-
-export type MessageListSkeletonProps = {
-    className?: string;
-};
-
-export function MessageListSkeleton({ className }: MessageListSkeletonProps) {
-    return (
-        <div
-            role="status"
-            aria-label="Loading conversation"
-            data-slot="aui_thread-history-skeleton"
-            className={cn("mb-14 flex flex-col gap-y-6", className)}
-        >
-            <div className="flex justify-end">
-                <Skeleton className="h-10 w-[min(85%,20rem)] rounded-xl" />
-            </div>
-            <div className="flex flex-col gap-2 px-2">
-                <Skeleton className="h-4 w-full max-w-md" />
-                <Skeleton className="h-4 w-full max-w-sm" />
-                <Skeleton className="h-4 w-2/3 max-w-xs" />
-            </div>
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        MessageListSkeleton: typeof MessageListSkeleton;
-    }
-}

package/src/atoms/ThreadListMisc.tsx

@@ -1,76 +0,0 @@
-import type { ReactNode } from "react";
-import { PlusIcon } from "lucide-react";
-
-import { cn } from "./lib/cn.js";
-import { Button, type ButtonProps } from "./primitives/Button.js";
-import { Skeleton } from "./primitives/Skeleton.js";
-
-export type ThreadListNewButtonProps = Omit<ButtonProps, "children">;
-
-export function ThreadListNewButton({ className, ...rest }: ThreadListNewButtonProps) {
-    return (
-        <Button
-            variant="ghost"
-            data-slot="aui_thread-list-new"
-            className={cn("hover:bg-muted h-8 justify-start gap-2 rounded-md px-2.5 text-sm font-normal", className)}
-            {...rest}
-        >
-            <PlusIcon className="size-4 shrink-0" />
-            <span className="whitespace-nowrap">New Thread</span>
-        </Button>
-    );
-}
-
-export type ThreadListRowSkeletonProps = {
-    count?: number;
-    className?: string;
-};
-
-export function ThreadListRowSkeleton({ count = 5, className }: ThreadListRowSkeletonProps) {
-    return (
-        <div className={cn("flex flex-col gap-1", className)} role="status" aria-label="Loading threads">
-            {Array.from({ length: count }, (_, i) => (
-                <div key={i} className="flex h-8 items-center px-2.5">
-                    <Skeleton className="h-3.5 w-full" />
-                </div>
-            ))}
-        </div>
-    );
-}
-
-export type ThreadListEmptyStateProps = {
-    message?: string;
-    className?: string;
-};
-
-export function ThreadListEmptyState({ message = "No threads yet", className }: ThreadListEmptyStateProps) {
-    return (
-        <div className={cn("text-muted-foreground flex flex-1 items-center justify-center px-4 text-center text-sm", className)}>
-            {message}
-        </div>
-    );
-}
-
-export type ThreadListShellProps = {
-    header: ReactNode;
-    children: ReactNode;
-    className?: string;
-};
-
-export function ThreadListShell({ header, children, className }: ThreadListShellProps) {
-    return (
-        <div className={cn("flex min-h-0 flex-1 flex-col gap-1 overflow-hidden p-3", className)}>
-            {header}
-            <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto pb-1">{children}</div>
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        ThreadListNewButton: typeof ThreadListNewButton;
-        ThreadListRowSkeleton: typeof ThreadListRowSkeleton;
-        ThreadListEmptyState: typeof ThreadListEmptyState;
-        ThreadListShell: typeof ThreadListShell;
-    }
-}

package/src/atoms/ThreadListRow.tsx

@@ -1,81 +0,0 @@
-import { ArchiveIcon, MoreHorizontalIcon, TrashIcon } from "lucide-react";
-import { DropdownMenu } from "radix-ui";
-
-import { cn } from "./lib/cn.js";
-import { IconButton } from "./primitives/IconButton.js";
-
-export type ThreadListRowProps = {
-    title: string;
-    active: boolean;
-    onSelect: () => void;
-    onArchive?: () => void;
-    onDelete?: () => void;
-    className?: string;
-};
-
-export function ThreadListRow({ title, active, onSelect, onArchive, onDelete, className }: ThreadListRowProps) {
-    return (
-        <div
-            data-slot="aui_thread-list-item"
-            data-active={active || undefined}
-            className={cn(
-                "group hover:bg-muted data-[active]:bg-muted relative flex min-h-9 items-center rounded-lg transition-colors",
-                className,
-            )}
-        >
-            <button
-                type="button"
-                onClick={onSelect}
-                data-slot="aui_thread-list-item-trigger"
-                className="flex min-h-9 min-w-0 flex-1 items-center rounded-lg px-2.5 py-2 text-start text-sm outline-none group-hover:pe-9"
-            >
-                <span className="min-w-0 flex-1 truncate">{title}</span>
-            </button>
-            {(onArchive || onDelete) && (
-                <DropdownMenu.Root>
-                    <DropdownMenu.Trigger asChild>
-                        <IconButton
-                            tooltip="More options"
-                            className="absolute end-1.5 top-1/2 size-6 -translate-y-1/2 p-0 opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100"
-                        >
-                            <MoreHorizontalIcon className="size-3.5" />
-                        </IconButton>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Portal>
-                        <DropdownMenu.Content
-                            side="right"
-                            align="start"
-                            sideOffset={6}
-                            className="bg-popover/95 text-popover-foreground z-50 min-w-32 overflow-hidden rounded-xl border p-1.5 shadow-lg backdrop-blur-sm"
-                        >
-                            {onArchive && (
-                                <DropdownMenu.Item
-                                    onSelect={onArchive}
-                                    className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none select-none"
-                                >
-                                    <ArchiveIcon className="size-4" />
-                                    Archive
-                                </DropdownMenu.Item>
-                            )}
-                            {onDelete && (
-                                <DropdownMenu.Item
-                                    onSelect={onDelete}
-                                    className="text-destructive hover:bg-destructive/10 flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none select-none"
-                                >
-                                    <TrashIcon className="size-4" />
-                                    Delete
-                                </DropdownMenu.Item>
-                            )}
-                        </DropdownMenu.Content>
-                    </DropdownMenu.Portal>
-                </DropdownMenu.Root>
-            )}
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        ThreadListRow: typeof ThreadListRow;
-    }
-}

package/src/atoms/ThreadShell.tsx

@@ -1,93 +0,0 @@
-import { forwardRef, type ComponentPropsWithRef, type CSSProperties } from "react";
-
-import { cn } from "./lib/cn.js";
-
-const THREAD_CSS_VARS: CSSProperties = {
-    ["--thread-max-width" as string]: "44rem",
-    ["--composer-bg" as string]: "color-mix(in oklab, var(--color-muted) 30%, var(--color-background))",
-    ["--composer-radius" as string]: "1.5rem",
-    ["--composer-padding" as string]: "8px",
-};
-
-export type ThreadRootShellProps = ComponentPropsWithRef<"div">;
-
-export const ThreadRootShell = forwardRef<HTMLDivElement, ThreadRootShellProps>(
-    ({ className, style, ...rest }, ref) => (
-        <div
-            ref={ref}
-            className={cn(
-                "aui-root aui-thread-root bg-background @container flex h-full min-h-0 flex-col overflow-hidden",
-                className,
-            )}
-            style={{ ...THREAD_CSS_VARS, ...style }}
-            {...rest}
-        />
-    ),
-);
-ThreadRootShell.displayName = "ThreadRootShell";
-
-export type ThreadViewportShellProps = ComponentPropsWithRef<"div"> & {
-    isEmpty?: boolean;
-};
-
-export const ThreadViewportShell = forwardRef<HTMLDivElement, ThreadViewportShellProps>(
-    ({ className, isEmpty, children, ...rest }, ref) => (
-        <div
-            ref={ref}
-            data-slot="aui_thread-viewport"
-            className={cn("relative flex min-h-0 flex-1 flex-col overflow-x-auto overflow-y-auto scroll-smooth", className)}
-            {...rest}
-        >
-            <div
-                className={cn(
-                    "mx-auto flex w-full max-w-(--thread-max-width) flex-col px-4 pt-4 pb-4",
-                    isEmpty && "min-h-full justify-center",
-                )}
-            >
-                {children}
-            </div>
-        </div>
-    ),
-);
-ThreadViewportShell.displayName = "ThreadViewportShell";
-
-export type ThreadComposerAreaShellProps = ComponentPropsWithRef<"div"> & {
-    isEmpty?: boolean;
-};
-
-export const ThreadComposerAreaShell = forwardRef<HTMLDivElement, ThreadComposerAreaShellProps>(
-    ({ className, isEmpty, ...rest }, ref) => (
-        <div
-            ref={ref}
-            data-slot="aui_thread-composer"
-            className={cn(
-                "aui-thread-composer bg-background relative mx-auto flex w-full max-w-(--thread-max-width) shrink-0 flex-col gap-4 px-4 pb-4 md:pb-6",
-                !isEmpty && "rounded-t-(--composer-radius)",
-                className,
-            )}
-            {...rest}
-        />
-    ),
-);
-ThreadComposerAreaShell.displayName = "ThreadComposerAreaShell";
-
-export type MessageGroupProps = ComponentPropsWithRef<"div">;
-
-export const MessageGroup = forwardRef<HTMLDivElement, MessageGroupProps>(({ className, ...rest }, ref) => (
-    <div
-        ref={ref}
-        data-slot="aui_message-group"
-        className={cn("flex flex-col gap-y-6 empty:hidden", className)}
-        {...rest}
-    />
-));
-MessageGroup.displayName = "MessageGroup";
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        ThreadRootShell: typeof ThreadRootShell;
-        ThreadViewportShell: typeof ThreadViewportShell;
-        ThreadComposerAreaShell: typeof ThreadComposerAreaShell;
-        MessageGroup: typeof MessageGroup;
-    }
-}

package/src/atoms/Toast.tsx

@@ -1,60 +0,0 @@
-import type { ReactNode } from "react";
-import { XIcon } from "lucide-react";
-import { Toast as ToastPrimitive } from "radix-ui";
-
-import { cn } from "./lib/cn.js";
-
-export type ToastProps = {
-    title: string;
-    description: string;
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    className?: string;
-};
-
-export function Toast({ title, description, open, onOpenChange, className }: ToastProps) {
-    return (
-        <ToastPrimitive.Root
-            open={open}
-            onOpenChange={onOpenChange}
-            className={cn(
-                "border-destructive bg-background text-destructive dark:bg-card pointer-events-auto relative flex max-h-[min(70vh,32rem)] w-full items-start gap-3 rounded-xl border p-4 shadow-lg dark:text-red-200",
-                "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-4",
-                "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom-4",
-                className,
-            )}
-        >
-            <div className="grid min-h-0 min-w-0 flex-1 gap-1 overflow-y-auto pe-6">
-                <ToastPrimitive.Title className="text-sm leading-none font-semibold">{title}</ToastPrimitive.Title>
-                <ToastPrimitive.Description className="font-mono text-sm break-words whitespace-pre-wrap">
-                    {description}
-                </ToastPrimitive.Description>
-            </div>
-            <ToastPrimitive.Close className="text-destructive hover:bg-muted focus-visible:ring-ring absolute top-3 right-3 rounded-md p-1 transition-colors focus:outline-none focus-visible:ring-2">
-                <XIcon className="size-4" />
-                <span className="sr-only">Close</span>
-            </ToastPrimitive.Close>
-        </ToastPrimitive.Root>
-    );
-}
-
-export type ToastStackProps = {
-    children: ReactNode;
-    duration?: number;
-};
-
-export function ToastStack({ children, duration = Number.POSITIVE_INFINITY }: ToastStackProps) {
-    return (
-        <ToastPrimitive.Provider duration={duration}>
-            {children}
-            <ToastPrimitive.Viewport className="fixed inset-x-0 bottom-0 z-50 flex max-h-screen flex-col-reverse gap-2 p-4 sm:bottom-4 sm:left-1/2 sm:w-full sm:max-w-2xl sm:-translate-x-1/2" />
-        </ToastPrimitive.Provider>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        Toast: typeof Toast;
-        ToastStack: typeof ToastStack;
-    }
-}

package/src/atoms/ToolApprovalBar.tsx

@@ -1,92 +0,0 @@
-import { useState } from "react";
-
-import { cn } from "./lib/cn.js";
-import { Button } from "./primitives/Button.js";
-
-export type ToolApprovalOption = {
-    id: string;
-    label: string;
-    isAllow: boolean;
-    grants?: readonly string[];
-    confirm?: {
-        title?: string;
-        description?: string;
-    };
-};
-
-export type ToolApprovalBarProps = {
-    options: ToolApprovalOption[];
-    onSelectOption: (optionId: string) => void;
-    className?: string;
-};
-
-export function ToolApprovalBar({ options, onSelectOption, className }: ToolApprovalBarProps) {
-    const [confirmingId, setConfirmingId] = useState<string | null>(null);
-    const confirming = confirmingId != null ? options.find((o) => o.id === confirmingId) : undefined;
-
-    if (confirming) {
-        return (
-            <div className={cn("aui-tool-approval-confirm flex flex-col gap-2 pt-1", className)}>
-                <p className="font-semibold">{confirming.confirm?.title ?? `${confirming.label}?`}</p>
-                {confirming.confirm?.description && (
-                    <p className="text-muted-foreground">{confirming.confirm.description}</p>
-                )}
-                {confirming.grants && confirming.grants.length > 0 && (
-                    <ul className="flex flex-col gap-1">
-                        {confirming.grants.map((grant) => (
-                            <li key={grant}>
-                                <code className="bg-muted rounded px-1.5 py-0.5 text-xs">{grant}</code>
-                            </li>
-                        ))}
-                    </ul>
-                )}
-                <div className="flex items-center gap-2">
-                    <Button
-                        size="sm"
-                        className="active:scale-[0.98]"
-                        onClick={() => {
-                            onSelectOption(confirming.id);
-                            setConfirmingId(null);
-                        }}
-                    >
-                        Confirm
-                    </Button>
-                    <Button
-                        size="sm"
-                        variant="outline"
-                        className="active:scale-[0.98]"
-                        onClick={() => setConfirmingId(null)}
-                    >
-                        Back
-                    </Button>
-                </div>
-            </div>
-        );
-    }
-
-    const firstAllowId = options.find((o) => o.isAllow)?.id;
-
-    return (
-        <div className={cn("aui-tool-approval-bar flex flex-wrap items-center gap-2 pt-1", className)}>
-            {options.map((option) => (
-                <Button
-                    key={option.id}
-                    size="sm"
-                    variant={option.id === firstAllowId ? "default" : "outline"}
-                    className="active:scale-[0.98]"
-                    onClick={() =>
-                        option.confirm ? setConfirmingId(option.id) : onSelectOption(option.id)
-                    }
-                >
-                    {option.label}
-                </Button>
-            ))}
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        ToolApprovalBar: typeof ToolApprovalBar;
-    }
-}