@truefoundry/agent-ui-sdk 0.0.1 → 0.0.2

package/package.json

@@ -1,45 +1,54 @@
 {
   "name": "@truefoundry/agent-ui-sdk",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Design-system-agnostic Atom/Container UI SDK for TrueFoundry agent chat, built on assistant-ui.",
   "license": "Apache-2.0",
-  "type": "module",
   "publishConfig": {
-  "access": "public"
-},
+    "access": "public",
+    "provenance": false
+  },
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./openui.css": "./src/openui.css"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src",
+    "src/openui.css",
     "README.md"
   ],
   "sideEffects": [
     "src/openui.css",
-    "dist/openui.css"
+    "dist/styles.css",
+    "dist/openui.css",
+    "src/icons/fontawesome.ts",
+    "src/icons/registerAgentIcons.ts"
   ],
   "scripts": {
-    "prepare": "tsup",
-    "build": "tsup",
+    "prepare": "yarn build",
+    "build": "tsup && tailwindcss --input src/build-styles.css --output dist/styles.css --minify",
+    "dev:watch": "tsup --watch",
     "pack:tgz": "yarn install && yarn build && yarn pack",
+    "pack:dev": "bash scripts/pack-dev.sh",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
     "@assistant-ui/core": "^0.2.19",
     "@assistant-ui/react": "^0.14.0",
-    "@truefoundry/assistant-ui-runtime": "^0.1.0-rc.1",
+    "@truefoundry/assistant-ui-runtime": "^0.1.1",
     "@types/react": "*",
+    "monaco-editor": "^0.52.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "truefoundry-gateway-sdk": "0.2.0-rc.1"
+    "tfy-web-components": "^0.0.22",
+    "truefoundry-gateway-sdk": "^0.3.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -47,12 +56,20 @@
     }
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@mui/material": "^6.2.0",
+    "@openuidev/react-headless": "^0.9.1",
     "@openuidev/react-lang": "^0.2.8",
     "@openuidev/react-ui": "^0.12.1",
     "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
     "clsx": "^2.1.1",
+    "lodash-es": "^4.17.21",
     "lucide-react": "^1.21.0",
-    "radix-ui": "^1.6.0",
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.0"
@@ -60,24 +77,24 @@
   "devDependencies": {
     "@assistant-ui/core": "^0.2.19",
     "@assistant-ui/react": "^0.14.24",
+    "@tailwindcss/cli": "^4.3.2",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.2",
-    "@truefoundry/assistant-ui-runtime": "0.1.0-rc.1",
+    "@truefoundry/assistant-ui-runtime": "^0.1.1",
     "@types/node": "^20",
     "@types/react": "^19.2.17",
+    "esbuild-plugin-svgr": "3.1.1",
     "jsdom": "^24.1.3",
+    "monaco-editor": "^0.52.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "truefoundry-gateway-sdk": "0.2.0-rc.1",
+    "tailwindcss": "^4.3.2",
+    "tfy-web-components": "^0.0.22",
+    "truefoundry-gateway-sdk": "^0.3.1",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
     "vitest": "^4.1.9"
   },
-  "packageManager": "yarn@4.17.0",
-  "dependenciesMeta": {
-    "esbuild": {
-      "built": true
-    }
-  }
+  "packageManager": "yarn@1.22.22"
 }

package/src/atoms/AskUserPrompt.tsx

@@ -1,102 +0,0 @@
-import { cn } from "./lib/cn.js";
-import { Button } from "./primitives/Button.js";
-
-export type AskUserOption = { id: string; label: string };
-
-const OTHER_OPTION_ID = "__other";
-
-export type AskUserPromptProps = {
-    question: string;
-    options: AskUserOption[];
-    allowOther: boolean;
-    selectedOptionId?: string;
-    otherValue: string;
-    disabled: boolean;
-    onSelectOption: (optionId: string) => void;
-    onOtherValueChange: (value: string) => void;
-    onSubmit: () => void;
-    className?: string;
-};
-
-export function AskUserPrompt({
-    question,
-    options,
-    allowOther,
-    selectedOptionId,
-    otherValue,
-    disabled,
-    onSelectOption,
-    onOtherValueChange,
-    onSubmit,
-    className,
-}: AskUserPromptProps) {
-    const canSubmit = selectedOptionId != null && selectedOptionId !== OTHER_OPTION_ID
-        ? true
-        : selectedOptionId === OTHER_OPTION_ID && otherValue.trim().length > 0;
-
-    return (
-        <div
-            data-slot="aui_ask-user-prompt"
-            className={cn(
-                "border-border/60 flex w-full flex-col gap-3 rounded-[var(--composer-radius,1.5rem)] border bg-[var(--composer-bg,var(--muted))] p-[var(--composer-padding,8px)]",
-                className,
-            )}
-        >
-            <p className="text-foreground px-2.5 text-sm font-medium">{question}</p>
-            <div className="flex flex-col gap-1.5 px-2.5">
-                {options.map((option) => (
-                    <label key={option.id} className="flex items-center gap-2 text-sm">
-                        <input
-                            type="radio"
-                            name="ask-user-option"
-                            checked={selectedOptionId === option.id}
-                            disabled={disabled}
-                            onChange={() => onSelectOption(option.id)}
-                        />
-                        {option.label}
-                    </label>
-                ))}
-                {allowOther && (
-                    <label className="flex items-center gap-2 text-sm">
-                        <input
-                            type="radio"
-                            name="ask-user-option"
-                            checked={selectedOptionId === OTHER_OPTION_ID}
-                            disabled={disabled}
-                            onChange={() => onSelectOption(OTHER_OPTION_ID)}
-                        />
-                        <input
-                            type="text"
-                            value={otherValue}
-                            placeholder="Type your answer..."
-                            disabled={disabled}
-                            onFocus={() => onSelectOption(OTHER_OPTION_ID)}
-                            onChange={(event) => {
-                                onSelectOption(OTHER_OPTION_ID);
-                                onOtherValueChange(event.target.value);
-                            }}
-                            aria-label="Other answer"
-                            className="border-border/60 flex-1 rounded-md border bg-transparent px-2 py-1 text-sm outline-none"
-                        />
-                    </label>
-                )}
-            </div>
-            <div className="flex justify-end px-2.5">
-                <Button
-                    type="button"
-                    className="rounded-full px-4"
-                    disabled={disabled || !canSubmit}
-                    onClick={onSubmit}
-                >
-                    Submit
-                </Button>
-            </div>
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        AskUserPrompt: typeof AskUserPrompt;
-    }
-}

package/src/atoms/AttachmentCard.tsx

@@ -1,92 +0,0 @@
-import { FileTextIcon, XIcon } from "lucide-react";
-
-import { cn } from "./lib/cn.js";
-import { Avatar, AvatarFallback, AvatarImage } from "./primitives/Avatar.js";
-import { IconButton } from "./primitives/IconButton.js";
-
-export type AttachmentCardSize = "chip" | "preview";
-
-/** Fixed preview bounds for attachments rendered in user message bubbles. */
-export const USER_MESSAGE_ATTACHMENT_PREVIEW_REM = 12;
-
-export type AttachmentCardProps = {
-    name: string;
-    contentType?: string;
-    previewSrc?: string;
-    isImage?: boolean;
-    size?: AttachmentCardSize;
-    /** When set, constrains image preview and file chip width to this rem size. */
-    previewRem?: number;
-    onRemove?: () => void;
-    className?: string;
-};
-
-export function AttachmentCard({
-    name,
-    previewSrc,
-    isImage = false,
-    size = "chip",
-    previewRem,
-    onRemove,
-    className,
-}: AttachmentCardProps) {
-    if (size === "preview" && isImage && previewSrc) {
-        const previewSize =
-            previewRem != null ? { width: `${previewRem}rem`, height: `${previewRem}rem` } : undefined;
-
-        return (
-            <div
-                data-slot="aui_attachment-preview"
-                style={previewSize}
-                className={cn(
-                    "aui-attachment-preview relative shrink-0 cursor-pointer overflow-hidden rounded-lg border",
-                    previewRem == null && "size-24",
-                    className,
-                )}
-            >
-                <img src={previewSrc} alt={name} className="h-full w-full object-cover" />
-            </div>
-        );
-    }
-
-    return (
-        <div
-            data-slot="aui_attachment-chip"
-            style={previewRem != null ? { maxWidth: `${previewRem}rem` } : undefined}
-            className={cn(
-                "aui-attachment-chip bg-muted flex max-w-full shrink-0 items-center gap-2 rounded-lg border px-2 py-1.5",
-                className,
-            )}
-        >
-            <div className="bg-background flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md border">
-                {isImage && previewSrc ? (
-                    <Avatar className="size-7 rounded-none">
-                        <AvatarImage src={previewSrc} alt={name} className="object-cover" />
-                        <AvatarFallback>
-                            <FileTextIcon className="text-muted-foreground size-4" />
-                        </AvatarFallback>
-                    </Avatar>
-                ) : (
-                    <FileTextIcon className="text-muted-foreground size-4" />
-                )}
-            </div>
-            <span className="text-foreground min-w-0 truncate text-sm">{name}</span>
-            {onRemove && (
-                <IconButton
-                    tooltip="Remove file"
-                    side="top"
-                    className="size-6 shrink-0 rounded-full [&_svg]:size-3"
-                    onClick={onRemove}
-                >
-                    <XIcon />
-                </IconButton>
-            )}
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        AttachmentCard: typeof AttachmentCard;
-    }
-}

package/src/atoms/AttachmentPickerButton.tsx

@@ -1,19 +0,0 @@
-import { PlusIcon } from "lucide-react";
-
-import { IconButton, type IconButtonProps } from "./primitives/IconButton.js";
-
-export type AttachmentPickerButtonProps = Omit<IconButtonProps, "tooltip" | "children">;
-
-export function AttachmentPickerButton(props: AttachmentPickerButtonProps) {
-    return (
-        <IconButton tooltip="Add Attachment" variant="ghost" className="size-7 rounded-full p-1" {...props}>
-            <PlusIcon className="size-4.5" />
-        </IconButton>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        AttachmentPickerButton: typeof AttachmentPickerButton;
-    }
-}

package/src/atoms/AttachmentPreviewDialog.tsx

@@ -1,34 +0,0 @@
-import type { ReactNode } from "react";
-
-import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "./primitives/Dialog.js";
-
-export type AttachmentPreviewDialogProps = {
-    previewSrc?: string;
-    children: ReactNode;
-};
-
-export function AttachmentPreviewDialog({ previewSrc, children }: AttachmentPreviewDialogProps) {
-    if (!previewSrc) return <>{children}</>;
-
-    return (
-        <Dialog>
-            <DialogTrigger asChild>{children}</DialogTrigger>
-            <DialogContent className="p-2 sm:max-w-3xl">
-                <DialogTitle className="sr-only">Image Attachment Preview</DialogTitle>
-                <div className="bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden">
-                    <img
-                        src={previewSrc}
-                        alt="Attachment preview"
-                        className="block h-auto max-h-[80vh] w-auto max-w-full object-contain"
-                    />
-                </div>
-            </DialogContent>
-        </Dialog>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        AttachmentPreviewDialog: typeof AttachmentPreviewDialog;
-    }
-}

package/src/atoms/BranchIndicator.tsx

@@ -1,41 +0,0 @@
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-
-import { cn } from "./lib/cn.js";
-import { IconButton } from "./primitives/IconButton.js";
-
-export type BranchIndicatorProps = {
-    index: number;
-    count: number;
-    onPrevious: () => void;
-    onNext: () => void;
-    className?: string;
-};
-
-export function BranchIndicator({ index, count, onPrevious, onNext, className }: BranchIndicatorProps) {
-    if (count <= 1) return null;
-
-    return (
-        <div
-            className={cn(
-                "aui-branch-picker-root text-muted-foreground -ms-2 me-2 inline-flex items-center text-xs",
-                className,
-            )}
-        >
-            <IconButton tooltip="Previous" onClick={onPrevious}>
-                <ChevronLeftIcon />
-            </IconButton>
-            <span className="aui-branch-picker-state font-medium">
-                {index} / {count}
-            </span>
-            <IconButton tooltip="Next" onClick={onNext}>
-                <ChevronRightIcon />
-            </IconButton>
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        BranchIndicator: typeof BranchIndicator;
-    }
-}

package/src/atoms/CodeBlockHeader.tsx

@@ -1,44 +0,0 @@
-import { useState } from "react";
-import { CheckIcon, CopyIcon } from "lucide-react";
-
-import { IconButton } from "./primitives/IconButton.js";
-
-export type CodeBlockHeaderProps = {
-    language: string;
-    code: string;
-};
-
-export function CodeBlockHeader({ language, code }: CodeBlockHeaderProps) {
-    const [isCopied, setIsCopied] = useState(false);
-
-    const onCopy = () => {
-        if (!code || isCopied || typeof navigator === "undefined" || !navigator.clipboard) {
-            return;
-        }
-        navigator.clipboard.writeText(code).then(
-            () => {
-                setIsCopied(true);
-                setTimeout(() => setIsCopied(false), 3000);
-            },
-            () => {},
-        );
-    };
-
-    return (
-        <div className="aui-code-header-root border-border/50 bg-muted/50 mt-3 flex items-center justify-between rounded-t-xl border border-b-0 px-3.5 py-1.5 text-xs">
-            <span className="aui-code-header-language text-muted-foreground font-medium lowercase">
-                {language}
-            </span>
-            <IconButton tooltip="Copy" onClick={onCopy}>
-                {!isCopied && <CopyIcon className="animate-in zoom-in-75 fade-in duration-150" />}
-                {isCopied && <CheckIcon className="animate-in zoom-in-50 fade-in duration-200 ease-out" />}
-            </IconButton>
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        CodeBlockHeader: typeof CodeBlockHeader;
-    }
-}

package/src/atoms/ComposerShell.tsx

@@ -1,112 +0,0 @@
-import type { ReactNode } from "react";
-import { ArrowUpIcon, LoaderIcon, PlusIcon } from "lucide-react";
-
-import { cn } from "./lib/cn.js";
-import { Button } from "./primitives/Button.js";
-import { IconButton } from "./primitives/IconButton.js";
-
-export type ComposerShellProps = {
-    value: string;
-    placeholder: string;
-    disabled: boolean;
-    isRunning?: boolean;
-    attachments?: ReactNode;
-    modelLabel?: string;
-    modelIcon?: ReactNode;
-    connectorStatusLabel?: string;
-    onValueChange: (value: string) => void;
-    onSubmit: () => void;
-    onCancel?: () => void;
-    onAttach?: () => void;
-    className?: string;
-};
-
-export function ComposerShell({
-    value,
-    placeholder,
-    disabled,
-    isRunning = false,
-    attachments,
-    modelLabel,
-    modelIcon,
-    connectorStatusLabel,
-    onValueChange,
-    onSubmit,
-    onCancel,
-    onAttach,
-    className,
-}: ComposerShellProps) {
-    return (
-        <div
-            data-slot="aui_composer-shell"
-            className={cn(
-                "border-border/60 focus-within:border-ring focus-within:ring-ring/20 flex w-full flex-col gap-2 rounded-[var(--composer-radius,1.5rem)] border bg-[var(--composer-bg,var(--muted))] p-[var(--composer-padding,8px)] shadow-sm transition-colors focus-within:ring-3",
-                className,
-            )}
-        >
-            {attachments}
-            <textarea
-                value={value}
-                placeholder={placeholder}
-                disabled={disabled}
-                rows={1}
-                aria-label="Message input"
-                onChange={(event) => onValueChange(event.target.value)}
-                onKeyDown={(event) => {
-                    if (event.key === "Enter" && !event.shiftKey) {
-                        event.preventDefault();
-                        onSubmit();
-                    }
-                }}
-                className="placeholder:text-muted-foreground/80 max-h-32 min-h-10 w-full resize-none rounded-lg bg-transparent px-2.5 py-1 text-base outline-none"
-            />
-            <div className="flex items-center justify-between px-1">
-                <div className="flex items-center gap-2">
-                    {onAttach && (
-                        <IconButton tooltip="Attach" onClick={onAttach}>
-                            <PlusIcon />
-                        </IconButton>
-                    )}
-                    {connectorStatusLabel && (
-                        <span className="text-muted-foreground text-xs">{connectorStatusLabel}</span>
-                    )}
-                </div>
-                <div className="flex items-center gap-2">
-                    {modelLabel && (
-                        <span className="bg-muted text-muted-foreground flex items-center gap-1 rounded-full px-2 py-0.5 text-xs">
-                            {modelIcon}
-                            {modelLabel}
-                        </span>
-                    )}
-                    {isRunning ? (
-                        <Button
-                            variant="default"
-                            size="sm"
-                            className="gap-1.5 rounded-full"
-                            disabled={!onCancel}
-                            onClick={onCancel}
-                        >
-                            <LoaderIcon className="size-3.5 animate-spin [animation-duration:0.6s]" />
-                            Cancel
-                        </Button>
-                    ) : (
-                        <IconButton
-                            tooltip="Send message"
-                            variant="default"
-                            disabled={disabled || value.trim().length === 0}
-                            onClick={onSubmit}
-                        >
-                            <ArrowUpIcon />
-                        </IconButton>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-declare module "../theme/SlotsProvider.js" {
-    interface AtomSlots {
-        ComposerShell: typeof ComposerShell;
-    }
-}

package/src/atoms/Markdown.test.tsx

@@ -1,28 +0,0 @@
-// @vitest-environment jsdom
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-
-import { Markdown } from "./Markdown.js";
-
-describe("Markdown sandbox_artifact rendering", () => {
-    it("calls onDownloadArtifact with the link's exact path when clicked", () => {
-        const onDownloadArtifact = vi.fn();
-        render(
-            <Markdown
-                content="sandbox_artifact [Download the pink dog SVG](/tmp/pink_dog.svg)"
-                onDownloadArtifact={onDownloadArtifact}
-            />,
-        );
-
-        fireEvent.click(screen.getByRole("button", { name: /Download the pink dog SVG/ }));
-
-        expect(onDownloadArtifact).toHaveBeenCalledExactlyOnceWith("/tmp/pink_dog.svg");
-    });
-
-    it("does not throw when no onDownloadArtifact handler is provided", () => {
-        render(<Markdown content="sandbox_artifact [Download](/tmp/a.svg)" />);
-        expect(() =>
-            fireEvent.click(screen.getByRole("button", { name: /Download/ })),
-        ).not.toThrow();
-    });
-});