@vvedantb/ui 0.0.0-stage → 0.1.0

package/src/ai-elements/chain-of-thought.tsx

@@ -0,0 +1,212 @@
+"use client";
+import type { TablerIcon } from "@tabler/icons-react";
+import type { ComponentProps, ReactNode } from "react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  IconBrain,
+  IconChevronDown,
+  IconPointFilled,
+} from "@tabler/icons-react";
+import { Badge } from "../ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { cn } from "../utils/cn";
+import { flatPanelSubtleClass } from "../ui/surface-classes";
+import { createContext, useContext } from "react";
+interface ChainOfThoughtContextValue {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
+  null,
+);
+const useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought",
+    );
+  }
+  return context;
+};
+export type ChainOfThoughtProps = ComponentProps<"div"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+export function ChainOfThought({
+  className,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}: ChainOfThoughtProps) {
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: open,
+  });
+  const chainOfThoughtContext = { isOpen, setIsOpen };
+  return (
+    <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
+      <div className={cn("not-prose w-full space-y-4", className)} {...props}>
+        {children}
+      </div>
+    </ChainOfThoughtContext.Provider>
+  );
+}
+export type ChainOfThoughtHeaderProps = ComponentProps<
+  typeof CollapsibleTrigger
+> & {
+  icon?: ReactNode;
+};
+export function ChainOfThoughtHeader({
+  className,
+  children,
+  icon,
+  ...props
+}: ChainOfThoughtHeaderProps) {
+  const { isOpen, setIsOpen } = useChainOfThought();
+  return (
+    <Collapsible onOpenChange={setIsOpen} open={isOpen}>
+      <CollapsibleTrigger
+        className={cn(
+          "flex w-full items-center gap-2 text-muted text-sm transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {icon ?? <IconBrain className="size-4" />}
+        <span className="flex-1 text-left">
+          {children ?? "Chain of Thought"}
+        </span>
+        <IconChevronDown
+          className={cn(
+            "size-4 transition-transform duration-150 ease-out",
+            isOpen ? "rotate-180" : "rotate-0",
+          )}
+        />
+      </CollapsibleTrigger>
+    </Collapsible>
+  );
+}
+export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+  icon?: TablerIcon;
+  label: ReactNode;
+  description?: ReactNode;
+  status?: "complete" | "active" | "pending";
+};
+const stepStatusStyles = {
+  active: "text-foreground",
+  complete: "text-muted",
+  pending: "text-muted/50",
+};
+export function ChainOfThoughtStep({
+  className,
+  icon: Icon = IconPointFilled,
+  label,
+  description,
+  status = "complete",
+  children,
+  ...props
+}: ChainOfThoughtStepProps) {
+  return (
+    <div
+      className={cn(
+        "flex gap-2 text-sm",
+        stepStatusStyles[status],
+        "fade-in-0 slide-in-from-top-2 animate-in duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative mt-0.5">
+        <Icon className="size-4" />
+        <div className="absolute top-7 bottom-0 left-1/2 -mx-px w-px bg-separator" />
+      </div>
+      <div className="flex-1 space-y-2 overflow-hidden">
+        <div>{label}</div>
+        {description && <div className="text-muted text-xs">{description}</div>}
+        {children}
+      </div>
+    </div>
+  );
+}
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+export function ChainOfThoughtSearchResults({
+  className,
+  ...props
+}: ChainOfThoughtSearchResultsProps) {
+  return (
+    <div
+      className={cn("flex flex-wrap items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+export function ChainOfThoughtSearchResult({
+  className,
+  children,
+  ...props
+}: ChainOfThoughtSearchResultProps) {
+  return (
+    <Badge
+      className={cn("gap-1 px-2 py-0.5 font-normal text-xs", className)}
+      variant="secondary"
+      {...props}
+    >
+      {children}
+    </Badge>
+  );
+}
+export type ChainOfThoughtContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+export function ChainOfThoughtContent({
+  className,
+  children,
+  ...props
+}: ChainOfThoughtContentProps) {
+  const { isOpen } = useChainOfThought();
+  return (
+    <Collapsible open={isOpen}>
+      <CollapsibleContent
+        className={cn(
+          "mt-2 space-y-3 text-foreground outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+  caption?: string;
+};
+export function ChainOfThoughtImage({
+  className,
+  children,
+  caption,
+  ...props
+}: ChainOfThoughtImageProps) {
+  return (
+    <div className={cn("mt-2 space-y-2", className)} {...props}>
+      <div
+        className={cn(
+          flatPanelSubtleClass,
+          "relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg p-3",
+        )}
+      >
+        {children}
+      </div>
+      {caption && <p className="text-muted text-xs">{caption}</p>}
+    </div>
+  );
+}

package/src/ai-elements/code-block.tsx

@@ -0,0 +1,478 @@
+"use client";
+import type { ComponentProps, CSSProperties, HTMLAttributes } from "react";
+import type {
+  BundledLanguage,
+  BundledTheme,
+  HighlighterGeneric,
+  ThemedToken,
+} from "shiki";
+import { Button } from "../ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/radix-select";
+import { cn } from "../utils/cn";
+import { flatPanelSubtleClass } from "../ui/surface-classes";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { bundledLanguages, createHighlighter } from "shiki";
+const isBundledLanguage = (lang: string): lang is BundledLanguage =>
+  lang in bundledLanguages;
+// Shiki uses bitflags for font styles: 1=italic, 2=bold, 4=underline
+// biome-ignore lint/suspicious/noBitwiseOperators: shiki bitflag check
+// eslint-disable-next-line no-bitwise -- shiki bitflag check
+const isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1;
+// biome-ignore lint/suspicious/noBitwiseOperators: shiki bitflag check
+// eslint-disable-next-line no-bitwise -- shiki bitflag check
+// oxlint-disable-next-line eslint(no-bitwise)
+const isBold = (fontStyle: number | undefined) => fontStyle && fontStyle & 2;
+const isUnderline = (fontStyle: number | undefined) =>
+  // biome-ignore lint/suspicious/noBitwiseOperators: shiki bitflag check
+  // oxlint-disable-next-line eslint(no-bitwise)
+  fontStyle && fontStyle & 4;
+// Transform tokens to include pre-computed keys to avoid noArrayIndexKey lint
+interface KeyedToken {
+  token: ThemedToken;
+  key: string;
+}
+interface KeyedLine {
+  tokens: KeyedToken[];
+  key: string;
+}
+const addKeysToTokens = (lines: ThemedToken[][]): KeyedLine[] =>
+  lines.map((line, lineIdx) => ({
+    key: `line-${lineIdx}`,
+    tokens: line.map((token, tokenIdx) => ({
+      key: `line-${lineIdx}-${tokenIdx}`,
+      token,
+    })),
+  }));
+// Token rendering component
+const TokenSpan = ({ token }: { token: ThemedToken }) => (
+  <span
+    className="dark:bg-(--shiki-dark-bg)! dark:text-(--shiki-dark)!"
+    style={
+      {
+        backgroundColor: token.bgColor,
+        color: token.color,
+        fontStyle: isItalic(token.fontStyle) ? "italic" : undefined,
+        fontWeight: isBold(token.fontStyle) ? "bold" : undefined,
+        textDecoration: isUnderline(token.fontStyle) ? "underline" : undefined,
+        ...token.htmlStyle,
+      } as CSSProperties
+    }
+  >
+    {token.content}
+  </span>
+);
+// Line rendering component
+const LineSpan = ({
+  keyedLine,
+  showLineNumbers,
+}: {
+  keyedLine: KeyedLine;
+  showLineNumbers: boolean;
+}) => (
+  <span className={showLineNumbers ? LINE_NUMBER_CLASSES : "block"}>
+    {keyedLine.tokens.length === 0
+      ? "\n"
+      : keyedLine.tokens.map(({ token, key }) => (
+          <TokenSpan key={key} token={token} />
+        ))}
+  </span>
+);
+// Types
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+  code: string;
+  language: string;
+  showLineNumbers?: boolean;
+};
+interface TokenizedCode {
+  tokens: ThemedToken[][];
+  fg: string;
+  bg: string;
+}
+interface CodeBlockContextType {
+  code: string;
+}
+// Context
+const CodeBlockContext = createContext<CodeBlockContextType>({
+  code: "",
+});
+// Highlighter cache (singleton per language)
+const highlighterCache = new Map<
+  string,
+  Promise<HighlighterGeneric<BundledLanguage, BundledTheme>>
+>();
+// Token cache
+const tokensCache = new Map<string, TokenizedCode>();
+// Subscribers for async token updates
+const subscribers = new Map<string, Set<(result: TokenizedCode) => void>>();
+const getTokensCacheKey = (code: string, language: BundledLanguage) => {
+  const start = code.slice(0, 100);
+  const end = code.length > 100 ? code.slice(-100) : "";
+  return `${language}:${code.length}:${start}:${end}`;
+};
+const getHighlighter = (
+  language: BundledLanguage,
+): Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> => {
+  const cached = highlighterCache.get(language);
+  if (cached) {
+    return cached;
+  }
+  const highlighterPromise = createHighlighter({
+    langs: [language],
+    themes: ["github-light", "github-dark"],
+  });
+  highlighterCache.set(language, highlighterPromise);
+  return highlighterPromise;
+};
+// Create raw tokens for immediate display while highlighting loads
+const createRawTokens = (code: string): TokenizedCode => ({
+  bg: "transparent",
+  fg: "inherit",
+  tokens: code.split("\n").map((line) =>
+    line === ""
+      ? []
+      : [
+          {
+            color: "inherit",
+            content: line,
+          } as ThemedToken,
+        ],
+  ),
+});
+// Synchronous highlight with callback for async results
+export const highlightCode = (
+  code: string,
+  language: string,
+  // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-callbacks)
+  callback?: (result: TokenizedCode) => void,
+): TokenizedCode | null => {
+  if (!isBundledLanguage(language)) return null;
+  const tokensCacheKey = getTokensCacheKey(code, language);
+  // Return cached result if available
+  const cached = tokensCache.get(tokensCacheKey);
+  if (cached) {
+    return cached;
+  }
+  // Subscribe callback if provided
+  if (callback) {
+    if (!subscribers.has(tokensCacheKey)) {
+      subscribers.set(tokensCacheKey, new Set());
+    }
+    subscribers.get(tokensCacheKey)?.add(callback);
+  }
+  // Start highlighting in background - fire-and-forget async pattern
+  getHighlighter(language)
+    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then)
+    .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: TokenizedCode = {
+        bg: result.bg ?? "transparent",
+        fg: result.fg ?? "inherit",
+        tokens: result.tokens,
+      };
+      // Cache the result
+      tokensCache.set(tokensCacheKey, tokenized);
+      // Notify all subscribers
+      const subs = subscribers.get(tokensCacheKey);
+      if (subs) {
+        for (const sub of subs) {
+          sub(tokenized);
+        }
+        subscribers.delete(tokensCacheKey);
+      }
+    })
+    // oxlint-disable-next-line eslint-plugin-promise(prefer-await-to-then), eslint-plugin-promise(prefer-await-to-callbacks)
+    .catch((error) => {
+      console.error("Failed to highlight code:", error);
+      subscribers.delete(tokensCacheKey);
+    });
+  return null;
+};
+// Line number styles using CSS counters
+const LINE_NUMBER_CLASSES = cn(
+  "block",
+  "before:content-[counter(line)]",
+  "before:inline-block",
+  "before:[counter-increment:line]",
+  "before:w-8",
+  "before:mr-4",
+  "before:text-right",
+  "before:text-muted/50",
+  "before:font-mono",
+  "before:select-none",
+);
+function CodeBlockBody({
+  tokenized,
+  showLineNumbers,
+  className,
+}: {
+  tokenized: TokenizedCode;
+  showLineNumbers: boolean;
+  className?: string;
+}) {
+  const preStyle = {
+    backgroundColor: tokenized.bg,
+    color: tokenized.fg,
+  };
+  const keyedLines = addKeysToTokens(tokenized.tokens);
+  return (
+    <pre
+      className={cn(
+        "dark:bg-(--shiki-dark-bg)! dark:text-(--shiki-dark)! m-0 p-4 text-sm",
+        className,
+      )}
+      style={preStyle}
+    >
+      <code
+        className={cn(
+          "font-mono text-sm",
+          showLineNumbers && "[counter-increment:line_0] [counter-reset:line]",
+        )}
+      >
+        {keyedLines.map((keyedLine) => (
+          <LineSpan
+            key={keyedLine.key}
+            keyedLine={keyedLine}
+            showLineNumbers={showLineNumbers}
+          />
+        ))}
+      </code>
+    </pre>
+  );
+}
+export const CodeBlockContainer = ({
+  className,
+  language,
+  style,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & {
+  language: string;
+}) => (
+  <div
+    className={cn(
+      "relative w-full overflow-hidden rounded-lg bg-surface-secondary/60 text-foreground",
+      className,
+    )}
+    data-language={language}
+    style={{
+      containIntrinsicSize: "auto 200px",
+      contentVisibility: "auto",
+      ...style,
+    }}
+    {...props}
+  />
+);
+export const CodeBlockHeader = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      cn(
+        flatPanelSubtleClass,
+        "flex items-center justify-between px-3 py-2 text-muted text-xs",
+      ),
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+export const CodeBlockTitle = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex items-center gap-2", className)} {...props}>
+    {children}
+  </div>
+);
+export const CodeBlockFilename = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("font-mono", className)} {...props}>
+    {children}
+  </span>
+);
+export const CodeBlockActions = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("-my-1 -mr-1 flex items-center gap-2", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+export const CodeBlockContent = ({
+  code,
+  language,
+  showLineNumbers = false,
+}: {
+  code: string;
+  language: string;
+  showLineNumbers?: boolean;
+}) => {
+  // Memoized raw tokens for immediate display
+  const rawTokens = createRawTokens(code);
+  // Try to get cached result synchronously, otherwise use raw tokens
+  const [tokenized, setTokenized] = useState<TokenizedCode>(
+    () => highlightCode(code, language) ?? rawTokens,
+  );
+  useEffect(() => {
+    let cancelled = false;
+    // Reset to raw tokens when code changes (shows current code, not stale tokens)
+    setTokenized(highlightCode(code, language) ?? rawTokens);
+    // Subscribe to async highlighting result
+    highlightCode(code, language, (result) => {
+      if (!cancelled) {
+        setTokenized(result);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, rawTokens]);
+  return (
+    <div className="relative overflow-auto">
+      <CodeBlockBody showLineNumbers={showLineNumbers} tokenized={tokenized} />
+    </div>
+  );
+};
+export const CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}: CodeBlockProps) => {
+  const contextValue = { code };
+  return (
+    <CodeBlockContext.Provider value={contextValue}>
+      <CodeBlockContainer className={className} language={language} {...props}>
+        {children}
+        <CodeBlockContent
+          code={code}
+          language={language}
+          showLineNumbers={showLineNumbers}
+        />
+      </CodeBlockContainer>
+    </CodeBlockContext.Provider>
+  );
+};
+export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+};
+export const CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: CodeBlockCopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<number>(0);
+  const { code } = useContext(CodeBlockContext);
+  const copyToClipboard = async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout,
+        );
+      }
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  };
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    [],
+  );
+  const Icon = isCopied ? IconCheck : IconCopy;
+  return (
+    <Button
+      className={cn("shrink-0", className)}
+      onClick={copyToClipboard}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <Icon size={14} />}
+    </Button>
+  );
+};
+export type CodeBlockLanguageSelectorProps = ComponentProps<typeof Select>;
+export const CodeBlockLanguageSelector = (
+  props: CodeBlockLanguageSelectorProps,
+) => <Select {...props} />;
+export type CodeBlockLanguageSelectorTriggerProps = ComponentProps<
+  typeof SelectTrigger
+>;
+export const CodeBlockLanguageSelectorTrigger = ({
+  className,
+  ...props
+}: CodeBlockLanguageSelectorTriggerProps) => (
+  <SelectTrigger
+    className={cn(
+      "h-7 border-none bg-transparent px-2 text-xs shadow-none",
+      className,
+    )}
+    size="sm"
+    {...props}
+  />
+);
+export type CodeBlockLanguageSelectorValueProps = ComponentProps<
+  typeof SelectValue
+>;
+export const CodeBlockLanguageSelectorValue = (
+  props: CodeBlockLanguageSelectorValueProps,
+) => <SelectValue {...props} />;
+export type CodeBlockLanguageSelectorContentProps = ComponentProps<
+  typeof SelectContent
+>;
+export const CodeBlockLanguageSelectorContent = ({
+  align = "end",
+  ...props
+}: CodeBlockLanguageSelectorContentProps) => (
+  <SelectContent align={align} {...props} />
+);
+export type CodeBlockLanguageSelectorItemProps = ComponentProps<
+  typeof SelectItem
+>;
+export const CodeBlockLanguageSelectorItem = (
+  props: CodeBlockLanguageSelectorItemProps,
+) => <SelectItem {...props} />;