@vvedantb/ui 0.1.1 → 0.1.2

package/src/ai-elements/reasoning.tsx

@@ -1,178 +1,178 @@
-"use client";
-import type { ComponentProps, ReactNode } from "react";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../ui/collapsible";
-import { cn } from "../utils/cn";
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
-import { IconBrain, IconChevronDown } from "@tabler/icons-react";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
-import { Streamdown } from "streamdown";
-import { Shimmer } from "./shimmer";
-interface ReasoningContextValue {
-  isStreaming: boolean;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  duration: number | undefined;
-}
-const ReasoningContext = createContext<ReasoningContextValue | null>(null);
-export const useReasoning = () => {
-  const context = useContext(ReasoningContext);
-  if (!context) {
-    throw new Error("Reasoning components must be used within Reasoning");
-  }
-  return context;
-};
-export type ReasoningProps = ComponentProps<typeof Collapsible> & {
-  isStreaming?: boolean;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  duration?: number;
-};
-const AUTO_CLOSE_DELAY = 1000;
-const MS_IN_S = 1000;
-export function Reasoning({
-  className,
-  isStreaming = false,
-  open,
-  defaultOpen,
-  onOpenChange,
-  duration: durationProp,
-  children,
-  ...props
-}: ReasoningProps) {
-  const resolvedDefaultOpen = defaultOpen ?? isStreaming;
-  // Track if defaultOpen was explicitly set to false (to prevent auto-open)
-  const isExplicitlyClosed = defaultOpen === false;
-  const [isOpen, setIsOpen] = useControllableState<boolean>({
-    defaultProp: resolvedDefaultOpen,
-    onChange: onOpenChange,
-    prop: open,
-  });
-  const [duration, setDuration] = useControllableState<number | undefined>({
-    defaultProp: undefined,
-    prop: durationProp,
-  });
-  const hasEverStreamedRef = useRef(isStreaming);
-  const [hasAutoClosed, setHasAutoClosed] = useState(false);
-  const startTimeRef = useRef<number | null>(null);
-  // Track when streaming starts and compute duration
-  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]);
-  // Auto-open when streaming starts (unless explicitly closed)
-  useEffect(() => {
-    if (isStreaming && !isOpen && !isExplicitlyClosed) {
-      setIsOpen(true);
-    }
-  }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
-  // Auto-close when streaming ends (once only, and only if it ever streamed)
-  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 = (newOpen: boolean) => {
-    setIsOpen(newOpen);
-  };
-  const contextValue = { duration, isOpen, isStreaming, setIsOpen };
-  return (
-    <ReasoningContext.Provider value={contextValue}>
-      <Collapsible
-        className={cn("not-prose mb-4", className)}
-        onOpenChange={handleOpenChange}
-        open={isOpen}
-        {...props}
-      >
-        {children}
-      </Collapsible>
-    </ReasoningContext.Provider>
-  );
-}
-export type ReasoningTriggerProps = ComponentProps<
-  typeof CollapsibleTrigger
-> & {
-  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
-};
-const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
-  if (isStreaming || duration === 0) {
-    return <Shimmer duration={1}>Thinking...</Shimmer>;
-  }
-  if (duration === undefined) {
-    return <p>Thought for a few seconds</p>;
-  }
-  return <p>Thought for {duration} seconds</p>;
-};
-export function ReasoningTrigger({
-  className,
-  children,
-  getThinkingMessage = defaultGetThinkingMessage,
-  ...props
-}: ReasoningTriggerProps) {
-  const { isStreaming, isOpen, duration } = useReasoning();
-  return (
-    <CollapsibleTrigger
-      className={cn(
-        "flex w-full items-center gap-2 py-1 text-sm text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
-        className,
-      )}
-      {...props}
-    >
-      {children ?? (
-        <>
-          <IconBrain className="size-4" />
-          {getThinkingMessage(isStreaming, duration)}
-          <IconChevronDown
-            className={cn(
-              "size-4 transition-transform duration-150 ease-out",
-              isOpen ? "rotate-180" : "rotate-0",
-            )}
-          />
-        </>
-      )}
-    </CollapsibleTrigger>
-  );
-}
-export type ReasoningContentProps = ComponentProps<
-  typeof CollapsibleContent
-> & {
-  children: string;
-};
-const streamdownPlugins = { cjk, code, math, mermaid };
-export function ReasoningContent({
-  className,
-  children,
-  ...props
-}: ReasoningContentProps) {
-  return (
-    <CollapsibleContent className={cn("pt-2 pb-1", className)} {...props}>
-      <div className="rounded-lg bg-surface-secondary/40 p-3">
-        <Streamdown plugins={streamdownPlugins}>{children}</Streamdown>
-      </div>
-    </CollapsibleContent>
-  );
-}
+"use client";
+import type { ComponentProps, ReactNode } from "react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { cn } from "../utils/cn";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { IconBrain, IconChevronDown } from "@tabler/icons-react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Streamdown } from "streamdown";
+import { Shimmer } from "./shimmer";
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+}
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+export const useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+export function Reasoning({
+  className,
+  isStreaming = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  duration: durationProp,
+  children,
+  ...props
+}: ReasoningProps) {
+  const resolvedDefaultOpen = defaultOpen ?? isStreaming;
+  // Track if defaultOpen was explicitly set to false (to prevent auto-open)
+  const isExplicitlyClosed = defaultOpen === false;
+  const [isOpen, setIsOpen] = useControllableState<boolean>({
+    defaultProp: resolvedDefaultOpen,
+    onChange: onOpenChange,
+    prop: open,
+  });
+  const [duration, setDuration] = useControllableState<number | undefined>({
+    defaultProp: undefined,
+    prop: durationProp,
+  });
+  const hasEverStreamedRef = useRef(isStreaming);
+  const [hasAutoClosed, setHasAutoClosed] = useState(false);
+  const startTimeRef = useRef<number | null>(null);
+  // Track when streaming starts and compute duration
+  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]);
+  // Auto-open when streaming starts (unless explicitly closed)
+  useEffect(() => {
+    if (isStreaming && !isOpen && !isExplicitlyClosed) {
+      setIsOpen(true);
+    }
+  }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+  // Auto-close when streaming ends (once only, and only if it ever streamed)
+  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 = (newOpen: boolean) => {
+    setIsOpen(newOpen);
+  };
+  const contextValue = { duration, isOpen, isStreaming, setIsOpen };
+  return (
+    <ReasoningContext.Provider value={contextValue}>
+      <Collapsible
+        className={cn("not-prose mb-4", className)}
+        onOpenChange={handleOpenChange}
+        open={isOpen}
+        {...props}
+      >
+        {children}
+      </Collapsible>
+    </ReasoningContext.Provider>
+  );
+}
+export type ReasoningTriggerProps = ComponentProps<
+  typeof CollapsibleTrigger
+> & {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+  if (isStreaming || duration === 0) {
+    return <Shimmer duration={1}>Thinking...</Shimmer>;
+  }
+  if (duration === undefined) {
+    return <p>Thought for a few seconds</p>;
+  }
+  return <p>Thought for {duration} seconds</p>;
+};
+export function ReasoningTrigger({
+  className,
+  children,
+  getThinkingMessage = defaultGetThinkingMessage,
+  ...props
+}: ReasoningTriggerProps) {
+  const { isStreaming, isOpen, duration } = useReasoning();
+  return (
+    <CollapsibleTrigger
+      className={cn(
+        "flex w-full items-center gap-2 py-1 text-sm text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <IconBrain className="size-4" />
+          {getThinkingMessage(isStreaming, duration)}
+          <IconChevronDown
+            className={cn(
+              "size-4 transition-transform duration-150 ease-out",
+              isOpen ? "rotate-180" : "rotate-0",
+            )}
+          />
+        </>
+      )}
+    </CollapsibleTrigger>
+  );
+}
+export type ReasoningContentProps = ComponentProps<
+  typeof CollapsibleContent
+> & {
+  children: string;
+};
+const streamdownPlugins = { cjk, code, math, mermaid };
+export function ReasoningContent({
+  className,
+  children,
+  ...props
+}: ReasoningContentProps) {
+  return (
+    <CollapsibleContent className={cn("pt-2 pb-1", className)} {...props}>
+      <div className="rounded-lg bg-surface-secondary/40 p-3">
+        <Streamdown plugins={streamdownPlugins}>{children}</Streamdown>
+      </div>
+    </CollapsibleContent>
+  );
+}

package/src/ai-elements/shimmer.tsx

@@ -1,56 +1,56 @@
-"use client";
-import { type CSSProperties, type ElementType } from "react";
-import { motion } from "motion/react";
-import { cn } from "../utils/cn";
-interface ShimmerCSSProperties extends CSSProperties {
-  "--spread"?: string;
-  "--bg"?: string;
-}
-interface ShimmerProps {
-  children: string;
-  as?: ElementType;
-  className?: string;
-  duration?: number;
-  spread?: number;
-}
-function Shimmer({
-  children,
-  as: Component = "span",
-  className,
-  duration = 2,
-  spread = 2,
-}: ShimmerProps) {
-  const MotionComponent = motion.create(Component);
-  const totalSpread = spread * children.length;
-  const style = {
-    "--spread": `${totalSpread}px`,
-    "--bg": `linear-gradient(
-            90deg,
-            var(--muted) 0%,
-            var(--foreground) calc(50% - var(--spread)),
-            var(--muted) 50%,
-            var(--foreground) calc(50% + var(--spread)),
-            var(--muted) 100%
-          )`,
-    backgroundImage: "var(--bg)",
-    backgroundSize: "200% 100%",
-  } satisfies ShimmerCSSProperties;
-  return (
-    <MotionComponent
-      className={cn(
-        "inline-block bg-clip-text text-transparent [-webkit-text-fill-color:transparent]",
-        className,
-      )}
-      style={style}
-      animate={{ backgroundPosition: ["100% center", "0% center"] }}
-      transition={{
-        duration,
-        ease: "linear",
-        repeat: Number.POSITIVE_INFINITY,
-      }}
-    >
-      {children}
-    </MotionComponent>
-  );
-}
-export { Shimmer, type ShimmerProps };
+"use client";
+import { type CSSProperties, type ElementType } from "react";
+import { motion } from "motion/react";
+import { cn } from "../utils/cn";
+interface ShimmerCSSProperties extends CSSProperties {
+  "--spread"?: string;
+  "--bg"?: string;
+}
+interface ShimmerProps {
+  children: string;
+  as?: ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+}
+function Shimmer({
+  children,
+  as: Component = "span",
+  className,
+  duration = 2,
+  spread = 2,
+}: ShimmerProps) {
+  const MotionComponent = motion.create(Component);
+  const totalSpread = spread * children.length;
+  const style = {
+    "--spread": `${totalSpread}px`,
+    "--bg": `linear-gradient(
+            90deg,
+            var(--muted) 0%,
+            var(--foreground) calc(50% - var(--spread)),
+            var(--muted) 50%,
+            var(--foreground) calc(50% + var(--spread)),
+            var(--muted) 100%
+          )`,
+    backgroundImage: "var(--bg)",
+    backgroundSize: "200% 100%",
+  } satisfies ShimmerCSSProperties;
+  return (
+    <MotionComponent
+      className={cn(
+        "inline-block bg-clip-text text-transparent [-webkit-text-fill-color:transparent]",
+        className,
+      )}
+      style={style}
+      animate={{ backgroundPosition: ["100% center", "0% center"] }}
+      transition={{
+        duration,
+        ease: "linear",
+        repeat: Number.POSITIVE_INFINITY,
+      }}
+    >
+      {children}
+    </MotionComponent>
+  );
+}
+export { Shimmer, type ShimmerProps };

package/src/ai-elements/sources.tsx

@@ -1,77 +1,77 @@
-"use client";
-
-import type { ComponentProps } from "react";
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../ui/collapsible";
-import { cn } from "../utils/cn";
-import { IconBook, IconChevronDown } from "@tabler/icons-react";
-
-export type SourcesProps = ComponentProps<typeof Collapsible>;
-
-export const Sources = ({ className, ...props }: SourcesProps) => (
-  <Collapsible className={cn("w-full", className)} {...props} />
-);
-
-export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
-  count: number;
-};
-
-export const SourcesTrigger = ({
-  className,
-  count,
-  children,
-  ...props
-}: SourcesTriggerProps) => (
-  <CollapsibleTrigger
-    className={cn(
-      "group inline-flex items-center gap-1.5 text-xs text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.97] hover:text-foreground",
-      className,
-    )}
-    {...props}
-  >
-    {children ?? (
-      <>
-        <IconBook className="size-3.5" stroke={1.5} />
-        <span>Used {count} sources</span>
-        <IconChevronDown className="size-3.5 transition-transform duration-150 ease-out group-data-[state=open]:rotate-180" />
-      </>
-    )}
-  </CollapsibleTrigger>
-);
-
-export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
-
-export const SourcesContent = ({
-  className,
-  ...props
-}: SourcesContentProps) => (
-  <CollapsibleContent className={cn("mt-2 space-y-2", className)} {...props} />
-);
-
-export type SourceProps = ComponentProps<"a">;
-
-export const Source = ({
-  href,
-  title,
-  children,
-  className,
-  ...props
-}: SourceProps) => (
-  <a
-    className={cn(
-      "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs text-muted transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary hover:text-foreground",
-      className,
-    )}
-    href={href}
-    rel="noreferrer"
-    target="_blank"
-    {...props}
-  >
-    <span className="line-clamp-1">{children ?? title}</span>
-    <IconBook className="size-3.5 shrink-0" stroke={1.5} />
-  </a>
-);
+"use client";
+
+import type { ComponentProps } from "react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { cn } from "../utils/cn";
+import { IconBook, IconChevronDown } from "@tabler/icons-react";
+
+export type SourcesProps = ComponentProps<typeof Collapsible>;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+  <Collapsible className={cn("w-full", className)} {...props} />
+);
+
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+};
+
+export const SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}: SourcesTriggerProps) => (
+  <CollapsibleTrigger
+    className={cn(
+      "group inline-flex items-center gap-1.5 text-xs text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.97] hover:text-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? (
+      <>
+        <IconBook className="size-3.5" stroke={1.5} />
+        <span>Used {count} sources</span>
+        <IconChevronDown className="size-3.5 transition-transform duration-150 ease-out group-data-[state=open]:rotate-180" />
+      </>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SourcesContent = ({
+  className,
+  ...props
+}: SourcesContentProps) => (
+  <CollapsibleContent className={cn("mt-2 space-y-2", className)} {...props} />
+);
+
+export type SourceProps = ComponentProps<"a">;
+
+export const Source = ({
+  href,
+  title,
+  children,
+  className,
+  ...props
+}: SourceProps) => (
+  <a
+    className={cn(
+      "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs text-muted transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary hover:text-foreground",
+      className,
+    )}
+    href={href}
+    rel="noreferrer"
+    target="_blank"
+    {...props}
+  >
+    <span className="line-clamp-1">{children ?? title}</span>
+    <IconBook className="size-3.5 shrink-0" stroke={1.5} />
+  </a>
+);