@super_studio/ecforce-ai-agent-react 1.1.0 → 1.1.2

package/README.md

@@ -1 +1,308 @@
-TODO
+# セットアップ
+
+このドキュメントでは、`@super_studio/ecforce-ai-agent-react` と `@super_studio/ecforce-ai-agent-server` を使って、Webアプリに AI Agent のチャット UI とサーバー連携を組み込む手順を説明します。
+
+想定構成は以下です。
+
+- フロントエンドで `@super_studio/ecforce-ai-agent-react` を使ってチャット UI を表示する
+- バックエンドで `@super_studio/ecforce-ai-agent-server` を使ってセッショントークンを発行する
+- 必要に応じて MCP エンドポイントでトークンを検証し、アプリ固有のツールを公開する
+
+## 1. インストール
+
+```bash
+pnpm add @super_studio/ecforce-ai-agent-react @super_studio/ecforce-ai-agent-server
+```
+
+## 2. 環境変数を設定する
+
+通常の本番環境 (`https://agent.ec-force.com`) に接続するだけであれば、`NEXT_PUBLIC_CHATBOT_URL` は不要です。
+
+`@super_studio/ecforce-ai-agent-server` を使う場合は、API キーとして `AI_AGENT_API_KEY` を設定してください。
+
+MCP を実装する場合は、あわせて `MCP_TOKEN_SECRET` も必要です。
+
+`AI_AGENT_API_KEY` と `MCP_TOKEN_SECRET` は AI チームから共有された値を使用してください。
+
+```env
+AI_AGENT_API_KEY=your-api-key
+MCP_TOKEN_SECRET=your-mcp-token-secret
+```
+
+開発環境やプレビュー環境など、本番以外の AI Agent に接続したい場合のみ、接続先 URL を設定します。
+
+開発用のエンドポイントは以下です。
+
+```env
+NEXT_PUBLIC_CHATBOT_URL=https://dev-agent.ec-force.com
+AI_AGENT_API_ENDPOINT=https://dev-agent.ec-force.com
+```
+
+- `NEXT_PUBLIC_CHATBOT_URL`: フロントエンドの `ChatbotSheet` / `ChatbotFrame` を dev / preview 環境へ向けたい場合に使います
+- `AI_AGENT_API_ENDPOINT`: サーバー側の `createClient()` を dev / preview 環境へ向けたい場合に使います
+- `AI_AGENT_API_KEY`: サーバー SDK から API を呼ぶために必須です
+- `MCP_TOKEN_SECRET`: MCP トークンの署名・検証に使います。MCP を実装する場合に必須です
+
+## 3. `@super_studio/ecforce-ai-agent-react` のセットアップ
+
+### 3-1. スタイルを読み込む
+
+グローバル CSS で、パッケージが提供するスタイルを読み込みます。
+
+```css
+@import "@super_studio/ecforce-ai-agent-react/preset.css";
+@import "@super_studio/ecforce-ai-agent-react/chatbot-sheet.css";
+```
+
+### 3-2. アプリを `ChatbotProvider` でラップする
+
+チャット UI や `useChatbot()` を使う場合は、アプリ全体または必要な範囲を `ChatbotProvider` で囲みます。
+
+```tsx
+"use client";
+
+import { ChatbotProvider } from "@super_studio/ecforce-ai-agent-react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export function AppProviders({ children }: Props) {
+  return <ChatbotProvider>{children}</ChatbotProvider>;
+}
+```
+
+### 3-3. チャット UI を表示する
+
+`ChatbotSheet` にアプリ名、セッション取得関数を渡します。通常は本番環境へ接続されるため、URL 指定は不要です。
+
+```tsx
+"use client";
+
+import { ChatbotSheet } from "@super_studio/ecforce-ai-agent-react";
+
+export function Chatbot() {
+  return (
+    <ChatbotSheet
+      appName="your-app-name"
+      getSession={async () => {
+        const res = await fetch("/api/agent/session", {
+          method: "POST",
+        });
+
+        if (!res.ok) {
+          throw new Error("Failed to create AI agent session");
+        }
+
+        return (await res.json()) as {
+          token: string;
+          expiresAt: string;
+        };
+      }}
+    />
+  );
+}
+```
+
+#### 各 props の役割
+
+- `url`: AI Agent サーバーのベース URL。dev / preview 環境に向けたい場合のみ指定します
+- `appName`: 呼び出し元アプリを識別する名前
+- `getSession`: AI Agent に接続するためのセッショントークンを返す関数
+
+dev / preview 環境へ接続する場合のみ、以下のように `url` を指定してください。
+
+```tsx
+<ChatbotSheet
+  url={process.env.NEXT_PUBLIC_CHATBOT_URL}
+  appName="your-app-name"
+  getSession={...}
+/>
+```
+
+### 3-4. アプリ側の状態や文脈を AI Agent に渡す
+
+`useChatbot()` の `sendAppMessage()` を使うと、ホストアプリから AI Agent に対してプログラム経由でメッセージを送れます。
+
+典型的には、以下のような場面で使います。
+
+- 現在表示中の商品、注文、顧客などを前提に AI へ依頼したい
+- ユーザーが押したボタンに応じて、定型プロンプトをそのまま送信したい
+- 画面には見せたくない補足情報を AI にだけ渡したい
+- 画像やファイル URL を添付して、その内容を前提に会話を始めたい
+
+`sendAppMessage()` を呼ぶと、チャットが閉じていても自動で開きます。チャット iframe の初期化がまだ終わっていない場合でも、メッセージは内部で一時保持され、準備完了後に送信されます。
+
+```tsx
+"use client";
+
+import { useChatbot } from "@super_studio/ecforce-ai-agent-react";
+
+export function SendContextButton() {
+  const { sendAppMessage } = useChatbot();
+
+  return (
+    <button
+      onClick={() => {
+        sendAppMessage({
+          title: "売上ダッシュボードの要約",
+          message:
+            "現在の売上ダッシュボードを前提に、注目すべき変化を3つ挙げてください。",
+          hiddenMessage:
+            "dashboardId=dashboard_123, dashboardName=売上ダッシュボード",
+        });
+      }}
+    >
+      コンテキストを送信
+    </button>
+  );
+}
+```
+
+#### `sendAppMessage()` の payload
+
+```ts
+type SendAppMessagePayload = {
+  title?: string;
+  message: string;
+  hiddenMessage?: string;
+  startOnNewChat?: boolean;
+  attachments?: {
+    fileName: string;
+    mediaType: string;
+    url: string;
+  }[];
+};
+```
+
+- `message`: AI Agent に実際に依頼したい本文です。必須です
+- `title`: 依頼の要約タイトルです。UI 上でタスク名のように扱いたいときに使います
+- `hiddenMessage`: ユーザーに見せなくてよい補足文脈です。内部 ID、画面状態、回答方針などを渡す用途に向いています
+- `startOnNewChat`: `true` なら新しいチャットを開始して送信します。省略時は `true` です。現在の会話の続きに送りたい場合だけ `false` を指定します
+- `attachments`: AI Agent に参照させたい添付ファイルです。公開 URL で取得できるファイルを渡してください
+
+#### visible な依頼と hidden な文脈の使い分け
+
+基本的には、ユーザーが見ても自然な内容を `message` に書き、アプリ内部の補足情報を `hiddenMessage` に分けるのがおすすめです。
+
+- `message`: 「この注文の要点を要約して」
+- `hiddenMessage`: `orderId=ord_123`, `status=paid`, `customerTier=gold`
+
+このように分けると、ユーザー向けの依頼文を保ちながら、AI 側には必要な文脈も渡せます。
+
+#### 新しいチャットで送るか、現在の会話に続けるか
+
+新しい依頼を独立した会話として扱いたい場合は、デフォルトのまま `startOnNewChat: true` を使います。すでに進行中の会話に追加指示したい場合は `false` を指定します。
+
+```tsx
+sendAppMessage({
+  title: "続きの依頼",
+  message: "最も良い案を、2行のヒーローコピーに言い換えてください。",
+  startOnNewChat: false,
+});
+```
+
+#### 添付ファイルを渡す例
+
+```tsx
+sendAppMessage({
+  title: "バナー案のレビュー",
+  message: "添付画像を確認し、改善案を3つ提案してください。",
+  attachments: [
+    {
+      fileName: "campaign-banner.png",
+      mediaType: "image/png",
+      url: "https://example.com/campaign-banner.png",
+    },
+  ],
+});
+```
+
+これにより、AI Agent 側で現在の画面や対象データに応じた応答をしやすくなります。
+
+## 4. `@super_studio/ecforce-ai-agent-server` のセットアップ
+
+### 4-1. サーバー側で AI Agent セッションを発行する
+
+フロントエンドの `getSession()` から呼ばれる API を用意し、`createClient()` を使って AI Agent サーバーへセッション作成を依頼します。
+
+このとき、サーバー環境に `AI_AGENT_API_KEY` の設定が必要です。
+
+以下は Next.js App Router の Route Handler 例です。
+
+```ts
+import { NextResponse } from "next/server";
+import { createClient } from "@super_studio/ecforce-ai-agent-server";
+
+const aiClient = createClient();
+
+export async function POST() {
+  // ここは自分の認証基盤に置き換えてください
+  const currentUser = {
+    email: "user@example.com",
+    projectId: "project_123",
+  };
+
+  const session = await aiClient.internalChat.createSession({
+    email: currentUser.email,
+    projectId: currentUser.projectId,
+  });
+
+  return NextResponse.json(session);
+}
+```
+
+dev / preview 環境へ接続する場合は、`AI_AGENT_API_ENDPOINT` を設定するか、`createClient({ baseUrl: "..." })` を使って接続先を上書きしてください。
+
+`getSession()` には、この API が返す以下の形式の値をそのまま返せば動作します。
+
+```ts
+type AgentSession = {
+  token: string;
+  expiresAt: string;
+};
+```
+
+### 4-2. MCP エンドポイントでトークンを検証する
+
+アプリ固有のツールを AI Agent に公開する場合は、MCP エンドポイント側で受け取ったトークンを検証します。
+
+このとき、サーバー環境に `MCP_TOKEN_SECRET` の設定が必要です。
+
+`@super_studio/ecforce-ai-agent-server/mcp-auth` には、MCP トークンを扱うためのユーティリティが含まれています。
+
+```ts
+import { getMcpToken } from "@super_studio/ecforce-ai-agent-server/mcp-auth";
+
+export async function GET(req: Request) {
+  const mcpToken = getMcpToken(req);
+
+  if (!mcpToken) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  return new Response("ok");
+}
+```
+
+トークンの中身を利用したい場合は `decodeMCPToken()` を使います。
+
+```ts
+import { decodeMCPToken } from "@super_studio/ecforce-ai-agent-server/mcp-auth";
+
+export async function GET(req: Request) {
+  const authHeader = req.headers.get("authorization");
+  const token = authHeader?.replace(/^Bearer\s+/i, "");
+
+  if (!token) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const payload = await decodeMCPToken(token);
+
+  return Response.json({
+    source: payload.source,
+    user: payload.user,
+  });
+}
+```

package/dist/components/ai-icon.mjs

@@ -0,0 +1,20 @@
+import { PROD_CHATBOT_URL } from "../lib/constants.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ai-icon.tsx
+const AI_ICON_GIF_URL = new URL("/images/ai-icon.gif", PROD_CHATBOT_URL).toString();
+function AiIcon({ width = 24, height = 24 }) {
+	return /* @__PURE__ */ jsx("img", {
+		src: AI_ICON_GIF_URL,
+		width,
+		height,
+		alt: "",
+		"aria-hidden": "true",
+		draggable: false,
+		style: { display: "block" }
+	});
+}
+
+//#endregion
+export { AiIcon };
+//# sourceMappingURL=ai-icon.mjs.map

package/dist/components/ai-icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-icon.mjs","names":[],"sources":["../../src/components/ai-icon.tsx"],"sourcesContent":["import { PROD_CHATBOT_URL } from \"../lib/constants\";\n\ntype AiIconProps = {\n  width?: number;\n  height?: number;\n};\n\nconst AI_ICON_GIF_URL = new URL(\n  \"/images/ai-icon.gif\",\n  PROD_CHATBOT_URL,\n).toString();\n\nexport function AiIcon({ width = 24, height = 24 }: AiIconProps) {\n  return (\n    <img\n      src={AI_ICON_GIF_URL}\n      width={width}\n      height={height}\n      alt=\"\"\n      aria-hidden=\"true\"\n      draggable={false}\n      style={{ display: \"block\" }}\n    />\n  );\n}\n"],"mappings":";;;;AAOA,MAAM,kBAAkB,IAAI,IAC1B,uBACA,iBACD,CAAC,UAAU;AAEZ,SAAgB,OAAO,EAAE,QAAQ,IAAI,SAAS,MAAmB;AAC/D,QACE,oBAAC;EACC,KAAK;EACE;EACC;EACR,KAAI;EACJ,eAAY;EACZ,WAAW;EACX,OAAO,EAAE,SAAS,SAAS;GAC3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"chatbot-sheet.d.mts","names":[],"sources":["../../src/components/chatbot-sheet.tsx"],"sourcesContent":[],"mappings":";;;;;KAeK,iBAAA,GAAoB;eACV,KAAA,CAAM;;AADhB,iBAIW,YAAA,CAJS;EAAA,UAAA;EAAA,GAAA;AACS,CAAb,EAGkC,iBAHrB,CAAA,EAGsC,kBAAA,CAAA,GAAA,CAAA,OAHtC"}
+{"version":3,"file":"chatbot-sheet.d.mts","names":[],"sources":["../../src/components/chatbot-sheet.tsx"],"sourcesContent":[],"mappings":";;;;;KAcK,iBAAA,GAAoB;eACV,KAAA,CAAM;;AADhB,iBAIW,YAAA,CAJS;EAAA,UAAA;EAAA,GAAA;AACS,CAAb,EAGkC,iBAHrB,CAAA,EAGsC,kBAAA,CAAA,GAAA,CAAA,OAHtC"}

package/dist/components/chatbot-sheet.mjs

@@ -1,9 +1,8 @@
 "use client";
 
 import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.103.0/helpers/objectSpread2.mjs";
-import { PROD_CHATBOT_URL } from "../lib/constants.mjs";
 import { ChatbotFrame } from "./chatbot-frame.mjs";
-import { LottieAiIcon } from "./lottie-ai-icon.mjs";
+import { AiIcon } from "./ai-icon.mjs";
 import { _objectWithoutProperties } from "../_virtual/_@oxc-project_runtime@0.103.0/helpers/objectWithoutProperties.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "./sheet.mjs";
 import { Tooltip } from "./tooltip.mjs";
@@ -18,12 +17,9 @@ function ChatbotSheet(_ref) {
 		side: "top",
 		align: "end",
 		content: "AIに質問してみましょう",
-		trigger: /* @__PURE__ */ jsx(SheetTrigger, { children: /* @__PURE__ */ jsx(LottieAiIcon, {
-			src: `${PROD_CHATBOT_URL}/animations/ai-icon.v1.lottie`,
+		trigger: /* @__PURE__ */ jsx(SheetTrigger, { children: /* @__PURE__ */ jsx(AiIcon, {
 			width: 24,
-			height: 24,
-			autoplay: true,
-			loop: true
+			height: 24
 		}) })
 	}), /* @__PURE__ */ jsxs(SheetContent, {
 		style: sheetStyle,

package/dist/components/chatbot-sheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"chatbot-sheet.mjs","names":[],"sources":["../../src/components/chatbot-sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { PROD_CHATBOT_URL } from \"@/lib/constants\";\nimport { ChatbotFrame, type ChatbotFrameProps } from \"./chatbot-frame\";\nimport { LottieAiIcon } from \"./lottie-ai-icon\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetTitle,\n  SheetTrigger,\n} from \"./sheet\";\nimport { Tooltip } from \"./tooltip\";\n\ntype ChatbotSheetProps = ChatbotFrameProps & {\n  sheetStyle?: React.CSSProperties;\n};\n\nexport function ChatbotSheet({ sheetStyle, ...props }: ChatbotSheetProps) {\n  return (\n    <Sheet>\n      <Tooltip\n        side=\"top\"\n        align=\"end\"\n        content=\"AIに質問してみましょう\"\n        trigger={\n          <SheetTrigger>\n            <LottieAiIcon\n              src={`${PROD_CHATBOT_URL}/animations/ai-icon.v1.lottie`}\n              width={24}\n              height={24}\n              autoplay\n              loop\n            />\n          </SheetTrigger>\n        }\n      />\n      <SheetContent style={sheetStyle}>\n        <SheetTitle>AIに質問してみましょう</SheetTitle>\n        <SheetDescription>AIに質問してみましょう</SheetDescription>\n        <ChatbotFrame {...props} />\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;mBAmB+B;AAA/B,SAAgB,aAAa,MAA6C;KAA7C,EAAE,qBAAe;AAC5C,QACE,qBAAC,oBACC,oBAAC;EACC,MAAK;EACL,OAAM;EACN,SAAQ;EACR,SACE,oBAAC,0BACC,oBAAC;GACC,KAAK,GAAG,iBAAiB;GACzB,OAAO;GACP,QAAQ;GACR;GACA;IACA,GACW;GAEjB,EACF,qBAAC;EAAa,OAAO;;GACnB,oBAAC,wBAAW,iBAAyB;GACrC,oBAAC,8BAAiB,iBAA+B;GACjD,oBAAC,iCAAiB,OAAS;;GACd,IACT"}
+{"version":3,"file":"chatbot-sheet.mjs","names":[],"sources":["../../src/components/chatbot-sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { AiIcon } from \"./ai-icon\";\nimport { ChatbotFrame, type ChatbotFrameProps } from \"./chatbot-frame\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetTitle,\n  SheetTrigger,\n} from \"./sheet\";\nimport { Tooltip } from \"./tooltip\";\n\ntype ChatbotSheetProps = ChatbotFrameProps & {\n  sheetStyle?: React.CSSProperties;\n};\n\nexport function ChatbotSheet({ sheetStyle, ...props }: ChatbotSheetProps) {\n  return (\n    <Sheet>\n      <Tooltip\n        side=\"top\"\n        align=\"end\"\n        content=\"AIに質問してみましょう\"\n        trigger={\n          <SheetTrigger>\n            <AiIcon width={24} height={24} />\n          </SheetTrigger>\n        }\n      />\n      <SheetContent style={sheetStyle}>\n        <SheetTitle>AIに質問してみましょう</SheetTitle>\n        <SheetDescription>AIに質問してみましょう</SheetDescription>\n        <ChatbotFrame {...props} />\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":";;;;;;;;;;;;mBAkB+B;AAA/B,SAAgB,aAAa,MAA6C;KAA7C,EAAE,qBAAe;AAC5C,QACE,qBAAC,oBACC,oBAAC;EACC,MAAK;EACL,OAAM;EACN,SAAQ;EACR,SACE,oBAAC,0BACC,oBAAC;GAAO,OAAO;GAAI,QAAQ;IAAM,GACpB;GAEjB,EACF,qBAAC;EAAa,OAAO;;GACnB,oBAAC,wBAAW,iBAAyB;GACrC,oBAAC,8BAAiB,iBAA+B;GACjD,oBAAC,iCAAiB,OAAS;;GACd,IACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@super_studio/ecforce-ai-agent-react",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/components/ai-icon.tsx

@@ -0,0 +1,25 @@
+import { PROD_CHATBOT_URL } from "../lib/constants";
+
+type AiIconProps = {
+  width?: number;
+  height?: number;
+};
+
+const AI_ICON_GIF_URL = new URL(
+  "/images/ai-icon.gif",
+  PROD_CHATBOT_URL,
+).toString();
+
+export function AiIcon({ width = 24, height = 24 }: AiIconProps) {
+  return (
+    <img
+      src={AI_ICON_GIF_URL}
+      width={width}
+      height={height}
+      alt=""
+      aria-hidden="true"
+      draggable={false}
+      style={{ display: "block" }}
+    />
+  );
+}

package/src/components/chatbot-sheet.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import React from "react";
-import { PROD_CHATBOT_URL } from "@/lib/constants";
+import { AiIcon } from "./ai-icon";
 import { ChatbotFrame, type ChatbotFrameProps } from "./chatbot-frame";
-import { LottieAiIcon } from "./lottie-ai-icon";
 import {
   Sheet,
   SheetContent,
@@ -26,13 +25,7 @@ export function ChatbotSheet({ sheetStyle, ...props }: ChatbotSheetProps) {
         content="AIに質問してみましょう"
         trigger={
           <SheetTrigger>
-            <LottieAiIcon
-              src={`${PROD_CHATBOT_URL}/animations/ai-icon.v1.lottie`}
-              width={24}
-              height={24}
-              autoplay
-              loop
-            />
+            <AiIcon width={24} height={24} />
           </SheetTrigger>
         }
       />

package/dist/components/lottie-ai-icon.mjs

@@ -1,58 +0,0 @@
-"use client";
-
-import * as React$1 from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/lottie-ai-icon.tsx
-function LottieAiIcon({ src, width = 18, height = 18, loop = true, autoplay = false, fallback }) {
-	const containerRef = React$1.useRef(null);
-	const [ready, setReady] = React$1.useState(false);
-	React$1.useEffect(() => {
-		if (typeof window === "undefined") return;
-		if (!document.querySelector("script[data-dotlottie-wc]")) {
-			const scriptEl = document.createElement("script");
-			scriptEl.type = "module";
-			scriptEl.async = true;
-			scriptEl.src = "https://unpkg.com/@lottiefiles/dotlottie-wc@0.9.8/dist/dotlottie-wc.js";
-			scriptEl.setAttribute("data-dotlottie-wc", "true");
-			scriptEl.onload = () => setReady(true);
-			scriptEl.onerror = () => setReady(false);
-			document.head.appendChild(scriptEl);
-		} else setReady(true);
-	}, []);
-	React$1.useEffect(() => {
-		if (!ready || !containerRef.current) return;
-		const container = containerRef.current;
-		container.innerHTML = "";
-		const player = document.createElement("dotlottie-wc");
-		player.setAttribute("src", src);
-		player.setAttribute("style", `width:${width}px;height:${height}px`);
-		if (loop) player.setAttribute("loop", "");
-		if (autoplay) player.setAttribute("autoplay", "");
-		container.appendChild(player);
-		return () => {
-			container.innerHTML = "";
-		};
-	}, [
-		ready,
-		src,
-		width,
-		height,
-		loop,
-		autoplay
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: containerRef,
-		"aria-hidden": "true",
-		children: !ready && (fallback !== null && fallback !== void 0 ? fallback : /* @__PURE__ */ jsx("svg", {
-			width,
-			height,
-			viewBox: "0 0 24 24",
-			fill: "currentColor"
-		}))
-	});
-}
-
-//#endregion
-export { LottieAiIcon };
-//# sourceMappingURL=lottie-ai-icon.mjs.map

package/dist/components/lottie-ai-icon.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"lottie-ai-icon.mjs","names":["React"],"sources":["../../src/components/lottie-ai-icon.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\ntype LottieAiIconProps = {\n  src: string;\n  width?: number;\n  height?: number;\n  loop?: boolean;\n  autoplay?: boolean;\n  fallback?: React.ReactNode;\n};\n\nexport function LottieAiIcon({\n  src,\n  width = 18,\n  height = 18,\n  loop = true,\n  autoplay = false,\n  fallback,\n}: LottieAiIconProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const [ready, setReady] = React.useState(false);\n\n  React.useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const existing = document.querySelector(\"script[data-dotlottie-wc]\");\n    if (!existing) {\n      const scriptEl = document.createElement(\"script\");\n      scriptEl.type = \"module\";\n      scriptEl.async = true;\n      scriptEl.src =\n        \"https://unpkg.com/@lottiefiles/dotlottie-wc@0.9.8/dist/dotlottie-wc.js\";\n      scriptEl.setAttribute(\"data-dotlottie-wc\", \"true\");\n      scriptEl.onload = () => setReady(true);\n      scriptEl.onerror = () => setReady(false);\n      document.head.appendChild(scriptEl);\n    } else {\n      setReady(true);\n    }\n  }, []);\n\n  React.useEffect(() => {\n    if (!ready || !containerRef.current) return;\n    const container = containerRef.current;\n    container.innerHTML = \"\";\n    const player = document.createElement(\"dotlottie-wc\");\n    player.setAttribute(\"src\", src);\n    player.setAttribute(\"style\", `width:${width}px;height:${height}px`);\n    if (loop) player.setAttribute(\"loop\", \"\");\n    if (autoplay) player.setAttribute(\"autoplay\", \"\");\n    container.appendChild(player);\n    return () => {\n      container.innerHTML = \"\";\n    };\n  }, [ready, src, width, height, loop, autoplay]);\n\n  return (\n    <div ref={containerRef} aria-hidden=\"true\">\n      {!ready &&\n        (fallback ?? (\n          <svg\n            width={width}\n            height={height}\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n          />\n        ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAaA,SAAgB,aAAa,EAC3B,KACA,QAAQ,IACR,SAAS,IACT,OAAO,MACP,WAAW,OACX,YACoB;CACpB,MAAM,eAAeA,QAAM,OAAuB,KAAK;CACvD,MAAM,CAAC,OAAO,YAAYA,QAAM,SAAS,MAAM;AAE/C,SAAM,gBAAgB;AACpB,MAAI,OAAO,WAAW,YAAa;AAGnC,MAAI,CADa,SAAS,cAAc,4BAA4B,EACrD;GACb,MAAM,WAAW,SAAS,cAAc,SAAS;AACjD,YAAS,OAAO;AAChB,YAAS,QAAQ;AACjB,YAAS,MACP;AACF,YAAS,aAAa,qBAAqB,OAAO;AAClD,YAAS,eAAe,SAAS,KAAK;AACtC,YAAS,gBAAgB,SAAS,MAAM;AACxC,YAAS,KAAK,YAAY,SAAS;QAEnC,UAAS,KAAK;IAEf,EAAE,CAAC;AAEN,SAAM,gBAAgB;AACpB,MAAI,CAAC,SAAS,CAAC,aAAa,QAAS;EACrC,MAAM,YAAY,aAAa;AAC/B,YAAU,YAAY;EACtB,MAAM,SAAS,SAAS,cAAc,eAAe;AACrD,SAAO,aAAa,OAAO,IAAI;AAC/B,SAAO,aAAa,SAAS,SAAS,MAAM,YAAY,OAAO,IAAI;AACnE,MAAI,KAAM,QAAO,aAAa,QAAQ,GAAG;AACzC,MAAI,SAAU,QAAO,aAAa,YAAY,GAAG;AACjD,YAAU,YAAY,OAAO;AAC7B,eAAa;AACX,aAAU,YAAY;;IAEvB;EAAC;EAAO;EAAK;EAAO;EAAQ;EAAM;EAAS,CAAC;AAE/C,QACE,oBAAC;EAAI,KAAK;EAAc,eAAY;YACjC,CAAC,UACC,sDACC,oBAAC;GACQ;GACC;GACR,SAAQ;GACR,MAAK;IACL;GAEF"}

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

@@ -1,72 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-type LottieAiIconProps = {
-  src: string;
-  width?: number;
-  height?: number;
-  loop?: boolean;
-  autoplay?: boolean;
-  fallback?: React.ReactNode;
-};
-
-export function LottieAiIcon({
-  src,
-  width = 18,
-  height = 18,
-  loop = true,
-  autoplay = 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-wc]");
-    if (!existing) {
-      const scriptEl = document.createElement("script");
-      scriptEl.type = "module";
-      scriptEl.async = true;
-      scriptEl.src =
-        "https://unpkg.com/@lottiefiles/dotlottie-wc@0.9.8/dist/dotlottie-wc.js";
-      scriptEl.setAttribute("data-dotlottie-wc", "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-wc");
-    player.setAttribute("src", src);
-    player.setAttribute("style", `width:${width}px;height:${height}px`);
-    if (loop) player.setAttribute("loop", "");
-    if (autoplay) player.setAttribute("autoplay", "");
-    container.appendChild(player);
-    return () => {
-      container.innerHTML = "";
-    };
-  }, [ready, src, width, height, loop, autoplay]);
-
-  return (
-    <div ref={containerRef} aria-hidden="true">
-      {!ready &&
-        (fallback ?? (
-          <svg
-            width={width}
-            height={height}
-            viewBox="0 0 24 24"
-            fill="currentColor"
-          />
-        ))}
-    </div>
-  );
-}