@vnl-works/agentjoy-react

AgentJoy の「待ち時間が楽しくなる」埋め込みWidget（React）です。

- Run のイベントを SSE で購読し、実況UIを表示します
- 共有リンク（share token）がある場合は Copy ボタンを表示できます
- CSS は アプリ側で import する設計です（ビルド時の PostCSS/Tailwind 事故を避けるため）

---

Install

``bash
npm i @vnl-works/agentjoy-react


or pnpm add @vnl-works/agentjoy-react

or yarn add @vnl-works/agentjoy-react

`

---

Minimal usage

`tsx
import React from "react";
import { AgentJoyRun } from "@vnl-works/agentjoy-react";
import "@vnl-works/agentjoy-react/styles.css";

export function MyRunViewer() {
return (
apiBaseUrl="http://127.0.0.1:8000"
runId="run_..."
token="pub_..." // publish token or share token
sound={true}
/>
);
}
`

---

Props（よく使うもの）

- apiBaseUrl?: string
Backend の URL（同一オリジンなら省略可）
- runId: string / token: string
公開閲覧用の識別子
- sound?: boolean / mute?: boolean
音の有無（イベントに合わせて軽い通知音）
- height?: number | string
イベント一覧の最大高さ（例: 420, "60vh"）
- autoScroll?: boolean（default: true）
最新イベントへの追従（ユーザーがスクロールで上に行くと自動停止）
- maxEvents?: number（default: 5000）
メモリ肥大防止のための保持上限
- compact?: boolean
省スペース表示
- shareUrl?: string
Copy ボタンに使うリンクを明示（指定が無い場合は run.share_token があれば自動生成）
- onEvent?: (ev) => void
ホストアプリ側でイベントを拾う（ログ保存や分析など）

---

Styling（CSS variables）

styles.css は CSS 変数でテーマ調整できます。

例（アプリ側のCSS）:

`css
:root {
--aj-accent: #2563eb;
--aj-bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--aj-bg: #0b1220;
}
}
``

---