@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,193 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { ScrollArea } from "../ui/scroll-area";
+import { cn } from "../../lib/utils";
+import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
+const QueueItem = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    className: cn(
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      className
+    ),
+    ...props
+  }
+);
+const QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "mt-0.5 inline-block size-2.5 rounded-full border",
+      completed ? "border-muted-foreground/20 bg-muted-foreground/10" : "border-muted-foreground/50",
+      className
+    ),
+    ...props
+  }
+);
+const QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "line-clamp-1 grow break-words",
+      completed ? "text-muted-foreground/50 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+const QueueItemDescription = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "ml-6 text-xs",
+      completed ? "text-muted-foreground/40 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+const QueueItemActions = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex gap-1", className), ...props });
+const QueueItemAction = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    className: cn(
+      "size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",
+      className
+    ),
+    size: "icon",
+    type: "button",
+    variant: "ghost",
+    ...props
+  }
+);
+const QueueItemAttachment = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("mt-1 flex flex-wrap gap-2", className), ...props });
+const QueueItemImage = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    alt: "",
+    className: cn("size-8 rounded border object-cover", className),
+    height: 32,
+    width: 32,
+    ...props
+  }
+);
+const QueueItemFile = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    className: cn(
+      "flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(PaperclipIcon, { size: 12 }),
+      /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate", children })
+    ]
+  }
+);
+const QueueList = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(ScrollArea, { className: cn("mt-2 -mb-1", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "max-h-40 pr-4", children: /* @__PURE__ */ jsx("ul", { children }) }) });
+const QueueSection = ({
+  className,
+  defaultOpen = true,
+  ...props
+}) => /* @__PURE__ */ jsx(Collapsible, { className: cn(className), defaultOpen, ...props });
+const QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: cn(
+      "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+      className
+    ),
+    type: "button",
+    ...props,
+    children
+  }
+) });
+const QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-2", className), ...props, children: [
+  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 transition-transform group-data-[state=closed]:-rotate-90" }),
+  icon,
+  /* @__PURE__ */ jsxs("span", { children: [
+    count,
+    " ",
+    label
+  ] })
+] });
+const QueueSectionContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleContent, { className: cn(className), ...props });
+const Queue = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      className
+    ),
+    ...props
+  }
+);
+export {
+  Queue,
+  QueueItem,
+  QueueItemAction,
+  QueueItemActions,
+  QueueItemAttachment,
+  QueueItemContent,
+  QueueItemDescription,
+  QueueItemFile,
+  QueueItemImage,
+  QueueItemIndicator,
+  QueueList,
+  QueueSection,
+  QueueSectionContent,
+  QueueSectionLabel,
+  QueueSectionTrigger
+};

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

@@ -0,0 +1,178 @@
+"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 _reactusecontrollablestate = require('@radix-ui/react-use-controllable-state');
+
+
+
+
+var _collapsible = require('../ui/collapsible');
+var _utils = require('../../lib/utils');
+var _cjk = require('@streamdown/cjk');
+var _code = require('@streamdown/code');
+var _math = require('@streamdown/math');
+var _mermaid = require('@streamdown/mermaid');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+
+var _react = require('react');
+var _streamdown = require('streamdown');
+var _shimmer = require('./shimmer');
+const ReasoningContext = _react.createContext.call(void 0, null);
+const useReasoning = () => {
+  const context = _react.use.call(void 0, ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+const AUTO_CLOSE_DELAY = 1e3;
+const MS_IN_S = 1e3;
+const Reasoning = _react.memo.call(void 0, 
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }) => {
+    const resolvedDefaultOpen = _nullishCoalesce(defaultOpen, () => ( isStreaming));
+    const isExplicitlyClosed = defaultOpen === false;
+    const [isOpen, setIsOpen] = _reactusecontrollablestate.useControllableState.call(void 0, {
+      defaultProp: resolvedDefaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const [duration, setDuration] = _reactusecontrollablestate.useControllableState.call(void 0, {
+      defaultProp: void 0,
+      prop: durationProp
+    });
+    const hasEverStreamedRef = _react.useRef.call(void 0, isStreaming);
+    const [hasAutoClosed, setHasAutoClosed] = _react.useState.call(void 0, false);
+    const startTimeRef = _react.useRef.call(void 0, null);
+    _react.useEffect.call(void 0, () => {
+      if (isStreaming) {
+        hasEverStreamedRef.current = true;
+        if (startTimeRef.current === null) {
+          startTimeRef.current = Date.now();
+        }
+      } else if (startTimeRef.current !== null) {
+        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+        startTimeRef.current = null;
+      }
+    }, [isStreaming, setDuration]);
+    _react.useEffect.call(void 0, () => {
+      if (isStreaming && !isOpen && !isExplicitlyClosed) {
+        setIsOpen(true);
+      }
+    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+    _react.useEffect.call(void 0, () => {
+      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
+    const handleOpenChange = _react.useCallback.call(void 0, 
+      (newOpen) => {
+        setIsOpen(newOpen);
+      },
+      [setIsOpen]
+    );
+    const contextValue = _react.useMemo.call(void 0, 
+      () => ({ duration, isOpen, isStreaming, setIsOpen }),
+      [duration, isOpen, isStreaming, setIsOpen]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ReasoningContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _collapsible.Collapsible,
+      {
+        className: _utils.cn.call(void 0, "not-prose mb-4", className),
+        onOpenChange: handleOpenChange,
+        open: isOpen,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+const defaultGetThinkingMessage = (isStreaming, duration) => {
+  if (isStreaming || duration === 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _shimmer.Shimmer, { duration: 1, children: "Thinking\u2026" });
+  }
+  if (duration === void 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "Thought for a few seconds" });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { children: [
+    "Thought for ",
+    duration,
+    " seconds"
+  ] });
+};
+const ReasoningTrigger = _react.memo.call(void 0, 
+  ({
+    className,
+    children,
+    getThinkingMessage = defaultGetThinkingMessage,
+    ...props
+  }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _collapsible.CollapsibleTrigger,
+      {
+        className: _utils.cn.call(void 0, 
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.BrainIcon, { className: "size-4" }),
+          getThinkingMessage(isStreaming, duration),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _lucidereact.ChevronDownIcon,
+            {
+              className: _utils.cn.call(void 0, 
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ] })))
+      }
+    );
+  }
+);
+const streamdownPlugins = { cjk: _cjk.cjk, code: _code.code, math: _math.math, mermaid: _mermaid.mermaid };
+const ReasoningContent = _react.memo.call(void 0, 
+  ({ className, children, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _collapsible.CollapsibleContent,
+    {
+      className: _utils.cn.call(void 0, 
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _streamdown.Streamdown, { plugins: streamdownPlugins, children })
+    }
+  )
+);
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
+
+
+
+
+
+exports.Reasoning = Reasoning; exports.ReasoningContent = ReasoningContent; exports.ReasoningTrigger = ReasoningTrigger; exports.useReasoning = useReasoning;

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.cjs';
+import 'radix-ui';
+
+interface ReasoningContextValue {
+    isStreaming: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    duration: number | undefined;
+}
+declare const useReasoning: () => ReasoningContextValue;
+type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+};
+declare const Reasoning: React.MemoExoticComponent<({ className, isStreaming, open, defaultOpen, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => react_jsx_runtime.JSX.Element>;
+type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+declare const ReasoningTrigger: React.MemoExoticComponent<({ className, children, getThinkingMessage, ...props }: ReasoningTriggerProps) => react_jsx_runtime.JSX.Element>;
+type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
+    children: string;
+};
+declare const ReasoningContent: React.MemoExoticComponent<({ className, children, ...props }: ReasoningContentProps) => react_jsx_runtime.JSX.Element>;
+
+export { Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, useReasoning };

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible.js';
+import 'radix-ui';
+
+interface ReasoningContextValue {
+    isStreaming: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    duration: number | undefined;
+}
+declare const useReasoning: () => ReasoningContextValue;
+type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+};
+declare const Reasoning: React.MemoExoticComponent<({ className, isStreaming, open, defaultOpen, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => react_jsx_runtime.JSX.Element>;
+type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+declare const ReasoningTrigger: React.MemoExoticComponent<({ className, children, getThinkingMessage, ...props }: ReasoningTriggerProps) => react_jsx_runtime.JSX.Element>;
+type ReasoningContentProps = ComponentProps<typeof CollapsibleContent> & {
+    children: string;
+};
+declare const ReasoningContent: React.MemoExoticComponent<({ className, children, ...props }: ReasoningContentProps) => react_jsx_runtime.JSX.Element>;
+
+export { Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, useReasoning };

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

@@ -0,0 +1,178 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../ui/collapsible";
+import { cn } from "../../lib/utils";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import {
+  createContext,
+  memo,
+  useCallback,
+  use,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Streamdown } from "streamdown";
+import { Shimmer } from "./shimmer";
+const ReasoningContext = createContext(null);
+const useReasoning = () => {
+  const context = use(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+const AUTO_CLOSE_DELAY = 1e3;
+const MS_IN_S = 1e3;
+const Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }) => {
+    const resolvedDefaultOpen = defaultOpen ?? isStreaming;
+    const isExplicitlyClosed = defaultOpen === false;
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: resolvedDefaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const [duration, setDuration] = useControllableState({
+      defaultProp: void 0,
+      prop: durationProp
+    });
+    const hasEverStreamedRef = useRef(isStreaming);
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const startTimeRef = useRef(null);
+    useEffect(() => {
+      if (isStreaming) {
+        hasEverStreamedRef.current = true;
+        if (startTimeRef.current === null) {
+          startTimeRef.current = Date.now();
+        }
+      } else if (startTimeRef.current !== null) {
+        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+        startTimeRef.current = null;
+      }
+    }, [isStreaming, setDuration]);
+    useEffect(() => {
+      if (isStreaming && !isOpen && !isExplicitlyClosed) {
+        setIsOpen(true);
+      }
+    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+    useEffect(() => {
+      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
+    const handleOpenChange = useCallback(
+      (newOpen) => {
+        setIsOpen(newOpen);
+      },
+      [setIsOpen]
+    );
+    const contextValue = useMemo(
+      () => ({ duration, isOpen, isStreaming, setIsOpen }),
+      [duration, isOpen, isStreaming, setIsOpen]
+    );
+    return /* @__PURE__ */ jsx(ReasoningContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      Collapsible,
+      {
+        className: cn("not-prose mb-4", className),
+        onOpenChange: handleOpenChange,
+        open: isOpen,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+const defaultGetThinkingMessage = (isStreaming, duration) => {
+  if (isStreaming || duration === 0) {
+    return /* @__PURE__ */ jsx(Shimmer, { duration: 1, children: "Thinking\u2026" });
+  }
+  if (duration === void 0) {
+    return /* @__PURE__ */ jsx("p", { children: "Thought for a few seconds" });
+  }
+  return /* @__PURE__ */ jsxs("p", { children: [
+    "Thought for ",
+    duration,
+    " seconds"
+  ] });
+};
+const ReasoningTrigger = memo(
+  ({
+    className,
+    children,
+    getThinkingMessage = defaultGetThinkingMessage,
+    ...props
+  }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+    return /* @__PURE__ */ jsx(
+      CollapsibleTrigger,
+      {
+        className: cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(BrainIcon, { className: "size-4" }),
+          getThinkingMessage(isStreaming, duration),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+const streamdownPlugins = { cjk, code, math, mermaid };
+const ReasoningContent = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+    CollapsibleContent,
+    {
+      className: cn(
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Streamdown, { plugins: streamdownPlugins, children })
+    }
+  )
+);
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
+export {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+  useReasoning
+};