@chatsdk-dev/elements 0.0.1

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

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@chatsdk-dev/ui/components/collapsible';
+import { ComponentProps } from 'react';
+
+type TaskItemFileProps = ComponentProps<"div">;
+declare const TaskItemFile: ({ children, className, ...props }: TaskItemFileProps) => react_jsx_runtime.JSX.Element;
+type TaskItemProps = ComponentProps<"div">;
+declare const TaskItem: ({ children, className, ...props }: TaskItemProps) => react_jsx_runtime.JSX.Element;
+type TaskProps = ComponentProps<typeof Collapsible>;
+declare const Task: ({ defaultOpen, className, ...props }: TaskProps) => react_jsx_runtime.JSX.Element;
+type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    title: string;
+};
+declare const TaskTrigger: ({ children, className, title, ...props }: TaskTriggerProps) => react_jsx_runtime.JSX.Element;
+type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const TaskContent: ({ children, className, ...props }: TaskContentProps) => react_jsx_runtime.JSX.Element;
+
+export { Task, TaskContent, type TaskContentProps, TaskItem, TaskItemFile, type TaskItemFileProps, type TaskItemProps, type TaskProps, TaskTrigger, type TaskTriggerProps };

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

@@ -0,0 +1,60 @@
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { SearchIcon, ChevronDownIcon } from 'lucide-react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var TaskItemFile = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TaskItem = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground text-sm", className), ...props, children });
+var Task = ({
+  defaultOpen = true,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Collapsible, { className: cn(className), defaultOpen, ...props });
+var TaskTrigger = ({
+  children,
+  className,
+  title,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleTrigger,
+  {
+    className: cn("group", className),
+    ...props,
+    render: () => children ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground", children: [
+      /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: title }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 transition-transform group-data-[state=open]:rotate-180" })
+    ] })
+  }
+);
+var TaskContent = ({
+  children,
+  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 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2 border-muted border-l-2 pl-4", children })
+  }
+);
+
+export { Task, TaskContent, TaskItem, TaskItemFile, TaskTrigger };

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

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { HTMLAttributes, ComponentProps } from 'react';
+
+type TerminalHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const TerminalHeader: ({ className, children, ...props }: TerminalHeaderProps) => react_jsx_runtime.JSX.Element;
+type TerminalTitleProps = HTMLAttributes<HTMLDivElement>;
+declare const TerminalTitle: ({ className, children, ...props }: TerminalTitleProps) => react_jsx_runtime.JSX.Element;
+type TerminalStatusProps = HTMLAttributes<HTMLDivElement>;
+declare const TerminalStatus: ({ className, children, ...props }: TerminalStatusProps) => react_jsx_runtime.JSX.Element | null;
+type TerminalActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const TerminalActions: ({ className, children, ...props }: TerminalActionsProps) => react_jsx_runtime.JSX.Element;
+type TerminalCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const TerminalCopyButton: ({ onCopy, onError, timeout, children, className, ...props }: TerminalCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type TerminalClearButtonProps = ComponentProps<typeof Button>;
+declare const TerminalClearButton: ({ children, className, ...props }: TerminalClearButtonProps) => react_jsx_runtime.JSX.Element | null;
+type TerminalContentProps = HTMLAttributes<HTMLDivElement>;
+declare const TerminalContent: ({ className, children, ...props }: TerminalContentProps) => react_jsx_runtime.JSX.Element;
+type TerminalProps = HTMLAttributes<HTMLDivElement> & {
+    output: string;
+    isStreaming?: boolean;
+    autoScroll?: boolean;
+    onClear?: () => void;
+};
+declare const Terminal: ({ output, isStreaming, autoScroll, onClear, className, children, ...props }: TerminalProps) => react_jsx_runtime.JSX.Element;
+
+export { Terminal, TerminalActions, type TerminalActionsProps, TerminalClearButton, type TerminalClearButtonProps, TerminalContent, type TerminalContentProps, TerminalCopyButton, type TerminalCopyButtonProps, TerminalHeader, type TerminalHeaderProps, type TerminalProps, TerminalStatus, type TerminalStatusProps, TerminalTitle, type TerminalTitleProps };

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

@@ -0,0 +1,203 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import Ansi from 'ansi-to-react';
+import { TerminalIcon, CheckIcon, CopyIcon, Trash2Icon } from 'lucide-react';
+import { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var TerminalContext = createContext({
+  autoScroll: true,
+  isStreaming: false,
+  output: ""
+});
+var TerminalHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between border-zinc-800 border-b px-4 py-2",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var TerminalTitle = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn("flex items-center gap-2 text-sm text-zinc-400", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4" }),
+      children ?? "Terminal"
+    ]
+  }
+);
+var TerminalStatus = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { isStreaming } = useContext(TerminalContext);
+  if (!isStreaming) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2 text-xs text-zinc-400", className),
+      ...props,
+      children
+    }
+  );
+};
+var TerminalActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), ...props, children });
+var TerminalCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(0);
+  const { output } = useContext(TerminalContext);
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(output);
+      setIsCopied(true);
+      onCopy?.();
+      timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      onError?.(error);
+    }
+  }, [output, onCopy, onError, timeout]);
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(
+        "size-7 shrink-0 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100",
+        className
+      ),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Icon, { size: 14 })
+    }
+  );
+};
+var TerminalClearButton = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { onClear } = useContext(TerminalContext);
+  if (!onClear) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(
+        "size-7 shrink-0 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100",
+        className
+      ),
+      onClick: onClear,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Trash2Icon, { size: 14 })
+    }
+  );
+};
+var TerminalContent = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { output, isStreaming, autoScroll } = useContext(TerminalContext);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [output, autoScroll]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "max-h-96 overflow-auto p-4 font-mono text-sm leading-relaxed",
+        className
+      ),
+      ref: containerRef,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs("pre", { className: "whitespace-pre-wrap break-words", children: [
+        /* @__PURE__ */ jsx(Ansi, { children: output }),
+        isStreaming && /* @__PURE__ */ jsx("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse bg-zinc-100" })
+      ] })
+    }
+  );
+};
+var Terminal = ({
+  output,
+  isStreaming = false,
+  autoScroll = true,
+  onClear,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({ autoScroll, isStreaming, onClear, output }),
+    [autoScroll, isStreaming, onClear, output]
+  );
+  return /* @__PURE__ */ jsx(TerminalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col overflow-hidden rounded-lg border bg-zinc-950 text-zinc-100",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(TerminalHeader, { children: [
+          /* @__PURE__ */ jsx(TerminalTitle, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(TerminalStatus, {}),
+            /* @__PURE__ */ jsxs(TerminalActions, { children: [
+              /* @__PURE__ */ jsx(TerminalCopyButton, {}),
+              onClear && /* @__PURE__ */ jsx(TerminalClearButton, {})
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(TerminalContent, {})
+      ] })
+    }
+  ) });
+};
+
+export { Terminal, TerminalActions, TerminalClearButton, TerminalContent, TerminalCopyButton, TerminalHeader, TerminalStatus, TerminalTitle };

package/dist/components/ai-elements/test-results.d.ts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@chatsdk-dev/ui/components/collapsible';
+import { HTMLAttributes, ComponentProps } from 'react';
+
+type TestResultsHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare const TestResultsHeader: ({ className, children, ...props }: TestResultsHeaderProps) => react_jsx_runtime.JSX.Element;
+type TestResultsDurationProps = HTMLAttributes<HTMLSpanElement>;
+declare const TestResultsDuration: ({ className, children, ...props }: TestResultsDurationProps) => react_jsx_runtime.JSX.Element | null;
+type TestResultsSummaryProps = HTMLAttributes<HTMLDivElement>;
+interface TestResultsSummary {
+    passed: number;
+    failed: number;
+    skipped: number;
+    total: number;
+    duration?: number;
+}
+declare const TestResultsSummary: ({ className, children, ...props }: TestResultsSummaryProps) => react_jsx_runtime.JSX.Element | null;
+type TestResultsProps = HTMLAttributes<HTMLDivElement> & {
+    summary?: TestResultsSummary;
+};
+declare const TestResults: ({ summary, className, children, ...props }: TestResultsProps) => react_jsx_runtime.JSX.Element;
+type TestResultsProgressProps = HTMLAttributes<HTMLDivElement>;
+declare const TestResultsProgress: ({ className, children, ...props }: TestResultsProgressProps) => react_jsx_runtime.JSX.Element | null;
+type TestResultsContentProps = HTMLAttributes<HTMLDivElement>;
+declare const TestResultsContent: ({ className, children, ...props }: TestResultsContentProps) => react_jsx_runtime.JSX.Element;
+type TestSuiteProps = ComponentProps<typeof Collapsible> & {
+    name: string;
+    status: TestStatus;
+};
+declare const TestSuite: ({ name, status, className, children, ...props }: TestSuiteProps) => react_jsx_runtime.JSX.Element;
+type TestSuiteNameProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const TestSuiteName: ({ className, children, ...props }: TestSuiteNameProps) => react_jsx_runtime.JSX.Element;
+type TestSuiteStatsProps = HTMLAttributes<HTMLDivElement> & {
+    passed?: number;
+    failed?: number;
+    skipped?: number;
+};
+declare const TestSuiteStats: ({ passed, failed, skipped, className, children, ...props }: TestSuiteStatsProps) => react_jsx_runtime.JSX.Element;
+type TestSuiteContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const TestSuiteContent: ({ className, children, ...props }: TestSuiteContentProps) => react_jsx_runtime.JSX.Element;
+type TestNameProps = HTMLAttributes<HTMLSpanElement>;
+declare const TestName: ({ className, children, ...props }: TestNameProps) => react_jsx_runtime.JSX.Element;
+type TestDurationProps = HTMLAttributes<HTMLSpanElement>;
+declare const TestDuration: ({ className, children, ...props }: TestDurationProps) => react_jsx_runtime.JSX.Element | null;
+type TestStatusProps = HTMLAttributes<HTMLSpanElement>;
+type TestStatus = "passed" | "failed" | "skipped" | "running";
+declare const TestStatus: ({ className, children, ...props }: TestStatusProps) => react_jsx_runtime.JSX.Element;
+type TestProps = HTMLAttributes<HTMLDivElement> & {
+    name: string;
+    status: TestStatus;
+    duration?: number;
+};
+declare const Test: ({ name, status, duration, className, children, ...props }: TestProps) => react_jsx_runtime.JSX.Element;
+type TestErrorProps = HTMLAttributes<HTMLDivElement>;
+declare const TestError: ({ className, children, ...props }: TestErrorProps) => react_jsx_runtime.JSX.Element;
+type TestErrorMessageProps = HTMLAttributes<HTMLParagraphElement>;
+declare const TestErrorMessage: ({ className, children, ...props }: TestErrorMessageProps) => react_jsx_runtime.JSX.Element;
+type TestErrorStackProps = HTMLAttributes<HTMLPreElement>;
+declare const TestErrorStack: ({ className, children, ...props }: TestErrorStackProps) => react_jsx_runtime.JSX.Element;
+
+export { Test, TestDuration, type TestDurationProps, TestError, TestErrorMessage, type TestErrorMessageProps, type TestErrorProps, TestErrorStack, type TestErrorStackProps, TestName, type TestNameProps, type TestProps, TestResults, TestResultsContent, type TestResultsContentProps, TestResultsDuration, type TestResultsDurationProps, TestResultsHeader, type TestResultsHeaderProps, TestResultsProgress, type TestResultsProgressProps, type TestResultsProps, TestResultsSummary, type TestResultsSummaryProps, TestStatus, type TestStatusProps, TestSuite, TestSuiteContent, type TestSuiteContentProps, TestSuiteName, type TestSuiteNameProps, type TestSuiteProps, TestSuiteStats, type TestSuiteStatsProps };