@chatsdk-dev/elements 0.0.1

package/dist/chunk-X5YUF2YM.js

@@ -0,0 +1,113 @@
+import { CodeBlock } from './chunk-CFM57HOS.js';
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { WrenchIcon, ChevronDownIcon, XCircleIcon, CheckCircleIcon, CircleIcon, ClockIcon } from 'lucide-react';
+import { isValidElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Tool = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn("group not-prose mb-4 w-full rounded-md border", className),
+    ...props
+  }
+);
+var statusLabels = {
+  "approval-requested": "Awaiting Approval",
+  "approval-responded": "Responded",
+  "input-available": "Running",
+  "input-streaming": "Pending",
+  "output-available": "Completed",
+  "output-denied": "Denied",
+  "output-error": "Error"
+};
+var statusIcons = {
+  "approval-requested": /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 text-yellow-600" }),
+  "approval-responded": /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4 text-blue-600" }),
+  "input-available": /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 animate-pulse" }),
+  "input-streaming": /* @__PURE__ */ jsx(CircleIcon, { className: "size-4" }),
+  "output-available": /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4 text-green-600" }),
+  "output-denied": /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4 text-orange-600" }),
+  "output-error": /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4 text-red-600" })
+};
+var getStatusBadge = (status) => /* @__PURE__ */ jsxs(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+  statusIcons[status],
+  statusLabels[status]
+] });
+var ToolHeader = ({
+  className,
+  title,
+  type,
+  state,
+  toolName,
+  ...props
+}) => {
+  const derivedName = type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
+  return /* @__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(WrenchIcon, { className: "size-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: title ?? derivedName }),
+          getStatusBadge(state)
+        ] }),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+      ]
+    }
+  );
+};
+var ToolContent = ({ 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 space-y-4 p-4 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props
+  }
+);
+var ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 overflow-hidden", className), ...props, children: [
+  /* @__PURE__ */ jsx("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
+  /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
+] });
+var ToolOutput = ({
+  className,
+  output,
+  errorText,
+  ...props
+}) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+  let Output = /* @__PURE__ */ jsx("div", { children: output });
+  if (typeof output === "object" && !isValidElement(output)) {
+    Output = /* @__PURE__ */ jsx(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
+  } else if (typeof output === "string") {
+    Output = /* @__PURE__ */ jsx(CodeBlock, { code: output, language: "json" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+          errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"
+        ),
+        children: [
+          errorText && /* @__PURE__ */ jsx("div", { children: errorText }),
+          Output
+        ]
+      }
+    )
+  ] });
+};
+
+export { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput, getStatusBadge };

package/dist/chunk-YX46JVQN.js

@@ -0,0 +1,78 @@
+import { deepMerge } from './chunk-RJG5D2TM.js';
+import { LOCAL_STORAGE_PREFIX } from './chunk-ZCSZX3OI.js';
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+var defaultInitialState = {
+  context: { actor: { id: crypto.randomUUID() } },
+  api: {
+    version: "v1",
+    baseUrl: "/api/proxy",
+    credentials: "include"
+  },
+  locale: { language: "en" }
+};
+var createChatSDKStore = (customInitialState) => {
+  const initialState = { ...defaultInitialState, ...customInitialState };
+  return create()(
+    persist(
+      (set) => ({
+        ...initialState,
+        setContext: (context) => set((state) => ({
+          ...state,
+          context: deepMerge({ ...state.context, ...context })
+        })),
+        setLogger: (logger) => set((state) => ({ ...state, logger })),
+        setTheme: (theme) => set((state) => ({ ...state, theme: { ...state.theme, ...theme } })),
+        setApi: (api) => set((state) => ({
+          ...state,
+          api: {
+            ...state.api,
+            ...api,
+            headers: state.api?.headers || api?.headers ? { ...state.api?.headers, ...api?.headers } : void 0
+          }
+        })),
+        setTranslations: (translations, merge = true) => set((state) => ({
+          ...state,
+          translations: merge ? { ...state.translations, ...translations } : translations
+        })),
+        setLocale: (locale) => {
+          set((state) => ({ ...state, locale }));
+        },
+        setConfig: (newConfig, merge = true) => {
+          set((state) => {
+            const config = merge ? state : initialState;
+            return {
+              ...config,
+              ...newConfig,
+              api: { ...config.api, ...newConfig.api },
+              context: deepMerge({
+                ...config.context,
+                ...newConfig.context
+              }),
+              theme: { ...config.theme, ...newConfig.theme },
+              translations: {
+                ...config.translations,
+                ...newConfig.translations
+              }
+            };
+          });
+        },
+        reset: (config) => {
+          set({ ...initialState, theme: {}, ...config });
+        },
+        setOptions: (options) => set((state) => ({ ...state, options }))
+      }),
+      {
+        partialize: (state) => {
+          return { context: { actor: state.context?.actor } };
+        },
+        name: LOCAL_STORAGE_PREFIX + "elements-store",
+        storage: createJSONStorage(() => localStorage)
+      }
+    )
+  );
+};
+var useChatSDKStore = createChatSDKStore();
+
+export { createChatSDKStore, useChatSDKStore };

package/dist/chunk-YXAMLTTT.js

@@ -0,0 +1,16 @@
+import { FolderCode } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@chatsdk-dev/ui/components/empty';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/features/chat/chat-history/chat-history-empty.tsx
+function ChatHistoryEmpty() {
+  const { t } = useTranslation("chat", { keyPrefix: "history.empty" });
+  return /* @__PURE__ */ jsx(Empty, { className: "w-full h-full hover:bg-blue pb-32", children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+    /* @__PURE__ */ jsx(EmptyMedia, { className: "size-8", variant: "icon", children: /* @__PURE__ */ jsx(FolderCode, { className: "size-4.5" }) }),
+    /* @__PURE__ */ jsx(EmptyTitle, { children: t("title") }),
+    /* @__PURE__ */ jsx(EmptyDescription, { children: t("description") })
+  ] }) });
+}
+
+export { ChatHistoryEmpty };

package/dist/chunk-YXFVHSY4.js

@@ -0,0 +1,51 @@
+import { cloneElement } from 'react';
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@chatsdk-dev/ui/components/dialog';
+import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter } from '@chatsdk-dev/ui/components/drawer';
+import { useBreakpoint } from '@chatsdk-dev/ui/hooks/use-breakpoint';
+import { useControllableState } from '@chatsdk-dev/ui/hooks/use-controllable-state';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/responsive-dialog.tsx
+function ResponsiveDialog({
+  open,
+  onOpenChange,
+  trigger,
+  children,
+  title,
+  description,
+  footer
+}) {
+  const [openState, setOpenState] = useControllableState({
+    value: open,
+    defaultValue: false,
+    onChange: onOpenChange
+  });
+  const sm = useBreakpoint("sm");
+  if (sm) {
+    const renderTrigger = trigger ? (triggerProps) => cloneElement(trigger, triggerProps) : void 0;
+    return /* @__PURE__ */ jsxs(Dialog, { open: openState, onOpenChange: setOpenState, children: [
+      trigger && /* @__PURE__ */ jsx(DialogTrigger, { render: renderTrigger }),
+      /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-106 px-6", children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto min-h-0 -mx-6 px-6 pb-1", children }),
+        footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Drawer, { open: openState, onOpenChange: setOpenState, children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(DrawerContent, { className: "p-6", children: [
+      /* @__PURE__ */ jsxs(DrawerHeader, { className: "text-left", children: [
+        /* @__PURE__ */ jsx(DrawerTitle, { children: title }),
+        /* @__PURE__ */ jsx(DrawerDescription, { children: description })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "overflow-y-auto -mx-6 px-6 pb-1", children }),
+      footer && /* @__PURE__ */ jsx(DrawerFooter, { children: footer })
+    ] })
+  ] });
+}
+
+export { ResponsiveDialog };

package/dist/chunk-ZCSZX3OI.js

@@ -0,0 +1,4 @@
+// src/features/molecule/constants.ts
+var LOCAL_STORAGE_PREFIX = "chatsdk-";
+
+export { LOCAL_STORAGE_PREFIX };

package/dist/common/use-copy-to-clipboard.d.ts

@@ -0,0 +1,3 @@
+declare function useCopyToClipboard(): readonly [string | null, (value: string) => void];
+
+export { useCopyToClipboard };

package/dist/common/use-copy-to-clipboard.js

@@ -0,0 +1,33 @@
+import { useState, useCallback } from 'react';
+
+// src/common/use-copy-to-clipboard.ts
+function oldSchoolCopy(text) {
+  const tempTextArea = document.createElement("textarea");
+  tempTextArea.value = text;
+  document.body.appendChild(tempTextArea);
+  tempTextArea.select();
+  document.execCommand("copy");
+  document.body.removeChild(tempTextArea);
+}
+function useCopyToClipboard() {
+  const [state, setState] = useState(null);
+  const copyToClipboard = useCallback((value) => {
+    const handleCopy = async () => {
+      try {
+        if (navigator?.clipboard?.writeText) {
+          await navigator.clipboard.writeText(value);
+          setState(value);
+        } else {
+          throw new Error("writeText not supported");
+        }
+      } catch (error) {
+        oldSchoolCopy(value);
+        setState(value);
+      }
+    };
+    handleCopy();
+  }, []);
+  return [state, copyToClipboard];
+}
+
+export { useCopyToClipboard };

package/dist/common/utilts.d.ts

@@ -0,0 +1,8 @@
+interface FormatRelativeTimeParams {
+    date: number | Date;
+    now?: Date;
+    locale?: string;
+}
+declare function renderRelativeTime({ date, now, locale, }: FormatRelativeTimeParams): string;
+
+export { renderRelativeTime };

package/dist/common/utilts.js

@@ -0,0 +1,28 @@
+// src/common/utilts.ts
+function renderRelativeTime({
+  date,
+  now,
+  locale
+}) {
+  const _date = date instanceof Date ? date : new Date(date);
+  const _now = now ?? /* @__PURE__ */ new Date();
+  const diffMs = _date.getTime() - _now.getTime();
+  const diffSec = Math.round(diffMs / 1e3);
+  const diffMin = Math.round(diffSec / 60);
+  const diffHr = Math.round(diffMin / 60);
+  const diffDay = Math.round(diffHr / 24);
+  const diffWeek = Math.round(diffDay / 7);
+  const diffMonth = Math.round(diffDay / 30);
+  const diffYear = Math.round(diffDay / 365);
+  const _locale = locale ?? "en";
+  const rtf = new Intl.RelativeTimeFormat(_locale, { numeric: "auto" });
+  if (Math.abs(diffSec) < 60) return rtf.format(diffSec, "second");
+  if (Math.abs(diffMin) < 60) return rtf.format(diffMin, "minute");
+  if (Math.abs(diffHr) < 24) return rtf.format(diffHr, "hour");
+  if (Math.abs(diffDay) < 7) return rtf.format(diffDay, "day");
+  if (Math.abs(diffWeek) < 4) return rtf.format(diffWeek, "week");
+  if (Math.abs(diffMonth) < 12) return rtf.format(diffMonth, "month");
+  return rtf.format(diffYear, "year");
+}
+
+export { renderRelativeTime };

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { ButtonProps } from '@chatsdk-dev/ui/components/button';
+
+type ActionsProps = ComponentProps<"div">;
+declare const Actions: ({ className, children, ...props }: ActionsProps) => react_jsx_runtime.JSX.Element;
+type ActionProps = ButtonProps & {
+    tooltip?: string;
+    label?: string;
+};
+declare const Action: ({ tooltip, children, label, className, variant, size, ...props }: ActionProps) => react_jsx_runtime.JSX.Element;
+
+export { Action, type ActionProps, Actions, type ActionsProps };

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

@@ -0,0 +1,42 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@chatsdk-dev/ui/components/tooltip';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Actions = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-", className), ...props, children });
+var Action = ({
+  tooltip,
+  children,
+  label,
+  className,
+  variant = "ghost",
+  size = "sm",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: cn(
+        "size-9 p-1.5 bg-transparent text-muted-foreground hover:text-foreground hover:bg-transparent relative",
+        className
+      ),
+      size,
+      type: "button",
+      variant,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { children: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+
+export { Action, Actions };

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

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AccordionItem, Accordion } from '@chatsdk-dev/ui/components/accordion';
+import { Tool } from 'ai';
+
+type AgentProps = ComponentProps<"div">;
+declare const Agent: react.MemoExoticComponent<({ className, ...props }: AgentProps) => react_jsx_runtime.JSX.Element>;
+type AgentHeaderProps = ComponentProps<"div"> & {
+    name: string;
+    model?: string;
+};
+declare const AgentHeader: react.MemoExoticComponent<({ className, name, model, ...props }: AgentHeaderProps) => react_jsx_runtime.JSX.Element>;
+type AgentContentProps = ComponentProps<"div">;
+declare const AgentContent: react.MemoExoticComponent<({ className, ...props }: AgentContentProps) => react_jsx_runtime.JSX.Element>;
+type AgentInstructionsProps = ComponentProps<"div"> & {
+    children: string;
+};
+declare const AgentInstructions: react.MemoExoticComponent<({ className, children, ...props }: AgentInstructionsProps) => react_jsx_runtime.JSX.Element>;
+type AgentToolsProps = ComponentProps<typeof Accordion>;
+declare const AgentTools: react.MemoExoticComponent<({ className, ...props }: AgentToolsProps) => react_jsx_runtime.JSX.Element>;
+type AgentToolProps = ComponentProps<typeof AccordionItem> & {
+    tool: Tool;
+};
+declare const AgentTool: react.MemoExoticComponent<({ className, tool, value, ...props }: AgentToolProps) => react_jsx_runtime.JSX.Element>;
+type AgentOutputProps = ComponentProps<"div"> & {
+    schema: string;
+};
+declare const AgentOutput: react.MemoExoticComponent<({ className, schema, ...props }: AgentOutputProps) => react_jsx_runtime.JSX.Element>;
+
+export { Agent, AgentContent, type AgentContentProps, AgentHeader, type AgentHeaderProps, AgentInstructions, type AgentInstructionsProps, AgentOutput, type AgentOutputProps, type AgentProps, AgentTool, type AgentToolProps, AgentTools, type AgentToolsProps };

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

@@ -0,0 +1,77 @@
+import { CodeBlock } from '../../chunk-CFM57HOS.js';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@chatsdk-dev/ui/components/accordion';
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { BotIcon } from 'lucide-react';
+import { memo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Agent = memo(({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("not-prose w-full rounded-md border", className),
+    ...props
+  }
+));
+var AgentHeader = memo(
+  ({ className, name, model, ...props }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      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(BotIcon, { className: "size-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: name }),
+        model && /* @__PURE__ */ jsx(Badge, { className: "font-mono text-xs", variant: "secondary", children: model })
+      ] })
+    }
+  )
+);
+var AgentContent = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("space-y-4 p-4 pt-0", className), ...props })
+);
+var AgentInstructions = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-sm", children: "Instructions" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50 p-3 text-muted-foreground text-sm", children: /* @__PURE__ */ jsx("p", { children }) })
+  ] })
+);
+var AgentTools = memo(({ className, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+  /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-sm", children: "Tools" }),
+  /* @__PURE__ */ jsx(Accordion, { className: "rounded-md border", ...props })
+] }));
+var AgentTool = memo(
+  ({ className, tool, value, ...props }) => {
+    const schema = "jsonSchema" in tool && tool.jsonSchema ? tool.jsonSchema : tool.inputSchema;
+    return /* @__PURE__ */ jsxs(
+      AccordionItem,
+      {
+        className: cn("border-b last:border-b-0", className),
+        value,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-3 py-2 text-sm hover:no-underline", children: tool.description ?? "No description" }),
+          /* @__PURE__ */ jsx(AccordionContent, { className: "px-3 pb-3", children: /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx(CodeBlock, { code: JSON.stringify(schema, null, 2), language: "json" }) }) })
+        ]
+      }
+    );
+  }
+);
+var AgentOutput = memo(
+  ({ className, schema, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground text-sm", children: "Output Schema" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ jsx(CodeBlock, { code: schema, language: "typescript" }) })
+  ] })
+);
+Agent.displayName = "Agent";
+AgentHeader.displayName = "AgentHeader";
+AgentContent.displayName = "AgentContent";
+AgentInstructions.displayName = "AgentInstructions";
+AgentTools.displayName = "AgentTools";
+AgentTool.displayName = "AgentTool";
+AgentOutput.displayName = "AgentOutput";
+
+export { Agent, AgentContent, AgentHeader, AgentInstructions, AgentOutput, AgentTool, AgentTools };

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

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { LucideIcon } from 'lucide-react';
+import { HTMLAttributes, ComponentProps } from 'react';
+
+type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+declare const Artifact: ({ className, ...props }: ArtifactProps) => react_jsx_runtime.JSX.Element;
+type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const ArtifactHeader: ({ className, ...props }: ArtifactHeaderProps) => react_jsx_runtime.JSX.Element;
+type ArtifactCloseProps = ComponentProps<typeof Button>;
+declare const ArtifactClose: ({ className, children, size, variant, ...props }: ArtifactCloseProps) => react_jsx_runtime.JSX.Element;
+type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
+declare const ArtifactTitle: ({ className, ...props }: ArtifactTitleProps) => react_jsx_runtime.JSX.Element;
+type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+declare const ArtifactDescription: ({ className, ...props }: ArtifactDescriptionProps) => react_jsx_runtime.JSX.Element;
+type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const ArtifactActions: ({ className, ...props }: ArtifactActionsProps) => react_jsx_runtime.JSX.Element;
+type ArtifactActionProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+    label?: string;
+    icon?: LucideIcon;
+};
+declare const ArtifactAction: ({ tooltip, label, icon: Icon, children, className, size, variant, ...props }: ArtifactActionProps) => react_jsx_runtime.JSX.Element;
+type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
+declare const ArtifactContent: ({ className, ...props }: ArtifactContentProps) => react_jsx_runtime.JSX.Element;
+
+export { Artifact, ArtifactAction, type ArtifactActionProps, ArtifactActions, type ArtifactActionsProps, ArtifactClose, type ArtifactCloseProps, ArtifactContent, type ArtifactContentProps, ArtifactDescription, type ArtifactDescriptionProps, ArtifactHeader, type ArtifactHeaderProps, type ArtifactProps, ArtifactTitle, type ArtifactTitleProps };

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

@@ -0,0 +1,108 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@chatsdk-dev/ui/components/tooltip';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { XIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Artifact = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+      className
+    ),
+    ...props
+  }
+);
+var ArtifactHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between border-b bg-muted/50 px-4 py-3",
+      className
+    ),
+    ...props
+  }
+);
+var ArtifactClose = ({
+  className,
+  children,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Button,
+  {
+    className: cn(
+      "size-8 p-0 text-muted-foreground hover:text-foreground",
+      className
+    ),
+    size,
+    type: "button",
+    variant,
+    ...props,
+    children: [
+      children ?? /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+    ]
+  }
+);
+var ArtifactTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn("font-medium text-foreground text-sm", className),
+    ...props
+  }
+);
+var ArtifactDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground text-sm", className), ...props });
+var ArtifactActions = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), ...props });
+var ArtifactAction = ({
+  tooltip,
+  label,
+  icon: Icon,
+  children,
+  className,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) => {
+  const button = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: cn(
+        "size-8 p-0 text-muted-foreground hover:text-foreground",
+        className
+      ),
+      size,
+      type: "button",
+      variant,
+      ...props,
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4" }) : children,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label || tooltip })
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { render: button }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })
+    ] }) });
+  }
+  return button;
+};
+var ArtifactContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-auto p-4", className), ...props });
+
+export { Artifact, ArtifactAction, ArtifactActions, ArtifactClose, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle };