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

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

@@ -1,7 +1,40 @@
+import type { MCP } from "./provider/use-chatbot-frame-handler";
 export type ChatbotFrameProps = {
+    /** 管理画面上のエージェントID */
     agentId: string;
+    /** エージェントにつなげるMCPの情報 */
+    mcps?: MCP[];
+    /** アプリ名のメタデータ */
+    appName?: string;
+    /** セッションを取得するための関数 */
+    getSession?: () => Promise<{
+        sessionId: string;
+        token: string;
+        expiresAt: string;
+    }>;
+    /**
+     * trueになるまで、初期化されません。
+     * 初期化せれたあとはもう使われません。
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * エージェントのURLを上書きしたい場合にこちらを使います。
+     * 基本的には使われません。
+     * [CHATBOT_URL]の環境変数でも設定可能。
+     * @internal
+     */
     url?: string;
     className?: string;
 };
-export declare function ChatbotFrame({ agentId, className, url }: ChatbotFrameProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatbotFrame({ agentId, appName, mcps, getSession, enabled, url, className, }: ChatbotFrameProps): import("react/jsx-runtime").JSX.Element;
+export type SessionData = {
+    sessionId: string;
+    token: string;
+    expiresAt: string;
+};
+export type UseSessionProps = {
+    getSession?: () => Promise<SessionData>;
+};
+export declare function useSession({ getSession }: UseSessionProps): string | undefined;
 //# sourceMappingURL=chatbot-frame.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"chatbot-frame.d.ts","sourceRoot":"","sources":["../../src/components/chatbot-frame.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,iBAAiB;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;QACzB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC,CAAC;IACH;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,IAAI,EACJ,UAAU,EACV,OAAc,EACd,GAAG,EACH,SAAS,GACV,EAAE,iBAAiB,2CA4EnB;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;CACzC,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,EAAE,eAAe,sBAuCzD"}

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

@@ -17,6 +17,8 @@ type ChatbotContextType = {
     setMcps: (mcps: MCP[]) => void;
     /** アプリ名を設定 */
     setAppName: (appName: string) => void;
+    /** セッショントークンを設定 */
+    setSessionToken: (sessionToken: string) => void;
     /** チャットボットが準備できたか */
     isReady: boolean;
     /** チャットボットが初期化されたか */

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

@@ -1 +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"}
+{"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,mBAAmB;IACnB,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,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,2CAkCjE"}

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

@@ -18,6 +18,7 @@ export type MCP = {
 export type InitProps = {
     mcps?: MCP[];
     appName?: string;
+    sessionToken?: string;
 };
 export type ParentMessage = {
     type: "mcps";
@@ -25,10 +26,14 @@ export type ParentMessage = {
 } | {
     type: "appName";
     appName: string;
+} | {
+    type: "sessionToken";
+    sessionToken: string;
 } | {
     type: "init";
     mcps?: MCP[];
     appName?: string;
+    sessionToken?: string;
 };
 export declare function useChatbotFrameHandler({ setOpen, setIsExpanded, }: {
     setOpen: (open: boolean) => void;
@@ -37,6 +42,7 @@ export declare function useChatbotFrameHandler({ setOpen, setIsExpanded, }: {
     init: (props: InitProps) => void;
     setMcps: (mcps: MCP[]) => void;
     setAppName: (appName: string) => void;
+    setSessionToken: (sessionToken: string) => void;
     setIframeEl: React.Dispatch<React.SetStateAction<HTMLIFrameElement | null>>;
     isReady: boolean;
     isInitialized: boolean;

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

@@ -1 +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"}
+{"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;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,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,cAAc,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,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;oCAOD,MAAM;;;;EA0DxB"}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 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";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"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,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -76,6 +76,12 @@ function useChatbotFrameHandler({
     },
     [postMessage]
   );
+  const setSessionToken = React5.default.useCallback(
+    (sessionToken) => {
+      postMessage({ type: "sessionToken", sessionToken });
+    },
+    [postMessage]
+  );
   React5.default.useEffect(() => {
     const iframe = iframeEl;
     if (!iframe) {
@@ -113,7 +119,15 @@ function useChatbotFrameHandler({
       iframe.removeEventListener("load", handleIframeLoad);
     };
   }, [iframeEl]);
-  return { init, setMcps, setAppName, setIframeEl, isReady, isInitialized };
+  return {
+    init,
+    setMcps,
+    setAppName,
+    setSessionToken,
+    setIframeEl,
+    isReady,
+    isInitialized
+  };
 }
 
 // src/components/provider/use-chatbot-window-states.tsx
@@ -144,7 +158,15 @@ function useChatbot() {
 }
 function ChatbotProvider({ children }) {
   const { hasOpened, open, isExpanded, setOpen, setIsExpanded } = useChatbotWindowStates();
-  const { setMcps, setAppName, init, isReady, isInitialized, setIframeEl } = useChatbotFrameHandler({
+  const {
+    setMcps,
+    setAppName,
+    setSessionToken,
+    init,
+    isReady,
+    isInitialized,
+    setIframeEl
+  } = useChatbotFrameHandler({
     setOpen,
     setIsExpanded
   });
@@ -154,6 +176,7 @@ function ChatbotProvider({ children }) {
     setOpen,
     isExpanded,
     setIsExpanded,
+    setSessionToken,
     init,
     setMcps,
     setAppName,
@@ -164,25 +187,47 @@ function ChatbotProvider({ children }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatbotContext.Provider, { value, children });
 }
 
-// src/hooks/use-chatbot-config.tsx
+// src/components/chatbot-frame.tsx
+
 
-function useChatbotConfig({
-  mcps,
+// src/lib/constants.ts
+var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
+
+// src/components/chatbot-frame.tsx
+
+function ChatbotFrame({
+  agentId,
   appName,
-  enabled = true
+  mcps,
+  getSession,
+  enabled = true,
+  url,
+  className
 }) {
-  const { init, setMcps, setAppName, isReady } = useChatbot();
+  var _a;
+  const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
+  const { setIframeEl } = useChatbot();
+  const { init, setMcps, setAppName, setSessionToken, isReady } = useChatbot();
   const sentInitRef = React5.default.useRef(false);
   const [currentMcps, setCurrentMcps] = React5.default.useState();
   const [currentAppName, setCurrentAppName] = React5.default.useState();
+  const [currentSessionToken, setCurrentSessionToken] = React5.default.useState();
+  const sessionToken = useSession({ getSession });
+  const shouldInit = enabled && isReady && // getSessionが定義されていれば、currentSessionが設定されるまで待つ
+  !!(sessionToken || getSession === void 0);
   React5.default.useEffect(() => {
-    if (enabled && isReady && !sentInitRef.current) {
-      init({ mcps, appName });
+    if (shouldInit && !sentInitRef.current) {
+      init({
+        mcps,
+        appName,
+        sessionToken
+      });
       sentInitRef.current = true;
       setCurrentMcps(mcps);
       setCurrentAppName(appName);
+      setCurrentSessionToken(sessionToken);
     }
-  }, [enabled, init, mcps, appName, isReady]);
+  }, [enabled, init, mcps, appName, isReady, sessionToken]);
   React5.default.useEffect(() => {
     if (sentInitRef.current && mcps && JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
       setMcps(mcps);
@@ -195,17 +240,12 @@ function useChatbotConfig({
       setAppName(appName);
     }
   }, [appName]);
-}
-
-// src/lib/constants.ts
-var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
-
-// 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();
+  React5.default.useEffect(() => {
+    if (sentInitRef.current && sessionToken && currentSessionToken !== sessionToken) {
+      setCurrentSessionToken(sessionToken);
+      setSessionToken(sessionToken);
+    }
+  }, [sessionToken]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "iframe",
     {
@@ -220,6 +260,36 @@ function ChatbotFrame({ agentId, className, url }) {
     }
   );
 }
+function useSession({ getSession }) {
+  const { setSessionToken } = useChatbot();
+  const [session, setSession] = React5.default.useState();
+  const isFetchingSessionRef = React5.default.useRef(false);
+  React5.default.useEffect(() => {
+    if (!getSession) return;
+    let intervalId;
+    const fetchSession = async () => {
+      if (isFetchingSessionRef.current) return;
+      try {
+        isFetchingSessionRef.current = true;
+        const session2 = await getSession();
+        setSession(session2);
+        setSessionToken(session2.token);
+      } catch (error) {
+        console.error("Failed to get session:", error);
+      } finally {
+        isFetchingSessionRef.current = false;
+      }
+    };
+    fetchSession();
+    intervalId = setInterval(fetchSession, 15 * 60 * 1e3);
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [getSession, setSessionToken]);
+  return session == null ? void 0 : session.token;
+}
 
 // src/components/chatbot-sheet.tsx
 
@@ -461,4 +531,4 @@ function EcforceAiIcon() {
 
 
 
-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;
+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.useSession = useSession;

package/dist/index.mjs

@@ -76,6 +76,12 @@ function useChatbotFrameHandler({
     },
     [postMessage]
   );
+  const setSessionToken = React.useCallback(
+    (sessionToken) => {
+      postMessage({ type: "sessionToken", sessionToken });
+    },
+    [postMessage]
+  );
   React.useEffect(() => {
     const iframe = iframeEl;
     if (!iframe) {
@@ -113,7 +119,15 @@ function useChatbotFrameHandler({
       iframe.removeEventListener("load", handleIframeLoad);
     };
   }, [iframeEl]);
-  return { init, setMcps, setAppName, setIframeEl, isReady, isInitialized };
+  return {
+    init,
+    setMcps,
+    setAppName,
+    setSessionToken,
+    setIframeEl,
+    isReady,
+    isInitialized
+  };
 }
 
 // src/components/provider/use-chatbot-window-states.tsx
@@ -144,7 +158,15 @@ function useChatbot() {
 }
 function ChatbotProvider({ children }) {
   const { hasOpened, open, isExpanded, setOpen, setIsExpanded } = useChatbotWindowStates();
-  const { setMcps, setAppName, init, isReady, isInitialized, setIframeEl } = useChatbotFrameHandler({
+  const {
+    setMcps,
+    setAppName,
+    setSessionToken,
+    init,
+    isReady,
+    isInitialized,
+    setIframeEl
+  } = useChatbotFrameHandler({
     setOpen,
     setIsExpanded
   });
@@ -154,6 +176,7 @@ function ChatbotProvider({ children }) {
     setOpen,
     isExpanded,
     setIsExpanded,
+    setSessionToken,
     init,
     setMcps,
     setAppName,
@@ -164,25 +187,47 @@ function ChatbotProvider({ children }) {
   return /* @__PURE__ */ jsx(ChatbotContext.Provider, { value, children });
 }
 
-// src/hooks/use-chatbot-config.tsx
+// src/components/chatbot-frame.tsx
 import React4 from "react";
-function useChatbotConfig({
-  mcps,
+
+// src/lib/constants.ts
+var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
+
+// src/components/chatbot-frame.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ChatbotFrame({
+  agentId,
   appName,
-  enabled = true
+  mcps,
+  getSession,
+  enabled = true,
+  url,
+  className
 }) {
-  const { init, setMcps, setAppName, isReady } = useChatbot();
+  var _a;
+  const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
+  const { setIframeEl } = useChatbot();
+  const { init, setMcps, setAppName, setSessionToken, isReady } = useChatbot();
   const sentInitRef = React4.useRef(false);
   const [currentMcps, setCurrentMcps] = React4.useState();
   const [currentAppName, setCurrentAppName] = React4.useState();
+  const [currentSessionToken, setCurrentSessionToken] = React4.useState();
+  const sessionToken = useSession({ getSession });
+  const shouldInit = enabled && isReady && // getSessionが定義されていれば、currentSessionが設定されるまで待つ
+  !!(sessionToken || getSession === void 0);
   React4.useEffect(() => {
-    if (enabled && isReady && !sentInitRef.current) {
-      init({ mcps, appName });
+    if (shouldInit && !sentInitRef.current) {
+      init({
+        mcps,
+        appName,
+        sessionToken
+      });
       sentInitRef.current = true;
       setCurrentMcps(mcps);
       setCurrentAppName(appName);
+      setCurrentSessionToken(sessionToken);
     }
-  }, [enabled, init, mcps, appName, isReady]);
+  }, [enabled, init, mcps, appName, isReady, sessionToken]);
   React4.useEffect(() => {
     if (sentInitRef.current && mcps && JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
       setMcps(mcps);
@@ -195,17 +240,12 @@ function useChatbotConfig({
       setAppName(appName);
     }
   }, [appName]);
-}
-
-// src/lib/constants.ts
-var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
-
-// src/components/chatbot-frame.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-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();
+  React4.useEffect(() => {
+    if (sentInitRef.current && sessionToken && currentSessionToken !== sessionToken) {
+      setCurrentSessionToken(sessionToken);
+      setSessionToken(sessionToken);
+    }
+  }, [sessionToken]);
   return /* @__PURE__ */ jsx2(
     "iframe",
     {
@@ -220,6 +260,36 @@ function ChatbotFrame({ agentId, className, url }) {
     }
   );
 }
+function useSession({ getSession }) {
+  const { setSessionToken } = useChatbot();
+  const [session, setSession] = React4.useState();
+  const isFetchingSessionRef = React4.useRef(false);
+  React4.useEffect(() => {
+    if (!getSession) return;
+    let intervalId;
+    const fetchSession = async () => {
+      if (isFetchingSessionRef.current) return;
+      try {
+        isFetchingSessionRef.current = true;
+        const session2 = await getSession();
+        setSession(session2);
+        setSessionToken(session2.token);
+      } catch (error) {
+        console.error("Failed to get session:", error);
+      } finally {
+        isFetchingSessionRef.current = false;
+      }
+    };
+    fetchSession();
+    intervalId = setInterval(fetchSession, 15 * 60 * 1e3);
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [getSession, setSessionToken]);
+  return session == null ? void 0 : session.token;
+}
 
 // src/components/chatbot-sheet.tsx
 import "react";
@@ -460,5 +530,5 @@ export {
   SheetTrigger,
   Tooltip,
   useChatbot,
-  useChatbotConfig
+  useSession
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@super_studio/ecforce-ai-agent-react",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/components/chatbot-frame.tsx

@@ -1,15 +1,108 @@
+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;
+  /** セッションを取得するための関数 */
+  getSession?: () => Promise<{
+    sessionId: string;
+    token: string;
+    expiresAt: string;
+  }>;
+  /**
+   * trueになるまで、初期化されません。
+   * 初期化せれたあとはもう使われません。
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * エージェントのURLを上書きしたい場合にこちらを使います。
+   * 基本的には使われません。
+   * [CHATBOT_URL]の環境変数でも設定可能。
+   * @internal
+   */
   url?: string;
   className?: string;
 };
 
-export function ChatbotFrame({ agentId, className, url }: ChatbotFrameProps) {
+export function ChatbotFrame({
+  agentId,
+  appName,
+  mcps,
+  getSession,
+  enabled = true,
+  url,
+  className,
+}: ChatbotFrameProps) {
   const chatbotUrl = url ?? process.env.CHATBOT_URL ?? PROD_CHATBOT_URL;
   const { setIframeEl } = useChatbot();
+  const { init, setMcps, setAppName, setSessionToken, isReady } = useChatbot();
+  const sentInitRef = React.useRef(false);
+  const [currentMcps, setCurrentMcps] = React.useState<MCP[]>();
+  const [currentAppName, setCurrentAppName] = React.useState<string>();
+  const [currentSessionToken, setCurrentSessionToken] =
+    React.useState<string>();
+  const sessionToken = useSession({ getSession });
+
+  const shouldInit =
+    enabled &&
+    isReady &&
+    // getSessionが定義されていれば、currentSessionが設定されるまで待つ
+    !!(sessionToken || getSession === undefined);
+
+  // 初期化の仕組み
+  React.useEffect(() => {
+    if (shouldInit && !sentInitRef.current) {
+      init({
+        mcps,
+        appName,
+        sessionToken,
+      });
+      sentInitRef.current = true;
+      setCurrentMcps(mcps);
+      setCurrentAppName(appName);
+      setCurrentSessionToken(sessionToken);
+    }
+  }, [enabled, init, mcps, appName, isReady, sessionToken]);
+
+  // 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]);
+
+  // sessionTokenの更新の仕組み
+  React.useEffect(() => {
+    if (
+      sentInitRef.current &&
+      sessionToken &&
+      currentSessionToken !== sessionToken
+    ) {
+      setCurrentSessionToken(sessionToken);
+      setSessionToken(sessionToken);
+    }
+  }, [sessionToken]);
 
   return (
     <iframe
@@ -24,3 +117,54 @@ export function ChatbotFrame({ agentId, className, url }: ChatbotFrameProps) {
     />
   );
 }
+
+export type SessionData = {
+  sessionId: string;
+  token: string;
+  expiresAt: string;
+};
+
+export type UseSessionProps = {
+  getSession?: () => Promise<SessionData>;
+};
+
+export function useSession({ getSession }: UseSessionProps) {
+  const { setSessionToken } = useChatbot();
+  const [session, setSession] = React.useState<SessionData>();
+  const isFetchingSessionRef = React.useRef(false);
+
+  // セッションの取得と定期更新
+  React.useEffect(() => {
+    if (!getSession) return;
+
+    let intervalId: NodeJS.Timeout;
+
+    const fetchSession = async () => {
+      if (isFetchingSessionRef.current) return;
+      try {
+        isFetchingSessionRef.current = true;
+        const session = await getSession();
+        setSession(session);
+        setSessionToken(session.token);
+      } catch (error) {
+        console.error("Failed to get session:", error);
+      } finally {
+        isFetchingSessionRef.current = false;
+      }
+    };
+
+    // 初回実行
+    fetchSession();
+
+    // 15分ごとに実行
+    intervalId = setInterval(fetchSession, 15 * 60 * 1000);
+
+    return () => {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [getSession, setSessionToken]);
+
+  return session?.token;
+}

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

@@ -23,6 +23,8 @@ type ChatbotContextType = {
   setMcps: (mcps: MCP[]) => void;
   /** アプリ名を設定 */
   setAppName: (appName: string) => void;
+  /** セッショントークンを設定 */
+  setSessionToken: (sessionToken: string) => void;
   /** チャットボットが準備できたか */
   isReady: boolean;
   /** チャットボットが初期化されたか */
@@ -53,11 +55,18 @@ type ChatbotProviderProps = {
 export function ChatbotProvider({ children }: ChatbotProviderProps) {
   const { hasOpened, open, isExpanded, setOpen, setIsExpanded } =
     useChatbotWindowStates();
-  const { setMcps, setAppName, init, isReady, isInitialized, setIframeEl } =
-    useChatbotFrameHandler({
-      setOpen,
-      setIsExpanded,
-    });
+  const {
+    setMcps,
+    setAppName,
+    setSessionToken,
+    init,
+    isReady,
+    isInitialized,
+    setIframeEl,
+  } = useChatbotFrameHandler({
+    setOpen,
+    setIsExpanded,
+  });
 
   const value = {
     hasOpened,
@@ -65,6 +74,7 @@ export function ChatbotProvider({ children }: ChatbotProviderProps) {
     setOpen,
     isExpanded,
     setIsExpanded,
+    setSessionToken,
     init,
     setMcps,
     setAppName,

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

@@ -16,6 +16,7 @@ export type MCP = {
 export type InitProps = {
   mcps?: MCP[];
   appName?: string;
+  sessionToken?: string;
 };
 
 export type ParentMessage =
@@ -27,10 +28,15 @@ export type ParentMessage =
       type: "appName";
       appName: string;
     }
+  | {
+      type: "sessionToken";
+      sessionToken: string;
+    }
   | {
       type: "init";
       mcps?: MCP[];
       appName?: string;
+      sessionToken?: string;
     };
 
 export function useChatbotFrameHandler({
@@ -83,6 +89,13 @@ export function useChatbotFrameHandler({
     [postMessage],
   );
 
+  const setSessionToken = React.useCallback(
+    (sessionToken: string) => {
+      postMessage({ type: "sessionToken", sessionToken });
+    },
+    [postMessage],
+  );
+
   // Initialize and setup listeners
   React.useEffect(() => {
     const iframe = iframeEl;
@@ -126,5 +139,13 @@ export function useChatbotFrameHandler({
     };
   }, [iframeEl]); // Run when iframe gets mounted
 
-  return { init, setMcps, setAppName, setIframeEl, isReady, isInitialized };
+  return {
+    init,
+    setMcps,
+    setAppName,
+    setSessionToken,
+    setIframeEl,
+    isReady,
+    isInitialized,
+  };
 }

package/src/index.ts

@@ -1,5 +1,4 @@
 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";

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

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

@@ -1 +0,0 @@
-{"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/src/hooks/use-chatbot-config.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-import { useChatbot } from "../components/provider/chatbot-proivder";
-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 function useChatbotConfig({
-  mcps,
-  appName,
-  enabled = true,
-}: ChatbotConfig) {
-  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]);
-}