@super_studio/ecforce-ai-agent-react 0.5.1 → 0.5.3

package/dist/components/chatbot-frame.d.ts

@@ -2,6 +2,8 @@ import type { MCP } from "./provider/use-chatbot-frame-handler";
 export type ChatbotFrameProps = {
     /** 管理画面上のエージェントID */
     agentId: string;
+    /** 初期化時のチャットID */
+    initialChatId?: string;
     /** エージェントにつなげるMCPの情報 */
     mcps?: MCP[];
     /** アプリ名のメタデータ */
@@ -27,7 +29,7 @@ export type ChatbotFrameProps = {
     url?: string;
     className?: string;
 };
-export declare function ChatbotFrame({ agentId, appName, mcps, getSession, enabled, url, className, }: ChatbotFrameProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatbotFrame({ agentId, appName, initialChatId, mcps, getSession, enabled, url, className, }: ChatbotFrameProps): import("react/jsx-runtime").JSX.Element;
 export type SessionData = {
     sessionId: string;
     token: string;

package/dist/components/chatbot-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot-frame.d.ts","sourceRoot":"","sources":["../../src/components/chatbot-frame.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,iBAAiB;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;QACzB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC,CAAC;IACH;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,IAAI,EACJ,UAAU,EACV,OAAc,EACd,GAAG,EACH,SAAS,GACV,EAAE,iBAAiB,2CA4EnB;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;CACzC,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,EAAE,eAAe,sBAuCzD"}
+{"version":3,"file":"chatbot-frame.d.ts","sourceRoot":"","sources":["../../src/components/chatbot-frame.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,iBAAiB;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;QACzB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC,CAAC;IACH;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EACP,aAAa,EACb,IAAI,EACJ,UAAU,EACV,OAAc,EACd,GAAG,EACH,SAAS,GACV,EAAE,iBAAiB,2CAgFnB;AAoBD,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;CACzC,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,EAAE,eAAe,sBAuCzD"}

package/dist/components/chatbot-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot-sheet.d.ts","sourceRoot":"","sources":["../../src/components/chatbot-sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAUvE,KAAK,iBAAiB,GAAG,iBAAiB,GAAG;IAC3C,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAoBvE"}
+{"version":3,"file":"chatbot-sheet.d.ts","sourceRoot":"","sources":["../../src/components/chatbot-sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAWvE,KAAK,iBAAiB,GAAG,iBAAiB,GAAG;IAC3C,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CA0BvE"}

package/dist/components/lottie-ai-icon.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+type LottieAiIconProps = {
+    src: string;
+    width?: number;
+    height?: number;
+    loop?: boolean;
+    autoplay?: boolean;
+    hover?: boolean;
+    fallback?: React.ReactNode;
+};
+export declare function LottieAiIcon({ src, width, height, loop, autoplay, hover, fallback, }: LottieAiIconProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=lottie-ai-icon.d.ts.map

package/dist/components/lottie-ai-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lottie-ai-icon.d.ts","sourceRoot":"","sources":["../../src/components/lottie-ai-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAU,EACV,MAAW,EACX,IAAW,EACX,QAAgB,EAChB,KAAa,EACb,QAAQ,GACT,EAAE,iBAAiB,2CAoDnB"}

package/dist/components/provider/{chatbot-proivder.d.ts → chatbot-provider.d.ts}

@@ -35,4 +35,4 @@ type ChatbotProviderProps = {
 };
 export declare function ChatbotProvider({ children }: ChatbotProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=chatbot-proivder.d.ts.map
+//# sourceMappingURL=chatbot-provider.d.ts.map

package/dist/components/provider/{chatbot-proivder.d.ts.map → chatbot-provider.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"chatbot-proivder.d.ts","sourceRoot":"","sources":["../../../src/components/provider/chatbot-proivder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,6BAA6B,CAAC;AAGrC,KAAK,kBAAkB,GAAG;IACxB,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,sBAAsB;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,kBAAkB;IAClB,IAAI,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,aAAa;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC/B,cAAc;IACd,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mBAAmB;IACnB,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,qBAAqB;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,EAAE,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D,CAAC;AAMF,wBAAgB,UAAU,uBAMzB;AAED,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAkCjE"}
+{"version":3,"file":"chatbot-provider.d.ts","sourceRoot":"","sources":["../../../src/components/provider/chatbot-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,6BAA6B,CAAC;AAGrC,KAAK,kBAAkB,GAAG;IACxB,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,sBAAsB;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,kBAAkB;IAClB,IAAI,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,aAAa;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC/B,cAAc;IACd,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mBAAmB;IACnB,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,qBAAqB;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,EAAE,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D,CAAC;AAMF,wBAAgB,UAAU,uBAMzB;AAED,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAkCjE"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./components/provider/chatbot-proivder";
+export * from "./components/provider/chatbot-provider";
 export * from "./components/chatbot-frame";
 export * from "./components/chatbot-sheet";
 export * from "./components/sheet";

package/dist/index.js

@@ -31,8 +31,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/components/provider/chatbot-proivder.tsx
-var _react = require('react'); var React5 = _interopRequireWildcard(_react);
+// src/components/provider/chatbot-provider.tsx
+var _react = require('react'); var React5 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react);
 
 // src/components/provider/use-chatbot-frame-handler.tsx
 
@@ -144,7 +144,7 @@ function useChatbotWindowStates() {
   return { hasOpened, open, isExpanded, setOpen, setIsExpanded };
 }
 
-// src/components/provider/chatbot-proivder.tsx
+// src/components/provider/chatbot-provider.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var ChatbotContext = React5.default.createContext(
   void 0
@@ -191,13 +191,14 @@ function ChatbotProvider({ children }) {
 
 
 // src/lib/constants.ts
-var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
+var PROD_CHATBOT_URL = "https://agent.ec-force.com";
 
 // src/components/chatbot-frame.tsx
 
 function ChatbotFrame({
   agentId,
   appName,
+  initialChatId,
   mcps,
   getSession,
   enabled = true,
@@ -205,7 +206,7 @@ function ChatbotFrame({
   className
 }) {
   var _a;
-  const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
+  const baseUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
   const { setIframeEl } = useChatbot();
   const { init, setMcps, setAppName, setSessionToken, isReady } = useChatbot();
   const sentInitRef = React5.default.useRef(false);
@@ -250,7 +251,11 @@ function ChatbotFrame({
     "iframe",
     {
       ref: setIframeEl,
-      src: `${chatbotUrl}/embed/${agentId}`,
+      src: buildIframeUrl({
+        baseUrl,
+        agentId,
+        initialChatId
+      }),
       className,
       allow: "clipboard-write",
       style: {
@@ -260,6 +265,17 @@ function ChatbotFrame({
     }
   );
 }
+function buildIframeUrl({
+  baseUrl,
+  agentId,
+  initialChatId
+}) {
+  const url = new URL(`/embed/${agentId}`, baseUrl);
+  if (initialChatId) {
+    url.searchParams.set("initialChatId", initialChatId);
+  }
+  return url.toString();
+}
 function useSession({ getSession }) {
   const { setSessionToken } = useChatbot();
   const [session, setSession] = React5.default.useState();
@@ -294,6 +310,62 @@ function useSession({ getSession }) {
 // src/components/chatbot-sheet.tsx
 
 
+// src/components/lottie-ai-icon.tsx
+
+
+function LottieAiIcon({
+  src,
+  width = 18,
+  height = 18,
+  loop = true,
+  autoplay = false,
+  hover = false,
+  fallback
+}) {
+  const containerRef = React5.useRef(null);
+  const [ready, setReady] = React5.useState(false);
+  React5.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const existing = document.querySelector("script[data-dotlottie-player]");
+    if (!existing) {
+      const scriptEl = document.createElement("script");
+      scriptEl.type = "module";
+      scriptEl.async = true;
+      scriptEl.src = "https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js";
+      scriptEl.setAttribute("data-dotlottie-player", "true");
+      scriptEl.onload = () => setReady(true);
+      scriptEl.onerror = () => setReady(false);
+      document.head.appendChild(scriptEl);
+    } else {
+      setReady(true);
+    }
+  }, []);
+  React5.useEffect(() => {
+    if (!ready || !containerRef.current) return;
+    const container = containerRef.current;
+    container.innerHTML = "";
+    const player = document.createElement("dotlottie-player");
+    player.setAttribute("src", src);
+    player.setAttribute("style", `width:${width}px;height:${height}px`);
+    if (loop) player.setAttribute("loop", "");
+    if (autoplay) player.setAttribute("autoplay", "");
+    if (hover) player.setAttribute("hover", "");
+    container.appendChild(player);
+    return () => {
+      container.innerHTML = "";
+    };
+  }, [ready, src, width, height, loop, autoplay, hover]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: containerRef, "aria-hidden": "true", children: !ready && (fallback != null ? fallback : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }
+  )) });
+}
+
 // src/components/sheet.tsx
 var _reactdialog = require('@radix-ui/react-dialog'); var SheetPrimitive = _interopRequireWildcard(_reactdialog);
 
@@ -311,7 +383,7 @@ function Sheet(_a) {
     }, props)
   );
 }
-var SheetTrigger = React5.forwardRef((_a, ref) => {
+var SheetTrigger = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     SheetPrimitive.Trigger,
@@ -323,7 +395,7 @@ var SheetTrigger = React5.forwardRef((_a, ref) => {
   );
 });
 SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
-var SheetClose = React5.forwardRef((_a, ref) => {
+var SheetClose = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     SheetPrimitive.Close,
@@ -339,7 +411,7 @@ function SheetPortal(_a) {
   var props = __objRest(_a, []);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
 }
-var SheetContent = React5.forwardRef((_a, ref) => {
+var SheetContent = React6.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";
@@ -363,7 +435,7 @@ var SheetContent = React5.forwardRef((_a, ref) => {
   ) });
 });
 SheetContent.displayName = SheetPrimitive.Content.displayName;
-var SheetHeader = React5.forwardRef((_a, ref) => {
+var SheetHeader = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
@@ -375,7 +447,7 @@ var SheetHeader = React5.forwardRef((_a, ref) => {
   );
 });
 SheetHeader.displayName = "SheetHeader";
-var SheetFooter = React5.forwardRef((_a, ref) => {
+var SheetFooter = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
@@ -387,7 +459,7 @@ var SheetFooter = React5.forwardRef((_a, ref) => {
   );
 });
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React5.forwardRef((_a, ref) => {
+var SheetTitle = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     SheetPrimitive.Title,
@@ -399,7 +471,7 @@ var SheetTitle = React5.forwardRef((_a, ref) => {
   );
 });
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React5.forwardRef((_a, ref) => {
+var SheetDescription = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     SheetPrimitive.Description,
@@ -486,7 +558,16 @@ function ChatbotSheet(_a) {
         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, EcforceAiIcon, {}) })
+        trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetTrigger, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          LottieAiIcon,
+          {
+            src: `${PROD_CHATBOT_URL}/animations/ai-icon.v1.lottie`,
+            width: 20,
+            height: 20,
+            autoplay: true,
+            loop: true
+          }
+        ) })
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SheetContent, { style: sheetStyle, children: [
@@ -496,26 +577,6 @@ function ChatbotSheet(_a) {
     ] })
   ] });
 }
-function EcforceAiIcon() {
-  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"
-        }
-      )
-    }
-  );
-}
 
 
 

package/dist/index.mjs

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/components/provider/chatbot-proivder.tsx
+// src/components/provider/chatbot-provider.tsx
 import React3 from "react";
 
 // src/components/provider/use-chatbot-frame-handler.tsx
@@ -144,7 +144,7 @@ function useChatbotWindowStates() {
   return { hasOpened, open, isExpanded, setOpen, setIsExpanded };
 }
 
-// src/components/provider/chatbot-proivder.tsx
+// src/components/provider/chatbot-provider.tsx
 import { jsx } from "react/jsx-runtime";
 var ChatbotContext = React3.createContext(
   void 0
@@ -191,13 +191,14 @@ function ChatbotProvider({ children }) {
 import React4 from "react";
 
 // src/lib/constants.ts
-var PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
+var PROD_CHATBOT_URL = "https://agent.ec-force.com";
 
 // src/components/chatbot-frame.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 function ChatbotFrame({
   agentId,
   appName,
+  initialChatId,
   mcps,
   getSession,
   enabled = true,
@@ -205,7 +206,7 @@ function ChatbotFrame({
   className
 }) {
   var _a;
-  const chatbotUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
+  const baseUrl = (_a = url != null ? url : process.env.CHATBOT_URL) != null ? _a : PROD_CHATBOT_URL;
   const { setIframeEl } = useChatbot();
   const { init, setMcps, setAppName, setSessionToken, isReady } = useChatbot();
   const sentInitRef = React4.useRef(false);
@@ -250,7 +251,11 @@ function ChatbotFrame({
     "iframe",
     {
       ref: setIframeEl,
-      src: `${chatbotUrl}/embed/${agentId}`,
+      src: buildIframeUrl({
+        baseUrl,
+        agentId,
+        initialChatId
+      }),
       className,
       allow: "clipboard-write",
       style: {
@@ -260,6 +265,17 @@ function ChatbotFrame({
     }
   );
 }
+function buildIframeUrl({
+  baseUrl,
+  agentId,
+  initialChatId
+}) {
+  const url = new URL(`/embed/${agentId}`, baseUrl);
+  if (initialChatId) {
+    url.searchParams.set("initialChatId", initialChatId);
+  }
+  return url.toString();
+}
 function useSession({ getSession }) {
   const { setSessionToken } = useChatbot();
   const [session, setSession] = React4.useState();
@@ -294,14 +310,70 @@ function useSession({ getSession }) {
 // src/components/chatbot-sheet.tsx
 import "react";
 
-// src/components/sheet.tsx
-import * as SheetPrimitive from "@radix-ui/react-dialog";
+// src/components/lottie-ai-icon.tsx
 import * as React5 from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
+function LottieAiIcon({
+  src,
+  width = 18,
+  height = 18,
+  loop = true,
+  autoplay = false,
+  hover = false,
+  fallback
+}) {
+  const containerRef = React5.useRef(null);
+  const [ready, setReady] = React5.useState(false);
+  React5.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const existing = document.querySelector("script[data-dotlottie-player]");
+    if (!existing) {
+      const scriptEl = document.createElement("script");
+      scriptEl.type = "module";
+      scriptEl.async = true;
+      scriptEl.src = "https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js";
+      scriptEl.setAttribute("data-dotlottie-player", "true");
+      scriptEl.onload = () => setReady(true);
+      scriptEl.onerror = () => setReady(false);
+      document.head.appendChild(scriptEl);
+    } else {
+      setReady(true);
+    }
+  }, []);
+  React5.useEffect(() => {
+    if (!ready || !containerRef.current) return;
+    const container = containerRef.current;
+    container.innerHTML = "";
+    const player = document.createElement("dotlottie-player");
+    player.setAttribute("src", src);
+    player.setAttribute("style", `width:${width}px;height:${height}px`);
+    if (loop) player.setAttribute("loop", "");
+    if (autoplay) player.setAttribute("autoplay", "");
+    if (hover) player.setAttribute("hover", "");
+    container.appendChild(player);
+    return () => {
+      container.innerHTML = "";
+    };
+  }, [ready, src, width, height, loop, autoplay, hover]);
+  return /* @__PURE__ */ jsx3("div", { ref: containerRef, "aria-hidden": "true", children: !ready && (fallback != null ? fallback : /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }
+  )) });
+}
+
+// src/components/sheet.tsx
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as React6 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Sheet(_a) {
   var props = __objRest(_a, []);
   const { open, setOpen } = useChatbot();
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     SheetPrimitive.Root,
     __spreadValues({
       "data-slot": "sheet",
@@ -311,9 +383,9 @@ function Sheet(_a) {
     }, props)
   );
 }
-var SheetTrigger = React5.forwardRef((_a, ref) => {
+var SheetTrigger = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     SheetPrimitive.Trigger,
     __spreadValues({
       ref,
@@ -323,9 +395,9 @@ var SheetTrigger = React5.forwardRef((_a, ref) => {
   );
 });
 SheetTrigger.displayName = SheetPrimitive.Trigger.displayName;
-var SheetClose = React5.forwardRef((_a, ref) => {
+var SheetClose = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     SheetPrimitive.Close,
     __spreadValues({
       ref,
@@ -337,9 +409,9 @@ var SheetClose = React5.forwardRef((_a, ref) => {
 SheetClose.displayName = SheetPrimitive.Close.displayName;
 function SheetPortal(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx3(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
+  return /* @__PURE__ */ jsx4(SheetPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
 }
-var SheetContent = React5.forwardRef((_a, ref) => {
+var SheetContent = React6.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";
@@ -348,7 +420,7 @@ var SheetContent = React5.forwardRef((_a, ref) => {
     "--sheet-width": width,
     transform: `translateX(${translateX})`
   }, style);
-  return /* @__PURE__ */ jsx3(SheetPortal, { forceMount: hasOpened || void 0, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(SheetPortal, { forceMount: hasOpened || void 0, children: /* @__PURE__ */ jsx4(
     SheetPrimitive.Content,
     __spreadProps(__spreadValues({
       ref,
@@ -363,9 +435,9 @@ var SheetContent = React5.forwardRef((_a, ref) => {
   ) });
 });
 SheetContent.displayName = SheetPrimitive.Content.displayName;
-var SheetHeader = React5.forwardRef((_a, ref) => {
+var SheetHeader = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     __spreadValues({
       ref,
@@ -375,9 +447,9 @@ var SheetHeader = React5.forwardRef((_a, ref) => {
   );
 });
 SheetHeader.displayName = "SheetHeader";
-var SheetFooter = React5.forwardRef((_a, ref) => {
+var SheetFooter = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     __spreadValues({
       ref,
@@ -387,9 +459,9 @@ var SheetFooter = React5.forwardRef((_a, ref) => {
   );
 });
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React5.forwardRef((_a, ref) => {
+var SheetTitle = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     SheetPrimitive.Title,
     __spreadValues({
       ref,
@@ -399,9 +471,9 @@ var SheetTitle = React5.forwardRef((_a, ref) => {
   );
 });
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React5.forwardRef((_a, ref) => {
+var SheetDescription = React6.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     SheetPrimitive.Description,
     __spreadValues({
       ref,
@@ -421,7 +493,7 @@ import {
   Root as Root2,
   Trigger as Trigger2
 } from "@radix-ui/react-tooltip";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 function Tooltip({
   content,
   trigger,
@@ -437,13 +509,13 @@ function Tooltip({
   arrowClassName,
   keepTooltipOpen
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     Provider,
     {
       delayDuration: delayDuration != null ? delayDuration : 200,
       skipDelayDuration: skipDelayDuration != null ? skipDelayDuration : 200,
       children: /* @__PURE__ */ jsxs(Root2, { open: disabled ? false : open, children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           Trigger2,
           {
             onClick: keepTooltipOpen ? (event) => {
@@ -453,7 +525,7 @@ function Tooltip({
             children: trigger
           }
         ),
-        /* @__PURE__ */ jsx4(Portal2, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx5(Portal2, { children: /* @__PURE__ */ jsxs(
           Content2,
           {
             className: `tooltip-content ${className || ""}`,
@@ -465,7 +537,7 @@ function Tooltip({
               event.preventDefault();
             } : void 0,
             children: [
-              /* @__PURE__ */ jsx4(Arrow, { className: arrowClassName }),
+              /* @__PURE__ */ jsx5(Arrow, { className: arrowClassName }),
               content
             ]
           }
@@ -476,46 +548,35 @@ function Tooltip({
 }
 
 // src/components/chatbot-sheet.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChatbotSheet(_a) {
   var _b = _a, { sheetStyle } = _b, props = __objRest(_b, ["sheetStyle"]);
   return /* @__PURE__ */ jsxs2(Sheet, { children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       Tooltip,
       {
         side: "top",
         align: "end",
         content: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046",
-        trigger: /* @__PURE__ */ jsx5(SheetTrigger, { children: /* @__PURE__ */ jsx5(EcforceAiIcon, {}) })
+        trigger: /* @__PURE__ */ jsx6(SheetTrigger, { children: /* @__PURE__ */ jsx6(
+          LottieAiIcon,
+          {
+            src: `${PROD_CHATBOT_URL}/animations/ai-icon.v1.lottie`,
+            width: 20,
+            height: 20,
+            autoplay: true,
+            loop: true
+          }
+        ) })
       }
     ),
     /* @__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(ChatbotFrame, __spreadValues({}, props))
+      /* @__PURE__ */ jsx6(SheetTitle, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+      /* @__PURE__ */ jsx6(SheetDescription, { children: "AI\u306B\u8CEA\u554F\u3057\u3066\u307F\u307E\u3057\u3087\u3046" }),
+      /* @__PURE__ */ jsx6(ChatbotFrame, __spreadValues({}, props))
     ] })
   ] });
 }
-function EcforceAiIcon() {
-  return /* @__PURE__ */ jsx5(
-    "svg",
-    {
-      width: "18",
-      height: "18",
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "currentColor",
-      children: /* @__PURE__ */ jsx5(
-        "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"
-        }
-      )
-    }
-  );
-}
 export {
   ChatbotFrame,
   ChatbotProvider,

package/dist/lib/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
+export declare const PROD_CHATBOT_URL = "https://agent.ec-force.com";
 //# sourceMappingURL=constants.d.ts.map

package/dist/lib/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,wCAAwC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,+BAA+B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@super_studio/ecforce-ai-agent-react",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/components/chatbot-frame.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import { PROD_CHATBOT_URL } from "../lib/constants";
-import { useChatbot } from "./provider/chatbot-proivder";
+import { useChatbot } from "./provider/chatbot-provider";
 import type { MCP } from "./provider/use-chatbot-frame-handler";
 
 export type ChatbotFrameProps = {
   /** 管理画面上のエージェントID */
   agentId: string;
+  /** 初期化時のチャットID */
+  initialChatId?: string;
   /** エージェントにつなげるMCPの情報 */
   mcps?: MCP[];
   /** アプリ名のメタデータ */
@@ -35,13 +37,14 @@ export type ChatbotFrameProps = {
 export function ChatbotFrame({
   agentId,
   appName,
+  initialChatId,
   mcps,
   getSession,
   enabled = true,
   url,
   className,
 }: ChatbotFrameProps) {
-  const chatbotUrl = url ?? process.env.CHATBOT_URL ?? PROD_CHATBOT_URL;
+  const baseUrl = url ?? process.env.CHATBOT_URL ?? PROD_CHATBOT_URL;
   const { setIframeEl } = useChatbot();
   const { init, setMcps, setAppName, setSessionToken, isReady } = useChatbot();
   const sentInitRef = React.useRef(false);
@@ -107,7 +110,11 @@ export function ChatbotFrame({
   return (
     <iframe
       ref={setIframeEl}
-      src={`${chatbotUrl}/embed/${agentId}`}
+      src={buildIframeUrl({
+        baseUrl,
+        agentId,
+        initialChatId,
+      })}
       className={className}
       allow="clipboard-write"
       style={{
@@ -118,6 +125,24 @@ export function ChatbotFrame({
   );
 }
 
+function buildIframeUrl({
+  baseUrl,
+  agentId,
+  initialChatId,
+}: {
+  baseUrl: string;
+  agentId: string;
+  initialChatId?: string;
+}) {
+  const url = new URL(`/embed/${agentId}`, baseUrl);
+
+  if (initialChatId) {
+    url.searchParams.set("initialChatId", initialChatId);
+  }
+
+  return url.toString();
+}
+
 export type SessionData = {
   sessionId: string;
   token: string;

package/src/components/chatbot-sheet.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+import { PROD_CHATBOT_URL } from "@/lib/constants";
 import { ChatbotFrame, type ChatbotFrameProps } from "./chatbot-frame";
+import { LottieAiIcon } from "./lottie-ai-icon";
 import {
   Sheet,
   SheetContent,
@@ -22,7 +24,13 @@ export function ChatbotSheet({ sheetStyle, ...props }: ChatbotSheetProps) {
         content="AIに質問してみましょう"
         trigger={
           <SheetTrigger>
-            <EcforceAiIcon />
+            <LottieAiIcon
+              src={`${PROD_CHATBOT_URL}/animations/ai-icon.v1.lottie`}
+              width={20}
+              height={20}
+              autoplay
+              loop
+            />
           </SheetTrigger>
         }
       />
@@ -34,21 +42,3 @@ export function ChatbotSheet({ sheetStyle, ...props }: ChatbotSheetProps) {
     </Sheet>
   );
 }
-
-function EcforceAiIcon() {
-  return (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-    >
-      <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"
-      />
-    </svg>
-  );
-}

package/src/components/lottie-ai-icon.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+
+type LottieAiIconProps = {
+  src: string;
+  width?: number;
+  height?: number;
+  loop?: boolean;
+  autoplay?: boolean;
+  hover?: boolean;
+  fallback?: React.ReactNode;
+};
+
+export function LottieAiIcon({
+  src,
+  width = 18,
+  height = 18,
+  loop = true,
+  autoplay = false,
+  hover = false,
+  fallback,
+}: LottieAiIconProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [ready, setReady] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const existing = document.querySelector("script[data-dotlottie-player]");
+    if (!existing) {
+      const scriptEl = document.createElement("script");
+      scriptEl.type = "module";
+      scriptEl.async = true;
+      scriptEl.src =
+        "https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js";
+      scriptEl.setAttribute("data-dotlottie-player", "true");
+      scriptEl.onload = () => setReady(true);
+      scriptEl.onerror = () => setReady(false);
+      document.head.appendChild(scriptEl);
+    } else {
+      setReady(true);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (!ready || !containerRef.current) return;
+    const container = containerRef.current;
+    container.innerHTML = "";
+    const player = document.createElement("dotlottie-player");
+    player.setAttribute("src", src);
+    player.setAttribute("style", `width:${width}px;height:${height}px`);
+    if (loop) player.setAttribute("loop", "");
+    if (autoplay) player.setAttribute("autoplay", "");
+    if (hover) player.setAttribute("hover", "");
+    container.appendChild(player);
+    return () => {
+      container.innerHTML = "";
+    };
+  }, [ready, src, width, height, loop, autoplay, hover]);
+
+  return (
+    <div ref={containerRef} aria-hidden="true">
+      {!ready &&
+        (fallback ?? (
+          <svg
+            width={width}
+            height={height}
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          />
+        ))}
+    </div>
+  );
+}

package/src/components/sheet.tsx

@@ -1,6 +1,6 @@
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
-import { useChatbot } from "./provider/chatbot-proivder";
+import { useChatbot } from "./provider/chatbot-provider";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   const { open, setOpen } = useChatbot();

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from "./components/provider/chatbot-proivder";
+export * from "./components/provider/chatbot-provider";
 export * from "./components/chatbot-frame";
 export * from "./components/chatbot-sheet";
 export * from "./components/sheet";

package/src/lib/constants.ts

@@ -1 +1 @@
-export const PROD_CHATBOT_URL = "https://ecforce-ai-agent.vercel.app";
+export const PROD_CHATBOT_URL = "https://agent.ec-force.com";