camox 0.63.0 → 0.65.1

package/dist/features/studio/components/ConnectAgent.js

@@ -0,0 +1,313 @@
+import { AuthContext } from "../../../lib/auth.js";
+import { CLIENT_LOGO_PATHS } from "./clientLogoPaths.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { Check, Copy, ExternalLink } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { Avatar, AvatarFallback, AvatarGroup } from "@camox/ui/avatar";
+
+//#region src/features/studio/components/ConnectAgent.tsx
+/**
+* Common AI apps that take a remote MCP server, with their guide to adding one. In the logo row
+* each one overlaps the one before it, so the last is on top.
+*/
+const CLIENTS = [
+	{
+		name: "GitHub Copilot",
+		Logo: pathLogo(CLIENT_LOGO_PATHS.copilot),
+		docs: "https://code.visualstudio.com/docs/agent-customization/mcp-servers"
+	},
+	{
+		name: "Grok Bot",
+		Logo: GrokBotLogo,
+		docs: "https://composio.dev/blog/how-to-add-mcp-servers-to-grok-bot"
+	},
+	{
+		name: "ChatGPT",
+		Logo: pathLogo(CLIENT_LOGO_PATHS.chatgpt),
+		docs: "https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt-beta"
+	},
+	{
+		name: "Claude",
+		Logo: pathLogo(CLIENT_LOGO_PATHS.claude, "#D97757"),
+		docs: "https://support.claude.com/en/articles/11175166-get-started-with-custom-connectors-using-remote-mcp"
+	}
+];
+/** A logo drawn as one path on a 24×24 box, in the brand's color or the text's. */
+function pathLogo(d, color = "currentColor") {
+	return function PathLogo({ className }) {
+		return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			"aria-hidden": true,
+			className,
+			fill: color,
+			children: /* @__PURE__ */ jsx("path", { d })
+		});
+	};
+}
+/** Grok Bot's mark, drawn after its app icon: a rounded blob with two slanted eyes cut out. */
+function GrokBotLogo(t0) {
+	const $ = c(11);
+	const { className } = t0;
+	const mask = React.useId();
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("path", {
+			fill: "white",
+			d: "M0.5 9.5C5 5.5 12 3.2 17.5 4c4 .6 6 4 6 8.5V19c0 2.5-2 4.5-4.5 4.5H5C2.5 23.5.5 21.5.5 19Z"
+		});
+		t2 = /* @__PURE__ */ jsx("ellipse", {
+			fill: "black",
+			cx: "11",
+			cy: "14",
+			rx: "1.7",
+			ry: "3.6",
+			transform: "rotate(-35 11 14)"
+		});
+		t3 = /* @__PURE__ */ jsx("ellipse", {
+			fill: "black",
+			cx: "17.6",
+			cy: "10.4",
+			rx: "1.6",
+			ry: "3.3",
+			transform: "rotate(-35 17.6 10.4)"
+		});
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+		t3 = $[2];
+	}
+	let t4;
+	if ($[3] !== mask) {
+		t4 = /* @__PURE__ */ jsxs("mask", {
+			id: mask,
+			children: [
+				t1,
+				t2,
+				t3
+			]
+		});
+		$[3] = mask;
+		$[4] = t4;
+	} else t4 = $[4];
+	const t5 = `url(#${mask})`;
+	let t6;
+	if ($[5] !== t5) {
+		t6 = /* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "24",
+			mask: t5
+		});
+		$[5] = t5;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== className || $[8] !== t4 || $[9] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 24 24",
+			"aria-hidden": true,
+			className,
+			fill: "currentColor",
+			children: [t4, t6]
+		});
+		$[7] = className;
+		$[8] = t4;
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	return t7;
+}
+/**
+* Under the Chat widget's composer, what invites a member to connect their own AI to Camox as a
+* Connected Agent (ADR 0030): the logos of common AI apps, opening a dialog with the link to
+* Camox's MCP server and each app's guide to adding an MCP server.
+*/
+function ConnectAgent() {
+	const $ = c(5);
+	const [open, setOpen] = React.useState(false);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => setOpen(true);
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: t0,
+			className: "hover:bg-muted text-muted-foreground hover:text-foreground mx-2 mb-2 flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors",
+			children: [/* @__PURE__ */ jsx(AvatarGroup, { children: CLIENTS.map(_temp) }), "Connect your AI"]
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(ConnectAgentContent, {}) });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== open) {
+		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange: setOpen,
+			children: t2
+		})] });
+		$[3] = open;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
+function _temp(client) {
+	return /* @__PURE__ */ jsx(Avatar, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(AvatarFallback, {
+			className: "bg-background text-foreground",
+			children: /* @__PURE__ */ jsx(client.Logo, { className: "size-3.5" })
+		})
+	}, client.name);
+}
+function ConnectAgentContent() {
+	const $ = c(23);
+	const { apiUrl } = React.useContext(AuthContext);
+	const url = `${apiUrl}/mcp`;
+	const [copied, setCopied] = React.useState(false);
+	let t0;
+	let t1;
+	if ($[0] !== copied) {
+		t0 = () => {
+			if (!copied) return;
+			const timeout = setTimeout(() => setCopied(false), 2e3);
+			return () => clearTimeout(timeout);
+		};
+		t1 = [copied];
+		$[0] = copied;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	if ($[3] !== url) {
+		t2 = async () => {
+			await navigator.clipboard.writeText(url);
+			setCopied(true);
+		};
+		$[3] = url;
+		$[4] = t2;
+	} else t2 = $[4];
+	const copy = t2;
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Connect your AI to Camox's MCP server" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Add this URL to your AI as a remote MCP server, then sign in to Camox. Your AI can then ask Camox's agent for changes, with what it knows about your business." })] });
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== copy || $[7] !== url) {
+		t4 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: copy,
+			className: "bg-muted hover:bg-muted/70 truncate rounded-lg border px-3 py-3 text-left font-mono text-sm transition-colors",
+			children: url
+		});
+		$[6] = copy;
+		$[7] = url;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== copied) {
+		t5 = copied ? /* @__PURE__ */ jsx(Check, { "data-icon": "inline-start" }) : /* @__PURE__ */ jsx(Copy, { "data-icon": "inline-start" });
+		$[9] = copied;
+		$[10] = t5;
+	} else t5 = $[10];
+	const t6 = copied ? "Copied" : "Copy MCP URL";
+	let t7;
+	if ($[11] !== copy || $[12] !== t5 || $[13] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Button, {
+			size: "lg",
+			onClick: copy,
+			children: [t5, t6]
+		});
+		$[11] = copy;
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t4 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [t4, t7]
+		});
+		$[15] = t4;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs font-medium",
+			children: "How to add an MCP server in"
+		});
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	let t11;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [t9, /* @__PURE__ */ jsx("ul", {
+				className: "grid grid-cols-2 gap-1",
+				children: CLIENTS.map(_temp2)
+			})]
+		});
+		t11 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs",
+			children: "It acts as you, with your permissions. It can't publish: you review and publish here."
+		});
+		$[19] = t10;
+		$[20] = t11;
+	} else {
+		t10 = $[19];
+		t11 = $[20];
+	}
+	let t12;
+	if ($[21] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t3,
+			t8,
+			t10,
+			t11
+		] });
+		$[21] = t8;
+		$[22] = t12;
+	} else t12 = $[22];
+	return t12;
+}
+function _temp2(client) {
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+		href: client.docs,
+		target: "_blank",
+		rel: "noreferrer",
+		className: "hover:bg-muted flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
+		children: [
+			/* @__PURE__ */ jsx(client.Logo, { className: "size-4 shrink-0" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate",
+				children: client.name
+			}),
+			/* @__PURE__ */ jsx(ExternalLink, { className: "text-muted-foreground size-3.5 shrink-0" })
+		]
+	}) }, client.name);
+}
+
+//#endregion
+export { ConnectAgent };