@mcp-b/char 0.0.1 → 0.0.3

package/README.md

@@ -1,4 +1,4 @@
-# @mcp-b/embedded-agent
+# @mcp-b/char
 
 An Intercom-like AI chat widget with MCP tool support and voice mode. Drop it into your app and you're done.
 
@@ -6,12 +6,12 @@ Styles are isolated using Shadow DOM. Customize appearance by setting CSS variab
 
 ## Build Architecture
 
-This package provides the `` custom element in two formats:
+This package provides the `<char-agent>` custom element in two formats:
 
 | Export | Format | Use Case |
 |--------|--------|----------|
-| `@mcp-b/embedded-agent` / `@mcp-b/embedded-agent/web-component` | ESM web component | Bundlers, monorepo dev |
-| `@mcp-b/embedded-agent/standalone` | IIFE web component | `<script>` tag embeds |
+| `@mcp-b/char` / `@mcp-b/char/web-component` | ESM web component | Bundlers, monorepo dev |
+| `@mcp-b/char/standalone` | IIFE web component | `<script>` tag embeds |
 
 ### Bundle Sizes
 
@@ -49,7 +49,7 @@ Host Page (React 18)
 ├── <div id="root">  ← Host's React
 │   └── ... host app ...
 │
-└──
+└── <char-agent>
     └── #shadow-root  ← Isolation boundary
         └── <div>  ← Bundled React 19
             └── ... widget ...
@@ -58,12 +58,12 @@ Host Page (React 18)
 ## Installation
 
 ```bash
-npm install @mcp-b/embedded-agent
+npm install @mcp-b/char
 ```
 
 ## Usage
 
-`` renders as a full-viewport overlay.
+`<char-agent>` renders as a full-viewport overlay.
 
 ### Recommended: Imperative Authentication (Secure)
 
@@ -71,12 +71,12 @@ The `connect()` method is the recommended way to authenticate. It keeps tokens o
 
 ```tsx
 import { useRef, useEffect } from "react";
-import "@mcp-b/embedded-agent/web-component";
-import type { WebMCPAgentElement } from "@mcp-b/embedded-agent/web-component";
+import "@mcp-b/char/web-component";
+import type { CharAgentElement } from "@mcp-b/char/web-component";
 
 function App() {
   const { session } = useOktaAuth(); // or Azure, Auth0, Google, etc.
-  const agentRef = useRef<WebMCPAgentElement>(null);
+  const agentRef = useRef<CharAgentElement>(null);
 
   useEffect(() => {
     if (agentRef.current && session?.idToken) {
@@ -91,10 +91,10 @@ function App() {
 ### Vanilla JavaScript
 
 ```html
-</char-agent>
+<char-agent></char-agent>
 
 <script type="module">
-  import "@mcp-b/embedded-agent/web-component";
+  import "@mcp-b/char/web-component";
 
   const agent = document.querySelector("char-agent");
   // Call connect() when you have the token
@@ -106,11 +106,11 @@ function App() {
 
 ```tsx
 import { useRef, useEffect } from "react";
-import "@mcp-b/embedded-agent/web-component";
-import type { WebMCPAgentElement } from "@mcp-b/embedded-agent/web-component";
+import "@mcp-b/char/web-component";
+import type { CharAgentElement } from "@mcp-b/char/web-component";
 
 const authToken = session?.idToken ?? "";
-const agentRef = useRef<WebMCPAgentElement>(null);
+const agentRef = useRef<CharAgentElement>(null);
 
 useEffect(() => {
   const agent = agentRef.current ?? document.querySelector("char-agent");
@@ -119,9 +119,9 @@ useEffect(() => {
     const newAgent = document.createElement("char-agent");
     document.body.appendChild(newAgent);
     // Connect after element is in DOM
-    (newAgent as WebMCPAgentElement).connect({ idToken: authToken });
+    (newAgent as CharAgentElement).connect({ idToken: authToken });
   } else if (authToken) {
-    (agent as WebMCPAgentElement).connect({ idToken: authToken });
+    (agent as CharAgentElement).connect({ idToken: authToken });
   }
 
   // Set other attributes (these don't contain sensitive data)
@@ -138,8 +138,8 @@ Use `defer` for best performance - it loads the script without blocking page ren
 
 ```html
 <!-- Recommended: defer loads async, executes after DOM ready -->
-<script src="https://unpkg.com/@mcp-b/embedded-agent/dist/web-component-standalone.iife.js" defer></script>
-</char-agent>
+<script src="https://unpkg.com/@mcp-b/char/dist/web-component-standalone.iife.js" defer></script>
+<char-agent></char-agent>
 
 <script>
   // Authenticate after the page loads (tokens not in DOM attributes)
@@ -154,13 +154,13 @@ Use `defer` for best performance - it loads the script without blocking page ren
 Alternative CDN (jsdelivr):
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@mcp-b/embedded-agent/dist/web-component-standalone.iife.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@mcp-b/char/dist/web-component-standalone.iife.js" defer></script>
 ```
 
 Pin to a specific version for production:
 
 ```html
-<script src="https://unpkg.com/@mcp-b/embedded-agent@1.2.7/dist/web-component-standalone.iife.js" defer></script>
+<script src="https://unpkg.com/@mcp-b/char@0.0.2/dist/web-component-standalone.iife.js" defer></script>
 ```
 
 ### Web Component Attributes
@@ -178,6 +178,44 @@ Pin to a specific version for production:
 </script>
 ```
 
+## SSR Frameworks (Astro, Next.js, etc.)
+
+Char requires a browser environment — it uses Shadow DOM, custom elements, and other browser APIs. In SSR frameworks, you must ensure Char only renders on the client.
+
+### Astro
+
+Use `client:only="react"` to skip server-side rendering entirely:
+
+```astro
+---
+import { Char } from '@mcp-b/char'
+---
+
+<Char
+  client:only="react"
+  devMode={{ anthropicApiKey: import.meta.env.PUBLIC_ANTHROPIC_API_KEY }}
+  open={true}
+/>
+```
+
+`client:load` or `client:visible` will not work because Astro still attempts to render the component on the server first. `client:only="react"` skips SSR entirely and renders only in the browser.
+
+### Next.js
+
+Use dynamic imports with `ssr: false`:
+
+```tsx
+import dynamic from 'next/dynamic'
+
+const Char = dynamic(() => import('@mcp-b/char').then(m => ({ default: m.Char })), {
+  ssr: false,
+})
+
+export default function Page() {
+  return <Char open={true} devMode={{ anthropicApiKey: process.env.NEXT_PUBLIC_ANTHROPIC_API_KEY }} />
+}
+```
+
 ## Props / Attributes
 
 | Prop | Attribute | Type | Description |
@@ -194,7 +232,7 @@ Pin to a specific version for production:
 Customize appearance by setting CSS variables on the host page:
 
 ```css
-char {
+char-agent {
   /* Brand colors */
   --wm-color-primary: #8b5cf6;
   --wm-color-primary-foreground: #ffffff;
@@ -237,7 +275,7 @@ char {
 }
 
 /* Dark mode */
-char.dark {
+char-agent.dark {
   --wm-color-background: #1a1a1a;
   --wm-color-foreground: #ffffff;
   --wm-color-muted: #2a2a2a;
@@ -273,13 +311,13 @@ Always use `defer` or `async` when embedding the standalone script to avoid bloc
 
 ```html
 <!-- GOOD: defer - loads in parallel, executes after DOM ready -->
-<script src="https://unpkg.com/@mcp-b/embedded-agent/dist/web-component-standalone.iife.js" defer></script>
+<script src="https://unpkg.com/@mcp-b/char/dist/web-component-standalone.iife.js" defer></script>
 
 <!-- GOOD: async - loads in parallel, executes ASAP -->
-<script src="https://unpkg.com/@mcp-b/embedded-agent/dist/web-component-standalone.iife.js" async></script>
+<script src="https://unpkg.com/@mcp-b/char/dist/web-component-standalone.iife.js" async></script>
 
 <!-- BAD: blocks page rendering until script loads -->
-<script src="https://unpkg.com/@mcp-b/embedded-agent/dist/web-component-standalone.iife.js"></script>
+<script src="https://unpkg.com/@mcp-b/char/dist/web-component-standalone.iife.js"></script>
 ```
 
 **When to use which:**
@@ -328,7 +366,7 @@ Speed up loading by adding a preconnect hint in your `<head>`:
 ></char-agent>
 
 <!-- NEW (SSO-first with connect method): -->
-</char-agent>
+<char-agent></char-agent>
 <script>
   const agent = document.querySelector('char-agent');
   agent.connect({ idToken: 'eyJhbGciOi...' });
@@ -339,10 +377,10 @@ Speed up loading by adding a preconnect hint in your `<head>`:
 
 <!-- Customize via CSS: -->
 <style>
-  char {
+  char-agent {
     --wm-color-primary: #ff0000;
   }
-  char.dark {
+  char-agent.dark {
     --wm-color-background: #1a1a1a;
   }
 </style>
@@ -358,10 +396,10 @@ Speed up loading by adding a preconnect hint in your `<head>`:
 ## Development
 
 ```bash
-pnpm --filter @mcp-b/embedded-agent dev        # Watch TS build
-pnpm --filter @mcp-b/embedded-agent dev:css    # Watch Tailwind CSS
-pnpm --filter @mcp-b/embedded-agent storybook  # http://localhost:6006
-pnpm --filter @mcp-b/embedded-agent build
-pnpm --filter @mcp-b/embedded-agent check:types
-pnpm --filter @mcp-b/embedded-agent test
+pnpm --filter @mcp-b/char dev        # Watch TS build
+pnpm --filter @mcp-b/char dev:css    # Watch Tailwind CSS
+pnpm --filter @mcp-b/char storybook  # http://localhost:6006
+pnpm --filter @mcp-b/char build
+pnpm --filter @mcp-b/char check:types
+pnpm --filter @mcp-b/char test
 ```

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,52 @@
+# Third-Party Notices
+
+This package (@mcp-b/char) bundles the following third-party software.
+Each is listed with its license type. Full license texts are available
+in the respective packages' source repositories.
+
+## MIT License
+
+- **@assistant-ui/react** - Chat UI primitives
+- **@assistant-ui/react-markdown** - Markdown rendering for assistant-ui
+- **@cloudflare/ai-chat** - Cloudflare AI chat client
+- **@modelcontextprotocol/sdk** - Model Context Protocol SDK
+- **@r2wc/react-to-web-component** - React to Web Component bridge
+- **@rjsf/shadcn** - JSON Schema Form shadcn theme
+- **agents** - Cloudflare Agents SDK
+- **assistant-stream** - Streaming utilities for assistant-ui
+- **clsx** - Utility for constructing className strings
+- **date-fns** - Date utility library
+- **fast-json-stable-stringify** - Deterministic JSON.stringify
+- **motion** - Animation library (Framer Motion)
+- **react-day-picker** - Date picker component
+- **react-error-boundary** - React error boundary component
+- **react-markdown** - Markdown renderer for React
+- **remark-gfm** - GitHub Flavored Markdown support
+- **sonner** - Toast notification library
+- **tailwind-merge** - Tailwind CSS class merging
+- **tw-animate-css** - Tailwind CSS animations
+- **zod** - TypeScript-first schema validation
+- **zustand** - State management
+
+## Apache-2.0 License
+
+- **@ai-sdk/react** - Vercel AI SDK React bindings
+- **ai** - Vercel AI SDK
+- **@cloudflare/realtimekit-react** - Cloudflare RealtimeKit React bindings
+- **@cloudflare/realtimekit-react-ui** - Cloudflare RealtimeKit UI components
+- **@rjsf/core** - React JSON Schema Form core
+- **@rjsf/utils** - React JSON Schema Form utilities
+- **@rjsf/validator-ajv8** - JSON Schema Form AJV8 validator
+- **class-variance-authority** - CSS variant utility
+
+## ISC License
+
+- **jsonrepair** - JSON repair utility
+- **lucide-react** - Icon library
+
+## Peer Dependencies (not bundled in ESM build)
+
+- **react** - MIT License - Copyright (c) Meta Platforms, Inc. and affiliates
+- **react-dom** - MIT License - Copyright (c) Meta Platforms, Inc. and affiliates
+
+Note: The standalone IIFE build bundles React and ReactDOM.

package/dist/VoiceHandoffPanel-DWAZTOLa.js

@@ -0,0 +1,253 @@
+/*! @mcp-b/char | Copyright (c) 2025 Kukumis Inc. All rights reserved. | UNLICENSED */
+import { r as cn, t as Button } from "./button-BLnLZvxR.js";
+import { c } from "react-compiler-runtime";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RealtimeKitProvider, useRealtimeKitClient } from "@cloudflare/realtimekit-react";
+import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";
+
+//#region src/components/voice/RealtimeKitCallPanel.tsx
+const RealtimeKitCallPanel = ({ authToken, meetingId, onEnded, showSetupScreen = true, debugLabel = "rtk:customer" }) => {
+	const [meeting, initMeeting] = useRealtimeKitClient();
+	const onEndedRef = useRef(onEnded);
+	const lastMeetingStateRef = useRef(null);
+	const debugEnabled = useMemo(() => {
+		if (typeof window === "undefined") return false;
+		try {
+			return window.__CHAR_RTK_DEBUG__ === true || window.localStorage.getItem("char:rtk-debug") === "true";
+		} catch {
+			return false;
+		}
+	}, []);
+	const logDebug = useCallback((message, payload) => {
+		if (!debugEnabled) return;
+		if (payload) console.debug(`[${debugLabel}] ${message}`, payload);
+		else console.debug(`[${debugLabel}] ${message}`);
+	}, [debugEnabled, debugLabel]);
+	useEffect(() => {
+		onEndedRef.current = onEnded;
+	}, [onEnded]);
+	useEffect(() => {
+		if (!authToken) return;
+		let cancelled = false;
+		logDebug("initMeeting:start", {
+			meetingId,
+			hasToken: Boolean(authToken),
+			tokenLength: authToken.length
+		});
+		initMeeting({
+			authToken,
+			defaults: {
+				audio: true,
+				video: false
+			}
+		}).then((client) => {
+			if (cancelled) return;
+			if (client) logDebug("initMeeting:success", { meetingId });
+			else logDebug("initMeeting:undefined", { meetingId });
+		}).catch((error) => {
+			if (cancelled) return;
+			logDebug("initMeeting:error", {
+				meetingId,
+				error: error instanceof Error ? error.message : String(error)
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		authToken,
+		initMeeting,
+		logDebug,
+		meetingId
+	]);
+	const handleStatesUpdate = useCallback((event) => {
+		const nextState = event.detail?.meeting ?? null;
+		const prevState = lastMeetingStateRef.current;
+		lastMeetingStateRef.current = nextState;
+		logDebug("meeting:state", {
+			meetingId,
+			state: nextState
+		});
+		if (prevState && nextState === "ended" && prevState !== "ended") onEndedRef.current?.();
+	}, [logDebug, meetingId]);
+	if (!meeting) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center justify-center text-sm text-muted-foreground",
+		children: "Connecting to the call..."
+	});
+	return /* @__PURE__ */ jsx(RealtimeKitProvider, {
+		value: meeting,
+		children: /* @__PURE__ */ jsx(RtkMeeting, {
+			mode: "fill",
+			meeting,
+			showSetupScreen,
+			onRtkStatesUpdate: handleStatesUpdate
+		})
+	});
+};
+var RealtimeKitCallPanel_default = RealtimeKitCallPanel;
+
+//#endregion
+//#region src/components/voice/VoiceHandoffPanel.tsx
+const AI_ONLY_HANDOFF_STATUS = "ai_only";
+const HANDOFF_PENDING_STATUS = "handoff_pending";
+const HUMAN_ACTIVE_STATUS = "human_active";
+const VoiceHandoffPanel = (t0) => {
+	const $ = c(36);
+	const { handoffStatus, joinResult, isRequesting, error, onRequestToken, onEnd } = t0;
+	let t1;
+	if ($[0] !== onRequestToken) {
+		t1 = () => {
+			onRequestToken().catch(_temp);
+		};
+		$[0] = onRequestToken;
+		$[1] = t1;
+	} else t1 = $[1];
+	const requestToken = t1;
+	let t2;
+	if ($[2] !== onEnd) {
+		t2 = () => {
+			onEnd().catch(_temp2);
+		};
+		$[2] = onEnd;
+		$[3] = t2;
+	} else t2 = $[3];
+	const endCall = t2;
+	let t3;
+	let t4;
+	if ($[4] !== error || $[5] !== handoffStatus || $[6] !== isRequesting || $[7] !== joinResult || $[8] !== requestToken) {
+		t3 = () => {
+			if (handoffStatus === AI_ONLY_HANDOFF_STATUS) return;
+			if (joinResult || isRequesting || error) return;
+			requestToken();
+		};
+		t4 = [
+			handoffStatus,
+			joinResult,
+			isRequesting,
+			error,
+			requestToken
+		];
+		$[4] = error;
+		$[5] = handoffStatus;
+		$[6] = isRequesting;
+		$[7] = joinResult;
+		$[8] = requestToken;
+		$[9] = t3;
+		$[10] = t4;
+	} else {
+		t3 = $[9];
+		t4 = $[10];
+	}
+	useEffect(t3, t4);
+	if (handoffStatus === AI_ONLY_HANDOFF_STATUS) return null;
+	const isLive = handoffStatus === HUMAN_ACTIVE_STATUS;
+	const t5 = isLive ? "bg-emerald-500" : "bg-amber-500 animate-pulse";
+	let t6;
+	if ($[11] !== t5) {
+		t6 = cn("h-2 w-2 rounded-full", t5);
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", { className: t6 });
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	const t8 = isLive ? "Live support" : "Connecting support";
+	let t9;
+	if ($[15] !== t7 || $[16] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground",
+			children: [t7, t8]
+		});
+		$[15] = t7;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== endCall || $[19] !== isRequesting) {
+		t10 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			onClick: endCall,
+			disabled: isRequesting,
+			children: "End call"
+		});
+		$[18] = endCall;
+		$[19] = isRequesting;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10 || $[22] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2 pb-2",
+			children: [t9, t10]
+		});
+		$[21] = t10;
+		$[22] = t9;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== error) {
+		t12 = error ? /* @__PURE__ */ jsx("div", {
+			className: "mb-2 text-xs text-destructive",
+			children: error
+		}) : null;
+		$[24] = error;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== endCall || $[27] !== joinResult) {
+		t13 = /* @__PURE__ */ jsx("div", {
+			className: "h-56 overflow-hidden rounded-xl border border-border/60 bg-background md:h-64",
+			children: joinResult ? /* @__PURE__ */ jsx(RealtimeKitCallPanel_default, {
+				authToken: joinResult.authToken,
+				meetingId: joinResult.meetingId,
+				onEnded: endCall
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex h-full items-center justify-center text-sm text-muted-foreground",
+				children: "Preparing the call..."
+			})
+		});
+		$[26] = endCall;
+		$[27] = joinResult;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== handoffStatus) {
+		t14 = handoffStatus === HANDOFF_PENDING_STATUS ? /* @__PURE__ */ jsx("p", {
+			className: "mt-2 text-xs text-muted-foreground",
+			children: "Waiting for a support agent to join…"
+		}) : null;
+		$[29] = handoffStatus;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t11 || $[32] !== t12 || $[33] !== t13 || $[34] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: "rounded-2xl border border-border bg-muted/30 p-3 shadow-sm",
+			children: [
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[31] = t11;
+		$[32] = t12;
+		$[33] = t13;
+		$[34] = t14;
+		$[35] = t15;
+	} else t15 = $[35];
+	return t15;
+};
+var VoiceHandoffPanel_default = VoiceHandoffPanel;
+function _temp() {}
+function _temp2() {}
+
+//#endregion
+export { VoiceHandoffPanel_default as default };
+//# sourceMappingURL=VoiceHandoffPanel-DWAZTOLa.js.map

package/dist/VoiceHandoffPanel-DWAZTOLa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceHandoffPanel-DWAZTOLa.js","names":["RealtimeKitProvider","useRealtimeKitClient","RtkMeeting","useCallback","useEffect","useMemo","useRef","FC","RtkMeetingState","meeting","RealtimeKitCallPanelProps","authToken","meetingId","onEnded","showSetupScreen","debugLabel","RealtimeKitCallPanel","initMeeting","onEndedRef","lastMeetingStateRef","debugEnabled","window","globalWindow","Window","__CHAR_RTK_DEBUG__","localStorage","getItem","logDebug","message","payload","Record","console","debug","current","cancelled","hasToken","Boolean","tokenLength","length","defaults","audio","video","then","client","catch","error","Error","String","handleStatesUpdate","event","CustomEvent","nextState","detail","prevState","state","Button","cn","useCallback","useEffect","FC","RealtimeKitCallPanel","RealtimeKitJoinResult","VoiceSessionState","HandoffStatus","AI_ONLY_HANDOFF_STATUS","HANDOFF_PENDING_STATUS","HUMAN_ACTIVE_STATUS","VoiceHandoffPanelProps","handoffStatus","joinResult","isRequesting","error","onRequestToken","Promise","onEnd","VoiceHandoffPanel","t0","$","_c","t1","catch","_temp","requestToken","t2","_temp2","endCall","t3","t4","isLive","t5","t6","t7","t8","t9","t10","t11","t12","t13","authToken","meetingId","t14","t15"],"sources":["../src/components/voice/RealtimeKitCallPanel.tsx","../src/components/voice/VoiceHandoffPanel.tsx"],"sourcesContent":["import { RealtimeKitProvider, useRealtimeKitClient } from '@cloudflare/realtimekit-react'\nimport { RtkMeeting } from '@cloudflare/realtimekit-react-ui'\nimport { useCallback, useEffect, useMemo, useRef, type FC } from 'react'\n\ntype RtkMeetingState = {\n\tmeeting?: 'idle' | 'setup' | 'joined' | 'ended' | 'waiting'\n}\n\ninterface RealtimeKitCallPanelProps {\n\tauthToken: string\n\tmeetingId?: string\n\tonEnded?: () => void\n\tshowSetupScreen?: boolean\n\tdebugLabel?: string\n}\n\nconst RealtimeKitCallPanel: FC<RealtimeKitCallPanelProps> = ({\n\tauthToken,\n\tmeetingId,\n\tonEnded,\n\tshowSetupScreen = true,\n\tdebugLabel = 'rtk:customer',\n}) => {\n\tconst [meeting, initMeeting] = useRealtimeKitClient()\n\tconst onEndedRef = useRef(onEnded)\n\tconst lastMeetingStateRef = useRef<RtkMeetingState['meeting'] | null>(null)\n\tconst debugEnabled = useMemo(() => {\n\t\tif (typeof window === 'undefined') return false\n\t\ttry {\n\t\t\tconst globalWindow = window as Window & { __CHAR_RTK_DEBUG__?: boolean }\n\t\t\treturn (\n\t\t\t\tglobalWindow.__CHAR_RTK_DEBUG__ === true ||\n\t\t\t\twindow.localStorage.getItem('char:rtk-debug') === 'true'\n\t\t\t)\n\t\t} catch {\n\t\t\treturn false\n\t\t}\n\t}, [])\n\n\tconst logDebug = useCallback(\n\t\t(message: string, payload?: Record<string, unknown>) => {\n\t\t\tif (!debugEnabled) return\n\t\t\tif (payload) {\n\t\t\t\tconsole.debug(`[${debugLabel}] ${message}`, payload)\n\t\t\t} else {\n\t\t\t\tconsole.debug(`[${debugLabel}] ${message}`)\n\t\t\t}\n\t\t},\n\t\t[debugEnabled, debugLabel],\n\t)\n\n\tuseEffect(() => {\n\t\tonEndedRef.current = onEnded\n\t}, [onEnded])\n\n\tuseEffect(() => {\n\t\tif (!authToken) return\n\t\tlet cancelled = false\n\t\tlogDebug('initMeeting:start', {\n\t\t\tmeetingId,\n\t\t\thasToken: Boolean(authToken),\n\t\t\ttokenLength: authToken.length,\n\t\t})\n\t\tvoid initMeeting({\n\t\t\tauthToken,\n\t\t\tdefaults: {\n\t\t\t\taudio: true,\n\t\t\t\tvideo: false,\n\t\t\t},\n\t\t})\n\t\t\t.then((client) => {\n\t\t\t\tif (cancelled) return\n\t\t\t\tif (client) {\n\t\t\t\t\tlogDebug('initMeeting:success', { meetingId })\n\t\t\t\t} else {\n\t\t\t\t\tlogDebug('initMeeting:undefined', { meetingId })\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tif (cancelled) return\n\t\t\t\tlogDebug('initMeeting:error', {\n\t\t\t\t\tmeetingId,\n\t\t\t\t\terror: error instanceof Error ? error.message : String(error),\n\t\t\t\t})\n\t\t\t})\n\n\t\treturn () => {\n\t\t\tcancelled = true\n\t\t}\n\t}, [authToken, initMeeting, logDebug, meetingId])\n\n\tconst handleStatesUpdate = useCallback((event: CustomEvent<RtkMeetingState>) => {\n\t\tconst nextState = event.detail?.meeting ?? null\n\t\tconst prevState = lastMeetingStateRef.current\n\t\tlastMeetingStateRef.current = nextState\n\t\tlogDebug('meeting:state', { meetingId, state: nextState })\n\n\t\tif (prevState && nextState === 'ended' && prevState !== 'ended') {\n\t\t\tonEndedRef.current?.()\n\t\t}\n\t}, [logDebug, meetingId])\n\n\tif (!meeting) {\n\t\treturn (\n\t\t\t<div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n\t\t\t\tConnecting to the call...\n\t\t\t</div>\n\t\t)\n\t}\n\n\treturn (\n\t\t<RealtimeKitProvider value={meeting}>\n\t\t\t<RtkMeeting\n\t\t\t\tmode=\"fill\"\n\t\t\t\tmeeting={meeting}\n\t\t\t\tshowSetupScreen={showSetupScreen}\n\t\t\t\tonRtkStatesUpdate={handleStatesUpdate}\n\t\t\t/>\n\t\t</RealtimeKitProvider>\n\t)\n}\n\nexport default RealtimeKitCallPanel\n","import { Button } from '@/components/ui/button'\nimport { cn } from '@/utils/cn'\nimport { useCallback, useEffect, type FC } from 'react'\n\nimport RealtimeKitCallPanel from './RealtimeKitCallPanel'\n\nimport type { RealtimeKitJoinResult, VoiceSessionState } from '@mcp-b/shared-types'\n\ntype HandoffStatus = VoiceSessionState['handoffStatus']\nconst AI_ONLY_HANDOFF_STATUS: HandoffStatus = 'ai_only'\nconst HANDOFF_PENDING_STATUS: HandoffStatus = 'handoff_pending'\nconst HUMAN_ACTIVE_STATUS: HandoffStatus = 'human_active'\n\ninterface VoiceHandoffPanelProps {\n\thandoffStatus: HandoffStatus\n\tjoinResult: RealtimeKitJoinResult | null\n\tisRequesting: boolean\n\terror: string | null\n\tonRequestToken: () => Promise<void>\n\tonEnd: () => Promise<void>\n}\n\nconst VoiceHandoffPanel: FC<VoiceHandoffPanelProps> = ({\n\thandoffStatus,\n\tjoinResult,\n\tisRequesting,\n\terror,\n\tonRequestToken,\n\tonEnd,\n}) => {\n\tconst requestToken = useCallback(() => {\n\t\tonRequestToken().catch(() => undefined)\n\t}, [onRequestToken])\n\n\tconst endCall = useCallback(() => {\n\t\tonEnd().catch(() => undefined)\n\t}, [onEnd])\n\n\tuseEffect(() => {\n\t\tif (handoffStatus === AI_ONLY_HANDOFF_STATUS) return\n\t\tif (joinResult || isRequesting || error) return\n\t\trequestToken()\n\t}, [handoffStatus, joinResult, isRequesting, error, requestToken])\n\n\tif (handoffStatus === AI_ONLY_HANDOFF_STATUS) {\n\t\treturn null\n\t}\n\n\tconst isLive = handoffStatus === HUMAN_ACTIVE_STATUS\n\n\treturn (\n\t\t<div className=\"rounded-2xl border border-border bg-muted/30 p-3 shadow-sm\">\n\t\t\t<div className=\"flex items-center justify-between gap-2 pb-2\">\n\t\t\t\t<div className=\"flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'h-2 w-2 rounded-full',\n\t\t\t\t\t\t\tisLive ? 'bg-emerald-500' : 'bg-amber-500 animate-pulse',\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t{isLive ? 'Live support' : 'Connecting support'}\n\t\t\t\t</div>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tonClick={endCall}\n\t\t\t\t\t\tdisabled={isRequesting}\n\t\t\t\t\t>\n\t\t\t\t\tEnd call\n\t\t\t\t</Button>\n\t\t\t</div>\n\n\t\t\t{error ? (\n\t\t\t\t<div className=\"mb-2 text-xs text-destructive\">{error}</div>\n\t\t\t) : null}\n\n\t\t\t<div className=\"h-56 overflow-hidden rounded-xl border border-border/60 bg-background md:h-64\">\n\t\t\t\t{joinResult ? (\n\t\t\t\t\t\t<RealtimeKitCallPanel\n\t\t\t\t\t\t\tauthToken={joinResult.authToken}\n\t\t\t\t\t\t\tmeetingId={joinResult.meetingId}\n\t\t\t\t\t\t\tonEnded={endCall}\n\t\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n\t\t\t\t\t\tPreparing the call...\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{handoffStatus === HANDOFF_PENDING_STATUS ? (\n\t\t\t\t<p className=\"mt-2 text-xs text-muted-foreground\">\n\t\t\t\t\tWaiting for a support agent to join…\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t</div>\n\t)\n}\n\nexport default VoiceHandoffPanel\n"],"mappings":"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"}

package/dist/button-BLnLZvxR.js

@@ -0,0 +1,105 @@
+/*! @mcp-b/char | Copyright (c) 2025 Kukumis Inc. All rights reserved. | UNLICENSED */
+import { c } from "react-compiler-runtime";
+import "react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+//#region src/utils/cn.ts
+/**
+* Merges Tailwind CSS classes with proper precedence handling.
+* Combines clsx for conditional classes and tailwind-merge for deduplication.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+//#region src/components/ui/button.tsx
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+			outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2 has-[>svg]:px-3",
+			xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+			icon: "size-9",
+			"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-8",
+			"icon-lg": "size-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Button(t0) {
+	const $ = c(16);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({className, variant: t1, size: t2, asChild: t3, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const variant = t1 === void 0 ? "default" : t1;
+	const size = t2 === void 0 ? "default" : t2;
+	const Comp = (t3 === void 0 ? false : t3) ? Slot : "button";
+	let t4;
+	if ($[6] !== className || $[7] !== size || $[8] !== variant) {
+		t4 = cn(buttonVariants({
+			variant,
+			size,
+			className
+		}));
+		$[6] = className;
+		$[7] = size;
+		$[8] = variant;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== Comp || $[11] !== props || $[12] !== size || $[13] !== t4 || $[14] !== variant) {
+		t5 = /* @__PURE__ */ jsx(Comp, {
+			"data-slot": "button",
+			"data-variant": variant,
+			"data-size": size,
+			className: t4,
+			...props
+		});
+		$[10] = Comp;
+		$[11] = props;
+		$[12] = size;
+		$[13] = t4;
+		$[14] = variant;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+
+//#endregion
+export { buttonVariants as n, cn as r, Button as t };
+//# sourceMappingURL=button-BLnLZvxR.js.map