@jiangxiaosheng/digital-agent-platform 1.0.0

package/src/components/layout/sidebar.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useTranslations, useLocale } from "next-intl";
+import {
+  Bot, BookOpen, Settings, Sun, Moon, Globe, ChevronDown, ChevronRight,
+  Folder, File, FileText, FileCode, FolderOpen, X, Copy, Check, RefreshCw,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface WorkspaceEntry {
+  name: string;
+  path: string;
+  relativePath: string;
+  isDir: boolean;
+  sizeDisplay?: string;
+  icon: string;
+}
+
+interface WorkspaceData {
+  currentDisplay: string;
+  parentPath: string | null;
+  entries: WorkspaceEntry[];
+}
+
+export function Sidebar() {
+  const t = useTranslations("nav");
+  const pathname = usePathname();
+  const locale = useLocale();
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const [workspaceOpen, setWorkspaceOpen] = useState(true);
+  const [workspaceData, setWorkspaceData] = useState<WorkspaceData | null>(null);
+  const [workspaceLoading, setWorkspaceLoading] = useState(false);
+  const [currentSubPath, setCurrentSubPath] = useState("");
+  const [copiedPath, setCopiedPath] = useState<string | null>(null);
+
+  useEffect(() => setMounted(true), []);
+  const isDark = resolvedTheme === "dark";
+
+  // Extract agentId from pathname: /zh/agents/:id/...
+  const agentId = pathname.match(/\/agents\/([^/]+)/)?.[1];
+
+  // Fetch workspace files when agentId changes, with 3s polling for real-time updates
+  useEffect(() => {
+    if (!agentId) {
+      setWorkspaceData(null);
+      return;
+    }
+    const fetchWorkspace = async (showLoading = false) => {
+      if (showLoading) setWorkspaceLoading(true);
+      try {
+        const url = `/api/workspace-files?agentId=${agentId}${currentSubPath ? `&path=${encodeURIComponent(currentSubPath)}` : ""}`;
+        const res = await fetch(url);
+        if (res.ok) {
+          const data = await res.json() as WorkspaceData;
+          setWorkspaceData(data);
+        } else {
+          setWorkspaceData(null);
+        }
+      } catch {
+        setWorkspaceData(null);
+      } finally {
+        if (showLoading) setWorkspaceLoading(false);
+      }
+    };
+    void fetchWorkspace(true);
+    const interval = setInterval(() => fetchWorkspace(false), 3000);
+    return () => clearInterval(interval);
+  }, [agentId, currentSubPath]);
+
+  const navItems = [
+    {
+      group: "主菜单",
+      items: [
+        { href: `/${locale}/agents`, icon: Bot, label: t("agents"), tooltip: "管理并对话数字人" },
+        { href: `/${locale}/knowledge`, icon: BookOpen, label: t("knowledge"), tooltip: "上传文档，构建知识库" },
+      ],
+    },
+    {
+      group: "系统",
+      items: [
+        { href: `/${locale}/settings`, icon: Settings, label: t("settings"), tooltip: "配置模型和 API Keys" },
+      ],
+    },
+  ];
+
+  function FileIcon({ icon, isDir }: { icon: string; isDir: boolean }) {
+    if (isDir) return <Folder className="h-3.5 w-3.5 text-yellow-500 shrink-0" />;
+    if (icon === "file-ts" || icon === "file-js") return <FileCode className="h-3.5 w-3.5 text-blue-400 shrink-0" />;
+    if (icon === "file-md") return <FileText className="h-3.5 w-3.5 text-zinc-400 shrink-0" />;
+    if (icon === "file-json") return <FileCode className="h-3.5 w-3.5 text-yellow-400 shrink-0" />;
+    if (icon === "file-py") return <FileCode className="h-3.5 w-3.5 text-green-400 shrink-0" />;
+    if (icon === "file-code") return <FileCode className="h-3.5 w-3.5 text-purple-400 shrink-0" />;
+    if (icon === "file-img") return <File className="h-3.5 w-3.5 text-pink-400 shrink-0" />;
+    return <File className="h-3.5 w-3.5 text-zinc-400 shrink-0" />;
+  }
+
+  const handleEntryClick = (entry: WorkspaceEntry) => {
+    if (entry.isDir) {
+      setCurrentSubPath(entry.relativePath);
+    }
+  };
+
+  const handleGoUp = () => {
+    const parts = currentSubPath.split("/").filter(Boolean);
+    parts.pop();
+    setCurrentSubPath(parts.join("/"));
+  };
+
+  const copyPath = (path: string) => {
+    navigator.clipboard.writeText(path).then(() => {
+      setCopiedPath(path);
+      setTimeout(() => setCopiedPath(null), 1500);
+    });
+  };
+
+  return (
+    <aside className="flex h-screen w-[var(--sidebar-width)] flex-col border-r border-gray-200 bg-[hsl(var(--neo-bg))] dark:border-slate-700/50 dark:bg-slate-900/95 dark:backdrop-blur-sm">
+      {/* Logo */}
+      <div className="flex h-14 items-center border-b border-gray-200 px-4 shrink-0 bg-white/50 dark:border-slate-700/50 dark:bg-slate-800/50">
+        <div className="flex items-center justify-center w-8 h-8 rounded-xl neo-card dark:bg-gradient-to-br dark:from-cyan-600 dark:to-blue-600 mr-2 dark:shadow-lg">
+          <Bot className="h-4 w-4 text-blue-600 dark:text-white" />
+        </div>
+        <span className="font-bold text-sm text-gray-800 dark:bg-gradient-to-r dark:from-cyan-400 dark:to-blue-400 dark:bg-clip-text dark:text-transparent">Agent Platform</span>
+      </div>
+
+      {/* Navigation — grouped with labels */}
+      <nav className="shrink-0 p-2 space-y-3">
+        {navItems.map((group) => (
+          <div key={group.group}>
+            <p className="px-3 mb-1 text-[10px] font-semibold uppercase tracking-widest text-gray-500">
+              {group.group}
+            </p>
+            <div className="space-y-1">
+              {group.items.map((item) => {
+                const active = pathname.startsWith(item.href);
+                return (
+                  <Link key={item.href} href={item.href} title={item.tooltip}>
+                    <span className={cn(
+                      "flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-200 border",
+                      active
+                        ? "neo-card-inset text-blue-600 border-transparent dark:bg-gradient-to-r dark:from-cyan-600/20 dark:to-blue-600/20 dark:text-cyan-400 dark:border-cyan-500/50 dark:shadow-lg dark:shadow-cyan-500/20"
+                        : "text-gray-600 hover:text-gray-900 border-transparent neo-button dark:text-gray-400 dark:hover:text-white dark:hover:border-slate-700 dark:hover:bg-slate-800 hover:scale-[1.02]",
+                    )}>
+                      <item.icon className={cn("h-4 w-4 shrink-0 transition-transform duration-200", active && "text-blue-600 dark:text-cyan-400", !active && "group-hover:scale-110")} />
+                      <span className="truncate">{item.label}</span>
+                      {active && <span className="ml-auto w-2 h-2 rounded-full bg-cyan-400 shadow-lg shadow-cyan-400/50 animate-pulse" />}
+                    </span>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </nav>
+
+      {/* Separator */}
+      <div className="mx-3 border-t border-slate-700/50" />
+
+      {/* Workspace File Tree - 科技感设计 */}
+      <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+        <div
+          onClick={() => setWorkspaceOpen(!workspaceOpen)}
+          className="flex items-center gap-2 px-3 py-2 text-[10px] font-semibold uppercase tracking-widest text-gray-500 hover:text-blue-600 dark:hover:text-cyan-400 transition-all duration-200 w-full text-left shrink-0 hover:bg-gray-50 dark:hover:bg-slate-800/50 cursor-pointer"
+        >
+          {workspaceOpen ? <ChevronDown className="h-3 w-3 transition-transform duration-200" /> : <ChevronRight className="h-3 w-3 transition-transform duration-200" />}
+          工作区
+          {workspaceLoading && <span className="ml-auto text-[9px] normal-case tracking-normal animate-pulse text-blue-600 dark:text-cyan-400">加载中…</span>}
+          {!workspaceLoading && agentId && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setWorkspaceLoading(true);
+                fetch(`/api/workspace-files?agentId=${agentId}${currentSubPath ? `&path=${encodeURIComponent(currentSubPath)}` : ""}`)
+                  .then(r => r.ok ? r.json() : null)
+                  .then(data => setWorkspaceData(data))
+                  .catch(() => {})
+                  .finally(() => setWorkspaceLoading(false));
+              }}
+              title="刷新工作区"
+              className="ml-auto p-0.5 rounded-lg neo-button hover:text-blue-600 dark:hover:bg-cyan-500/20 text-gray-500 dark:text-gray-500 dark:hover:text-cyan-400 transition-all duration-200 normal-case hover:scale-110 dark:border-transparent dark:hover:border-cyan-500/50"
+            >
+              <RefreshCw className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+
+        {workspaceOpen && (
+          <div className="flex flex-col flex-1 min-h-0">
+            {!agentId ? (
+              <p className="px-4 text-[11px] text-muted-foreground/50 italic">进入数字人对话后显示工作区</p>
+            ) : !workspaceData ? (
+              <p className="px-4 text-[11px] text-muted-foreground/50 italic">
+                {workspaceLoading ? "加载中…" : "工作区为空或无法访问"}
+              </p>
+            ) : (
+              <>
+                  {/* 当前路径导航 */}
+                <div className="px-3 pb-1 flex items-center gap-1 shrink-0">
+                  {currentSubPath && (
+                    <button type="button" onClick={handleGoUp}
+                      title="返回上级目录"
+                      className="p-0.5 rounded-lg neo-button text-gray-500 hover:text-blue-600 dark:hover:bg-cyan-500/20 dark:text-gray-400 dark:hover:text-cyan-400 transition-all duration-200 shrink-0 dark:border-transparent dark:hover:border-cyan-500/50">
+                      <ChevronRight className="h-3 w-3 rotate-180" />
+                    </button>
+                  )}
+                  <span className="text-[10px] text-gray-500 font-mono truncate" title={workspaceData.currentDisplay}>
+                    {currentSubPath
+                      ? `…/${currentSubPath.split("/").slice(-2).join("/")}`
+                      : workspaceData.currentDisplay.split("/").slice(-2).join("/")}
+                  </span>
+                  {currentSubPath && (
+                    <button type="button" onClick={() => setCurrentSubPath("")}
+                      title="回到工作区根目录"
+                      className="ml-auto p-0.5 rounded-lg neo-button text-gray-700 hover:text-red-600 dark:hover:bg-red-500/20 dark:text-gray-400 dark:hover:text-red-400 transition-all duration-200 shrink-0 dark:border-transparent dark:hover:border-red-500/50">
+                      <X className="h-3 w-3" />
+                    </button>
+                  )}
+                </div>
+
+                {/* 文件列表 */}
+                <ScrollArea className="flex-1">
+                  <div className="px-2 pb-2 space-y-0.5">
+                    {workspaceData.entries.length === 0 ? (
+                      <p className="px-2 py-2 text-[11px] text-gray-500 italic">目录为空</p>
+                    ) : (
+                      workspaceData.entries.map((entry) => (
+                        <div
+                          key={entry.relativePath}
+                          className="group relative flex items-center rounded-xl transition-all duration-200 neo-button hover:bg-gray-100 dark:hover:bg-slate-800/50 border-transparent dark:hover:border-slate-700"
+                        >
+                          <button
+                            type="button"
+                            onClick={() => handleEntryClick(entry)}
+                            title={entry.isDir ? `打开 ${entry.name}/` : entry.path}
+                            className={cn(
+                              "flex items-center gap-2 px-2 py-1.5 text-left flex-1 min-w-0",
+                              entry.isDir ? "cursor-pointer" : "cursor-default",
+                            )}
+                          >
+                            {entry.isDir
+                              ? <FolderOpen className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
+                              : <FileIcon icon={entry.icon} isDir={false} />
+                            }
+                            <span className="text-[12px] truncate flex-1 text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-white transition-colors">{entry.name}</span>
+                            {entry.sizeDisplay && !entry.isDir && (
+                              <span className="text-[10px] text-gray-500 shrink-0 font-mono mr-1">{entry.sizeDisplay}</span>
+                            )}
+                            {entry.isDir && <ChevronRight className="h-3 w-3 text-gray-400 dark:text-gray-500 shrink-0 mr-1" />}
+                          </button>
+
+                          <button
+                            type="button"
+                            onClick={(e) => { e.stopPropagation(); copyPath(entry.path); }}
+                            title={`复制路径：${entry.path}`}
+                            className="absolute right-1 opacity-0 group-hover:opacity-100 transition-all duration-200 p-1 rounded-lg neo-button hover:text-blue-600 dark:hover:bg-cyan-500/20 text-gray-500 dark:hover:text-cyan-400 border-transparent dark:hover:border-cyan-500/50"
+                          >
+                            {copiedPath === entry.path
+                              ? <Check className="h-3 w-3 text-blue-600 dark:text-cyan-400" />
+                              : <Copy className="h-3 w-3" />
+                            }
+                          </button>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </ScrollArea>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center gap-1 border-t border-gray-200 dark:border-slate-700/50 p-2 shrink-0 bg-white/50 dark:bg-slate-800/30">
+        <button
+          onClick={() => setTheme(isDark ? "light" : "dark")}
+          title={mounted ? (isDark ? "切换浅色模式" : "切换深色模式") : "切换主题"}
+          className="h-9 w-9 rounded-xl neo-button hover:text-blue-600 dark:hover:bg-cyan-500/20 text-gray-500 dark:text-gray-400 dark:hover:text-cyan-400 flex items-center justify-center transition-all duration-200 hover:scale-110 dark:border-transparent dark:hover:border-cyan-500/50"
+          suppressHydrationWarning
+        >
+          {mounted
+            ? (isDark ? <Sun className="h-4 w-4 transition-transform duration-200 hover:rotate-180" /> : <Moon className="h-4 w-4 transition-transform duration-200 hover:rotate-12" />)
+            : <Moon className="h-4 w-4" />}
+        </button>
+        <Link href={`/${locale === "zh" ? "en" : "zh"}${pathname.replace(/^\/(zh|en)/, "")}`}>
+          <button
+            title={locale === "zh" ? "Switch to English" : "切换为中文"}
+            className="h-9 w-9 rounded-xl neo-button hover:text-purple-600 dark:hover:bg-purple-500/20 text-gray-500 dark:text-gray-400 dark:hover:text-purple-400 flex items-center justify-center transition-all duration-200 hover:scale-110 dark:border-transparent dark:hover:border-purple-500/50"
+          >
+            <Globe className="h-4 w-4 transition-transform duration-200 hover:rotate-12" />
+          </button>
+        </Link>
+      </div>
+    </aside>
+  );
+}

package/src/components/providers.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { Toaster } from "@/components/ui/toaster";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+      <Toaster />
+    </NextThemesProvider>
+  );
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        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/components/ui/button.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring 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-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    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) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/ui/dialog.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className)}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+      </DialogClose>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };