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

package/src/components/provider/chatbot-proivder.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import {
+  useChatbotFrameHandler,
+  type InitProps,
+  type MCP,
+} from "./use-chatbot-frame-handler";
+import { useChatbotWindowStates } from "./use-chatbot-window-states";
+
+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;
+};
+
+const ChatbotContext = React.createContext<ChatbotContextType | undefined>(
+  undefined,
+);
+
+export function useChatbot() {
+  const context = React.useContext(ChatbotContext);
+  if (!context) {
+    throw new Error("useChatbot must be used within a ChatbotProvider");
+  }
+  return context;
+}
+
+type ChatbotProviderProps = {
+  children: React.ReactNode;
+};
+
+export function ChatbotProvider({ children }: ChatbotProviderProps) {
+  const { hasOpened, open, isExpanded, setOpen, setIsExpanded } =
+    useChatbotWindowStates();
+  const { setMcps, setAppName, init, isReady, isInitialized, setIframeEl } =
+    useChatbotFrameHandler({
+      setOpen,
+      setIsExpanded,
+    });
+
+  const value = {
+    hasOpened,
+    open,
+    setOpen,
+    isExpanded,
+    setIsExpanded,
+    init,
+    setMcps,
+    setAppName,
+    isReady,
+    isInitialized,
+    setIframeEl,
+  };
+
+  return (
+    <ChatbotContext.Provider value={value}>{children}</ChatbotContext.Provider>
+  );
+}

package/src/components/provider/use-chatbot-frame-handler.tsx

@@ -0,0 +1,130 @@
+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 function useChatbotFrameHandler({
+  setOpen,
+  setIsExpanded,
+}: {
+  setOpen: (open: boolean) => void;
+  setIsExpanded: (expanded: boolean) => void;
+}) {
+  const [iframeEl, setIframeEl] = React.useState<HTMLIFrameElement | null>(
+    null,
+  );
+  const [isReady, setIsReady] = React.useState(false);
+  const [isInitialized, setIsInitialized] = React.useState(false);
+
+  // helper to post message to the iframe
+  const postMessage = React.useCallback(
+    (message: ParentMessage) => {
+      if (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: InitProps) => {
+      postMessage({
+        type: "init",
+        ...props,
+      });
+    },
+    [postMessage],
+  );
+
+  const setMcps = React.useCallback(
+    (mcps: MCP[]) => {
+      postMessage({ type: "mcps", mcps });
+    },
+    [postMessage],
+  );
+
+  const setAppName = React.useCallback(
+    (appName: string) => {
+      postMessage({ type: "appName", appName });
+    },
+    [postMessage],
+  );
+
+  // Initialize and setup listeners
+  React.useEffect(() => {
+    const iframe = iframeEl;
+    if (!iframe) {
+      return;
+    }
+
+    const handleMessage = (event: MessageEvent<IframeMessage>) => {
+      if (process.env.NODE_ENV === "development") {
+        console.log("iframe message", event.data);
+      }
+      // Handle iframe messages
+      switch (event.data?.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]); // Run when iframe gets mounted
+
+  return { init, setMcps, setAppName, setIframeEl, isReady, isInitialized };
+}

package/src/components/provider/use-chatbot-window-states.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export function useChatbotWindowStates() {
+  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]);
+
+  return { hasOpened, open, isExpanded, setOpen, setIsExpanded };
+}

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

@@ -1,8 +1,6 @@
-"use client";
-
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
-import { useChatbot } from "./chatbot-proivder";
+import { useChatbot } from "./provider/chatbot-proivder";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   const { open, setOpen } = useChatbot();

package/src/{tooltip.tsx → components/tooltip.tsx}

@@ -1,5 +1,3 @@
-"use client";
-
 import {
   Arrow,
   Content,

package/src/index.ts

@@ -1,5 +1,5 @@
-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 "./components/chatbot-frame";
+export * from "./components/chatbot-sheet";
+export * from "./components/sheet";
+export * from "./components/tooltip";

package/dist/agent-frame.d.ts

@@ -1,32 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"agent-frame.d.ts","sourceRoot":"","sources":["../src/agent-frame.tsx"],"names":[],"mappings":"AAiBA,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,0GAgItB,CAAC"}

package/dist/chatbot-proivder.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-interface ChatbotContextType {
-    hasOpened: boolean;
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    isExpanded: boolean;
-    setIsExpanded: (expanded: boolean) => void;
-}
-export declare function useChatbot(): ChatbotContextType;
-interface 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/chatbot-proivder.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chatbot-proivder.d.ts","sourceRoot":"","sources":["../src/chatbot-proivder.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,kBAAkB;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAMD,wBAAgB,UAAU,uBAMzB;AAED,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAsBjE"}

package/dist/chatbot-sheet.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"chatbot-sheet.d.ts","sourceRoot":"","sources":["../src/chatbot-sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAcvB,eAAO,MAAM,YAAY;iBAHV,aAAa;gDAyB3B,CAAC"}

package/dist/constants.d.ts.map

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

package/dist/sheet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../src/sheet.tsx"],"names":[],"mappings":"AAEA,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.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../src/tooltip.tsx"],"names":[],"mappings":"AAWA,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/src/agent-frame.tsx

@@ -1,196 +0,0 @@
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import { useChatbot } from "./chatbot-proivder";
-import { PROD_CHATBOT_URL } from "./constants";
-
-type IframeMessage =
-  | { type: "CHATBOT_READY" }
-  | { type: "CLOSE_CHATBOT" }
-  | { type: "EXPAND_CHATBOT" }
-  | { type: "SHRINK_CHATBOT" };
-
-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);
-    const { setIsExpanded, setOpen } = useChatbot();
-
-    // 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);
-        }
-        // Handle iframe messages
-        switch (event.data?.type) {
-          case "CHATBOT_READY":
-            // When the iframe is ready, set isReady flag to kick off the initialization
-            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);
-      };
-      // 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-proivder.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import React from "react";
-
-interface ChatbotContextType {
-  hasOpened: boolean;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  isExpanded: boolean;
-  setIsExpanded: (expanded: boolean) => void;
-}
-
-const ChatbotContext = React.createContext<ChatbotContextType | undefined>(
-  undefined,
-);
-
-export function useChatbot() {
-  const context = React.useContext(ChatbotContext);
-  if (!context) {
-    throw new Error("useChatbot must be used within a ChatbotProvider");
-  }
-  return context;
-}
-
-interface ChatbotProviderProps {
-  children: React.ReactNode;
-}
-
-export function ChatbotProvider({ children }: ChatbotProviderProps) {
-  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 value = {
-    hasOpened,
-    open,
-    setOpen,
-    isExpanded,
-    setIsExpanded,
-  };
-
-  return (
-    <ChatbotContext.Provider value={value}>{children}</ChatbotContext.Provider>
-  );
-}