@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/inline-citation.js

@@ -0,0 +1,223 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../ui/badge";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem
+} from "../ui/carousel";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from "../ui/hover-card";
+import { cn } from "../../lib/utils";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  use,
+  useEffect,
+  useState
+} from "react";
+const InlineCitation = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("group inline items-center gap-1", className),
+    ...props
+  }
+);
+const InlineCitationText = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("transition-colors group-hover:bg-accent", className),
+    ...props
+  }
+);
+const InlineCitationCard = (props) => /* @__PURE__ */ jsx(HoverCard, { closeDelay: 0, openDelay: 0, ...props });
+const InlineCitationCardTrigger = ({
+  sources,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  Badge,
+  {
+    className: cn("ml-1 rounded-full", className),
+    variant: "secondary",
+    ...props,
+    children: sources[0] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      new URL(sources[0]).hostname,
+      " ",
+      sources.length > 1 && `+${sources.length - 1}`
+    ] }) : "unknown"
+  }
+) });
+const InlineCitationCardBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCardContent, { className: cn("relative w-80 p-0", className), ...props });
+const CarouselApiContext = createContext(void 0);
+const useCarouselApi = () => {
+  const context = use(CarouselApiContext);
+  return context;
+};
+const InlineCitationCarousel = ({
+  className,
+  children,
+  ...props
+}) => {
+  const [api, setApi] = useState();
+  return /* @__PURE__ */ jsx(CarouselApiContext.Provider, { value: api, children: /* @__PURE__ */ jsx(Carousel, { className: cn("w-full", className), setApi, ...props, children }) });
+};
+const InlineCitationCarouselContent = (props) => /* @__PURE__ */ jsx(CarouselContent, { ...props });
+const InlineCitationCarouselItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CarouselItem,
+  {
+    className: cn("w-full space-y-2 p-4 pl-8", className),
+    ...props
+  }
+);
+const InlineCitationCarouselHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2",
+      className
+    ),
+    ...props
+  }
+);
+const InlineCitationCarouselIndex = ({
+  children,
+  className,
+  ...props
+}) => {
+  const api = useCarouselApi();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+    const handleSelect = () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    };
+    api.on("select", handleSelect);
+    return () => {
+      api.off("select", handleSelect);
+    };
+  }, [api]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
+        className
+      ),
+      ...props,
+      children: children ?? `${current}/${count}`
+    }
+  );
+};
+const InlineCitationCarouselPrev = ({
+  className,
+  ...props
+}) => {
+  const api = useCarouselApi();
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollPrev();
+    }
+  }, [api]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Previous",
+      className: cn("shrink-0", className),
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4 text-muted-foreground" })
+    }
+  );
+};
+const InlineCitationCarouselNext = ({
+  className,
+  ...props
+}) => {
+  const api = useCarouselApi();
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollNext();
+    }
+  }, [api]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Next",
+      className: cn("shrink-0", className),
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-4 text-muted-foreground" })
+    }
+  );
+};
+const InlineCitationSource = ({
+  title,
+  url,
+  description,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), ...props, children: [
+  title && /* @__PURE__ */ jsx("h4", { className: "truncate font-medium text-sm leading-tight", children: title }),
+  url && /* @__PURE__ */ jsx("p", { className: "truncate break-all text-muted-foreground text-xs", children: url }),
+  description && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-muted-foreground text-sm leading-relaxed", children: description }),
+  children
+] });
+const InlineCitationQuote = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "blockquote",
+  {
+    className: cn(
+      "border-muted border-l-2 pl-3 text-muted-foreground text-sm italic",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+export {
+  InlineCitation,
+  InlineCitationCard,
+  InlineCitationCardBody,
+  InlineCitationCardTrigger,
+  InlineCitationCarousel,
+  InlineCitationCarouselContent,
+  InlineCitationCarouselHeader,
+  InlineCitationCarouselIndex,
+  InlineCitationCarouselItem,
+  InlineCitationCarouselNext,
+  InlineCitationCarouselPrev,
+  InlineCitationQuote,
+  InlineCitationSource,
+  InlineCitationText
+};

package/dist/components/ai-elements/jsx-preview.cjs

@@ -0,0 +1,176 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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 _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+
+var _react = require('react');
+var _reactjsxparser = require('react-jsx-parser'); var _reactjsxparser2 = _interopRequireDefault(_reactjsxparser);
+const JSXPreviewContext = _react.createContext.call(void 0, null);
+const TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/;
+const useJSXPreview = () => {
+  const context = _react.use.call(void 0, JSXPreviewContext);
+  if (!context) {
+    throw new Error("JSXPreview components must be used within JSXPreview");
+  }
+  return context;
+};
+const matchJsxTag = (code) => {
+  if (code.trim() === "") {
+    return null;
+  }
+  const match = code.match(TAG_REGEX);
+  if (!match || match.index === void 0) {
+    return null;
+  }
+  const [fullMatch, tagName, attributes, selfClosing] = match;
+  let type;
+  if (selfClosing) {
+    type = "self-closing";
+  } else if (fullMatch.startsWith("</")) {
+    type = "closing";
+  } else {
+    type = "opening";
+  }
+  return {
+    attributes: attributes.trim(),
+    endIndex: match.index + fullMatch.length,
+    startIndex: match.index,
+    tag: fullMatch,
+    tagName,
+    type
+  };
+};
+const completeJsxTag = (code) => {
+  const stack = [];
+  let result = "";
+  let currentPosition = 0;
+  while (currentPosition < code.length) {
+    const match = matchJsxTag(code.slice(currentPosition));
+    if (!match) {
+      result += code.slice(currentPosition);
+      break;
+    }
+    const { tagName, type, endIndex } = match;
+    result += code.slice(currentPosition, currentPosition + endIndex);
+    if (type === "opening") {
+      stack.push(tagName);
+    } else if (type === "closing") {
+      stack.pop();
+    }
+    currentPosition += endIndex;
+  }
+  return result + stack.toReversed().map((tag) => `</${tag}>`).join("");
+};
+const JSXPreview = _react.memo.call(void 0, 
+  ({
+    jsx: jsx2,
+    isStreaming = false,
+    components,
+    bindings,
+    onError,
+    className,
+    children,
+    ...props
+  }) => {
+    const [prevJsx, setPrevJsx] = _react.useState.call(void 0, jsx2);
+    const [error, setError] = _react.useState.call(void 0, null);
+    if (jsx2 !== prevJsx) {
+      setPrevJsx(jsx2);
+      setError(null);
+    }
+    const processedJsx = _react.useMemo.call(void 0, 
+      () => isStreaming ? completeJsxTag(jsx2) : jsx2,
+      [jsx2, isStreaming]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      JSXPreviewContext.Provider,
+      {
+        value: {
+          bindings,
+          components,
+          error,
+          jsx: jsx2,
+          onErrorProp: onError,
+          processedJsx,
+          setError
+        },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "relative", className), ...props, children })
+      }
+    );
+  }
+);
+JSXPreview.displayName = "JSXPreview";
+const JSXPreviewContent = _react.memo.call(void 0, 
+  ({ className, ...props }) => {
+    const { processedJsx, components, bindings, setError, onErrorProp } = useJSXPreview();
+    const errorReportedRef = _react.useRef.call(void 0, null);
+    _react.useEffect.call(void 0, () => {
+      errorReportedRef.current = null;
+    }, [processedJsx]);
+    const handleError = _react.useCallback.call(void 0, 
+      (err) => {
+        if (errorReportedRef.current === processedJsx) {
+          return;
+        }
+        errorReportedRef.current = processedJsx;
+        setError(err);
+        _optionalChain([onErrorProp, 'optionalCall', _ => _(err)]);
+      },
+      [processedJsx, onErrorProp, setError]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "jsx-preview-content", className), ...props, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactjsxparser2.default,
+      {
+        bindings,
+        components,
+        jsx: processedJsx,
+        onError: handleError,
+        renderInWrapper: false
+      }
+    ) });
+  }
+);
+JSXPreviewContent.displayName = "JSXPreviewContent";
+const renderChildren = (children, error) => {
+  if (typeof children === "function") {
+    return children(error);
+  }
+  return children;
+};
+const JSXPreviewError = _react.memo.call(void 0, 
+  ({ className, children, ...props }) => {
+    const { error } = useJSXPreview();
+    if (!error) {
+      return null;
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: _utils.cn.call(void 0, 
+          "flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm",
+          className
+        ),
+        ...props,
+        children: children ? renderChildren(children, error) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.AlertCircle, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: error.message })
+        ] })
+      }
+    );
+  }
+);
+JSXPreviewError.displayName = "JSXPreviewError";
+
+
+
+
+
+exports.JSXPreview = JSXPreview; exports.JSXPreviewContent = JSXPreviewContent; exports.JSXPreviewError = JSXPreviewError; exports.useJSXPreview = useJSXPreview;

package/dist/components/ai-elements/jsx-preview.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 { TProps } from 'react-jsx-parser';
+
+interface JSXPreviewContextValue {
+    jsx: string;
+    processedJsx: string;
+    error: Error | null;
+    setError: (error: Error | null) => void;
+    components: TProps["components"];
+    bindings: TProps["bindings"];
+    onErrorProp?: (error: Error) => void;
+}
+declare const useJSXPreview: () => JSXPreviewContextValue;
+type JSXPreviewProps = ComponentProps<"div"> & {
+    jsx: string;
+    isStreaming?: boolean;
+    components?: TProps["components"];
+    bindings?: TProps["bindings"];
+    onError?: (error: Error) => void;
+};
+declare const JSXPreview: React.MemoExoticComponent<({ jsx, isStreaming, components, bindings, onError, className, children, ...props }: JSXPreviewProps) => react_jsx_runtime.JSX.Element>;
+type JSXPreviewContentProps = Omit<ComponentProps<"div">, "children">;
+declare const JSXPreviewContent: React.MemoExoticComponent<({ className, ...props }: JSXPreviewContentProps) => react_jsx_runtime.JSX.Element>;
+type JSXPreviewErrorProps = ComponentProps<"div"> & {
+    children?: ReactNode | ((error: Error) => ReactNode);
+};
+declare const JSXPreviewError: React.MemoExoticComponent<({ className, children, ...props }: JSXPreviewErrorProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { JSXPreview, JSXPreviewContent, type JSXPreviewContentProps, JSXPreviewError, type JSXPreviewErrorProps, type JSXPreviewProps, useJSXPreview };

package/dist/components/ai-elements/jsx-preview.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 { TProps } from 'react-jsx-parser';
+
+interface JSXPreviewContextValue {
+    jsx: string;
+    processedJsx: string;
+    error: Error | null;
+    setError: (error: Error | null) => void;
+    components: TProps["components"];
+    bindings: TProps["bindings"];
+    onErrorProp?: (error: Error) => void;
+}
+declare const useJSXPreview: () => JSXPreviewContextValue;
+type JSXPreviewProps = ComponentProps<"div"> & {
+    jsx: string;
+    isStreaming?: boolean;
+    components?: TProps["components"];
+    bindings?: TProps["bindings"];
+    onError?: (error: Error) => void;
+};
+declare const JSXPreview: React.MemoExoticComponent<({ jsx, isStreaming, components, bindings, onError, className, children, ...props }: JSXPreviewProps) => react_jsx_runtime.JSX.Element>;
+type JSXPreviewContentProps = Omit<ComponentProps<"div">, "children">;
+declare const JSXPreviewContent: React.MemoExoticComponent<({ className, ...props }: JSXPreviewContentProps) => react_jsx_runtime.JSX.Element>;
+type JSXPreviewErrorProps = ComponentProps<"div"> & {
+    children?: ReactNode | ((error: Error) => ReactNode);
+};
+declare const JSXPreviewError: React.MemoExoticComponent<({ className, children, ...props }: JSXPreviewErrorProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { JSXPreview, JSXPreviewContent, type JSXPreviewContentProps, JSXPreviewError, type JSXPreviewErrorProps, type JSXPreviewProps, useJSXPreview };

package/dist/components/ai-elements/jsx-preview.js

@@ -0,0 +1,176 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { AlertCircle } from "lucide-react";
+import {
+  createContext,
+  memo,
+  useCallback,
+  use,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import JsxParser from "react-jsx-parser";
+const JSXPreviewContext = createContext(null);
+const TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/;
+const useJSXPreview = () => {
+  const context = use(JSXPreviewContext);
+  if (!context) {
+    throw new Error("JSXPreview components must be used within JSXPreview");
+  }
+  return context;
+};
+const matchJsxTag = (code) => {
+  if (code.trim() === "") {
+    return null;
+  }
+  const match = code.match(TAG_REGEX);
+  if (!match || match.index === void 0) {
+    return null;
+  }
+  const [fullMatch, tagName, attributes, selfClosing] = match;
+  let type;
+  if (selfClosing) {
+    type = "self-closing";
+  } else if (fullMatch.startsWith("</")) {
+    type = "closing";
+  } else {
+    type = "opening";
+  }
+  return {
+    attributes: attributes.trim(),
+    endIndex: match.index + fullMatch.length,
+    startIndex: match.index,
+    tag: fullMatch,
+    tagName,
+    type
+  };
+};
+const completeJsxTag = (code) => {
+  const stack = [];
+  let result = "";
+  let currentPosition = 0;
+  while (currentPosition < code.length) {
+    const match = matchJsxTag(code.slice(currentPosition));
+    if (!match) {
+      result += code.slice(currentPosition);
+      break;
+    }
+    const { tagName, type, endIndex } = match;
+    result += code.slice(currentPosition, currentPosition + endIndex);
+    if (type === "opening") {
+      stack.push(tagName);
+    } else if (type === "closing") {
+      stack.pop();
+    }
+    currentPosition += endIndex;
+  }
+  return result + stack.toReversed().map((tag) => `</${tag}>`).join("");
+};
+const JSXPreview = memo(
+  ({
+    jsx: jsx2,
+    isStreaming = false,
+    components,
+    bindings,
+    onError,
+    className,
+    children,
+    ...props
+  }) => {
+    const [prevJsx, setPrevJsx] = useState(jsx2);
+    const [error, setError] = useState(null);
+    if (jsx2 !== prevJsx) {
+      setPrevJsx(jsx2);
+      setError(null);
+    }
+    const processedJsx = useMemo(
+      () => isStreaming ? completeJsxTag(jsx2) : jsx2,
+      [jsx2, isStreaming]
+    );
+    return /* @__PURE__ */ jsx(
+      JSXPreviewContext.Provider,
+      {
+        value: {
+          bindings,
+          components,
+          error,
+          jsx: jsx2,
+          onErrorProp: onError,
+          processedJsx,
+          setError
+        },
+        children: /* @__PURE__ */ jsx("div", { className: cn("relative", className), ...props, children })
+      }
+    );
+  }
+);
+JSXPreview.displayName = "JSXPreview";
+const JSXPreviewContent = memo(
+  ({ className, ...props }) => {
+    const { processedJsx, components, bindings, setError, onErrorProp } = useJSXPreview();
+    const errorReportedRef = useRef(null);
+    useEffect(() => {
+      errorReportedRef.current = null;
+    }, [processedJsx]);
+    const handleError = useCallback(
+      (err) => {
+        if (errorReportedRef.current === processedJsx) {
+          return;
+        }
+        errorReportedRef.current = processedJsx;
+        setError(err);
+        onErrorProp?.(err);
+      },
+      [processedJsx, onErrorProp, setError]
+    );
+    return /* @__PURE__ */ jsx("div", { className: cn("jsx-preview-content", className), ...props, children: /* @__PURE__ */ jsx(
+      JsxParser,
+      {
+        bindings,
+        components,
+        jsx: processedJsx,
+        onError: handleError,
+        renderInWrapper: false
+      }
+    ) });
+  }
+);
+JSXPreviewContent.displayName = "JSXPreviewContent";
+const renderChildren = (children, error) => {
+  if (typeof children === "function") {
+    return children(error);
+  }
+  return children;
+};
+const JSXPreviewError = memo(
+  ({ className, children, ...props }) => {
+    const { error } = useJSXPreview();
+    if (!error) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-destructive text-sm",
+          className
+        ),
+        ...props,
+        children: children ? renderChildren(children, error) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: error.message })
+        ] })
+      }
+    );
+  }
+);
+JSXPreviewError.displayName = "JSXPreviewError";
+export {
+  JSXPreview,
+  JSXPreviewContent,
+  JSXPreviewError,
+  useJSXPreview
+};