@chatsdk-dev/ui 0.0.1 → 0.1.3

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

@@ -0,0 +1,39 @@
+import { Badge } from "@chatsdk-dev/ui/components/badge";
+import { Button } from "@chatsdk-dev/ui/components/button";
+import { Switch } from "@chatsdk-dev/ui/components/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/environment-variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"environment-variables.d.ts","sourceRoot":"","sources":["../../src/molecules/environment-variables.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAG3D,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/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/components/badge";
+import { Button } from "@chatsdk-dev/ui/components/button";
+import { Switch } from "@chatsdk-dev/ui/components/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" }));

package/dist/molecules/file-tree.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    expanded?: Set<string>;
+    defaultExpanded?: Set<string>;
+    selectedPath?: string;
+    onSelect?: (path: string) => void;
+    onExpandedChange?: (expanded: Set<string>) => void;
+};
+export declare const FileTree: ({ expanded: controlledExpanded, defaultExpanded, selectedPath, onSelect, onExpandedChange, className, children, ...props }: FileTreeProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
+export declare const FileTreeIcon: ({ className, children, ...props }: FileTreeIconProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
+export declare const FileTreeName: ({ className, children, ...props }: FileTreeNameProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+};
+export declare const FileTreeFolder: ({ path, name, className, children, ...props }: FileTreeFolderProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
+    path: string;
+    name: string;
+    icon?: ReactNode;
+};
+export declare const FileTreeFile: ({ path, name, icon, className, children, ...props }: FileTreeFileProps) => import("react/jsx-runtime").JSX.Element;
+export type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
+export declare const FileTreeActions: ({ className, children, ...props }: FileTreeActionsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-tree.d.ts.map

package/dist/molecules/file-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.d.ts","sourceRoot":"","sources":["../../src/molecules/file-tree.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BvD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,4HAStB,aAAa,4CAqCf,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEhE,eAAO,MAAM,YAAY,GAAI,mCAI1B,iBAAiB,4CAInB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEhE,eAAO,MAAM,YAAY,GAAI,mCAI1B,iBAAiB,4CAInB,CAAC;AAcF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,+CAM5B,mBAAmB,4CAuErB,CAAC;AAYF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,qDAO1B,iBAAiB,4CA8CnB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAIlE,eAAO,MAAM,eAAe,GAAI,mCAI7B,oBAAoB,4CAUtB,CAAC"}

package/dist/molecules/file-tree.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@chatsdk-dev/ui/components/collapsible";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { ChevronRightIcon, FileIcon, FolderIcon, FolderOpenIcon, } from "lucide-react";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+// Default noop for context default value
+// oxlint-disable-next-line eslint(no-empty-function)
+const noop = () => { };
+const FileTreeContext = createContext({
+    // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
+    expandedPaths: new Set(),
+    togglePath: noop,
+});
+export const FileTree = ({ expanded: controlledExpanded, defaultExpanded = new Set(), selectedPath, onSelect, onExpandedChange, className, children, ...props }) => {
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const expandedPaths = controlledExpanded ?? internalExpanded;
+    const togglePath = useCallback((path) => {
+        const newExpanded = new Set(expandedPaths);
+        if (newExpanded.has(path)) {
+            newExpanded.delete(path);
+        }
+        else {
+            newExpanded.add(path);
+        }
+        setInternalExpanded(newExpanded);
+        onExpandedChange?.(newExpanded);
+    }, [expandedPaths, onExpandedChange]);
+    const contextValue = useMemo(() => ({ expandedPaths, onSelect, selectedPath, togglePath }), [expandedPaths, onSelect, selectedPath, togglePath]);
+    return (_jsx(FileTreeContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("rounded-lg border bg-background font-mono text-sm", className), role: "tree", ...props, children: _jsx("div", { className: "p-2", children: children }) }) }));
+};
+export const FileTreeIcon = ({ className, children, ...props }) => (_jsx("span", { className: cn("shrink-0", className), ...props, children: children }));
+export const FileTreeName = ({ className, children, ...props }) => (_jsx("span", { className: cn("truncate", className), ...props, children: children }));
+const FileTreeFolderContext = createContext({
+    isExpanded: false,
+    name: "",
+    path: "",
+});
+export const FileTreeFolder = ({ path, name, className, children, ...props }) => {
+    const { expandedPaths, togglePath, selectedPath, onSelect } = useContext(FileTreeContext);
+    const isExpanded = expandedPaths.has(path);
+    const isSelected = selectedPath === path;
+    const handleOpenChange = useCallback(() => {
+        togglePath(path);
+    }, [togglePath, path]);
+    const handleSelect = useCallback(() => {
+        onSelect?.(path);
+    }, [onSelect, path]);
+    const folderContextValue = useMemo(() => ({ isExpanded, name, path }), [isExpanded, name, path]);
+    return (_jsx(FileTreeFolderContext.Provider, { value: folderContextValue, children: _jsx(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: _jsxs("div", { className: cn("", className), role: "treeitem", tabIndex: 0, ...props, children: [_jsxs("div", { className: cn("flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50", isSelected && "bg-muted"), children: [_jsx(CollapsibleTrigger, { render: () => (_jsx("button", { className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0", type: "button", children: _jsx(ChevronRightIcon, { className: cn("size-4 shrink-0 text-muted-foreground transition-transform", isExpanded && "rotate-90") }) })) }), _jsxs("button", { className: "flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left", onClick: handleSelect, type: "button", children: [_jsx(FileTreeIcon, { children: isExpanded ? (_jsx(FolderOpenIcon, { className: "size-4 text-blue-500" })) : (_jsx(FolderIcon, { className: "size-4 text-blue-500" })) }), _jsx(FileTreeName, { children: name })] })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "ml-4 border-l pl-2", children: children }) })] }) }) }));
+};
+const FileTreeFileContext = createContext({
+    name: "",
+    path: "",
+});
+export const FileTreeFile = ({ path, name, icon, className, children, ...props }) => {
+    const { selectedPath, onSelect } = useContext(FileTreeContext);
+    const isSelected = selectedPath === path;
+    const handleClick = useCallback(() => {
+        onSelect?.(path);
+    }, [onSelect, path]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            onSelect?.(path);
+        }
+    }, [onSelect, path]);
+    const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
+    return (_jsx(FileTreeFileContext.Provider, { value: fileContextValue, children: _jsx("div", { className: cn("flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50", isSelected && "bg-muted", className), onClick: handleClick, onKeyDown: handleKeyDown, role: "treeitem", tabIndex: 0, ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("span", { className: "size-4 shrink-0" }), _jsx(FileTreeIcon, { children: icon ?? _jsx(FileIcon, { className: "size-4 text-muted-foreground" }) }), _jsx(FileTreeName, { children: name })] })) }) }));
+};
+const stopPropagation = (e) => e.stopPropagation();
+export const FileTreeActions = ({ className, children, ...props }) => (_jsx("div", { className: cn("ml-auto flex items-center gap-1", className), onClick: stopPropagation, onKeyDown: stopPropagation, role: "group", ...props, children: children }));

package/dist/molecules/image.d.ts

@@ -0,0 +1,7 @@
+import type { Experimental_GeneratedImage } from "ai";
+export type ImageProps = Experimental_GeneratedImage & {
+    className?: string;
+    alt?: string;
+};
+export declare const Image: ({ base64, uint8Array: _uint8Array, mediaType, ...props }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/molecules/image.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,IAAI,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,2BAA2B,GAAG;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,0DAKnB,UAAU,4CAUZ,CAAC"}

package/dist/molecules/image.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+export const Image = ({ base64, uint8Array: _uint8Array, mediaType, ...props }) => (_jsx("img", { ...props, alt: props.alt, className: cn("h-auto max-w-full overflow-hidden rounded-md", props.className), src: `data:${mediaType};base64,${base64}` }));

package/dist/molecules/inline-citation.d.ts

@@ -0,0 +1,39 @@
+import { Badge } from "@chatsdk-dev/ui/components/badge";
+import { Carousel } from "@chatsdk-dev/ui/components/carousel";
+import { HoverCard } from "@chatsdk-dev/ui/components/hover-card";
+import type { ComponentProps } from "react";
+export type InlineCitationProps = ComponentProps<"span">;
+export declare const InlineCitation: ({ className, ...props }: InlineCitationProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationTextProps = ComponentProps<"span">;
+export declare const InlineCitationText: ({ className, ...props }: InlineCitationTextProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
+export declare const InlineCitationCard: (props: InlineCitationCardProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
+    sources: string[];
+};
+export declare const InlineCitationCardTrigger: ({ sources, className, ...props }: InlineCitationCardTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCardBodyProps = ComponentProps<"div">;
+export declare const InlineCitationCardBody: ({ className, ...props }: InlineCitationCardBodyProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
+export declare const InlineCitationCarousel: ({ className, children, ...props }: InlineCitationCarouselProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselContentProps = ComponentProps<"div">;
+export declare const InlineCitationCarouselContent: (props: InlineCitationCarouselContentProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselItemProps = ComponentProps<"div">;
+export declare const InlineCitationCarouselItem: ({ className, ...props }: InlineCitationCarouselItemProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselHeaderProps = ComponentProps<"div">;
+export declare const InlineCitationCarouselHeader: ({ className, ...props }: InlineCitationCarouselHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselIndexProps = ComponentProps<"div">;
+export declare const InlineCitationCarouselIndex: ({ children, className, ...props }: InlineCitationCarouselIndexProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselPrevProps = ComponentProps<"button">;
+export declare const InlineCitationCarouselPrev: ({ className, ...props }: InlineCitationCarouselPrevProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationCarouselNextProps = ComponentProps<"button">;
+export declare const InlineCitationCarouselNext: ({ className, ...props }: InlineCitationCarouselNextProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationSourceProps = ComponentProps<"div"> & {
+    title?: string;
+    url?: string;
+    description?: string;
+};
+export declare const InlineCitationSource: ({ title, url, description, className, children, ...props }: InlineCitationSourceProps) => import("react/jsx-runtime").JSX.Element;
+export type InlineCitationQuoteProps = ComponentProps<"blockquote">;
+export declare const InlineCitationQuote: ({ children, className, ...props }: InlineCitationQuoteProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=inline-citation.d.ts.map

package/dist/molecules/inline-citation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-citation.d.ts","sourceRoot":"","sources":["../../src/molecules/inline-citation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EACL,QAAQ,EAGT,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,SAAS,EAGV,MAAM,uCAAuC,CAAC;AAG/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAS5C,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAEzD,eAAO,MAAM,cAAc,GAAI,yBAG5B,mBAAmB,4CAKrB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,kBAAkB,GAAI,yBAGhC,uBAAuB,4CAKzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAEvE,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAEhE,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,GAAG;IAC1E,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,kCAIvC,8BAA8B,4CAmBhC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,eAAO,MAAM,sBAAsB,GAAI,yBAGpC,2BAA2B,4CAE7B,CAAC;AASF,MAAM,MAAM,2BAA2B,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE1E,eAAO,MAAM,sBAAsB,GAAI,mCAIpC,2BAA2B,4CAU7B,CAAC;AAEF,MAAM,MAAM,kCAAkC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEvE,eAAO,MAAM,6BAA6B,GACxC,OAAO,kCAAkC,4CACR,CAAC;AAEpC,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpE,eAAO,MAAM,0BAA0B,GAAI,yBAGxC,+BAA+B,4CAKjC,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtE,eAAO,MAAM,4BAA4B,GAAI,yBAG1C,iCAAiC,4CAQnC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAErE,eAAO,MAAM,2BAA2B,GAAI,mCAIzC,gCAAgC,4CAsClC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEvE,eAAO,MAAM,0BAA0B,GAAI,yBAGxC,+BAA+B,4CAoBjC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAEvE,eAAO,MAAM,0BAA0B,GAAI,yBAGxC,+BAA+B,4CAoBjC,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,4DAOlC,yBAAyB,4CAe3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;AAEpE,eAAO,MAAM,mBAAmB,GAAI,mCAIjC,wBAAwB,4CAU1B,CAAC"}

package/dist/molecules/inline-citation.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@chatsdk-dev/ui/components/badge";
+import { Carousel, CarouselContent, CarouselItem, } from "@chatsdk-dev/ui/components/carousel";
+import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@chatsdk-dev/ui/components/hover-card";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { createContext, useCallback, useContext, useEffect, useState, } from "react";
+export const InlineCitation = ({ className, ...props }) => (_jsx("span", { className: cn("group inline items-center gap-1", className), ...props }));
+export const InlineCitationText = ({ className, ...props }) => (_jsx("span", { className: cn("transition-colors group-hover:bg-accent", className), ...props }));
+export const InlineCitationCard = (props) => (_jsx(HoverCard, { ...props }));
+export const InlineCitationCardTrigger = ({ sources, className, ...props }) => (_jsx(HoverCardTrigger, { render: () => (_jsx(Badge, { className: cn("ml-1 rounded-full", className), variant: "secondary", ...props, children: sources[0] ? (_jsxs(_Fragment, { children: [new URL(sources[0]).hostname, " ", sources.length > 1 && `+${sources.length - 1}`] })) : ("unknown") })) }));
+export const InlineCitationCardBody = ({ className, ...props }) => (_jsx(HoverCardContent, { className: cn("relative w-80 p-0", className), ...props }));
+const CarouselApiContext = createContext(undefined);
+const useCarouselApi = () => {
+    const context = useContext(CarouselApiContext);
+    return context;
+};
+export const InlineCitationCarousel = ({ className, children, ...props }) => {
+    const [api, setApi] = useState();
+    return (_jsx(CarouselApiContext.Provider, { value: api, children: _jsx(Carousel, { className: cn("w-full", className), setApi: setApi, ...props, children: children }) }));
+};
+export const InlineCitationCarouselContent = (props) => _jsx(CarouselContent, { ...props });
+export const InlineCitationCarouselItem = ({ className, ...props }) => (_jsx(CarouselItem, { className: cn("w-full space-y-2 p-4 pl-8", className), ...props }));
+export const InlineCitationCarouselHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2", className), ...props }));
+export const InlineCitationCarouselIndex = ({ children, className, ...props }) => {
+    const api = useCarouselApi();
+    const [current, setCurrent] = useState(0);
+    const [count, setCount] = useState(0);
+    const syncState = useCallback(() => {
+        if (!api) {
+            return;
+        }
+        setCount(api.scrollSnapList().length);
+        setCurrent(api.selectedScrollSnap() + 1);
+    }, [api]);
+    useEffect(() => {
+        if (!api) {
+            return;
+        }
+        syncState();
+        api.on("select", syncState);
+        return () => {
+            api.off("select", syncState);
+        };
+    }, [api, syncState]);
+    return (_jsx("div", { className: cn("flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs", className), ...props, children: children ?? `${current}/${count}` }));
+};
+export const InlineCitationCarouselPrev = ({ className, ...props }) => {
+    const api = useCarouselApi();
+    const handleClick = useCallback(() => {
+        if (api) {
+            api.scrollPrev();
+        }
+    }, [api]);
+    return (_jsx("button", { "aria-label": "Previous", className: cn("shrink-0", className), onClick: handleClick, type: "button", ...props, children: _jsx(ArrowLeftIcon, { className: "size-4 text-muted-foreground" }) }));
+};
+export const InlineCitationCarouselNext = ({ className, ...props }) => {
+    const api = useCarouselApi();
+    const handleClick = useCallback(() => {
+        if (api) {
+            api.scrollNext();
+        }
+    }, [api]);
+    return (_jsx("button", { "aria-label": "Next", className: cn("shrink-0", className), onClick: handleClick, type: "button", ...props, children: _jsx(ArrowRightIcon, { className: "size-4 text-muted-foreground" }) }));
+};
+export const InlineCitationSource = ({ title, url, description, className, children, ...props }) => (_jsxs("div", { className: cn("space-y-1", className), ...props, children: [title && (_jsx("h4", { className: "truncate font-medium text-sm leading-tight", children: title })), url && (_jsx("p", { className: "truncate break-all text-muted-foreground text-xs", children: url })), description && (_jsx("p", { className: "line-clamp-3 text-muted-foreground text-sm leading-relaxed", children: description })), children] }));
+export const InlineCitationQuote = ({ children, className, ...props }) => (_jsx("blockquote", { className: cn("border-muted border-l-2 pl-3 text-muted-foreground text-sm italic", className), ...props, children: children }));

package/dist/molecules/jsx-preview.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { TProps as JsxParserProps } from "react-jsx-parser";
+interface JSXPreviewContextValue {
+    jsx: string;
+    processedJsx: string;
+    isStreaming: boolean;
+    error: Error | null;
+    setError: (error: Error | null) => void;
+    setLastGoodJsx: (jsx: string) => void;
+    components: JsxParserProps["components"];
+    bindings: JsxParserProps["bindings"];
+    onErrorProp?: (error: Error) => void;
+}
+export declare const useJSXPreview: () => JSXPreviewContextValue;
+export type JSXPreviewProps = ComponentProps<"div"> & {
+    jsx: string;
+    isStreaming?: boolean;
+    components?: JsxParserProps["components"];
+    bindings?: JsxParserProps["bindings"];
+    onError?: (error: Error) => void;
+};
+export declare const JSXPreview: import("react").MemoExoticComponent<({ jsx, isStreaming, components, bindings, onError, className, children, ...props }: JSXPreviewProps) => import("react/jsx-runtime").JSX.Element>;
+export type JSXPreviewContentProps = Omit<ComponentProps<"div">, "children">;
+export declare const JSXPreviewContent: import("react").MemoExoticComponent<({ className, ...props }: JSXPreviewContentProps) => import("react/jsx-runtime").JSX.Element>;
+export type JSXPreviewErrorProps = ComponentProps<"div"> & {
+    children?: ReactNode | ((error: Error) => ReactNode);
+};
+export declare const JSXPreviewError: import("react").MemoExoticComponent<({ className, children, ...props }: JSXPreviewErrorProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};
+//# sourceMappingURL=jsx-preview.d.ts.map

package/dist/molecules/jsx-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-preview.d.ts","sourceRoot":"","sources":["../../src/molecules/jsx-preview.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvD,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGjE,UAAU,sBAAsB;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACzC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AAMD,eAAO,MAAM,aAAa,8BAMzB,CAAC;AAqFF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,UAAU,2HAUlB,eAAe,6CAgDnB,CAAC;AAIF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7E,eAAO,MAAM,iBAAiB,gEACF,sBAAsB,6CAgEjD,CAAC;AAIF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC;CACtD,CAAC;AAYF,eAAO,MAAM,eAAe,0EACU,oBAAoB,oDA0BzD,CAAC"}

package/dist/molecules/jsx-preview.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+import { AlertCircle } from "lucide-react";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import JsxParser from "react-jsx-parser";
+const JSXPreviewContext = createContext(null);
+const TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/;
+export const useJSXPreview = () => {
+    const context = useContext(JSXPreviewContext);
+    if (!context) {
+        throw new Error("JSXPreview components must be used within JSXPreview");
+    }
+    return context;
+};
+const matchJsxTag = (code) => {
+    if (code.trim() === "") {
+        return null;
+    }
+    const match = code.match(TAG_REGEX);
+    if (!match || match.index === undefined) {
+        return null;
+    }
+    const [fullMatch, tagName, attributes, selfClosing] = match;
+    let type;
+    if (selfClosing) {
+        type = "self-closing";
+    }
+    else if (fullMatch.startsWith("</")) {
+        type = "closing";
+    }
+    else {
+        type = "opening";
+    }
+    return {
+        attributes: attributes?.trim(),
+        endIndex: match.index + fullMatch.length,
+        startIndex: match.index,
+        tag: fullMatch,
+        tagName,
+        type,
+    };
+};
+const stripIncompleteTag = (text) => {
+    // Find the last '<' that isn't part of a complete tag
+    const lastOpen = text.lastIndexOf("<");
+    if (lastOpen === -1) {
+        return text;
+    }
+    const afterOpen = text.slice(lastOpen);
+    // If there's no closing '>' after the last '<', it's an incomplete tag
+    if (!afterOpen.includes(">")) {
+        return text.slice(0, lastOpen);
+    }
+    return text;
+};
+const completeJsxTag = (code) => {
+    const stack = [];
+    let result = "";
+    let currentPosition = 0;
+    while (currentPosition < code.length) {
+        const match = matchJsxTag(code.slice(currentPosition));
+        if (!match) {
+            // No more tags found, strip any trailing incomplete tag
+            result += stripIncompleteTag(code.slice(currentPosition));
+            break;
+        }
+        const { tagName, type, endIndex } = match;
+        // Include any text content before this tag
+        result += code.slice(currentPosition, currentPosition + endIndex);
+        if (type === "opening") {
+            stack.push(tagName ?? "");
+        }
+        else if (type === "closing") {
+            stack.pop();
+        }
+        currentPosition += endIndex;
+    }
+    return (result +
+        stack
+            .reverse()
+            .map((tag) => `</${tag}>`)
+            .join(""));
+};
+export const JSXPreview = memo(({ jsx, isStreaming = false, components, bindings, onError, className, children, ...props }) => {
+    const [prevJsx, setPrevJsx] = useState(jsx);
+    const [error, setError] = useState(null);
+    const [_lastGoodJsx, setLastGoodJsx] = useState("");
+    // Clear error when jsx changes (derived state pattern)
+    if (jsx !== prevJsx) {
+        setPrevJsx(jsx);
+        setError(null);
+    }
+    const processedJsx = useMemo(() => (isStreaming ? completeJsxTag(jsx) : jsx), [jsx, isStreaming]);
+    const contextValue = useMemo(() => ({
+        bindings,
+        components,
+        error,
+        isStreaming,
+        jsx,
+        onErrorProp: onError,
+        processedJsx,
+        setError,
+        setLastGoodJsx,
+    }), [
+        bindings,
+        components,
+        error,
+        isStreaming,
+        jsx,
+        onError,
+        processedJsx,
+        setError,
+    ]);
+    return (_jsx(JSXPreviewContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("relative", className), ...props, children: children }) }));
+});
+JSXPreview.displayName = "JSXPreview";
+export const JSXPreviewContent = memo(({ className, ...props }) => {
+    const { processedJsx, isStreaming, components, bindings, setError, setLastGoodJsx, onErrorProp, } = useJSXPreview();
+    const errorReportedRef = useRef(null);
+    const lastGoodJsxRef = useRef("");
+    const [hadError, setHadError] = useState(false);
+    // Reset error tracking when jsx changes
+    useEffect(() => {
+        errorReportedRef.current = null;
+        setHadError(false);
+    }, [processedJsx]);
+    const handleError = useCallback((err) => {
+        // Prevent duplicate error reports for the same jsx
+        if (errorReportedRef.current === processedJsx) {
+            return;
+        }
+        errorReportedRef.current = processedJsx;
+        // During streaming, suppress errors and fall back to last good JSX
+        if (isStreaming) {
+            setHadError(true);
+            return;
+        }
+        setError(err);
+        onErrorProp?.(err);
+    }, [processedJsx, isStreaming, onErrorProp, setError]);
+    // Track the last JSX that rendered without error
+    useEffect(() => {
+        if (!errorReportedRef.current) {
+            lastGoodJsxRef.current = processedJsx;
+            setLastGoodJsx(processedJsx);
+        }
+    }, [processedJsx, setLastGoodJsx]);
+    // During streaming, if the current JSX errored, re-render with last good version
+    const displayJsx = isStreaming && hadError ? lastGoodJsxRef.current : processedJsx;
+    return (_jsx("div", { className: cn("jsx-preview-content", className), ...props, children: _jsx(JsxParser, { bindings: bindings, components: components, jsx: displayJsx, onError: handleError, renderInWrapper: false }) }));
+});
+JSXPreviewContent.displayName = "JSXPreviewContent";
+const renderChildren = (children, error) => {
+    if (typeof children === "function") {
+        return children(error);
+    }
+    return children;
+};
+export const JSXPreviewError = memo(({ className, children, ...props }) => {
+    const { error } = useJSXPreview();
+    if (!error) {
+        return null;
+    }
+    return (_jsx("div", { className: cn("flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm", className), ...props, children: children ? (renderChildren(children, error)) : (_jsxs(_Fragment, { children: [_jsx(AlertCircle, { className: "size-4 shrink-0" }), _jsx("span", { children: error.message })] })) }));
+});
+JSXPreviewError.displayName = "JSXPreviewError";

package/dist/molecules/loader.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+    size?: number;
+};
+export declare const Loader: ({ className, size, ...props }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../src/molecules/loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAkF5C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,+BAAoC,WAAW,4CAUrE,CAAC"}

package/dist/molecules/loader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+const LoaderIcon = ({ size = 16 }) => (_jsxs("svg", { height: size, strokeLinejoin: "round", style: { color: "currentcolor" }, viewBox: "0 0 16 16", width: size, children: [_jsx("title", { children: "Loader" }), _jsxs("g", { clipPath: "url(#clip0_2393_1490)", children: [_jsx("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 16V12", opacity: "0.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M3.29773 1.52783L5.64887 4.7639", opacity: "0.9", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M12.7023 1.52783L10.3511 4.7639", opacity: "0.1", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M12.7023 14.472L10.3511 11.236", opacity: "0.4", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M3.29773 14.472L5.64887 11.236", opacity: "0.6", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M15.6085 5.52783L11.8043 6.7639", opacity: "0.2", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M0.391602 10.472L4.19583 9.23598", opacity: "0.7", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M15.6085 10.4722L11.8043 9.2361", opacity: "0.3", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M0.391602 5.52783L4.19583 6.7639", opacity: "0.8", stroke: "currentColor", strokeWidth: "1.5" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_2393_1490", children: _jsx("rect", { fill: "white", height: "16", width: "16" }) }) })] }));
+export const Loader = ({ className, size = 16, ...props }) => (_jsx("div", { className: cn("inline-flex animate-spin items-center justify-center", className), ...props, children: _jsx(LoaderIcon, { size: size }) }));