@vnl-works/agentjoy-react

@vnl-works/agentjoy-react

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

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

Install

npm i @vnl-works/agentjoy-react
# or pnpm add @vnl-works/agentjoy-react
# or yarn add @vnl-works/agentjoy-react

Minimal usage

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

export function MyRunViewer() {
  return (
    <AgentJoyRun
      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）:

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