@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/code-block.cjs

@@ -0,0 +1,380 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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 _button = require('../ui/button');
+
+
+
+
+
+
+var _select = require('../ui/select');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+
+var _react = require('react');
+var _shiki = require('shiki');
+const isItalic = (fontStyle) => fontStyle && fontStyle & 1;
+const isBold = (fontStyle) => fontStyle && fontStyle & 2;
+const isUnderline = (fontStyle) => (
+  // biome-ignore lint/suspicious/noBitwiseOperators: shiki bitflag check
+  // oxlint-disable-next-line eslint(no-bitwise)
+  fontStyle && fontStyle & 4
+);
+const addKeysToTokens = (lines) => lines.map((line, lineIdx) => ({
+  key: `line-${lineIdx}`,
+  tokens: line.map((token, tokenIdx) => ({
+    key: `line-${lineIdx}-${tokenIdx}`,
+    token
+  }))
+}));
+const TokenSpan = ({ token }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "span",
+  {
+    className: "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]",
+    style: {
+      backgroundColor: token.bgColor,
+      color: token.color,
+      fontStyle: isItalic(token.fontStyle) ? "italic" : void 0,
+      fontWeight: isBold(token.fontStyle) ? "bold" : void 0,
+      textDecoration: isUnderline(token.fontStyle) ? "underline" : void 0,
+      ...token.htmlStyle
+    },
+    children: token.content
+  }
+);
+const LineSpan = ({
+  keyedLine,
+  showLineNumbers
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: showLineNumbers ? LINE_NUMBER_CLASSES : "block", children: keyedLine.tokens.length === 0 ? "\n" : keyedLine.tokens.map(({ token, key }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenSpan, { token }, key)) });
+const CodeBlockContext = _react.createContext.call(void 0, {
+  code: ""
+});
+const highlighterCache = /* @__PURE__ */ new Map();
+const tokensCache = /* @__PURE__ */ new Map();
+const subscribers = /* @__PURE__ */ new Map();
+const getTokensCacheKey = (code, language) => {
+  const start = code.slice(0, 100);
+  const end = code.length > 100 ? code.slice(-100) : "";
+  return `${language}:${code.length}:${start}:${end}`;
+};
+const getHighlighter = (language) => {
+  const cached = highlighterCache.get(language);
+  if (cached) {
+    return cached;
+  }
+  const highlighterPromise = _shiki.createHighlighter.call(void 0, {
+    langs: [language],
+    themes: ["github-light", "github-dark"]
+  });
+  highlighterCache.set(language, highlighterPromise);
+  return highlighterPromise;
+};
+const createRawTokens = (code) => ({
+  bg: "transparent",
+  fg: "inherit",
+  tokens: code.split("\n").map(
+    (line) => line === "" ? [] : [
+      {
+        color: "inherit",
+        content: line
+      }
+    ]
+  )
+});
+const highlightCode = (code, language, callback) => {
+  const tokensCacheKey = getTokensCacheKey(code, language);
+  const cached = tokensCache.get(tokensCacheKey);
+  if (cached) {
+    return cached;
+  }
+  if (callback) {
+    if (!subscribers.has(tokensCacheKey)) {
+      subscribers.set(tokensCacheKey, /* @__PURE__ */ new Set());
+    }
+    _optionalChain([subscribers, 'access', _ => _.get, 'call', _2 => _2(tokensCacheKey), 'optionalAccess', _3 => _3.add, 'call', _4 => _4(callback)]);
+  }
+  getHighlighter(language).then((highlighter) => {
+    const availableLangs = highlighter.getLoadedLanguages();
+    const langToUse = availableLangs.includes(language) ? language : "text";
+    const result = highlighter.codeToTokens(code, {
+      lang: langToUse,
+      themes: {
+        dark: "github-dark",
+        light: "github-light"
+      }
+    });
+    const tokenized = {
+      bg: _nullishCoalesce(result.bg, () => ( "transparent")),
+      fg: _nullishCoalesce(result.fg, () => ( "inherit")),
+      tokens: result.tokens
+    };
+    tokensCache.set(tokensCacheKey, tokenized);
+    const subs = subscribers.get(tokensCacheKey);
+    if (subs) {
+      for (const sub of subs) {
+        sub(tokenized);
+      }
+      subscribers.delete(tokensCacheKey);
+    }
+  }).catch((error) => {
+    console.error("Failed to highlight code:", error);
+    subscribers.delete(tokensCacheKey);
+  });
+  return null;
+};
+const LINE_NUMBER_CLASSES = _utils.cn.call(void 0, 
+  "block",
+  "before:content-[counter(line)]",
+  "before:inline-block",
+  "before:[counter-increment:line]",
+  "before:w-8",
+  "before:mr-4",
+  "before:text-right",
+  "before:text-muted-foreground/50",
+  "before:font-mono",
+  "before:select-none"
+);
+const CodeBlockBody = _react.memo.call(void 0, 
+  ({
+    tokenized,
+    showLineNumbers,
+    className
+  }) => {
+    const preStyle = _react.useMemo.call(void 0, 
+      () => ({
+        backgroundColor: tokenized.bg,
+        color: tokenized.fg
+      }),
+      [tokenized.bg, tokenized.fg]
+    );
+    const keyedLines = _react.useMemo.call(void 0, 
+      () => addKeysToTokens(tokenized.tokens),
+      [tokenized.tokens]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "pre",
+      {
+        className: _utils.cn.call(void 0, 
+          "dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)] m-0 p-4 text-sm",
+          className
+        ),
+        style: preStyle,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "code",
+          {
+            className: _utils.cn.call(void 0, 
+              "font-mono text-sm",
+              showLineNumbers && "[counter-increment:line_0] [counter-reset:line]"
+            ),
+            children: keyedLines.map((keyedLine) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              LineSpan,
+              {
+                keyedLine,
+                showLineNumbers
+              },
+              keyedLine.key
+            ))
+          }
+        )
+      }
+    );
+  },
+  (prevProps, nextProps) => prevProps.tokenized === nextProps.tokenized && prevProps.showLineNumbers === nextProps.showLineNumbers && prevProps.className === nextProps.className
+);
+CodeBlockBody.displayName = "CodeBlockBody";
+const CodeBlockContainer = ({
+  className,
+  language,
+  style,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+      className
+    ),
+    "data-language": language,
+    style: {
+      containIntrinsicSize: "auto 200px",
+      contentVisibility: "auto",
+      ...style
+    },
+    ...props
+  }
+);
+const CodeBlockHeader = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex items-center justify-between border-b bg-muted/80 px-3 py-2 text-muted-foreground text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+const CodeBlockTitle = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "flex items-center gap-2", className), ...props, children });
+const CodeBlockFilename = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _utils.cn.call(void 0, "font-mono", className), ...props, children });
+const CodeBlockActions = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, "-my-1 -mr-1 flex items-center gap-2", className),
+    ...props,
+    children
+  }
+);
+const CodeBlockContent = ({
+  code,
+  language,
+  showLineNumbers = false
+}) => {
+  const rawTokens = _react.useMemo.call(void 0, () => createRawTokens(code), [code]);
+  const [tokenized, setTokenized] = _react.useState.call(void 0, 
+    () => _nullishCoalesce(highlightCode(code, language), () => ( rawTokens))
+  );
+  _react.useEffect.call(void 0, () => {
+    let cancelled = false;
+    setTokenized(_nullishCoalesce(highlightCode(code, language), () => ( rawTokens)));
+    highlightCode(code, language, (result) => {
+      if (!cancelled) {
+        setTokenized(result);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, rawTokens]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative overflow-auto", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeBlockBody, { showLineNumbers, tokenized }) });
+};
+const CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = _react.useMemo.call(void 0, () => ({ code }), [code]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CodeBlockContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, CodeBlockContainer, { className, language, ...props, children: [
+    children,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      CodeBlockContent,
+      {
+        code,
+        language,
+        showLineNumbers
+      }
+    )
+  ] }) });
+};
+const CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = _react.useState.call(void 0, false);
+  const timeoutRef = _react.useRef.call(void 0, 0);
+  const { code } = _react.useContext.call(void 0, CodeBlockContext);
+  const copyToClipboard = _react.useCallback.call(void 0, async () => {
+    if (typeof window === "undefined" || !_optionalChain([navigator, 'optionalAccess', _5 => _5.clipboard, 'optionalAccess', _6 => _6.writeText])) {
+      _optionalChain([onError, 'optionalCall', _7 => _7(new Error("Clipboard API not available"))]);
+      return;
+    }
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        _optionalChain([onCopy, 'optionalCall', _8 => _8()]);
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout
+        );
+      }
+    } catch (error) {
+      _optionalChain([onError, 'optionalCall', _9 => _9(error)]);
+    }
+  }, [code, onCopy, onError, timeout, isCopied]);
+  _react.useEffect.call(void 0, 
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? _lucidereact.CheckIcon : _lucidereact.CopyIcon;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      className: _utils.cn.call(void 0, "shrink-0", className),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { size: 14 })))
+    }
+  );
+};
+const CodeBlockLanguageSelector = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _select.Select, { ...props });
+const CodeBlockLanguageSelectorTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _select.SelectTrigger,
+  {
+    className: _utils.cn.call(void 0, 
+      "h-7 border-none bg-transparent px-2 text-xs shadow-none",
+      className
+    ),
+    size: "sm",
+    ...props
+  }
+);
+const CodeBlockLanguageSelectorValue = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _select.SelectValue, { ...props });
+const CodeBlockLanguageSelectorContent = ({
+  align = "end",
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _select.SelectContent, { align, ...props });
+const CodeBlockLanguageSelectorItem = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _select.SelectItem, { ...props });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.CodeBlock = CodeBlock; exports.CodeBlockActions = CodeBlockActions; exports.CodeBlockContainer = CodeBlockContainer; exports.CodeBlockContent = CodeBlockContent; exports.CodeBlockCopyButton = CodeBlockCopyButton; exports.CodeBlockFilename = CodeBlockFilename; exports.CodeBlockHeader = CodeBlockHeader; exports.CodeBlockLanguageSelector = CodeBlockLanguageSelector; exports.CodeBlockLanguageSelectorContent = CodeBlockLanguageSelectorContent; exports.CodeBlockLanguageSelectorItem = CodeBlockLanguageSelectorItem; exports.CodeBlockLanguageSelectorTrigger = CodeBlockLanguageSelectorTrigger; exports.CodeBlockLanguageSelectorValue = CodeBlockLanguageSelectorValue; exports.CodeBlockTitle = CodeBlockTitle; exports.highlightCode = highlightCode;

package/dist/components/ai-elements/code-block.d.cts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { BundledLanguage, ThemedToken } from 'shiki';
+import { Button } from '../ui/button.cjs';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+    code: string;
+    language: BundledLanguage;
+    showLineNumbers?: boolean;
+};
+interface TokenizedCode {
+    tokens: ThemedToken[][];
+    fg: string;
+    bg: string;
+}
+declare const highlightCode: (code: string, language: BundledLanguage, callback?: (result: TokenizedCode) => void) => TokenizedCode | null;
+declare const CodeBlockContainer: ({ className, language, style, ...props }: HTMLAttributes<HTMLDivElement> & {
+    language: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockHeader: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockTitle: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockFilename: ({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockActions: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockContent: ({ code, language, showLineNumbers, }: {
+    code: string;
+    language: BundledLanguage;
+    showLineNumbers?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+declare const CodeBlock: ({ code, language, showLineNumbers, className, children, ...props }: CodeBlockProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const CodeBlockCopyButton: ({ onCopy, onError, timeout, children, className, ...props }: CodeBlockCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorProps = ComponentProps<typeof Select>;
+declare const CodeBlockLanguageSelector: (props: CodeBlockLanguageSelectorProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorTriggerProps = ComponentProps<typeof SelectTrigger>;
+declare const CodeBlockLanguageSelectorTrigger: ({ className, ...props }: CodeBlockLanguageSelectorTriggerProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorValueProps = ComponentProps<typeof SelectValue>;
+declare const CodeBlockLanguageSelectorValue: (props: CodeBlockLanguageSelectorValueProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorContentProps = ComponentProps<typeof SelectContent>;
+declare const CodeBlockLanguageSelectorContent: ({ align, ...props }: CodeBlockLanguageSelectorContentProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorItemProps = ComponentProps<typeof SelectItem>;
+declare const CodeBlockLanguageSelectorItem: (props: CodeBlockLanguageSelectorItemProps) => react_jsx_runtime.JSX.Element;
+
+export { CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, type CodeBlockCopyButtonProps, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, type CodeBlockLanguageSelectorContentProps, CodeBlockLanguageSelectorItem, type CodeBlockLanguageSelectorItemProps, type CodeBlockLanguageSelectorProps, CodeBlockLanguageSelectorTrigger, type CodeBlockLanguageSelectorTriggerProps, CodeBlockLanguageSelectorValue, type CodeBlockLanguageSelectorValueProps, CodeBlockTitle, highlightCode };

package/dist/components/ai-elements/code-block.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { BundledLanguage, ThemedToken } from 'shiki';
+import { Button } from '../ui/button.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+    code: string;
+    language: BundledLanguage;
+    showLineNumbers?: boolean;
+};
+interface TokenizedCode {
+    tokens: ThemedToken[][];
+    fg: string;
+    bg: string;
+}
+declare const highlightCode: (code: string, language: BundledLanguage, callback?: (result: TokenizedCode) => void) => TokenizedCode | null;
+declare const CodeBlockContainer: ({ className, language, style, ...props }: HTMLAttributes<HTMLDivElement> & {
+    language: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockHeader: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockTitle: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockFilename: ({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockActions: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockContent: ({ code, language, showLineNumbers, }: {
+    code: string;
+    language: BundledLanguage;
+    showLineNumbers?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+declare const CodeBlock: ({ code, language, showLineNumbers, className, children, ...props }: CodeBlockProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const CodeBlockCopyButton: ({ onCopy, onError, timeout, children, className, ...props }: CodeBlockCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorProps = ComponentProps<typeof Select>;
+declare const CodeBlockLanguageSelector: (props: CodeBlockLanguageSelectorProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorTriggerProps = ComponentProps<typeof SelectTrigger>;
+declare const CodeBlockLanguageSelectorTrigger: ({ className, ...props }: CodeBlockLanguageSelectorTriggerProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorValueProps = ComponentProps<typeof SelectValue>;
+declare const CodeBlockLanguageSelectorValue: (props: CodeBlockLanguageSelectorValueProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorContentProps = ComponentProps<typeof SelectContent>;
+declare const CodeBlockLanguageSelectorContent: ({ align, ...props }: CodeBlockLanguageSelectorContentProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorItemProps = ComponentProps<typeof SelectItem>;
+declare const CodeBlockLanguageSelectorItem: (props: CodeBlockLanguageSelectorItemProps) => react_jsx_runtime.JSX.Element;
+
+export { CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, type CodeBlockCopyButtonProps, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, type CodeBlockLanguageSelectorContentProps, CodeBlockLanguageSelectorItem, type CodeBlockLanguageSelectorItemProps, type CodeBlockLanguageSelectorProps, CodeBlockLanguageSelectorTrigger, type CodeBlockLanguageSelectorTriggerProps, CodeBlockLanguageSelectorValue, type CodeBlockLanguageSelectorValueProps, CodeBlockTitle, highlightCode };