@super_studio/ecforce-ai-agent-react 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/chatbot-frame.d.ts +16 -1
- package/dist/components/chatbot-frame.d.ts.map +1 -1
- package/dist/components/provider/chatbot-proivder.d.ts +2 -0
- package/dist/components/provider/chatbot-proivder.d.ts.map +1 -1
- package/dist/components/provider/use-chatbot-frame-handler.d.ts +6 -0
- package/dist/components/provider/use-chatbot-frame-handler.d.ts.map +1 -1
- package/dist/index.js +77 -7
- package/dist/index.mjs +77 -7
- package/package.json +1 -1
- package/src/components/chatbot-frame.tsx +88 -4
- package/src/components/provider/chatbot-proivder.tsx +15 -5
- package/src/components/provider/use-chatbot-frame-handler.tsx +22 -1
|
@@ -6,6 +6,12 @@ export type ChatbotFrameProps = {
|
|
|
6
6
|
mcps?: MCP[];
|
|
7
7
|
/** アプリ名のメタデータ */
|
|
8
8
|
appName?: string;
|
|
9
|
+
/** セッションを取得するための関数 */
|
|
10
|
+
getSession?: () => Promise<{
|
|
11
|
+
sessionId: string;
|
|
12
|
+
token: string;
|
|
13
|
+
expiresAt: string;
|
|
14
|
+
}>;
|
|
9
15
|
/**
|
|
10
16
|
* trueになるまで、初期化されません。
|
|
11
17
|
* 初期化せれたあとはもう使われません。
|
|
@@ -21,5 +27,14 @@ export type ChatbotFrameProps = {
|
|
|
21
27
|
url?: string;
|
|
22
28
|
className?: string;
|
|
23
29
|
};
|
|
24
|
-
export declare function ChatbotFrame({ agentId, appName, mcps, enabled, url, className, }: ChatbotFrameProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare function ChatbotFrame({ agentId, appName, mcps, getSession, enabled, url, className, }: ChatbotFrameProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export type SessionData = {
|
|
32
|
+
sessionId: string;
|
|
33
|
+
token: string;
|
|
34
|
+
expiresAt: string;
|
|
35
|
+
};
|
|
36
|
+
export type UseSessionProps = {
|
|
37
|
+
getSession?: () => Promise<SessionData>;
|
|
38
|
+
};
|
|
39
|
+
export declare function useSession({ getSession }: UseSessionProps): string | undefined;
|
|
25
40
|
//# sourceMappingURL=chatbot-frame.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;;;;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,OAAc,EACd,GAAG,EACH,SAAS,GACV,EAAE,iBAAiB,
|
|
1
|
+
{"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"}
|
|
@@ -17,6 +17,8 @@ type ChatbotContextType = {
|
|
|
17
17
|
setMcps: (mcps: MCP[]) => void;
|
|
18
18
|
/** アプリ名を設定 */
|
|
19
19
|
setAppName: (appName: string) => void;
|
|
20
|
+
/** セッショントークンを設定 */
|
|
21
|
+
setSessionToken: (sessionToken: string) => void;
|
|
20
22
|
/** チャットボットが準備できたか */
|
|
21
23
|
isReady: boolean;
|
|
22
24
|
/** チャットボットが初期化されたか */
|
|
@@ -1 +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,
|
|
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,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"}
|
|
@@ -18,6 +18,7 @@ export type MCP = {
|
|
|
18
18
|
export type InitProps = {
|
|
19
19
|
mcps?: MCP[];
|
|
20
20
|
appName?: string;
|
|
21
|
+
sessionToken?: string;
|
|
21
22
|
};
|
|
22
23
|
export type ParentMessage = {
|
|
23
24
|
type: "mcps";
|
|
@@ -25,10 +26,14 @@ export type ParentMessage = {
|
|
|
25
26
|
} | {
|
|
26
27
|
type: "appName";
|
|
27
28
|
appName: string;
|
|
29
|
+
} | {
|
|
30
|
+
type: "sessionToken";
|
|
31
|
+
sessionToken: string;
|
|
28
32
|
} | {
|
|
29
33
|
type: "init";
|
|
30
34
|
mcps?: MCP[];
|
|
31
35
|
appName?: string;
|
|
36
|
+
sessionToken?: string;
|
|
32
37
|
};
|
|
33
38
|
export declare function useChatbotFrameHandler({ setOpen, setIsExpanded, }: {
|
|
34
39
|
setOpen: (open: boolean) => void;
|
|
@@ -37,6 +42,7 @@ export declare function useChatbotFrameHandler({ setOpen, setIsExpanded, }: {
|
|
|
37
42
|
init: (props: InitProps) => void;
|
|
38
43
|
setMcps: (mcps: MCP[]) => void;
|
|
39
44
|
setAppName: (appName: string) => void;
|
|
45
|
+
setSessionToken: (sessionToken: string) => void;
|
|
40
46
|
setIframeEl: React.Dispatch<React.SetStateAction<HTMLIFrameElement | null>>;
|
|
41
47
|
isReady: boolean;
|
|
42
48
|
isInitialized: boolean;
|
|
@@ -1 +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;
|
|
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;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.js
CHANGED
|
@@ -76,6 +76,12 @@ function useChatbotFrameHandler({
|
|
|
76
76
|
},
|
|
77
77
|
[postMessage]
|
|
78
78
|
);
|
|
79
|
+
const setSessionToken = React5.default.useCallback(
|
|
80
|
+
(sessionToken) => {
|
|
81
|
+
postMessage({ type: "sessionToken", sessionToken });
|
|
82
|
+
},
|
|
83
|
+
[postMessage]
|
|
84
|
+
);
|
|
79
85
|
React5.default.useEffect(() => {
|
|
80
86
|
const iframe = iframeEl;
|
|
81
87
|
if (!iframe) {
|
|
@@ -113,7 +119,15 @@ function useChatbotFrameHandler({
|
|
|
113
119
|
iframe.removeEventListener("load", handleIframeLoad);
|
|
114
120
|
};
|
|
115
121
|
}, [iframeEl]);
|
|
116
|
-
return {
|
|
122
|
+
return {
|
|
123
|
+
init,
|
|
124
|
+
setMcps,
|
|
125
|
+
setAppName,
|
|
126
|
+
setSessionToken,
|
|
127
|
+
setIframeEl,
|
|
128
|
+
isReady,
|
|
129
|
+
isInitialized
|
|
130
|
+
};
|
|
117
131
|
}
|
|
118
132
|
|
|
119
133
|
// src/components/provider/use-chatbot-window-states.tsx
|
|
@@ -144,7 +158,15 @@ function useChatbot() {
|
|
|
144
158
|
}
|
|
145
159
|
function ChatbotProvider({ children }) {
|
|
146
160
|
const { hasOpened, open, isExpanded, setOpen, setIsExpanded } = useChatbotWindowStates();
|
|
147
|
-
const {
|
|
161
|
+
const {
|
|
162
|
+
setMcps,
|
|
163
|
+
setAppName,
|
|
164
|
+
setSessionToken,
|
|
165
|
+
init,
|
|
166
|
+
isReady,
|
|
167
|
+
isInitialized,
|
|
168
|
+
setIframeEl
|
|
169
|
+
} = useChatbotFrameHandler({
|
|
148
170
|
setOpen,
|
|
149
171
|
setIsExpanded
|
|
150
172
|
});
|
|
@@ -154,6 +176,7 @@ function ChatbotProvider({ children }) {
|
|
|
154
176
|
setOpen,
|
|
155
177
|
isExpanded,
|
|
156
178
|
setIsExpanded,
|
|
179
|
+
setSessionToken,
|
|
157
180
|
init,
|
|
158
181
|
setMcps,
|
|
159
182
|
setAppName,
|
|
@@ -176,6 +199,7 @@ function ChatbotFrame({
|
|
|
176
199
|
agentId,
|
|
177
200
|
appName,
|
|
178
201
|
mcps,
|
|
202
|
+
getSession,
|
|
179
203
|
enabled = true,
|
|
180
204
|
url,
|
|
181
205
|
className
|
|
@@ -183,18 +207,27 @@ function ChatbotFrame({
|
|
|
183
207
|
var _a;
|
|
184
208
|
const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
|
|
185
209
|
const { setIframeEl } = useChatbot();
|
|
186
|
-
const { init, setMcps, setAppName, isReady } = useChatbot();
|
|
210
|
+
const { init, setMcps, setAppName, setSessionToken, isReady } = useChatbot();
|
|
187
211
|
const sentInitRef = React5.default.useRef(false);
|
|
188
212
|
const [currentMcps, setCurrentMcps] = React5.default.useState();
|
|
189
213
|
const [currentAppName, setCurrentAppName] = React5.default.useState();
|
|
214
|
+
const [currentSessionToken, setCurrentSessionToken] = React5.default.useState();
|
|
215
|
+
const sessionToken = useSession({ getSession });
|
|
216
|
+
const shouldInit = enabled && isReady && // getSessionが定義されていれば、currentSessionが設定されるまで待つ
|
|
217
|
+
!!(sessionToken || getSession === void 0);
|
|
190
218
|
React5.default.useEffect(() => {
|
|
191
|
-
if (
|
|
192
|
-
init({
|
|
219
|
+
if (shouldInit && !sentInitRef.current) {
|
|
220
|
+
init({
|
|
221
|
+
mcps,
|
|
222
|
+
appName,
|
|
223
|
+
sessionToken
|
|
224
|
+
});
|
|
193
225
|
sentInitRef.current = true;
|
|
194
226
|
setCurrentMcps(mcps);
|
|
195
227
|
setCurrentAppName(appName);
|
|
228
|
+
setCurrentSessionToken(sessionToken);
|
|
196
229
|
}
|
|
197
|
-
}, [enabled, init, mcps, appName, isReady]);
|
|
230
|
+
}, [enabled, init, mcps, appName, isReady, sessionToken]);
|
|
198
231
|
React5.default.useEffect(() => {
|
|
199
232
|
if (sentInitRef.current && mcps && JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
|
|
200
233
|
setMcps(mcps);
|
|
@@ -207,6 +240,12 @@ function ChatbotFrame({
|
|
|
207
240
|
setAppName(appName);
|
|
208
241
|
}
|
|
209
242
|
}, [appName]);
|
|
243
|
+
React5.default.useEffect(() => {
|
|
244
|
+
if (sentInitRef.current && sessionToken && currentSessionToken !== sessionToken) {
|
|
245
|
+
setCurrentSessionToken(sessionToken);
|
|
246
|
+
setSessionToken(sessionToken);
|
|
247
|
+
}
|
|
248
|
+
}, [sessionToken]);
|
|
210
249
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
211
250
|
"iframe",
|
|
212
251
|
{
|
|
@@ -221,6 +260,36 @@ function ChatbotFrame({
|
|
|
221
260
|
}
|
|
222
261
|
);
|
|
223
262
|
}
|
|
263
|
+
function useSession({ getSession }) {
|
|
264
|
+
const { setSessionToken } = useChatbot();
|
|
265
|
+
const [session, setSession] = React5.default.useState();
|
|
266
|
+
const isFetchingSessionRef = React5.default.useRef(false);
|
|
267
|
+
React5.default.useEffect(() => {
|
|
268
|
+
if (!getSession) return;
|
|
269
|
+
let intervalId;
|
|
270
|
+
const fetchSession = async () => {
|
|
271
|
+
if (isFetchingSessionRef.current) return;
|
|
272
|
+
try {
|
|
273
|
+
isFetchingSessionRef.current = true;
|
|
274
|
+
const session2 = await getSession();
|
|
275
|
+
setSession(session2);
|
|
276
|
+
setSessionToken(session2.token);
|
|
277
|
+
} catch (error) {
|
|
278
|
+
console.error("Failed to get session:", error);
|
|
279
|
+
} finally {
|
|
280
|
+
isFetchingSessionRef.current = false;
|
|
281
|
+
}
|
|
282
|
+
};
|
|
283
|
+
fetchSession();
|
|
284
|
+
intervalId = setInterval(fetchSession, 15 * 60 * 1e3);
|
|
285
|
+
return () => {
|
|
286
|
+
if (intervalId) {
|
|
287
|
+
clearInterval(intervalId);
|
|
288
|
+
}
|
|
289
|
+
};
|
|
290
|
+
}, [getSession, setSessionToken]);
|
|
291
|
+
return session == null ? void 0 : session.token;
|
|
292
|
+
}
|
|
224
293
|
|
|
225
294
|
// src/components/chatbot-sheet.tsx
|
|
226
295
|
|
|
@@ -461,4 +530,5 @@ function EcforceAiIcon() {
|
|
|
461
530
|
|
|
462
531
|
|
|
463
532
|
|
|
464
|
-
|
|
533
|
+
|
|
534
|
+
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
CHANGED
|
@@ -76,6 +76,12 @@ function useChatbotFrameHandler({
|
|
|
76
76
|
},
|
|
77
77
|
[postMessage]
|
|
78
78
|
);
|
|
79
|
+
const setSessionToken = React.useCallback(
|
|
80
|
+
(sessionToken) => {
|
|
81
|
+
postMessage({ type: "sessionToken", sessionToken });
|
|
82
|
+
},
|
|
83
|
+
[postMessage]
|
|
84
|
+
);
|
|
79
85
|
React.useEffect(() => {
|
|
80
86
|
const iframe = iframeEl;
|
|
81
87
|
if (!iframe) {
|
|
@@ -113,7 +119,15 @@ function useChatbotFrameHandler({
|
|
|
113
119
|
iframe.removeEventListener("load", handleIframeLoad);
|
|
114
120
|
};
|
|
115
121
|
}, [iframeEl]);
|
|
116
|
-
return {
|
|
122
|
+
return {
|
|
123
|
+
init,
|
|
124
|
+
setMcps,
|
|
125
|
+
setAppName,
|
|
126
|
+
setSessionToken,
|
|
127
|
+
setIframeEl,
|
|
128
|
+
isReady,
|
|
129
|
+
isInitialized
|
|
130
|
+
};
|
|
117
131
|
}
|
|
118
132
|
|
|
119
133
|
// src/components/provider/use-chatbot-window-states.tsx
|
|
@@ -144,7 +158,15 @@ function useChatbot() {
|
|
|
144
158
|
}
|
|
145
159
|
function ChatbotProvider({ children }) {
|
|
146
160
|
const { hasOpened, open, isExpanded, setOpen, setIsExpanded } = useChatbotWindowStates();
|
|
147
|
-
const {
|
|
161
|
+
const {
|
|
162
|
+
setMcps,
|
|
163
|
+
setAppName,
|
|
164
|
+
setSessionToken,
|
|
165
|
+
init,
|
|
166
|
+
isReady,
|
|
167
|
+
isInitialized,
|
|
168
|
+
setIframeEl
|
|
169
|
+
} = useChatbotFrameHandler({
|
|
148
170
|
setOpen,
|
|
149
171
|
setIsExpanded
|
|
150
172
|
});
|
|
@@ -154,6 +176,7 @@ function ChatbotProvider({ children }) {
|
|
|
154
176
|
setOpen,
|
|
155
177
|
isExpanded,
|
|
156
178
|
setIsExpanded,
|
|
179
|
+
setSessionToken,
|
|
157
180
|
init,
|
|
158
181
|
setMcps,
|
|
159
182
|
setAppName,
|
|
@@ -176,6 +199,7 @@ function ChatbotFrame({
|
|
|
176
199
|
agentId,
|
|
177
200
|
appName,
|
|
178
201
|
mcps,
|
|
202
|
+
getSession,
|
|
179
203
|
enabled = true,
|
|
180
204
|
url,
|
|
181
205
|
className
|
|
@@ -183,18 +207,27 @@ function ChatbotFrame({
|
|
|
183
207
|
var _a;
|
|
184
208
|
const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
|
|
185
209
|
const { setIframeEl } = useChatbot();
|
|
186
|
-
const { init, setMcps, setAppName, isReady } = useChatbot();
|
|
210
|
+
const { init, setMcps, setAppName, setSessionToken, isReady } = useChatbot();
|
|
187
211
|
const sentInitRef = React4.useRef(false);
|
|
188
212
|
const [currentMcps, setCurrentMcps] = React4.useState();
|
|
189
213
|
const [currentAppName, setCurrentAppName] = React4.useState();
|
|
214
|
+
const [currentSessionToken, setCurrentSessionToken] = React4.useState();
|
|
215
|
+
const sessionToken = useSession({ getSession });
|
|
216
|
+
const shouldInit = enabled && isReady && // getSessionが定義されていれば、currentSessionが設定されるまで待つ
|
|
217
|
+
!!(sessionToken || getSession === void 0);
|
|
190
218
|
React4.useEffect(() => {
|
|
191
|
-
if (
|
|
192
|
-
init({
|
|
219
|
+
if (shouldInit && !sentInitRef.current) {
|
|
220
|
+
init({
|
|
221
|
+
mcps,
|
|
222
|
+
appName,
|
|
223
|
+
sessionToken
|
|
224
|
+
});
|
|
193
225
|
sentInitRef.current = true;
|
|
194
226
|
setCurrentMcps(mcps);
|
|
195
227
|
setCurrentAppName(appName);
|
|
228
|
+
setCurrentSessionToken(sessionToken);
|
|
196
229
|
}
|
|
197
|
-
}, [enabled, init, mcps, appName, isReady]);
|
|
230
|
+
}, [enabled, init, mcps, appName, isReady, sessionToken]);
|
|
198
231
|
React4.useEffect(() => {
|
|
199
232
|
if (sentInitRef.current && mcps && JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
|
|
200
233
|
setMcps(mcps);
|
|
@@ -207,6 +240,12 @@ function ChatbotFrame({
|
|
|
207
240
|
setAppName(appName);
|
|
208
241
|
}
|
|
209
242
|
}, [appName]);
|
|
243
|
+
React4.useEffect(() => {
|
|
244
|
+
if (sentInitRef.current && sessionToken && currentSessionToken !== sessionToken) {
|
|
245
|
+
setCurrentSessionToken(sessionToken);
|
|
246
|
+
setSessionToken(sessionToken);
|
|
247
|
+
}
|
|
248
|
+
}, [sessionToken]);
|
|
210
249
|
return /* @__PURE__ */ jsx2(
|
|
211
250
|
"iframe",
|
|
212
251
|
{
|
|
@@ -221,6 +260,36 @@ function ChatbotFrame({
|
|
|
221
260
|
}
|
|
222
261
|
);
|
|
223
262
|
}
|
|
263
|
+
function useSession({ getSession }) {
|
|
264
|
+
const { setSessionToken } = useChatbot();
|
|
265
|
+
const [session, setSession] = React4.useState();
|
|
266
|
+
const isFetchingSessionRef = React4.useRef(false);
|
|
267
|
+
React4.useEffect(() => {
|
|
268
|
+
if (!getSession) return;
|
|
269
|
+
let intervalId;
|
|
270
|
+
const fetchSession = async () => {
|
|
271
|
+
if (isFetchingSessionRef.current) return;
|
|
272
|
+
try {
|
|
273
|
+
isFetchingSessionRef.current = true;
|
|
274
|
+
const session2 = await getSession();
|
|
275
|
+
setSession(session2);
|
|
276
|
+
setSessionToken(session2.token);
|
|
277
|
+
} catch (error) {
|
|
278
|
+
console.error("Failed to get session:", error);
|
|
279
|
+
} finally {
|
|
280
|
+
isFetchingSessionRef.current = false;
|
|
281
|
+
}
|
|
282
|
+
};
|
|
283
|
+
fetchSession();
|
|
284
|
+
intervalId = setInterval(fetchSession, 15 * 60 * 1e3);
|
|
285
|
+
return () => {
|
|
286
|
+
if (intervalId) {
|
|
287
|
+
clearInterval(intervalId);
|
|
288
|
+
}
|
|
289
|
+
};
|
|
290
|
+
}, [getSession, setSessionToken]);
|
|
291
|
+
return session == null ? void 0 : session.token;
|
|
292
|
+
}
|
|
224
293
|
|
|
225
294
|
// src/components/chatbot-sheet.tsx
|
|
226
295
|
import "react";
|
|
@@ -460,5 +529,6 @@ export {
|
|
|
460
529
|
SheetTitle,
|
|
461
530
|
SheetTrigger,
|
|
462
531
|
Tooltip,
|
|
463
|
-
useChatbot
|
|
532
|
+
useChatbot,
|
|
533
|
+
useSession
|
|
464
534
|
};
|
package/package.json
CHANGED
|
@@ -10,6 +10,12 @@ export type ChatbotFrameProps = {
|
|
|
10
10
|
mcps?: MCP[];
|
|
11
11
|
/** アプリ名のメタデータ */
|
|
12
12
|
appName?: string;
|
|
13
|
+
/** セッションを取得するための関数 */
|
|
14
|
+
getSession?: () => Promise<{
|
|
15
|
+
sessionId: string;
|
|
16
|
+
token: string;
|
|
17
|
+
expiresAt: string;
|
|
18
|
+
}>;
|
|
13
19
|
/**
|
|
14
20
|
* trueになるまで、初期化されません。
|
|
15
21
|
* 初期化せれたあとはもう使われません。
|
|
@@ -30,26 +36,41 @@ export function ChatbotFrame({
|
|
|
30
36
|
agentId,
|
|
31
37
|
appName,
|
|
32
38
|
mcps,
|
|
39
|
+
getSession,
|
|
33
40
|
enabled = true,
|
|
34
41
|
url,
|
|
35
42
|
className,
|
|
36
43
|
}: ChatbotFrameProps) {
|
|
37
44
|
const chatbotUrl = url ?? process.env.CHATBOT_URL ?? PROD_CHATBOT_URL;
|
|
38
45
|
const { setIframeEl } = useChatbot();
|
|
39
|
-
const { init, setMcps, setAppName, isReady } = useChatbot();
|
|
46
|
+
const { init, setMcps, setAppName, setSessionToken, isReady } = useChatbot();
|
|
40
47
|
const sentInitRef = React.useRef(false);
|
|
41
48
|
const [currentMcps, setCurrentMcps] = React.useState<MCP[]>();
|
|
42
49
|
const [currentAppName, setCurrentAppName] = React.useState<string>();
|
|
50
|
+
const [currentSessionToken, setCurrentSessionToken] =
|
|
51
|
+
React.useState<string>();
|
|
52
|
+
const sessionToken = useSession({ getSession });
|
|
53
|
+
|
|
54
|
+
const shouldInit =
|
|
55
|
+
enabled &&
|
|
56
|
+
isReady &&
|
|
57
|
+
// getSessionが定義されていれば、currentSessionが設定されるまで待つ
|
|
58
|
+
!!(sessionToken || getSession === undefined);
|
|
43
59
|
|
|
44
60
|
// 初期化の仕組み
|
|
45
61
|
React.useEffect(() => {
|
|
46
|
-
if (
|
|
47
|
-
init({
|
|
62
|
+
if (shouldInit && !sentInitRef.current) {
|
|
63
|
+
init({
|
|
64
|
+
mcps,
|
|
65
|
+
appName,
|
|
66
|
+
sessionToken,
|
|
67
|
+
});
|
|
48
68
|
sentInitRef.current = true;
|
|
49
69
|
setCurrentMcps(mcps);
|
|
50
70
|
setCurrentAppName(appName);
|
|
71
|
+
setCurrentSessionToken(sessionToken);
|
|
51
72
|
}
|
|
52
|
-
}, [enabled, init, mcps, appName, isReady]);
|
|
73
|
+
}, [enabled, init, mcps, appName, isReady, sessionToken]);
|
|
53
74
|
|
|
54
75
|
// mcpsの更新の仕組み
|
|
55
76
|
React.useEffect(() => {
|
|
@@ -71,6 +92,18 @@ export function ChatbotFrame({
|
|
|
71
92
|
}
|
|
72
93
|
}, [appName]);
|
|
73
94
|
|
|
95
|
+
// sessionTokenの更新の仕組み
|
|
96
|
+
React.useEffect(() => {
|
|
97
|
+
if (
|
|
98
|
+
sentInitRef.current &&
|
|
99
|
+
sessionToken &&
|
|
100
|
+
currentSessionToken !== sessionToken
|
|
101
|
+
) {
|
|
102
|
+
setCurrentSessionToken(sessionToken);
|
|
103
|
+
setSessionToken(sessionToken);
|
|
104
|
+
}
|
|
105
|
+
}, [sessionToken]);
|
|
106
|
+
|
|
74
107
|
return (
|
|
75
108
|
<iframe
|
|
76
109
|
ref={setIframeEl}
|
|
@@ -84,3 +117,54 @@ export function ChatbotFrame({
|
|
|
84
117
|
/>
|
|
85
118
|
);
|
|
86
119
|
}
|
|
120
|
+
|
|
121
|
+
export type SessionData = {
|
|
122
|
+
sessionId: string;
|
|
123
|
+
token: string;
|
|
124
|
+
expiresAt: string;
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
export type UseSessionProps = {
|
|
128
|
+
getSession?: () => Promise<SessionData>;
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
export function useSession({ getSession }: UseSessionProps) {
|
|
132
|
+
const { setSessionToken } = useChatbot();
|
|
133
|
+
const [session, setSession] = React.useState<SessionData>();
|
|
134
|
+
const isFetchingSessionRef = React.useRef(false);
|
|
135
|
+
|
|
136
|
+
// セッションの取得と定期更新
|
|
137
|
+
React.useEffect(() => {
|
|
138
|
+
if (!getSession) return;
|
|
139
|
+
|
|
140
|
+
let intervalId: NodeJS.Timeout;
|
|
141
|
+
|
|
142
|
+
const fetchSession = async () => {
|
|
143
|
+
if (isFetchingSessionRef.current) return;
|
|
144
|
+
try {
|
|
145
|
+
isFetchingSessionRef.current = true;
|
|
146
|
+
const session = await getSession();
|
|
147
|
+
setSession(session);
|
|
148
|
+
setSessionToken(session.token);
|
|
149
|
+
} catch (error) {
|
|
150
|
+
console.error("Failed to get session:", error);
|
|
151
|
+
} finally {
|
|
152
|
+
isFetchingSessionRef.current = false;
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
// 初回実行
|
|
157
|
+
fetchSession();
|
|
158
|
+
|
|
159
|
+
// 15分ごとに実行
|
|
160
|
+
intervalId = setInterval(fetchSession, 15 * 60 * 1000);
|
|
161
|
+
|
|
162
|
+
return () => {
|
|
163
|
+
if (intervalId) {
|
|
164
|
+
clearInterval(intervalId);
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
}, [getSession, setSessionToken]);
|
|
168
|
+
|
|
169
|
+
return session?.token;
|
|
170
|
+
}
|
|
@@ -23,6 +23,8 @@ type ChatbotContextType = {
|
|
|
23
23
|
setMcps: (mcps: MCP[]) => void;
|
|
24
24
|
/** アプリ名を設定 */
|
|
25
25
|
setAppName: (appName: string) => void;
|
|
26
|
+
/** セッショントークンを設定 */
|
|
27
|
+
setSessionToken: (sessionToken: string) => void;
|
|
26
28
|
/** チャットボットが準備できたか */
|
|
27
29
|
isReady: boolean;
|
|
28
30
|
/** チャットボットが初期化されたか */
|
|
@@ -53,11 +55,18 @@ type ChatbotProviderProps = {
|
|
|
53
55
|
export function ChatbotProvider({ children }: ChatbotProviderProps) {
|
|
54
56
|
const { hasOpened, open, isExpanded, setOpen, setIsExpanded } =
|
|
55
57
|
useChatbotWindowStates();
|
|
56
|
-
const {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
const {
|
|
59
|
+
setMcps,
|
|
60
|
+
setAppName,
|
|
61
|
+
setSessionToken,
|
|
62
|
+
init,
|
|
63
|
+
isReady,
|
|
64
|
+
isInitialized,
|
|
65
|
+
setIframeEl,
|
|
66
|
+
} = useChatbotFrameHandler({
|
|
67
|
+
setOpen,
|
|
68
|
+
setIsExpanded,
|
|
69
|
+
});
|
|
61
70
|
|
|
62
71
|
const value = {
|
|
63
72
|
hasOpened,
|
|
@@ -65,6 +74,7 @@ export function ChatbotProvider({ children }: ChatbotProviderProps) {
|
|
|
65
74
|
setOpen,
|
|
66
75
|
isExpanded,
|
|
67
76
|
setIsExpanded,
|
|
77
|
+
setSessionToken,
|
|
68
78
|
init,
|
|
69
79
|
setMcps,
|
|
70
80
|
setAppName,
|
|
@@ -16,6 +16,7 @@ export type MCP = {
|
|
|
16
16
|
export type InitProps = {
|
|
17
17
|
mcps?: MCP[];
|
|
18
18
|
appName?: string;
|
|
19
|
+
sessionToken?: string;
|
|
19
20
|
};
|
|
20
21
|
|
|
21
22
|
export type ParentMessage =
|
|
@@ -27,10 +28,15 @@ export type ParentMessage =
|
|
|
27
28
|
type: "appName";
|
|
28
29
|
appName: string;
|
|
29
30
|
}
|
|
31
|
+
| {
|
|
32
|
+
type: "sessionToken";
|
|
33
|
+
sessionToken: string;
|
|
34
|
+
}
|
|
30
35
|
| {
|
|
31
36
|
type: "init";
|
|
32
37
|
mcps?: MCP[];
|
|
33
38
|
appName?: string;
|
|
39
|
+
sessionToken?: string;
|
|
34
40
|
};
|
|
35
41
|
|
|
36
42
|
export function useChatbotFrameHandler({
|
|
@@ -83,6 +89,13 @@ export function useChatbotFrameHandler({
|
|
|
83
89
|
[postMessage],
|
|
84
90
|
);
|
|
85
91
|
|
|
92
|
+
const setSessionToken = React.useCallback(
|
|
93
|
+
(sessionToken: string) => {
|
|
94
|
+
postMessage({ type: "sessionToken", sessionToken });
|
|
95
|
+
},
|
|
96
|
+
[postMessage],
|
|
97
|
+
);
|
|
98
|
+
|
|
86
99
|
// Initialize and setup listeners
|
|
87
100
|
React.useEffect(() => {
|
|
88
101
|
const iframe = iframeEl;
|
|
@@ -126,5 +139,13 @@ export function useChatbotFrameHandler({
|
|
|
126
139
|
};
|
|
127
140
|
}, [iframeEl]); // Run when iframe gets mounted
|
|
128
141
|
|
|
129
|
-
return {
|
|
142
|
+
return {
|
|
143
|
+
init,
|
|
144
|
+
setMcps,
|
|
145
|
+
setAppName,
|
|
146
|
+
setSessionToken,
|
|
147
|
+
setIframeEl,
|
|
148
|
+
isReady,
|
|
149
|
+
isInitialized,
|
|
150
|
+
};
|
|
130
151
|
}
|