SurfSense/surfsense_web/components/mcp/connect-agent-dialog.tsx
Anish Sarkar 2927a9484e refactor(assistant-ui): simplify ConnectedScraperIcons and update ConnectAgentDialog UI
- Removed unused `useReducedMotion` hook from ConnectedScraperIcons for cleaner code.
- Replaced `Cable` icon with a masked SVG in ConnectAgentDialog for improved visual representation.
- Enhanced layout in ConnectAgentDialog to include a badge indicating new items, improving user awareness.
2026-07-07 22:56:09 +05:30

57 lines
1.9 KiB
TypeScript

"use client";
import { SidebarButtonBadge } from "@/components/layout/ui/sidebar/SidebarButton";
import { AgentSetupTabs } from "@/components/mcp/agent-setup-tabs";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { BACKEND_URL } from "@/lib/env-config";
import { cn } from "@/lib/utils";
/**
* Sidebar-footer button that opens the MCP setup guide: pick an agent
* (Claude Code, Codex, OpenCode, ...), copy its config, done.
*/
export function ConnectAgentDialog({ className }: { className?: string }) {
return (
<Dialog>
<DialogTrigger
className={cn(
"group/link relative flex h-9 items-center gap-2 rounded-md mx-2 px-2 text-sm text-left",
"transition-colors hover:bg-accent hover:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
className
)}
>
<span
aria-hidden="true"
className="size-3.5 shrink-0 bg-current"
style={{
mask: "url('/connectors/modelcontextprotocol.svg') center / contain no-repeat",
WebkitMask: "url('/connectors/modelcontextprotocol.svg') center / contain no-repeat",
}}
/>
<span className="flex min-w-0 flex-1 items-center gap-1.5">
<span className="min-w-0 truncate">Connect your agent</span>
<SidebarButtonBadge>New</SidebarButtonBadge>
</span>
</DialogTrigger>
<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Connect to Claude Code, Codex, OpenCode</DialogTitle>
<DialogDescription>
The SurfSense MCP server gives any coding agent these scrapers and your knowledge base
as native tools. You need an API key (create one under API Keys) then pick your agent
and paste its config.
</DialogDescription>
</DialogHeader>
<AgentSetupTabs options={{ baseUrl: BACKEND_URL || undefined }} />
</DialogContent>
</Dialog>
);
}