@mcp-b/embedded-agent 1.2.6 → 1.2.7

package/dist/web-component.js

@@ -3582,6 +3582,71 @@ const UnifiedToolFallback = ({ toolCallId: _toolCallId, toolName, argsText, args
 };
 var UnifiedToolFallback_default = UnifiedToolFallback;
 
+//#endregion
+//#region src/hooks/usePrompts.ts
+/**
+* Hook to access MCP prompts.
+*
+* @example Basic usage
+* ```tsx
+* function MyComponent() {
+*   const { prompts, hasPrompts, getPrompt } = usePrompts()
+*
+*   const handleClick = async (prompt: Prompt) => {
+*     const result = await getPrompt(prompt.name)
+*     console.log(result.messages)
+*   }
+*
+*   if (!hasPrompts) return null
+*
+*   return (
+*     <div>
+*       {prompts.map(p => (
+*         <button key={p.name} onClick={() => handleClick(p)}>
+*           {p.name}
+*         </button>
+*       ))}
+*     </div>
+*   )
+* }
+* ```
+*/
+function usePrompts() {
+	const $ = c(8);
+	const mcpTools = useOptionalMCPTools();
+	let t0;
+	if ($[0] !== mcpTools?.prompts) {
+		t0 = mcpTools?.prompts ?? [];
+		$[0] = mcpTools?.prompts;
+		$[1] = t0;
+	} else t0 = $[1];
+	const prompts = t0;
+	const hasPrompts = prompts.length > 0;
+	let t1;
+	if ($[2] !== mcpTools) {
+		t1 = async (name, args) => {
+			if (!mcpTools?.getPrompt) throw new Error("MCPToolsProvider not found or getPrompt not available");
+			return mcpTools.getPrompt(name, args);
+		};
+		$[2] = mcpTools;
+		$[3] = t1;
+	} else t1 = $[3];
+	const getPrompt = t1;
+	let t2;
+	if ($[4] !== getPrompt || $[5] !== hasPrompts || $[6] !== prompts) {
+		t2 = {
+			prompts,
+			hasPrompts,
+			getPrompt
+		};
+		$[4] = getPrompt;
+		$[5] = hasPrompts;
+		$[6] = prompts;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+
 //#endregion
 //#region src/providers/ToolSelectionProvider.tsx
 const ToolSelectionContext = createContext(null);
@@ -5947,26 +6012,26 @@ const ThreadWelcome = () => {
 	} else t0 = $[0];
 	return t0;
 };
-const SUGGESTIONS = [{
-	title: "What's the weather",
-	label: "in San Francisco?",
-	prompt: "What's the weather in San Francisco?"
-}, {
-	title: "Explain React hooks",
-	label: "like useState and useEffect",
-	prompt: "Explain React hooks like useState and useEffect"
-}];
 const ThreadSuggestions = () => {
-	const $ = c(1);
+	const $ = c(4);
+	const { prompts, hasPrompts } = usePrompts();
+	if (!hasPrompts) return null;
 	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("div", {
+	if ($[0] !== prompts) {
+		t0 = prompts.slice(0, 4).map(_temp$10);
+		$[0] = prompts;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx("div", {
 			className: "aui-thread-welcome-suggestions wm:grid wm:w-full @md:wm:grid-cols-2 wm:gap-2 wm:pb-4",
-			children: SUGGESTIONS.map(_temp$10)
+			children: t0
 		});
-		$[0] = t0;
-	} else t0 = $[0];
-	return t0;
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
 };
 const Composer = () => {
 	const $ = c(12);
@@ -6589,28 +6654,28 @@ const BranchPicker = (t0) => {
 	} else t6 = $[11];
 	return t6;
 };
-function _temp$10(suggestion, index) {
+function _temp$10(prompt, index) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "aui-thread-welcome-suggestion-display wm:fade-in wm:slide-in-from-bottom-2 @md:wm:nth-[n+3]:block wm:nth-[n+3]:hidden wm:animate-in wm:fill-mode-both wm:duration-200",
 		style: { animationDelay: `${100 + index * 50}ms` },
 		children: /* @__PURE__ */ jsx(ThreadPrimitive.Suggestion, {
-			prompt: suggestion.prompt,
+			prompt: prompt.description || prompt.name,
 			send: true,
 			asChild: true,
 			children: /* @__PURE__ */ jsxs(Button, {
 				variant: "ghost",
 				className: "aui-thread-welcome-suggestion wm:h-auto wm:w-full @md:wm:flex-col wm:flex-wrap wm:items-start wm:justify-start wm:gap-1 wm:rounded-2xl wm:border wm:px-4 wm:py-3 wm:text-left wm:text-sm wm:transition-colors hover:wm:bg-muted",
-				"aria-label": suggestion.prompt,
+				"aria-label": prompt.description || prompt.name,
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "aui-thread-welcome-suggestion-text-1 wm:font-medium",
-					children: suggestion.title
-				}), /* @__PURE__ */ jsx("span", {
+					children: prompt.name
+				}), prompt.description && /* @__PURE__ */ jsx("span", {
 					className: "aui-thread-welcome-suggestion-text-2 wm:text-muted-foreground",
-					children: suggestion.label
+					children: prompt.description
 				})]
 			})
 		})
-	}, suggestion.prompt);
+	}, prompt.name);
 }
 function _temp2$4(t0) {
 	const { thread } = t0;
@@ -8355,7 +8420,7 @@ function decodeJWT(token) {
 * Used for DO routing - actual token validation happens on the backend.
 *
 * @param token - The JWT token
-* @returns The sub claim value, or null if extraction fails
+* @returns The sub claim value, or null if extraction fails (malformed token)
 */
 function extractUserIdFromToken(token) {
 	return decodeJWT(token)?.sub ?? null;
@@ -10818,6 +10883,68 @@ function _temp(error) {
 //#endregion
 //#region src/components/agent/ShadowRoot.tsx
 /**
+* CSS variable names supported for external theming.
+* These can be set on the <webmcp-agent> host element.
+*/
+const CSS_VARIABLE_NAMES = [
+	"--wm-color-primary",
+	"--wm-color-primary-foreground",
+	"--wm-color-secondary",
+	"--wm-color-secondary-foreground",
+	"--wm-color-accent",
+	"--wm-color-accent-foreground",
+	"--wm-color-background",
+	"--wm-color-foreground",
+	"--wm-color-muted",
+	"--wm-color-muted-foreground",
+	"--wm-color-border",
+	"--wm-color-input",
+	"--wm-color-ring",
+	"--wm-radius",
+	"--wm-font-sans",
+	"--wm-user-bubble-bg",
+	"--wm-user-bubble-text",
+	"--wm-assistant-bubble-bg",
+	"--wm-assistant-bubble-text",
+	"--wm-composer-bg",
+	"--wm-composer-border",
+	"--wm-composer-button-bg",
+	"--wm-composer-button-text",
+	"--wm-composer-text",
+	"--wm-tool-bg",
+	"--wm-tool-border",
+	"--wm-tool-approve-bg",
+	"--wm-tool-deny-bg",
+	"--wm-code-bg",
+	"--wm-code-text",
+	"--wm-input-bg",
+	"--wm-input-border",
+	"--wm-input-text",
+	"--wm-font-size-xs",
+	"--wm-font-size-sm",
+	"--wm-font-size-base",
+	"--wm-font-size-lg"
+];
+/**
+* Extracts CSS variables from a host element's computed styles.
+* Returns a CSS block with !important declarations to override defaults.
+*/
+function extractCssVariables(hostElement) {
+	const hostStyles = getComputedStyle(hostElement);
+	const varsWithImportant = CSS_VARIABLE_NAMES.map((name) => {
+		const value = hostStyles.getPropertyValue(name).trim();
+		return value ? `${name}: ${value} !important;` : "";
+	}).filter(Boolean).join("\n				");
+	if (!varsWithImportant) return "";
+	return `
+			/* CSS variables passed through from host element */
+			/* Using !important to ensure custom variables override built-in defaults */
+			:host, :host(.dark) {
+				${varsWithImportant}
+			}
+		`;
+}
+/**
 * ShadowRoot - Renders children inside an isolated shadow DOM
 *
 * This component creates a shadow DOM boundary that:
@@ -10886,60 +11013,8 @@ const ShadowRoot = (t0) => {
 			if (!host_0) return;
 			let shadow = host_0.shadowRoot;
 			if (!shadow) shadow = host_0.attachShadow({ mode });
-			let cssVariables = "";
 			const webComponentHost = host_0.parentElement;
-			if (webComponentHost) {
-				const hostStyles = getComputedStyle(webComponentHost);
-				const varsWithImportant = [
-					"--wm-color-primary",
-					"--wm-color-primary-foreground",
-					"--wm-color-secondary",
-					"--wm-color-secondary-foreground",
-					"--wm-color-accent",
-					"--wm-color-accent-foreground",
-					"--wm-color-background",
-					"--wm-color-foreground",
-					"--wm-color-muted",
-					"--wm-color-muted-foreground",
-					"--wm-color-border",
-					"--wm-color-input",
-					"--wm-color-ring",
-					"--wm-radius",
-					"--wm-font-sans",
-					"--wm-user-bubble-bg",
-					"--wm-user-bubble-text",
-					"--wm-assistant-bubble-bg",
-					"--wm-assistant-bubble-text",
-					"--wm-composer-bg",
-					"--wm-composer-border",
-					"--wm-composer-button-bg",
-					"--wm-composer-button-text",
-					"--wm-composer-text",
-					"--wm-tool-bg",
-					"--wm-tool-border",
-					"--wm-tool-approve-bg",
-					"--wm-tool-deny-bg",
-					"--wm-code-bg",
-					"--wm-code-text",
-					"--wm-input-bg",
-					"--wm-input-border",
-					"--wm-input-text",
-					"--wm-font-size-xs",
-					"--wm-font-size-sm",
-					"--wm-font-size-base",
-					"--wm-font-size-lg"
-				].map((name) => {
-					const value = hostStyles.getPropertyValue(name).trim();
-					return value ? `${name}: ${value} !important;` : "";
-				}).filter(Boolean).join("\n				");
-				if (varsWithImportant) cssVariables = `
-			/* CSS variables passed through from host element */
-			/* Using !important to ensure custom variables override built-in defaults */
-			:host, :host(.dark) {
-				${varsWithImportant}
-			}
-		`;
-			}
+			const cssVariables = webComponentHost ? extractCssVariables(webComponentHost) : "";
 			let styleElement = shadow.querySelector("style[data-webmcp-styles]");
 			if (!styleElement) {
 				styleElement = document.createElement("style");