@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import { ChevronDownIcon, SearchIcon } from "lucide-react";
+const 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
+  }
+);
+const TaskItem = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground text-sm", className), ...props, children });
+const Task = ({
+  defaultOpen = true,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Collapsible, { className: cn(className), defaultOpen, ...props });
+const TaskTrigger = ({
+  children,
+  className,
+  title,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, className: cn("group", className), ...props, children: 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" })
+] }) });
+const 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.cjs

@@ -0,0 +1,220 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _button = require('../ui/button');
+var _utils = require('../../lib/utils');
+var _ansitoreact = require('ansi-to-react'); var _ansitoreact2 = _interopRequireDefault(_ansitoreact);
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+var _react = require('react');
+var _shimmer = require('./shimmer');
+const TerminalContext = _react.createContext.call(void 0, {
+  autoScroll: true,
+  isStreaming: false,
+  output: ""
+});
+const Terminal = ({
+  output,
+  isStreaming = false,
+  autoScroll = true,
+  onClear,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({ autoScroll, isStreaming, onClear, output }),
+    [autoScroll, isStreaming, onClear, output]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TerminalContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "flex flex-col overflow-hidden rounded-lg border bg-zinc-950 text-zinc-100",
+        className
+      ),
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TerminalHeader, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TerminalTitle, {}),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TerminalStatus, {}),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, TerminalActions, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TerminalCopyButton, {}),
+              onClear && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TerminalClearButton, {})
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TerminalContent, {})
+      ] })))
+    }
+  ) });
+};
+const TerminalHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex items-center justify-between border-zinc-800 border-b px-4 py-2",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+const TerminalTitle = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, "flex items-center gap-2 text-sm text-zinc-400", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.TerminalIcon, { className: "size-4" }),
+      _nullishCoalesce(children, () => ( "Terminal"))
+    ]
+  }
+);
+const TerminalStatus = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { isStreaming } = _react.use.call(void 0, TerminalContext);
+  if (!isStreaming) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, "flex items-center gap-2 text-xs text-zinc-400", className),
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _shimmer.Shimmer, { className: "w-16", children: "\xA0" })))
+    }
+  );
+};
+const TerminalActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "flex items-center gap-1", className), ...props, children });
+const TerminalCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = _react.useState.call(void 0, false);
+  const timeoutRef = _react.useRef.call(void 0, 0);
+  const { output } = _react.use.call(void 0, TerminalContext);
+  const copyToClipboard = _react.useCallback.call(void 0, async () => {
+    if (typeof window === "undefined" || !_optionalChain([navigator, 'optionalAccess', _ => _.clipboard, 'optionalAccess', _2 => _2.writeText])) {
+      _optionalChain([onError, 'optionalCall', _3 => _3(new Error("Clipboard API not available"))]);
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(output);
+      setIsCopied(true);
+      _optionalChain([onCopy, 'optionalCall', _4 => _4()]);
+      timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      _optionalChain([onError, 'optionalCall', _5 => _5(error)]);
+    }
+  }, [output, onCopy, onError, timeout]);
+  _react.useEffect.call(void 0, 
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? _lucidereact.CheckIcon : _lucidereact.CopyIcon;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      className: _utils.cn.call(void 0, 
+        "size-7 shrink-0 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100",
+        className
+      ),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { size: 14 })))
+    }
+  );
+};
+const TerminalClearButton = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { onClear } = _react.use.call(void 0, TerminalContext);
+  if (!onClear) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      className: _utils.cn.call(void 0, 
+        "size-7 shrink-0 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100",
+        className
+      ),
+      onClick: onClear,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Trash2Icon, { size: 14 })))
+    }
+  );
+};
+const TerminalContent = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { output, isStreaming, autoScroll } = _react.use.call(void 0, TerminalContext);
+  const containerRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [output, autoScroll]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "max-h-96 overflow-auto p-4 font-mono text-sm leading-relaxed",
+        className
+      ),
+      ref: containerRef,
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "pre", { className: "whitespace-pre-wrap break-words", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ansitoreact2.default, { children: output }),
+        isStreaming && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse bg-zinc-100" })
+      ] })))
+    }
+  );
+};
+
+
+
+
+
+
+
+
+
+exports.Terminal = Terminal; exports.TerminalActions = TerminalActions; exports.TerminalClearButton = TerminalClearButton; exports.TerminalContent = TerminalContent; exports.TerminalCopyButton = TerminalCopyButton; exports.TerminalHeader = TerminalHeader; exports.TerminalStatus = TerminalStatus; exports.TerminalTitle = TerminalTitle;

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

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { Button } from '../ui/button.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+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;
+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;
+
+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.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { Button } from '../ui/button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+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;
+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;
+
+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,220 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import { cn } from "../../lib/utils";
+import Ansi from "ansi-to-react";
+import { CheckIcon, CopyIcon, TerminalIcon, Trash2Icon } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  use,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Shimmer } from "./shimmer";
+const TerminalContext = createContext({
+  autoScroll: true,
+  isStreaming: false,
+  output: ""
+});
+const 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, {})
+      ] })
+    }
+  ) });
+};
+const 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
+  }
+);
+const 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"
+    ]
+  }
+);
+const TerminalStatus = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { isStreaming } = use(TerminalContext);
+  if (!isStreaming) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2 text-xs text-zinc-400", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Shimmer, { className: "w-16", children: "\xA0" })
+    }
+  );
+};
+const TerminalActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), ...props, children });
+const TerminalCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(0);
+  const { output } = use(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 })
+    }
+  );
+};
+const TerminalClearButton = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { onClear } = use(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 })
+    }
+  );
+};
+const TerminalContent = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { output, isStreaming, autoScroll } = use(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" })
+      ] })
+    }
+  );
+};
+export {
+  Terminal,
+  TerminalActions,
+  TerminalClearButton,
+  TerminalContent,
+  TerminalCopyButton,
+  TerminalHeader,
+  TerminalStatus,
+  TerminalTitle
+};