@super_studio/ecforce-ai-agent-react 0.3.1 → 0.5.0

package/dist/index.mjs

@@ -31,171 +31,203 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/chatbot-proivder.tsx
+// src/components/provider/chatbot-proivder.tsx
+import React3 from "react";
+
+// src/components/provider/use-chatbot-frame-handler.tsx
 import React from "react";
+function useChatbotFrameHandler({
+  setOpen,
+  setIsExpanded
+}) {
+  const [iframeEl, setIframeEl] = React.useState(
+    null
+  );
+  const [isReady, setIsReady] = React.useState(false);
+  const [isInitialized, setIsInitialized] = React.useState(false);
+  const postMessage = React.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 = React.useCallback(
+    (props) => {
+      postMessage(__spreadValues({
+        type: "init"
+      }, props));
+    },
+    [postMessage]
+  );
+  const setMcps = React.useCallback(
+    (mcps) => {
+      postMessage({ type: "mcps", mcps });
+    },
+    [postMessage]
+  );
+  const setAppName = React.useCallback(
+    (appName) => {
+      postMessage({ type: "appName", appName });
+    },
+    [postMessage]
+  );
+  React.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
+import React2 from "react";
+function useChatbotWindowStates() {
+  const [hasOpened, setHasOpened] = React2.useState(false);
+  const [open, setOpen] = React2.useState(false);
+  const [isExpanded, setIsExpanded] = React2.useState(false);
+  React2.useEffect(() => {
+    if (open) {
+      setHasOpened(true);
+    }
+  }, [open]);
+  return { hasOpened, open, isExpanded, setOpen, setIsExpanded };
+}
+
+// src/components/provider/chatbot-proivder.tsx
 import { jsx } from "react/jsx-runtime";
-var ChatbotContext = React.createContext(
+var ChatbotContext = React3.createContext(
   void 0
 );
 function useChatbot() {
-  const context = React.useContext(ChatbotContext);
+  const context = React3.useContext(ChatbotContext);
   if (!context) {
     throw new Error("useChatbot must be used within a ChatbotProvider");
   }
   return context;
 }
 function ChatbotProvider({ children }) {
-  const [hasOpened, setHasOpened] = React.useState(false);
-  const [open, setOpen] = React.useState(false);
-  const [isExpanded, setIsExpanded] = React.useState(false);
-  React.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__ */ jsx(ChatbotContext.Provider, { value, children });
 }
 
-// src/agent-frame.tsx
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState
-} from "react";
+// src/components/chatbot-frame.tsx
+import React4 from "react";
 
-// src/constants.ts
+// src/lib/constants.ts
 var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
 
-// src/agent-frame.tsx
+// src/components/chatbot-frame.tsx
 import { jsx as jsx2 } 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 { setIsExpanded, setOpen } = useChatbot();
-    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);
-        }
-        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);
-      };
-    }, []);
-    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__ */ jsx2(
-      "iframe",
-      {
-        ref: iframeRef,
-        src: `${chatbotUrl}/embed/${agentId}`,
-        className,
-        allow: "clipboard-write",
-        style: {
-          width: "100%",
-          height: "100%"
-        }
+function ChatbotFrame({
+  agentId,
+  appName,
+  mcps,
+  enabled = true,
+  url,
+  className
+}) {
+  var _a;
+  const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
+  const { setIframeEl } = useChatbot();
+  const { init, setMcps, setAppName, isReady } = useChatbot();
+  const sentInitRef = React4.useRef(false);
+  const [currentMcps, setCurrentMcps] = React4.useState();
+  const [currentAppName, setCurrentAppName] = React4.useState();
+  React4.useEffect(() => {
+    if (enabled && isReady && !sentInitRef.current) {
+      init({ mcps, appName });
+      sentInitRef.current = true;
+      setCurrentMcps(mcps);
+      setCurrentAppName(appName);
+    }
+  }, [enabled, init, mcps, appName, isReady]);
+  React4.useEffect(() => {
+    if (sentInitRef.current && mcps && JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
+      setMcps(mcps);
+      setCurrentMcps(mcps);
+    }
+  }, [mcps]);
+  React4.useEffect(() => {
+    if (sentInitRef.current && appName && currentAppName !== appName) {
+      setCurrentAppName(appName);
+      setAppName(appName);
+    }
+  }, [appName]);
+  return /* @__PURE__ */ jsx2(
+    "iframe",
+    {
+      ref: setIframeEl,
+      src: `${chatbotUrl}/embed/${agentId}`,
+      className,
+      allow: "clipboard-write",
+      style: {
+        width: "100%",
+        height: "100%"
       }
-    );
-  }
-);
-AgentFrame.displayName = "AgentFrame";
+    }
+  );
+}
 
-// src/chatbot-sheet.tsx
-import { forwardRef as forwardRef3 } from "react";
+// src/components/chatbot-sheet.tsx
+import "react";
 
-// src/sheet.tsx
+// src/components/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import * as React2 from "react";
+import * as React5 from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function Sheet(_a) {
   var props = __objRest(_a, []);
@@ -210,7 +242,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__ */ jsx3(
     SheetPrimitive.Trigger,
@@ -222,7 +254,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__ */ jsx3(
     SheetPrimitive.Close,
@@ -238,7 +270,7 @@ function SheetPortal(_a) {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ jsx3(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 +294,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__ */ jsx3(
     "div",
@@ -274,7 +306,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__ */ jsx3(
     "div",
@@ -286,7 +318,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__ */ jsx3(
     SheetPrimitive.Title,
@@ -298,7 +330,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__ */ jsx3(
     SheetPrimitive.Description,
@@ -311,7 +343,7 @@ var SheetDescription = React2.forwardRef((_a, ref) => {
 });
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
-// src/tooltip.tsx
+// src/components/tooltip.tsx
 import {
   Arrow,
   Content as Content2,
@@ -374,29 +406,27 @@ function Tooltip({
   );
 }
 
-// src/chatbot-sheet.tsx
+// src/components/chatbot-sheet.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var ChatbotSheet = forwardRef3(
-  (_a, ref) => {
-    var _b = _a, { sheetStyle } = _b, props = __objRest(_b, ["sheetStyle"]);
-    return /* @__PURE__ */ jsxs2(Sheet, { children: [
-      /* @__PURE__ */ jsx5(
-        Tooltip,
-        {
-          side: "top",
-          align: "end",
-          content: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
-          trigger: /* @__PURE__ */ jsx5(SheetTrigger, { children: /* @__PURE__ */ jsx5(EcforceAiIcon, {}) })
-        }
-      ),
-      /* @__PURE__ */ jsxs2(SheetContent, { style: sheetStyle, children: [
-        /* @__PURE__ */ jsx5(SheetTitle, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
-        /* @__PURE__ */ jsx5(SheetDescription, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
-        /* @__PURE__ */ jsx5(AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
-      ] })
-    ] });
-  }
-);
+function ChatbotSheet(_a) {
+  var _b = _a, { sheetStyle } = _b, props = __objRest(_b, ["sheetStyle"]);
+  return /* @__PURE__ */ jsxs2(Sheet, { children: [
+    /* @__PURE__ */ jsx5(
+      Tooltip,
+      {
+        side: "top",
+        align: "end",
+        content: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
+        trigger: /* @__PURE__ */ jsx5(SheetTrigger, { children: /* @__PURE__ */ jsx5(EcforceAiIcon, {}) })
+      }
+    ),
+    /* @__PURE__ */ jsxs2(SheetContent, { style: sheetStyle, children: [
+      /* @__PURE__ */ jsx5(SheetTitle, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+      /* @__PURE__ */ jsx5(SheetDescription, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+      /* @__PURE__ */ jsx5(ChatbotFrame, __spreadValues({}, props))
+    ] })
+  ] });
+}
 function EcforceAiIcon() {
   return /* @__PURE__ */ jsx5(
     "svg",
@@ -418,7 +448,7 @@ function EcforceAiIcon() {
   );
 }
 export {
-  AgentFrame,
+  ChatbotFrame,
   ChatbotProvider,
   ChatbotSheet,
   Sheet,

package/dist/lib/constants.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@super_studio/ecforce-ai-agent-react",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -17,8 +17,8 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./preset.css": "./dist/preset.css",
-    "./chatbot-sheet.css": "./dist/chatbot-sheet.css"
+    "./preset.css": "./dist/styles/preset.css",
+    "./chatbot-sheet.css": "./dist/styles/chatbot-sheet.css"
   },
   "publishConfig": {
     "access": "public"

package/src/components/chatbot-frame.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { PROD_CHATBOT_URL } from "../lib/constants";
+import { useChatbot } from "./provider/chatbot-proivder";
+import type { MCP } from "./provider/use-chatbot-frame-handler";
+
+export type ChatbotFrameProps = {
+  /** 管理画面上のエージェントID */
+  agentId: string;
+  /** エージェントにつなげるMCPの情報 */
+  mcps?: MCP[];
+  /** アプリ名のメタデータ */
+  appName?: string;
+  /**
+   * trueになるまで、初期化されません。
+   * 初期化せれたあとはもう使われません。
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * エージェントのURLを上書きしたい場合にこちらを使います。
+   * 基本的には使われません。
+   * [CHATBOT_URL]の環境変数でも設定可能。
+   * @internal
+   */
+  url?: string;
+  className?: string;
+};
+
+export function ChatbotFrame({
+  agentId,
+  appName,
+  mcps,
+  enabled = true,
+  url,
+  className,
+}: ChatbotFrameProps) {
+  const chatbotUrl = url ?? process.env.CHATBOT_URL ?? PROD_CHATBOT_URL;
+  const { setIframeEl } = useChatbot();
+  const { init, setMcps, setAppName, isReady } = useChatbot();
+  const sentInitRef = React.useRef(false);
+  const [currentMcps, setCurrentMcps] = React.useState<MCP[]>();
+  const [currentAppName, setCurrentAppName] = React.useState<string>();
+
+  // 初期化の仕組み
+  React.useEffect(() => {
+    if (enabled && isReady && !sentInitRef.current) {
+      init({ mcps, appName });
+      sentInitRef.current = true;
+      setCurrentMcps(mcps);
+      setCurrentAppName(appName);
+    }
+  }, [enabled, init, mcps, appName, isReady]);
+
+  // mcpsの更新の仕組み
+  React.useEffect(() => {
+    if (
+      sentInitRef.current &&
+      mcps &&
+      JSON.stringify(currentMcps) !== JSON.stringify(mcps)
+    ) {
+      setMcps(mcps);
+      setCurrentMcps(mcps);
+    }
+  }, [mcps]);
+
+  // appNameの更新の仕組み
+  React.useEffect(() => {
+    if (sentInitRef.current && appName && currentAppName !== appName) {
+      setCurrentAppName(appName);
+      setAppName(appName);
+    }
+  }, [appName]);
+
+  return (
+    <iframe
+      ref={setIframeEl}
+      src={`${chatbotUrl}/embed/${agentId}`}
+      className={className}
+      allow="clipboard-write"
+      style={{
+        width: "100%",
+        height: "100%",
+      }}
+    />
+  );
+}

package/src/{chatbot-sheet.tsx → components/chatbot-sheet.tsx}

@@ -1,9 +1,5 @@
-import { forwardRef, type CSSProperties } from "react";
-import {
-  AgentFrame,
-  type AgentElement,
-  type AgentFrameProps,
-} from "./agent-frame";
+import React from "react";
+import { ChatbotFrame, type ChatbotFrameProps } from "./chatbot-frame";
 import {
   Sheet,
   SheetContent,
@@ -13,33 +9,31 @@ import {
 } from "./sheet";
 import { Tooltip } from "./tooltip";
 
-type ChatbotSheetProps = AgentFrameProps & {
-  sheetStyle?: CSSProperties;
+type ChatbotSheetProps = ChatbotFrameProps & {
+  sheetStyle?: React.CSSProperties;
 };
 
-export const ChatbotSheet = forwardRef<AgentElement, ChatbotSheetProps>(
-  ({ sheetStyle, ...props }, ref) => {
-    return (
-      <Sheet>
-        <Tooltip
-          side="top"
-          align="end"
-          content="AIに質問してみましょう"
-          trigger={
-            <SheetTrigger>
-              <EcforceAiIcon />
-            </SheetTrigger>
-          }
-        />
-        <SheetContent style={sheetStyle}>
-          <SheetTitle>AIに質問してみましょう</SheetTitle>
-          <SheetDescription>AIに質問してみましょう</SheetDescription>
-          <AgentFrame {...props} ref={ref} />
-        </SheetContent>
-      </Sheet>
-    );
-  },
-);
+export function ChatbotSheet({ sheetStyle, ...props }: ChatbotSheetProps) {
+  return (
+    <Sheet>
+      <Tooltip
+        side="top"
+        align="end"
+        content="AIに質問してみましょう"
+        trigger={
+          <SheetTrigger>
+            <EcforceAiIcon />
+          </SheetTrigger>
+        }
+      />
+      <SheetContent style={sheetStyle}>
+        <SheetTitle>AIに質問してみましょう</SheetTitle>
+        <SheetDescription>AIに質問してみましょう</SheetDescription>
+        <ChatbotFrame {...props} />
+      </SheetContent>
+    </Sheet>
+  );
+}
 
 function EcforceAiIcon() {
   return (