@oppulence/design-system 1.0.4 → 1.0.5

package/src/components/atoms/text-shimmer.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { motion } from "framer-motion";
+import React, { useMemo, type JSX } from "react";
+import { cn } from "../../../lib/utils";
+
+type TextShimmerSize = "xs" | "sm" | "md" | "lg";
+
+export type TextShimmerProps = {
+  children: string;
+  as?: React.ElementType;
+  duration?: number;
+  spread?: number;
+  size?: TextShimmerSize;
+  baseColor?: string;
+  gradientColor?: string;
+};
+
+const sizeClasses: Record<TextShimmerSize, string> = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+};
+
+function TextShimmerComponent({
+  children,
+  as: Component = "p",
+  duration = 2,
+  spread = 2,
+  size = "sm",
+  baseColor,
+  gradientColor,
+}: TextShimmerProps) {
+  const MotionComponent = motion.create(
+    Component as keyof JSX.IntrinsicElements,
+  );
+
+  const dynamicSpread = useMemo(() => {
+    return children.length * spread;
+  }, [children, spread]);
+
+  const style = {
+    "--spread": `${dynamicSpread}px`,
+    backgroundImage:
+      "var(--bg), linear-gradient(var(--base-color), var(--base-color))",
+    ...(baseColor ? { "--base-color": baseColor } : null),
+    ...(gradientColor ? { "--base-gradient-color": gradientColor } : null),
+  } as React.CSSProperties;
+
+  return (
+    <MotionComponent
+      className={cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text",
+        "text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]",
+        "[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]",
+        "dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]",
+        sizeClasses[size],
+      )}
+      initial={{ backgroundPosition: "100% center" }}
+      animate={{ backgroundPosition: "0% center" }}
+      transition={{
+        repeat: Number.POSITIVE_INFINITY,
+        duration,
+        ease: "linear",
+      }}
+      style={style}
+    >
+      {children}
+    </MotionComponent>
+  );
+}
+
+export const TextShimmer = React.memo(TextShimmerComponent);

package/src/components/molecules/actions.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { Button, type ButtonProps } from "../atoms/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+export type ActionsProps = Omit<ComponentProps<"div">, "className">;
+
+export const Actions = ({ children, ...props }: ActionsProps) => (
+  <div className="flex items-center gap-1 text-muted-foreground" {...props}>
+    {children}
+  </div>
+);
+
+export type ActionProps = Omit<ButtonProps, "className"> & {
+  tooltip?: string;
+  label?: string;
+};
+
+export const Action = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-lg",
+  ...props
+}: ActionProps) => {
+  const button = (
+    <Button size={size} type="button" variant={variant} {...props}>
+      {children}
+      <span className="sr-only">{label || tooltip}</span>
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger
+          render={<Button size={size} type="button" variant={variant} {...props} />}
+        >
+          {children}
+          <span className="sr-only">{label || tooltip}</span>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{tooltip}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return button;
+};

package/src/components/molecules/branch.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import type { ChatRole } from "../../../lib/ai";
+import { cn } from "../../../lib/utils";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactElement } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+import { buttonVariants } from "../atoms/button";
+
+type BranchContextType = {
+  currentBranch: number;
+  totalBranches: number;
+  goToPrevious: () => void;
+  goToNext: () => void;
+  branches: ReactElement[];
+  setBranches: (branches: ReactElement[]) => void;
+};
+
+const BranchContext = createContext<BranchContextType | null>(null);
+
+const useBranch = () => {
+  const context = useContext(BranchContext);
+
+  if (!context) {
+    throw new Error("Branch components must be used within Branch");
+  }
+
+  return context;
+};
+
+export type BranchProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
+  defaultBranch?: number;
+  onBranchChange?: (branchIndex: number) => void;
+};
+
+export const Branch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  ...props
+}: BranchProps) => {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState<ReactElement[]>([]);
+
+  const handleBranchChange = (newBranch: number) => {
+    setCurrentBranch(newBranch);
+    onBranchChange?.(newBranch);
+  };
+
+  const goToPrevious = () => {
+    const newBranch =
+      currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  };
+
+  const goToNext = () => {
+    const newBranch =
+      currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  };
+
+  const contextValue: BranchContextType = {
+    currentBranch,
+    totalBranches: branches.length,
+    goToPrevious,
+    goToNext,
+    branches,
+    setBranches,
+  };
+
+  return (
+    <BranchContext.Provider value={contextValue}>
+      <div className="grid w-full gap-2 [&>div]:pb-0" {...props} />
+    </BranchContext.Provider>
+  );
+};
+
+export type BranchMessagesProps = Omit<HTMLAttributes<HTMLDivElement>, "className">;
+
+export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => {
+  const { currentBranch, setBranches, branches } = useBranch();
+  const childrenArray = Array.isArray(children) ? children : [children];
+
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray as ReactElement[]);
+    }
+  }, [childrenArray, branches, setBranches]);
+
+  return (childrenArray as ReactElement[]).map((branch, index) => (
+    <div
+      className={cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden",
+      )}
+      key={branch.key}
+      {...props}
+    >
+      {branch}
+    </div>
+  ));
+};
+
+export type BranchSelectorProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
+  from: ChatRole;
+};
+
+export const BranchSelector = ({ from, ...props }: BranchSelectorProps) => {
+  const { totalBranches } = useBranch();
+
+  if (totalBranches <= 1) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 self-end px-10",
+        from === "assistant" ? "justify-start" : "justify-end",
+      )}
+      {...props}
+    />
+  );
+};
+
+export type BranchPreviousProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "className"
+>;
+
+export const BranchPrevious = ({ children, ...props }: BranchPreviousProps) => {
+  const { goToPrevious, totalBranches } = useBranch();
+
+  return (
+    <button
+      aria-label="Previous branch"
+      className={cn(
+        buttonVariants({ variant: "ghost", size: "icon-round-sm" }),
+        "text-muted-foreground hover:text-foreground",
+      )}
+      disabled={totalBranches <= 1}
+      onClick={goToPrevious}
+      type="button"
+      {...props}
+    >
+      {children ?? <ChevronLeftIcon size={14} />}
+    </button>
+  );
+};
+
+export type BranchNextProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "className"
+>;
+
+export const BranchNext = ({ children, ...props }: BranchNextProps) => {
+  const { goToNext, totalBranches } = useBranch();
+
+  return (
+    <button
+      aria-label="Next branch"
+      className={cn(
+        buttonVariants({ variant: "ghost", size: "icon-round-sm" }),
+        "text-muted-foreground hover:text-foreground",
+      )}
+      disabled={totalBranches <= 1}
+      onClick={goToNext}
+      type="button"
+      {...props}
+    >
+      {children ?? <ChevronRightIcon size={14} />}
+    </button>
+  );
+};
+
+export type BranchPageProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  "className"
+>;
+
+export const BranchPage = ({ ...props }: BranchPageProps) => {
+  const { currentBranch, totalBranches } = useBranch();
+
+  return (
+    <span
+      className="font-medium text-muted-foreground text-xs tabular-nums"
+      {...props}
+    >
+      {currentBranch + 1} of {totalBranches}
+    </span>
+  );
+};

package/src/components/molecules/code-block.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { createContext, useContext, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+  oneDark,
+  oneLight,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+
+import { cn } from "../../../lib/utils";
+import { buttonVariants } from "../atoms/button";
+
+type CodeBlockContextType = {
+  code: string;
+};
+
+const CodeBlockContext = createContext<CodeBlockContextType>({
+  code: "",
+});
+
+export type CodeBlockProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
+  code: string;
+  language: string;
+  showLineNumbers?: boolean;
+  children?: ReactNode;
+};
+
+export const CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  children,
+  ...props
+}: CodeBlockProps) => (
+  <CodeBlockContext.Provider value={{ code }}>
+    <div
+      className="relative w-full overflow-hidden rounded-md border bg-background text-foreground"
+      {...props}
+    >
+      <div className="relative">
+        {/* @ts-expect-error - SyntaxHighlighter is not a valid JSX component */}
+        <SyntaxHighlighter
+          className="overflow-hidden dark:hidden"
+          codeTagProps={{
+            className: "text-sm",
+          }}
+          customStyle={{
+            margin: 0,
+            padding: "1rem",
+            fontSize: "0.875rem",
+            background: "hsl(var(--background))",
+            color: "hsl(var(--foreground))",
+          }}
+          language={language}
+          lineNumberStyle={{
+            color: "hsl(var(--muted-foreground))",
+            paddingRight: "1rem",
+            minWidth: "2.5rem",
+          }}
+          showLineNumbers={showLineNumbers}
+          style={oneLight}
+        >
+          {code}
+        </SyntaxHighlighter>
+        {/* @ts-expect-error - SyntaxHighlighter is not a valid JSX component */}
+        <SyntaxHighlighter
+          className="hidden overflow-hidden dark:block"
+          codeTagProps={{
+            className: "text-sm",
+          }}
+          customStyle={{
+            margin: 0,
+            padding: "1rem",
+            fontSize: "0.875rem",
+            background: "hsl(var(--background))",
+            color: "hsl(var(--foreground))",
+          }}
+          language={language}
+          lineNumberStyle={{
+            color: "hsl(var(--muted-foreground))",
+            paddingRight: "1rem",
+            minWidth: "2.5rem",
+          }}
+          showLineNumbers={showLineNumbers}
+          style={oneDark}
+        >
+          {code}
+        </SyntaxHighlighter>
+        {children && (
+          <div className="absolute top-2 right-2 flex items-center gap-2">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  </CodeBlockContext.Provider>
+);
+
+export type CodeBlockCopyButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "className"
+> & {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+};
+
+export const CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  ...props
+}: CodeBlockCopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { code } = useContext(CodeBlockContext);
+
+  const copyToClipboard = async () => {
+    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(code);
+      setIsCopied(true);
+      onCopy?.();
+      setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  };
+
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <button
+      className={cn(
+        buttonVariants({ variant: "ghost", size: "icon-xs" }),
+        "shrink-0",
+      )}
+      onClick={copyToClipboard}
+      type="button"
+      {...props}
+    >
+      {children ?? <Icon size={14} />}
+    </button>
+  );
+};

package/src/components/molecules/form.tsx

@@ -0,0 +1,177 @@
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLAttributes<HTMLDivElement>, "className">
+>(({ ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className="space-y-2" {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  HTMLLabelElement,
+  Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "className">
+>(({ ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <label
+      ref={ref}
+      htmlFor={formItemId}
+      className={
+        error
+          ? "gap-2 text-sm leading-none font-medium text-destructive group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed"
+          : "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed"
+      }
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  Omit<React.HTMLAttributes<HTMLParagraphElement>, "className">
+>(({ ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className="text-[0.8rem] text-muted-foreground"
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  Omit<React.HTMLAttributes<HTMLParagraphElement>, "className">
+>(({ children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className="text-[0.8rem] font-medium text-destructive"
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/src/components/molecules/index.ts

@@ -1,18 +1,24 @@
 export * from "./accordion";
+export * from "./actions";
 export * from "./ai-chat";
 export * from "./alert";
+export * from "./branch";
 export * from "./breadcrumb";
 export * from "./button-group";
 export * from "./card";
 export * from "./collapsible";
+export * from "./code-block";
 export * from "./command-search";
 export * from "./empty";
 export * from "./field";
+export * from "./form";
 export * from "./grid";
 export * from "./hover-card";
+export * from "./inline-citation";
 export * from "./input-group";
 export * from "./input-otp";
 export * from "./item";
+export * from "./message";
 export * from "./page-header";
 export * from "./pagination";
 export * from "./popover";
@@ -22,8 +28,14 @@ export * from "./scroll-area";
 export * from "./section";
 export * from "./select";
 export * from "./settings";
+export * from "./sources";
+export * from "./suggestion";
+export * from "./task";
 export * from "./table";
 export * from "./tabs";
 export * from "./theme-switcher";
+export * from "./time-range-input";
 export * from "./toggle-group";
+export * from "./tool";
+export * from "./tool-call-indicator";
 export * from "./tooltip";