@super_studio/ecforce-ai-agent-react 0.1.0

package/README.md

@@ -0,0 +1 @@
+TODO

package/dist/agent-frame.d.ts

@@ -0,0 +1,32 @@
+type MCP = {
+    name: string;
+    url: string;
+    headers?: Record<string, string>;
+};
+export type InitProps = {
+    mcps?: MCP[];
+};
+export type AgentFrameProps = {
+    agentId: string;
+    mcps?: MCP[];
+    appName?: string;
+    url?: string;
+    className?: string;
+};
+export type AgentElement = {
+    /**
+     * Push a new list of MCPs to the embedded agent.
+     */
+    setMcps: (mcps: MCP[]) => void;
+    /**
+     * Set the app name for the embedded agent.
+     */
+    setAppName: (appName: string) => void;
+    /**
+     * `true` once the iframe has sent the `CHATBOT_READY` handshake message.
+     */
+    isReady: boolean;
+};
+export declare const AgentFrame: import("react").ForwardRefExoticComponent<AgentFrameProps & import("react").RefAttributes<AgentElement>>;
+export {};
+//# sourceMappingURL=agent-frame.d.ts.map

package/dist/agent-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-frame.d.ts","sourceRoot":"","sources":["../src/agent-frame.tsx"],"names":[],"mappings":"AAcA,KAAK,GAAG,GAAG;IACT,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;CACd,CAAC;AAiBF,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC/B;;OAEG;IACH,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,UAAU,0GAmHtB,CAAC"}

package/dist/chatbot-popover.d.ts

@@ -0,0 +1,3 @@
+import { type AgentElement, type AgentFrameProps } from "./agent-frame";
+export declare const ChatbotPopover: import("react").ForwardRefExoticComponent<AgentFrameProps & import("react").RefAttributes<AgentElement>>;
+//# sourceMappingURL=chatbot-popover.d.ts.map

package/dist/chatbot-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatbot-popover.d.ts","sourceRoot":"","sources":["../src/chatbot-popover.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,cAAc,0GA2B1B,CAAC"}

package/dist/chatbot.css

@@ -0,0 +1,166 @@
+/* Chatbot Trigger Button */
+.chatbot-trigger {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 50;
+  border-radius: 9999px;
+  border: 1px solid #f0f2f7;
+  background-color: #ffffff;
+  padding: 0.375rem;
+  color: #0061ff;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  transition: colors 200ms ease-in-out;
+  cursor: pointer;
+}
+
+.chatbot-trigger:hover {
+  background-color: #f0f2f7;
+}
+
+/* Popover Backdrop */
+.chatbot-popover-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 30;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: fade-in 150ms ease-out;
+}
+
+/* Popover Content */
+.chatbot-popover-content {
+  z-index: 50;
+  border-radius: 2rem;
+  background-color: #f7f9fa;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  outline: none;
+  overflow: hidden;
+  height: 80vh;
+  width: 600px;
+}
+
+/* Animation states */
+.chatbot-popover-content[data-state="closed"] {
+  display: none;
+}
+
+.chatbot-popover-content[data-state="open"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out;
+}
+
+.chatbot-popover-content[data-state="closed"] {
+  animation:
+    zoom-out 150ms ease-in,
+    fade-out 150ms ease-in;
+}
+
+/* Side-specific slide animations */
+.chatbot-popover-content[data-side="bottom"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out,
+    slide-in-from-top 150ms ease-out;
+}
+
+.chatbot-popover-content[data-side="top"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out,
+    slide-in-from-bottom 150ms ease-out;
+}
+
+.chatbot-popover-content[data-side="left"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out,
+    slide-in-from-right 150ms ease-out;
+}
+
+.chatbot-popover-content[data-side="right"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out,
+    slide-in-from-left 150ms ease-out;
+}
+
+/* Keyframe Animations */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoom-in {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    transform: translateY(0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}

package/dist/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,wCAAwC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./agent-frame";
+export * from "./chatbot-popover";
+export * from "./popover";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,252 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/agent-frame.tsx
+
+
+
+
+
+
+
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+
+// src/constants.ts
+var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
+
+// src/agent-frame.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var AgentFrame = _react.forwardRef.call(void 0, 
+  ({ agentId, mcps = [], appName, className, url }, ref) => {
+    var _a;
+    const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
+    const iframeRef = _react.useRef.call(void 0, null);
+    const [isReady, setIsReady] = _react.useState.call(void 0, false);
+    const [hasInitialized, setHasInitialized] = _react.useState.call(void 0, false);
+    const [currentMcps, setCurrentMcps] = _react.useState.call(void 0, mcps);
+    const postMessage = _react.useCallback.call(void 0, (message) => {
+      var _a2;
+      if ((_a2 = iframeRef.current) == null ? void 0 : _a2.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(message, "*");
+      }
+    }, []);
+    const init = _react.useCallback.call(void 0, 
+      (props) => {
+        postMessage(__spreadValues({
+          type: "init"
+        }, props));
+      },
+      [postMessage]
+    );
+    const setMcps = _react.useCallback.call(void 0, 
+      (mcps2) => {
+        postMessage({ type: "mcps", mcps: mcps2 });
+      },
+      [postMessage]
+    );
+    const setAppName = _react.useCallback.call(void 0, 
+      (appName2) => {
+        postMessage({ type: "appName", appName: appName2 });
+      },
+      [postMessage]
+    );
+    _react.useImperativeHandle.call(void 0, 
+      ref,
+      () => ({
+        setMcps,
+        setAppName,
+        get isReady() {
+          return isReady;
+        }
+      }),
+      [setMcps, setAppName, isReady]
+    );
+    _react.useEffect.call(void 0, () => {
+      const iframe = iframeRef.current;
+      if (!iframe) {
+        return;
+      }
+      const handleMessage = (event) => {
+        var _a2;
+        if (process.env.NODE_ENV === "development") {
+          console.log("iframe message", event.data);
+        }
+        if (((_a2 = event.data) == null ? void 0 : _a2.type) === "CHATBOT_READY") {
+          setIsReady(true);
+        }
+      };
+      const handleIframeLoad = () => {
+        window.addEventListener("message", handleMessage);
+      };
+      iframe.addEventListener("load", handleIframeLoad);
+      return () => {
+        window.removeEventListener("message", handleMessage);
+        iframe.removeEventListener("load", handleIframeLoad);
+      };
+    }, []);
+    _react.useEffect.call(void 0, () => {
+      if (isReady && !hasInitialized) {
+        setHasInitialized(true);
+        init({ mcps });
+        if (appName) {
+          setAppName(appName);
+        }
+      }
+    }, [isReady, init, mcps, appName, hasInitialized, setAppName]);
+    _react.useEffect.call(void 0, () => {
+      if (JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
+        setCurrentMcps(mcps);
+        setMcps(mcps);
+      }
+    }, [setMcps, mcps, currentMcps]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "iframe",
+      {
+        ref: iframeRef,
+        src: `${chatbotUrl}/embed/${agentId}`,
+        className,
+        allow: "clipboard-write",
+        style: {
+          width: "100%",
+          height: "100%"
+        }
+      }
+    );
+  }
+);
+AgentFrame.displayName = "AgentFrame";
+
+// src/chatbot-popover.tsx
+
+
+// src/popover.tsx
+var _reactpopover = require('@radix-ui/react-popover'); var PopoverPrimitive = _interopRequireWildcard(_reactpopover);
+
+
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    PopoverPrimitive.Trigger,
+    __spreadValues({
+      ref,
+      className: `chatbot-trigger ${className}`
+    }, props)
+  );
+});
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
+var PopoverContent = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      align = "center",
+      backdrop,
+      sideOffset = 4,
+      forceMount
+    } = _b, props = __objRest(_b, [
+      "className",
+      "align",
+      "backdrop",
+      "sideOffset",
+      "forceMount"
+    ]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverPrimitive.Portal, { forceMount, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      backdrop && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "chatbot-popover-backdrop" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PopoverPrimitive.Content,
+        __spreadValues({
+          ref,
+          align,
+          sideOffset,
+          forceMount,
+          className: `chatbot-popover-content ${className}`
+        }, props)
+      )
+    ] }) });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/chatbot-popover.tsx
+
+var ChatbotPopover = _react.forwardRef.call(void 0, 
+  (props, ref) => {
+    const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+    const [hasOpened, setHasOpened] = _react.useState.call(void 0, false);
+    const handleOpenChange = (open) => {
+      setIsOpen(open);
+      if (open && !hasOpened) {
+        setHasOpened(true);
+      }
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PopoverTrigger, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EcforceAiIcon, {}) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        PopoverContent,
+        {
+          align: "end",
+          backdrop: isOpen,
+          forceMount: hasOpened || void 0,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
+        }
+      )
+    ] });
+  }
+);
+function EcforceAiIcon() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M9.2 13.704s3.7-.812 4.325-3.74c.624-2.93.76-3.364 1.112-3.364.352 0 .42.309.5.618.08.309.51 2.276.613 2.745.102.47.783 2.93 3.712 3.616 2.93.686 3.338.697 3.338 1.12 0 .459-2.361.859-3.338 1.122-.976.263-3.042 1.007-3.587 3.49-.534 2.482-.681 3.489-1.238 3.489-.556 0-.545-.584-.613-.87-.068-.286-.34-1.819-.5-2.494-.147-.675-1.044-2.837-2.962-3.363-1.93-.527-3.962-.847-3.962-1.373s2.134-.824 2.6-.995ZM2.462 4.613s1.785-.39 2.08-1.798c.296-1.409.365-1.615.535-1.615.17 0 .205.149.239.298s.25 1.088.296 1.317c.045.229.375 1.409 1.785 1.74 1.41.333 1.603.333 1.603.54 0 .217-1.137.412-1.603.538-.466.126-1.467.48-1.729 1.683C5.407 8.507 5.338 9 5.078 9c-.262 0-.262-.286-.296-.424-.035-.137-.16-.882-.24-1.202-.079-.321-.5-1.363-1.432-1.615-.932-.252-1.91-.413-1.91-.665 0-.252 1.023-.4 1.25-.48h.012Z"
+        }
+      )
+    }
+  );
+}
+
+
+
+
+
+
+exports.AgentFrame = AgentFrame; exports.ChatbotPopover = ChatbotPopover; exports.Popover = Popover; exports.PopoverContent = PopoverContent; exports.PopoverTrigger = PopoverTrigger;

package/dist/index.mjs

@@ -0,0 +1,252 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/agent-frame.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+
+// src/constants.ts
+var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
+
+// src/agent-frame.tsx
+import { jsx } from "react/jsx-runtime";
+var AgentFrame = forwardRef(
+  ({ agentId, mcps = [], appName, className, url }, ref) => {
+    var _a;
+    const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
+    const iframeRef = useRef(null);
+    const [isReady, setIsReady] = useState(false);
+    const [hasInitialized, setHasInitialized] = useState(false);
+    const [currentMcps, setCurrentMcps] = useState(mcps);
+    const postMessage = useCallback((message) => {
+      var _a2;
+      if ((_a2 = iframeRef.current) == null ? void 0 : _a2.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(message, "*");
+      }
+    }, []);
+    const init = useCallback(
+      (props) => {
+        postMessage(__spreadValues({
+          type: "init"
+        }, props));
+      },
+      [postMessage]
+    );
+    const setMcps = useCallback(
+      (mcps2) => {
+        postMessage({ type: "mcps", mcps: mcps2 });
+      },
+      [postMessage]
+    );
+    const setAppName = useCallback(
+      (appName2) => {
+        postMessage({ type: "appName", appName: appName2 });
+      },
+      [postMessage]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        setMcps,
+        setAppName,
+        get isReady() {
+          return isReady;
+        }
+      }),
+      [setMcps, setAppName, isReady]
+    );
+    useEffect(() => {
+      const iframe = iframeRef.current;
+      if (!iframe) {
+        return;
+      }
+      const handleMessage = (event) => {
+        var _a2;
+        if (process.env.NODE_ENV === "development") {
+          console.log("iframe message", event.data);
+        }
+        if (((_a2 = event.data) == null ? void 0 : _a2.type) === "CHATBOT_READY") {
+          setIsReady(true);
+        }
+      };
+      const handleIframeLoad = () => {
+        window.addEventListener("message", handleMessage);
+      };
+      iframe.addEventListener("load", handleIframeLoad);
+      return () => {
+        window.removeEventListener("message", handleMessage);
+        iframe.removeEventListener("load", handleIframeLoad);
+      };
+    }, []);
+    useEffect(() => {
+      if (isReady && !hasInitialized) {
+        setHasInitialized(true);
+        init({ mcps });
+        if (appName) {
+          setAppName(appName);
+        }
+      }
+    }, [isReady, init, mcps, appName, hasInitialized, setAppName]);
+    useEffect(() => {
+      if (JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
+        setCurrentMcps(mcps);
+        setMcps(mcps);
+      }
+    }, [setMcps, mcps, currentMcps]);
+    return /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: `${chatbotUrl}/embed/${agentId}`,
+        className,
+        allow: "clipboard-write",
+        style: {
+          width: "100%",
+          height: "100%"
+        }
+      }
+    );
+  }
+);
+AgentFrame.displayName = "AgentFrame";
+
+// src/chatbot-popover.tsx
+import { forwardRef as forwardRef3, useState as useState2 } from "react";
+
+// src/popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx2(
+    PopoverPrimitive.Trigger,
+    __spreadValues({
+      ref,
+      className: `chatbot-trigger ${className}`
+    }, props)
+  );
+});
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
+var PopoverContent = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      align = "center",
+      backdrop,
+      sideOffset = 4,
+      forceMount
+    } = _b, props = __objRest(_b, [
+      "className",
+      "align",
+      "backdrop",
+      "sideOffset",
+      "forceMount"
+    ]);
+    return /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { forceMount, children: /* @__PURE__ */ jsxs("div", { children: [
+      backdrop && /* @__PURE__ */ jsx2("div", { className: "chatbot-popover-backdrop" }),
+      /* @__PURE__ */ jsx2(
+        PopoverPrimitive.Content,
+        __spreadValues({
+          ref,
+          align,
+          sideOffset,
+          forceMount,
+          className: `chatbot-popover-content ${className}`
+        }, props)
+      )
+    ] }) });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/chatbot-popover.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChatbotPopover = forwardRef3(
+  (props, ref) => {
+    const [isOpen, setIsOpen] = useState2(false);
+    const [hasOpened, setHasOpened] = useState2(false);
+    const handleOpenChange = (open) => {
+      setIsOpen(open);
+      if (open && !hasOpened) {
+        setHasOpened(true);
+      }
+    };
+    return /* @__PURE__ */ jsxs2(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx3(PopoverTrigger, { children: /* @__PURE__ */ jsx3(EcforceAiIcon, {}) }),
+      /* @__PURE__ */ jsx3(
+        PopoverContent,
+        {
+          align: "end",
+          backdrop: isOpen,
+          forceMount: hasOpened || void 0,
+          children: /* @__PURE__ */ jsx3(AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
+        }
+      )
+    ] });
+  }
+);
+function EcforceAiIcon() {
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsx3(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M9.2 13.704s3.7-.812 4.325-3.74c.624-2.93.76-3.364 1.112-3.364.352 0 .42.309.5.618.08.309.51 2.276.613 2.745.102.47.783 2.93 3.712 3.616 2.93.686 3.338.697 3.338 1.12 0 .459-2.361.859-3.338 1.122-.976.263-3.042 1.007-3.587 3.49-.534 2.482-.681 3.489-1.238 3.489-.556 0-.545-.584-.613-.87-.068-.286-.34-1.819-.5-2.494-.147-.675-1.044-2.837-2.962-3.363-1.93-.527-3.962-.847-3.962-1.373s2.134-.824 2.6-.995ZM2.462 4.613s1.785-.39 2.08-1.798c.296-1.409.365-1.615.535-1.615.17 0 .205.149.239.298s.25 1.088.296 1.317c.045.229.375 1.409 1.785 1.74 1.41.333 1.603.333 1.603.54 0 .217-1.137.412-1.603.538-.466.126-1.467.48-1.729 1.683C5.407 8.507 5.338 9 5.078 9c-.262 0-.262-.286-.296-.424-.035-.137-.16-.882-.24-1.202-.079-.321-.5-1.363-1.432-1.615-.932-.252-1.91-.413-1.91-.665 0-.252 1.023-.4 1.25-.48h.012Z"
+        }
+      )
+    }
+  );
+}
+export {
+  AgentFrame,
+  ChatbotPopover,
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+};

package/dist/popover.d.ts

@@ -0,0 +1,9 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    backdrop?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };
+//# sourceMappingURL=popover.d.ts.map

package/dist/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../src/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAEtC,QAAA,MAAM,cAAc,sKASlB,CAAC;AAGH,QAAA,MAAM,cAAc;eAGL,OAAO;wCA4BrB,CAAC;AAGF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@super_studio/ecforce-ai-agent-react",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./chatbot.css": "./dist/chatbot.css"
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "npm-run-all": "4.1.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tsup": "8.5.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-popover": "1.1.14"
+  },
+  "scripts": {
+    "dev": "npm-run-all --parallel dev:main dev:types",
+    "dev:main": "tsup --watch",
+    "dev:types": "tsc -p tsconfig.build.json --watch",
+    "build": "tsup && tsc -p tsconfig.build.json"
+  }
+}

package/src/agent-frame.tsx

@@ -0,0 +1,180 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { PROD_CHATBOT_URL } from "./constants";
+
+type IframeMessage = {
+  type: "CHATBOT_READY";
+};
+
+type MCP = {
+  name: string;
+  url: string;
+  headers?: Record<string, string>;
+};
+
+export type InitProps = {
+  mcps?: MCP[];
+};
+
+type ParentMessage =
+  | {
+      type: "mcps";
+      mcps: MCP[];
+    }
+  | {
+      type: "appName";
+      appName: string;
+    }
+  | {
+      type: "init";
+      mcps?: MCP[];
+      appName?: string;
+    };
+
+export type AgentFrameProps = {
+  agentId: string;
+  mcps?: MCP[];
+  appName?: string;
+  url?: string;
+  className?: string;
+};
+
+export type AgentElement = {
+  /**
+   * Push a new list of MCPs to the embedded agent.
+   */
+  setMcps: (mcps: MCP[]) => void;
+  /**
+   * Set the app name for the embedded agent.
+   */
+  setAppName: (appName: string) => void;
+  /**
+   * `true` once the iframe has sent the `CHATBOT_READY` handshake message.
+   */
+  isReady: boolean;
+};
+
+export const AgentFrame = forwardRef<AgentElement, AgentFrameProps>(
+  ({ agentId, mcps = [], appName, className, url }, ref) => {
+    const chatbotUrl = url ?? process.env.CHATBOT_URL ?? PROD_CHATBOT_URL;
+
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+    const [isReady, setIsReady] = useState(false);
+    const [hasInitialized, setHasInitialized] = useState(false);
+    const [currentMcps, setCurrentMcps] = useState<MCP[]>(mcps);
+
+    // helper to post message to the iframe
+    const postMessage = useCallback((message: ParentMessage) => {
+      if (iframeRef.current?.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(message, "*");
+      }
+    }, []);
+
+    const init = useCallback(
+      (props: InitProps) => {
+        postMessage({
+          type: "init",
+          ...props,
+        });
+      },
+      [postMessage],
+    );
+
+    const setMcps = useCallback(
+      (mcps: MCP[]) => {
+        postMessage({ type: "mcps", mcps });
+      },
+      [postMessage],
+    );
+
+    const setAppName = useCallback(
+      (appName: string) => {
+        postMessage({ type: "appName", appName });
+      },
+      [postMessage],
+    );
+
+    // Expose imperative API to parents.
+    useImperativeHandle(
+      ref,
+      () => ({
+        setMcps,
+        setAppName,
+        get isReady() {
+          return isReady;
+        },
+      }),
+      [setMcps, setAppName, isReady],
+    );
+
+    // Initialize and setup listeners
+    useEffect(() => {
+      const iframe = iframeRef.current;
+      if (!iframe) {
+        return;
+      }
+
+      const handleMessage = (event: MessageEvent<IframeMessage>) => {
+        if (process.env.NODE_ENV === "development") {
+          console.log("iframe message", event.data);
+        }
+        // When the iframe is ready, set isReady flag to kick off the initialization
+        if (event.data?.type === "CHATBOT_READY") {
+          setIsReady(true);
+        }
+      };
+
+      const handleIframeLoad = () => {
+        window.addEventListener("message", handleMessage);
+      };
+
+      iframe.addEventListener("load", handleIframeLoad);
+
+      return () => {
+        window.removeEventListener("message", handleMessage);
+        iframe.removeEventListener("load", handleIframeLoad);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Only setup the message listeners once
+
+    // initialize the chatbot
+    useEffect(() => {
+      if (isReady && !hasInitialized) {
+        setHasInitialized(true);
+        init({ mcps });
+        if (appName) {
+          setAppName(appName);
+        }
+      }
+    }, [isReady, init, mcps, appName, hasInitialized, setAppName]);
+
+    // set mcps every time they change
+    useEffect(() => {
+      if (JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
+        setCurrentMcps(mcps);
+        setMcps(mcps);
+      }
+    }, [setMcps, mcps, currentMcps]);
+
+    return (
+      <iframe
+        ref={iframeRef}
+        src={`${chatbotUrl}/embed/${agentId}`}
+        className={className}
+        allow="clipboard-write"
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      />
+    );
+  },
+);
+
+AgentFrame.displayName = "AgentFrame";

package/src/chatbot-popover.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, useState } from "react";
+import {
+  AgentFrame,
+  type AgentElement,
+  type AgentFrameProps,
+} from "./agent-frame";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export const ChatbotPopover = forwardRef<AgentElement, AgentFrameProps>(
+  (props, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasOpened, setHasOpened] = useState(false);
+
+    const handleOpenChange = (open: boolean) => {
+      setIsOpen(open);
+      if (open && !hasOpened) {
+        setHasOpened(true);
+      }
+    };
+
+    return (
+      <Popover open={isOpen} onOpenChange={handleOpenChange}>
+        <PopoverTrigger>
+          <EcforceAiIcon />
+        </PopoverTrigger>
+        <PopoverContent
+          align="end"
+          backdrop={isOpen}
+          forceMount={hasOpened || undefined} // チャットのStateを保持するために必要
+        >
+          <AgentFrame {...props} ref={ref} />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+function EcforceAiIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.2 13.704s3.7-.812 4.325-3.74c.624-2.93.76-3.364 1.112-3.364.352 0 .42.309.5.618.08.309.51 2.276.613 2.745.102.47.783 2.93 3.712 3.616 2.93.686 3.338.697 3.338 1.12 0 .459-2.361.859-3.338 1.122-.976.263-3.042 1.007-3.587 3.49-.534 2.482-.681 3.489-1.238 3.489-.556 0-.545-.584-.613-.87-.068-.286-.34-1.819-.5-2.494-.147-.675-1.044-2.837-2.962-3.363-1.93-.527-3.962-.847-3.962-1.373s2.134-.824 2.6-.995ZM2.462 4.613s1.785-.39 2.08-1.798c.296-1.409.365-1.615.535-1.615.17 0 .205.149.239.298s.25 1.088.296 1.317c.045.229.375 1.409 1.785 1.74 1.41.333 1.603.333 1.603.54 0 .217-1.137.412-1.603.538-.466.126-1.467.48-1.729 1.683C5.407 8.507 5.338 9 5.078 9c-.262 0-.262-.286-.296-.424-.035-.137-.16-.882-.24-1.202-.079-.321-.5-1.363-1.432-1.615-.932-.252-1.91-.413-1.91-.665 0-.252 1.023-.4 1.25-.48h.012Z"
+      />
+    </svg>
+  );
+}

package/src/chatbot.css

@@ -0,0 +1,166 @@
+/* Chatbot Trigger Button */
+.chatbot-trigger {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 50;
+  border-radius: 9999px;
+  border: 1px solid #f0f2f7;
+  background-color: #ffffff;
+  padding: 0.375rem;
+  color: #0061ff;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  transition: colors 200ms ease-in-out;
+  cursor: pointer;
+}
+
+.chatbot-trigger:hover {
+  background-color: #f0f2f7;
+}
+
+/* Popover Backdrop */
+.chatbot-popover-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 30;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: fade-in 150ms ease-out;
+}
+
+/* Popover Content */
+.chatbot-popover-content {
+  z-index: 50;
+  border-radius: 2rem;
+  background-color: #f7f9fa;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  outline: none;
+  overflow: hidden;
+  height: 80vh;
+  width: 600px;
+}
+
+/* Animation states */
+.chatbot-popover-content[data-state="closed"] {
+  display: none;
+}
+
+.chatbot-popover-content[data-state="open"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out;
+}
+
+.chatbot-popover-content[data-state="closed"] {
+  animation:
+    zoom-out 150ms ease-in,
+    fade-out 150ms ease-in;
+}
+
+/* Side-specific slide animations */
+.chatbot-popover-content[data-side="bottom"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out,
+    slide-in-from-top 150ms ease-out;
+}
+
+.chatbot-popover-content[data-side="top"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out,
+    slide-in-from-bottom 150ms ease-out;
+}
+
+.chatbot-popover-content[data-side="left"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out,
+    slide-in-from-right 150ms ease-out;
+}
+
+.chatbot-popover-content[data-side="right"] {
+  animation:
+    zoom-in 150ms ease-out,
+    fade-in 150ms ease-out,
+    slide-in-from-left 150ms ease-out;
+}
+
+/* Keyframe Animations */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoom-in {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    transform: translateY(0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}

package/src/constants.ts

@@ -0,0 +1 @@
+export const PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./agent-frame";
+export * from "./chatbot-popover";
+export * from "./popover";

package/src/popover.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Trigger
+    ref={ref}
+    className={`chatbot-trigger ${className}`}
+    {...props}
+  />
+));
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    backdrop?: boolean;
+  }
+>(
+  (
+    {
+      className,
+      align = "center",
+      backdrop,
+      sideOffset = 4,
+      forceMount,
+      ...props
+    },
+    ref,
+  ) => (
+    <PopoverPrimitive.Portal forceMount={forceMount}>
+      <div>
+        {backdrop && <div className="chatbot-popover-backdrop" />}
+        <PopoverPrimitive.Content
+          ref={ref}
+          align={align}
+          sideOffset={sideOffset}
+          forceMount={forceMount}
+          className={`chatbot-popover-content ${className}`}
+          {...props}
+        />
+      </div>
+    </PopoverPrimitive.Portal>
+  ),
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };