@chatsdk-dev/ui 0.0.1 → 0.1.2

package/dist/molecules/ai/confirmation.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, AlertDescription } from "@chatsdk-dev/ui/atoms/alert";
+import { Button } from "@chatsdk-dev/ui/atoms/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/ai/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/ai/connection.d.ts.map

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

package/dist/molecules/ai/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/ai/context.d.ts

@@ -0,0 +1,33 @@
+import { Button } from "@chatsdk-dev/ui/atoms/button";
+import { HoverCard, HoverCardContent } from "@chatsdk-dev/ui/atoms/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/ai/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EACL,SAAS,EACT,gBAAgB,EAEjB,MAAM,kCAAkC,CAAC;AAG1C,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/ai/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/atoms/button";
+import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@chatsdk-dev/ui/atoms/hover-card";
+import { Progress } from "@chatsdk-dev/ui/atoms/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/ai/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/ai/controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/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/ai/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/ai/conversation.d.ts

@@ -0,0 +1,24 @@
+import { Button } from "@chatsdk-dev/ui/atoms/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/ai/conversation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/conversation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAEtD,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/ai/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/atoms/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/ai/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/ai/edge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edge.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/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/ai/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,
+};

package/dist/molecules/ai/environment-variables.d.ts

@@ -0,0 +1,39 @@
+import { Badge } from "@chatsdk-dev/ui/atoms/badge";
+import { Button } from "@chatsdk-dev/ui/atoms/button";
+import { Switch } from "@chatsdk-dev/ui/atoms/switch";
+import type { ComponentProps, HTMLAttributes } from "react";
+export type EnvironmentVariablesProps = HTMLAttributes<HTMLDivElement> & {
+    showValues?: boolean;
+    defaultShowValues?: boolean;
+    onShowValuesChange?: (show: boolean) => void;
+};
+export declare const EnvironmentVariables: ({ showValues: controlledShowValues, defaultShowValues, onShowValuesChange, className, children, ...props }: EnvironmentVariablesProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariablesHeaderProps = HTMLAttributes<HTMLDivElement>;
+export declare const EnvironmentVariablesHeader: ({ className, children, ...props }: EnvironmentVariablesHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariablesTitleProps = HTMLAttributes<HTMLHeadingElement>;
+export declare const EnvironmentVariablesTitle: ({ className, children, ...props }: EnvironmentVariablesTitleProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariablesToggleProps = ComponentProps<typeof Switch>;
+export declare const EnvironmentVariablesToggle: ({ className, ...props }: EnvironmentVariablesToggleProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariablesContentProps = HTMLAttributes<HTMLDivElement>;
+export declare const EnvironmentVariablesContent: ({ className, children, ...props }: EnvironmentVariablesContentProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariableGroupProps = HTMLAttributes<HTMLDivElement>;
+export declare const EnvironmentVariableGroup: ({ className, children, ...props }: EnvironmentVariableGroupProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariableNameProps = HTMLAttributes<HTMLSpanElement>;
+export declare const EnvironmentVariableName: ({ className, children, ...props }: EnvironmentVariableNameProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariableValueProps = HTMLAttributes<HTMLSpanElement>;
+export declare const EnvironmentVariableValue: ({ className, children, ...props }: EnvironmentVariableValueProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariableProps = HTMLAttributes<HTMLDivElement> & {
+    name: string;
+    value: string;
+};
+export declare const EnvironmentVariable: ({ name, value, className, children, ...props }: EnvironmentVariableProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariableCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+    copyFormat?: "name" | "value" | "export";
+};
+export declare const EnvironmentVariableCopyButton: ({ onCopy, onError, timeout, copyFormat, children, className, ...props }: EnvironmentVariableCopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export type EnvironmentVariableRequiredProps = ComponentProps<typeof Badge>;
+export declare const EnvironmentVariableRequired: ({ className, children, ...props }: EnvironmentVariableRequiredProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=environment-variables.d.ts.map

package/dist/molecules/ai/environment-variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"environment-variables.d.ts","sourceRoot":"","sources":["../../../src/molecules/ai/environment-variables.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA0B5D,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,4GAOlC,yBAAyB,4CA4B3B,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE7E,eAAO,MAAM,0BAA0B,GAAI,mCAIxC,+BAA+B,4CAUjC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEhF,eAAO,MAAM,yBAAyB,GAAI,mCAIvC,8BAA8B,4CAIhC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAE5E,eAAO,MAAM,0BAA0B,GAAI,yBAGxC,+BAA+B,4CAgBjC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE9E,eAAO,MAAM,2BAA2B,GAAI,mCAIzC,gCAAgC,4CAIlC,CAAC;AAaF,MAAM,MAAM,6BAA6B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3E,eAAO,MAAM,wBAAwB,GAAI,mCAItC,6BAA6B,4CAI/B,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE3E,eAAO,MAAM,uBAAuB,GAAI,mCAIrC,4BAA4B,4CAQ9B,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE5E,eAAO,MAAM,wBAAwB,GAAI,mCAItC,6BAA6B,4CAoB/B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,gDAMjC,wBAAwB,4CAuB1B,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,cAAc,CAC7D,OAAO,MAAM,CACd,GAAG;IACF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,6BAA6B,GAAI,yEAQ3C,kCAAkC,4CAkDpC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE5E,eAAO,MAAM,2BAA2B,GAAI,mCAIzC,gCAAgC,4CAIlC,CAAC"}

package/dist/molecules/ai/environment-variables.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from "@chatsdk-dev/ui/atoms/badge";
+import { Button } from "@chatsdk-dev/ui/atoms/button";
+import { Switch } from "@chatsdk-dev/ui/atoms/switch";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+// Default noop for context default value
+// oxlint-disable-next-line eslint(no-empty-function)
+const noop = () => { };
+const EnvironmentVariablesContext = createContext({
+    setShowValues: noop,
+    showValues: false,
+});
+export const EnvironmentVariables = ({ showValues: controlledShowValues, defaultShowValues = false, onShowValuesChange, className, children, ...props }) => {
+    const [internalShowValues, setInternalShowValues] = useState(defaultShowValues);
+    const showValues = controlledShowValues ?? internalShowValues;
+    const setShowValues = useCallback((show) => {
+        setInternalShowValues(show);
+        onShowValuesChange?.(show);
+    }, [onShowValuesChange]);
+    const contextValue = useMemo(() => ({ setShowValues, showValues }), [setShowValues, showValues]);
+    return (_jsx(EnvironmentVariablesContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("rounded-lg border bg-background", className), ...props, children: children }) }));
+};
+export const EnvironmentVariablesHeader = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center justify-between border-b px-4 py-3", className), ...props, children: children }));
+export const EnvironmentVariablesTitle = ({ className, children, ...props }) => (_jsx("h3", { className: cn("font-medium text-sm", className), ...props, children: children ?? "Environment Variables" }));
+export const EnvironmentVariablesToggle = ({ className, ...props }) => {
+    const { showValues, setShowValues } = useContext(EnvironmentVariablesContext);
+    return (_jsxs("div", { className: cn("flex items-center gap-2", className), children: [_jsx("span", { className: "text-muted-foreground text-xs", children: showValues ? _jsx(EyeIcon, { size: 14 }) : _jsx(EyeOffIcon, { size: 14 }) }), _jsx(Switch, { "aria-label": "Toggle value visibility", checked: showValues, onCheckedChange: setShowValues, ...props })] }));
+};
+export const EnvironmentVariablesContent = ({ className, children, ...props }) => (_jsx("div", { className: cn("divide-y", className), ...props, children: children }));
+const EnvironmentVariableContext = createContext({
+    name: "",
+    value: "",
+});
+export const EnvironmentVariableGroup = ({ className, children, ...props }) => (_jsx("div", { className: cn("flex items-center gap-2", className), ...props, children: children }));
+export const EnvironmentVariableName = ({ className, children, ...props }) => {
+    const { name } = useContext(EnvironmentVariableContext);
+    return (_jsx("span", { className: cn("font-mono text-sm", className), ...props, children: children ?? name }));
+};
+export const EnvironmentVariableValue = ({ className, children, ...props }) => {
+    const { value } = useContext(EnvironmentVariableContext);
+    const { showValues } = useContext(EnvironmentVariablesContext);
+    const displayValue = showValues
+        ? value
+        : "•".repeat(Math.min(value.length, 20));
+    return (_jsx("span", { className: cn("font-mono text-muted-foreground text-sm", !showValues && "select-none", className), ...props, children: children ?? displayValue }));
+};
+export const EnvironmentVariable = ({ name, value, className, children, ...props }) => {
+    const envVarContextValue = useMemo(() => ({ name, value }), [name, value]);
+    return (_jsx(EnvironmentVariableContext.Provider, { value: envVarContextValue, children: _jsx("div", { className: cn("flex items-center justify-between gap-4 px-4 py-3", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx(EnvironmentVariableName, {}) }), _jsx(EnvironmentVariableValue, {})] })) }) }));
+};
+export const EnvironmentVariableCopyButton = ({ onCopy, onError, timeout = 2000, copyFormat = "value", children, className, ...props }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const timeoutRef = useRef(0);
+    const { name, value } = useContext(EnvironmentVariableContext);
+    const getTextToCopy = useCallback(() => {
+        const formatMap = {
+            export: () => `export ${name}="${value}"`,
+            name: () => name,
+            value: () => value,
+        };
+        return formatMap[copyFormat]();
+    }, [name, value, copyFormat]);
+    const copyToClipboard = useCallback(async () => {
+        if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+            onError?.(new Error("Clipboard API not available"));
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(getTextToCopy());
+            setIsCopied(true);
+            onCopy?.();
+            timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+        }
+        catch (error) {
+            onError?.(error);
+        }
+    }, [getTextToCopy, onCopy, onError, timeout]);
+    useEffect(() => () => {
+        window.clearTimeout(timeoutRef.current);
+    }, []);
+    const Icon = isCopied ? CheckIcon : CopyIcon;
+    return (_jsx(Button, { className: cn("size-6 shrink-0", className), onClick: copyToClipboard, size: "icon", variant: "ghost", ...props, children: children ?? _jsx(Icon, { size: 12 }) }));
+};
+export const EnvironmentVariableRequired = ({ className, children, ...props }) => (_jsx(Badge, { className: cn("text-xs", className), variant: "secondary", ...props, children: children ?? "Required" }));