@super_studio/ecforce-ai-agent-react 0.1.4 → 0.2.0

package/dist/agent-frame.d.ts.map

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

@@ -1,3 +1,5 @@
+@import "./tooltip.css";
+
 /* Chatbot Trigger Button */
 .chatbot-trigger {
   position: fixed;

package/dist/chatbot-sheet.css

@@ -0,0 +1,103 @@
+@import "./tooltip.css";
+
+/* Chatbot Trigger Button */
+.chatbot-trigger {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 50;
+  border-radius: 9999px;
+  border: 1px solid #f0f2f7;
+  background-color: #ffffff;
+  color: #0061ff;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  transition: colors 200ms ease-in-out;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+}
+
+.chatbot-trigger:hover {
+  background-color: #f0f2f7;
+}
+
+/* Sheet Content */
+.chatbot-sheet-content {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 50;
+  background-color: #ffffff;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-left: 1px solid #e5e7eb;
+  width: var(--sheet-width, 400px);
+  height: 100vh;
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.chatbot-sheet-content.chatbot-sheet-expanded {
+  --sheet-width: 848px;
+}
+
+/* Sheet Header */
+.chatbot-sheet-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 1rem;
+}
+
+/* Sheet Footer */
+.chatbot-sheet-footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+
+/* Sheet Title */
+.chatbot-sheet-title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Sheet Description */
+.chatbot-sheet-description {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+/* Sheet Close */
+.chatbot-sheet-close {
+  cursor: pointer;
+}
+
+/* Initial mount animation */
+@keyframes chatbot-sheet-enter {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.chatbot-sheet-content[data-state="open"] {
+  animation: chatbot-sheet-enter 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}

package/dist/chatbot-sheet.d.ts

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

@@ -0,0 +1 @@
+{"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;gDA0B3B,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export * from "./agent-frame";
 export * from "./chatbot-popover";
 export * from "./popover";
+export * from "./chatbot-sheet";
+export * from "./sheet";
+export * from "./tooltip";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/index.js

@@ -39,13 +39,159 @@ var __objRest = (source, exclude) => {
 
 
 
-var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react);
 
 // src/constants.ts
 var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
 
-// src/agent-frame.tsx
+// src/sheet.tsx
+var _reactdialog = require('@radix-ui/react-dialog'); var SheetPrimitive = _interopRequireWildcard(_reactdialog);
+
 var _jsxruntime = require('react/jsx-runtime');
+var SheetContext = React.createContext(
+  void 0
+);
+function useSheet() {
+  const context = React.useContext(SheetContext);
+  if (!context) {
+    throw new Error("useSheet must be used within a SheetProvider");
+  }
+  return context;
+}
+function SheetProvider({ children }) {
+  const [hasOpened, setHasOpened] = React.useState(false);
+  const [sheetOpen, setSheetOpen] = React.useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  React.useEffect(() => {
+    if (sheetOpen) {
+      setHasOpened(true);
+    }
+  }, [sheetOpen]);
+  const value = {
+    hasOpened,
+    sheetOpen,
+    setSheetOpen,
+    isExpanded,
+    setIsExpanded
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetContext.Provider, { value, children });
+}
+function Sheet(_a) {
+  var props = __objRest(_a, []);
+  const { sheetOpen, setSheetOpen } = useSheet();
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    SheetPrimitive.Root,
+    __spreadValues({
+      "data-slot": "sheet",
+      modal: false,
+      open: sheetOpen,
+      onOpenChange: setSheetOpen
+    }, props)
+  );
+}
+var SheetTrigger = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    SheetPrimitive.Trigger,
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-trigger",
+      className: `chatbot-trigger ${className || ""}`
+    }, props)
+  );
+});
+SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
+var SheetClose = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    SheetPrimitive.Close,
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-close",
+      className: `chatbot-sheet-close ${className || ""}`
+    }, props)
+  );
+});
+SheetClose.displayName = SheetPrimitive.Close.displayName;
+function SheetPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
+}
+var SheetContent = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, style } = _b, props = __objRest(_b, ["className", "children", "style"]);
+  const { isExpanded, sheetOpen, hasOpened } = useSheet();
+  const width = isExpanded ? "848px" : "400px";
+  const translateX = sheetOpen ? "0" : "100%";
+  const contentStyle = __spreadValues({
+    "--sheet-width": width,
+    transform: `translateX(${translateX})`
+  }, style);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetPortal, { forceMount: hasOpened || void 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    SheetPrimitive.Content,
+    __spreadProps(__spreadValues({
+      ref,
+      "data-slot": "sheet-content",
+      forceMount: hasOpened || void 0,
+      onInteractOutside: (e) => e.preventDefault(),
+      className: `chatbot-sheet-content ${isExpanded ? "chatbot-sheet-expanded" : ""} ${className || ""}`,
+      style: contentStyle
+    }, props), {
+      children
+    })
+  ) });
+});
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-header",
+      className: `chatbot-sheet-header ${className || ""}`
+    }, props)
+  );
+});
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-footer",
+      className: `chatbot-sheet-footer ${className || ""}`
+    }, props)
+  );
+});
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    SheetPrimitive.Title,
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-title",
+      className: `chatbot-sheet-title ${className || ""}`
+    }, props)
+  );
+});
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    SheetPrimitive.Description,
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-description",
+      className: `chatbot-sheet-description ${className || ""}`
+    }, props)
+  );
+});
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+// src/agent-frame.tsx
+
 var AgentFrame = _react.forwardRef.call(void 0, 
   ({ agentId, mcps = [], appName, className, url }, ref) => {
     var _a;
@@ -54,6 +200,7 @@ var AgentFrame = _react.forwardRef.call(void 0,
     const [isReady, setIsReady] = _react.useState.call(void 0, false);
     const [hasInitialized, setHasInitialized] = _react.useState.call(void 0, false);
     const [currentMcps, setCurrentMcps] = _react.useState.call(void 0, mcps);
+    const { setIsExpanded, setSheetOpen } = useSheet();
     const postMessage = _react.useCallback.call(void 0, (message) => {
       var _a2;
       if ((_a2 = iframeRef.current) == null ? void 0 : _a2.contentWindow) {
@@ -101,8 +248,19 @@ var AgentFrame = _react.forwardRef.call(void 0,
         if (process.env.NODE_ENV === "development") {
           console.log("iframe message", event.data);
         }
-        if (((_a2 = event.data) == null ? void 0 : _a2.type) === "CHATBOT_READY") {
-          setIsReady(true);
+        switch ((_a2 = event.data) == null ? void 0 : _a2.type) {
+          case "CHATBOT_READY":
+            setIsReady(true);
+            break;
+          case "CLOSE_CHATBOT":
+            setSheetOpen(false);
+            break;
+          case "EXPAND_CHATBOT":
+            setIsExpanded(true);
+            break;
+          case "SHRINK_CHATBOT":
+            setIsExpanded(false);
+            break;
         }
       };
       const handleIframeLoad = () => {
@@ -154,7 +312,7 @@ var _reactpopover = require('@radix-ui/react-popover'); var PopoverPrimitive = _
 
 
 var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = React.forwardRef((_a, ref) => {
+var PopoverTrigger = React2.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     PopoverPrimitive.Trigger,
@@ -165,7 +323,7 @@ var PopoverTrigger = React.forwardRef((_a, ref) => {
   );
 });
 PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
-var PopoverContent = React.forwardRef(
+var PopoverContent = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -244,9 +402,131 @@ function EcforceAiIcon() {
   );
 }
 
+// src/chatbot-sheet.tsx
+
+
+// src/tooltip.tsx
+
+
+
+
+
+
+
+var _reacttooltip = require('@radix-ui/react-tooltip');
+require('./tooltip.css');
+
+function Tooltip({
+  content,
+  trigger,
+  side,
+  align,
+  disabled,
+  delayDuration,
+  skipDelayDuration,
+  className,
+  open,
+  alignOffset,
+  sideOffset,
+  arrowClassName,
+  keepTooltipOpen
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reacttooltip.Provider,
+    {
+      delayDuration: delayDuration != null ? delayDuration : 200,
+      skipDelayDuration: skipDelayDuration != null ? skipDelayDuration : 200,
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reacttooltip.Root, { open: disabled ? false : open, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _reacttooltip.Trigger,
+          {
+            onClick: keepTooltipOpen ? (event) => {
+              event.preventDefault();
+            } : void 0,
+            asChild: true,
+            children: trigger
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.Portal, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _reacttooltip.Content,
+          {
+            className: `tooltip-content ${className || ""}`,
+            side,
+            align,
+            alignOffset,
+            sideOffset,
+            onPointerDownOutside: keepTooltipOpen ? (event) => {
+              event.preventDefault();
+            } : void 0,
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.Arrow, { className: arrowClassName }),
+              content
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/chatbot-sheet.tsx
+
+var ChatbotSheet = _react.forwardRef.call(void 0, 
+  (_a, ref) => {
+    var _b = _a, { sheetStyle } = _b, props = __objRest(_b, ["sheetStyle"]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Sheet, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Tooltip,
+        {
+          side: "top",
+          align: "end",
+          content: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
+          trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetTrigger, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EcforceAiIcon2, {}) })
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SheetContent, { style: sheetStyle, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetTitle, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
+      ] })
+    ] }) });
+  }
+);
+function EcforceAiIcon2() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          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"
+        }
+      )
+    }
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
 
 
-exports.AgentFrame = AgentFrame; exports.ChatbotPopover = ChatbotPopover; exports.Popover = Popover; exports.PopoverContent = PopoverContent; exports.PopoverTrigger = PopoverTrigger;
+exports.AgentFrame = AgentFrame; exports.ChatbotPopover = ChatbotPopover; exports.ChatbotSheet = ChatbotSheet; exports.Popover = Popover; exports.PopoverContent = PopoverContent; exports.PopoverTrigger = PopoverTrigger; exports.Sheet = Sheet; exports.SheetClose = SheetClose; exports.SheetContent = SheetContent; exports.SheetDescription = SheetDescription; exports.SheetFooter = SheetFooter; exports.SheetHeader = SheetHeader; exports.SheetProvider = SheetProvider; exports.SheetTitle = SheetTitle; exports.SheetTrigger = SheetTrigger; exports.Tooltip = Tooltip; exports.useSheet = useSheet;