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

package/dist/index.mjs

@@ -31,6 +31,38 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
+// src/chatbot-proivder.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var ChatbotContext = React.createContext(
+  void 0
+);
+function useChatbot() {
+  const context = React.useContext(ChatbotContext);
+  if (!context) {
+    throw new Error("useChatbot must be used within a ChatbotProvider");
+  }
+  return context;
+}
+function ChatbotProvider({ children }) {
+  const [hasOpened, setHasOpened] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  React.useEffect(() => {
+    if (open) {
+      setHasOpened(true);
+    }
+  }, [open]);
+  const value = {
+    hasOpened,
+    open,
+    setOpen,
+    isExpanded,
+    setIsExpanded
+  };
+  return /* @__PURE__ */ jsx(ChatbotContext.Provider, { value, children });
+}
+
 // src/agent-frame.tsx
 import {
   forwardRef,
@@ -45,7 +77,7 @@ import {
 var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
 
 // src/agent-frame.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var AgentFrame = forwardRef(
   ({ agentId, mcps = [], appName, className, url }, ref) => {
     var _a;
@@ -54,6 +86,7 @@ var AgentFrame = forwardRef(
     const [isReady, setIsReady] = useState(false);
     const [hasInitialized, setHasInitialized] = useState(false);
     const [currentMcps, setCurrentMcps] = useState(mcps);
+    const { setIsExpanded, setOpen } = useChatbot();
     const postMessage = useCallback((message) => {
       var _a2;
       if ((_a2 = iframeRef.current) == null ? void 0 : _a2.contentWindow) {
@@ -101,8 +134,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":
+            setOpen(false);
+            break;
+          case "EXPAND_CHATBOT":
+            setIsExpanded(true);
+            break;
+          case "SHRINK_CHATBOT":
+            setIsExpanded(false);
+            break;
         }
       };
       const handleIframeLoad = () => {
@@ -129,7 +173,7 @@ var AgentFrame = forwardRef(
         setMcps(mcps);
       }
     }, [setMcps, mcps, currentMcps]);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "iframe",
       {
         ref: iframeRef,
@@ -146,93 +190,224 @@ var AgentFrame = forwardRef(
 );
 AgentFrame.displayName = "AgentFrame";
 
-// src/chatbot-popover.tsx
-import { forwardRef as forwardRef3, useState as useState2 } from "react";
+// src/chatbot-sheet.tsx
+import { forwardRef as forwardRef3 } 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";
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = React.forwardRef((_a, ref) => {
+// src/sheet.tsx
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as React2 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Sheet(_a) {
+  var props = __objRest(_a, []);
+  const { open, setOpen } = useChatbot();
+  return /* @__PURE__ */ jsx3(
+    SheetPrimitive.Root,
+    __spreadValues({
+      "data-slot": "sheet",
+      modal: false,
+      open,
+      onOpenChange: setOpen
+    }, props)
+  );
+}
+var SheetTrigger = React2.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx2(
-    PopoverPrimitive.Trigger,
+  return /* @__PURE__ */ jsx3(
+    SheetPrimitive.Trigger,
     __spreadValues({
       ref,
-      className: `chatbot-trigger ${className}`
+      "data-slot": "sheet-trigger",
+      className: `chatbot-trigger ${className || ""}`
     }, props)
   );
 });
-PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
-var PopoverContent = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      align = "center",
-      backdrop,
-      sideOffset = 4,
-      forceMount
-    } = _b, props = __objRest(_b, [
-      "className",
-      "align",
-      "backdrop",
-      "sideOffset",
-      "forceMount"
-    ]);
-    return /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { forceMount, children: /* @__PURE__ */ jsxs("div", { children: [
-      backdrop && /* @__PURE__ */ jsx2("div", { className: "chatbot-popover-backdrop" }),
-      /* @__PURE__ */ jsx2(
-        PopoverPrimitive.Content,
-        __spreadValues({
-          ref,
-          align,
-          sideOffset,
-          forceMount,
-          className: `chatbot-popover-content ${className}`
-        }, props)
-      )
-    ] }) });
-  }
-);
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
+var SheetClose = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    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__ */ jsx3(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
+}
+var SheetContent = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, style } = _b, props = __objRest(_b, ["className", "children", "style"]);
+  const { isExpanded, open, hasOpened } = useChatbot();
+  const width = isExpanded ? "848px" : "400px";
+  const translateX = open ? "0" : "100%";
+  const contentStyle = __spreadValues({
+    "--sheet-width": width,
+    transform: `translateX(${translateX})`
+  }, style);
+  return /* @__PURE__ */ jsx3(SheetPortal, { forceMount: hasOpened || void 0, children: /* @__PURE__ */ jsx3(
+    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 = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-header",
+      className: `chatbot-sheet-header ${className || ""}`
+    }, props)
+  );
+});
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-footer",
+      className: `chatbot-sheet-footer ${className || ""}`
+    }, props)
+  );
+});
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    SheetPrimitive.Title,
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-title",
+      className: `chatbot-sheet-title ${className || ""}`
+    }, props)
+  );
+});
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    SheetPrimitive.Description,
+    __spreadValues({
+      ref,
+      "data-slot": "sheet-description",
+      className: `chatbot-sheet-description ${className || ""}`
+    }, props)
+  );
+});
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
-// src/chatbot-popover.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var ChatbotPopover = forwardRef3(
-  (props, ref) => {
-    const [isOpen, setIsOpen] = useState2(false);
-    const [hasOpened, setHasOpened] = useState2(false);
-    const handleOpenChange = (open) => {
-      setIsOpen(open);
-      if (open && !hasOpened) {
-        setHasOpened(true);
-      }
-    };
-    return /* @__PURE__ */ jsxs2(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
-      /* @__PURE__ */ jsx3(PopoverTrigger, { children: /* @__PURE__ */ jsx3(EcforceAiIcon, {}) }),
-      /* @__PURE__ */ jsx3(
-        PopoverContent,
+// src/tooltip.tsx
+import {
+  Arrow,
+  Content as Content2,
+  Portal as Portal2,
+  Provider,
+  Root as Root2,
+  Trigger as Trigger2
+} from "@radix-ui/react-tooltip";
+import "./tooltip.css";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  trigger,
+  side,
+  align,
+  disabled,
+  delayDuration,
+  skipDelayDuration,
+  className,
+  open,
+  alignOffset,
+  sideOffset,
+  arrowClassName,
+  keepTooltipOpen
+}) {
+  return /* @__PURE__ */ jsx4(
+    Provider,
+    {
+      delayDuration: delayDuration != null ? delayDuration : 200,
+      skipDelayDuration: skipDelayDuration != null ? skipDelayDuration : 200,
+      children: /* @__PURE__ */ jsxs(Root2, { open: disabled ? false : open, children: [
+        /* @__PURE__ */ jsx4(
+          Trigger2,
+          {
+            onClick: keepTooltipOpen ? (event) => {
+              event.preventDefault();
+            } : void 0,
+            asChild: true,
+            children: trigger
+          }
+        ),
+        /* @__PURE__ */ jsx4(Portal2, { children: /* @__PURE__ */ jsxs(
+          Content2,
+          {
+            className: `tooltip-content ${className || ""}`,
+            side,
+            align,
+            alignOffset,
+            sideOffset,
+            onPointerDownOutside: keepTooltipOpen ? (event) => {
+              event.preventDefault();
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsx4(Arrow, { className: arrowClassName }),
+              content
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/chatbot-sheet.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChatbotSheet = forwardRef3(
+  (_a, ref) => {
+    var _b = _a, { sheetStyle } = _b, props = __objRest(_b, ["sheetStyle"]);
+    return /* @__PURE__ */ jsxs2(Sheet, { children: [
+      /* @__PURE__ */ jsx5(
+        Tooltip,
         {
+          side: "top",
           align: "end",
-          backdrop: isOpen,
-          forceMount: hasOpened || void 0,
-          children: /* @__PURE__ */ jsx3(AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
+          content: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
+          trigger: /* @__PURE__ */ jsx5(SheetTrigger, { children: /* @__PURE__ */ jsx5(EcforceAiIcon, {}) })
         }
-      )
+      ),
+      /* @__PURE__ */ jsxs2(SheetContent, { style: sheetStyle, children: [
+        /* @__PURE__ */ jsx5(SheetTitle, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+        /* @__PURE__ */ jsx5(SheetDescription, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+        /* @__PURE__ */ jsx5(AgentFrame, __spreadProps(__spreadValues({}, props), { ref }))
+      ] })
     ] });
   }
 );
 function EcforceAiIcon() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     "svg",
     {
-      width: "24",
-      height: "24",
+      width: "18",
+      height: "18",
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx5(
         "path",
         {
           fillRule: "evenodd",
@@ -245,8 +420,16 @@ function EcforceAiIcon() {
 }
 export {
   AgentFrame,
-  ChatbotPopover,
-  Popover,
-  PopoverContent,
-  PopoverTrigger
+  ChatbotProvider,
+  ChatbotSheet,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  Tooltip,
+  useChatbot
 };

package/dist/sheet.d.ts

@@ -0,0 +1,12 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+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;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.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.3.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,14 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./chatbot.css": "./dist/chatbot.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-tooltip": "1.2.7"
   },
   "peerDependencies": {
     "react": ">=16",
@@ -44,5 +38,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

@@ -6,11 +6,14 @@ import {
   useRef,
   useState,
 } from "react";
+import { useChatbot } from "./chatbot-proivder";
 import { PROD_CHATBOT_URL } from "./constants";
 
-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, setOpen } = useChatbot();
 
     // 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":
+            setOpen(false);
+            break;
+          case "EXPAND_CHATBOT":
+            setIsExpanded(true);
+            break;
+          case "SHRINK_CHATBOT":
+            setIsExpanded(false);
+            break;
         }
       };
 

package/src/chatbot-proivder.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+
+interface ChatbotContextType {
+  hasOpened: boolean;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  isExpanded: boolean;
+  setIsExpanded: (expanded: boolean) => void;
+}
+
+const ChatbotContext = React.createContext<ChatbotContextType | undefined>(
+  undefined,
+);
+
+export function useChatbot() {
+  const context = React.useContext(ChatbotContext);
+  if (!context) {
+    throw new Error("useChatbot must be used within a ChatbotProvider");
+  }
+  return context;
+}
+
+interface ChatbotProviderProps {
+  children: React.ReactNode;
+}
+
+export function ChatbotProvider({ children }: ChatbotProviderProps) {
+  const [hasOpened, setHasOpened] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  React.useEffect(() => {
+    if (open) {
+      setHasOpened(true);
+    }
+  }, [open]);
+
+  const value = {
+    hasOpened,
+    open,
+    setOpen,
+    isExpanded,
+    setIsExpanded,
+  };
+
+  return (
+    <ChatbotContext.Provider value={value}>{children}</ChatbotContext.Provider>
+  );
+}