@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,329 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from "../ui/hover-card";
+import { Progress } from "../ui/progress";
+import { cn } from "../../lib/utils";
+import { createContext, use, useMemo } from "react";
+import { getUsage } from "tokenlens";
+const PERCENT_MAX = 100;
+const ICON_RADIUS = 10;
+const ICON_VIEWBOX = 24;
+const ICON_CENTER = 12;
+const ICON_STROKE_WIDTH = 2;
+const ContextContext = createContext(null);
+const useContextValue = () => {
+  const context = use(ContextContext);
+  if (!context) {
+    throw new Error("Context components must be used within Context");
+  }
+  return context;
+};
+const Context = ({
+  usedTokens,
+  maxTokens,
+  usage,
+  modelId,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({ maxTokens, modelId, usage, usedTokens }),
+    [maxTokens, modelId, usage, usedTokens]
+  );
+  return /* @__PURE__ */ jsx(ContextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HoverCard, { closeDelay: 0, openDelay: 0, ...props }) });
+};
+const ContextIcon = () => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const circumference = 2 * Math.PI * ICON_RADIUS;
+  const usedPercent = usedTokens / maxTokens;
+  const dashOffset = circumference * (1 - usedPercent);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": "Model context usage",
+      height: "20",
+      role: "img",
+      style: { color: "currentcolor" },
+      viewBox: `0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`,
+      width: "20",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.25",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeWidth: ICON_STROKE_WIDTH
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.7",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeDasharray: `${circumference} ${circumference}`,
+            strokeDashoffset: dashOffset,
+            strokeLinecap: "round",
+            strokeWidth: ICON_STROKE_WIDTH,
+            style: { transform: "rotate(-90deg)", transformOrigin: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+const ContextTrigger = ({ children, ...props }) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const renderedPercent = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 1,
+    style: "percent"
+  }).format(usedPercent);
+  return /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: renderedPercent }),
+    /* @__PURE__ */ jsx(ContextIcon, {})
+  ] }) });
+};
+const ContextContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  HoverCardContent,
+  {
+    className: cn("min-w-60 divide-y overflow-hidden p-0", className),
+    ...props
+  }
+);
+const ContextContentHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const displayPct = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 1,
+    style: "percent"
+  }).format(usedPercent);
+  const used = new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(usedTokens);
+  const total = new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(maxTokens);
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full space-y-2 p-3", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-xs", children: [
+      /* @__PURE__ */ jsx("p", { children: displayPct }),
+      /* @__PURE__ */ jsxs("p", { className: "font-mono text-muted-foreground", children: [
+        used,
+        " / ",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })
+  ] }) });
+};
+const ContextContentBody = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("w-full p-3", className), ...props, children });
+const ContextContentFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { modelId, usage } = useContextValue();
+  const costUSD = modelId ? getUsage({
+    modelId,
+    usage: {
+      input: usage?.inputTokens ?? 0,
+      output: usage?.outputTokens ?? 0
+    }
+  }).costUSD?.totalUSD : void 0;
+  const totalCost = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(costUSD ?? 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Total cost" }),
+        /* @__PURE__ */ jsx("span", { children: totalCost })
+      ] })
+    }
+  );
+};
+const ContextInputUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const inputTokens = usage?.inputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!inputTokens) {
+    return null;
+  }
+  const inputCost = modelId ? getUsage({
+    modelId,
+    usage: { input: inputTokens, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const inputCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(inputCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Input" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: inputCostText, tokens: inputTokens })
+      ]
+    }
+  );
+};
+const ContextOutputUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const outputTokens = usage?.outputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!outputTokens) {
+    return null;
+  }
+  const outputCost = modelId ? getUsage({
+    modelId,
+    usage: { input: 0, output: outputTokens }
+  }).costUSD?.totalUSD : void 0;
+  const outputCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(outputCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Output" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: outputCostText, tokens: outputTokens })
+      ]
+    }
+  );
+};
+const ContextReasoningUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const reasoningTokens = usage?.reasoningTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!reasoningTokens) {
+    return null;
+  }
+  const reasoningCost = modelId ? getUsage({
+    modelId,
+    usage: { reasoningTokens }
+  }).costUSD?.totalUSD : void 0;
+  const reasoningCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(reasoningCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Reasoning" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: reasoningCostText, tokens: reasoningTokens })
+      ]
+    }
+  );
+};
+const ContextCacheUsage = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { usage, modelId } = useContextValue();
+  const cacheTokens = usage?.cachedInputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!cacheTokens) {
+    return null;
+  }
+  const cacheCost = modelId ? getUsage({
+    modelId,
+    usage: { cacheReads: cacheTokens, input: 0, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const cacheCostText = new Intl.NumberFormat("en-US", {
+    currency: "USD",
+    style: "currency"
+  }).format(cacheCost ?? 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between text-xs", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Cache" }),
+        /* @__PURE__ */ jsx(TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })
+      ]
+    }
+  );
+};
+const TokensWithCost = ({
+  tokens,
+  costText
+}) => /* @__PURE__ */ jsxs("span", { children: [
+  tokens === void 0 ? "\u2014" : new Intl.NumberFormat("en-US", {
+    notation: "compact"
+  }).format(tokens),
+  costText ? /* @__PURE__ */ jsxs("span", { className: "ml-2 text-muted-foreground", children: [
+    "\u2022 ",
+    costText
+  ] }) : null
+] });
+export {
+  Context,
+  ContextCacheUsage,
+  ContextContent,
+  ContextContentBody,
+  ContextContentFooter,
+  ContextContentHeader,
+  ContextInputUsage,
+  ContextOutputUsage,
+  ContextReasoningUsage,
+  ContextTrigger
+};

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

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _react = require('@xyflow/react');
+const Controls = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _react.Controls,
+  {
+    className: _utils.cn.call(void 0, 
+      "gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!",
+      "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!",
+      className
+    ),
+    ...props
+  }
+);
+
+
+exports.Controls = Controls;

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

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

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

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

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Controls as ControlsPrimitive } from "@xyflow/react";
+const Controls = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  ControlsPrimitive,
+  {
+    className: cn(
+      "gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!",
+      "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!",
+      className
+    ),
+    ...props
+  }
+);
+export {
+  Controls
+};

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

@@ -0,0 +1,124 @@
+"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 _button = require('../ui/button');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+var _react = require('react');
+var _usesticktobottom = require('use-stick-to-bottom');
+const Conversation = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _usesticktobottom.StickToBottom,
+  {
+    className: _utils.cn.call(void 0, "relative flex-1 overflow-y-hidden", className),
+    initial: "smooth",
+    resize: "smooth",
+    role: "log",
+    ...props
+  }
+);
+const ConversationContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _usesticktobottom.StickToBottom.Content,
+  {
+    className: _utils.cn.call(void 0, "flex flex-col gap-8 p-4", className),
+    ...props
+  }
+);
+const ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className
+    ),
+    ...props,
+    children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-muted-foreground", children: icon }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "font-medium text-sm", children: title }),
+        description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-muted-foreground text-sm", children: description })
+      ] })
+    ] })))
+  }
+);
+const ConversationScrollButton = ({
+  className,
+  ...props
+}) => {
+  const { isAtBottom, scrollToBottom } = _usesticktobottom.useStickToBottomContext.call(void 0, );
+  const handleScrollToBottom = _react.useCallback.call(void 0, () => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+  return !isAtBottom && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      className: _utils.cn.call(void 0, 
+        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
+        className
+      ),
+      onClick: handleScrollToBottom,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDownIcon, { className: "size-4" })
+    }
+  );
+};
+const defaultFormatMessage = (message) => {
+  const roleLabel = message.role.charAt(0).toUpperCase() + message.role.slice(1);
+  return `**${roleLabel}:** ${message.content}`;
+};
+const messagesToMarkdown = (messages, formatMessage = defaultFormatMessage) => messages.map((msg, i) => formatMessage(msg, i)).join("\n\n");
+const ConversationDownload = ({
+  messages,
+  filename = "conversation.md",
+  formatMessage = defaultFormatMessage,
+  className,
+  children,
+  ...props
+}) => {
+  const handleDownload = _react.useCallback.call(void 0, () => {
+    const markdown = messagesToMarkdown(messages, formatMessage);
+    const blob = new Blob([markdown], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+  }, [messages, filename, formatMessage]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      className: _utils.cn.call(void 0, 
+        "absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted",
+        className
+      ),
+      onClick: handleDownload,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.DownloadIcon, { className: "size-4" })))
+    }
+  );
+};
+
+
+
+
+
+
+
+exports.Conversation = Conversation; exports.ConversationContent = ConversationContent; exports.ConversationDownload = ConversationDownload; exports.ConversationEmptyState = ConversationEmptyState; exports.ConversationScrollButton = ConversationScrollButton; exports.messagesToMarkdown = messagesToMarkdown;

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

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Button } from '../ui/button.cjs';
+import { StickToBottom } from 'use-stick-to-bottom';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type ConversationProps = ComponentProps<typeof StickToBottom>;
+declare const Conversation: ({ className, ...props }: ConversationProps) => react_jsx_runtime.JSX.Element;
+type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
+declare const ConversationContent: ({ className, ...props }: ConversationContentProps) => react_jsx_runtime.JSX.Element;
+type ConversationEmptyStateProps = ComponentProps<"div"> & {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+};
+declare const ConversationEmptyState: ({ className, title, description, icon, children, ...props }: ConversationEmptyStateProps) => react_jsx_runtime.JSX.Element;
+type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+declare const ConversationScrollButton: ({ className, ...props }: ConversationScrollButtonProps) => false | react_jsx_runtime.JSX.Element;
+interface ConversationMessage {
+    role: "user" | "assistant" | "system" | "data" | "tool";
+    content: string;
+}
+type ConversationDownloadProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+    messages: ConversationMessage[];
+    filename?: string;
+    formatMessage?: (message: ConversationMessage, index: number) => string;
+};
+declare const messagesToMarkdown: (messages: ConversationMessage[], formatMessage?: (message: ConversationMessage, index: number) => string) => string;
+declare const ConversationDownload: ({ messages, filename, formatMessage, className, children, ...props }: ConversationDownloadProps) => react_jsx_runtime.JSX.Element;
+
+export { Conversation, ConversationContent, type ConversationContentProps, ConversationDownload, type ConversationDownloadProps, ConversationEmptyState, type ConversationEmptyStateProps, type ConversationMessage, type ConversationProps, ConversationScrollButton, type ConversationScrollButtonProps, messagesToMarkdown };

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

@@ -0,0 +1,32 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Button } from '../ui/button.js';
+import { StickToBottom } from 'use-stick-to-bottom';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type ConversationProps = ComponentProps<typeof StickToBottom>;
+declare const Conversation: ({ className, ...props }: ConversationProps) => react_jsx_runtime.JSX.Element;
+type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
+declare const ConversationContent: ({ className, ...props }: ConversationContentProps) => react_jsx_runtime.JSX.Element;
+type ConversationEmptyStateProps = ComponentProps<"div"> & {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+};
+declare const ConversationEmptyState: ({ className, title, description, icon, children, ...props }: ConversationEmptyStateProps) => react_jsx_runtime.JSX.Element;
+type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+declare const ConversationScrollButton: ({ className, ...props }: ConversationScrollButtonProps) => false | react_jsx_runtime.JSX.Element;
+interface ConversationMessage {
+    role: "user" | "assistant" | "system" | "data" | "tool";
+    content: string;
+}
+type ConversationDownloadProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+    messages: ConversationMessage[];
+    filename?: string;
+    formatMessage?: (message: ConversationMessage, index: number) => string;
+};
+declare const messagesToMarkdown: (messages: ConversationMessage[], formatMessage?: (message: ConversationMessage, index: number) => string) => string;
+declare const ConversationDownload: ({ messages, filename, formatMessage, className, children, ...props }: ConversationDownloadProps) => react_jsx_runtime.JSX.Element;
+
+export { Conversation, ConversationContent, type ConversationContentProps, ConversationDownload, type ConversationDownloadProps, ConversationEmptyState, type ConversationEmptyStateProps, type ConversationMessage, type ConversationProps, ConversationScrollButton, type ConversationScrollButtonProps, messagesToMarkdown };