@truefoundry/agent-ui-sdk 0.0.1 → 0.0.2

package/src/containers/ErrorToasterContainer.tsx

@@ -1,76 +0,0 @@
-"use client";
-
-import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
-import { TrueFoundryGatewayError } from "truefoundry-gateway-sdk";
-
-import { useSlot } from "../theme/SlotsProvider.js";
-
-type ErrorToastContent = { title: string; description: string };
-
-type ErrorToasterContextValue = { showError: (error: unknown) => void };
-
-const ErrorToasterContext = createContext<ErrorToasterContextValue | null>(null);
-
-function formatErrorBody(body: unknown): string | undefined {
-    if (body == null) return undefined;
-    if (typeof body === "string") return body;
-    try {
-        return JSON.stringify(body, null, 2);
-    } catch {
-        return String(body);
-    }
-}
-
-function normalizeError(error: unknown): ErrorToastContent {
-    if (error instanceof TrueFoundryGatewayError) {
-        const statusCode = error.statusCode;
-        const title = statusCode != null ? `Request failed (${statusCode})` : "Request failed";
-        const description = formatErrorBody(error.body) ?? (error.message || "The gateway returned an error.");
-        return { title, description };
-    }
-
-    if (error instanceof Error) {
-        return { title: "Something went wrong", description: error.message || "An unexpected error occurred." };
-    }
-
-    return { title: "Something went wrong", description: String(error) };
-}
-
-export function ErrorToasterProvider({ children }: { children: ReactNode }) {
-    const ToastStack = useSlot("ToastStack");
-    const Toast = useSlot("Toast");
-
-    const [toast, setToast] = useState<ErrorToastContent | null>(null);
-    const [open, setOpen] = useState(false);
-
-    const showError = useCallback((error: unknown) => {
-        setToast(normalizeError(error));
-        setOpen(true);
-    }, []);
-
-    const value = useMemo(() => ({ showError }), [showError]);
-
-    return (
-        <ErrorToasterContext.Provider value={value}>
-            <ToastStack>
-                {children}
-                {toast != null && (
-                    <Toast title={toast.title} description={toast.description} open={open} onOpenChange={setOpen} />
-                )}
-            </ToastStack>
-        </ErrorToasterContext.Provider>
-    );
-}
-
-export function useErrorToaster(): ErrorToasterContextValue {
-    const context = useContext(ErrorToasterContext);
-    if (context == null) {
-        throw new Error("useErrorToaster must be used within ErrorToasterProvider");
-    }
-    return context;
-}
-
-/** Same as `useErrorToaster`, but returns `null` instead of throwing outside `ErrorToasterProvider`. */
-export function useErrorToasterOptional(): ErrorToasterContextValue | null {
-    return useContext(ErrorToasterContext);
-}

package/src/containers/McpAuthContainer.test.tsx

@@ -1,100 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen, fireEvent } from "@testing-library/react";
-import {
-    AssistantRuntimeProvider,
-    useExternalStoreRuntime,
-    type ThreadMessageLike,
-} from "@assistant-ui/react";
-import { trueFoundryExtras, type TrueFoundryRuntimeExtras } from "@truefoundry/assistant-ui-runtime";
-import { describe, expect, it, vi } from "vitest";
-
-import { McpAuthContainer } from "./McpAuthContainer.js";
-
-const SERVERS = [
-    { id: "srv-1", name: "github", authUrl: "https://example.com/auth/github" },
-    { id: "srv-2", name: "slack", authUrl: "https://example.com/auth/slack" },
-];
-const PENDING = { mcpServers: SERVERS };
-
-function McpAuthHarness({
-    pendingMcpAuth,
-    resumeMcpAuth,
-    isRunning = false,
-}: {
-    pendingMcpAuth: TrueFoundryRuntimeExtras["pendingMcpAuth"];
-    resumeMcpAuth: TrueFoundryRuntimeExtras["resumeMcpAuth"];
-    isRunning?: boolean;
-}) {
-    const messages: ThreadMessageLike[] = [];
-    const runtime = useExternalStoreRuntime({
-        messages,
-        isRunning,
-        convertMessage: (m: ThreadMessageLike) => m,
-        onNew: async () => {},
-        extras: trueFoundryExtras.provide({
-            pendingApprovals: [],
-            pendingToolResponses: [],
-            pendingMcpAuth,
-            sandboxId: undefined,
-            respondToToolApproval: () => {},
-            respondToToolResponse: () => {},
-            resumeMcpAuth,
-            downloadSandboxFile: async () => new Blob(),
-            cancel: async () => {},
-            resetFromTurn: async () => {},
-            draft: null,
-        }),
-    });
-
-    return (
-        <AssistantRuntimeProvider runtime={runtime}>
-            <McpAuthContainer />
-        </AssistantRuntimeProvider>
-    );
-}
-
-describe("McpAuthContainer", () => {
-    it("renders nothing when there is no pending MCP auth", () => {
-        render(<McpAuthHarness pendingMcpAuth={null} resumeMcpAuth={vi.fn()} />);
-        expect(screen.queryByRole("button", { name: /continue/i })).not.toBeInTheDocument();
-    });
-
-    it("renders a real Connect link per server", () => {
-        render(
-            <McpAuthHarness
-                pendingMcpAuth={PENDING}
-                resumeMcpAuth={vi.fn().mockResolvedValue(undefined)}
-            />,
-        );
-        expect(screen.getByText("github")).toBeInTheDocument();
-        expect(screen.getByText("slack")).toBeInTheDocument();
-
-        const connectLinks = screen.getAllByRole("link", { name: /connect/i });
-        expect(connectLinks).toHaveLength(2);
-        expect(connectLinks.map((link) => link.getAttribute("href"))).toEqual([
-            "https://example.com/auth/github",
-            "https://example.com/auth/slack",
-        ]);
-        for (const link of connectLinks) {
-            expect(link).toHaveAttribute("target", "_blank");
-            expect(link).toHaveAttribute("rel", "noopener noreferrer");
-        }
-    });
-
-    it("calls resume when Continue is clicked", () => {
-        const resumeMcpAuth = vi.fn().mockResolvedValue(undefined);
-        render(
-            <McpAuthHarness pendingMcpAuth={PENDING} resumeMcpAuth={resumeMcpAuth} isRunning={false} />,
-        );
-
-        fireEvent.click(screen.getByRole("button", { name: /continue/i }));
-        expect(resumeMcpAuth).toHaveBeenCalledTimes(1);
-    });
-
-    it("disables Continue while the thread is running", () => {
-        render(
-            <McpAuthHarness pendingMcpAuth={PENDING} resumeMcpAuth={vi.fn()} isRunning={true} />,
-        );
-        expect(screen.getByRole("button", { name: /continue/i })).toBeDisabled();
-    });
-});

package/src/containers/McpAuthContainer.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { useTrueFoundryMcpAuth } from "@truefoundry/assistant-ui-runtime";
-import { useThreadIsRunning } from "@assistant-ui/core/react";
-
-import { useSlot } from "../theme/SlotsProvider.js";
-
-export function McpAuthContainer() {
-    const McpAuthPrompt = useSlot("McpAuthPrompt");
-    const { pending, resume } = useTrueFoundryMcpAuth();
-    const isRunning = useThreadIsRunning();
-
-    if (!pending) return null;
-
-    return (
-        <McpAuthPrompt
-            servers={pending.mcpServers}
-            disabled={isRunning}
-            onContinue={() => void resume()}
-        />
-    );
-}

package/src/containers/MessageImageContainer.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { useAuiState } from "@assistant-ui/react";
-
-import {
-    AttachmentCard,
-    USER_MESSAGE_ATTACHMENT_PREVIEW_REM,
-} from "../atoms/AttachmentCard.js";
-import { useSlot } from "../theme/SlotsProvider.js";
-
-export function MessageImageContainer() {
-    const AttachmentPreviewDialog = useSlot("AttachmentPreviewDialog");
-    const image = useAuiState((s) => (s.part.type === "image" ? s.part.image : ""));
-    const filename = useAuiState((s) =>
-        s.part.type === "image" ? s.part.filename : undefined,
-    );
-
-    if (!image) {
-        return null;
-    }
-
-    const card = (
-        <AttachmentCard
-            name={filename ?? "image"}
-            previewSrc={image}
-            isImage
-            size="preview"
-            previewRem={USER_MESSAGE_ATTACHMENT_PREVIEW_REM}
-        />
-    );
-
-    return (
-        <AttachmentPreviewDialog previewSrc={image}>
-            <div className="aui-message-image">{card}</div>
-        </AttachmentPreviewDialog>
-    );
-}

package/src/containers/ReasoningContainer.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import { useState, type PropsWithChildren } from "react";
-import { useAuiState } from "@assistant-ui/react";
-
-import { useSlot } from "../theme/SlotsProvider.js";
-import type { ThreadGroupPart } from "./ToolGroupContainer.js";
-
-export function ReasoningContainer({ group, children }: PropsWithChildren<{ group: ThreadGroupPart }>) {
-    const ReasoningCard = useSlot("ReasoningCard");
-
-    const streaming = useAuiState((s) => {
-        if (s.message.status?.type !== "running") return false;
-        const lastIndex = s.message.parts.length - 1;
-        if (lastIndex < 0) return false;
-        if (s.message.parts[lastIndex]?.type !== "reasoning") return false;
-        return lastIndex >= group.indices[0]! && lastIndex <= group.indices[group.indices.length - 1]!;
-    });
-
-    const [expanded, setExpanded] = useState(streaming);
-    const [prevStreaming, setPrevStreaming] = useState(streaming);
-    if (streaming !== prevStreaming) {
-        setPrevStreaming(streaming);
-        if (streaming) setExpanded(true);
-    }
-
-    return (
-        <ReasoningCard streaming={streaming} expanded={expanded} onToggle={() => setExpanded((prev) => !prev)}>
-            {children}
-        </ReasoningCard>
-    );
-}

package/src/containers/RuntimeHarness.tsx

@@ -1,39 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import {
-    AssistantRuntimeProvider,
-    useExternalStoreRuntime,
-    type AppendMessage,
-    type RespondToToolApprovalOptions,
-    type ThreadMessageLike,
-} from "@assistant-ui/react";
-
-/** Test-only harness driving a real assistant-ui runtime from plain message fixtures. */
-export function RuntimeHarness({
-    messages,
-    isRunning = false,
-    isLoading = false,
-    onRespondToToolApproval,
-    onEdit,
-    children,
-}: {
-    messages: ThreadMessageLike[];
-    isRunning?: boolean;
-    isLoading?: boolean;
-    onRespondToToolApproval?: (options: RespondToToolApprovalOptions) => void;
-    onEdit?: (message: AppendMessage) => Promise<void>;
-    children: ReactNode;
-}) {
-    const runtime = useExternalStoreRuntime<ThreadMessageLike>({
-        messages,
-        isRunning,
-        isLoading,
-        convertMessage: (message) => message,
-        onNew: async () => {},
-        onEdit,
-        onRespondToToolApproval,
-    });
-
-    return <AssistantRuntimeProvider runtime={runtime}>{children}</AssistantRuntimeProvider>;
-}

package/src/containers/Thread.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-import { ThreadContainer } from "./ThreadContainer.js";
-import { ComposerContainer } from "./ComposerContainer.js";
-
-/** The full assembled thread view: message list + composer. */
-export function Thread() {
-    return <ThreadContainer composer={<ComposerContainer />} />;
-}

package/src/containers/ThreadContainer.test.tsx

@@ -1,52 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from "@testing-library/react";
-import type { ThreadMessageLike } from "@assistant-ui/react";
-import { describe, expect, it } from "vitest";
-
-import { RuntimeHarness } from "./RuntimeHarness.js";
-import { ThreadContainer } from "./ThreadContainer.js";
-
-function renderThread(
-    messages: ThreadMessageLike[],
-    options?: { isLoading?: boolean; composer?: React.ReactNode },
-) {
-    return render(
-        <RuntimeHarness messages={messages} isLoading={options?.isLoading}>
-            <ThreadContainer composer={options?.composer} />
-        </RuntimeHarness>,
-    );
-}
-
-describe("ThreadContainer", () => {
-    it("renders the welcome screen for a new, empty thread", () => {
-        renderThread([]);
-        expect(screen.getByText("How can I help you today?")).toBeInTheDocument();
-    });
-
-    it("renders the loading skeleton while thread history is loading", () => {
-        renderThread([], { isLoading: true });
-        expect(screen.getByRole("status", { name: "Loading conversation" })).toBeInTheDocument();
-        expect(screen.queryByText("How can I help you today?")).not.toBeInTheDocument();
-    });
-
-    it("renders the message list once loaded and non-empty", () => {
-        renderThread([
-            { role: "user", content: "hi" },
-            { role: "assistant", content: "hello there" },
-        ]);
-        expect(screen.getByText("hello there")).toBeInTheDocument();
-        expect(screen.queryByText("How can I help you today?")).not.toBeInTheDocument();
-    });
-
-    it("renders the supplied composer slot", () => {
-        renderThread([{ role: "user", content: "hi" }], {
-            composer: <div data-testid="composer-slot" />,
-        });
-        expect(screen.getByTestId("composer-slot")).toBeInTheDocument();
-    });
-
-    it("omits the composer area entirely while loading", () => {
-        renderThread([], { isLoading: true, composer: <div data-testid="composer-slot" /> });
-        expect(screen.queryByTestId("composer-slot")).not.toBeInTheDocument();
-    });
-});

package/src/containers/ThreadContainer.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { ThreadPrimitive, useAuiState, type AssistantState } from "@assistant-ui/react";
-
-import { useSlot } from "../theme/SlotsProvider.js";
-import { ComposerBusyProvider } from "../hooks/useComposerBusyState.js";
-import { AssistantMessageContainer } from "./AssistantMessageContainer.js";
-import { UserEditComposerContainer } from "./UserEditComposerContainer.js";
-import { UserMessageContainer } from "./UserMessageContainer.js";
-
-// Startup exposes a loading placeholder thread; treat it as a new chat so the
-// composer mounts centered. Loads after startup keep the docked layout.
-const isNewChatView = (s: AssistantState) =>
-    s.thread.messages.length === 0 && (!s.thread.isLoading || s.threads.isLoading);
-
-function ThreadMessage({ isEditing }: { isEditing: boolean }) {
-    const role = useAuiState((s) => s.message.role);
-    if (role === "user") {
-        if (isEditing) {
-            return <UserEditComposerContainer />;
-        }
-        return <UserMessageContainer />;
-    }
-    return <AssistantMessageContainer />;
-}
-
-export type ThreadContainerProps = {
-    /**
-     * Rendered in the bottom composer area. Left undefined until
-     * `ComposerContainer` exists (milestone 6); the public `<Thread/>` export
-     * wires the two together once it does.
-     */
-    composer?: ReactNode;
-};
-
-export function ThreadContainer({ composer }: ThreadContainerProps) {
-    const ThreadRootShell = useSlot("ThreadRootShell");
-    const ThreadViewportShell = useSlot("ThreadViewportShell");
-    const ThreadComposerAreaShell = useSlot("ThreadComposerAreaShell");
-    const MessageGroup = useSlot("MessageGroup");
-    const WelcomeScreen = useSlot("WelcomeScreen");
-    const MessageListSkeleton = useSlot("MessageListSkeleton");
-    const ScrollToBottomButton = useSlot("ScrollToBottomButton");
-
-    const isEmpty = useAuiState(isNewChatView);
-    const isLoading = useAuiState((s) => s.thread.isLoading);
-
-    return (
-        <ComposerBusyProvider>
-            <ThreadPrimitive.Root asChild>
-            <ThreadRootShell>
-                <ThreadPrimitive.Viewport asChild turnAnchor="top" autoScroll>
-                    <ThreadViewportShell isEmpty={isEmpty}>
-                        {isEmpty && <WelcomeScreen />}
-                        {isLoading ? (
-                            <MessageListSkeleton />
-                        ) : (
-                            <MessageGroup>
-                                <ThreadPrimitive.Messages>
-                                    {({ message }) => (
-                                        <ThreadMessage
-                                            isEditing={
-                                                message.role === "user" &&
-                                                message.composer.isEditing
-                                            }
-                                        />
-                                    )}
-                                </ThreadPrimitive.Messages>
-                            </MessageGroup>
-                        )}
-                    </ThreadViewportShell>
-                </ThreadPrimitive.Viewport>
-
-                {!isLoading && (
-                    <ThreadComposerAreaShell isEmpty={isEmpty}>
-                        <ThreadPrimitive.ScrollToBottom asChild>
-                            <ScrollToBottomButton />
-                        </ThreadPrimitive.ScrollToBottom>
-                        {composer}
-                    </ThreadComposerAreaShell>
-                )}
-            </ThreadRootShell>
-        </ThreadPrimitive.Root>
-        </ComposerBusyProvider>
-    );
-}

package/src/containers/ThreadListContainer.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import { useAui, useAuiState } from "@assistant-ui/react";
-
-import { useSlot } from "../theme/SlotsProvider.js";
-
-/**
- * Simplified relative to the reference: renders threads in a single flat list
- * rather than grouping them by Today/Yesterday/Earlier. Archive/Delete are
- * wired but no-op against the current thread-list adapter (documented in the
- * runtime README's unsupported-features table).
- */
-export function ThreadListContainer() {
-    const ThreadListShell = useSlot("ThreadListShell");
-    const ThreadListNewButton = useSlot("ThreadListNewButton");
-    const ThreadListRow = useSlot("ThreadListRow");
-    const ThreadListRowSkeleton = useSlot("ThreadListRowSkeleton");
-    const ThreadListEmptyState = useSlot("ThreadListEmptyState");
-    const Button = useSlot("Button");
-
-    const aui = useAui();
-    const isLoading = useAuiState((s) => s.threads.isLoading);
-    const isLoadingMore = useAuiState((s) => s.threads.isLoadingMore);
-    const hasMore = useAuiState((s) => s.threads.hasMore);
-    const threadIds = useAuiState((s) => s.threads.threadIds);
-    const threadItems = useAuiState((s) => s.threads.threadItems);
-    const mainThreadId = useAuiState((s) => s.threads.mainThreadId);
-
-    const itemsById = new Map(threadItems.map((item) => [item.id, item]));
-
-    return (
-        <ThreadListShell header={<ThreadListNewButton onClick={() => aui.threads().switchToNewThread()} />}>
-            {isLoading ? (
-                <ThreadListRowSkeleton />
-            ) : threadIds.length === 0 ? (
-                <ThreadListEmptyState />
-            ) : (
-                threadIds.map((id) => {
-                    const item = itemsById.get(id);
-                    return (
-                        <ThreadListRow
-                            key={id}
-                            title={item?.title ?? "New Chat"}
-                            active={id === mainThreadId}
-                            onSelect={() => aui.threads().switchToThread(id)}
-                            onArchive={() => aui.threads().item({ id }).archive()}
-                            onDelete={() => aui.threads().item({ id }).delete()}
-                        />
-                    );
-                })
-            )}
-            {!isLoading &&
-                hasMore &&
-                (isLoadingMore ? (
-                    <ThreadListRowSkeleton count={1} />
-                ) : (
-                    <Button variant="ghost" onClick={() => void aui.threads().loadMore()}>
-                        Load more
-                    </Button>
-                ))}
-        </ThreadListShell>
-    );
-}

package/src/containers/ToolCallContainer.test.tsx

@@ -1,135 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen, fireEvent } from "@testing-library/react";
-import { ThreadPrimitive, type ThreadMessageLike } from "@assistant-ui/react";
-import { describe, expect, it, vi } from "vitest";
-
-import { RuntimeHarness } from "./RuntimeHarness.js";
-import { AssistantMessageContainer } from "./AssistantMessageContainer.js";
-
-function renderToolCallMessage(content: ThreadMessageLike["content"]) {
-    const message: ThreadMessageLike = { role: "assistant", content };
-    return render(
-        <RuntimeHarness messages={[message]}>
-            <ThreadPrimitive.Messages>{() => <AssistantMessageContainer />}</ThreadPrimitive.Messages>
-        </RuntimeHarness>,
-    );
-}
-
-/** Pending approvals only surface part-level "requires-action" when the whole message is flagged too. */
-function renderPendingApprovalMessage(
-    content: ThreadMessageLike["content"],
-    options?: { onRespondToToolApproval?: (o: unknown) => void },
-) {
-    const message: ThreadMessageLike = {
-        role: "assistant",
-        content,
-        status: { type: "requires-action", reason: "tool-calls" },
-    };
-    return render(
-        <RuntimeHarness
-            messages={[message]}
-            onRespondToToolApproval={options?.onRespondToToolApproval}
-        >
-            <ThreadPrimitive.Messages>{() => <AssistantMessageContainer />}</ThreadPrimitive.Messages>
-        </RuntimeHarness>,
-    );
-}
-
-describe("ToolCallContainer", () => {
-    it("renders a running tool call without a result", () => {
-        renderToolCallMessage([{ type: "tool-call", toolCallId: "1", toolName: "search_docs", args: {} }]);
-        expect(screen.getByText("search_docs")).toBeInTheDocument();
-        expect(screen.queryByText("Result:")).not.toBeInTheDocument();
-    });
-
-    it("renders args and result for a completed tool call once expanded", () => {
-        renderToolCallMessage([
-            {
-                type: "tool-call",
-                toolCallId: "1",
-                toolName: "get_current_datetime",
-                args: {},
-                argsText: '{"tz":"UTC"}',
-                result: "2026-07-01T00:00:00Z",
-            },
-        ]);
-        fireEvent.click(screen.getByText("get_current_datetime"));
-        expect(screen.getByText('{"tz":"UTC"}')).toBeInTheDocument();
-        expect(screen.getByText("2026-07-01T00:00:00Z")).toBeInTheDocument();
-    });
-
-    it("renders an error result once expanded", () => {
-        renderToolCallMessage([
-            {
-                type: "tool-call",
-                toolCallId: "1",
-                toolName: "flaky_tool",
-                args: {},
-                result: "boom",
-                isError: true,
-            },
-        ]);
-        fireEvent.click(screen.getByText("flaky_tool"));
-        const result = screen.getByText("boom");
-        expect(result).toBeInTheDocument();
-        expect(result).toHaveClass("text-destructive");
-    });
-
-    it("auto-expands and shows the approval bar while an approval is pending", () => {
-        renderPendingApprovalMessage([
-            {
-                type: "tool-call",
-                toolCallId: "1",
-                toolName: "delete_file",
-                args: {},
-                interrupt: { type: "human", payload: {} },
-                approval: { id: "approval-1", approved: undefined },
-            },
-        ]);
-        expect(screen.getByRole("button", { name: "Allow" })).toBeInTheDocument();
-        expect(screen.getByRole("button", { name: "Deny" })).toBeInTheDocument();
-    });
-
-    it("calls onRespondToToolApproval when Allow is clicked", () => {
-        const onRespondToToolApproval = vi.fn();
-        renderPendingApprovalMessage(
-            [
-                {
-                    type: "tool-call",
-                    toolCallId: "1",
-                    toolName: "delete_file",
-                    args: {},
-                    interrupt: { type: "human", payload: {} },
-                    approval: { id: "approval-1", approved: undefined },
-                },
-            ],
-            { onRespondToToolApproval },
-        );
-        fireEvent.click(screen.getByRole("button", { name: "Allow" }));
-        expect(onRespondToToolApproval).toHaveBeenCalledWith(
-            expect.objectContaining({ approvalId: "approval-1", approved: true }),
-        );
-    });
-
-    it("renders declared approval options with their labels", () => {
-        renderPendingApprovalMessage([
-            {
-                type: "tool-call",
-                toolCallId: "1",
-                toolName: "run_migration",
-                args: {},
-                interrupt: { type: "human", payload: {} },
-                approval: {
-                    id: "approval-1",
-                    approved: undefined,
-                    options: [
-                        { id: "opt-allow", kind: "allow-once" },
-                        { id: "opt-deny", kind: "reject-once" },
-                    ],
-                },
-            },
-        ]);
-        expect(screen.getByRole("button", { name: "Allow" })).toBeInTheDocument();
-        expect(screen.getByRole("button", { name: "Deny" })).toBeInTheDocument();
-    });
-});