@cabbage0320/agent-plugin 1.0.0

package/dist/chunks/index-t-gdvJct.js

@@ -0,0 +1,174 @@
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_production;
+
+function requireReactJsxRuntime_production () {
+	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+	hasRequiredReactJsxRuntime_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+	  var key = null;
+	  void 0 !== maybeKey && (key = "" + maybeKey);
+	  void 0 !== config.key && (key = "" + config.key);
+	  if ("key" in config) {
+	    maybeKey = {};
+	    for (var propName in config)
+	      "key" !== propName && (maybeKey[propName] = config[propName]);
+	  } else maybeKey = config;
+	  config = maybeKey.ref;
+	  return {
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    type: type,
+	    key: key,
+	    ref: void 0 !== config ? config : null,
+	    props: maybeKey
+	  };
+	}
+	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_production.jsx = jsxProd;
+	reactJsxRuntime_production.jsxs = jsxProd;
+	return reactJsxRuntime_production;
+}
+
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	{
+	  jsxRuntime.exports = requireReactJsxRuntime_production();
+	}
+	return jsxRuntime.exports;
+}
+
+var jsxRuntimeExports = requireJsxRuntime();
+
+var cssText = "/**\r\n * AgentPlugin widget styles.\r\n *\r\n * All styles are scoped inside a Shadow DOM, so they never leak to the host\r\n * page and vice versa. Host pages can customize the theme by overriding the\r\n * CSS custom properties defined on `:host` — either via CSS:\r\n *\r\n *   #agent-plugin-chat-root {\r\n *     --ap-primary: #3b82f6;\r\n *   }\r\n *\r\n * or via JavaScript:\r\n *\r\n *   hostEl.style.setProperty('--ap-primary', '#3b82f6');\r\n */\r\n\r\n/* ============================================================\r\n   Theme variables — host can override any of these\r\n   ============================================================ */\r\n:host {\r\n  /* Brand / primary color */\r\n  --ap-primary: #059669;\r\n  --ap-primary-hover: #047857;\r\n  --ap-primary-light: #ecfdf5;\r\n  --ap-primary-lighter: rgba(5, 150, 105, 0.04);\r\n  --ap-primary-border: #a7f3d0;\r\n\r\n  /* Neutral palette */\r\n  --ap-bg: #ffffff;\r\n  --ap-bg-muted: #f9fafb;\r\n  --ap-surface: #ffffff;\r\n  --ap-border: #e5e7eb;\r\n  --ap-border-light: #f3f4f6;\r\n  --ap-text: #1f2937;\r\n  --ap-text-secondary: #4b5563;\r\n  --ap-text-muted: #6b7280;\r\n  --ap-text-faint: #9ca3af;\r\n\r\n  /* Danger */\r\n  --ap-danger: #dc2626;\r\n  --ap-danger-hover: #b91c1c;\r\n  --ap-danger-bg: #fef2f2;\r\n  --ap-danger-border: #fecaca;\r\n\r\n  /* Warning */\r\n  --ap-warning: #d97706;\r\n  --ap-warning-hover: #b45309;\r\n  --ap-warning-bg: #fffbeb;\r\n  --ap-warning-border: #fde68a;\r\n\r\n  /* Typography */\r\n  --ap-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\r\n    \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\",\r\n    \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\r\n  --ap-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\r\n    \"Liberation Mono\", \"Courier New\", monospace;\r\n  --ap-font-size: 14px;\r\n  --ap-font-size-sm: 12px;\r\n  --ap-font-size-xs: 11px;\r\n\r\n  /* Geometry */\r\n  --ap-radius-sm: 6px;\r\n  --ap-radius: 10px;\r\n  --ap-radius-lg: 14px;\r\n  --ap-radius-xl: 18px;\r\n  --ap-radius-full: 9999px;\r\n\r\n  /* Shadows */\r\n  --ap-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\r\n  --ap-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\r\n  --ap-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),\r\n    0 4px 6px -4px rgba(0, 0, 0, 0.1);\r\n  --ap-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),\r\n    0 8px 10px -6px rgba(0, 0, 0, 0.1);\r\n\r\n  /* Layout */\r\n  --ap-panel-width: 400px;\r\n  --ap-panel-height: 620px;\r\n  --ap-panel-max-width: calc(100vw - 3rem);\r\n\r\n  /* Transitions */\r\n  --ap-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n  color: var(--ap-text);\r\n  font-family: var(--ap-font-family);\r\n  font-size: var(--ap-font-size);\r\n  line-height: 1.5;\r\n}\r\n\r\n/* ============================================================\r\n   Mini reset (scoped to shadow root only)\r\n   ============================================================ */\r\n*,\r\n*::before,\r\n*::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n*::-webkit-scrollbar {\r\n  width: 0.3em;\r\n  height: 0.3em;\r\n}\r\n\r\n*::-webkit-scrollbar-thumb {\r\n  background-color: #cbd5e1;\r\n  border-radius: 5px;\r\n}\r\n\r\nbutton {\r\n  font: inherit;\r\n  color: inherit;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n}\r\n\r\ntextarea,\r\ninput {\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n\r\nsvg {\r\n  display: block;\r\n}\r\n\r\n/* ============================================================\r\n   Launcher — floating action button\r\n   ============================================================ */\r\n.ap-launcher {\r\n  position: fixed;\r\n  bottom: 24px;\r\n  right: 24px;\r\n  z-index: 9999;\r\n}\r\n\r\n.ap-launcher-btn {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 56px;\r\n  height: 56px;\r\n  border-radius: var(--ap-radius-full);\r\n  background: var(--ap-primary);\r\n  color: #fff;\r\n  box-shadow: var(--ap-shadow-lg);\r\n  transition: transform var(--ap-transition),\r\n    background-color var(--ap-transition);\r\n}\r\n.ap-launcher-btn:hover {\r\n  transform: scale(1.05);\r\n  background: var(--ap-primary-hover);\r\n}\r\n.ap-launcher-btn svg {\r\n  width: 24px;\r\n  height: 24px;\r\n}\r\n\r\n/* First-visit hint bubble */\r\n.ap-launcher-hint {\r\n  position: absolute;\r\n  bottom: calc(100% + 6px);\r\n  right: calc(100% + 6px);\r\n  transform-origin: bottom right;\r\n  animation: ap-fade-slide-in 300ms ease-out;\r\n}\r\n.ap-launcher-hint-bubble {\r\n  position: relative;\r\n  white-space: nowrap;\r\n  border-radius: var(--ap-radius-lg);\r\n  background: #1f2937;\r\n  padding: 8px 12px;\r\n  font-size: var(--ap-font-size-sm);\r\n  font-weight: 500;\r\n  color: #fff;\r\n  box-shadow: var(--ap-shadow-xl);\r\n}\r\n.ap-launcher-hint-arrow {\r\n  position: absolute;\r\n  bottom: -4px;\r\n  right: -4px;\r\n  width: 8px;\r\n  height: 8px;\r\n  background: #1f2937;\r\n  transform: rotate(45deg);\r\n}\r\n\r\n@keyframes ap-fade-slide-in {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(12px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n/* ============================================================\r\n   Chat panel — the main floating container\r\n   ============================================================ */\r\n.ap-panel {\r\n  position: fixed;\r\n  bottom: 24px;\r\n  right: 24px;\r\n  z-index: 9999;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: var(--ap-panel-max-width);\r\n  max-width: var(--ap-panel-width);\r\n  height: var(--ap-panel-height);\r\n  overflow: hidden;\r\n  border-radius: var(--ap-radius-xl);\r\n  background: var(--ap-bg);\r\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n  transform-origin: bottom;\r\n  transition: transform 300ms ease-out, opacity 300ms ease-out;\r\n}\r\n.ap-panel--visible {\r\n  transform: translateY(0);\r\n  opacity: 1;\r\n}\r\n.ap-panel--hidden {\r\n  transform: translateY(32px);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n/* ============================================================\r\n   Header\r\n   ============================================================ */\r\n.ap-header {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 12px 16px;\r\n  background: var(--ap-primary);\r\n  color: #fff;\r\n}\r\n.ap-header-title {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n.ap-header-title svg {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n.ap-header-title span {\r\n  font-size: var(--ap-font-size-sm);\r\n  font-weight: 600;\r\n}\r\n.ap-header-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n}\r\n.ap-header-btn {\r\n  padding: 8px;\r\n  border-radius: var(--ap-radius-full);\r\n  transition: background-color var(--ap-transition);\r\n}\r\n.ap-header-btn:hover {\r\n  background: rgba(255, 255, 255, 0.2);\r\n}\r\n.ap-header-btn svg {\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n\r\n/* ============================================================\r\n   Message list — scrollable area\r\n   ============================================================ */\r\n.ap-msg-list {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  padding: 16px;\r\n  background: var(--ap-bg-muted);\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 16px;\r\n}\r\n\r\n/* ============================================================\r\n   Message row\r\n   ============================================================ */\r\n.ap-message {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.ap-message--user {\r\n  align-items: flex-end;\r\n}\r\n.ap-message--assistant {\r\n  align-items: flex-start;\r\n}\r\n\r\n/* Message bubble */\r\n.ap-bubble {\r\n  max-width: 85%;\r\n  border-radius: var(--ap-radius-xl);\r\n  padding: 8px 12px;\r\n  font-size: var(--ap-font-size);\r\n}\r\n.ap-bubble--assistant {\r\n  border: 1px solid var(--ap-border);\r\n  background: var(--ap-surface);\r\n  color: var(--ap-text);\r\n}\r\n.ap-bubble--user {\r\n  background: var(--ap-primary);\r\n  color: #fff;\r\n}\r\n.ap-bubble--user .ap-bubble-text {\r\n  white-space: pre-wrap;\r\n  overflow-wrap: break-word;\r\n}\r\n\r\n/* Hover actions (copy / edit / retry) */\r\n.ap-msg-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  margin-top: 4px;\r\n  color: var(--ap-text-faint);\r\n  opacity: 0;\r\n  transition: opacity var(--ap-transition);\r\n}\r\n.ap-message:hover .ap-msg-actions {\r\n  opacity: 1;\r\n}\r\n.ap-msg-action-btn {\r\n  padding: 4px;\r\n  border-radius: var(--ap-radius-sm);\r\n  transition: background-color var(--ap-transition),\r\n    color var(--ap-transition);\r\n}\r\n.ap-msg-action-btn:hover {\r\n  background: var(--ap-border);\r\n  color: var(--ap-text-muted);\r\n}\r\n.ap-msg-action-btn:disabled {\r\n  cursor: not-allowed;\r\n  opacity: 0.4;\r\n}\r\n.ap-msg-action-btn svg {\r\n  width: 14px;\r\n  height: 14px;\r\n}\r\n.ap-msg-action-btn .ap-icon-success {\r\n  color: var(--ap-primary);\r\n}\r\n\r\n/* Inline editor for user messages */\r\n.ap-editor {\r\n  max-width: 85%;\r\n  width: 100%;\r\n}\r\n.ap-editor-textarea {\r\n  display: block;\r\n  width: 100%;\r\n  max-height: 160px;\r\n  resize: none;\r\n  border-radius: var(--ap-radius-xl);\r\n  border: 1px solid var(--ap-primary);\r\n  background: var(--ap-surface);\r\n  padding: 8px 12px;\r\n  font-size: var(--ap-font-size);\r\n  color: var(--ap-text);\r\n  outline: none;\r\n  box-shadow: 0 0 0 1px var(--ap-primary);\r\n}\r\n.ap-editor-actions {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: 4px;\r\n  margin-top: 4px;\r\n}\r\n.ap-btn-sm {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  border-radius: var(--ap-radius);\r\n  padding: 4px 10px;\r\n  font-size: var(--ap-font-size-sm);\r\n  font-weight: 500;\r\n  transition: background-color var(--ap-transition);\r\n}\r\n.ap-btn-sm svg {\r\n  width: 14px;\r\n  height: 14px;\r\n}\r\n.ap-btn-sm--ghost {\r\n  border: 1px solid var(--ap-border);\r\n  color: var(--ap-text-muted);\r\n}\r\n.ap-btn-sm--ghost:hover {\r\n  background: var(--ap-bg-muted);\r\n}\r\n.ap-btn-sm--primary {\r\n  background: var(--ap-primary);\r\n  color: #fff;\r\n}\r\n.ap-btn-sm--primary:hover {\r\n  background: var(--ap-primary-hover);\r\n}\r\n.ap-btn-sm--primary:disabled {\r\n  cursor: not-allowed;\r\n  opacity: 0.4;\r\n}\r\n\r\n/* ============================================================\r\n   Typing indicator\r\n   ============================================================ */\r\n.ap-typing {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  border-radius: var(--ap-radius-xl);\r\n  border: 1px solid var(--ap-border);\r\n  background: var(--ap-surface);\r\n  padding: 12px 14px;\r\n}\r\n.ap-typing-dot {\r\n  width: 6px;\r\n  height: 6px;\r\n  border-radius: var(--ap-radius-full);\r\n  background: var(--ap-text-faint);\r\n  animation: ap-bounce 1s infinite;\r\n}\r\n.ap-typing-dot:nth-child(2) {\r\n  animation-delay: -0.15s;\r\n}\r\n.ap-typing-dot:nth-child(3) {\r\n  animation-delay: -0.3s;\r\n}\r\n@keyframes ap-bounce {\r\n  0%,\r\n  100% {\r\n    transform: translateY(-25%);\r\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\r\n  }\r\n  50% {\r\n    transform: none;\r\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\r\n  }\r\n}\r\n\r\n/* ============================================================\r\n   Reasoning panel (collapsible thinking process)\r\n   ============================================================ */\r\n.ap-reasoning {\r\n  margin-bottom: 4px;\r\n  width: 100%;\r\n  max-width: 85%;\r\n  overflow: hidden;\r\n  border-radius: var(--ap-radius-lg);\r\n  border: 1px solid var(--ap-border);\r\n  background: rgba(249, 250, 251, 0.8);\r\n}\r\n.ap-reasoning-toggle {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 6px 10px;\r\n  text-align: left;\r\n  font-size: var(--ap-font-size-sm);\r\n  color: var(--ap-text-muted);\r\n  transition: background-color var(--ap-transition);\r\n}\r\n.ap-reasoning-toggle:hover {\r\n  background: var(--ap-border-light);\r\n}\r\n.ap-reasoning-toggle svg {\r\n  width: 14px;\r\n  height: 14px;\r\n  flex-shrink: 0;\r\n}\r\n.ap-reasoning-toggle .ap-reasoning-label {\r\n  flex: 1;\r\n}\r\n.ap-reasoning-chevron {\r\n  transition: transform var(--ap-transition);\r\n}\r\n.ap-reasoning-chevron--open {\r\n  transform: rotate(90deg);\r\n}\r\n.ap-reasoning-body {\r\n  max-height: 192px;\r\n  overflow-y: auto;\r\n  white-space: pre-wrap;\r\n  overflow-wrap: break-word;\r\n  border-top: 1px solid var(--ap-border);\r\n  padding: 8px 10px;\r\n  font-size: var(--ap-font-size-sm);\r\n  line-height: 1.625;\r\n  color: var(--ap-text-muted);\r\n}\r\n\r\n/* ============================================================\r\n   Tool call block\r\n   ============================================================ */\r\n.ap-tool {\r\n  margin-bottom: 4px;\r\n  display: flex;\r\n  width: 100%;\r\n  max-width: 85%;\r\n  flex-direction: column;\r\n  gap: 4px;\r\n}\r\n.ap-tool-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  border-radius: var(--ap-radius);\r\n  border: 1px solid var(--ap-border);\r\n  background: var(--ap-surface);\r\n  padding: 6px 10px;\r\n  font-size: var(--ap-font-size-sm);\r\n  color: var(--ap-text-muted);\r\n}\r\n.ap-tool-icon {\r\n  width: 14px;\r\n  height: 14px;\r\n  flex-shrink: 0;\r\n  color: var(--ap-primary);\r\n}\r\n.ap-tool-name {\r\n  font-weight: 500;\r\n  color: var(--ap-text-secondary);\r\n}\r\n.ap-tool-spinner {\r\n  width: 12px;\r\n  height: 12px;\r\n  animation: ap-spin 1s linear infinite;\r\n}\r\n.ap-tool-status {\r\n  margin-left: auto;\r\n}\r\n@keyframes ap-spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n/* ============================================================\r\n   Ask user card\r\n   ============================================================ */\r\n.ap-ask {\r\n  margin-bottom: 4px;\r\n  width: 100%;\r\n  max-width: 85%;\r\n  overflow: hidden;\r\n  border-radius: var(--ap-radius-xl);\r\n  border: 1px solid var(--ap-primary-border);\r\n  background: var(--ap-surface);\r\n}\r\n.ap-ask--answered {\r\n  border-color: var(--ap-border);\r\n  background: rgba(249, 250, 251, 0.8);\r\n}\r\n.ap-ask-header {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  border-bottom: 1px solid var(--ap-border-light);\r\n  padding: 8px 12px;\r\n}\r\n.ap-ask-header svg {\r\n  margin-top: 2px;\r\n  width: 16px;\r\n  height: 16px;\r\n  flex-shrink: 0;\r\n  color: var(--ap-primary);\r\n}\r\n.ap-ask--answered .ap-ask-header svg {\r\n  color: var(--ap-text-faint);\r\n}\r\n.ap-ask-header-content {\r\n  min-width: 0;\r\n  flex: 1;\r\n}\r\n.ap-ask-question {\r\n  font-size: var(--ap-font-size);\r\n  font-weight: 500;\r\n  line-height: 1.375;\r\n  color: var(--ap-text);\r\n}\r\n.ap-ask--answered .ap-ask-question {\r\n  color: var(--ap-text-secondary);\r\n}\r\n.ap-ask-description {\r\n  margin-top: 2px;\r\n  font-size: var(--ap-font-size-sm);\r\n  line-height: 1.625;\r\n  color: var(--ap-text-muted);\r\n}\r\n.ap-ask--answered .ap-ask-description {\r\n  color: var(--ap-text-faint);\r\n}\r\n.ap-ask-badge {\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  gap: 2px;\r\n  border-radius: var(--ap-radius-full);\r\n  background: var(--ap-primary-light);\r\n  padding: 2px 8px;\r\n  font-size: var(--ap-font-size-xs);\r\n  font-weight: 500;\r\n  color: var(--ap-primary-hover);\r\n}\r\n.ap-ask-badge svg {\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n.ap-ask-body {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 10px 12px;\r\n}\r\n\r\n/* Choice option button (single / multiple) */\r\n.ap-choice {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  border-radius: var(--ap-radius);\r\n  border: 1px solid var(--ap-border);\r\n  background: var(--ap-surface);\r\n  padding: 6px 10px;\r\n  text-align: left;\r\n  font-size: var(--ap-font-size);\r\n  color: var(--ap-text-secondary);\r\n  transition: border-color var(--ap-transition),\r\n    background-color var(--ap-transition);\r\n}\r\n.ap-choice:hover {\r\n  border-color: var(--ap-primary-border);\r\n  background: var(--ap-primary-lighter);\r\n}\r\n.ap-choice--selected {\r\n  border-color: var(--ap-primary);\r\n  background: var(--ap-primary-light);\r\n  color: var(--ap-primary-hover);\r\n}\r\n.ap-choice svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  flex-shrink: 0;\r\n}\r\n.ap-choice-icon-unchecked {\r\n  color: var(--ap-border);\r\n}\r\n.ap-choice-icon-checked {\r\n  color: var(--ap-primary);\r\n}\r\n.ap-choice-label {\r\n  flex: 1;\r\n  overflow-wrap: break-word;\r\n}\r\n\r\n/* Boolean buttons */\r\n.ap-bool-row {\r\n  display: flex;\r\n  gap: 8px;\r\n}\r\n.ap-bool-btn {\r\n  display: flex;\r\n  flex: 1;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 6px;\r\n  border-radius: var(--ap-radius);\r\n  border: 1px solid var(--ap-primary-border);\r\n  background: var(--ap-primary-light);\r\n  padding: 4px 12px;\r\n  font-size: var(--ap-font-size);\r\n  font-weight: 500;\r\n  color: var(--ap-primary-hover);\r\n  transition: border-color var(--ap-transition),\r\n    background-color var(--ap-transition);\r\n}\r\n.ap-bool-btn:hover {\r\n  border-color: var(--ap-primary);\r\n  background: var(--ap-primary-light);\r\n  filter: brightness(0.95);\r\n}\r\n.ap-bool-btn--no {\r\n  border-color: var(--ap-danger-border);\r\n  background: var(--ap-danger-bg);\r\n  color: var(--ap-danger-hover);\r\n}\r\n.ap-bool-btn--no:hover {\r\n  border-color: var(--ap-danger);\r\n  filter: brightness(0.95);\r\n}\r\n.ap-bool-btn svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* Text input */\r\n.ap-text-input {\r\n  display: block;\r\n  width: 100%;\r\n  border-radius: var(--ap-radius);\r\n  border: 1px solid var(--ap-border);\r\n  background: var(--ap-surface);\r\n  padding: 6px 10px;\r\n  font-size: var(--ap-font-size);\r\n  color: var(--ap-text);\r\n  outline: none;\r\n  transition: border-color var(--ap-transition),\r\n    box-shadow var(--ap-transition);\r\n}\r\n.ap-text-input:focus {\r\n  border-color: var(--ap-primary);\r\n  box-shadow: 0 0 0 1px var(--ap-primary);\r\n}\r\n.ap-text-input--multiline {\r\n  resize: none;\r\n}\r\n\r\n/* Answer summary badges */\r\n.ap-answer-badges {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 6px;\r\n  padding: 8px 12px;\r\n}\r\n.ap-answer-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  border-radius: var(--ap-radius-sm);\r\n  padding: 2px 8px;\r\n  font-size: var(--ap-font-size-sm);\r\n  background: var(--ap-surface);\r\n  color: var(--ap-text-secondary);\r\n  box-shadow: 0 0 0 1px var(--ap-border);\r\n}\r\n.ap-answer-badge svg {\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n.ap-answer-badge--yes {\r\n  background: var(--ap-primary-light);\r\n  color: var(--ap-primary-hover);\r\n  box-shadow: 0 0 0 1px var(--ap-primary-border);\r\n}\r\n.ap-answer-badge--no {\r\n  background: var(--ap-danger-bg);\r\n  color: var(--ap-danger-hover);\r\n  box-shadow: 0 0 0 1px var(--ap-danger-border);\r\n}\r\n\r\n/* ============================================================\r\n   Chat input area\r\n   ============================================================ */\r\n.ap-input-area {\r\n  padding: 12px;\r\n  background: var(--ap-bg-muted);\r\n}\r\n.ap-input-shell {\r\n  border-radius: var(--ap-radius-lg);\r\n  border: 1px solid var(--ap-border);\r\n  background: var(--ap-surface);\r\n  transition: border-color var(--ap-transition);\r\n}\r\n.ap-input-shell:focus-within {\r\n  border-color: var(--ap-primary);\r\n}\r\n\r\n/* Active skill chips */\r\n.ap-skill-chips {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 6px;\r\n  padding: 8px 12px 0;\r\n}\r\n.ap-skill-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  border-radius: var(--ap-radius-full);\r\n  background: var(--ap-primary-light);\r\n  padding: 2px 8px;\r\n  font-size: var(--ap-font-size-sm);\r\n  font-weight: 500;\r\n  color: var(--ap-primary-hover);\r\n  box-shadow: 0 0 0 1px var(--ap-primary-border);\r\n}\r\n.ap-skill-chip-remove {\r\n  color: var(--ap-primary);\r\n  transition: color var(--ap-transition);\r\n}\r\n.ap-skill-chip-remove:hover {\r\n  color: var(--ap-primary-hover);\r\n}\r\n.ap-skill-chip-remove svg {\r\n  width: 12px;\r\n  height: 12px;\r\n}\r\n\r\n/* Textarea */\r\n.ap-input-wrap {\r\n  position: relative;\r\n}\r\n.ap-input-textarea {\r\n  display: block;\r\n  width: 100%;\r\n  max-height: 160px;\r\n  resize: none;\r\n  border-top-left-radius: var(--ap-radius-lg);\r\n  border-top-right-radius: var(--ap-radius-lg);\r\n  background: transparent;\r\n  padding: 8px 12px;\r\n  font-size: var(--ap-font-size);\r\n  outline: none;\r\n  border: none;\r\n}\r\n\r\n/* Skill mention picker */\r\n.ap-skill-picker {\r\n  position: absolute;\r\n  bottom: 100%;\r\n  left: 0;\r\n  z-index: 10;\r\n  margin-bottom: 4px;\r\n  max-height: 224px;\r\n  width: 100%;\r\n  overflow-y: auto;\r\n  border-radius: var(--ap-radius);\r\n  border: 1px solid var(--ap-border);\r\n  background: var(--ap-surface);\r\n  padding: 4px 0;\r\n  box-shadow: var(--ap-shadow-lg);\r\n}\r\n.ap-skill-picker-empty {\r\n  padding: 8px 12px;\r\n  font-size: var(--ap-font-size-sm);\r\n  color: var(--ap-text-faint);\r\n}\r\n.ap-skill-option {\r\n  display: flex;\r\n  width: 100%;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  padding: 6px 12px;\r\n  text-align: left;\r\n  transition: background-color var(--ap-transition);\r\n}\r\n.ap-skill-option--active {\r\n  background: var(--ap-primary-light);\r\n}\r\n.ap-skill-option:hover:not(.ap-skill-option--active) {\r\n  background: var(--ap-bg-muted);\r\n}\r\n.ap-skill-option-name {\r\n  font-size: var(--ap-font-size);\r\n  font-weight: 500;\r\n  color: var(--ap-text);\r\n}\r\n.ap-skill-option-desc {\r\n  font-size: var(--ap-font-size-sm);\r\n  color: var(--ap-text-muted);\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 1;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n}\r\n\r\n/* Input action buttons */\r\n.ap-input-actions {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: 8px;\r\n  padding: 0 8px 8px;\r\n}\r\n.ap-input-btn {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  border-radius: var(--ap-radius-full);\r\n  transition: background-color var(--ap-transition);\r\n}\r\n.ap-input-btn svg {\r\n  width: 16px;\r\n  height: 16px;\r\n}\r\n.ap-input-btn--mic {\r\n  width: 32px;\r\n  height: 32px;\r\n  background: var(--ap-border-light);\r\n  color: var(--ap-text-muted);\r\n}\r\n.ap-input-btn--mic:hover {\r\n  background: var(--ap-border);\r\n}\r\n.ap-input-btn--mic-active {\r\n  background: var(--ap-danger);\r\n  color: #fff;\r\n  animation: ap-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n.ap-input-btn--mic-active:hover {\r\n  background: var(--ap-danger-hover);\r\n}\r\n.ap-input-btn--send {\r\n  width: 32px;\r\n  height: 32px;\r\n  background: var(--ap-primary);\r\n  color: #fff;\r\n}\r\n.ap-input-btn--send:hover {\r\n  background: var(--ap-primary-hover);\r\n}\r\n.ap-input-btn--send:disabled {\r\n  cursor: not-allowed;\r\n  opacity: 0.4;\r\n}\r\n.ap-input-btn--stop {\r\n  width: 36px;\r\n  height: 36px;\r\n  background: var(--ap-danger);\r\n  color: #fff;\r\n}\r\n.ap-input-btn--stop:hover {\r\n  background: var(--ap-danger-hover);\r\n}\r\n.ap-input-btn--stop svg {\r\n  fill: currentColor;\r\n}\r\n@keyframes ap-pulse {\r\n  50% {\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\r\n/* ============================================================\r\n   Overlays (confirm close / retry)\r\n   ============================================================ */\r\n.ap-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 10;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 16px;\r\n  background: rgba(0, 0, 0, 0.3);\r\n}\r\n.ap-overlay-dialog {\r\n  width: 100%;\r\n  max-width: 300px;\r\n  border-radius: var(--ap-radius-xl);\r\n  background: var(--ap-surface);\r\n  padding: 16px;\r\n  box-shadow: var(--ap-shadow-xl);\r\n}\r\n.ap-overlay-title {\r\n  font-size: var(--ap-font-size);\r\n  font-weight: 600;\r\n  color: var(--ap-text);\r\n}\r\n.ap-overlay-text {\r\n  margin-top: 4px;\r\n  font-size: var(--ap-font-size-sm);\r\n  color: var(--ap-text-muted);\r\n}\r\n.ap-overlay-actions {\r\n  margin-top: 16px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n}\r\n.ap-overlay-btn {\r\n  width: 100%;\r\n  border-radius: var(--ap-radius);\r\n  padding: 8px 12px;\r\n  font-size: var(--ap-font-size);\r\n  font-weight: 500;\r\n  transition: background-color var(--ap-transition);\r\n}\r\n.ap-overlay-btn--primary {\r\n  background: var(--ap-primary);\r\n  color: #fff;\r\n}\r\n.ap-overlay-btn--primary:hover {\r\n  background: var(--ap-primary-hover);\r\n}\r\n.ap-overlay-btn--secondary {\r\n  border: 1px solid var(--ap-border);\r\n  color: var(--ap-text-secondary);\r\n}\r\n.ap-overlay-btn--secondary:hover {\r\n  background: var(--ap-bg-muted);\r\n}\r\n.ap-overlay-btn--cancel {\r\n  padding: 6px 12px;\r\n  font-size: var(--ap-font-size-sm);\r\n  color: var(--ap-text-faint);\r\n}\r\n.ap-overlay-btn--cancel:hover {\r\n  color: var(--ap-text-muted);\r\n}\r\n\r\n/* ============================================================\r\n   Continue hint (tool-limit truncation)\r\n   ============================================================ */\r\n.ap-continue-hint {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  border-radius: var(--ap-radius-lg);\r\n  border: 1px solid var(--ap-warning-border);\r\n  background: var(--ap-warning-bg);\r\n  padding: 10px 12px;\r\n}\r\n.ap-continue-hint-text {\r\n  font-size: var(--ap-font-size-sm);\r\n  line-height: 1.625;\r\n  color: var(--ap-warning);\r\n}\r\n.ap-continue-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  border-radius: var(--ap-radius);\r\n  background: var(--ap-warning);\r\n  padding: 6px 12px;\r\n  font-size: var(--ap-font-size-sm);\r\n  font-weight: 500;\r\n  color: #fff;\r\n  transition: background-color var(--ap-transition);\r\n}\r\n.ap-continue-btn:hover {\r\n  background: var(--ap-warning-hover);\r\n}\r\n.ap-continue-btn svg {\r\n  width: 14px;\r\n  height: 14px;\r\n}\r\n\r\n/* ============================================================\r\n   Error banner\r\n   ============================================================ */\r\n.ap-error {\r\n  border-radius: var(--ap-radius);\r\n  background: var(--ap-danger-bg);\r\n  padding: 8px 12px;\r\n  font-size: var(--ap-font-size-sm);\r\n  color: var(--ap-danger);\r\n}\r\n\r\n/* ============================================================\r\n   Markdown rendering (replaces @tailwindcss/typography)\r\n   ============================================================ */\r\n.ap-markdown {\r\n  font-size: var(--ap-font-size);\r\n  line-height: 1.625;\r\n  word-wrap: break-word;\r\n  overflow-wrap: break-word;\r\n}\r\n.ap-markdown p {\r\n  margin-top: 4px;\r\n  margin-bottom: 4px;\r\n}\r\n.ap-markdown p:first-child {\r\n  margin-top: 0;\r\n}\r\n.ap-markdown p:last-child {\r\n  margin-bottom: 0;\r\n}\r\n.ap-markdown h1,\r\n.ap-markdown h2,\r\n.ap-markdown h3,\r\n.ap-markdown h4,\r\n.ap-markdown h5,\r\n.ap-markdown h6 {\r\n  margin-top: 8px;\r\n  margin-bottom: 8px;\r\n  font-weight: 600;\r\n  color: var(--ap-text);\r\n}\r\n.ap-markdown h1 {\r\n  font-size: 1.25em;\r\n}\r\n.ap-markdown h2 {\r\n  font-size: 1.15em;\r\n}\r\n.ap-markdown h3 {\r\n  font-size: 1.05em;\r\n}\r\n.ap-markdown ul,\r\n.ap-markdown ol {\r\n  margin-top: 4px;\r\n  margin-bottom: 4px;\r\n  padding-left: 1.25em;\r\n}\r\n.ap-markdown ul {\r\n  list-style: disc;\r\n}\r\n.ap-markdown ol {\r\n  list-style: decimal;\r\n}\r\n.ap-markdown li {\r\n  margin-top: 2px;\r\n  margin-bottom: 2px;\r\n}\r\n.ap-markdown a {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 2px;\r\n  color: var(--ap-primary);\r\n  text-decoration: underline;\r\n  text-underline-offset: 2px;\r\n  word-break: break-all;\r\n}\r\n.ap-markdown a svg {\r\n  display: inline;\r\n  width: 12px;\r\n  height: 12px;\r\n  flex-shrink: 0;\r\n  vertical-align: baseline;\r\n}\r\n.ap-markdown blockquote {\r\n  margin: 6px 0;\r\n  padding-left: 10px;\r\n  border-left: 3px solid var(--ap-border);\r\n  color: var(--ap-text-muted);\r\n  font-style: italic;\r\n}\r\n.ap-markdown code {\r\n  font-family: var(--ap-font-mono);\r\n  font-size: 0.875em;\r\n  background: var(--ap-bg-muted);\r\n  padding: 2px 5px;\r\n  border-radius: 4px;\r\n}\r\n.ap-markdown pre {\r\n  margin: 8px 0;\r\n  padding: 10px 12px;\r\n  overflow-x: auto;\r\n  background: #1f2937;\r\n  color: #f9fafb;\r\n  border-radius: var(--ap-radius-sm);\r\n  font-size: 0.875em;\r\n  line-height: 1.5;\r\n}\r\n.ap-markdown pre code {\r\n  background: none;\r\n  padding: 0;\r\n  color: inherit;\r\n  font-size: inherit;\r\n}\r\n.ap-markdown table {\r\n  width: 100%;\r\n  margin: 8px 0;\r\n  border-collapse: collapse;\r\n  font-size: 0.875em;\r\n}\r\n.ap-markdown th,\r\n.ap-markdown td {\r\n  padding: 4px 8px;\r\n  border: 1px solid var(--ap-border);\r\n  text-align: left;\r\n}\r\n.ap-markdown th {\r\n  background: var(--ap-bg-muted);\r\n  font-weight: 600;\r\n}\r\n.ap-markdown table-wrapper {\r\n  margin: 8px 0;\r\n  width: 100%;\r\n  overflow-x: auto;\r\n}\r\n.ap-markdown hr {\r\n  margin: 12px 0;\r\n  border: none;\r\n  border-top: 1px solid var(--ap-border);\r\n}\r\n.ap-markdown img {\r\n  max-width: 100%;\r\n  height: auto;\r\n  border-radius: var(--ap-radius-sm);\r\n}\r\n";
+
+let root = null;
+let hostEl = null;
+// Monotonic token used to cancel a pending `init()` if `destroy()` (or a
+// second `init()`) is called while its dynamic imports are still resolving.
+let initToken = 0;
+/**
+ * Mount the AI chat widget onto the page. Safe to call multiple times — a
+ * second call will unmount the previous instance first.
+ *
+ * Returns a Promise that resolves once the widget is mounted. The Promise
+ * is also resolved (without mounting) if a subsequent `destroy()` cancels
+ * the pending mount.
+ *
+ * The widget is rendered inside a **Shadow DOM** so that:
+ * - Host-page CSS (resets, frameworks, etc.) cannot leak in.
+ * - Widget CSS cannot leak out.
+ * - No `<link>` tag is required — styles are inlined into the JS bundle.
+ *
+ * This function is SSR-safe to import: it only touches browser APIs when
+ * actually invoked (which should happen inside a `useEffect` or other
+ * client-only context).
+ *
+ * @example
+ * // Via script tag (UMD build) — no separate CSS needed:
+ * <script src="agent-plugin.umd.js"></script>
+ * <script>AgentPlugin.init({ serverUrl: "https://api.example.com", agentId: "abc-123" })</script>
+ *
+ * @example
+ * // Via ES module import (Next.js / React):
+ * import { init } from "agent-plugin";
+ * useEffect(() => { init({ serverUrl: "...", agentId: "..." }); }, []);
+ */
+async function init(options) {
+    const { serverUrl, agentId, container } = options;
+    if (!serverUrl) {
+        console.error("[AgentPlugin] serverUrl is required.");
+        return;
+    }
+    if (!agentId) {
+        console.error("[AgentPlugin] agentId is required.");
+        return;
+    }
+    // Tear down any previous instance and invalidate any pending init.
+    destroy();
+    const token = ++initToken;
+    // Lazily load the heavy modules (React DOM client + the widget, which
+    // transitively imports react-markdown). Their module bodies only execute
+    // here — in the browser — never at import time on the server.
+    const [{ createRoot }, { AiChatWidget }] = await Promise.all([
+        import('./client-BUWKPbRy.js').then(function (n) { return n.c; }),
+        import('./index-oRKYtCcO.js'),
+    ]);
+    // If `destroy()` (or another `init()`) ran while we were awaiting, bail.
+    if (token !== initToken)
+        return;
+    // Always create a dedicated host element — even when a `container` is
+    // provided — so we own the element and can safely `attachShadow` on it.
+    hostEl = document.createElement("div");
+    hostEl.id = "agent-plugin-chat-root";
+    if (container) {
+        let parentEl;
+        if (typeof container === "string") {
+            const found = document.querySelector(container);
+            if (!found) {
+                console.error(`[AgentPlugin] Container "${container}" not found.`);
+                hostEl = null;
+                return;
+            }
+            parentEl = found;
+        }
+        else {
+            parentEl = container;
+        }
+        parentEl.appendChild(hostEl);
+    }
+    else {
+        document.body.appendChild(hostEl);
+    }
+    // Attach an open Shadow DOM. Styles injected here are fully encapsulated —
+    // they do not affect the host page and vice versa.
+    const shadow = hostEl.attachShadow({ mode: "open" });
+    // Inject the widget CSS as a <style> node inside the shadow root.
+    // The CSS source (src/styles.css) is inlined at build time via ?raw import.
+    {
+        const styleEl = document.createElement("style");
+        styleEl.textContent = cssText;
+        shadow.appendChild(styleEl);
+    }
+    // Create the React mount point inside the shadow root.
+    const mountEl = document.createElement("div");
+    shadow.appendChild(mountEl);
+    root = createRoot(mountEl);
+    root.render(jsxRuntimeExports.jsx(AiChatWidget, { serverUrl: serverUrl, agentId: agentId }));
+}
+/**
+ * Unmount the widget and remove the injected host element (including its
+ * shadow root). Useful for SPA route changes or when the widget is no longer
+ * needed. Also cancels any pending `init()` whose dynamic imports haven't
+ * resolved yet.
+ */
+function destroy() {
+    initToken++; // invalidate any pending init
+    if (root) {
+        root.unmount();
+        root = null;
+    }
+    if (hostEl && hostEl.parentNode) {
+        hostEl.parentNode.removeChild(hostEl);
+        hostEl = null;
+    }
+}
+
+export { destroy as d, init as i, jsxRuntimeExports as j };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@cabbage0320/agent-plugin",
+  "version": "1.0.0",
+  "description": "Embeddable AI chat widget SDK for any website.",
+  "type": "module",
+  "main": "dist/agent-plugin.umd.js",
+  "module": "dist/agent-plugin.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w"
+  },
+  "dependencies": {
+    "@ai-sdk/react": "^4.0.32",
+    "ai": "^7.0.29",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "rollup": "^4.50.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5"
+  }
+}