@vnl-works/agentjoy-react 0.1.2 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +59 -18
  2. package/dist/index.d.mts +34 -49
  3. package/dist/index.d.ts +34 -49
  4. package/dist/index.js +699 -244
  5. package/dist/index.mjs +700 -245
  6. package/dist/styles.css +354 -82
  7. package/package.json +1 -1
  8. package/dist/index.css +0 -171
package/README.md CHANGED
@@ -1,42 +1,83 @@
1
1
  # @vnl-works/agentjoy-react
2
2
 
3
- AgentJoy の「待ち時間が楽しくなる」埋め込みWidget（React）です。
4
- FastAPI backend（`backend/`）と組み合わせると、Runの進行をライブ表示できます。
3
+ AgentJoy の「待ち時間が楽しくなる」埋め込みWidget（React）です。
5
4
 
6
- ## インストール（例）
5
+ - Run のイベントを SSE で購読し、実況UIを表示します
6
+ - 共有リンク（share token）がある場合は Copy ボタンを表示できます
7
+ - CSS は **アプリ側で import** する設計です（ビルド時の PostCSS/Tailwind 事故を避けるため）
8
+
9
+ ---
10
+
11
+ ## Install
7
12
 
8
13
  ```bash
9
14
  npm i @vnl-works/agentjoy-react
10
15
  # or pnpm add @vnl-works/agentjoy-react
16
+ # or yarn add @vnl-works/agentjoy-react
11
17
  ```
12
18
 
13
- ## 使い方
19
+ ---
20
+
21
+ ## Minimal usage
14
22
 
15
23
  ```tsx
16
24
  import React from "react";
17
25
  import { AgentJoyRun } from "@vnl-works/agentjoy-react";
18
26
  import "@vnl-works/agentjoy-react/styles.css";
19
27
 
20
- export function MyPage() {
28
+ export function MyRunViewer() {
21
29
  return (
22
30
  <AgentJoyRun
23
- runId="run_..."
24
- token="pub_..." // publish token か share token
25
31
  apiBaseUrl="http://127.0.0.1:8000"
32
+ runId="run_..."
33
+ token="pub_..." // publish token or share token
26
34
  sound={true}
27
35
  />
28
36
  );
29
37
  }
30
38
  ```
31
39
 
32
- ## Props（抜粋）
33
- - `runId` / `token`: 必須
34
- - `apiBaseUrl`: バックエンドのURL（同一オリジンなら省略可）
35
- - `sound`: 進捗に合わせた簡易SE（デフォルトfalse）
36
- - `mute`: 強制ミュート（brandのmute_defaultより優先）
37
- - `showPersona`: `system.comment` を表示（人格パック）
38
- - `showXp`: XP/レベル表示
39
-
40
- ## イベント仕様
41
- backend は `POST /v1/runs/{runId}/events` へ AgentJoy event schema を受け取ります。
42
- OpenAPI は backend の `/docs` を参照してください。
40
+ ---
41
+
42
+ ## Props（よく使うもの）
43
+
44
+ - `apiBaseUrl?: string`
45
+ Backend の URL（同一オリジンなら省略可）
46
+ - `runId: string` / `token: string`
47
+ 公開閲覧用の識別子
48
+ - `sound?: boolean` / `mute?: boolean`
49
+ 音の有無（イベントに合わせて軽い通知音）
50
+ - `height?: number | string`
51
+ イベント一覧の最大高さ（例: `420`, `"60vh"`）
52
+ - `autoScroll?: boolean`（default: true）
53
+ 最新イベントへの追従（ユーザーがスクロールで上に行くと自動停止）
54
+ - `maxEvents?: number`（default: 5000）
55
+ メモリ肥大防止のための保持上限
56
+ - `compact?: boolean`
57
+ 省スペース表示
58
+ - `shareUrl?: string`
59
+ Copy ボタンに使うリンクを明示（指定が無い場合は `run.share_token` があれば自動生成）
60
+ - `onEvent?: (ev) => void`
61
+ ホストアプリ側でイベントを拾う（ログ保存や分析など）
62
+
63
+ ---
64
+
65
+ ## Styling（CSS variables）
66
+
67
+ `styles.css` は CSS 変数でテーマ調整できます。
68
+
69
+ 例（アプリ側のCSS）:
70
+
71
+ ```css
72
+ :root {
73
+ --aj-accent: #2563eb;
74
+ --aj-bg: #ffffff;
75
+ }
76
+ @media (prefers-color-scheme: dark) {
77
+ :root {
78
+ --aj-bg: #0b1220;
79
+ }
80
+ }
81
+ ```
82
+
83
+ ---
package/dist/index.d.mts CHANGED
@@ -2,15 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
 
3
3
  type AgentJoyPhase = "prepare" | "research" | "execute" | "format" | "verify" | "finalize";
4
4
  type AgentJoyEventType = "run.created" | "phase.started" | "phase.progress" | "tool.called" | "tool.completed" | "artifact.ready" | "warning" | "error" | "run.completed" | "run.failed" | "system.comment";
5
- type WorkspaceBrand = {
6
- product_name: string;
7
- logo_url?: string | null;
8
- primary_color: string;
9
- tone: "polite" | "formal" | "casual";
10
- mute_default: boolean;
11
- show_xp: boolean;
12
- show_persona: boolean;
13
- };
14
5
  type ToolInfo = {
15
6
  name: string;
16
7
  input_summary?: string;
@@ -38,53 +29,47 @@ type AgentJoyEvent = {
38
29
  meta?: Record<string, unknown> | null;
39
30
  tags?: string[] | null;
40
31
  };
41
- type RunPublic = {
42
- id: string;
43
- workspace_id: string;
44
- status: "running" | "completed" | "failed";
45
- created_at: string;
46
- started_at?: string | null;
47
- ended_at?: string | null;
48
- last_event_at?: string | null;
49
- title?: string | null;
50
- external_user_id?: string | null;
51
- mode: "professional" | "playful";
52
- pack: string;
53
- share_token?: string | null;
54
- share_expires_at?: string | null;
55
- metadata?: Record<string, unknown> | null;
56
- };
57
- type RunDetailResponse = {
58
- run: RunPublic;
59
- events: AgentJoyEvent[];
60
- workspace_brand: WorkspaceBrand;
61
- };
62
32
 
33
+ type EventFilter = "all" | "important" | "tools" | "artifacts";
63
34
  type AgentJoyRunProps = {
64
- runId: string;
65
- /** publish token (server side) or share token (viewer) */
66
- token: string;
67
- /** default: "" (same origin) */
68
35
  apiBaseUrl?: string;
69
- /** default: "ja" */
36
+ /**
37
+ * Live mode parameters (required unless `demo` is true).
38
+ * These are optional so users can try the widget in 3 minutes with `<AgentJoyRun demo />`.
39
+ */
40
+ runId?: string;
41
+ token?: string;
42
+ /** 3-minute onboarding: no backend required. */
43
+ demo?: boolean;
44
+ demoSpeedMs?: number;
45
+ /** Language for relative time + some labels. */
70
46
  locale?: "ja" | "en";
71
- /** number of events rendered (default 200) */
72
- limit?: number;
73
- /** sound effects (default false) */
47
+ /** Optional UI preferences */
74
48
  sound?: boolean;
75
- /** force mute state (overrides brand mute_default). if omitted, uses brand default */
76
49
  mute?: boolean;
77
- /** override brand (optional) */
78
- brandOverride?: Partial<WorkspaceBrand>;
79
- /** show XP/level (default: brand.show_xp) */
80
- showXp?: boolean;
81
- /** show persona comment events (default: brand.show_persona) */
82
50
  showPersona?: boolean;
83
- /** called when run status becomes completed */
84
- onComplete?: (run: RunPublic) => void;
85
- /** called when run status becomes failed */
86
- onError?: (run: RunPublic) => void;
51
+ showXp?: boolean;
52
+ /** Layout */
53
+ height?: number | string;
54
+ compact?: boolean;
55
+ showHeader?: boolean;
56
+ showControls?: boolean;
57
+ showToolbar?: boolean;
58
+ /** Behavior */
59
+ autoScroll?: boolean;
60
+ maxEvents?: number;
61
+ /** Event list UX */
62
+ defaultFilter?: EventFilter;
63
+ /** Polling to keep eventual consistency even if SSE drops (ms). Set 0 to disable. */
64
+ pollIntervalMs?: number;
65
+ /** Optional: expose events to host app */
66
+ onEvent?: (ev: AgentJoyEvent) => void;
67
+ /** Optional: explicit share URL (if you want a stable link button) */
68
+ shareUrl?: string;
69
+ /** Backward-compat (currently unused) */
70
+ mode?: "professional" | "playful";
71
+ pack?: string;
87
72
  };
88
73
  declare function AgentJoyRun(props: AgentJoyRunProps): react_jsx_runtime.JSX.Element;
89
74
 
90
- export { type AgentJoyEvent, type AgentJoyEventType, type AgentJoyPhase, AgentJoyRun, type AgentJoyRunProps, type Artifact, type RunDetailResponse, type RunPublic, type ToolInfo, type WorkspaceBrand };
75
+ export { AgentJoyRun, type AgentJoyRunProps };
package/dist/index.d.ts CHANGED
@@ -2,15 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
 
3
3
  type AgentJoyPhase = "prepare" | "research" | "execute" | "format" | "verify" | "finalize";
4
4
  type AgentJoyEventType = "run.created" | "phase.started" | "phase.progress" | "tool.called" | "tool.completed" | "artifact.ready" | "warning" | "error" | "run.completed" | "run.failed" | "system.comment";
5
- type WorkspaceBrand = {
6
- product_name: string;
7
- logo_url?: string | null;
8
- primary_color: string;
9
- tone: "polite" | "formal" | "casual";
10
- mute_default: boolean;
11
- show_xp: boolean;
12
- show_persona: boolean;
13
- };
14
5
  type ToolInfo = {
15
6
  name: string;
16
7
  input_summary?: string;
@@ -38,53 +29,47 @@ type AgentJoyEvent = {
38
29
  meta?: Record<string, unknown> | null;
39
30
  tags?: string[] | null;
40
31
  };
41
- type RunPublic = {
42
- id: string;
43
- workspace_id: string;
44
- status: "running" | "completed" | "failed";
45
- created_at: string;
46
- started_at?: string | null;
47
- ended_at?: string | null;
48
- last_event_at?: string | null;
49
- title?: string | null;
50
- external_user_id?: string | null;
51
- mode: "professional" | "playful";
52
- pack: string;
53
- share_token?: string | null;
54
- share_expires_at?: string | null;
55
- metadata?: Record<string, unknown> | null;
56
- };
57
- type RunDetailResponse = {
58
- run: RunPublic;
59
- events: AgentJoyEvent[];
60
- workspace_brand: WorkspaceBrand;
61
- };
62
32
 
33
+ type EventFilter = "all" | "important" | "tools" | "artifacts";
63
34
  type AgentJoyRunProps = {
64
- runId: string;
65
- /** publish token (server side) or share token (viewer) */
66
- token: string;
67
- /** default: "" (same origin) */
68
35
  apiBaseUrl?: string;
69
- /** default: "ja" */
36
+ /**
37
+ * Live mode parameters (required unless `demo` is true).
38
+ * These are optional so users can try the widget in 3 minutes with `<AgentJoyRun demo />`.
39
+ */
40
+ runId?: string;
41
+ token?: string;
42
+ /** 3-minute onboarding: no backend required. */
43
+ demo?: boolean;
44
+ demoSpeedMs?: number;
45
+ /** Language for relative time + some labels. */
70
46
  locale?: "ja" | "en";
71
- /** number of events rendered (default 200) */
72
- limit?: number;
73
- /** sound effects (default false) */
47
+ /** Optional UI preferences */
74
48
  sound?: boolean;
75
- /** force mute state (overrides brand mute_default). if omitted, uses brand default */
76
49
  mute?: boolean;
77
- /** override brand (optional) */
78
- brandOverride?: Partial<WorkspaceBrand>;
79
- /** show XP/level (default: brand.show_xp) */
80
- showXp?: boolean;
81
- /** show persona comment events (default: brand.show_persona) */
82
50
  showPersona?: boolean;
83
- /** called when run status becomes completed */
84
- onComplete?: (run: RunPublic) => void;
85
- /** called when run status becomes failed */
86
- onError?: (run: RunPublic) => void;
51
+ showXp?: boolean;
52
+ /** Layout */
53
+ height?: number | string;
54
+ compact?: boolean;
55
+ showHeader?: boolean;
56
+ showControls?: boolean;
57
+ showToolbar?: boolean;
58
+ /** Behavior */
59
+ autoScroll?: boolean;
60
+ maxEvents?: number;
61
+ /** Event list UX */
62
+ defaultFilter?: EventFilter;
63
+ /** Polling to keep eventual consistency even if SSE drops (ms). Set 0 to disable. */
64
+ pollIntervalMs?: number;
65
+ /** Optional: expose events to host app */
66
+ onEvent?: (ev: AgentJoyEvent) => void;
67
+ /** Optional: explicit share URL (if you want a stable link button) */
68
+ shareUrl?: string;
69
+ /** Backward-compat (currently unused) */
70
+ mode?: "professional" | "playful";
71
+ pack?: string;
87
72
  };
88
73
  declare function AgentJoyRun(props: AgentJoyRunProps): react_jsx_runtime.JSX.Element;
89
74
 
90
- export { type AgentJoyEvent, type AgentJoyEventType, type AgentJoyPhase, AgentJoyRun, type AgentJoyRunProps, type Artifact, type RunDetailResponse, type RunPublic, type ToolInfo, type WorkspaceBrand };
75
+ export { AgentJoyRun, type AgentJoyRunProps };