@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/test-results.js

@@ -0,0 +1,376 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import {
+  CheckCircle2Icon,
+  ChevronRightIcon,
+  CircleDotIcon,
+  CircleIcon,
+  XCircleIcon
+} from "lucide-react";
+import { createContext, use, useMemo } from "react";
+const TestResultsContext = createContext({});
+const formatDuration = (ms) => {
+  if (ms < 1e3) {
+    return `${ms}ms`;
+  }
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+const TestResults = ({
+  summary,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ summary }), [summary]);
+  return /* @__PURE__ */ jsx(TestResultsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("rounded-lg border bg-background", className),
+      ...props,
+      children: children ?? (summary && /* @__PURE__ */ jsxs(TestResultsHeader, { children: [
+        /* @__PURE__ */ jsx(TestResultsSummary, {}),
+        /* @__PURE__ */ jsx(TestResultsDuration, {})
+      ] }))
+    }
+  ) });
+};
+const TestResultsHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between border-b px-4 py-3",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+const TestResultsSummary = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { summary } = use(TestResultsContext);
+  if (!summary) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-3", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        className: "gap-1 bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "size-3" }),
+          summary.passed,
+          " passed"
+        ]
+      }
+    ),
+    summary.failed > 0 && /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        className: "gap-1 bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3" }),
+          summary.failed,
+          " failed"
+        ]
+      }
+    ),
+    summary.skipped > 0 && /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        className: "gap-1 bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(CircleIcon, { className: "size-3" }),
+          summary.skipped,
+          " skipped"
+        ]
+      }
+    )
+  ] }) });
+};
+const TestResultsDuration = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { summary } = use(TestResultsContext);
+  if (!summary?.duration) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground text-sm", className), ...props, children: children ?? formatDuration(summary.duration) });
+};
+const TestResultsProgress = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { summary } = use(TestResultsContext);
+  if (!summary) {
+    return null;
+  }
+  const passedPercent = summary.passed / summary.total * 100;
+  const failedPercent = summary.failed / summary.total * 100;
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-2 overflow-hidden rounded-full bg-muted", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-green-500 transition-all",
+          style: { width: `${passedPercent}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-red-500 transition-all",
+          style: { width: `${failedPercent}%` }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        summary.passed,
+        "/",
+        summary.total,
+        " tests passed"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        passedPercent.toFixed(0),
+        "%"
+      ] })
+    ] })
+  ] }) });
+};
+const TestResultsContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("space-y-2 p-4", className), ...props, children });
+const TestSuiteContext = createContext({
+  name: "",
+  status: "passed"
+});
+const TestSuite = ({
+  name,
+  status,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ name, status }), [name, status]);
+  return /* @__PURE__ */ jsx(TestSuiteContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Collapsible, { className: cn("rounded-lg border", className), ...props, children }) });
+};
+const TestSuiteName = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { name, status } = use(TestSuiteContext);
+  return /* @__PURE__ */ jsxs(
+    CollapsibleTrigger,
+    {
+      className: cn(
+        "group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" }),
+        /* @__PURE__ */ jsx(TestStatusIcon, { status }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: children ?? name })
+      ]
+    }
+  );
+};
+const TestSuiteStats = ({
+  passed = 0,
+  failed = 0,
+  skipped = 0,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("ml-auto flex items-center gap-2 text-xs", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      passed > 0 && /* @__PURE__ */ jsxs("span", { className: "text-green-600 dark:text-green-400", children: [
+        passed,
+        " passed"
+      ] }),
+      failed > 0 && /* @__PURE__ */ jsxs("span", { className: "text-red-600 dark:text-red-400", children: [
+        failed,
+        " failed"
+      ] }),
+      skipped > 0 && /* @__PURE__ */ jsxs("span", { className: "text-yellow-600 dark:text-yellow-400", children: [
+        skipped,
+        " skipped"
+      ] })
+    ] })
+  }
+);
+const TestSuiteContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleContent, { className: cn("border-t", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "divide-y", children }) });
+const TestContext = createContext({
+  name: "",
+  status: "passed"
+});
+const Test = ({
+  name,
+  status,
+  duration,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({ duration, name, status }),
+    [duration, name, status]
+  );
+  return /* @__PURE__ */ jsx(TestContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2 px-4 py-2 text-sm", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TestStatus, {}),
+        /* @__PURE__ */ jsx(TestName, {}),
+        duration !== void 0 && /* @__PURE__ */ jsx(TestDuration, {})
+      ] })
+    }
+  ) });
+};
+const statusStyles = {
+  failed: "text-red-600 dark:text-red-400",
+  passed: "text-green-600 dark:text-green-400",
+  running: "text-blue-600 dark:text-blue-400",
+  skipped: "text-yellow-600 dark:text-yellow-400"
+};
+const statusIcons = {
+  failed: /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4" }),
+  passed: /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "size-4" }),
+  running: /* @__PURE__ */ jsx(CircleDotIcon, { className: "size-4 animate-pulse" }),
+  skipped: /* @__PURE__ */ jsx(CircleIcon, { className: "size-4" })
+};
+const TestStatusIcon = ({ status }) => /* @__PURE__ */ jsx("span", { className: cn("shrink-0", statusStyles[status]), children: statusIcons[status] });
+const TestStatus = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { status } = use(TestContext);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("shrink-0", statusStyles[status], className),
+      ...props,
+      children: children ?? statusIcons[status]
+    }
+  );
+};
+const TestName = ({ className, children, ...props }) => {
+  const { name } = use(TestContext);
+  return /* @__PURE__ */ jsx("span", { className: cn("flex-1", className), ...props, children: children ?? name });
+};
+const TestDuration = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { duration } = use(TestContext);
+  if (duration === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto text-muted-foreground text-xs", className),
+      ...props,
+      children: children ?? `${duration}ms`
+    }
+  );
+};
+const TestError = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "mt-2 rounded-md bg-red-50 p-3 dark:bg-red-900/20",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+const TestErrorMessage = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    className: cn(
+      "font-medium text-red-700 text-sm dark:text-red-400",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+const TestErrorStack = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "pre",
+  {
+    className: cn(
+      "mt-2 overflow-auto font-mono text-red-600 text-xs dark:text-red-400",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+export {
+  Test,
+  TestDuration,
+  TestError,
+  TestErrorMessage,
+  TestErrorStack,
+  TestName,
+  TestResults,
+  TestResultsContent,
+  TestResultsDuration,
+  TestResultsHeader,
+  TestResultsProgress,
+  TestResultsSummary,
+  TestStatus,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+  TestSuiteStats
+};

package/dist/components/ai-elements/tool.cjs

@@ -0,0 +1,130 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _badge = require('../ui/badge');
+
+
+
+
+var _collapsible = require('../ui/collapsible');
+var _utils = require('../../lib/utils');
+
+
+
+
+
+
+
+var _lucidereact = require('lucide-react');
+var _react = require('react');
+var _codeblock = require('./code-block');
+const Tool = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _collapsible.Collapsible,
+  {
+    className: _utils.cn.call(void 0, "group not-prose mb-4 w-full rounded-md border", className),
+    ...props
+  }
+);
+const statusLabels = {
+  "approval-requested": "Awaiting Approval",
+  "approval-responded": "Responded",
+  "input-available": "Running",
+  "input-streaming": "Pending",
+  "output-available": "Completed",
+  "output-denied": "Denied",
+  "output-error": "Error"
+};
+const statusIcons = {
+  "approval-requested": /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ClockIcon, { className: "size-4 text-yellow-600" }),
+  "approval-responded": /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CheckCircleIcon, { className: "size-4 text-blue-600" }),
+  "input-available": /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ClockIcon, { className: "size-4 animate-pulse" }),
+  "input-streaming": /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleIcon, { className: "size-4" }),
+  "output-available": /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CheckCircleIcon, { className: "size-4 text-green-600" }),
+  "output-denied": /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircleIcon, { className: "size-4 text-orange-600" }),
+  "output-error": /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XCircleIcon, { className: "size-4 text-red-600" })
+};
+const getStatusBadge = (status) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _badge.Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+  statusIcons[status],
+  statusLabels[status]
+] });
+const ToolHeader = ({
+  className,
+  title,
+  type,
+  state,
+  toolName,
+  ...props
+}) => {
+  const derivedName = type === "dynamic-tool" ? toolName : type.split("-").slice(1).join("-");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _collapsible.CollapsibleTrigger,
+    {
+      className: _utils.cn.call(void 0, 
+        "flex w-full items-center justify-between gap-4 p-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.WrenchIcon, { className: "size-4 text-muted-foreground" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium text-sm", children: _nullishCoalesce(title, () => ( derivedName)) }),
+          getStatusBadge(state)
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+      ]
+    }
+  );
+};
+const ToolContent = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _collapsible.CollapsibleContent,
+  {
+    className: _utils.cn.call(void 0, 
+      "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
+  }
+);
+const ToolInput = ({ className, input, ...props }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _utils.cn.call(void 0, "space-y-2 overflow-hidden", className), ...props, children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }),
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-md bg-muted/50", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _codeblock.CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })
+] });
+const ToolOutput = ({
+  className,
+  output,
+  errorText,
+  ...props
+}) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+  let Output = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: output });
+  if (typeof output === "object" && !_react.isValidElement.call(void 0, output)) {
+    Output = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _codeblock.CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" });
+  } else if (typeof output === "string") {
+    Output = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _codeblock.CodeBlock, { code: output, language: "json" });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _utils.cn.call(void 0, "space-y-2", className), ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? "Error" : "Result" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _utils.cn.call(void 0, 
+          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+          errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground"
+        ),
+        children: [
+          errorText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: errorText }),
+          Output
+        ]
+      }
+    )
+  ] });
+};
+
+
+
+
+
+
+
+exports.Tool = Tool; exports.ToolContent = ToolContent; exports.ToolHeader = ToolHeader; exports.ToolInput = ToolInput; exports.ToolOutput = ToolOutput; exports.getStatusBadge = getStatusBadge;

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

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToolUIPart, DynamicToolUIPart } from 'ai';
+import { ComponentProps } from 'react';
+import { Collapsible, CollapsibleContent } from '../ui/collapsible.cjs';
+import 'radix-ui';
+
+type ToolProps = ComponentProps<typeof Collapsible>;
+declare const Tool: ({ className, ...props }: ToolProps) => react_jsx_runtime.JSX.Element;
+type ToolPart = ToolUIPart | DynamicToolUIPart;
+type ToolHeaderProps = {
+    title?: string;
+    className?: string;
+} & ({
+    type: ToolUIPart["type"];
+    state: ToolUIPart["state"];
+    toolName?: never;
+} | {
+    type: DynamicToolUIPart["type"];
+    state: DynamicToolUIPart["state"];
+    toolName: string;
+});
+declare const getStatusBadge: (status: ToolPart["state"]) => react_jsx_runtime.JSX.Element;
+declare const ToolHeader: ({ className, title, type, state, toolName, ...props }: ToolHeaderProps) => react_jsx_runtime.JSX.Element;
+type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const ToolContent: ({ className, ...props }: ToolContentProps) => react_jsx_runtime.JSX.Element;
+type ToolInputProps = ComponentProps<"div"> & {
+    input: ToolPart["input"];
+};
+declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => react_jsx_runtime.JSX.Element;
+type ToolOutputProps = ComponentProps<"div"> & {
+    output: ToolPart["output"];
+    errorText: ToolPart["errorText"];
+};
+declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Tool, ToolContent, type ToolContentProps, ToolHeader, type ToolHeaderProps, ToolInput, type ToolInputProps, ToolOutput, type ToolOutputProps, type ToolPart, type ToolProps, getStatusBadge };

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

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ToolUIPart, DynamicToolUIPart } from 'ai';
+import { ComponentProps } from 'react';
+import { Collapsible, CollapsibleContent } from '../ui/collapsible.js';
+import 'radix-ui';
+
+type ToolProps = ComponentProps<typeof Collapsible>;
+declare const Tool: ({ className, ...props }: ToolProps) => react_jsx_runtime.JSX.Element;
+type ToolPart = ToolUIPart | DynamicToolUIPart;
+type ToolHeaderProps = {
+    title?: string;
+    className?: string;
+} & ({
+    type: ToolUIPart["type"];
+    state: ToolUIPart["state"];
+    toolName?: never;
+} | {
+    type: DynamicToolUIPart["type"];
+    state: DynamicToolUIPart["state"];
+    toolName: string;
+});
+declare const getStatusBadge: (status: ToolPart["state"]) => react_jsx_runtime.JSX.Element;
+declare const ToolHeader: ({ className, title, type, state, toolName, ...props }: ToolHeaderProps) => react_jsx_runtime.JSX.Element;
+type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const ToolContent: ({ className, ...props }: ToolContentProps) => react_jsx_runtime.JSX.Element;
+type ToolInputProps = ComponentProps<"div"> & {
+    input: ToolPart["input"];
+};
+declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => react_jsx_runtime.JSX.Element;
+type ToolOutputProps = ComponentProps<"div"> & {
+    output: ToolPart["output"];
+    errorText: ToolPart["errorText"];
+};
+declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Tool, ToolContent, type ToolContentProps, ToolHeader, type ToolHeaderProps, ToolInput, type ToolInputProps, ToolOutput, type ToolOutputProps, type ToolPart, type ToolProps, getStatusBadge };