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

package/dist/index.mjs

@@ -33,27 +33,174 @@ var __objRest = (source, exclude) => {
 
 // src/agent-frame.tsx
 import {
-  forwardRef,
+  forwardRef as forwardRef2,
   useCallback,
-  useEffect,
+  useEffect as useEffect2,
   useImperativeHandle,
   useRef,
-  useState
+  useState as useState2
 } from "react";
 
 // src/constants.ts
 var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
 
-// src/agent-frame.tsx
+// src/sheet.tsx
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-var AgentFrame = forwardRef(
+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__ */ jsx(SheetContext.Provider, { value, children });
+}
+function Sheet(_a) {
+  var props = __objRest(_a, []);
+  const { sheetOpen, setSheetOpen } = useSheet();
+  return /* @__PURE__ */ jsx(
+    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__ */ jsx(
+    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__ */ jsx(
+    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__ */ jsx(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__ */ jsx(SheetPortal, { forceMount: hasOpened || void 0, children: /* @__PURE__ */ jsx(
+    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__ */ jsx(
+    "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__ */ jsx(
+    "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__ */ jsx(
+    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__ */ jsx(
+    SheetPrimitive.Description,
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-description",
+      className: `chatbot-sheet-description ${className || ""}`
+    }, props)
+  );
+});
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+// src/agent-frame.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AgentFrame = forwardRef2(
   ({ agentId, mcps = [], appName, className, url }, ref) => {
     var _a;
     const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
     const iframeRef = useRef(null);
-    const [isReady, setIsReady] = useState(false);
-    const [hasInitialized, setHasInitialized] = useState(false);
-    const [currentMcps, setCurrentMcps] = useState(mcps);
+    const [isReady, setIsReady] = useState2(false);
+    const [hasInitialized, setHasInitialized] = useState2(false);
+    const [currentMcps, setCurrentMcps] = useState2(mcps);
+    const { setIsExpanded, setSheetOpen } = useSheet();
     const postMessage = useCallback((message) => {
       var _a2;
       if ((_a2 = iframeRef.current) == null ? void 0 : _a2.contentWindow) {
@@ -91,7 +238,7 @@ var AgentFrame = forwardRef(
       }),
       [setMcps, setAppName, isReady]
     );
-    useEffect(() => {
+    useEffect2(() => {
       const iframe = iframeRef.current;
       if (!iframe) {
         return;
@@ -101,8 +248,19 @@ var AgentFrame = forwardRef(
         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 = () => {
@@ -114,7 +272,7 @@ var AgentFrame = forwardRef(
         iframe.removeEventListener("load", handleIframeLoad);
       };
     }, []);
-    useEffect(() => {
+    useEffect2(() => {
       if (isReady && !hasInitialized) {
         setHasInitialized(true);
         init({ mcps });
@@ -123,13 +281,13 @@ var AgentFrame = forwardRef(
         }
       }
     }, [isReady, init, mcps, appName, hasInitialized, setAppName]);
-    useEffect(() => {
+    useEffect2(() => {
       if (JSON.stringify(currentMcps) !== JSON.stringify(mcps)) {
         setCurrentMcps(mcps);
         setMcps(mcps);
       }
     }, [setMcps, mcps, currentMcps]);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "iframe",
       {
         ref: iframeRef,
@@ -147,16 +305,16 @@ var AgentFrame = forwardRef(
 AgentFrame.displayName = "AgentFrame";
 
 // src/chatbot-popover.tsx
-import { forwardRef as forwardRef3, useState as useState2 } from "react";
+import { forwardRef as forwardRef4, useState as useState3 } from "react";
 
 // src/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import * as React2 from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 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__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     PopoverPrimitive.Trigger,
     __spreadValues({
       ref,
@@ -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,
@@ -180,9 +338,9 @@ var PopoverContent = React.forwardRef(
       "sideOffset",
       "forceMount"
     ]);
-    return /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { forceMount, children: /* @__PURE__ */ jsxs("div", { children: [
-      backdrop && /* @__PURE__ */ jsx2("div", { className: "chatbot-popover-backdrop" }),
-      /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { forceMount, children: /* @__PURE__ */ jsxs("div", { children: [
+      backdrop && /* @__PURE__ */ jsx3("div", { className: "chatbot-popover-backdrop" }),
+      /* @__PURE__ */ jsx3(
         PopoverPrimitive.Content,
         __spreadValues({
           ref,
@@ -198,11 +356,11 @@ var PopoverContent = React.forwardRef(
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/chatbot-popover.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var ChatbotPopover = forwardRef3(
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChatbotPopover = forwardRef4(
   (props, ref) => {
-    const [isOpen, setIsOpen] = useState2(false);
-    const [hasOpened, setHasOpened] = useState2(false);
+    const [isOpen, setIsOpen] = useState3(false);
+    const [hasOpened, setHasOpened] = useState3(false);
     const handleOpenChange = (open) => {
       setIsOpen(open);
       if (open && !hasOpened) {
@@ -210,21 +368,21 @@ var ChatbotPopover = forwardRef3(
       }
     };
     return /* @__PURE__ */ jsxs2(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
-      /* @__PURE__ */ jsx3(PopoverTrigger, { children: /* @__PURE__ */ jsx3(EcforceAiIcon, {}) }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(PopoverTrigger, { children: /* @__PURE__ */ jsx4(EcforceAiIcon, {}) }),
+      /* @__PURE__ */ jsx4(
         PopoverContent,
         {
           align: "end",
           backdrop: isOpen,
           forceMount: hasOpened || void 0,
-          children: /* @__PURE__ */ jsx3(AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
+          children: /* @__PURE__ */ jsx4(AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
         }
       )
     ] });
   }
 );
 function EcforceAiIcon() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "svg",
     {
       width: "24",
@@ -232,7 +390,117 @@ function EcforceAiIcon() {
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx4(
+        "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"
+        }
+      )
+    }
+  );
+}
+
+// src/chatbot-sheet.tsx
+import { forwardRef as forwardRef5 } from "react";
+
+// src/tooltip.tsx
+import {
+  Arrow,
+  Content as Content3,
+  Portal as Portal3,
+  Provider,
+  Root as Root3,
+  Trigger as Trigger3
+} from "@radix-ui/react-tooltip";
+import "./tooltip.css";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  trigger,
+  side,
+  align,
+  disabled,
+  delayDuration,
+  skipDelayDuration,
+  className,
+  open,
+  alignOffset,
+  sideOffset,
+  arrowClassName,
+  keepTooltipOpen
+}) {
+  return /* @__PURE__ */ jsx5(
+    Provider,
+    {
+      delayDuration: delayDuration != null ? delayDuration : 200,
+      skipDelayDuration: skipDelayDuration != null ? skipDelayDuration : 200,
+      children: /* @__PURE__ */ jsxs3(Root3, { open: disabled ? false : open, children: [
+        /* @__PURE__ */ jsx5(
+          Trigger3,
+          {
+            onClick: keepTooltipOpen ? (event) => {
+              event.preventDefault();
+            } : void 0,
+            asChild: true,
+            children: trigger
+          }
+        ),
+        /* @__PURE__ */ jsx5(Portal3, { children: /* @__PURE__ */ jsxs3(
+          Content3,
+          {
+            className: `tooltip-content ${className || ""}`,
+            side,
+            align,
+            alignOffset,
+            sideOffset,
+            onPointerDownOutside: keepTooltipOpen ? (event) => {
+              event.preventDefault();
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsx5(Arrow, { className: arrowClassName }),
+              content
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/chatbot-sheet.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChatbotSheet = forwardRef5(
+  (_a, ref) => {
+    var _b = _a, { sheetStyle } = _b, props = __objRest(_b, ["sheetStyle"]);
+    return /* @__PURE__ */ jsx6(SheetProvider, { children: /* @__PURE__ */ jsxs4(Sheet, { children: [
+      /* @__PURE__ */ jsx6(
+        Tooltip,
+        {
+          side: "top",
+          align: "end",
+          content: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
+          trigger: /* @__PURE__ */ jsx6(SheetTrigger, { children: /* @__PURE__ */ jsx6(EcforceAiIcon2, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsxs4(SheetContent, { style: sheetStyle, children: [
+        /* @__PURE__ */ jsx6(SheetTitle, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+        /* @__PURE__ */ jsx6(AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
+      ] })
+    ] }) });
+  }
+);
+function EcforceAiIcon2() {
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsx6(
         "path",
         {
           fillRule: "evenodd",
@@ -246,7 +514,19 @@ function EcforceAiIcon() {
 export {
   AgentFrame,
   ChatbotPopover,
+  ChatbotSheet,
   Popover,
   PopoverContent,
-  PopoverTrigger
+  PopoverTrigger,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetProvider,
+  SheetTitle,
+  SheetTrigger,
+  Tooltip,
+  useSheet
 };

package/dist/sheet.d.ts

@@ -0,0 +1,27 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+interface SheetContextType {
+    hasOpened: boolean;
+    sheetOpen: boolean;
+    setSheetOpen: (open: boolean) => void;
+    isExpanded: boolean;
+    setIsExpanded: (expanded: boolean) => void;
+}
+export declare function useSheet(): SheetContextType;
+interface SheetProviderProps {
+    children: React.ReactNode;
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+}
+export declare function SheetProvider({ children }: SheetProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const SheetTrigger: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetContent: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
+//# sourceMappingURL=sheet.d.ts.map

package/dist/sheet.d.ts.map

@@ -0,0 +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;AAE/B,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAMD,wBAAgB,QAAQ,qBAMvB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAsB7D;AAED,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.css

@@ -0,0 +1,18 @@
+/* Tooltip Content */
+.tooltip-content {
+  background-color: #1f2937;
+  z-index: 50;
+  max-width: 320px;
+  border-radius: 0.125rem;
+  padding: 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+/* Arrow styling can be customized via arrowClassName prop */
+.tooltip-arrow {
+  fill: #1f2937;
+}

package/dist/tooltip.d.ts

@@ -0,0 +1,21 @@
+import "./tooltip.css";
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+type TooltipProps = {
+    content: React.ReactNode;
+    side?: Side;
+    align?: Align;
+    trigger: React.ReactNode;
+    disabled?: boolean;
+    delayDuration?: number;
+    skipDelayDuration?: number;
+    className?: string;
+    open?: boolean;
+    alignOffset?: number;
+    sideOffset?: number;
+    arrowClassName?: string;
+    keepTooltipOpen?: boolean;
+};
+export declare function Tooltip({ content, trigger, side, align, disabled, delayDuration, skipDelayDuration, className, open, alignOffset, sideOffset, arrowClassName, keepTooltipOpen, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../src/tooltip.tsx"],"names":[],"mappings":"AAUA,OAAO,eAAe,CAAC;AAEvB,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

@@ -1,17 +1,10 @@
 {
   "name": "@super_studio/ecforce-ai-agent-react",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "sideEffects": false,
-  "scripts": {
-    "dev": "npm-run-all --parallel dev:main dev:types",
-    "dev:main": "tsup --watch",
-    "dev:types": "tsc -p tsconfig.build.json --watch",
-    "build": "tsup && tsc -p tsconfig.build.json",
-    "prepublishOnly": "pnpm build"
-  },
   "files": [
     "dist",
     "src/**/*.ts",
@@ -24,13 +17,16 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./chatbot.css": "./dist/chatbot.css"
+    "./chatbot-popover.css": "./dist/chatbot-popover.css",
+    "./chatbot-sheet.css": "./dist/chatbot-sheet.css"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@radix-ui/react-popover": "1.1.14"
+    "@radix-ui/react-dialog": "1.1.14",
+    "@radix-ui/react-popover": "1.1.14",
+    "@radix-ui/react-tooltip": "1.2.7"
   },
   "peerDependencies": {
     "react": ">=16",
@@ -44,5 +40,11 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "tsup": "8.5.0"
+  },
+  "scripts": {
+    "dev": "npm-run-all --parallel dev:main dev:types",
+    "dev:main": "tsup --watch",
+    "dev:types": "tsc -p tsconfig.build.json --watch",
+    "build": "tsup && tsc -p tsconfig.build.json"
   }
 }

package/src/agent-frame.tsx

@@ -7,10 +7,13 @@ import {
   useState,
 } from "react";
 import { PROD_CHATBOT_URL } from "./constants";
+import { useSheet } from "./sheet";
 
-type IframeMessage = {
-  type: "CHATBOT_READY";
-};
+type IframeMessage =
+  | { type: "CHATBOT_READY" }
+  | { type: "CLOSE_CHATBOT" }
+  | { type: "EXPAND_CHATBOT" }
+  | { type: "SHRINK_CHATBOT" };
 
 type MCP = {
   name: string;
@@ -68,6 +71,7 @@ export const AgentFrame = forwardRef<AgentElement, AgentFrameProps>(
     const [isReady, setIsReady] = useState(false);
     const [hasInitialized, setHasInitialized] = useState(false);
     const [currentMcps, setCurrentMcps] = useState<MCP[]>(mcps);
+    const { setIsExpanded, setSheetOpen } = useSheet();
 
     // helper to post message to the iframe
     const postMessage = useCallback((message: ParentMessage) => {
@@ -124,9 +128,21 @@ export const AgentFrame = forwardRef<AgentElement, AgentFrameProps>(
         if (process.env.NODE_ENV === "development") {
           console.log("iframe message", event.data);
         }
-        // When the iframe is ready, set isReady flag to kick off the initialization
-        if (event.data?.type === "CHATBOT_READY") {
-          setIsReady(true);
+        // Handle iframe messages
+        switch (event.data?.type) {
+          case "CHATBOT_READY":
+            // When the iframe is ready, set isReady flag to kick off the initialization
+            setIsReady(true);
+            break;
+          case "CLOSE_CHATBOT":
+            setSheetOpen(false);
+            break;
+          case "EXPAND_CHATBOT":
+            setIsExpanded(true);
+            break;
+          case "SHRINK_CHATBOT":
+            setIsExpanded(false);
+            break;
         }
       };
 

package/src/{chatbot.css → chatbot-popover.css}

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