@chatsdk-dev/ui 0.0.1 → 0.1.3

package/dist/molecules/commit.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Avatar, AvatarFallback } from "@chatsdk-dev/ui/components/avatar";
+import { Button } from "@chatsdk-dev/ui/components/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@chatsdk-dev/ui/components/collapsible";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { CheckIcon, CopyIcon, FileIcon, GitCommitIcon, MinusIcon, PlusIcon, } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+export const Commit = ({ className, children, ...props }) => (_jsx(Collapsible, { className: cn("rounded-lg border bg-background", className), ...props, children: children }));
+export const CommitHeader = ({ className, children, ...props }) => (_jsx(CollapsibleTrigger, { render: () => (_jsx("div", { className: cn("group flex cursor-pointer items-center justify-between gap-4 p-3 text-left transition-colors hover:opacity-80", className), children: children })) }));
+export const CommitHash = ({ className, children, ...props }) => (_jsxs("span", { className: cn("font-mono text-xs", className), ...props, children: [_jsx(GitCommitIcon, { className: "mr-1 inline-block size-3" }), children] }));
+export const CommitMessage = ({ className, children, ...props }) => (_jsx("span", { className: cn("font-medium text-sm", className), ...props, children: children }));
+export const CommitMetadata = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center gap-2 text-muted-foreground text-xs", className), ...props, children: children }));
+export const CommitSeparator = ({ className, children, ...props }) => (_jsx("span", { className: className, ...props, children: children ?? "•" }));
+export const CommitInfo = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex flex-1 flex-col", className), ...props, children: children }));
+export const CommitAuthor = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center", className), ...props, children: children }));
+export const CommitAuthorAvatar = ({ initials, className, ...props }) => (_jsx(Avatar, { className: cn("size-8", className), ...props, children: _jsx(AvatarFallback, { className: "text-xs", children: initials }) }));
+const relativeTimeFormat = new Intl.RelativeTimeFormat("en", {
+    numeric: "auto",
+});
+const formatRelativeDate = (date) => {
+    const days = Math.round((date.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
+    return relativeTimeFormat.format(days, "day");
+};
+export const CommitTimestamp = ({ date, className, children, ...props }) => {
+    const [formatted, setFormatted] = useState("");
+    const updateFormatted = useCallback(() => {
+        setFormatted(formatRelativeDate(date));
+    }, [date]);
+    useEffect(() => {
+        updateFormatted();
+    }, [updateFormatted]);
+    return (_jsx("time", { className: cn("text-xs", className), dateTime: date.toISOString(), ...props, children: children ?? formatted }));
+};
+const handleActionsClick = (e) => e.stopPropagation();
+const handleActionsKeyDown = (e) => e.stopPropagation();
+export const CommitActions = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center gap-1", className), onClick: handleActionsClick, onKeyDown: handleActionsKeyDown, role: "group", ...props, children: children }));
+export const CommitCopyButton = ({ hash, onCopy, onError, timeout = 2000, children, className, ...props }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const timeoutRef = useRef(0);
+    const copyToClipboard = useCallback(async () => {
+        if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+            onError?.(new Error("Clipboard API not available"));
+            return;
+        }
+        try {
+            if (!isCopied) {
+                await navigator.clipboard.writeText(hash);
+                setIsCopied(true);
+                onCopy?.();
+                timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+            }
+        }
+        catch (error) {
+            onError?.(error);
+        }
+    }, [hash, onCopy, onError, timeout, isCopied]);
+    useEffect(() => () => {
+        window.clearTimeout(timeoutRef.current);
+    }, []);
+    const Icon = isCopied ? CheckIcon : CopyIcon;
+    return (_jsx(Button, { className: cn("size-7 shrink-0", className), onClick: copyToClipboard, size: "icon", variant: "ghost", ...props, children: children ?? _jsx(Icon, { size: 14 }) }));
+};
+export const CommitContent = ({ className, children, ...props }) => (_jsx(CollapsibleContent, { className: cn("border-t p-3", className), ...props, children: children }));
+export const CommitFiles = ({ className, children, ...props }) => (_jsx("div", { className: cn("space-y-1", className), ...props, children: children }));
+export const CommitFile = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/50", className), ...props, children: children }));
+export const CommitFileInfo = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex min-w-0 items-center gap-2", className), ...props, children: children }));
+const fileStatusStyles = {
+    added: "text-green-600 dark:text-green-400",
+    deleted: "text-red-600 dark:text-red-400",
+    modified: "text-yellow-600 dark:text-yellow-400",
+    renamed: "text-blue-600 dark:text-blue-400",
+};
+const fileStatusLabels = {
+    added: "A",
+    deleted: "D",
+    modified: "M",
+    renamed: "R",
+};
+export const CommitFileStatus = ({ status, className, children, ...props }) => (_jsx("span", { className: cn("font-medium font-mono text-xs", fileStatusStyles[status], className), ...props, children: children ?? fileStatusLabels[status] }));
+export const CommitFileIcon = ({ className, ...props }) => (_jsx(FileIcon, { className: cn("size-3.5 shrink-0 text-muted-foreground", className), ...props }));
+export const CommitFilePath = ({ className, children, ...props }) => (_jsx("span", { className: cn("truncate font-mono text-xs", className), ...props, children: children }));
+export const CommitFileChanges = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex shrink-0 items-center gap-1 font-mono text-xs", className), ...props, children: children }));
+export const CommitFileAdditions = ({ count, className, children, ...props }) => {
+    if (count <= 0) {
+        return null;
+    }
+    return (_jsx("span", { className: cn("text-green-600 dark:text-green-400", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(PlusIcon, { className: "inline-block size-3" }), count] })) }));
+};
+export const CommitFileDeletions = ({ count, className, children, ...props }) => {
+    if (count <= 0) {
+        return null;
+    }
+    return (_jsx("span", { className: cn("text-red-600 dark:text-red-400", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(MinusIcon, { className: "inline-block size-3" }), count] })) }));
+};

package/dist/molecules/confirmation.d.ts

@@ -0,0 +1,50 @@
+import { Alert, AlertDescription } from "@chatsdk-dev/ui/components/alert";
+import { Button } from "@chatsdk-dev/ui/components/button";
+import type { ToolUIPart } from "ai";
+import type { ComponentProps, ReactNode } from "react";
+type ToolUIPartApproval = {
+    id: string;
+    approved?: never;
+    reason?: never;
+} | {
+    id: string;
+    approved: boolean;
+    reason?: string;
+} | {
+    id: string;
+    approved: true;
+    reason?: string;
+} | {
+    id: string;
+    approved: true;
+    reason?: string;
+} | {
+    id: string;
+    approved: false;
+    reason?: string;
+} | undefined;
+export type ConfirmationProps = ComponentProps<typeof Alert> & {
+    approval?: ToolUIPartApproval;
+    state: ToolUIPart["state"];
+};
+export declare const Confirmation: ({ className, approval, state, ...props }: ConfirmationProps) => import("react/jsx-runtime").JSX.Element | null;
+export type ConfirmationTitleProps = ComponentProps<typeof AlertDescription>;
+export declare const ConfirmationTitle: ({ className, ...props }: ConfirmationTitleProps) => import("react/jsx-runtime").JSX.Element;
+export interface ConfirmationRequestProps {
+    children?: ReactNode;
+}
+export declare const ConfirmationRequest: ({ children }: ConfirmationRequestProps) => ReactNode;
+export interface ConfirmationAcceptedProps {
+    children?: ReactNode;
+}
+export declare const ConfirmationAccepted: ({ children, }: ConfirmationAcceptedProps) => ReactNode;
+export interface ConfirmationRejectedProps {
+    children?: ReactNode;
+}
+export declare const ConfirmationRejected: ({ children, }: ConfirmationRejectedProps) => ReactNode;
+export type ConfirmationActionsProps = ComponentProps<"div">;
+export declare const ConfirmationActions: ({ className, ...props }: ConfirmationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export type ConfirmationActionProps = ComponentProps<typeof Button>;
+export declare const ConfirmationAction: (props: ConfirmationActionProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=confirmation.d.ts.map

package/dist/molecules/confirmation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirmation.d.ts","sourceRoot":"","sources":["../../src/molecules/confirmation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,KAAK,kBAAkB,GACnB;IACE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GACD;IACE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GACD;IACE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GACD;IACE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GACD,SAAS,CAAC;AAqBd,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,GAAG;IAC7D,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,0CAK1B,iBAAiB,mDAYnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE7E,eAAO,MAAM,iBAAiB,GAAI,yBAG/B,sBAAsB,4CAExB,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,GAAI,cAAc,wBAAwB,cASzE,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,GAAI,eAElC,yBAAyB,cAc3B,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,GAAI,eAElC,yBAAyB,cAc3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE7D,eAAO,MAAM,mBAAmB,GAAI,yBAGjC,wBAAwB,mDAc1B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEpE,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAEhE,CAAC"}

package/dist/molecules/confirmation.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, AlertDescription } from "@chatsdk-dev/ui/components/alert";
+import { Button } from "@chatsdk-dev/ui/components/button";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { createContext, useContext, useMemo } from "react";
+const ConfirmationContext = createContext(null);
+const useConfirmation = () => {
+    const context = useContext(ConfirmationContext);
+    if (!context) {
+        throw new Error("Confirmation components must be used within Confirmation");
+    }
+    return context;
+};
+export const Confirmation = ({ className, approval, state, ...props }) => {
+    const contextValue = useMemo(() => ({ approval, state }), [approval, state]);
+    if (!approval || state === "input-streaming" || state === "input-available") {
+        return null;
+    }
+    return (_jsx(ConfirmationContext.Provider, { value: contextValue, children: _jsx(Alert, { className: cn("flex flex-col gap-2", className), ...props }) }));
+};
+export const ConfirmationTitle = ({ className, ...props }) => (_jsx(AlertDescription, { className: cn("inline", className), ...props }));
+export const ConfirmationRequest = ({ children }) => {
+    const { state } = useConfirmation();
+    // Only show when approval is requested
+    if (state !== "approval-requested") {
+        return null;
+    }
+    return children;
+};
+export const ConfirmationAccepted = ({ children, }) => {
+    const { approval, state } = useConfirmation();
+    // Only show when approved and in response states
+    if (!approval?.approved ||
+        (state !== "approval-responded" &&
+            state !== "output-denied" &&
+            state !== "output-available")) {
+        return null;
+    }
+    return children;
+};
+export const ConfirmationRejected = ({ children, }) => {
+    const { approval, state } = useConfirmation();
+    // Only show when rejected and in response states
+    if (approval?.approved !== false ||
+        (state !== "approval-responded" &&
+            state !== "output-denied" &&
+            state !== "output-available")) {
+        return null;
+    }
+    return children;
+};
+export const ConfirmationActions = ({ className, ...props }) => {
+    const { state } = useConfirmation();
+    // Only show when approval is requested
+    if (state !== "approval-requested") {
+        return null;
+    }
+    return (_jsx("div", { className: cn("flex items-center justify-end gap-2 self-end", className), ...props }));
+};
+export const ConfirmationAction = (props) => (_jsx(Button, { className: "h-8 px-3 text-sm", type: "button", ...props }));

package/dist/molecules/connection.d.ts

@@ -0,0 +1,3 @@
+import type { ConnectionLineComponent } from "@xyflow/react";
+export declare const Connection: ConnectionLineComponent;
+//# sourceMappingURL=connection.d.ts.map

package/dist/molecules/connection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection.d.ts","sourceRoot":"","sources":["../../src/molecules/connection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAI7D,eAAO,MAAM,UAAU,EAAE,uBAuBxB,CAAC"}

package/dist/molecules/connection.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HALF = 0.5;
+export const Connection = ({ fromX, fromY, toX, toY, }) => (_jsxs("g", { children: [_jsx("path", { className: "animated", d: `M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`, fill: "none", stroke: "var(--color-ring)", strokeWidth: 1 }), _jsx("circle", { cx: toX, cy: toY, fill: "#fff", r: 3, stroke: "var(--color-ring)", strokeWidth: 1 })] }));

package/dist/molecules/context.d.ts

@@ -0,0 +1,33 @@
+import { Button } from "@chatsdk-dev/ui/components/button";
+import { HoverCard, HoverCardContent } from "@chatsdk-dev/ui/components/hover-card";
+import type { LanguageModelUsage } from "ai";
+import type { ComponentProps } from "react";
+type ModelId = string;
+interface ContextSchema {
+    usedTokens: number;
+    maxTokens: number;
+    usage?: LanguageModelUsage;
+    modelId?: ModelId;
+}
+export type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
+export declare const Context: ({ usedTokens, maxTokens, usage, modelId, ...props }: ContextProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextTriggerProps = ComponentProps<typeof Button>;
+export declare const ContextTrigger: ({ children, ...props }: ContextTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextContentProps = ComponentProps<typeof HoverCardContent>;
+export declare const ContextContent: ({ className, ...props }: ContextContentProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextContentHeaderProps = ComponentProps<"div">;
+export declare const ContextContentHeader: ({ children, className, ...props }: ContextContentHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextContentBodyProps = ComponentProps<"div">;
+export declare const ContextContentBody: ({ children, className, ...props }: ContextContentBodyProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextContentFooterProps = ComponentProps<"div">;
+export declare const ContextContentFooter: ({ children, className, ...props }: ContextContentFooterProps) => import("react/jsx-runtime").JSX.Element;
+export type ContextInputUsageProps = ComponentProps<"div">;
+export declare const ContextInputUsage: ({ className, children, ...props }: ContextInputUsageProps) => string | number | bigint | true | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;
+export type ContextOutputUsageProps = ComponentProps<"div">;
+export declare const ContextOutputUsage: ({ className, children, ...props }: ContextOutputUsageProps) => string | number | bigint | true | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;
+export type ContextReasoningUsageProps = ComponentProps<"div">;
+export declare const ContextReasoningUsage: ({ className, children, ...props }: ContextReasoningUsageProps) => string | number | bigint | true | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;
+export type ContextCacheUsageProps = ComponentProps<"div">;
+export declare const ContextCacheUsage: ({ className, children, ...props }: ContextCacheUsageProps) => string | number | bigint | true | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/molecules/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/molecules/context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EACL,SAAS,EACT,gBAAgB,EAEjB,MAAM,uCAAuC,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,IAAI,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAU5C,KAAK,OAAO,GAAG,MAAM,CAAC;AAEtB,UAAU,aAAa;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAcD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG,aAAa,CAAC;AAE5E,eAAO,MAAM,OAAO,GAAI,qDAMrB,YAAY,4CAWd,CAAC;AA2CF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEhE,eAAO,MAAM,cAAc,GAAI,wBAAwB,mBAAmB,4CAwBzE,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,cAAc,GAAI,yBAG5B,mBAAmB,4CAKrB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,mCAIlC,yBAAyB,4CA+B3B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,eAAO,MAAM,kBAAkB,GAAI,mCAIhC,uBAAuB,4CAIzB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,mCAIlC,yBAAyB,4CAgC3B,CAAC;AAqBF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,eAAO,MAAM,iBAAiB,GAAI,mCAI/B,sBAAsB,6VAgCxB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,eAAO,MAAM,kBAAkB,GAAI,mCAIhC,uBAAuB,6VAgCzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE/D,eAAO,MAAM,qBAAqB,GAAI,mCAInC,0BAA0B,6VAgC5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,eAAO,MAAM,iBAAiB,GAAI,mCAI/B,sBAAsB,6VAgCxB,CAAC"}

package/dist/molecules/context.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@chatsdk-dev/ui/components/button";
+import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@chatsdk-dev/ui/components/hover-card";
+import { Progress } from "@chatsdk-dev/ui/components/progress";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { createContext, useContext, useMemo } from "react";
+import { getUsage } from "tokenlens";
+const PERCENT_MAX = 100;
+const ICON_RADIUS = 10;
+const ICON_VIEWBOX = 24;
+const ICON_CENTER = 12;
+const ICON_STROKE_WIDTH = 2;
+const ContextContext = createContext(null);
+const useContextValue = () => {
+    const context = useContext(ContextContext);
+    if (!context) {
+        throw new Error("Context components must be used within Context");
+    }
+    return context;
+};
+export const Context = ({ usedTokens, maxTokens, usage, modelId, ...props }) => {
+    const contextValue = useMemo(() => ({ maxTokens, modelId, usage, usedTokens }), [maxTokens, modelId, usage, usedTokens]);
+    return (_jsx(ContextContext.Provider, { value: contextValue, children: _jsx(HoverCard, { ...props }) }));
+};
+const ContextIcon = () => {
+    const { usedTokens, maxTokens } = useContextValue();
+    const circumference = 2 * Math.PI * ICON_RADIUS;
+    const usedPercent = usedTokens / maxTokens;
+    const dashOffset = circumference * (1 - usedPercent);
+    return (_jsxs("svg", { "aria-label": "Model context usage", height: "20", role: "img", style: { color: "currentcolor" }, viewBox: `0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`, width: "20", children: [_jsx("circle", { cx: ICON_CENTER, cy: ICON_CENTER, fill: "none", opacity: "0.25", r: ICON_RADIUS, stroke: "currentColor", strokeWidth: ICON_STROKE_WIDTH }), _jsx("circle", { cx: ICON_CENTER, cy: ICON_CENTER, fill: "none", opacity: "0.7", r: ICON_RADIUS, stroke: "currentColor", strokeDasharray: `${circumference} ${circumference}`, strokeDashoffset: dashOffset, strokeLinecap: "round", strokeWidth: ICON_STROKE_WIDTH, style: { transform: "rotate(-90deg)", transformOrigin: "center" } })] }));
+};
+export const ContextTrigger = ({ children, ...props }) => {
+    const { usedTokens, maxTokens } = useContextValue();
+    const usedPercent = usedTokens / maxTokens;
+    const renderedPercent = new Intl.NumberFormat("en-US", {
+        maximumFractionDigits: 1,
+        style: "percent",
+    }).format(usedPercent);
+    return (_jsx(HoverCardTrigger, { render: () => children ? (_jsx(_Fragment, { children: children })) : (_jsxs(Button, { type: "button", variant: "ghost", ...props, children: [_jsx("span", { className: "font-medium text-muted-foreground", children: renderedPercent }), _jsx(ContextIcon, {})] })) }));
+};
+export const ContextContent = ({ className, ...props }) => (_jsx(HoverCardContent, { className: cn("min-w-60 divide-y overflow-hidden p-0", className), ...props }));
+export const ContextContentHeader = ({ children, className, ...props }) => {
+    const { usedTokens, maxTokens } = useContextValue();
+    const usedPercent = usedTokens / maxTokens;
+    const displayPct = new Intl.NumberFormat("en-US", {
+        maximumFractionDigits: 1,
+        style: "percent",
+    }).format(usedPercent);
+    const used = new Intl.NumberFormat("en-US", {
+        notation: "compact",
+    }).format(usedTokens);
+    const total = new Intl.NumberFormat("en-US", {
+        notation: "compact",
+    }).format(maxTokens);
+    return (_jsx("div", { className: cn("w-full space-y-2 p-3", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [_jsx("p", { children: displayPct }), _jsxs("p", { className: "font-mono text-muted-foreground", children: [used, " / ", total] })] }), _jsx("div", { className: "space-y-2", children: _jsx(Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })] })) }));
+};
+export const ContextContentBody = ({ children, className, ...props }) => (_jsx("div", { className: cn("w-full p-3", className), ...props, children: children }));
+export const ContextContentFooter = ({ children, className, ...props }) => {
+    const { modelId, usage } = useContextValue();
+    const costUSD = modelId
+        ? getUsage({
+            modelId,
+            usage: {
+                input: usage?.inputTokens ?? 0,
+                output: usage?.outputTokens ?? 0,
+            },
+        }).costUSD?.totalUSD
+        : undefined;
+    const totalCost = new Intl.NumberFormat("en-US", {
+        currency: "USD",
+        style: "currency",
+    }).format(costUSD ?? 0);
+    return (_jsx("div", { className: cn("flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: "Total cost" }), _jsx("span", { children: totalCost })] })) }));
+};
+const TokensWithCost = ({ tokens, costText, }) => (_jsxs("span", { children: [tokens === undefined
+            ? "—"
+            : new Intl.NumberFormat("en-US", {
+                notation: "compact",
+            }).format(tokens), costText ? (_jsxs("span", { className: "ml-2 text-muted-foreground", children: ["\u2022 ", costText] })) : null] }));
+export const ContextInputUsage = ({ className, children, ...props }) => {
+    const { usage, modelId } = useContextValue();
+    const inputTokens = usage?.inputTokens ?? 0;
+    if (children) {
+        return children;
+    }
+    if (!inputTokens) {
+        return null;
+    }
+    const inputCost = modelId
+        ? getUsage({
+            modelId,
+            usage: { input: inputTokens, output: 0 },
+        }).costUSD?.totalUSD
+        : undefined;
+    const inputCostText = new Intl.NumberFormat("en-US", {
+        currency: "USD",
+        style: "currency",
+    }).format(inputCost ?? 0);
+    return (_jsxs("div", { className: cn("flex items-center justify-between text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: "Input" }), _jsx(TokensWithCost, { costText: inputCostText, tokens: inputTokens })] }));
+};
+export const ContextOutputUsage = ({ className, children, ...props }) => {
+    const { usage, modelId } = useContextValue();
+    const outputTokens = usage?.outputTokens ?? 0;
+    if (children) {
+        return children;
+    }
+    if (!outputTokens) {
+        return null;
+    }
+    const outputCost = modelId
+        ? getUsage({
+            modelId,
+            usage: { input: 0, output: outputTokens },
+        }).costUSD?.totalUSD
+        : undefined;
+    const outputCostText = new Intl.NumberFormat("en-US", {
+        currency: "USD",
+        style: "currency",
+    }).format(outputCost ?? 0);
+    return (_jsxs("div", { className: cn("flex items-center justify-between text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: "Output" }), _jsx(TokensWithCost, { costText: outputCostText, tokens: outputTokens })] }));
+};
+export const ContextReasoningUsage = ({ className, children, ...props }) => {
+    const { usage, modelId } = useContextValue();
+    const reasoningTokens = usage?.reasoningTokens ?? 0;
+    if (children) {
+        return children;
+    }
+    if (!reasoningTokens) {
+        return null;
+    }
+    const reasoningCost = modelId
+        ? getUsage({
+            modelId,
+            usage: { reasoningTokens },
+        }).costUSD?.totalUSD
+        : undefined;
+    const reasoningCostText = new Intl.NumberFormat("en-US", {
+        currency: "USD",
+        style: "currency",
+    }).format(reasoningCost ?? 0);
+    return (_jsxs("div", { className: cn("flex items-center justify-between text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: "Reasoning" }), _jsx(TokensWithCost, { costText: reasoningCostText, tokens: reasoningTokens })] }));
+};
+export const ContextCacheUsage = ({ className, children, ...props }) => {
+    const { usage, modelId } = useContextValue();
+    const cacheTokens = usage?.cachedInputTokens ?? 0;
+    if (children) {
+        return children;
+    }
+    if (!cacheTokens) {
+        return null;
+    }
+    const cacheCost = modelId
+        ? getUsage({
+            modelId,
+            usage: { cacheReads: cacheTokens, input: 0, output: 0 },
+        }).costUSD?.totalUSD
+        : undefined;
+    const cacheCostText = new Intl.NumberFormat("en-US", {
+        currency: "USD",
+        style: "currency",
+    }).format(cacheCost ?? 0);
+    return (_jsxs("div", { className: cn("flex items-center justify-between text-xs", className), ...props, children: [_jsx("span", { className: "text-muted-foreground", children: "Cache" }), _jsx(TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })] }));
+};

package/dist/molecules/controls.d.ts

@@ -0,0 +1,5 @@
+import { Controls as ControlsPrimitive } from "@xyflow/react";
+import type { ComponentProps } from "react";
+export type ControlsProps = ComponentProps<typeof ControlsPrimitive>;
+export declare const Controls: ({ className, ...props }: ControlsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=controls.d.ts.map

package/dist/molecules/controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/molecules/controls.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAErE,eAAO,MAAM,QAAQ,GAAI,yBAAyB,aAAa,4CAS9D,CAAC"}

package/dist/molecules/controls.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { Controls as ControlsPrimitive } from "@xyflow/react";
+export const Controls = ({ className, ...props }) => (_jsx(ControlsPrimitive, { className: cn("gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!", "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!", className), ...props }));

package/dist/molecules/conversation.d.ts

@@ -0,0 +1,24 @@
+import { Button } from "@chatsdk-dev/ui/components/button";
+import type { UIMessage } from "ai";
+import type { ComponentProps } from "react";
+import { StickToBottom } from "use-stick-to-bottom";
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+export declare const Conversation: ({ className, ...props }: ConversationProps) => import("react/jsx-runtime").JSX.Element;
+export type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
+export declare const ConversationContent: ({ className, ...props }: ConversationContentProps) => import("react/jsx-runtime").JSX.Element;
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+};
+export declare const ConversationEmptyState: ({ className, title, description, icon, children, ...props }: ConversationEmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+export declare const ConversationScrollButton: ({ className, ...props }: ConversationScrollButtonProps) => false | import("react/jsx-runtime").JSX.Element;
+export type ConversationDownloadProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+    messages: UIMessage[];
+    filename?: string;
+    formatMessage?: (message: UIMessage, index: number) => string;
+};
+export declare const messagesToMarkdown: (messages: UIMessage[], formatMessage?: (message: UIMessage, index: number) => string) => string;
+export declare const ConversationDownload: ({ messages, filename, formatMessage, className, children, ...props }: ConversationDownloadProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=conversation.d.ts.map

package/dist/molecules/conversation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../src/molecules/conversation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAE3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAEpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,aAAa,EAA2B,MAAM,qBAAqB,CAAC;AAE7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AAErE,eAAO,MAAM,YAAY,GAAI,yBAAyB,iBAAiB,4CAQtE,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CACnD,OAAO,aAAa,CAAC,OAAO,CAC7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,yBAGjC,wBAAwB,4CAK1B,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,6DAOpC,2BAA2B,4CAoB7B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAE1E,eAAO,MAAM,wBAAwB,GAAI,yBAGtC,6BAA6B,oDAwB/B,CAAC;AAQF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,SAAS,CACV,GAAG;IACF,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/D,CAAC;AAQF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,SAAS,EAAE,EACrB,gBAAe,CACb,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,MAAM,KACV,MAA6B,KACjC,MAAsE,CAAC;AAE1E,eAAO,MAAM,oBAAoB,GAAI,sEAOlC,yBAAyB,4CA6B3B,CAAC"}

package/dist/molecules/conversation.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@chatsdk-dev/ui/components/button";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { ArrowDownIcon, DownloadIcon } from "lucide-react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+export const Conversation = ({ className, ...props }) => (_jsx(StickToBottom, { className: cn("relative flex-1 overflow-y-hidden", className), initial: "smooth", resize: "smooth", role: "log", ...props }));
+export const ConversationContent = ({ className, ...props }) => (_jsx(StickToBottom.Content, { className: cn("flex flex-col gap-8 p-4", className), ...props }));
+export const ConversationEmptyState = ({ className, title = "No messages yet", description = "Start a conversation to see messages here", icon, children, ...props }) => (_jsx("div", { className: cn("flex size-full flex-col items-center justify-center gap-3 p-8 text-center", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [icon && _jsx("div", { className: "text-muted-foreground", children: icon }), _jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "font-medium text-sm", children: title }), description && (_jsx("p", { className: "text-muted-foreground text-sm", children: description }))] })] })) }));
+export const ConversationScrollButton = ({ className, ...props }) => {
+    const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+    const handleScrollToBottom = useCallback(() => {
+        scrollToBottom();
+    }, [scrollToBottom]);
+    return (!isAtBottom && (_jsx(Button, { className: cn("absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted", className), onClick: handleScrollToBottom, size: "icon", type: "button", variant: "outline", ...props, children: _jsx(ArrowDownIcon, { className: "size-4" }) })));
+};
+const getMessageText = (message) => message.parts
+    .filter((part) => part.type === "text")
+    .map((part) => part.text)
+    .join("");
+const defaultFormatMessage = (message) => {
+    const roleLabel = message.role.charAt(0).toUpperCase() + message.role.slice(1);
+    return `**${roleLabel}:** ${getMessageText(message)}`;
+};
+export const messagesToMarkdown = (messages, formatMessage = defaultFormatMessage) => messages.map((msg, i) => formatMessage(msg, i)).join("\n\n");
+export const ConversationDownload = ({ messages, filename = "conversation.md", formatMessage = defaultFormatMessage, className, children, ...props }) => {
+    const handleDownload = useCallback(() => {
+        const markdown = messagesToMarkdown(messages, formatMessage);
+        const blob = new Blob([markdown], { type: "text/markdown" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        document.body.append(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(url);
+    }, [messages, filename, formatMessage]);
+    return (_jsx(Button, { className: cn("absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted", className), onClick: handleDownload, size: "icon", type: "button", variant: "outline", ...props, children: children ?? _jsx(DownloadIcon, { className: "size-4" }) }));
+};

package/dist/molecules/edge.d.ts

@@ -0,0 +1,6 @@
+import type { EdgeProps } from "@xyflow/react";
+export declare const Edge: {
+    Animated: ({ id, source, target, markerEnd, style }: EdgeProps) => import("react/jsx-runtime").JSX.Element | null;
+    Temporary: ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: EdgeProps) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=edge.d.ts.map

package/dist/molecules/edge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edge.d.ts","sourceRoot":"","sources":["../../src/molecules/edge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAsB,MAAM,eAAe,CAAC;AA2InE,eAAO,MAAM,IAAI;yDAhC2C,SAAS;6FA1FlE,SAAS;CA6HX,CAAC"}

package/dist/molecules/edge.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseEdge, getBezierPath, getSimpleBezierPath, Position, useInternalNode, } from "@xyflow/react";
+const Temporary = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }) => {
+    const [edgePath] = getSimpleBezierPath({
+        sourcePosition,
+        sourceX,
+        sourceY,
+        targetPosition,
+        targetX,
+        targetY,
+    });
+    return (_jsx(BaseEdge, { className: "stroke-1 stroke-ring", id: id, path: edgePath, style: {
+            strokeDasharray: "5, 5",
+        } }));
+};
+const getHandleCoordsByPosition = (node, handlePosition) => {
+    // Choose the handle type based on position - Left is for target, Right is for source
+    const handleType = handlePosition === Position.Left ? "target" : "source";
+    const handle = node.internals.handleBounds?.[handleType]?.find((h) => h.position === handlePosition);
+    if (!handle) {
+        return [0, 0];
+    }
+    let offsetX = handle.width / 2;
+    let offsetY = handle.height / 2;
+    // this is a tiny detail to make the markerEnd of an edge visible.
+    // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
+    // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
+    switch (handlePosition) {
+        case Position.Left: {
+            offsetX = 0;
+            break;
+        }
+        case Position.Right: {
+            offsetX = handle.width;
+            break;
+        }
+        case Position.Top: {
+            offsetY = 0;
+            break;
+        }
+        case Position.Bottom: {
+            offsetY = handle.height;
+            break;
+        }
+        default: {
+            throw new Error(`Invalid handle position: ${handlePosition}`);
+        }
+    }
+    const x = node.internals.positionAbsolute.x + handle.x + offsetX;
+    const y = node.internals.positionAbsolute.y + handle.y + offsetY;
+    return [x, y];
+};
+const getEdgeParams = (source, target) => {
+    const sourcePos = Position.Right;
+    const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+    const targetPos = Position.Left;
+    const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+    return {
+        sourcePos,
+        sx,
+        sy,
+        targetPos,
+        tx,
+        ty,
+    };
+};
+const Animated = ({ id, source, target, markerEnd, style }) => {
+    const sourceNode = useInternalNode(source);
+    const targetNode = useInternalNode(target);
+    if (!(sourceNode && targetNode)) {
+        return null;
+    }
+    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
+    const [edgePath] = getBezierPath({
+        sourcePosition: sourcePos,
+        sourceX: sx,
+        sourceY: sy,
+        targetPosition: targetPos,
+        targetX: tx,
+        targetY: ty,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { id: id, markerEnd: markerEnd, path: edgePath, style: style }), _jsx("circle", { fill: "var(--primary)", r: "4", children: _jsx("animateMotion", { dur: "2s", path: edgePath, repeatCount: "indefinite" }) })] }));
+};
+export const Edge = {
+    Animated,
+    Temporary,
+};