@super_studio/ecforce-ai-agent-react 0.3.0 → 0.4.0

package/dist/components/chatbot-frame.d.ts

@@ -0,0 +1,7 @@
+export type ChatbotFrameProps = {
+    agentId: string;
+    url?: string;
+    className?: string;
+};
+export declare function ChatbotFrame({ agentId, className, url }: ChatbotFrameProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chatbot-frame.d.ts.map

package/dist/components/chatbot-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatbot-frame.d.ts","sourceRoot":"","sources":["../../src/components/chatbot-frame.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,iBAAiB,2CAgB1E"}

package/dist/components/chatbot-sheet.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { type ChatbotFrameProps } from "./chatbot-frame";
+type ChatbotSheetProps = ChatbotFrameProps & {
+    sheetStyle?: React.CSSProperties;
+};
+export declare function ChatbotSheet({ sheetStyle, ...props }: ChatbotSheetProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=chatbot-sheet.d.ts.map

package/dist/components/chatbot-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatbot-sheet.d.ts","sourceRoot":"","sources":["../../src/components/chatbot-sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAUvE,KAAK,iBAAiB,GAAG,iBAAiB,GAAG;IAC3C,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAoBvE"}

package/dist/components/provider/chatbot-proivder.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { type InitProps, type MCP } from "./use-chatbot-frame-handler";
+type ChatbotContextType = {
+    /** １回チャットボットを開いたら、固定でtrueになる */
+    hasOpened: boolean;
+    /** チャットボットを開いているか */
+    open: boolean;
+    /** チャットボットを開く */
+    setOpen: (open: boolean) => void;
+    /** チャットボットを展開しているか */
+    isExpanded: boolean;
+    /** チャットボットを展開する */
+    setIsExpanded: (expanded: boolean) => void;
+    /** チャットボットを初期化 */
+    init: (props: InitProps) => void;
+    /** MCPを設定 */
+    setMcps: (mcps: MCP[]) => void;
+    /** アプリ名を設定 */
+    setAppName: (appName: string) => void;
+    /** チャットボットが準備できたか */
+    isReady: boolean;
+    /** チャットボットが初期化されたか */
+    isInitialized: boolean;
+    /**
+     * @internal
+     * チャットボットのiframe要素を設定
+     */
+    setIframeEl: (iframeEl: HTMLIFrameElement | null) => void;
+};
+export declare function useChatbot(): ChatbotContextType;
+type ChatbotProviderProps = {
+    children: React.ReactNode;
+};
+export declare function ChatbotProvider({ children }: ChatbotProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=chatbot-proivder.d.ts.map

package/dist/components/provider/chatbot-proivder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatbot-proivder.d.ts","sourceRoot":"","sources":["../../../src/components/provider/chatbot-proivder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,6BAA6B,CAAC;AAGrC,KAAK,kBAAkB,GAAG;IACxB,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,sBAAsB;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,kBAAkB;IAClB,IAAI,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,aAAa;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC/B,cAAc;IACd,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,qBAAqB;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,EAAE,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D,CAAC;AAMF,wBAAgB,UAAU,uBAMzB;AAED,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CA0BjE"}

package/dist/components/provider/use-chatbot-frame-handler.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+export type IframeMessage = {
+    type: "CHATBOT_READY";
+} | {
+    type: "CHATBOT_INITIALIZED";
+} | {
+    type: "CLOSE_CHATBOT";
+} | {
+    type: "EXPAND_CHATBOT";
+} | {
+    type: "SHRINK_CHATBOT";
+};
+export type MCP = {
+    name: string;
+    url: string;
+    headers?: Record<string, string>;
+};
+export type InitProps = {
+    mcps?: MCP[];
+    appName?: string;
+};
+export type ParentMessage = {
+    type: "mcps";
+    mcps: MCP[];
+} | {
+    type: "appName";
+    appName: string;
+} | {
+    type: "init";
+    mcps?: MCP[];
+    appName?: string;
+};
+export declare function useChatbotFrameHandler({ setOpen, setIsExpanded, }: {
+    setOpen: (open: boolean) => void;
+    setIsExpanded: (expanded: boolean) => void;
+}): {
+    init: (props: InitProps) => void;
+    setMcps: (mcps: MCP[]) => void;
+    setAppName: (appName: string) => void;
+    setIframeEl: React.Dispatch<React.SetStateAction<HTMLIFrameElement | null>>;
+    isReady: boolean;
+    isInitialized: boolean;
+};
+//# sourceMappingURL=use-chatbot-frame-handler.d.ts.map

package/dist/components/provider/use-chatbot-frame-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chatbot-frame-handler.d.ts","sourceRoot":"","sources":["../../../src/components/provider/use-chatbot-frame-handler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,GACzB;IAAE,IAAI,EAAE,qBAAqB,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,GACzB;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC1B;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAE/B,MAAM,MAAM,GAAG,GAAG;IAChB,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;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GACrB;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,GAAG,EAAE,CAAC;CACb,GACD;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEN,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,aAAa,GACd,EAAE;IACD,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;kBAqBW,SAAS;oBAUV,GAAG,EAAE;0BAOF,MAAM;;;;EAkDnB"}

package/dist/components/provider/use-chatbot-window-states.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare function useChatbotWindowStates(): {
+    hasOpened: boolean;
+    open: boolean;
+    isExpanded: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+};
+//# sourceMappingURL=use-chatbot-window-states.d.ts.map

package/dist/components/provider/use-chatbot-window-states.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chatbot-window-states.d.ts","sourceRoot":"","sources":["../../../src/components/provider/use-chatbot-window-states.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,sBAAsB;;;;;;EAYrC"}

package/dist/components/sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAW5E;AAED,QAAA,MAAM,YAAY,mKAUhB,CAAC;AAGH,QAAA,MAAM,UAAU,iKAUd,CAAC;AASH,QAAA,MAAM,YAAY,6JAgChB,CAAC;AAGH,QAAA,MAAM,WAAW,6GAUf,CAAC;AAGH,QAAA,MAAM,WAAW,6GAUf,CAAC;AAGH,QAAA,MAAM,UAAU,mKAUd,CAAC;AAGH,QAAA,MAAM,gBAAgB,6KAUpB,CAAC;AAGH,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAC"}

package/dist/{tooltip.d.ts → components/tooltip.d.ts}

@@ -1,4 +1,3 @@
-import "./tooltip.css";
 type Side = "top" | "right" | "bottom" | "left";
 type Align = "start" | "center" | "end";
 type TooltipProps = {

package/dist/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AASA,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChD,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExC,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,IAAI,EACJ,WAAW,EACX,UAAU,EACV,cAAc,EACd,eAAe,GAChB,EAAE,YAAY,2CA0Cd"}

package/dist/hooks/use-chatbot-config.d.ts

@@ -0,0 +1,19 @@
+import { type MCP } from "../components/provider/use-chatbot-frame-handler";
+type ChatbotConfig = {
+    /** エージェントにつなげるMCPの情報 */
+    mcps?: MCP[];
+    /** アプリ名のメタデータ */
+    appName?: string;
+    /**
+     * trueになるまで、初期化されません。
+     * 初期化せれたあとはもう使われません。
+     * @default true
+     */
+    enabled?: boolean;
+};
+/**
+ * このフックに渡される情報で受動的にinitを呼び出し、mcpsとappNameを更新する
+ */
+export declare function useChatbotConfig({ mcps, appName, enabled, }: ChatbotConfig): void;
+export {};
+//# sourceMappingURL=use-chatbot-config.d.ts.map

package/dist/hooks/use-chatbot-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chatbot-config.d.ts","sourceRoot":"","sources":["../../src/hooks/use-chatbot-config.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,kDAAkD,CAAC;AAE5E,KAAK,aAAa,GAAG;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,iBAAiB;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,OAAc,GACf,EAAE,aAAa,QAmCf"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-export * from "./chatbot-proivder";
-export * from "./agent-frame";
-export * from "./chatbot-sheet";
-export * from "./sheet";
-export * from "./tooltip";
+export * from "./components/provider/chatbot-proivder";
+export * from "./hooks/use-chatbot-config";
+export * from "./components/chatbot-frame";
+export * from "./components/chatbot-sheet";
+export * from "./components/sheet";
+export * from "./components/tooltip";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC;AACvD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -31,169 +31,200 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/chatbot-proivder.tsx
-var _react = require('react'); var React2 = _interopRequireWildcard(_react);
+// src/components/provider/chatbot-proivder.tsx
+var _react = require('react'); var React5 = _interopRequireWildcard(_react);
+
+// src/components/provider/use-chatbot-frame-handler.tsx
+
+function useChatbotFrameHandler({
+  setOpen,
+  setIsExpanded
+}) {
+  const [iframeEl, setIframeEl] = React5.default.useState(
+    null
+  );
+  const [isReady, setIsReady] = React5.default.useState(false);
+  const [isInitialized, setIsInitialized] = React5.default.useState(false);
+  const postMessage = React5.default.useCallback(
+    (message) => {
+      if (iframeEl == null ? void 0 : iframeEl.contentWindow) {
+        if (process.env.NODE_ENV === "development") {
+          console.log("sending message to iframe", message);
+        }
+        iframeEl.contentWindow.postMessage(message, "*");
+      }
+    },
+    [iframeEl]
+  );
+  const init = React5.default.useCallback(
+    (props) => {
+      postMessage(__spreadValues({
+        type: "init"
+      }, props));
+    },
+    [postMessage]
+  );
+  const setMcps = React5.default.useCallback(
+    (mcps) => {
+      postMessage({ type: "mcps", mcps });
+    },
+    [postMessage]
+  );
+  const setAppName = React5.default.useCallback(
+    (appName) => {
+      postMessage({ type: "appName", appName });
+    },
+    [postMessage]
+  );
+  React5.default.useEffect(() => {
+    const iframe = iframeEl;
+    if (!iframe) {
+      return;
+    }
+    const handleMessage = (event) => {
+      var _a;
+      if (process.env.NODE_ENV === "development") {
+        console.log("iframe message", event.data);
+      }
+      switch ((_a = event.data) == null ? void 0 : _a.type) {
+        case "CHATBOT_READY":
+          setIsReady(true);
+          break;
+        case "CHATBOT_INITIALIZED":
+          setIsInitialized(true);
+          break;
+        case "CLOSE_CHATBOT":
+          setOpen(false);
+          break;
+        case "EXPAND_CHATBOT":
+          setIsExpanded(true);
+          break;
+        case "SHRINK_CHATBOT":
+          setIsExpanded(false);
+          break;
+      }
+    };
+    const handleIframeLoad = () => {
+      window.addEventListener("message", handleMessage);
+    };
+    iframe.addEventListener("load", handleIframeLoad);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      iframe.removeEventListener("load", handleIframeLoad);
+    };
+  }, [iframeEl]);
+  return { init, setMcps, setAppName, setIframeEl, isReady, isInitialized };
+}
+
+// src/components/provider/use-chatbot-window-states.tsx
+
+function useChatbotWindowStates() {
+  const [hasOpened, setHasOpened] = React5.default.useState(false);
+  const [open, setOpen] = React5.default.useState(false);
+  const [isExpanded, setIsExpanded] = React5.default.useState(false);
+  React5.default.useEffect(() => {
+    if (open) {
+      setHasOpened(true);
+    }
+  }, [open]);
+  return { hasOpened, open, isExpanded, setOpen, setIsExpanded };
+}
+
+// src/components/provider/chatbot-proivder.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var ChatbotContext = React2.default.createContext(
+var ChatbotContext = React5.default.createContext(
   void 0
 );
 function useChatbot() {
-  const context = React2.default.useContext(ChatbotContext);
+  const context = React5.default.useContext(ChatbotContext);
   if (!context) {
     throw new Error("useChatbot must be used within a ChatbotProvider");
   }
   return context;
 }
 function ChatbotProvider({ children }) {
-  const [hasOpened, setHasOpened] = React2.default.useState(false);
-  const [open, setOpen] = React2.default.useState(false);
-  const [isExpanded, setIsExpanded] = React2.default.useState(false);
-  React2.default.useEffect(() => {
-    if (open) {
-      setHasOpened(true);
-    }
-  }, [open]);
+  const { hasOpened, open, isExpanded, setOpen, setIsExpanded } = useChatbotWindowStates();
+  const { setMcps, setAppName, init, isReady, isInitialized, setIframeEl } = useChatbotFrameHandler({
+    setOpen,
+    setIsExpanded
+  });
   const value = {
     hasOpened,
     open,
     setOpen,
     isExpanded,
-    setIsExpanded
+    setIsExpanded,
+    init,
+    setMcps,
+    setAppName,
+    isReady,
+    isInitialized,
+    setIframeEl
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatbotContext.Provider, { value, children });
 }
 
-// src/agent-frame.tsx
-
-
-
-
-
-
-
+// src/hooks/use-chatbot-config.tsx
 
+function useChatbotConfig({
+  mcps,
+  appName,
+  enabled = true
+}) {
+  const { init, setMcps, setAppName, isReady } = useChatbot();
+  const sentInitRef = React5.default.useRef(false);
+  const [currentMcps, setCurrentMcps] = React5.default.useState();
+  const [currentAppName, setCurrentAppName] = React5.default.useState();
+  React5.default.useEffect(() => {
+    if (enabled && isReady && !sentInitRef.current) {
+      init({ mcps, appName });
+      sentInitRef.current = true;
+      setCurrentMcps(mcps);
+      setCurrentAppName(appName);
+    }
+  }, [enabled, init, mcps, appName, isReady]);
+  React5.default.useEffect(() => {
+    if (sentInitRef.current && mcps && JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
+      setMcps(mcps);
+      setCurrentMcps(mcps);
+    }
+  }, [mcps]);
+  React5.default.useEffect(() => {
+    if (sentInitRef.current && appName && currentAppName !== appName) {
+      setCurrentAppName(appName);
+      setAppName(appName);
+    }
+  }, [appName]);
+}
 
-// src/constants.ts
+// src/lib/constants.ts
 var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
 
-// src/agent-frame.tsx
-
-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 { setIsExpanded, setOpen } = useChatbot();
-    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);
-        }
-        switch ((_a2 = event.data) == null ? void 0 : _a2.type) {
-          case "CHATBOT_READY":
-            setIsReady(true);
-            break;
-          case "CLOSE_CHATBOT":
-            setOpen(false);
-            break;
-          case "EXPAND_CHATBOT":
-            setIsExpanded(true);
-            break;
-          case "SHRINK_CHATBOT":
-            setIsExpanded(false);
-            break;
-        }
-      };
-      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%"
-        }
+// src/components/chatbot-frame.tsx
+
+function ChatbotFrame({ agentId, className, url }) {
+  var _a;
+  const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
+  const { setIframeEl } = useChatbot();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "iframe",
+    {
+      ref: setIframeEl,
+      src: `${chatbotUrl}/embed/${agentId}`,
+      className,
+      allow: "clipboard-write",
+      style: {
+        width: "100%",
+        height: "100%"
       }
-    );
-  }
-);
-AgentFrame.displayName = "AgentFrame";
+    }
+  );
+}
 
-// src/chatbot-sheet.tsx
+// src/components/chatbot-sheet.tsx
 
 
-// src/sheet.tsx
+// src/components/sheet.tsx
 var _reactdialog = require('@radix-ui/react-dialog'); var SheetPrimitive = _interopRequireWildcard(_reactdialog);
 
 
@@ -210,7 +241,7 @@ function Sheet(_a) {
     }, props)
   );
 }
-var SheetTrigger = React2.forwardRef((_a, ref) => {
+var SheetTrigger = React5.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     SheetPrimitive.Trigger,
@@ -222,7 +253,7 @@ var SheetTrigger = React2.forwardRef((_a, ref) => {
   );
 });
 SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
-var SheetClose = React2.forwardRef((_a, ref) => {
+var SheetClose = React5.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     SheetPrimitive.Close,
@@ -238,7 +269,7 @@ function SheetPortal(_a) {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
 }
-var SheetContent = React2.forwardRef((_a, ref) => {
+var SheetContent = React5.forwardRef((_a, ref) => {
   var _b = _a, { className, children, style } = _b, props = __objRest(_b, ["className", "children", "style"]);
   const { isExpanded, open, hasOpened } = useChatbot();
   const width = isExpanded ? "848px" : "400px";
@@ -262,7 +293,7 @@ var SheetContent = React2.forwardRef((_a, ref) => {
   ) });
 });
 SheetContent.displayName = SheetPrimitive.Content.displayName;
-var SheetHeader = React2.forwardRef((_a, ref) => {
+var SheetHeader = React5.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
@@ -274,7 +305,7 @@ var SheetHeader = React2.forwardRef((_a, ref) => {
   );
 });
 SheetHeader.displayName = "SheetHeader";
-var SheetFooter = React2.forwardRef((_a, ref) => {
+var SheetFooter = React5.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
@@ -286,7 +317,7 @@ var SheetFooter = React2.forwardRef((_a, ref) => {
   );
 });
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React2.forwardRef((_a, ref) => {
+var SheetTitle = React5.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     SheetPrimitive.Title,
@@ -298,7 +329,7 @@ var SheetTitle = React2.forwardRef((_a, ref) => {
   );
 });
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React2.forwardRef((_a, ref) => {
+var SheetDescription = React5.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     SheetPrimitive.Description,
@@ -311,7 +342,7 @@ var SheetDescription = React2.forwardRef((_a, ref) => {
 });
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
-// src/tooltip.tsx
+// src/components/tooltip.tsx
 
 
 
@@ -320,7 +351,6 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 
 var _reacttooltip = require('@radix-ui/react-tooltip');
-require('./tooltip.css');
 
 function Tooltip({
   content,
@@ -375,29 +405,27 @@ function Tooltip({
   );
 }
 
-// src/chatbot-sheet.tsx
+// src/components/chatbot-sheet.tsx
 
-var ChatbotSheet = _react.forwardRef.call(void 0, 
-  (_a, ref) => {
-    var _b = _a, { sheetStyle } = _b, props = __objRest(_b, ["sheetStyle"]);
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Sheet, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Tooltip,
-        {
-          side: "top",
-          align: "end",
-          content: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
-          trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetTrigger, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EcforceAiIcon, {}) })
-        }
-      ),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SheetContent, { style: sheetStyle, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetTitle, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetDescription, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
-      ] })
-    ] });
-  }
-);
+function ChatbotSheet(_a) {
+  var _b = _a, { sheetStyle } = _b, props = __objRest(_b, ["sheetStyle"]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Sheet, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Tooltip,
+      {
+        side: "top",
+        align: "end",
+        content: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
+        trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetTrigger, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EcforceAiIcon, {}) })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SheetContent, { style: sheetStyle, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetTitle, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetDescription, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatbotFrame, __spreadValues({}, props))
+    ] })
+  ] });
+}
 function EcforceAiIcon() {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
@@ -432,4 +460,5 @@ function EcforceAiIcon() {
 
 
 
-exports.AgentFrame = AgentFrame; exports.ChatbotProvider = ChatbotProvider; exports.ChatbotSheet = ChatbotSheet; exports.Sheet = Sheet; exports.SheetClose = SheetClose; exports.SheetContent = SheetContent; exports.SheetDescription = SheetDescription; exports.SheetFooter = SheetFooter; exports.SheetHeader = SheetHeader; exports.SheetTitle = SheetTitle; exports.SheetTrigger = SheetTrigger; exports.Tooltip = Tooltip; exports.useChatbot = useChatbot;
+
+exports.ChatbotFrame = ChatbotFrame; exports.ChatbotProvider = ChatbotProvider; exports.ChatbotSheet = ChatbotSheet; exports.Sheet = Sheet; exports.SheetClose = SheetClose; exports.SheetContent = SheetContent; exports.SheetDescription = SheetDescription; exports.SheetFooter = SheetFooter; exports.SheetHeader = SheetHeader; exports.SheetTitle = SheetTitle; exports.SheetTrigger = SheetTrigger; exports.Tooltip = Tooltip; exports.useChatbot = useChatbot; exports.useChatbotConfig = useChatbotConfig;