@agenticgraph/stream-react 0.1.0 → 0.1.1
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.
- package/README.md +3 -1
- package/dist/index.cjs +5 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +5 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -33,8 +33,10 @@ The three packages are released together:
|
|
|
33
33
|
|---|---|---|
|
|
34
34
|
| `agenticgraph/agenticgraph` (core) | 0.2.x | PHP 8.3+, Laravel 12.61.1+ or 13.12+, Prism 0.102 |
|
|
35
35
|
| `agenticgraph/vector` | 0.1.x | PHP 8.3+, Laravel 12.61.1+ or 13.12+, Prism 0.102, PostgreSQL with pgvector (0.8+ for iterative scan). Core 0.2.x is optional (tracing) |
|
|
36
|
-
| `@agenticgraph/stream-client`, `@agenticgraph/stream-react`, `@agenticgraph/stream-vue` | 0.1.x | Core 0.2.x on the server (stream wire contract v1.1), Node.js 18+, React 18+ or Vue 3.4+ for the adapters |
|
|
36
|
+
| `@agenticgraph/stream-client`, `@agenticgraph/stream-react`, `@agenticgraph/stream-vue` | 0.1.x | Core 0.2.x on the server (stream wire contract v1.1; core 0.2.1 and client 0.1.1 together for custom events and error details), Node.js 18+, React 18+ or Vue 3.4+ for the adapters |
|
|
37
37
|
|
|
38
38
|
## License
|
|
39
39
|
|
|
40
40
|
MIT
|
|
41
|
+
|
|
42
|
+
`reconnect()` resumes from the last event after "Reconnect attempts exhausted" (`error.kind === 'connection'` and `error.canReconnect`). The text is kept.
|
package/dist/index.cjs
CHANGED
|
@@ -61,7 +61,7 @@ function useAgenticStream(options) {
|
|
|
61
61
|
} catch (failure) {
|
|
62
62
|
if (!cancelled) {
|
|
63
63
|
setStatus("error");
|
|
64
|
-
setError({ kind: "connection", message: failure instanceof Error ? failure.message : String(failure) });
|
|
64
|
+
setError({ kind: "connection", message: failure instanceof Error ? failure.message : String(failure), canReconnect: false });
|
|
65
65
|
}
|
|
66
66
|
return;
|
|
67
67
|
}
|
|
@@ -100,6 +100,9 @@ function useAgenticStream(options) {
|
|
|
100
100
|
},
|
|
101
101
|
[client]
|
|
102
102
|
);
|
|
103
|
+
const reconnect = (0, import_react.useCallback)(async () => {
|
|
104
|
+
await client?.reconnect();
|
|
105
|
+
}, [client]);
|
|
103
106
|
return {
|
|
104
107
|
text,
|
|
105
108
|
finalText,
|
|
@@ -107,6 +110,7 @@ function useAgenticStream(options) {
|
|
|
107
110
|
error,
|
|
108
111
|
interrupt,
|
|
109
112
|
resume,
|
|
113
|
+
reconnect,
|
|
110
114
|
lastEvent,
|
|
111
115
|
client
|
|
112
116
|
};
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/useAgenticStream.ts","../src/useStreamSelector.ts"],"sourcesContent":["export { useAgenticStream } from './useAgenticStream.js';\nexport type { UseAgenticStreamOptions, UseAgenticStreamReturn } from './useAgenticStream.js';\nexport { useStreamSelector } from './useStreamSelector.js';\nexport {\n activeNodeSelector,\n nodeTextSelector,\n thinkingSelector,\n toolCallSelector,\n} from '@agenticgraph/stream-client';\nexport type { StreamSelector } from '@agenticgraph/stream-client';\n","import {\n AgenticStream,\n executeResume,\n appendFinalTextDelta,\n appendTextDelta,\n type ResumeHandler,\n type StreamErrorDetail,\n type StreamEvent,\n type StreamInterrupt,\n type StreamStatus,\n type StreamTransport,\n} from '@agenticgraph/stream-client';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseAgenticStreamOptions {\n transport: StreamTransport;\n onResume?: ResumeHandler;\n}\n\nexport interface UseAgenticStreamReturn {\n /** Every text_delta of the run, every step (the narration). */\n text: string;\n /** Text of the current or last step; after a tool run, the final answer (LlmResponse::text on the server). */\n finalText: string;\n status: StreamStatus;\n error: StreamErrorDetail | null;\n interrupt: StreamInterrupt | null;\n resume: (decision: unknown) => Promise<void>;\n lastEvent: StreamEvent | null;\n client: AgenticStream | null;\n}\n\n/**\n * React hook bridging {@link AgenticStream} into reactive state.\n *\n * Text accumulation uses functional `setText` updates (one state slot, O(1) per delta).\n * Status/error/interrupt sync from the core via `onStatusChange` - not reimplemented here.\n * `lastEvent` updates on every event (intentional; use selectors for derived state).\n */\nexport function useAgenticStream(options: UseAgenticStreamOptions): UseAgenticStreamReturn {\n const { transport, onResume } = options;\n\n const [text, setText] = useState('');\n const [finalText, setFinalText] = useState('');\n const [status, setStatus] = useState<StreamStatus>('idle');\n const [error, setError] = useState<StreamErrorDetail | null>(null);\n const [interrupt, setInterrupt] = useState<StreamInterrupt | null>(null);\n const [lastEvent, setLastEvent] = useState<StreamEvent | null>(null);\n const [client, setClient] = useState<AgenticStream | null>(null);\n\n const onResumeRef = useRef(onResume);\n onResumeRef.current = onResume;\n\n useEffect(() => {\n let stream: AgenticStream | null = null;\n let unsubEvents: (() => void) | undefined;\n let unsubStatus: (() => void) | undefined;\n let cancelled = false;\n\n setText('');\n setFinalText('');\n setStatus('idle');\n setError(null);\n setInterrupt(null);\n setLastEvent(null);\n setClient(null);\n\n void (async () => {\n try {\n stream = await AgenticStream.connect({ transport });\n } catch (failure) {\n if (!cancelled) {\n setStatus('error');\n setError({ kind: 'connection', message: failure instanceof Error ? failure.message : String(failure) });\n }\n\n return;\n }\n\n if (cancelled) {\n await stream.disconnect();\n\n return;\n }\n\n setClient(stream);\n setStatus(stream.status);\n setError(stream.error);\n setInterrupt(stream.interrupt);\n\n unsubEvents = stream.on((event) => {\n setLastEvent(event);\n setText((current) => appendTextDelta(current, event));\n setFinalText((current) => appendFinalTextDelta(current, event));\n });\n\n unsubStatus = stream.onStatusChange((nextStatus, snapshot) => {\n setStatus(nextStatus);\n setError(snapshot.error);\n setInterrupt(snapshot.interrupt);\n });\n })();\n\n return () => {\n cancelled = true;\n unsubEvents?.();\n unsubStatus?.();\n void stream?.disconnect();\n };\n }, [transport]);\n\n const resume = useCallback(\n async (decision: unknown) => {\n if (client === null) {\n throw new Error('useAgenticStream: stream not connected');\n }\n\n await executeResume(client, decision, onResumeRef.current);\n },\n [client],\n );\n\n return {\n text,\n finalText,\n status,\n error,\n interrupt,\n resume,\n lastEvent,\n client,\n };\n}\n","import type { AgenticStream, StreamEvent, StreamSelector } from '@agenticgraph/stream-client';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\n/**\n * Derive reactive state from the stream's event history via a selector function.\n * Selector functions should be stable (imported, not inline) to avoid redundant recomputation.\n */\nexport function useStreamSelector<T>(\n client: AgenticStream | null,\n selector: StreamSelector<T>,\n): T {\n const [events, setEvents] = useState<StreamEvent[]>([]);\n const selectorRef = useRef(selector);\n selectorRef.current = selector;\n\n useEffect(() => {\n if (client === null) {\n setEvents([]);\n\n return;\n }\n\n const unsub = client.on((event) => {\n setEvents((current) => [...current, event]);\n });\n\n return unsub;\n }, [client]);\n\n return useMemo(() => selectorRef.current(events), [events]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,2BAWO;AACP,mBAAyD;
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/useAgenticStream.ts","../src/useStreamSelector.ts"],"sourcesContent":["export { useAgenticStream } from './useAgenticStream.js';\nexport type { UseAgenticStreamOptions, UseAgenticStreamReturn } from './useAgenticStream.js';\nexport { useStreamSelector } from './useStreamSelector.js';\nexport {\n activeNodeSelector,\n nodeTextSelector,\n thinkingSelector,\n toolCallSelector,\n} from '@agenticgraph/stream-client';\nexport type { StreamSelector } from '@agenticgraph/stream-client';\n","import {\n AgenticStream,\n executeResume,\n appendFinalTextDelta,\n appendTextDelta,\n type ResumeHandler,\n type StreamErrorDetail,\n type StreamEvent,\n type StreamInterrupt,\n type StreamStatus,\n type StreamTransport,\n} from '@agenticgraph/stream-client';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseAgenticStreamOptions {\n transport: StreamTransport;\n onResume?: ResumeHandler;\n}\n\nexport interface UseAgenticStreamReturn {\n /** Every text_delta of the run, every step (the narration). */\n text: string;\n /** Text of the current or last step; after a tool run, the final answer (LlmResponse::text on the server). */\n finalText: string;\n status: StreamStatus;\n error: StreamErrorDetail | null;\n interrupt: StreamInterrupt | null;\n resume: (decision: unknown) => Promise<void>;\n /** Resume from the last event after a lost connection (`error.canReconnect` is true). No-op when connected. */\n reconnect: () => Promise<void>;\n lastEvent: StreamEvent | null;\n client: AgenticStream | null;\n}\n\n/**\n * React hook bridging {@link AgenticStream} into reactive state.\n *\n * Text accumulation uses functional `setText` updates (one state slot, O(1) per delta).\n * Status/error/interrupt sync from the core via `onStatusChange` - not reimplemented here.\n * `lastEvent` updates on every event (intentional; use selectors for derived state).\n */\nexport function useAgenticStream(options: UseAgenticStreamOptions): UseAgenticStreamReturn {\n const { transport, onResume } = options;\n\n const [text, setText] = useState('');\n const [finalText, setFinalText] = useState('');\n const [status, setStatus] = useState<StreamStatus>('idle');\n const [error, setError] = useState<StreamErrorDetail | null>(null);\n const [interrupt, setInterrupt] = useState<StreamInterrupt | null>(null);\n const [lastEvent, setLastEvent] = useState<StreamEvent | null>(null);\n const [client, setClient] = useState<AgenticStream | null>(null);\n\n const onResumeRef = useRef(onResume);\n onResumeRef.current = onResume;\n\n useEffect(() => {\n let stream: AgenticStream | null = null;\n let unsubEvents: (() => void) | undefined;\n let unsubStatus: (() => void) | undefined;\n let cancelled = false;\n\n setText('');\n setFinalText('');\n setStatus('idle');\n setError(null);\n setInterrupt(null);\n setLastEvent(null);\n setClient(null);\n\n void (async () => {\n try {\n stream = await AgenticStream.connect({ transport });\n } catch (failure) {\n if (!cancelled) {\n setStatus('error');\n setError({ kind: 'connection', message: failure instanceof Error ? failure.message : String(failure), canReconnect: false });\n }\n\n return;\n }\n\n if (cancelled) {\n await stream.disconnect();\n\n return;\n }\n\n setClient(stream);\n setStatus(stream.status);\n setError(stream.error);\n setInterrupt(stream.interrupt);\n\n unsubEvents = stream.on((event) => {\n setLastEvent(event);\n setText((current) => appendTextDelta(current, event));\n setFinalText((current) => appendFinalTextDelta(current, event));\n });\n\n unsubStatus = stream.onStatusChange((nextStatus, snapshot) => {\n setStatus(nextStatus);\n setError(snapshot.error);\n setInterrupt(snapshot.interrupt);\n });\n })();\n\n return () => {\n cancelled = true;\n unsubEvents?.();\n unsubStatus?.();\n void stream?.disconnect();\n };\n }, [transport]);\n\n const resume = useCallback(\n async (decision: unknown) => {\n if (client === null) {\n throw new Error('useAgenticStream: stream not connected');\n }\n\n await executeResume(client, decision, onResumeRef.current);\n },\n [client],\n );\n\n const reconnect = useCallback(async () => {\n await client?.reconnect();\n }, [client]);\n\n return {\n text,\n finalText,\n status,\n error,\n interrupt,\n resume,\n reconnect,\n lastEvent,\n client,\n };\n}\n","import type { AgenticStream, StreamEvent, StreamSelector } from '@agenticgraph/stream-client';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\n/**\n * Derive reactive state from the stream's event history via a selector function.\n * Selector functions should be stable (imported, not inline) to avoid redundant recomputation.\n */\nexport function useStreamSelector<T>(\n client: AgenticStream | null,\n selector: StreamSelector<T>,\n): T {\n const [events, setEvents] = useState<StreamEvent[]>([]);\n const selectorRef = useRef(selector);\n selectorRef.current = selector;\n\n useEffect(() => {\n if (client === null) {\n setEvents([]);\n\n return;\n }\n\n const unsub = client.on((event) => {\n setEvents((current) => [...current, event]);\n });\n\n return unsub;\n }, [client]);\n\n return useMemo(() => selectorRef.current(events), [events]);\n}\n"],"mappings":"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","names":["import_react","import_stream_client"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -14,6 +14,8 @@ interface UseAgenticStreamReturn {
|
|
|
14
14
|
error: StreamErrorDetail | null;
|
|
15
15
|
interrupt: StreamInterrupt | null;
|
|
16
16
|
resume: (decision: unknown) => Promise<void>;
|
|
17
|
+
/** Resume from the last event after a lost connection (`error.canReconnect` is true). No-op when connected. */
|
|
18
|
+
reconnect: () => Promise<void>;
|
|
17
19
|
lastEvent: StreamEvent | null;
|
|
18
20
|
client: AgenticStream | null;
|
|
19
21
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -14,6 +14,8 @@ interface UseAgenticStreamReturn {
|
|
|
14
14
|
error: StreamErrorDetail | null;
|
|
15
15
|
interrupt: StreamInterrupt | null;
|
|
16
16
|
resume: (decision: unknown) => Promise<void>;
|
|
17
|
+
/** Resume from the last event after a lost connection (`error.canReconnect` is true). No-op when connected. */
|
|
18
|
+
reconnect: () => Promise<void>;
|
|
17
19
|
lastEvent: StreamEvent | null;
|
|
18
20
|
client: AgenticStream | null;
|
|
19
21
|
}
|
package/dist/index.js
CHANGED
|
@@ -35,7 +35,7 @@ function useAgenticStream(options) {
|
|
|
35
35
|
} catch (failure) {
|
|
36
36
|
if (!cancelled) {
|
|
37
37
|
setStatus("error");
|
|
38
|
-
setError({ kind: "connection", message: failure instanceof Error ? failure.message : String(failure) });
|
|
38
|
+
setError({ kind: "connection", message: failure instanceof Error ? failure.message : String(failure), canReconnect: false });
|
|
39
39
|
}
|
|
40
40
|
return;
|
|
41
41
|
}
|
|
@@ -74,6 +74,9 @@ function useAgenticStream(options) {
|
|
|
74
74
|
},
|
|
75
75
|
[client]
|
|
76
76
|
);
|
|
77
|
+
const reconnect = useCallback(async () => {
|
|
78
|
+
await client?.reconnect();
|
|
79
|
+
}, [client]);
|
|
77
80
|
return {
|
|
78
81
|
text,
|
|
79
82
|
finalText,
|
|
@@ -81,6 +84,7 @@ function useAgenticStream(options) {
|
|
|
81
84
|
error,
|
|
82
85
|
interrupt,
|
|
83
86
|
resume,
|
|
87
|
+
reconnect,
|
|
84
88
|
lastEvent,
|
|
85
89
|
client
|
|
86
90
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useAgenticStream.ts","../src/useStreamSelector.ts","../src/index.ts"],"sourcesContent":["import {\n AgenticStream,\n executeResume,\n appendFinalTextDelta,\n appendTextDelta,\n type ResumeHandler,\n type StreamErrorDetail,\n type StreamEvent,\n type StreamInterrupt,\n type StreamStatus,\n type StreamTransport,\n} from '@agenticgraph/stream-client';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseAgenticStreamOptions {\n transport: StreamTransport;\n onResume?: ResumeHandler;\n}\n\nexport interface UseAgenticStreamReturn {\n /** Every text_delta of the run, every step (the narration). */\n text: string;\n /** Text of the current or last step; after a tool run, the final answer (LlmResponse::text on the server). */\n finalText: string;\n status: StreamStatus;\n error: StreamErrorDetail | null;\n interrupt: StreamInterrupt | null;\n resume: (decision: unknown) => Promise<void>;\n lastEvent: StreamEvent | null;\n client: AgenticStream | null;\n}\n\n/**\n * React hook bridging {@link AgenticStream} into reactive state.\n *\n * Text accumulation uses functional `setText` updates (one state slot, O(1) per delta).\n * Status/error/interrupt sync from the core via `onStatusChange` - not reimplemented here.\n * `lastEvent` updates on every event (intentional; use selectors for derived state).\n */\nexport function useAgenticStream(options: UseAgenticStreamOptions): UseAgenticStreamReturn {\n const { transport, onResume } = options;\n\n const [text, setText] = useState('');\n const [finalText, setFinalText] = useState('');\n const [status, setStatus] = useState<StreamStatus>('idle');\n const [error, setError] = useState<StreamErrorDetail | null>(null);\n const [interrupt, setInterrupt] = useState<StreamInterrupt | null>(null);\n const [lastEvent, setLastEvent] = useState<StreamEvent | null>(null);\n const [client, setClient] = useState<AgenticStream | null>(null);\n\n const onResumeRef = useRef(onResume);\n onResumeRef.current = onResume;\n\n useEffect(() => {\n let stream: AgenticStream | null = null;\n let unsubEvents: (() => void) | undefined;\n let unsubStatus: (() => void) | undefined;\n let cancelled = false;\n\n setText('');\n setFinalText('');\n setStatus('idle');\n setError(null);\n setInterrupt(null);\n setLastEvent(null);\n setClient(null);\n\n void (async () => {\n try {\n stream = await AgenticStream.connect({ transport });\n } catch (failure) {\n if (!cancelled) {\n setStatus('error');\n setError({ kind: 'connection', message: failure instanceof Error ? failure.message : String(failure) });\n }\n\n return;\n }\n\n if (cancelled) {\n await stream.disconnect();\n\n return;\n }\n\n setClient(stream);\n setStatus(stream.status);\n setError(stream.error);\n setInterrupt(stream.interrupt);\n\n unsubEvents = stream.on((event) => {\n setLastEvent(event);\n setText((current) => appendTextDelta(current, event));\n setFinalText((current) => appendFinalTextDelta(current, event));\n });\n\n unsubStatus = stream.onStatusChange((nextStatus, snapshot) => {\n setStatus(nextStatus);\n setError(snapshot.error);\n setInterrupt(snapshot.interrupt);\n });\n })();\n\n return () => {\n cancelled = true;\n unsubEvents?.();\n unsubStatus?.();\n void stream?.disconnect();\n };\n }, [transport]);\n\n const resume = useCallback(\n async (decision: unknown) => {\n if (client === null) {\n throw new Error('useAgenticStream: stream not connected');\n }\n\n await executeResume(client, decision, onResumeRef.current);\n },\n [client],\n );\n\n return {\n text,\n finalText,\n status,\n error,\n interrupt,\n resume,\n lastEvent,\n client,\n };\n}\n","import type { AgenticStream, StreamEvent, StreamSelector } from '@agenticgraph/stream-client';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\n/**\n * Derive reactive state from the stream's event history via a selector function.\n * Selector functions should be stable (imported, not inline) to avoid redundant recomputation.\n */\nexport function useStreamSelector<T>(\n client: AgenticStream | null,\n selector: StreamSelector<T>,\n): T {\n const [events, setEvents] = useState<StreamEvent[]>([]);\n const selectorRef = useRef(selector);\n selectorRef.current = selector;\n\n useEffect(() => {\n if (client === null) {\n setEvents([]);\n\n return;\n }\n\n const unsub = client.on((event) => {\n setEvents((current) => [...current, event]);\n });\n\n return unsub;\n }, [client]);\n\n return useMemo(() => selectorRef.current(events), [events]);\n}\n","export { useAgenticStream } from './useAgenticStream.js';\nexport type { UseAgenticStreamOptions, UseAgenticStreamReturn } from './useAgenticStream.js';\nexport { useStreamSelector } from './useStreamSelector.js';\nexport {\n activeNodeSelector,\n nodeTextSelector,\n thinkingSelector,\n toolCallSelector,\n} from '@agenticgraph/stream-client';\nexport type { StreamSelector } from '@agenticgraph/stream-client';\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAOK;AACP,SAAS,aAAa,WAAW,QAAQ,gBAAgB;
|
|
1
|
+
{"version":3,"sources":["../src/useAgenticStream.ts","../src/useStreamSelector.ts","../src/index.ts"],"sourcesContent":["import {\n AgenticStream,\n executeResume,\n appendFinalTextDelta,\n appendTextDelta,\n type ResumeHandler,\n type StreamErrorDetail,\n type StreamEvent,\n type StreamInterrupt,\n type StreamStatus,\n type StreamTransport,\n} from '@agenticgraph/stream-client';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface UseAgenticStreamOptions {\n transport: StreamTransport;\n onResume?: ResumeHandler;\n}\n\nexport interface UseAgenticStreamReturn {\n /** Every text_delta of the run, every step (the narration). */\n text: string;\n /** Text of the current or last step; after a tool run, the final answer (LlmResponse::text on the server). */\n finalText: string;\n status: StreamStatus;\n error: StreamErrorDetail | null;\n interrupt: StreamInterrupt | null;\n resume: (decision: unknown) => Promise<void>;\n /** Resume from the last event after a lost connection (`error.canReconnect` is true). No-op when connected. */\n reconnect: () => Promise<void>;\n lastEvent: StreamEvent | null;\n client: AgenticStream | null;\n}\n\n/**\n * React hook bridging {@link AgenticStream} into reactive state.\n *\n * Text accumulation uses functional `setText` updates (one state slot, O(1) per delta).\n * Status/error/interrupt sync from the core via `onStatusChange` - not reimplemented here.\n * `lastEvent` updates on every event (intentional; use selectors for derived state).\n */\nexport function useAgenticStream(options: UseAgenticStreamOptions): UseAgenticStreamReturn {\n const { transport, onResume } = options;\n\n const [text, setText] = useState('');\n const [finalText, setFinalText] = useState('');\n const [status, setStatus] = useState<StreamStatus>('idle');\n const [error, setError] = useState<StreamErrorDetail | null>(null);\n const [interrupt, setInterrupt] = useState<StreamInterrupt | null>(null);\n const [lastEvent, setLastEvent] = useState<StreamEvent | null>(null);\n const [client, setClient] = useState<AgenticStream | null>(null);\n\n const onResumeRef = useRef(onResume);\n onResumeRef.current = onResume;\n\n useEffect(() => {\n let stream: AgenticStream | null = null;\n let unsubEvents: (() => void) | undefined;\n let unsubStatus: (() => void) | undefined;\n let cancelled = false;\n\n setText('');\n setFinalText('');\n setStatus('idle');\n setError(null);\n setInterrupt(null);\n setLastEvent(null);\n setClient(null);\n\n void (async () => {\n try {\n stream = await AgenticStream.connect({ transport });\n } catch (failure) {\n if (!cancelled) {\n setStatus('error');\n setError({ kind: 'connection', message: failure instanceof Error ? failure.message : String(failure), canReconnect: false });\n }\n\n return;\n }\n\n if (cancelled) {\n await stream.disconnect();\n\n return;\n }\n\n setClient(stream);\n setStatus(stream.status);\n setError(stream.error);\n setInterrupt(stream.interrupt);\n\n unsubEvents = stream.on((event) => {\n setLastEvent(event);\n setText((current) => appendTextDelta(current, event));\n setFinalText((current) => appendFinalTextDelta(current, event));\n });\n\n unsubStatus = stream.onStatusChange((nextStatus, snapshot) => {\n setStatus(nextStatus);\n setError(snapshot.error);\n setInterrupt(snapshot.interrupt);\n });\n })();\n\n return () => {\n cancelled = true;\n unsubEvents?.();\n unsubStatus?.();\n void stream?.disconnect();\n };\n }, [transport]);\n\n const resume = useCallback(\n async (decision: unknown) => {\n if (client === null) {\n throw new Error('useAgenticStream: stream not connected');\n }\n\n await executeResume(client, decision, onResumeRef.current);\n },\n [client],\n );\n\n const reconnect = useCallback(async () => {\n await client?.reconnect();\n }, [client]);\n\n return {\n text,\n finalText,\n status,\n error,\n interrupt,\n resume,\n reconnect,\n lastEvent,\n client,\n };\n}\n","import type { AgenticStream, StreamEvent, StreamSelector } from '@agenticgraph/stream-client';\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\n/**\n * Derive reactive state from the stream's event history via a selector function.\n * Selector functions should be stable (imported, not inline) to avoid redundant recomputation.\n */\nexport function useStreamSelector<T>(\n client: AgenticStream | null,\n selector: StreamSelector<T>,\n): T {\n const [events, setEvents] = useState<StreamEvent[]>([]);\n const selectorRef = useRef(selector);\n selectorRef.current = selector;\n\n useEffect(() => {\n if (client === null) {\n setEvents([]);\n\n return;\n }\n\n const unsub = client.on((event) => {\n setEvents((current) => [...current, event]);\n });\n\n return unsub;\n }, [client]);\n\n return useMemo(() => selectorRef.current(events), [events]);\n}\n","export { useAgenticStream } from './useAgenticStream.js';\nexport type { UseAgenticStreamOptions, UseAgenticStreamReturn } from './useAgenticStream.js';\nexport { useStreamSelector } from './useStreamSelector.js';\nexport {\n activeNodeSelector,\n nodeTextSelector,\n thinkingSelector,\n toolCallSelector,\n} from '@agenticgraph/stream-client';\nexport type { StreamSelector } from '@agenticgraph/stream-client';\n"],"mappings":"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","names":["useEffect","useRef","useState"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agenticgraph/stream-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "React hooks and selectors for AgenticGraph streaming",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"agenticgraph",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"prepublishOnly": "npm run build"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@agenticgraph/stream-client": "^0.1.
|
|
53
|
+
"@agenticgraph/stream-client": "^0.1.1"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"react": ">=18"
|