@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/queue.d.ts

@@ -0,0 +1,65 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Collapsible, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { ScrollArea } from '@chatsdk-dev/ui/components/scroll-area';
+import { ComponentProps } from 'react';
+
+interface QueueMessagePart {
+    type: string;
+    text?: string;
+    url?: string;
+    filename?: string;
+    mediaType?: string;
+}
+interface QueueMessage {
+    id: string;
+    parts: QueueMessagePart[];
+}
+interface QueueTodo {
+    id: string;
+    title: string;
+    description?: string;
+    status?: "pending" | "completed";
+}
+type QueueItemProps = ComponentProps<"li">;
+declare const QueueItem: ({ className, ...props }: QueueItemProps) => react_jsx_runtime.JSX.Element;
+type QueueItemIndicatorProps = ComponentProps<"span"> & {
+    completed?: boolean;
+};
+declare const QueueItemIndicator: ({ completed, className, ...props }: QueueItemIndicatorProps) => react_jsx_runtime.JSX.Element;
+type QueueItemContentProps = ComponentProps<"span"> & {
+    completed?: boolean;
+};
+declare const QueueItemContent: ({ completed, className, ...props }: QueueItemContentProps) => react_jsx_runtime.JSX.Element;
+type QueueItemDescriptionProps = ComponentProps<"div"> & {
+    completed?: boolean;
+};
+declare const QueueItemDescription: ({ completed, className, ...props }: QueueItemDescriptionProps) => react_jsx_runtime.JSX.Element;
+type QueueItemActionsProps = ComponentProps<"div">;
+declare const QueueItemActions: ({ className, ...props }: QueueItemActionsProps) => react_jsx_runtime.JSX.Element;
+type QueueItemActionProps = Omit<ComponentProps<typeof Button>, "variant" | "size">;
+declare const QueueItemAction: ({ className, ...props }: QueueItemActionProps) => react_jsx_runtime.JSX.Element;
+type QueueItemAttachmentProps = ComponentProps<"div">;
+declare const QueueItemAttachment: ({ className, ...props }: QueueItemAttachmentProps) => react_jsx_runtime.JSX.Element;
+type QueueItemImageProps = ComponentProps<"img">;
+declare const QueueItemImage: ({ className, ...props }: QueueItemImageProps) => react_jsx_runtime.JSX.Element;
+type QueueItemFileProps = ComponentProps<"span">;
+declare const QueueItemFile: ({ children, className, ...props }: QueueItemFileProps) => react_jsx_runtime.JSX.Element;
+type QueueListProps = ComponentProps<typeof ScrollArea>;
+declare const QueueList: ({ children, className, ...props }: QueueListProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionProps = ComponentProps<typeof Collapsible>;
+declare const QueueSection: ({ className, defaultOpen, ...props }: QueueSectionProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionTriggerProps = ComponentProps<"button">;
+declare const QueueSectionTrigger: ({ children, className, ...props }: QueueSectionTriggerProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionLabelProps = ComponentProps<"span"> & {
+    count?: number;
+    label: string;
+    icon?: React.ReactNode;
+};
+declare const QueueSectionLabel: ({ count, label, icon, className, ...props }: QueueSectionLabelProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const QueueSectionContent: ({ className, ...props }: QueueSectionContentProps) => react_jsx_runtime.JSX.Element;
+type QueueProps = ComponentProps<"div">;
+declare const Queue: ({ className, ...props }: QueueProps) => react_jsx_runtime.JSX.Element;
+
+export { Queue, QueueItem, QueueItemAction, type QueueItemActionProps, QueueItemActions, type QueueItemActionsProps, QueueItemAttachment, type QueueItemAttachmentProps, QueueItemContent, type QueueItemContentProps, QueueItemDescription, type QueueItemDescriptionProps, QueueItemFile, type QueueItemFileProps, QueueItemImage, type QueueItemImageProps, QueueItemIndicator, type QueueItemIndicatorProps, type QueueItemProps, QueueList, type QueueListProps, type QueueMessage, type QueueMessagePart, type QueueProps, QueueSection, QueueSectionContent, type QueueSectionContentProps, QueueSectionLabel, type QueueSectionLabelProps, type QueueSectionProps, QueueSectionTrigger, type QueueSectionTriggerProps, type QueueTodo };

package/dist/components/ai-elements/queue.js

@@ -0,0 +1,179 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { ScrollArea } from '@chatsdk-dev/ui/components/scroll-area';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { PaperclipIcon, ChevronDownIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var QueueItem = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    className: cn(
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "mt-0.5 inline-block size-2.5 rounded-full border",
+      completed ? "border-muted-foreground/20 bg-muted-foreground/10" : "border-muted-foreground/50",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "line-clamp-1 grow break-words",
+      completed ? "text-muted-foreground/50 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemDescription = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "ml-6 text-xs",
+      completed ? "text-muted-foreground/40 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var QueueItemActions = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex gap-1", className), ...props });
+var QueueItemAction = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    className: cn(
+      "size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",
+      className
+    ),
+    size: "icon",
+    type: "button",
+    variant: "ghost",
+    ...props
+  }
+);
+var QueueItemAttachment = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("mt-1 flex flex-wrap gap-2", className), ...props });
+var QueueItemImage = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    alt: "",
+    className: cn("h-8 w-8 rounded border object-cover", className),
+    height: 32,
+    width: 32,
+    ...props
+  }
+);
+var QueueItemFile = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    className: cn(
+      "flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(PaperclipIcon, { size: 12 }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate", children })
+    ]
+  }
+);
+var QueueList = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(ScrollArea, { className: cn("mt-2 -mb-1", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "max-h-40 pr-4", children: /* @__PURE__ */ jsx("ul", { children }) }) });
+var QueueSection = ({
+  className,
+  defaultOpen = true,
+  ...props
+}) => /* @__PURE__ */ jsx(Collapsible, { className: cn(className), defaultOpen, ...props });
+var QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleTrigger,
+  {
+    render: () => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(
+          "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+          className
+        ),
+        type: "button",
+        ...props,
+        children
+      }
+    )
+  }
+);
+var QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-2", className), ...props, children: [
+  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 transition-transform group-data-[state=closed]:-rotate-90" }),
+  icon,
+  /* @__PURE__ */ jsxs("span", { children: [
+    count,
+    " ",
+    label
+  ] })
+] });
+var QueueSectionContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleContent, { className: cn(className), ...props });
+var Queue = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      className
+    ),
+    ...props
+  }
+);
+
+export { Queue, QueueItem, QueueItemAction, QueueItemActions, QueueItemAttachment, QueueItemContent, QueueItemDescription, QueueItemFile, QueueItemImage, QueueItemIndicator, QueueList, QueueSection, QueueSectionContent, QueueSectionLabel, QueueSectionTrigger };

package/dist/components/ai-elements/reasoning.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@chatsdk-dev/ui/components/collapsible';
+
+interface ReasoningContextValue {
+    isStreaming: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    duration: number | undefined;
+}
+declare const useReasoning: () => ReasoningContextValue;
+type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+};
+declare const Reasoning: react.MemoExoticComponent<({ className, isStreaming, open, defaultOpen, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => react_jsx_runtime.JSX.Element>;
+type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+declare const ReasoningTrigger: react.MemoExoticComponent<({ className, children, getThinkingMessage, ...props }: ReasoningTriggerProps) => react_jsx_runtime.JSX.Element>;
+type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
+    children: string;
+};
+declare const ReasoningContent: react.MemoExoticComponent<({ className, children, ...props }: ReasoningContentProps) => react_jsx_runtime.JSX.Element>;
+
+export { Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, useReasoning };

package/dist/components/ai-elements/reasoning.js

@@ -0,0 +1,161 @@
+import { Shimmer } from '../../chunk-NIC3MOMY.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { cjk } from '@streamdown/cjk';
+import { code } from '@streamdown/code';
+import { math } from '@streamdown/math';
+import { mermaid } from '@streamdown/mermaid';
+import { BrainIcon, ChevronDownIcon } from 'lucide-react';
+import { createContext, memo, useRef, useState, useEffect, useCallback, useMemo, useContext } from 'react';
+import { Streamdown } from 'streamdown';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ReasoningContext = createContext(null);
+var useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+var AUTO_CLOSE_DELAY = 1e3;
+var MS_IN_S = 1e3;
+var Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }) => {
+    const resolvedDefaultOpen = defaultOpen ?? isStreaming;
+    const isExplicitlyClosed = defaultOpen === false;
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: resolvedDefaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const [duration, setDuration] = useControllableState({
+      defaultProp: void 0,
+      prop: durationProp
+    });
+    const hasEverStreamedRef = useRef(isStreaming);
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const startTimeRef = useRef(null);
+    useEffect(() => {
+      if (isStreaming) {
+        hasEverStreamedRef.current = true;
+        if (startTimeRef.current === null) {
+          startTimeRef.current = Date.now();
+        }
+      } else if (startTimeRef.current !== null) {
+        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+        startTimeRef.current = null;
+      }
+    }, [isStreaming, setDuration]);
+    useEffect(() => {
+      if (isStreaming && !isOpen && !isExplicitlyClosed) {
+        setIsOpen(true);
+      }
+    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+    useEffect(() => {
+      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
+    const handleOpenChange = useCallback(
+      (newOpen) => {
+        setIsOpen(newOpen);
+      },
+      [setIsOpen]
+    );
+    const contextValue = useMemo(
+      () => ({ duration, isOpen, isStreaming, setIsOpen }),
+      [duration, isOpen, isStreaming, setIsOpen]
+    );
+    return /* @__PURE__ */ jsx(ReasoningContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      Collapsible,
+      {
+        className: cn("not-prose mb-4", className),
+        onOpenChange: handleOpenChange,
+        open: isOpen,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var defaultGetThinkingMessage = (isStreaming, duration) => {
+  if (isStreaming || duration === 0) {
+    return /* @__PURE__ */ jsx(Shimmer, { duration: 1, children: "Thinking..." });
+  }
+  if (duration === void 0) {
+    return /* @__PURE__ */ jsx("p", { children: "Thought for a few seconds" });
+  }
+  return /* @__PURE__ */ jsxs("p", { children: [
+    "Thought for ",
+    duration,
+    " seconds"
+  ] });
+};
+var ReasoningTrigger = memo(
+  ({
+    className,
+    children,
+    getThinkingMessage = defaultGetThinkingMessage,
+    ...props
+  }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+    return /* @__PURE__ */ jsx(
+      CollapsibleTrigger,
+      {
+        className: cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(BrainIcon, { className: "size-4" }),
+          getThinkingMessage(isStreaming, duration),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var streamdownPlugins = { cjk, code, math, mermaid };
+var ReasoningContent = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+    CollapsibleContent,
+    {
+      className: cn(
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Streamdown, { plugins: streamdownPlugins, children })
+    }
+  )
+);
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
+
+export { Reasoning, ReasoningContent, ReasoningTrigger, useReasoning };

package/dist/components/ai-elements/response.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Streamdown } from 'streamdown';
+
+type ResponseProps = ComponentProps<typeof Streamdown>;
+declare const Response: react.MemoExoticComponent<({ className, ...props }: ResponseProps) => react_jsx_runtime.JSX.Element>;
+
+export { Response };

package/dist/components/ai-elements/response.js

@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import { Streamdown } from 'streamdown';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { jsx } from 'react/jsx-runtime';
+
+var Response = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx(
+    Streamdown,
+    {
+      className: cn(
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        // "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        // "[&_p]:my-2 [&_p]:leading-relaxed",
+        // "[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-sm [&_h1]:font-bold [&_h1:first-child]:mt-0",
+        // "[&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:text-xs! [&_h2]:font-bold [&_h2:first-child]:mt-0",
+        // "[&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-xs! [&_h3]:font-semibold [&_h3:first-child]:mt-0",
+        // "[&_h4]:mt-2 [&_h4]:mb-1 [&_h4]:text-xs! [&_h4]:font-medium [&_h4:first-child]:mt-0",
+        "[&_ul]:list-disc [&_ul]:pl-4",
+        "[&_ol]:list-decimal [&_ol]:pl-4",
+        "[&_li]:pl-1 [&_li]:leading-relaxed [&_li_p]:inline",
+        // "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_table]:text-[12px]",
+        // "[&_th]:border-border [&_th]:border-b [&_th]:p-1.5 [&_th]:text-left [&_th]:text-[12px] [&_th]:font-semibold",
+        // "[&_td]:border-border [&_td]:border-b [&_td]:p-1.5 [&_td]:text-[12px]",
+        className
+      ),
+      ...props
+    }
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+Response.displayName = "Response";
+
+export { Response };

package/dist/components/ai-elements/sandbox.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { TabsContent, Tabs, TabsList, TabsTrigger } from '@chatsdk-dev/ui/components/tabs';
+import { ToolUIPart } from 'ai';
+import { ComponentProps } from 'react';
+
+type SandboxRootProps = ComponentProps<typeof Collapsible>;
+declare const Sandbox: ({ className, ...props }: SandboxRootProps) => react_jsx_runtime.JSX.Element;
+interface SandboxHeaderProps {
+    title?: string;
+    state: ToolUIPart["state"];
+    className?: string;
+}
+declare const SandboxHeader: ({ className, title, state, ...props }: SandboxHeaderProps) => react_jsx_runtime.JSX.Element;
+type SandboxContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const SandboxContent: ({ className, ...props }: SandboxContentProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsProps = ComponentProps<typeof Tabs>;
+declare const SandboxTabs: ({ className, ...props }: SandboxTabsProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsBarProps = ComponentProps<"div">;
+declare const SandboxTabsBar: ({ className, ...props }: SandboxTabsBarProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsListProps = ComponentProps<typeof TabsList>;
+declare const SandboxTabsList: ({ className, ...props }: SandboxTabsListProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabsTriggerProps = ComponentProps<typeof TabsTrigger>;
+declare const SandboxTabsTrigger: ({ className, ...props }: SandboxTabsTriggerProps) => react_jsx_runtime.JSX.Element;
+type SandboxTabContentProps = ComponentProps<typeof TabsContent>;
+declare const SandboxTabContent: ({ className, ...props }: SandboxTabContentProps) => react_jsx_runtime.JSX.Element;
+
+export { Sandbox, SandboxContent, type SandboxContentProps, SandboxHeader, type SandboxHeaderProps, type SandboxRootProps, SandboxTabContent, type SandboxTabContentProps, SandboxTabs, SandboxTabsBar, type SandboxTabsBarProps, SandboxTabsList, type SandboxTabsListProps, type SandboxTabsProps, SandboxTabsTrigger, type SandboxTabsTriggerProps };

package/dist/components/ai-elements/sandbox.js

@@ -0,0 +1,98 @@
+import { getStatusBadge } from '../../chunk-X5YUF2YM.js';
+import '../../chunk-CFM57HOS.js';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@chatsdk-dev/ui/components/tabs';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { Code, ChevronDownIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Sandbox = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn(
+      "not-prose group mb-4 w-full overflow-hidden rounded-md border",
+      className
+    ),
+    defaultOpen: true,
+    ...props
+  }
+);
+var SandboxHeader = ({
+  className,
+  title,
+  state,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  CollapsibleTrigger,
+  {
+    className: cn(
+      "flex w-full items-center justify-between gap-4 p-3",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Code, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: title }),
+        getStatusBadge(state)
+      ] }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+    ]
+  }
+);
+var SandboxContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleContent,
+  {
+    className: cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+var SandboxTabs = ({ className, ...props }) => /* @__PURE__ */ jsx(Tabs, { className: cn("w-full gap-0", className), ...props });
+var SandboxTabsBar = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex w-full items-center border-border border-t border-b",
+      className
+    ),
+    ...props
+  }
+);
+var SandboxTabsList = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  TabsList,
+  {
+    className: cn("h-auto rounded-none border-0 bg-transparent p-0", className),
+    ...props
+  }
+);
+var SandboxTabsTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  TabsTrigger,
+  {
+    className: cn(
+      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+      className
+    ),
+    ...props
+  }
+);
+var SandboxTabContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(TabsContent, { className: cn("mt-0 text-sm", className), ...props });
+
+export { Sandbox, SandboxContent, SandboxHeader, SandboxTabContent, SandboxTabs, SandboxTabsBar, SandboxTabsList, SandboxTabsTrigger };

package/dist/components/ai-elements/schema-display.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { Collapsible } from '@chatsdk-dev/ui/components/collapsible';
+import { HTMLAttributes, ComponentProps } from 'react';
+
+type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+interface SchemaParameter {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    location?: "path" | "query" | "header";
+}
+interface SchemaProperty {
+    name: string;
+    type: string;
+    required?: boolean;
+    description?: string;
+    properties?: SchemaProperty[];
+    items?: SchemaProperty;
+}
+type SchemaDisplayHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const SchemaDisplayHeader: ({ className, children, ...props }: SchemaDisplayHeaderProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayMethodProps = ComponentProps<typeof Badge>;
+declare const SchemaDisplayMethod: ({ className, children, ...props }: SchemaDisplayMethodProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayPathProps = HTMLAttributes<HTMLSpanElement>;
+declare const SchemaDisplayPath: ({ className, children, ...props }: SchemaDisplayPathProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+declare const SchemaDisplayDescription: ({ className, children, ...props }: SchemaDisplayDescriptionProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayContentProps = HTMLAttributes<HTMLDivElement>;
+declare const SchemaDisplayContent: ({ className, children, ...props }: SchemaDisplayContentProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayParameterProps = HTMLAttributes<HTMLDivElement> & SchemaParameter;
+declare const SchemaDisplayParameter: ({ name, type, required, description, location, className, ...props }: SchemaDisplayParameterProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayParametersProps = ComponentProps<typeof Collapsible>;
+declare const SchemaDisplayParameters: ({ className, children, ...props }: SchemaDisplayParametersProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayPropertyProps = HTMLAttributes<HTMLDivElement> & SchemaProperty & {
+    depth?: number;
+};
+declare const SchemaDisplayProperty: ({ name, type, required, description, properties, items, depth, className, ...props }: SchemaDisplayPropertyProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayRequestProps = ComponentProps<typeof Collapsible>;
+declare const SchemaDisplayRequest: ({ className, children, ...props }: SchemaDisplayRequestProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayResponseProps = ComponentProps<typeof Collapsible>;
+declare const SchemaDisplayResponse: ({ className, children, ...props }: SchemaDisplayResponseProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayProps = HTMLAttributes<HTMLDivElement> & {
+    method: HttpMethod;
+    path: string;
+    description?: string;
+    parameters?: SchemaParameter[];
+    requestBody?: SchemaProperty[];
+    responseBody?: SchemaProperty[];
+};
+declare const SchemaDisplay: ({ method, path, description, parameters, requestBody, responseBody, className, children, ...props }: SchemaDisplayProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayBodyProps = HTMLAttributes<HTMLDivElement>;
+declare const SchemaDisplayBody: ({ className, children, ...props }: SchemaDisplayBodyProps) => react_jsx_runtime.JSX.Element;
+type SchemaDisplayExampleProps = HTMLAttributes<HTMLPreElement>;
+declare const SchemaDisplayExample: ({ className, children, ...props }: SchemaDisplayExampleProps) => react_jsx_runtime.JSX.Element;
+
+export { SchemaDisplay, SchemaDisplayBody, type SchemaDisplayBodyProps, SchemaDisplayContent, type SchemaDisplayContentProps, SchemaDisplayDescription, type SchemaDisplayDescriptionProps, SchemaDisplayExample, type SchemaDisplayExampleProps, SchemaDisplayHeader, type SchemaDisplayHeaderProps, SchemaDisplayMethod, type SchemaDisplayMethodProps, SchemaDisplayParameter, type SchemaDisplayParameterProps, SchemaDisplayParameters, type SchemaDisplayParametersProps, SchemaDisplayPath, type SchemaDisplayPathProps, SchemaDisplayProperty, type SchemaDisplayPropertyProps, type SchemaDisplayProps, SchemaDisplayRequest, type SchemaDisplayRequestProps, SchemaDisplayResponse, type SchemaDisplayResponseProps };