@gugacoder/agentic-chat 0.2.0

package/src/index.ts

@@ -0,0 +1,80 @@
+// @codrstudio/agentic-chat
+// Barrel exports
+
+// Componente principal
+export { Chat } from "./components/Chat.js";
+export type { ChatProps } from "./components/Chat.js";
+
+export { useBackboneChat } from "./hooks/useBackboneChat.js";
+export type { UseBackboneChatOptions, Message } from "./hooks/useBackboneChat.js";
+
+export { ChatProvider, useChatContext } from "./hooks/ChatProvider.js";
+export type { ChatProviderProps } from "./hooks/ChatProvider.js";
+
+export { Markdown } from "./components/Markdown.js";
+export { StreamingIndicator } from "./components/StreamingIndicator.js";
+export { ErrorNote } from "./components/ErrorNote.js";
+export type { ErrorNoteProps } from "./components/ErrorNote.js";
+export { MessageBubble } from "./components/MessageBubble.js";
+export type { MessageBubbleProps } from "./components/MessageBubble.js";
+export { MessageList } from "./components/MessageList.js";
+export type { MessageListProps } from "./components/MessageList.js";
+export { MessageInput } from "./components/MessageInput.js";
+export type { MessageInputProps, Attachment } from "./components/MessageInput.js";
+
+export { PartRenderer } from "./parts/PartRenderer.js";
+export type { PartRendererProps } from "./parts/PartRenderer.js";
+
+export { ReasoningBlock } from "./parts/ReasoningBlock.js";
+export type { ReasoningBlockProps } from "./parts/ReasoningBlock.js";
+
+export { ToolActivity, defaultToolIconMap } from "./parts/ToolActivity.js";
+export type { ToolActivityProps, ToolActivityState } from "./parts/ToolActivity.js";
+
+export { ToolResult } from "./parts/ToolResult.js";
+export type { ToolResultProps } from "./parts/ToolResult.js";
+
+// Display Renderers
+export { AlertRenderer } from "./display/AlertRenderer.js";
+export { MetricCardRenderer } from "./display/MetricCardRenderer.js";
+export { PriceHighlightRenderer } from "./display/PriceHighlightRenderer.js";
+export { FileCardRenderer } from "./display/FileCardRenderer.js";
+export { CodeBlockRenderer } from "./display/CodeBlockRenderer.js";
+export { SourcesListRenderer } from "./display/SourcesListRenderer.js";
+export { StepTimelineRenderer } from "./display/StepTimelineRenderer.js";
+export { ProgressStepsRenderer } from "./display/ProgressStepsRenderer.js";
+export { ChartRenderer } from "./display/ChartRenderer.js";
+export { CarouselRenderer } from "./display/CarouselRenderer.js";
+export { ProductCardRenderer } from "./display/ProductCardRenderer.js";
+export { ComparisonTableRenderer } from "./display/ComparisonTableRenderer.js";
+export { DataTableRenderer } from "./display/DataTableRenderer.js";
+export { SpreadsheetRenderer } from "./display/SpreadsheetRenderer.js";
+export { GalleryRenderer } from "./display/GalleryRenderer.js";
+export { ImageViewerRenderer } from "./display/ImageViewerRenderer.js";
+export { LinkPreviewRenderer } from "./display/LinkPreviewRenderer.js";
+export { MapViewRenderer } from "./display/MapViewRenderer.js";
+export { ChoiceButtonsRenderer } from "./display/ChoiceButtonsRenderer.js";
+
+// Display Registry
+export { defaultDisplayRenderers, resolveDisplayRenderer } from "./display/registry.js";
+export type { DisplayRendererMap, DisplayActionName } from "./display/registry.js";
+
+// Conversation management
+export {
+  ConversationList,
+  ConversationBar,
+  useConversations,
+  useIsMobile,
+  formatRelativeTime,
+  buildInitialMessages,
+  groupConversations,
+} from "./conversations/index.js";
+
+export type {
+  ConversationListProps,
+  ConversationBarProps,
+  UseConversationsOptions,
+  UseConversationsReturn,
+  Conversation,
+  BackendMessage,
+} from "./conversations/index.js";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/parts/PartRenderer.tsx

@@ -0,0 +1,198 @@
+import { memo, useState } from "react";
+import { Paperclip, FileText, ChevronDown } from "lucide-react";
+import { Markdown } from "../components/Markdown.js";
+import { LazyRender } from "../components/LazyRender.js";
+import { ReasoningBlock } from "./ReasoningBlock.js";
+import { ToolActivity } from "./ToolActivity.js";
+import { ToolResult } from "./ToolResult.js";
+import { resolveDisplayRenderer } from "../display/registry.js";
+import type { DisplayRendererMap } from "../display/registry.js";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../ui/collapsible.js";
+import { cn } from "../lib/utils.js";
+
+const HEAVY_RENDERERS = new Set([
+  "chart", "map", "table",
+  "spreadsheet", "gallery", "image",
+]);
+
+// Minimal part types — mirrors @ai-sdk/react Message["parts"]
+type TextPart = { type: "text"; text: string };
+type ReasoningPart = { type: "reasoning"; reasoning: string };
+type ToolInvocationPart = {
+  type: "tool-invocation";
+  toolInvocation: {
+    toolName: string;
+    toolCallId?: string;
+    state: "call" | "partial-call" | "result";
+    args?: Record<string, unknown>;
+    result?: unknown;
+  };
+};
+type ImageAttachmentPart = { type: "image"; _ref?: string; mimeType?: string };
+type FileAttachmentPart = { type: "file"; _ref?: string; mimeType?: string };
+type MessagePart = TextPart | ReasoningPart | ToolInvocationPart | ImageAttachmentPart | FileAttachmentPart | { type: string };
+
+export interface PartRendererProps {
+  part: MessagePart;
+  isStreaming?: boolean;
+  displayRenderers?: DisplayRendererMap;
+  attachmentUrl?: (ref: string) => string;
+}
+
+// ─── Attachment sub-components ────────────────────────────────────────────────
+
+function AttachmentImage({ src }: { src: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <img
+        src={src}
+        loading="lazy"
+        alt="Imagem anexada"
+        className="max-w-xs rounded-lg border cursor-pointer object-cover"
+        onClick={() => setOpen(true)}
+      />
+      {open && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
+          onClick={() => setOpen(false)}
+        >
+          <img
+            src={src}
+            alt="Imagem em tamanho real"
+            className="max-w-[90vw] max-h-[90vh] rounded-lg"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
+    </>
+  );
+}
+
+function AudioAttachment({ src }: { src: string }) {
+  return (
+    <audio controls src={src} className="max-w-xs w-full" />
+  );
+}
+
+function PdfChip({ src, filename }: { src: string; filename: string }) {
+  return (
+    <a
+      href={src}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center gap-2 rounded-lg border bg-muted px-3 py-2 text-sm hover:bg-muted/80 transition-colors"
+    >
+      <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <span className="max-w-[200px] truncate">{filename}</span>
+    </a>
+  );
+}
+
+function AttachmentTextBlock({ filename, content }: { filename: string; content: string }) {
+  const [open, setOpen] = useState(false);
+  const lines = content.split("\n");
+  const preview = lines.slice(0, 3).join("\n") + (lines.length > 3 && !open ? "\n…" : "");
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className="rounded-lg border text-xs overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 border-b">
+        <Paperclip className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <span className="flex-1 truncate font-medium">{filename}</span>
+        <CollapsibleTrigger asChild>
+          <button type="button" className="text-muted-foreground hover:text-foreground transition-colors" aria-label={open ? "Recolher" : "Expandir"}>
+            <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", open && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+      </div>
+      <pre className="px-3 py-2 text-muted-foreground whitespace-pre-wrap break-words">{preview}</pre>
+      <CollapsibleContent>
+        <pre className="px-3 py-2 max-h-40 overflow-auto whitespace-pre-wrap break-words border-t">{content}</pre>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// ─── Main renderer ────────────────────────────────────────────────────────────
+
+export const PartRenderer = memo(function PartRenderer({ part, isStreaming, displayRenderers, attachmentUrl }: PartRendererProps) {
+  switch (part.type) {
+    case "text": {
+      const p = part as TextPart;
+      // Pre-processed attachment text: "[📎 filename]\ncontent"
+      if (p.text.startsWith("[📎")) {
+        const firstNewline = p.text.indexOf("\n");
+        const header = firstNewline >= 0 ? p.text.slice(0, firstNewline) : p.text;
+        const body = firstNewline >= 0 ? p.text.slice(firstNewline + 1) : "";
+        const match = header.match(/^\[📎\s+(.+?)\]?$/);
+        const filename = match?.[1] ?? header;
+        return <AttachmentTextBlock filename={filename} content={body} />;
+      }
+      return <Markdown>{p.text}</Markdown>;
+    }
+
+    case "reasoning": {
+      const p = part as ReasoningPart;
+      return <ReasoningBlock content={p.reasoning} isStreaming={isStreaming} />;
+    }
+
+    case "tool-invocation": {
+      const { toolInvocation } = part as ToolInvocationPart;
+      const isDisplay = toolInvocation.toolName.startsWith("display_");
+
+      if (isDisplay && toolInvocation.state === "result") {
+        const result = toolInvocation.result as Record<string, unknown>;
+        const action = toolInvocation.toolName.replace("display_", "");
+        const Renderer = resolveDisplayRenderer(action, displayRenderers);
+        if (Renderer) {
+          const rendered = <Renderer {...result} />;
+          if (!isStreaming && action && HEAVY_RENDERERS.has(action)) {
+            return <LazyRender>{rendered}</LazyRender>;
+          }
+          return rendered;
+        }
+      }
+
+      if (toolInvocation.state === "result") {
+        return (
+          <ToolResult
+            toolName={toolInvocation.toolName}
+            result={toolInvocation.result}
+          />
+        );
+      }
+
+      return (
+        <ToolActivity
+          toolName={toolInvocation.toolName}
+          state={toolInvocation.state}
+          args={toolInvocation.args}
+        />
+      );
+    }
+
+    case "image": {
+      const p = part as ImageAttachmentPart;
+      if (!p._ref || !attachmentUrl) return null;
+      return <AttachmentImage src={attachmentUrl(p._ref)} />;
+    }
+
+    case "file": {
+      const p = part as FileAttachmentPart;
+      if (!p._ref || !attachmentUrl) return null;
+      const src = attachmentUrl(p._ref);
+      if (p.mimeType?.startsWith("audio/")) {
+        return <AudioAttachment src={src} />;
+      }
+      if (p.mimeType === "application/pdf") {
+        // Extract a human-readable filename from the att_ts_hex.ext pattern
+        const filename = p._ref.replace(/^att_\d+_[0-9a-f]+\./, "") || p._ref;
+        return <PdfChip src={src} filename={filename} />;
+      }
+      return null;
+    }
+
+    default:
+      return null;
+  }
+});

package/src/parts/ReasoningBlock.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { Brain, ChevronDown, ChevronRight } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+
+export interface ReasoningBlockProps {
+  content: string;
+  isStreaming?: boolean;
+  className?: string;
+}
+
+export function ReasoningBlock({ content, isStreaming = false, className }: ReasoningBlockProps) {
+  const [expanded, setExpanded] = useState(isStreaming);
+
+  useEffect(() => {
+    if (isStreaming) {
+      setExpanded(true);
+    } else {
+      setExpanded(false);
+    }
+  }, [isStreaming]);
+
+  return (
+    <Collapsible open={expanded} onOpenChange={setExpanded} className={className}>
+      <div className="border border-purple-500/30 bg-purple-500/5 rounded-md text-sm overflow-hidden">
+        <CollapsibleTrigger className="flex items-center gap-2 px-3 py-2 w-full text-left font-medium text-purple-400 hover:bg-purple-500/10 cursor-pointer">
+          <Brain className="h-3.5 w-3.5" aria-hidden="true" />
+          <span className="font-mono text-xs">reasoning:</span>
+          {expanded
+            ? <ChevronDown className="h-3.5 w-3.5 ml-auto" aria-hidden="true" />
+            : <ChevronRight className="h-3.5 w-3.5 ml-auto" aria-hidden="true" />
+          }
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="max-h-96 overflow-y-auto px-3 py-3 text-purple-300/80 whitespace-pre-wrap break-words border-t border-purple-500/20 text-xs">
+            {content}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}

package/src/parts/ToolActivity.tsx

@@ -0,0 +1,79 @@
+import { Check, Download, FileText, FilePlus, FolderSearch, Globe, Loader2, Pencil, Search, Terminal, Wrench, type LucideIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+
+export type ToolActivityState = "call" | "partial-call" | "result";
+
+export interface ToolActivityProps {
+  toolName: string;
+  state: ToolActivityState;
+  args?: Record<string, unknown>;
+  className?: string;
+  iconMap?: Partial<Record<string, LucideIcon>>;
+}
+
+export const defaultToolIconMap: Record<string, LucideIcon> = {
+  WebSearch: Globe,
+  Bash: Terminal,
+  Read: FileText,
+  Edit: Pencil,
+  Write: FilePlus,
+  Grep: Search,
+  Glob: FolderSearch,
+  WebFetch: Download,
+  ListDir: FolderSearch,
+};
+
+function formatToolName(name: string): string {
+  return name
+    .replace(/_/g, " ")
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function resolveIcon(toolName: string, iconMap: Record<string, LucideIcon | undefined>): LucideIcon {
+  return iconMap[toolName] ?? Wrench;
+}
+
+function formatArgs(toolName: string, args?: Record<string, unknown>): string | null {
+  if (!args) return null;
+  if (toolName === "Bash" && args.command) return String(args.command);
+  if (toolName === "Read" && args.path) return String(args.path);
+  if (toolName === "Edit" && args.file_path) return String(args.file_path);
+  if (toolName === "Write" && args.file_path) return String(args.file_path);
+  if (toolName === "Grep" && args.pattern) return String(args.pattern);
+  if (toolName === "Glob" && args.pattern) return String(args.pattern);
+  if (toolName === "WebSearch" && args.query) return String(args.query);
+  if (toolName === "ListDir" && args.path) return String(args.path);
+  return null;
+}
+
+export function ToolActivity({ toolName, state, args, className, iconMap }: ToolActivityProps) {
+  const mergedIconMap = iconMap ? { ...defaultToolIconMap, ...iconMap } : defaultToolIconMap;
+  const Icon = resolveIcon(toolName, mergedIconMap);
+  const isActive = state === "call" || state === "partial-call";
+  const displayName = formatToolName(toolName);
+  const argsPreview = formatArgs(toolName, args);
+
+  return (
+    <div className={cn(
+      "flex items-center gap-2 rounded-md border px-3 py-2 text-sm",
+      "border-amber-500/30 bg-amber-500/5",
+      className
+    )}>
+      <span className="text-amber-500 shrink-0" aria-hidden="true">
+        <Icon size={14} />
+      </span>
+      <span className="font-medium font-mono text-amber-500">{displayName}</span>
+      {argsPreview && (
+        <span className="truncate text-xs text-muted-foreground font-mono max-w-[300px]">{argsPreview}</span>
+      )}
+      <span className="ml-auto text-muted-foreground">
+        {isActive ? (
+          <Loader2 size={14} className="animate-spin text-amber-500" aria-label="Executando..." />
+        ) : (
+          <Check size={14} className="text-green-500" aria-label="Concluido" />
+        )}
+      </span>
+    </div>
+  );
+}

package/src/parts/ToolResult.tsx

@@ -0,0 +1,79 @@
+import { AlertCircle, CheckCircle, ChevronDown, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { cn } from "../lib/utils.js";
+
+export interface ToolResultProps {
+  toolName: string;
+  result: unknown;
+  isError?: boolean;
+  className?: string;
+}
+
+function serializeResult(result: unknown): string {
+  try {
+    if (typeof result === "object" && result !== null && "value" in (result as Record<string, unknown>)) {
+      return String((result as Record<string, unknown>).value);
+    }
+    return JSON.stringify(result, null, 2);
+  } catch {
+    return String(result);
+  }
+}
+
+function extractPreview(result: unknown): string | null {
+  if (typeof result === "string") return result.length > 120 ? result.slice(0, 120) + "..." : result;
+  if (typeof result === "object" && result !== null) {
+    const r = result as Record<string, unknown>;
+    if (typeof r.value === "string") {
+      const v = r.value as string;
+      return v.length > 120 ? v.slice(0, 120) + "..." : v;
+    }
+  }
+  return null;
+}
+
+export function ToolResult({ toolName, result, isError = false, className }: ToolResultProps) {
+  const [expanded, setExpanded] = useState(false);
+  const serialized = serializeResult(result);
+  const preview = extractPreview(result);
+
+  return (
+    <Collapsible open={expanded} onOpenChange={setExpanded} className={className}>
+      <div className={cn(
+        "rounded-md border text-sm overflow-hidden",
+        isError
+          ? "border-red-500/30 bg-red-500/5"
+          : "border-green-500/30 bg-green-500/5"
+      )}>
+        <CollapsibleTrigger
+          className={cn(
+            "flex items-center gap-2 w-full px-3 py-2 text-left font-medium hover:bg-muted/50 cursor-pointer",
+          )}
+          aria-expanded={expanded}
+        >
+          {isError ? (
+            <AlertCircle className="h-3.5 w-3.5 shrink-0 text-red-500" aria-hidden="true" />
+          ) : (
+            <CheckCircle className="h-3.5 w-3.5 shrink-0 text-green-500" aria-hidden="true" />
+          )}
+          <span className={cn("font-mono text-xs", isError ? "text-red-500" : "text-green-500")}>
+            {isError ? `${toolName} erro` : `${toolName} ok`}
+          </span>
+          {!expanded && preview && (
+            <span className="truncate text-xs text-muted-foreground font-mono max-w-[400px] ml-1">{preview}</span>
+          )}
+          {expanded
+            ? <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground ml-auto" aria-hidden="true" />
+            : <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground ml-auto" aria-hidden="true" />
+          }
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <pre className="max-h-80 overflow-y-auto p-3 font-mono text-xs whitespace-pre-wrap break-all bg-muted/30 border-t border-border">
+            {serialized}
+          </pre>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}

package/src/styles.css

@@ -0,0 +1,2 @@
+@import "tailwindcss/utilities" layer(utilities);
+@source "./**/*.tsx";

package/src/ui/alert.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };
+export type { VariantProps };
+export { alertVariants };

package/src/ui/badge.tsx

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/ui/button.tsx

@@ -0,0 +1,54 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }