import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ArrowLeft, BookOpen, HelpCircle, MessageSquare, Settings, Share, Sparkles, Star, Zap, } from "lucide-react";
import { useState } from "react";
import { makeMockLLM, makeMockStorage, mockSSEResponse } from "../../../__test-helpers/mockChat";
import { Button } from "../../Button";
import { IconButton } from "../../IconButton";
import { AgentInterface } from "../AgentInterface";
import { useNav } from "../_shared/navContext";
import logoUrl from "./thesysdev_logo.jpeg";
function getLastUserContent(messages) {
    const lastUser = [...messages].reverse().find((m) => m.role === "user");
    if (!lastUser)
        return "";
    return typeof lastUser.content === "string" ? lastUser.content : "";
}
const populatedStorage = makeMockStorage({
    listThreads: async () => {
        await new Promise((resolve) => setTimeout(resolve, 500));
        return {
            threads: [
                { id: "1", title: "First chat", createdAt: Date.now() },
                { id: "2", title: "Second chat", createdAt: Date.now() },
                { id: "3", title: "Third chat", createdAt: Date.now() },
            ],
        };
    },
    getMessages: async (threadId) => {
        if (!threadId)
            return [];
        return [
            { id: crypto.randomUUID(), role: "user", content: "Hello" },
            {
                id: crypto.randomUUID(),
                role: "assistant",
                content: "Hi! How can I help today?",
            },
        ];
    },
});
const emptyStorage = makeMockStorage({});
const defaultLLM = makeMockLLM({
    send: async () => {
        await new Promise((r) => setTimeout(r, 100));
        return mockSSEResponse("This is a response from the AI assistant.", 1000);
    },
});
const echoLLM = makeMockLLM({
    send: async ({ messages }) => {
        const content = getLastUserContent(messages);
        return mockSSEResponse(`You asked: "${content}"`, 1000);
    },
});
const SAMPLE_STARTERS = [
    {
        displayText: "Help me get started",
        prompt: "Help me get started",
        icon: _jsx(Sparkles, { size: 16 }),
    },
    {
        displayText: "What can you do?",
        prompt: "What can you do?",
    },
    {
        displayText: "Tell me about your features",
        prompt: "Tell me about your features",
        icon: _jsx(MessageSquare, { size: 16 }),
    },
];
const COMPOSER_STARTERS = [
    ...SAMPLE_STARTERS,
    {
        displayText: "Show me examples",
        prompt: "Show me examples",
        icon: _jsx(BookOpen, { size: 16 }),
    },
    {
        displayText: "What's new?",
        prompt: "What's new?",
        icon: _jsx(Star, { size: 16 }),
    },
    {
        displayText: "Open settings",
        prompt: "Open settings",
        icon: _jsx(Settings, { size: 16 }),
    },
];
const LONG_STARTERS = [
    {
        displayText: "Help me get started with this application and guide me through the features",
        prompt: "Help me get started",
        icon: _jsx(Sparkles, { size: 16 }),
    },
    {
        displayText: "What can you do? I'd like to know all your capabilities",
        prompt: "What can you do?",
        icon: _jsx(Zap, { size: 16 }),
    },
];
export default {
    title: "Components/AgentInterface",
    tags: ["dev"],
};
/** Bare default — everything renders from AgentInterface's internals. */
export const Default = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI" })),
};
/** Override only the composer at top level — sidebar + thread defaults persist. */
export const CustomComposer = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", children: _jsx(AgentInterface.Composer, { children: _jsx("div", { style: { padding: 16, background: "#f0f0f0", borderRadius: 8 }, children: "Custom composer placeholder \u2014 replaces the default input." }) }) })),
};
/** Tweak just the sidebar header — Mode B props on SidebarHeader. */
export const CustomSidebarHeader = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", children: _jsx(AgentInterface.SidebarHeader, { logo: _jsx("div", { style: { fontSize: 24 }, children: "\uD83D\uDE80" }), agentName: _jsx("strong", { style: { color: "#7c3aed" }, children: "Custom Brand" }), collapseButton: false }) })),
};
/** Full sidebar override — user composes the inside. */
export const FullSidebarOverride = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", children: _jsxs(AgentInterface.Sidebar, { children: [_jsx(AgentInterface.SidebarHeader, { logo: _jsx("div", { style: { fontSize: 24 }, children: "\uD83D\uDE80" }) }), _jsx("div", { style: { padding: 12, fontSize: 12, color: "#666" }, children: "Custom nav section" }), _jsx(AgentInterface.SidebarSeparator, {}), _jsx(AgentInterface.ThreadList, {})] }) })),
};
/** Welcome screen with title, image, and inherited starters. */
export const WithWelcome = {
    render: () => (_jsx(AgentInterface, { storage: emptyStorage, llm: echoLLM, logoUrl: logoUrl, agentName: "OpenUI Assistant", starters: SAMPLE_STARTERS, starterVariant: "long", children: _jsx(AgentInterface.Welcome, { title: "OpenUI Assistant", description: "Everything you'll need, in one place", image: { url: logoUrl } }) })),
};
/** Composer-only starters (no Welcome) — chips above the input. */
export const ComposerStarters = {
    render: () => (_jsx(AgentInterface, { storage: emptyStorage, llm: echoLLM, logoUrl: logoUrl, agentName: "OpenUI", starters: COMPOSER_STARTERS })),
};
/** Custom thread header — Mode C children on ThreadHeader. */
export const WithThreadHeader = {
    render: () => (_jsx(AgentInterface, { storage: emptyStorage, llm: echoLLM, logoUrl: logoUrl, agentName: "OpenUI", children: _jsx(AgentInterface.ThreadHeader, { children: _jsx(IconButton, { icon: _jsx(Share, { size: 16 }), variant: "tertiary", size: "small", "aria-label": "Share" }) }) })),
};
/** Custom mobile header — Mode B props with an extra actions button. */
export const CustomMobileHeader = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", children: _jsx(AgentInterface.MobileHeader, { actions: _jsx(IconButton, { icon: _jsx(Share, { size: 16 }), "aria-label": "Share", size: "medium", variant: "secondary" }) }) })),
};
/** Long-variant starters with welcome. */
export const LongStarters = {
    render: () => (_jsx(AgentInterface, { storage: emptyStorage, llm: echoLLM, logoUrl: logoUrl, agentName: "OpenUI Assistant", starters: LONG_STARTERS, starterVariant: "long", children: _jsx(AgentInterface.Welcome, { title: "Welcome", description: "Pick a starter or type your own.", image: { url: logoUrl } }) })),
};
/** Welcome Mode C — fully custom hero content (title/image/starters props ignored). */
export const WelcomeCustomChildren = {
    render: () => (_jsx(AgentInterface, { storage: emptyStorage, llm: echoLLM, logoUrl: logoUrl, agentName: "OpenUI Assistant", children: _jsx(AgentInterface.Welcome, { children: _jsxs("div", { style: { textAlign: "center", padding: "48px 24px" }, children: [_jsx("div", { style: {
                            width: 96,
                            height: 96,
                            margin: "0 auto 16px",
                            borderRadius: 24,
                            background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                        }, children: _jsx(Sparkles, { size: 48, color: "white" }) }), _jsx("h2", { style: { margin: "0 0 8px", fontSize: 28, fontWeight: 600 }, children: "Fully custom hero" }), _jsx("p", { style: { margin: 0, color: "rgba(0,0,0,0.5)", fontSize: 16 }, children: "When Welcome has children, all Mode B props (title/description/image/starters) are ignored." })] }) }) })),
};
/** SidebarHeader Mode C — children fully replace the header (top row gone). */
export const SidebarHeaderCustomChildren = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", children: _jsx(AgentInterface.SidebarHeader, { children: _jsxs("div", { style: {
                    display: "flex",
                    alignItems: "center",
                    gap: 8,
                    padding: "12px 16px",
                    background: "#7c3aed",
                    color: "white",
                    borderRadius: 8,
                    margin: 8,
                }, children: [_jsx(Sparkles, { size: 20 }), _jsx("strong", { children: "Branded header" })] }) }) })),
};
/** MobileHeader Mode C — replaces the whole bar. (Resize narrow to see.) */
export const MobileHeaderCustomChildren = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", children: _jsx(AgentInterface.MobileHeader, { children: _jsx("div", { style: {
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    padding: "8px 16px",
                    background: "#111827",
                    color: "white",
                    width: "100%",
                    fontWeight: 600,
                }, children: "Custom mobile bar" }) }) })),
};
/** Explicit `components` — replace AssistantMessage + UserMessage rendering. */
export const CustomMessageComponents = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", components: {
            AssistantMessage: ({ message, isStreaming }) => (_jsxs("div", { style: {
                    padding: 12,
                    margin: "8px 16px",
                    background: "#eef2ff",
                    borderRadius: 12,
                    borderLeft: "3px solid #4f46e5",
                }, children: [_jsxs("strong", { style: { color: "#4f46e5" }, children: ["Assistant", isStreaming ? " (streaming)" : ""] }), _jsx("div", { style: { marginTop: 4 }, children: typeof message.content === "string" ? message.content : "[non-text content]" })] })),
            UserMessage: ({ message }) => (_jsxs("div", { style: {
                    padding: 12,
                    margin: "8px 16px",
                    background: "#fef3c7",
                    borderRadius: 12,
                    borderLeft: "3px solid #d97706",
                    textAlign: "right",
                }, children: [_jsx("strong", { style: { color: "#d97706" }, children: "You" }), _jsx("div", { style: { marginTop: 4 }, children: typeof message.content === "string" ? message.content : "[non-text content]" })] })),
        } })),
};
/** Starters override: Welcome's own `starters` prop wins over the top-level. */
export const StartersOverrideAtWelcome = {
    render: () => (_jsx(AgentInterface, { storage: emptyStorage, llm: echoLLM, logoUrl: logoUrl, agentName: "OpenUI Assistant", starters: [{ displayText: "Top-level starter (should NOT show)", prompt: "x" }], children: _jsx(AgentInterface.Welcome, { title: "Welcome", description: "Welcome's own starters override the top-level.", image: { url: logoUrl }, starters: SAMPLE_STARTERS, starterVariant: "long" }) })),
};
/**
 * Hierarchical-ownership warning: top-level SidebarHeader is IGNORED when
 * <AgentInterface.Sidebar> is also at top level. Open the console to see the
 * dev warning. The branded header inside Sidebar is what actually renders.
 */
export const HierarchicalOwnershipWarning = {
    render: () => (_jsxs(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", children: [_jsx(AgentInterface.SidebarHeader, { logo: _jsx("div", { children: "\uD83D\uDEAB Should not render" }), agentName: "Ignored" }), _jsxs(AgentInterface.Sidebar, { children: [_jsx(AgentInterface.SidebarHeader, { logo: _jsx("div", { style: { fontSize: 22 }, children: "\u2705" }) }), _jsx(AgentInterface.SidebarSeparator, {}), _jsx(AgentInterface.ThreadList, {})] })] })),
};
/**
 * SidebarItem alongside ThreadList. Custom nav items inherit the same visual
 * language (hover, selected, padding) as ThreadList entries, so they blend
 * naturally above or below the thread history.
 */
const SidebarItemsStory = () => {
    const [section, setSection] = useState("home");
    return (_jsx(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", children: _jsxs(AgentInterface.Sidebar, { children: [_jsx(AgentInterface.SidebarHeader, {}), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [_jsx(AgentInterface.SidebarItem, { icon: _jsx(Sparkles, { size: 14 }), selected: section === "home", onClick: () => setSection("home"), children: "Home" }), _jsx(AgentInterface.SidebarItem, { icon: _jsx(Star, { size: 14 }), selected: section === "favorites", onClick: () => setSection("favorites"), trailing: 3, children: "Favorites" }), _jsx(AgentInterface.SidebarItem, { icon: _jsx(BookOpen, { size: 14 }), selected: section === "docs", onClick: () => setSection("docs"), children: "Docs" })] }), _jsx(AgentInterface.SidebarContent, { children: _jsx(AgentInterface.ThreadList, {}) }), _jsxs("div", { style: {
                        marginTop: "auto",
                        padding: "8px 0",
                        display: "flex",
                        flexDirection: "column",
                        gap: 2,
                    }, children: [_jsx(AgentInterface.SidebarItem, { icon: _jsx(Settings, { size: 14 }), children: "Settings" }), _jsx(AgentInterface.SidebarItem, { icon: _jsx(HelpCircle, { size: 14 }), children: "Help & feedback" })] })] }) }));
};
export const SidebarItems = {
    render: () => _jsx(SidebarItemsStory, {}),
};
/**
 * Routing with `<AgentInterface.Route>` and `SidebarItem.path`. The thread
 * region is fully replaced by the matched Route's content. Demonstrates two
 * ways to return to the thread:
 *   1. Explicit "Back to chat" button calling `navigate(undefined)` from
 *      inside the route page (see SettingsPage / DocsPage).
 *   2. Implicit — clicking any thread in the sidebar's ThreadList
 *      auto-clears the path (ThreadButton calls navigate(undefined) internally).
 */
const BackToChatButton = () => {
    const { navigate } = useNav();
    return (_jsx(Button, { variant: "secondary", size: "small", iconLeft: _jsx(ArrowLeft, { size: 14 }), onClick: () => navigate(undefined), children: "Back to chat" }));
};
const RoutePage = ({ title, body }) => (_jsxs("div", { style: {
        display: "flex",
        flexDirection: "column",
        gap: 12,
        padding: 24,
        height: "100%",
        overflowY: "auto",
    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [_jsx("h1", { style: { margin: 0, fontSize: 22, fontWeight: 600 }, children: title }), _jsx(BackToChatButton, {})] }), _jsx("p", { style: { margin: 0, color: "rgba(0,0,0,0.6)" }, children: body })] }));
const RoutingStory = () => (_jsxs(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", children: [_jsxs(AgentInterface.Sidebar, { children: [_jsx(AgentInterface.SidebarHeader, {}), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [_jsx(AgentInterface.SidebarItem, { path: "/settings", icon: _jsx(Settings, { size: 14 }), children: "Settings" }), _jsx(AgentInterface.SidebarItem, { path: "/docs", icon: _jsx(BookOpen, { size: 14 }), children: "Docs" }), _jsx(AgentInterface.SidebarItem, { path: "/help", icon: _jsx(HelpCircle, { size: 14 }), children: "Help" })] }), _jsx(AgentInterface.SidebarContent, { children: _jsx(AgentInterface.ThreadList, {}) })] }), _jsx(AgentInterface.Route, { path: "/settings", children: _jsx(RoutePage, { title: "Settings", body: "This entire thread region is replaced when the active path matches the Route. Click 'Back to chat' to call navigate(undefined), or click any thread in the sidebar to auto-clear the path." }) }), _jsx(AgentInterface.Route, { path: "/docs", children: _jsx(RoutePage, { title: "Docs", body: "Routes are siblings under <AgentInterface>. Exact-string match (no wildcards). When no Route matches, the thread view re-emerges with its defaults." }) }), _jsx(AgentInterface.Route, { path: "/help", children: _jsx(RoutePage, { title: "Help", body: "Multiple Routes are supported. Each is a top-level <AgentInterface.Route> with a unique path." }) })] }));
export const Routing = {
    render: () => _jsx(RoutingStory, {}),
};
/**
 * Same routing setup but in *controlled* mode — `path` + `onNavigate` come
 * from parent state. Useful when syncing with Next.js / React Router / your
 * own custom router. Defaults to `/settings` so the route content shows
 * immediately on mount.
 */
const ControlledRoutingStory = () => {
    const [path, setPath] = useState("/settings");
    return (_jsxs(AgentInterface, { storage: populatedStorage, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", path: path, onNavigate: setPath, children: [_jsxs(AgentInterface.Sidebar, { children: [_jsx(AgentInterface.SidebarHeader, {}), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [_jsx(AgentInterface.SidebarItem, { path: "/settings", icon: _jsx(Settings, { size: 14 }), children: "Settings" }), _jsx(AgentInterface.SidebarItem, { path: "/docs", icon: _jsx(BookOpen, { size: 14 }), children: "Docs" })] }), _jsx(AgentInterface.SidebarContent, { children: _jsx(AgentInterface.ThreadList, {}) }), _jsxs("div", { style: { padding: 8, fontSize: 11, color: "#666" }, children: ["current path: ", path === undefined ? "(thread)" : path] })] }), _jsx(AgentInterface.Route, { path: "/settings", children: _jsx(RoutePage, { title: "Settings (controlled)", body: "Parent owns `path` state." }) }), _jsx(AgentInterface.Route, { path: "/docs", children: _jsx(RoutePage, { title: "Docs (controlled)", body: "Sync with your router here." }) })] }));
};
export const ControlledRouting = {
    render: () => _jsx(ControlledRoutingStory, {}),
};
/**
 * Global artifact browser. `artifactCategories` split the sidebar nav into
 * "Apps" + "Artifacts"; clicking one opens the searchable artifact list
 * (reserved path `artifacts/{category}`); clicking an artifact opens the
 * full-page view with Back + "Go to thread".
 */
const MOCK_ARTIFACT_TYPES = [
    { type: "th_dashboard", titlePrefix: "Sales dashboard" },
    { type: "th_report", titlePrefix: "Quarterly report" },
    { type: "th_presentation", titlePrefix: "Market overview" },
];
const MOCK_LONG_ARTIFACT_TITLES = {
    3: "Executive market overview presentation for global sales leadership",
    4: "Sales dashboard with regional revenue attribution and pipeline movement",
    8: "Quarterly report covering customer expansion, renewals, and churn signals",
};
const MOCK_ARTIFACTS = Array.from({ length: 12 }, (_, i) => {
    const artifactType = MOCK_ARTIFACT_TYPES[i % MOCK_ARTIFACT_TYPES.length];
    const title = MOCK_LONG_ARTIFACT_TITLES[i + 1] ?? `${artifactType.titlePrefix} ${i + 1}`;
    return {
        id: `artifact-${i + 1}`,
        title,
        type: artifactType.type,
        threadId: String((i % 3) + 1),
        updatedAt: new Date(Date.UTC(2026, 5, 16, 9, 30 - i * 7)).toISOString(),
        content: {
            heading: title,
            body: `Stored content for artifact ${i + 1}.`,
        },
    };
});
const mockArtifactStorage = {
    list: async ({ name, type } = {}) => {
        await new Promise((r) => setTimeout(r, 300));
        const filtered = MOCK_ARTIFACTS.filter((a) => (!name || a.title.toLowerCase().includes(name.toLowerCase())) &&
            (!type || type.includes(a.type)));
        return {
            artifacts: filtered.map(({ content: _c, ...summary }) => summary),
            nextCursor: undefined,
        };
    },
    get: async (id) => {
        await new Promise((r) => setTimeout(r, 300));
        const found = MOCK_ARTIFACTS.find((a) => a.id === id);
        if (!found)
            throw new Error(`Artifact ${id} not found`);
        return found;
    },
    update: async ({ id }) => {
        const { content: _c, ...summary } = MOCK_ARTIFACTS.find((a) => a.id === id);
        return summary;
    },
};
const storedArtifactRenderer = (type) => ({
    type,
    toolName: `${type}:create`,
    parser: ({ response }) => {
        const content = response;
        if (!content?.heading)
            return null;
        return { props: content, meta: { id: content.heading, version: 1, heading: content.heading } };
    },
    preview: (props) => _jsx("div", { children: props.heading }),
    actual: (props) => (_jsxs("div", { style: { padding: 24 }, children: [_jsx("h2", { style: { marginTop: 0 }, children: props.heading }), _jsx("p", { children: props.body }), _jsx("p", { style: { color: "rgba(0,0,0,0.4)", fontSize: 13 }, children: "Rendered from storage via the type-matched artifact renderer." })] })),
});
const ARTIFACT_RENDERERS = [
    storedArtifactRenderer("th_dashboard"),
    storedArtifactRenderer("th_report"),
    storedArtifactRenderer("th_presentation"),
];
const ARTIFACT_CATEGORIES = [
    { name: "Apps", filter: { type: ["th_dashboard"] } },
    { name: "Artifacts", filter: { type: ["th_report", "th_presentation"] } },
];
export const ArtifactBrowser = {
    render: () => (_jsx(AgentInterface, { storage: { ...makeMockStorage(), artifact: mockArtifactStorage }, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", artifactRenderers: ARTIFACT_RENDERERS, artifactCategories: ARTIFACT_CATEGORIES })),
};
/** Without categories: a single "Artifacts" sidebar item browsing everything. */
export const ArtifactBrowserUncategorized = {
    render: () => (_jsx(AgentInterface, { storage: { ...makeMockStorage(), artifact: mockArtifactStorage }, llm: defaultLLM, logoUrl: logoUrl, agentName: "OpenUI", artifactRenderers: ARTIFACT_RENDERERS })),
};
/**
 * Per-thread Workspace rail. Send a message (or click the starter) — the
 * mock LLM replies with a `dashboard:create` tool call; the matched artifact
 * renderer registers an entry in the ThreadContext. Use the header Workspace
 * button to open the rail, then click the entry to open its DetailedView.
 */
const toolCallSSE = (toolName, args, result) => {
    const events = [
        { type: "TEXT_MESSAGE_CONTENT", delta: "Sure — here's your dashboard. " },
        { type: "TOOL_CALL_START", toolCallId: "tc-1", toolCallName: toolName },
        { type: "TOOL_CALL_ARGS", toolCallId: "tc-1", delta: JSON.stringify(args) },
        { type: "TOOL_CALL_END", toolCallId: "tc-1" },
        { type: "TOOL_CALL_RESULT", toolCallId: "tc-1", content: JSON.stringify(result) },
    ];
    const body = events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") + "data: [DONE]\n\n";
    return new Promise((resolve) => {
        setTimeout(() => {
            const stream = new ReadableStream({
                start(controller) {
                    controller.enqueue(new TextEncoder().encode(body));
                    controller.close();
                },
            });
            resolve(new Response(stream));
        }, 400);
    });
};
let dashboardCount = 0;
const workspaceLLM = makeMockLLM({
    send: async () => {
        dashboardCount += 1;
        const heading = `Revenue dashboard ${dashboardCount}`;
        return toolCallSSE("dashboard:create", { heading }, { heading, body: `Widgets and charts for ${heading}.` });
    },
});
const dashboardRenderer = {
    type: "th_dashboard",
    toolName: "dashboard:create",
    parser: ({ response }) => {
        if (typeof response !== "string")
            return null;
        try {
            const content = JSON.parse(response);
            if (!content.heading)
                return null;
            return {
                props: content,
                meta: { id: content.heading, version: 1, heading: content.heading },
            };
        }
        catch {
            return null;
        }
    },
    preview: (props, controls) => (_jsxs("button", { type: "button", onClick: controls.open, style: {
            display: "block",
            padding: "10px 14px",
            margin: "8px 0",
            border: "1px solid #ddd",
            borderRadius: 8,
            cursor: "pointer",
            background: controls.isActive ? "#eef2ff" : "#fff",
        }, children: ["\uD83D\uDCCA ", props.heading, " \u2014 click to open"] })),
    actual: (props) => (_jsxs("div", { style: { padding: 16 }, children: [_jsx("h3", { style: { marginTop: 0 }, children: props.heading }), _jsx("p", { children: props.body })] })),
};
export const WithWorkspace = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: workspaceLLM, logoUrl: logoUrl, agentName: "OpenUI", artifactRenderers: [dashboardRenderer], artifactCategories: ARTIFACT_CATEGORIES, starters: [
            {
                displayText: "Create a revenue dashboard",
                prompt: "Create a revenue dashboard",
                icon: _jsx(Sparkles, { size: 16 }),
            },
        ] })),
};
/** Workspace Mode C — children replace the rail entirely. */
export const WorkspaceCustomChildren = {
    render: () => (_jsx(AgentInterface, { storage: populatedStorage, llm: workspaceLLM, logoUrl: logoUrl, agentName: "OpenUI", artifactRenderers: [dashboardRenderer], children: _jsx(AgentInterface.Workspace, { children: _jsxs("div", { style: {
                    width: 240,
                    padding: 16,
                    borderLeft: "1px solid #eee",
                    background: "#fafafa",
                }, children: [_jsx("strong", { children: "My custom rail" }), _jsx("p", { style: { fontSize: 13, color: "#666" }, children: "Replaces the default Workspace (always visible \u2014 you own the chrome)." })] }) }) })),
};
//# sourceMappingURL=AgentInterface.stories.js.map