@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  CircleIcon,
+  ClockIcon,
+  WrenchIcon,
+  XCircleIcon
+} from "lucide-react";
+import { isValidElement } from "react";
+import { CodeBlock } from "./code-block";
+const Tool = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn("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__ */ 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" })
+};
+const getStatusBadge = (status) => /* @__PURE__ */ jsxs(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__ */ 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" })
+      ]
+    }
+  );
+};
+const 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
+  }
+);
+const 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" }) })
+] });
+const 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/components/ai-elements/toolbar.cjs

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _react = require('@xyflow/react');
+const Toolbar = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.NodeToolbar,
+  {
+    className: _utils.cn.call(void 0, 
+      "flex items-center gap-1 rounded-sm border bg-background p-1.5",
+      className
+    ),
+    position: _react.Position.Bottom,
+    ...props
+  }
+);
+
+
+exports.Toolbar = Toolbar;

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

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { NodeToolbar } from '@xyflow/react';
+
+type ToolbarProps = ComponentProps<typeof NodeToolbar>;
+declare const Toolbar: ({ className, ...props }: ToolbarProps) => react_jsx_runtime.JSX.Element;
+
+export { Toolbar };

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

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { NodeToolbar } from '@xyflow/react';
+
+type ToolbarProps = ComponentProps<typeof NodeToolbar>;
+declare const Toolbar: ({ className, ...props }: ToolbarProps) => react_jsx_runtime.JSX.Element;
+
+export { Toolbar };

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

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { NodeToolbar, Position } from "@xyflow/react";
+const Toolbar = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  NodeToolbar,
+  {
+    className: cn(
+      "flex items-center gap-1 rounded-sm border bg-background p-1.5",
+      className
+    ),
+    position: Position.Bottom,
+    ...props
+  }
+);
+export {
+  Toolbar
+};

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

@@ -0,0 +1,92 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _reactusecontrollablestate = require('@radix-ui/react-use-controllable-state');
+var _utils = require('../../lib/utils');
+var _react = require('react');
+const TranscriptionContext = _react.createContext.call(void 0, 
+  null
+);
+const useTranscription = () => {
+  const context = _react.use.call(void 0, TranscriptionContext);
+  if (!context) {
+    throw new Error(
+      "Transcription components must be used within Transcription"
+    );
+  }
+  return context;
+};
+const Transcription = ({
+  segments,
+  currentTime: externalCurrentTime,
+  onSeek,
+  className,
+  children,
+  ...props
+}) => {
+  const [currentTime, setCurrentTime] = _reactusecontrollablestate.useControllableState.call(void 0, {
+    defaultProp: 0,
+    onChange: onSeek,
+    prop: externalCurrentTime
+  });
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({ currentTime, onSeek, onTimeUpdate: setCurrentTime, segments }),
+    [currentTime, onSeek, setCurrentTime, segments]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TranscriptionContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "flex flex-wrap gap-1 text-sm leading-relaxed",
+        className
+      ),
+      "data-slot": "transcription",
+      ...props,
+      children: segments.filter((segment) => segment.text.trim()).map((segment, index) => children(segment, index))
+    }
+  ) });
+};
+const TranscriptionSegment = ({
+  segment,
+  index,
+  className,
+  onClick,
+  ...props
+}) => {
+  const { currentTime, onSeek } = useTranscription();
+  const isActive = currentTime >= segment.startSecond && currentTime < segment.endSecond;
+  const isPast = currentTime >= segment.endSecond;
+  const handleClick = _react.useCallback.call(void 0, 
+    (event) => {
+      if (onSeek) {
+        onSeek(segment.startSecond);
+      }
+      _optionalChain([onClick, 'optionalCall', _ => _(event)]);
+    },
+    [onSeek, segment.startSecond, onClick]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "button",
+    {
+      className: _utils.cn.call(void 0, 
+        "inline text-left",
+        isActive && "text-primary",
+        isPast && "text-muted-foreground",
+        !(isActive || isPast) && "text-muted-foreground/60",
+        onSeek && "cursor-pointer hover:text-foreground",
+        !onSeek && "cursor-default",
+        className
+      ),
+      "data-active": isActive,
+      "data-index": index,
+      "data-slot": "transcription-segment",
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: segment.text
+    }
+  );
+};
+
+
+
+exports.Transcription = Transcription; exports.TranscriptionSegment = TranscriptionSegment;

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

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Experimental_TranscriptionResult } from 'ai';
+import { ComponentProps, ReactNode } from 'react';
+
+type TranscriptionProps = Omit<ComponentProps<"div">, "children"> & {
+    segments: TranscriptionSegment[];
+    currentTime?: number;
+    onSeek?: (time: number) => void;
+    children: (segment: TranscriptionSegment, index: number) => ReactNode;
+};
+declare const Transcription: ({ segments, currentTime: externalCurrentTime, onSeek, className, children, ...props }: TranscriptionProps) => react_jsx_runtime.JSX.Element;
+type TranscriptionSegmentProps = ComponentProps<"button"> & {
+    segment: TranscriptionSegment;
+    index: number;
+};
+type TranscriptionSegment = Experimental_TranscriptionResult["segments"][number];
+declare const TranscriptionSegment: ({ segment, index, className, onClick, ...props }: TranscriptionSegmentProps) => react_jsx_runtime.JSX.Element;
+
+export { Transcription, type TranscriptionProps, TranscriptionSegment, type TranscriptionSegmentProps };

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

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Experimental_TranscriptionResult } from 'ai';
+import { ComponentProps, ReactNode } from 'react';
+
+type TranscriptionProps = Omit<ComponentProps<"div">, "children"> & {
+    segments: TranscriptionSegment[];
+    currentTime?: number;
+    onSeek?: (time: number) => void;
+    children: (segment: TranscriptionSegment, index: number) => ReactNode;
+};
+declare const Transcription: ({ segments, currentTime: externalCurrentTime, onSeek, className, children, ...props }: TranscriptionProps) => react_jsx_runtime.JSX.Element;
+type TranscriptionSegmentProps = ComponentProps<"button"> & {
+    segment: TranscriptionSegment;
+    index: number;
+};
+type TranscriptionSegment = Experimental_TranscriptionResult["segments"][number];
+declare const TranscriptionSegment: ({ segment, index, className, onClick, ...props }: TranscriptionSegmentProps) => react_jsx_runtime.JSX.Element;
+
+export { Transcription, type TranscriptionProps, TranscriptionSegment, type TranscriptionSegmentProps };

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

@@ -0,0 +1,92 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { cn } from "../../lib/utils";
+import { createContext, useCallback, use, useMemo } from "react";
+const TranscriptionContext = createContext(
+  null
+);
+const useTranscription = () => {
+  const context = use(TranscriptionContext);
+  if (!context) {
+    throw new Error(
+      "Transcription components must be used within Transcription"
+    );
+  }
+  return context;
+};
+const Transcription = ({
+  segments,
+  currentTime: externalCurrentTime,
+  onSeek,
+  className,
+  children,
+  ...props
+}) => {
+  const [currentTime, setCurrentTime] = useControllableState({
+    defaultProp: 0,
+    onChange: onSeek,
+    prop: externalCurrentTime
+  });
+  const contextValue = useMemo(
+    () => ({ currentTime, onSeek, onTimeUpdate: setCurrentTime, segments }),
+    [currentTime, onSeek, setCurrentTime, segments]
+  );
+  return /* @__PURE__ */ jsx(TranscriptionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap gap-1 text-sm leading-relaxed",
+        className
+      ),
+      "data-slot": "transcription",
+      ...props,
+      children: segments.filter((segment) => segment.text.trim()).map((segment, index) => children(segment, index))
+    }
+  ) });
+};
+const TranscriptionSegment = ({
+  segment,
+  index,
+  className,
+  onClick,
+  ...props
+}) => {
+  const { currentTime, onSeek } = useTranscription();
+  const isActive = currentTime >= segment.startSecond && currentTime < segment.endSecond;
+  const isPast = currentTime >= segment.endSecond;
+  const handleClick = useCallback(
+    (event) => {
+      if (onSeek) {
+        onSeek(segment.startSecond);
+      }
+      onClick?.(event);
+    },
+    [onSeek, segment.startSecond, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "inline text-left",
+        isActive && "text-primary",
+        isPast && "text-muted-foreground",
+        !(isActive || isPast) && "text-muted-foreground/60",
+        onSeek && "cursor-pointer hover:text-foreground",
+        !onSeek && "cursor-default",
+        className
+      ),
+      "data-active": isActive,
+      "data-index": index,
+      "data-slot": "transcription-segment",
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: segment.text
+    }
+  );
+};
+export {
+  Transcription,
+  TranscriptionSegment
+};

package/dist/components/ai-elements/voice-selector-accent.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+var _utils = require('../../lib/utils');
+const VoiceSelectorAccent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "text-muted-foreground text-xs", className), ...props, children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Languages, { className: "size-4" }))) });
+
+
+exports.VoiceSelectorAccent = VoiceSelectorAccent;

package/dist/components/ai-elements/voice-selector-accent.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type VoiceSelectorAccentValue = 'american' | 'british' | 'australian' | 'canadian' | 'irish' | 'scottish' | 'indian' | 'south-african' | 'new-zealand' | 'spanish' | 'french' | 'german' | 'italian' | 'portuguese' | 'brazilian' | 'mexican' | 'argentinian' | 'japanese' | 'chinese' | 'korean' | 'russian' | 'arabic' | 'dutch' | 'swedish' | 'norwegian' | 'danish' | 'finnish' | 'polish' | 'turkish' | 'greek' | string;
+type VoiceSelectorAccentProps = ComponentProps<'span'> & {
+    value?: VoiceSelectorAccentValue;
+};
+declare const VoiceSelectorAccent: ({ className, children, ...props }: VoiceSelectorAccentProps) => react_jsx_runtime.JSX.Element;
+
+export { VoiceSelectorAccent, type VoiceSelectorAccentProps, type VoiceSelectorAccentValue };

package/dist/components/ai-elements/voice-selector-accent.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type VoiceSelectorAccentValue = 'american' | 'british' | 'australian' | 'canadian' | 'irish' | 'scottish' | 'indian' | 'south-african' | 'new-zealand' | 'spanish' | 'french' | 'german' | 'italian' | 'portuguese' | 'brazilian' | 'mexican' | 'argentinian' | 'japanese' | 'chinese' | 'korean' | 'russian' | 'arabic' | 'dutch' | 'swedish' | 'norwegian' | 'danish' | 'finnish' | 'polish' | 'turkish' | 'greek' | string;
+type VoiceSelectorAccentProps = ComponentProps<'span'> & {
+    value?: VoiceSelectorAccentValue;
+};
+declare const VoiceSelectorAccent: ({ className, children, ...props }: VoiceSelectorAccentProps) => react_jsx_runtime.JSX.Element;
+
+export { VoiceSelectorAccent, type VoiceSelectorAccentProps, type VoiceSelectorAccentValue };

package/dist/components/ai-elements/voice-selector-accent.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Languages } from "lucide-react";
+import { cn } from "../../lib/utils";
+const VoiceSelectorAccent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground text-xs", className), ...props, children: children ?? /* @__PURE__ */ jsx(Languages, { className: "size-4" }) });
+export {
+  VoiceSelectorAccent
+};