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

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/index.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 };
 
 // src/components/provider/chatbot-provider.tsx
-var _react = require('react'); var React5 = _interopRequireWildcard(_react);
+var _react = require('react'); var React5 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react);
 
 // src/components/provider/use-chatbot-frame-handler.tsx
 
@@ -310,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);
 
@@ -327,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,
@@ -339,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,
@@ -355,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";
@@ -379,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",
@@ -391,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",
@@ -403,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,
@@ -415,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,
@@ -502,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: [
@@ -512,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

@@ -310,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",
@@ -327,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,
@@ -339,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,
@@ -353,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";
@@ -364,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,
@@ -379,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,
@@ -391,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,
@@ -403,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,
@@ -415,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,
@@ -437,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,
@@ -453,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) => {
@@ -469,7 +525,7 @@ function Tooltip({
             children: trigger
           }
         ),
-        /* @__PURE__ */ jsx4(Portal2, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx5(Portal2, { children: /* @__PURE__ */ jsxs(
           Content2,
           {
             className: `tooltip-content ${className || ""}`,
@@ -481,7 +537,7 @@ function Tooltip({
               event.preventDefault();
             } : void 0,
             children: [
-              /* @__PURE__ */ jsx4(Arrow, { className: arrowClassName }),
+              /* @__PURE__ */ jsx5(Arrow, { className: arrowClassName }),
               content
             ]
           }
@@ -492,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/package.json

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

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>
+  );
+}