@super_studio/ecforce-ai-agent-react 0.2.0 → 0.3.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/chatbot-proivder.d.ts +15 -0
- package/dist/chatbot-proivder.d.ts.map +1 -0
- package/dist/chatbot-sheet.css +3 -4
- package/dist/chatbot-sheet.d.ts.map +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +143 -241
- package/dist/index.mjs +171 -269
- package/dist/sheet.d.ts +0 -15
- package/dist/sheet.d.ts.map +1 -1
- package/dist/tooltip.d.ts +0 -1
- package/dist/tooltip.d.ts.map +1 -1
- package/package.json +2 -3
- package/src/agent-frame.tsx +3 -3
- package/src/chatbot-proivder.tsx +51 -0
- package/src/chatbot-sheet.css +3 -4
- package/src/chatbot-sheet.tsx +18 -19
- package/src/index.ts +1 -2
- package/src/sheet.tsx +6 -56
- package/src/tooltip.tsx +0 -1
- package/dist/chatbot-popover.css +0 -168
- package/dist/chatbot-popover.d.ts +0 -3
- package/dist/chatbot-popover.d.ts.map +0 -1
- package/dist/popover.d.ts +0 -9
- package/dist/popover.d.ts.map +0 -1
- package/src/chatbot-popover.css +0 -168
- package/src/chatbot-popover.tsx +0 -54
- package/src/popover.tsx +0 -54
- /package/dist/{tooltip.css → preset.css} +0 -0
- /package/src/{tooltip.css → preset.css} +0 -0
package/dist/index.mjs
CHANGED
|
@@ -31,176 +31,62 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
return target;
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
-
// src/
|
|
35
|
-
import
|
|
36
|
-
forwardRef as forwardRef2,
|
|
37
|
-
useCallback,
|
|
38
|
-
useEffect as useEffect2,
|
|
39
|
-
useImperativeHandle,
|
|
40
|
-
useRef,
|
|
41
|
-
useState as useState2
|
|
42
|
-
} from "react";
|
|
43
|
-
|
|
44
|
-
// src/constants.ts
|
|
45
|
-
var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
|
|
46
|
-
|
|
47
|
-
// src/sheet.tsx
|
|
48
|
-
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
49
|
-
import * as React from "react";
|
|
34
|
+
// src/chatbot-proivder.tsx
|
|
35
|
+
import React from "react";
|
|
50
36
|
import { jsx } from "react/jsx-runtime";
|
|
51
|
-
var
|
|
37
|
+
var ChatbotContext = React.createContext(
|
|
52
38
|
void 0
|
|
53
39
|
);
|
|
54
|
-
function
|
|
55
|
-
const context = React.useContext(
|
|
40
|
+
function useChatbot() {
|
|
41
|
+
const context = React.useContext(ChatbotContext);
|
|
56
42
|
if (!context) {
|
|
57
|
-
throw new Error("
|
|
43
|
+
throw new Error("useChatbot must be used within a ChatbotProvider");
|
|
58
44
|
}
|
|
59
45
|
return context;
|
|
60
46
|
}
|
|
61
|
-
function
|
|
47
|
+
function ChatbotProvider({ children }) {
|
|
62
48
|
const [hasOpened, setHasOpened] = React.useState(false);
|
|
63
|
-
const [
|
|
49
|
+
const [open, setOpen] = React.useState(false);
|
|
64
50
|
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
65
51
|
React.useEffect(() => {
|
|
66
|
-
if (
|
|
52
|
+
if (open) {
|
|
67
53
|
setHasOpened(true);
|
|
68
54
|
}
|
|
69
|
-
}, [
|
|
55
|
+
}, [open]);
|
|
70
56
|
const value = {
|
|
71
57
|
hasOpened,
|
|
72
|
-
|
|
73
|
-
|
|
58
|
+
open,
|
|
59
|
+
setOpen,
|
|
74
60
|
isExpanded,
|
|
75
61
|
setIsExpanded
|
|
76
62
|
};
|
|
77
|
-
return /* @__PURE__ */ jsx(
|
|
63
|
+
return /* @__PURE__ */ jsx(ChatbotContext.Provider, { value, children });
|
|
78
64
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
var SheetTrigger = React.forwardRef((_a, ref) => {
|
|
93
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
94
|
-
return /* @__PURE__ */ jsx(
|
|
95
|
-
SheetPrimitive.Trigger,
|
|
96
|
-
__spreadValues({
|
|
97
|
-
ref,
|
|
98
|
-
"data-slot": "sheet-trigger",
|
|
99
|
-
className: `chatbot-trigger ${className || ""}`
|
|
100
|
-
}, props)
|
|
101
|
-
);
|
|
102
|
-
});
|
|
103
|
-
SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
|
|
104
|
-
var SheetClose = React.forwardRef((_a, ref) => {
|
|
105
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
106
|
-
return /* @__PURE__ */ jsx(
|
|
107
|
-
SheetPrimitive.Close,
|
|
108
|
-
__spreadValues({
|
|
109
|
-
ref,
|
|
110
|
-
"data-slot": "sheet-close",
|
|
111
|
-
className: `chatbot-sheet-close ${className || ""}`
|
|
112
|
-
}, props)
|
|
113
|
-
);
|
|
114
|
-
});
|
|
115
|
-
SheetClose.displayName = SheetPrimitive.Close.displayName;
|
|
116
|
-
function SheetPortal(_a) {
|
|
117
|
-
var props = __objRest(_a, []);
|
|
118
|
-
return /* @__PURE__ */ jsx(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
|
|
119
|
-
}
|
|
120
|
-
var SheetContent = React.forwardRef((_a, ref) => {
|
|
121
|
-
var _b = _a, { className, children, style } = _b, props = __objRest(_b, ["className", "children", "style"]);
|
|
122
|
-
const { isExpanded, sheetOpen, hasOpened } = useSheet();
|
|
123
|
-
const width = isExpanded ? "848px" : "400px";
|
|
124
|
-
const translateX = sheetOpen ? "0" : "100%";
|
|
125
|
-
const contentStyle = __spreadValues({
|
|
126
|
-
"--sheet-width": width,
|
|
127
|
-
transform: `translateX(${translateX})`
|
|
128
|
-
}, style);
|
|
129
|
-
return /* @__PURE__ */ jsx(SheetPortal, { forceMount: hasOpened || void 0, children: /* @__PURE__ */ jsx(
|
|
130
|
-
SheetPrimitive.Content,
|
|
131
|
-
__spreadProps(__spreadValues({
|
|
132
|
-
ref,
|
|
133
|
-
"data-slot": "sheet-content",
|
|
134
|
-
forceMount: hasOpened || void 0,
|
|
135
|
-
onInteractOutside: (e) => e.preventDefault(),
|
|
136
|
-
className: `chatbot-sheet-content ${isExpanded ? "chatbot-sheet-expanded" : ""} ${className || ""}`,
|
|
137
|
-
style: contentStyle
|
|
138
|
-
}, props), {
|
|
139
|
-
children
|
|
140
|
-
})
|
|
141
|
-
) });
|
|
142
|
-
});
|
|
143
|
-
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
144
|
-
var SheetHeader = React.forwardRef((_a, ref) => {
|
|
145
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
146
|
-
return /* @__PURE__ */ jsx(
|
|
147
|
-
"div",
|
|
148
|
-
__spreadValues({
|
|
149
|
-
ref,
|
|
150
|
-
"data-slot": "sheet-header",
|
|
151
|
-
className: `chatbot-sheet-header ${className || ""}`
|
|
152
|
-
}, props)
|
|
153
|
-
);
|
|
154
|
-
});
|
|
155
|
-
SheetHeader.displayName = "SheetHeader";
|
|
156
|
-
var SheetFooter = React.forwardRef((_a, ref) => {
|
|
157
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
158
|
-
return /* @__PURE__ */ jsx(
|
|
159
|
-
"div",
|
|
160
|
-
__spreadValues({
|
|
161
|
-
ref,
|
|
162
|
-
"data-slot": "sheet-footer",
|
|
163
|
-
className: `chatbot-sheet-footer ${className || ""}`
|
|
164
|
-
}, props)
|
|
165
|
-
);
|
|
166
|
-
});
|
|
167
|
-
SheetFooter.displayName = "SheetFooter";
|
|
168
|
-
var SheetTitle = React.forwardRef((_a, ref) => {
|
|
169
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
170
|
-
return /* @__PURE__ */ jsx(
|
|
171
|
-
SheetPrimitive.Title,
|
|
172
|
-
__spreadValues({
|
|
173
|
-
ref,
|
|
174
|
-
"data-slot": "sheet-title",
|
|
175
|
-
className: `chatbot-sheet-title ${className || ""}`
|
|
176
|
-
}, props)
|
|
177
|
-
);
|
|
178
|
-
});
|
|
179
|
-
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
180
|
-
var SheetDescription = React.forwardRef((_a, ref) => {
|
|
181
|
-
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
182
|
-
return /* @__PURE__ */ jsx(
|
|
183
|
-
SheetPrimitive.Description,
|
|
184
|
-
__spreadValues({
|
|
185
|
-
ref,
|
|
186
|
-
"data-slot": "sheet-description",
|
|
187
|
-
className: `chatbot-sheet-description ${className || ""}`
|
|
188
|
-
}, props)
|
|
189
|
-
);
|
|
190
|
-
});
|
|
191
|
-
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
65
|
+
|
|
66
|
+
// src/agent-frame.tsx
|
|
67
|
+
import {
|
|
68
|
+
forwardRef,
|
|
69
|
+
useCallback,
|
|
70
|
+
useEffect,
|
|
71
|
+
useImperativeHandle,
|
|
72
|
+
useRef,
|
|
73
|
+
useState
|
|
74
|
+
} from "react";
|
|
75
|
+
|
|
76
|
+
// src/constants.ts
|
|
77
|
+
var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
|
|
192
78
|
|
|
193
79
|
// src/agent-frame.tsx
|
|
194
80
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
195
|
-
var AgentFrame =
|
|
81
|
+
var AgentFrame = forwardRef(
|
|
196
82
|
({ agentId, mcps = [], appName, className, url }, ref) => {
|
|
197
83
|
var _a;
|
|
198
84
|
const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
|
|
199
85
|
const iframeRef = useRef(null);
|
|
200
|
-
const [isReady, setIsReady] =
|
|
201
|
-
const [hasInitialized, setHasInitialized] =
|
|
202
|
-
const [currentMcps, setCurrentMcps] =
|
|
203
|
-
const { setIsExpanded,
|
|
86
|
+
const [isReady, setIsReady] = useState(false);
|
|
87
|
+
const [hasInitialized, setHasInitialized] = useState(false);
|
|
88
|
+
const [currentMcps, setCurrentMcps] = useState(mcps);
|
|
89
|
+
const { setIsExpanded, setOpen } = useChatbot();
|
|
204
90
|
const postMessage = useCallback((message) => {
|
|
205
91
|
var _a2;
|
|
206
92
|
if ((_a2 = iframeRef.current) == null ? void 0 : _a2.contentWindow) {
|
|
@@ -238,7 +124,7 @@ var AgentFrame = forwardRef2(
|
|
|
238
124
|
}),
|
|
239
125
|
[setMcps, setAppName, isReady]
|
|
240
126
|
);
|
|
241
|
-
|
|
127
|
+
useEffect(() => {
|
|
242
128
|
const iframe = iframeRef.current;
|
|
243
129
|
if (!iframe) {
|
|
244
130
|
return;
|
|
@@ -253,7 +139,7 @@ var AgentFrame = forwardRef2(
|
|
|
253
139
|
setIsReady(true);
|
|
254
140
|
break;
|
|
255
141
|
case "CLOSE_CHATBOT":
|
|
256
|
-
|
|
142
|
+
setOpen(false);
|
|
257
143
|
break;
|
|
258
144
|
case "EXPAND_CHATBOT":
|
|
259
145
|
setIsExpanded(true);
|
|
@@ -272,7 +158,7 @@ var AgentFrame = forwardRef2(
|
|
|
272
158
|
iframe.removeEventListener("load", handleIframeLoad);
|
|
273
159
|
};
|
|
274
160
|
}, []);
|
|
275
|
-
|
|
161
|
+
useEffect(() => {
|
|
276
162
|
if (isReady && !hasInitialized) {
|
|
277
163
|
setHasInitialized(true);
|
|
278
164
|
init({ mcps });
|
|
@@ -281,7 +167,7 @@ var AgentFrame = forwardRef2(
|
|
|
281
167
|
}
|
|
282
168
|
}
|
|
283
169
|
}, [isReady, init, mcps, appName, hasInitialized, setAppName]);
|
|
284
|
-
|
|
170
|
+
useEffect(() => {
|
|
285
171
|
if (JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
|
|
286
172
|
setCurrentMcps(mcps);
|
|
287
173
|
setMcps(mcps);
|
|
@@ -304,118 +190,137 @@ var AgentFrame = forwardRef2(
|
|
|
304
190
|
);
|
|
305
191
|
AgentFrame.displayName = "AgentFrame";
|
|
306
192
|
|
|
307
|
-
// src/chatbot-
|
|
308
|
-
import { forwardRef as
|
|
193
|
+
// src/chatbot-sheet.tsx
|
|
194
|
+
import { forwardRef as forwardRef3 } from "react";
|
|
309
195
|
|
|
310
|
-
// src/
|
|
311
|
-
import * as
|
|
196
|
+
// src/sheet.tsx
|
|
197
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
312
198
|
import * as React2 from "react";
|
|
313
|
-
import { jsx as jsx3
|
|
314
|
-
|
|
315
|
-
var
|
|
199
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
200
|
+
function Sheet(_a) {
|
|
201
|
+
var props = __objRest(_a, []);
|
|
202
|
+
const { open, setOpen } = useChatbot();
|
|
203
|
+
return /* @__PURE__ */ jsx3(
|
|
204
|
+
SheetPrimitive.Root,
|
|
205
|
+
__spreadValues({
|
|
206
|
+
"data-slot": "sheet",
|
|
207
|
+
modal: false,
|
|
208
|
+
open,
|
|
209
|
+
onOpenChange: setOpen
|
|
210
|
+
}, props)
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
|
+
var SheetTrigger = React2.forwardRef((_a, ref) => {
|
|
316
214
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
317
215
|
return /* @__PURE__ */ jsx3(
|
|
318
|
-
|
|
216
|
+
SheetPrimitive.Trigger,
|
|
319
217
|
__spreadValues({
|
|
320
218
|
ref,
|
|
321
|
-
|
|
219
|
+
"data-slot": "sheet-trigger",
|
|
220
|
+
className: `chatbot-trigger ${className || ""}`
|
|
322
221
|
}, props)
|
|
323
222
|
);
|
|
324
223
|
});
|
|
325
|
-
|
|
326
|
-
var
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
}
|
|
335
|
-
"className",
|
|
336
|
-
"align",
|
|
337
|
-
"backdrop",
|
|
338
|
-
"sideOffset",
|
|
339
|
-
"forceMount"
|
|
340
|
-
]);
|
|
341
|
-
return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { forceMount, children: /* @__PURE__ */ jsxs("div", { children: [
|
|
342
|
-
backdrop && /* @__PURE__ */ jsx3("div", { className: "chatbot-popover-backdrop" }),
|
|
343
|
-
/* @__PURE__ */ jsx3(
|
|
344
|
-
PopoverPrimitive.Content,
|
|
345
|
-
__spreadValues({
|
|
346
|
-
ref,
|
|
347
|
-
align,
|
|
348
|
-
sideOffset,
|
|
349
|
-
forceMount,
|
|
350
|
-
className: `chatbot-popover-content ${className}`
|
|
351
|
-
}, props)
|
|
352
|
-
)
|
|
353
|
-
] }) });
|
|
354
|
-
}
|
|
355
|
-
);
|
|
356
|
-
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
357
|
-
|
|
358
|
-
// src/chatbot-popover.tsx
|
|
359
|
-
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
360
|
-
var ChatbotPopover = forwardRef4(
|
|
361
|
-
(props, ref) => {
|
|
362
|
-
const [isOpen, setIsOpen] = useState3(false);
|
|
363
|
-
const [hasOpened, setHasOpened] = useState3(false);
|
|
364
|
-
const handleOpenChange = (open) => {
|
|
365
|
-
setIsOpen(open);
|
|
366
|
-
if (open && !hasOpened) {
|
|
367
|
-
setHasOpened(true);
|
|
368
|
-
}
|
|
369
|
-
};
|
|
370
|
-
return /* @__PURE__ */ jsxs2(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
|
|
371
|
-
/* @__PURE__ */ jsx4(PopoverTrigger, { children: /* @__PURE__ */ jsx4(EcforceAiIcon, {}) }),
|
|
372
|
-
/* @__PURE__ */ jsx4(
|
|
373
|
-
PopoverContent,
|
|
374
|
-
{
|
|
375
|
-
align: "end",
|
|
376
|
-
backdrop: isOpen,
|
|
377
|
-
forceMount: hasOpened || void 0,
|
|
378
|
-
children: /* @__PURE__ */ jsx4(AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
|
|
379
|
-
}
|
|
380
|
-
)
|
|
381
|
-
] });
|
|
382
|
-
}
|
|
383
|
-
);
|
|
384
|
-
function EcforceAiIcon() {
|
|
385
|
-
return /* @__PURE__ */ jsx4(
|
|
386
|
-
"svg",
|
|
387
|
-
{
|
|
388
|
-
width: "24",
|
|
389
|
-
height: "24",
|
|
390
|
-
viewBox: "0 0 24 24",
|
|
391
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
392
|
-
fill: "currentColor",
|
|
393
|
-
children: /* @__PURE__ */ jsx4(
|
|
394
|
-
"path",
|
|
395
|
-
{
|
|
396
|
-
fillRule: "evenodd",
|
|
397
|
-
clipRule: "evenodd",
|
|
398
|
-
d: "M9.2 13.704s3.7-.812 4.325-3.74c.624-2.93.76-3.364 1.112-3.364.352 0 .42.309.5.618.08.309.51 2.276.613 2.745.102.47.783 2.93 3.712 3.616 2.93.686 3.338.697 3.338 1.12 0 .459-2.361.859-3.338 1.122-.976.263-3.042 1.007-3.587 3.49-.534 2.482-.681 3.489-1.238 3.489-.556 0-.545-.584-.613-.87-.068-.286-.34-1.819-.5-2.494-.147-.675-1.044-2.837-2.962-3.363-1.93-.527-3.962-.847-3.962-1.373s2.134-.824 2.6-.995ZM2.462 4.613s1.785-.39 2.08-1.798c.296-1.409.365-1.615.535-1.615.17 0 .205.149.239.298s.25 1.088.296 1.317c.045.229.375 1.409 1.785 1.74 1.41.333 1.603.333 1.603.54 0 .217-1.137.412-1.603.538-.466.126-1.467.48-1.729 1.683C5.407 8.507 5.338 9 5.078 9c-.262 0-.262-.286-.296-.424-.035-.137-.16-.882-.24-1.202-.079-.321-.5-1.363-1.432-1.615-.932-.252-1.91-.413-1.91-.665 0-.252 1.023-.4 1.25-.48h.012Z"
|
|
399
|
-
}
|
|
400
|
-
)
|
|
401
|
-
}
|
|
224
|
+
SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
|
|
225
|
+
var SheetClose = React2.forwardRef((_a, ref) => {
|
|
226
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
227
|
+
return /* @__PURE__ */ jsx3(
|
|
228
|
+
SheetPrimitive.Close,
|
|
229
|
+
__spreadValues({
|
|
230
|
+
ref,
|
|
231
|
+
"data-slot": "sheet-close",
|
|
232
|
+
className: `chatbot-sheet-close ${className || ""}`
|
|
233
|
+
}, props)
|
|
402
234
|
);
|
|
235
|
+
});
|
|
236
|
+
SheetClose.displayName = SheetPrimitive.Close.displayName;
|
|
237
|
+
function SheetPortal(_a) {
|
|
238
|
+
var props = __objRest(_a, []);
|
|
239
|
+
return /* @__PURE__ */ jsx3(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
|
|
403
240
|
}
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
241
|
+
var SheetContent = React2.forwardRef((_a, ref) => {
|
|
242
|
+
var _b = _a, { className, children, style } = _b, props = __objRest(_b, ["className", "children", "style"]);
|
|
243
|
+
const { isExpanded, open, hasOpened } = useChatbot();
|
|
244
|
+
const width = isExpanded ? "848px" : "400px";
|
|
245
|
+
const translateX = open ? "0" : "100%";
|
|
246
|
+
const contentStyle = __spreadValues({
|
|
247
|
+
"--sheet-width": width,
|
|
248
|
+
transform: `translateX(${translateX})`
|
|
249
|
+
}, style);
|
|
250
|
+
return /* @__PURE__ */ jsx3(SheetPortal, { forceMount: hasOpened || void 0, children: /* @__PURE__ */ jsx3(
|
|
251
|
+
SheetPrimitive.Content,
|
|
252
|
+
__spreadProps(__spreadValues({
|
|
253
|
+
ref,
|
|
254
|
+
"data-slot": "sheet-content",
|
|
255
|
+
forceMount: hasOpened || void 0,
|
|
256
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
257
|
+
className: `chatbot-sheet-content ${isExpanded ? "chatbot-sheet-expanded" : ""} ${className || ""}`,
|
|
258
|
+
style: contentStyle
|
|
259
|
+
}, props), {
|
|
260
|
+
children
|
|
261
|
+
})
|
|
262
|
+
) });
|
|
263
|
+
});
|
|
264
|
+
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
265
|
+
var SheetHeader = React2.forwardRef((_a, ref) => {
|
|
266
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
267
|
+
return /* @__PURE__ */ jsx3(
|
|
268
|
+
"div",
|
|
269
|
+
__spreadValues({
|
|
270
|
+
ref,
|
|
271
|
+
"data-slot": "sheet-header",
|
|
272
|
+
className: `chatbot-sheet-header ${className || ""}`
|
|
273
|
+
}, props)
|
|
274
|
+
);
|
|
275
|
+
});
|
|
276
|
+
SheetHeader.displayName = "SheetHeader";
|
|
277
|
+
var SheetFooter = React2.forwardRef((_a, ref) => {
|
|
278
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
279
|
+
return /* @__PURE__ */ jsx3(
|
|
280
|
+
"div",
|
|
281
|
+
__spreadValues({
|
|
282
|
+
ref,
|
|
283
|
+
"data-slot": "sheet-footer",
|
|
284
|
+
className: `chatbot-sheet-footer ${className || ""}`
|
|
285
|
+
}, props)
|
|
286
|
+
);
|
|
287
|
+
});
|
|
288
|
+
SheetFooter.displayName = "SheetFooter";
|
|
289
|
+
var SheetTitle = React2.forwardRef((_a, ref) => {
|
|
290
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
291
|
+
return /* @__PURE__ */ jsx3(
|
|
292
|
+
SheetPrimitive.Title,
|
|
293
|
+
__spreadValues({
|
|
294
|
+
ref,
|
|
295
|
+
"data-slot": "sheet-title",
|
|
296
|
+
className: `chatbot-sheet-title ${className || ""}`
|
|
297
|
+
}, props)
|
|
298
|
+
);
|
|
299
|
+
});
|
|
300
|
+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
301
|
+
var SheetDescription = React2.forwardRef((_a, ref) => {
|
|
302
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
303
|
+
return /* @__PURE__ */ jsx3(
|
|
304
|
+
SheetPrimitive.Description,
|
|
305
|
+
__spreadValues({
|
|
306
|
+
ref,
|
|
307
|
+
"data-slot": "sheet-description",
|
|
308
|
+
className: `chatbot-sheet-description ${className || ""}`
|
|
309
|
+
}, props)
|
|
310
|
+
);
|
|
311
|
+
});
|
|
312
|
+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
407
313
|
|
|
408
314
|
// src/tooltip.tsx
|
|
409
315
|
import {
|
|
410
316
|
Arrow,
|
|
411
|
-
Content as
|
|
412
|
-
Portal as
|
|
317
|
+
Content as Content2,
|
|
318
|
+
Portal as Portal2,
|
|
413
319
|
Provider,
|
|
414
|
-
Root as
|
|
415
|
-
Trigger as
|
|
320
|
+
Root as Root2,
|
|
321
|
+
Trigger as Trigger2
|
|
416
322
|
} from "@radix-ui/react-tooltip";
|
|
417
|
-
import "
|
|
418
|
-
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
323
|
+
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
419
324
|
function Tooltip({
|
|
420
325
|
content,
|
|
421
326
|
trigger,
|
|
@@ -431,14 +336,14 @@ function Tooltip({
|
|
|
431
336
|
arrowClassName,
|
|
432
337
|
keepTooltipOpen
|
|
433
338
|
}) {
|
|
434
|
-
return /* @__PURE__ */
|
|
339
|
+
return /* @__PURE__ */ jsx4(
|
|
435
340
|
Provider,
|
|
436
341
|
{
|
|
437
342
|
delayDuration: delayDuration != null ? delayDuration : 200,
|
|
438
343
|
skipDelayDuration: skipDelayDuration != null ? skipDelayDuration : 200,
|
|
439
|
-
children: /* @__PURE__ */
|
|
440
|
-
/* @__PURE__ */
|
|
441
|
-
|
|
344
|
+
children: /* @__PURE__ */ jsxs(Root2, { open: disabled ? false : open, children: [
|
|
345
|
+
/* @__PURE__ */ jsx4(
|
|
346
|
+
Trigger2,
|
|
442
347
|
{
|
|
443
348
|
onClick: keepTooltipOpen ? (event) => {
|
|
444
349
|
event.preventDefault();
|
|
@@ -447,8 +352,8 @@ function Tooltip({
|
|
|
447
352
|
children: trigger
|
|
448
353
|
}
|
|
449
354
|
),
|
|
450
|
-
/* @__PURE__ */
|
|
451
|
-
|
|
355
|
+
/* @__PURE__ */ jsx4(Portal2, { children: /* @__PURE__ */ jsxs(
|
|
356
|
+
Content2,
|
|
452
357
|
{
|
|
453
358
|
className: `tooltip-content ${className || ""}`,
|
|
454
359
|
side,
|
|
@@ -459,7 +364,7 @@ function Tooltip({
|
|
|
459
364
|
event.preventDefault();
|
|
460
365
|
} : void 0,
|
|
461
366
|
children: [
|
|
462
|
-
/* @__PURE__ */
|
|
367
|
+
/* @__PURE__ */ jsx4(Arrow, { className: arrowClassName }),
|
|
463
368
|
content
|
|
464
369
|
]
|
|
465
370
|
}
|
|
@@ -470,29 +375,30 @@ function Tooltip({
|
|
|
470
375
|
}
|
|
471
376
|
|
|
472
377
|
// src/chatbot-sheet.tsx
|
|
473
|
-
import { jsx as
|
|
474
|
-
var ChatbotSheet =
|
|
378
|
+
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
379
|
+
var ChatbotSheet = forwardRef3(
|
|
475
380
|
(_a, ref) => {
|
|
476
381
|
var _b = _a, { sheetStyle } = _b, props = __objRest(_b, ["sheetStyle"]);
|
|
477
|
-
return /* @__PURE__ */
|
|
478
|
-
/* @__PURE__ */
|
|
382
|
+
return /* @__PURE__ */ jsxs2(Sheet, { children: [
|
|
383
|
+
/* @__PURE__ */ jsx5(
|
|
479
384
|
Tooltip,
|
|
480
385
|
{
|
|
481
386
|
side: "top",
|
|
482
387
|
align: "end",
|
|
483
388
|
content: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
|
|
484
|
-
trigger: /* @__PURE__ */
|
|
389
|
+
trigger: /* @__PURE__ */ jsx5(SheetTrigger, { children: /* @__PURE__ */ jsx5(EcforceAiIcon, {}) })
|
|
485
390
|
}
|
|
486
391
|
),
|
|
487
|
-
/* @__PURE__ */
|
|
488
|
-
/* @__PURE__ */
|
|
489
|
-
/* @__PURE__ */
|
|
392
|
+
/* @__PURE__ */ jsxs2(SheetContent, { style: sheetStyle, children: [
|
|
393
|
+
/* @__PURE__ */ jsx5(SheetTitle, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
|
|
394
|
+
/* @__PURE__ */ jsx5(SheetDescription, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
|
|
395
|
+
/* @__PURE__ */ jsx5(AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
|
|
490
396
|
] })
|
|
491
|
-
] })
|
|
397
|
+
] });
|
|
492
398
|
}
|
|
493
399
|
);
|
|
494
|
-
function
|
|
495
|
-
return /* @__PURE__ */
|
|
400
|
+
function EcforceAiIcon() {
|
|
401
|
+
return /* @__PURE__ */ jsx5(
|
|
496
402
|
"svg",
|
|
497
403
|
{
|
|
498
404
|
width: "18",
|
|
@@ -500,7 +406,7 @@ function EcforceAiIcon2() {
|
|
|
500
406
|
viewBox: "0 0 24 24",
|
|
501
407
|
xmlns: "http://www.w3.org/2000/svg",
|
|
502
408
|
fill: "currentColor",
|
|
503
|
-
children: /* @__PURE__ */
|
|
409
|
+
children: /* @__PURE__ */ jsx5(
|
|
504
410
|
"path",
|
|
505
411
|
{
|
|
506
412
|
fillRule: "evenodd",
|
|
@@ -513,20 +419,16 @@ function EcforceAiIcon2() {
|
|
|
513
419
|
}
|
|
514
420
|
export {
|
|
515
421
|
AgentFrame,
|
|
516
|
-
|
|
422
|
+
ChatbotProvider,
|
|
517
423
|
ChatbotSheet,
|
|
518
|
-
Popover,
|
|
519
|
-
PopoverContent,
|
|
520
|
-
PopoverTrigger,
|
|
521
424
|
Sheet,
|
|
522
425
|
SheetClose,
|
|
523
426
|
SheetContent,
|
|
524
427
|
SheetDescription,
|
|
525
428
|
SheetFooter,
|
|
526
429
|
SheetHeader,
|
|
527
|
-
SheetProvider,
|
|
528
430
|
SheetTitle,
|
|
529
431
|
SheetTrigger,
|
|
530
432
|
Tooltip,
|
|
531
|
-
|
|
433
|
+
useChatbot
|
|
532
434
|
};
|
package/dist/sheet.d.ts
CHANGED
|
@@ -1,20 +1,5 @@
|
|
|
1
1
|
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
interface SheetContextType {
|
|
4
|
-
hasOpened: boolean;
|
|
5
|
-
sheetOpen: boolean;
|
|
6
|
-
setSheetOpen: (open: boolean) => void;
|
|
7
|
-
isExpanded: boolean;
|
|
8
|
-
setIsExpanded: (expanded: boolean) => void;
|
|
9
|
-
}
|
|
10
|
-
export declare function useSheet(): SheetContextType;
|
|
11
|
-
interface SheetProviderProps {
|
|
12
|
-
children: React.ReactNode;
|
|
13
|
-
defaultWidth?: number;
|
|
14
|
-
minWidth?: number;
|
|
15
|
-
maxWidth?: number;
|
|
16
|
-
}
|
|
17
|
-
export declare function SheetProvider({ children }: SheetProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
18
3
|
declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
19
4
|
declare const SheetTrigger: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
20
5
|
declare const SheetClose: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
package/dist/sheet.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"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
CHANGED
package/dist/tooltip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../src/tooltip.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@super_studio/ecforce-ai-agent-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.mjs",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"require": "./dist/index.js",
|
|
18
18
|
"default": "./dist/index.js"
|
|
19
19
|
},
|
|
20
|
-
"./
|
|
20
|
+
"./preset.css": "./dist/preset.css",
|
|
21
21
|
"./chatbot-sheet.css": "./dist/chatbot-sheet.css"
|
|
22
22
|
},
|
|
23
23
|
"publishConfig": {
|
|
@@ -25,7 +25,6 @@
|
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@radix-ui/react-dialog": "1.1.14",
|
|
28
|
-
"@radix-ui/react-popover": "1.1.14",
|
|
29
28
|
"@radix-ui/react-tooltip": "1.2.7"
|
|
30
29
|
},
|
|
31
30
|
"peerDependencies": {
|
package/src/agent-frame.tsx
CHANGED
|
@@ -6,8 +6,8 @@ import {
|
|
|
6
6
|
useRef,
|
|
7
7
|
useState,
|
|
8
8
|
} from "react";
|
|
9
|
+
import { useChatbot } from "./chatbot-proivder";
|
|
9
10
|
import { PROD_CHATBOT_URL } from "./constants";
|
|
10
|
-
import { useSheet } from "./sheet";
|
|
11
11
|
|
|
12
12
|
type IframeMessage =
|
|
13
13
|
| { type: "CHATBOT_READY" }
|
|
@@ -71,7 +71,7 @@ export const AgentFrame = forwardRef<AgentElement, AgentFrameProps>(
|
|
|
71
71
|
const [isReady, setIsReady] = useState(false);
|
|
72
72
|
const [hasInitialized, setHasInitialized] = useState(false);
|
|
73
73
|
const [currentMcps, setCurrentMcps] = useState<MCP[]>(mcps);
|
|
74
|
-
const { setIsExpanded,
|
|
74
|
+
const { setIsExpanded, setOpen } = useChatbot();
|
|
75
75
|
|
|
76
76
|
// helper to post message to the iframe
|
|
77
77
|
const postMessage = useCallback((message: ParentMessage) => {
|
|
@@ -135,7 +135,7 @@ export const AgentFrame = forwardRef<AgentElement, AgentFrameProps>(
|
|
|
135
135
|
setIsReady(true);
|
|
136
136
|
break;
|
|
137
137
|
case "CLOSE_CHATBOT":
|
|
138
|
-
|
|
138
|
+
setOpen(false);
|
|
139
139
|
break;
|
|
140
140
|
case "EXPAND_CHATBOT":
|
|
141
141
|
setIsExpanded(true);
|