@langchain/vue 0.4.7 → 1.0.0

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 (74) hide show
  1. package/README.md +84 -364
  2. package/dist/context.cjs +2 -2
  3. package/dist/context.cjs.map +1 -1
  4. package/dist/context.d.cts +4 -5
  5. package/dist/context.d.cts.map +1 -1
  6. package/dist/context.d.ts +4 -5
  7. package/dist/context.d.ts.map +1 -1
  8. package/dist/context.js +1 -1
  9. package/dist/context.js.map +1 -1
  10. package/dist/index.cjs +30 -222
  11. package/dist/index.d.cts +10 -24
  12. package/dist/index.d.ts +10 -24
  13. package/dist/index.js +9 -198
  14. package/dist/selectors.cjs +170 -0
  15. package/dist/selectors.cjs.map +1 -0
  16. package/dist/selectors.d.cts +133 -0
  17. package/dist/selectors.d.cts.map +1 -0
  18. package/dist/selectors.d.ts +133 -0
  19. package/dist/selectors.d.ts.map +1 -0
  20. package/dist/selectors.js +160 -0
  21. package/dist/selectors.js.map +1 -0
  22. package/dist/use-audio-player.cjs +591 -0
  23. package/dist/use-audio-player.cjs.map +1 -0
  24. package/dist/use-audio-player.d.cts +69 -0
  25. package/dist/use-audio-player.d.cts.map +1 -0
  26. package/dist/use-audio-player.d.ts +69 -0
  27. package/dist/use-audio-player.d.ts.map +1 -0
  28. package/dist/use-audio-player.js +591 -0
  29. package/dist/use-audio-player.js.map +1 -0
  30. package/dist/use-media-url.cjs +51 -0
  31. package/dist/use-media-url.cjs.map +1 -0
  32. package/dist/use-media-url.d.cts +29 -0
  33. package/dist/use-media-url.d.cts.map +1 -0
  34. package/dist/use-media-url.d.ts +29 -0
  35. package/dist/use-media-url.d.ts.map +1 -0
  36. package/dist/use-media-url.js +51 -0
  37. package/dist/use-media-url.js.map +1 -0
  38. package/dist/use-projection.cjs +66 -0
  39. package/dist/use-projection.cjs.map +1 -0
  40. package/dist/use-projection.d.cts +39 -0
  41. package/dist/use-projection.d.cts.map +1 -0
  42. package/dist/use-projection.d.ts +39 -0
  43. package/dist/use-projection.d.ts.map +1 -0
  44. package/dist/use-projection.js +66 -0
  45. package/dist/use-projection.js.map +1 -0
  46. package/dist/use-stream.cjs +169 -0
  47. package/dist/use-stream.cjs.map +1 -0
  48. package/dist/use-stream.d.cts +118 -0
  49. package/dist/use-stream.d.cts.map +1 -0
  50. package/dist/use-stream.d.ts +118 -0
  51. package/dist/use-stream.d.ts.map +1 -0
  52. package/dist/use-stream.js +167 -0
  53. package/dist/use-stream.js.map +1 -0
  54. package/dist/use-video-player.cjs +212 -0
  55. package/dist/use-video-player.cjs.map +1 -0
  56. package/dist/use-video-player.d.cts +57 -0
  57. package/dist/use-video-player.d.cts.map +1 -0
  58. package/dist/use-video-player.d.ts +57 -0
  59. package/dist/use-video-player.d.ts.map +1 -0
  60. package/dist/use-video-player.js +212 -0
  61. package/dist/use-video-player.js.map +1 -0
  62. package/package.json +10 -8
  63. package/dist/index.cjs.map +0 -1
  64. package/dist/index.d.cts.map +0 -1
  65. package/dist/index.d.ts.map +0 -1
  66. package/dist/index.js.map +0 -1
  67. package/dist/stream.custom.cjs +0 -133
  68. package/dist/stream.custom.cjs.map +0 -1
  69. package/dist/stream.custom.js +0 -133
  70. package/dist/stream.custom.js.map +0 -1
  71. package/dist/subagents.cjs +0 -76
  72. package/dist/subagents.cjs.map +0 -1
  73. package/dist/subagents.js +0 -76
  74. package/dist/subagents.js.map +0 -1
package/README.md CHANGED
@@ -1,6 +1,40 @@
1
1
  # @langchain/vue
2
2
 
3
- Vue SDK for building AI-powered applications with [Deep Agents](https://docs.langchain.com/oss/javascript/deepagents/overview), [LangChain](https://docs.langchain.com/oss/javascript/langchain/overview) and [LangGraph](https://docs.langchain.com/oss/javascript/langgraph/overview). It provides a `useStream` composable that manages streaming, state, branching, and interrupts using Vue's reactivity system.
3
+ Vue SDK for building AI-powered applications with [Deep Agents](https://docs.langchain.com/oss/javascript/deepagents/overview), [LangChain](https://docs.langchain.com/oss/javascript/langchain/overview) and [LangGraph](https://docs.langchain.com/oss/javascript/langgraph/overview).
4
+
5
+ The package ships a Composition-API–first binding built on top of
6
+ the v2 streaming protocol. `useStream` returns a small, always-on
7
+ root handle (`values`, `messages`, `isLoading`, `error`, …) and
8
+ pushes anything namespaced (subagents, subgraphs, media, submission
9
+ queue, per-message metadata) behind **ref-counted `use*` selectors**
10
+ so components only pay for the data they actually consume.
11
+
12
+ > **Upgrading from `0.x`?** See [`docs/v1-migration.md`](./docs/v1-migration.md)
13
+ > for the complete matrix of option, return-shape, and transport
14
+ > changes.
15
+
16
+ ## Highlights
17
+
18
+ - **v2-native streaming protocol.** Session-based transport with
19
+ automatic re-attach on remount — no `reconnectOnMount` /
20
+ `joinStream` dance.
21
+ - **Composition-API first.** Everything is a `ShallowRef` /
22
+ `ComputedRef`, auto-disposed via `onScopeDispose` when the scope
23
+ unmounts.
24
+ - **Selector-based subscriptions.** Namespaced data (subagents,
25
+ subgraphs, media) streams only when a component actually mounts
26
+ the matching selector composable, and releases on unmount.
27
+ - **Discriminated transports.** Hosted Agent Server and custom
28
+ adapters are two arms of a single typed union — mixing them is a
29
+ compile-time error.
30
+ - **Agent-brand type inference.** `useStream<typeof agent>()`
31
+ unwraps state, tool calls, and subagent state maps from an agent
32
+ brand.
33
+ - **Multimodal media streams.** Built-in assembly for audio,
34
+ images, video, and files, with ready-to-use `<img>` / `<audio>` /
35
+ `<video>` players.
36
+ - **`<Suspense>` friendly.** `hydrationPromise` lets you gate
37
+ `async setup()` on initial hydration.
4
38
 
5
39
  ## Installation
6
40
 
@@ -8,395 +42,81 @@ Vue SDK for building AI-powered applications with [Deep Agents](https://docs.lan
8
42
  npm install @langchain/vue @langchain/core
9
43
  ```
10
44
 
11
- **Peer dependencies:** `vue` (^3.0.0), `@langchain/core` (^1.0.1)
45
+ **Peer dependencies:** `vue` (^3.4.0), `@langchain/core` (^1.0.1).
12
46
 
13
- ## Quick Start
47
+ ## Quick start
14
48
 
15
49
  ```vue
16
50
  <script setup lang="ts">
17
51
  import { useStream } from "@langchain/vue";
18
52
 
19
- const { messages, submit, isLoading } = useStream({
53
+ const stream = useStream({
20
54
  assistantId: "agent",
21
55
  apiUrl: "http://localhost:2024",
22
56
  });
23
- </script>
24
-
25
- <template>
26
- <div>
27
- <div v-for="(msg, i) in messages" :key="msg.id ?? i">
28
- {{ msg.content }}
29
- </div>
30
-
31
- <button
32
- :disabled="isLoading"
33
- @click="submit({ messages: [{ type: 'human', content: 'Hello!' }] })"
34
- >
35
- Send
36
- </button>
37
- </div>
38
- </template>
39
- ```
40
-
41
- ## `useStream` Options
42
-
43
- | Option | Type | Description |
44
- |---|---|---|
45
- | `assistantId` | `string` | **Required.** The assistant/graph ID to stream from. |
46
- | `apiUrl` | `string` | Base URL of the LangGraph API. |
47
- | `client` | `Client` | Pre-configured `Client` instance (alternative to `apiUrl`). |
48
- | `messagesKey` | `string` | State key containing messages. Defaults to `"messages"`. |
49
- | `initialValues` | `StateType` | Initial state values before any stream data arrives. |
50
- | `fetchStateHistory` | `boolean \| { limit: number }` | Fetch thread history on stream completion. Enables branching. |
51
- | `throttle` | `boolean \| number` | Throttle state updates for performance. |
52
- | `onFinish` | `(state, error?) => void` | Called when the stream completes. |
53
- | `onError` | `(error, state?) => void` | Called on stream errors. |
54
- | `onThreadId` | `(threadId) => void` | Called when a new thread is created. |
55
- | `onUpdateEvent` | `(event) => void` | Receive update events from the stream. |
56
- | `onCustomEvent` | `(event) => void` | Receive custom events from the stream. |
57
- | `onStop` | `() => void` | Called when the stream is stopped by the user. |
58
-
59
- ## Return Values
60
-
61
- All reactive properties are Vue `computed` or `ref` values that [auto-unwrap](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref-unwrapping-in-templates) in `<template>` blocks — use them directly (e.g. `messages`, not `messages.value`). The `queue` object is `reactive`, so its nested properties also auto-unwrap in templates.
62
-
63
- | Property | Type | Description |
64
- |---|---|---|
65
- | `values` | `ComputedRef<StateType>` | Current graph state. |
66
- | `messages` | `ComputedRef<Message[]>` | Messages from the current state. |
67
- | `isLoading` | `Ref<boolean>` | Whether a stream is currently active. |
68
- | `error` | `ComputedRef<unknown>` | The most recent error, if any. |
69
- | `interrupt` | `ComputedRef<Interrupt \| undefined>` | Current interrupt requiring user input. |
70
- | `branch` | `Ref<string>` | Active branch identifier. |
71
- | `submit(values, options?)` | `function` | Submit new input to the graph. When called while a stream is active, the run is created on the server with `multitaskStrategy: "enqueue"` and queued automatically. |
72
- | `stop()` | `function` | Cancel the active stream. |
73
- | `setBranch(branch)` | `function` | Switch to a different conversation branch. |
74
- | `getMessagesMetadata(msg, index?)` | `function` | Get branching and checkpoint metadata for a message. |
75
- | `switchThread(id)` | `(id: string \| null) => void` | Switch to a different thread. Pass `null` to start a new thread on next submit. |
76
- | `queue.entries` | `ReadonlyArray<QueueEntry>` | Pending server-side runs. Each entry has `id` (server run ID), `values`, `options`, and `createdAt`. |
77
- | `queue.size` | `number` | Number of pending runs on the server. |
78
- | `queue.cancel(id)` | `(id: string) => Promise<boolean>` | Cancel a pending run on the server by its run ID. |
79
- | `queue.clear()` | `() => Promise<void>` | Cancel all pending runs on the server. |
80
-
81
- ## Type Safety
82
-
83
- Provide your state type as a generic parameter:
84
-
85
- ```vue
86
- <script setup lang="ts">
87
- import { useStream } from "@langchain/vue";
88
- import type { BaseMessage } from "langchain";
89
57
 
90
- interface MyState {
91
- messages: BaseMessage[];
92
- context?: string;
58
+ function onSubmit() {
59
+ void stream.submit({ messages: [{ type: "human", content: "Hello!" }] });
93
60
  }
94
-
95
- const { messages, submit } = useStream<MyState>({
96
- assistantId: "my-graph",
97
- apiUrl: "http://localhost:2024",
98
- });
99
- </script>
100
- ```
101
-
102
- ### Typed Interrupts
103
-
104
- ```vue
105
- <script setup lang="ts">
106
- import { useStream } from "@langchain/vue";
107
- import type { BaseMessage } from "langchain";
108
-
109
- const { interrupt, submit } = useStream<
110
- { messages: BaseMessage[] },
111
- { InterruptType: { question: string } }
112
- >({
113
- assistantId: "my-graph",
114
- apiUrl: "http://localhost:2024",
115
- });
116
- </script>
117
- ```
118
-
119
- ## Handling Interrupts
120
-
121
- ```vue
122
- <script setup lang="ts">
123
- import { useStream } from "@langchain/vue";
124
- import type { BaseMessage } from "langchain";
125
-
126
- const { messages, interrupt, submit } = useStream<
127
- { messages: BaseMessage[] },
128
- { InterruptType: { question: string } }
129
- >({
130
- assistantId: "agent",
131
- apiUrl: "http://localhost:2024",
132
- });
133
61
  </script>
134
62
 
135
63
  <template>
136
64
  <div>
137
- <div v-for="(msg, i) in messages" :key="msg.id ?? i">
138
- {{ msg.content }}
139
- </div>
140
-
141
- <div v-if="interrupt">
142
- <p>{{ interrupt.question }}</p>
143
- <button @click="submit(null, { command: { resume: 'Approved' } })">
144
- Approve
145
- </button>
65
+ <div v-for="(msg, i) in stream.messages" :key="msg.id ?? i">
66
+ {{ typeof msg.content === "string" ? msg.content : JSON.stringify(msg.content) }}
146
67
  </div>
147
68
 
148
- <button
149
- @click="submit({ messages: [{ type: 'human', content: 'Hello' }] })"
150
- >
69
+ <button :disabled="stream.isLoading" @click="onSubmit">
151
70
  Send
152
71
  </button>
153
72
  </div>
154
73
  </template>
155
74
  ```
156
75
 
157
- ## Branching
158
-
159
- Enable conversation branching with `fetchStateHistory: true`:
160
-
161
- ```vue
162
- <script setup lang="ts">
163
- import { useStream } from "@langchain/vue";
164
-
165
- const { messages, submit, getMessagesMetadata, setBranch } = useStream({
166
- assistantId: "agent",
167
- apiUrl: "http://localhost:2024",
168
- fetchStateHistory: true,
169
- });
170
- </script>
171
-
172
- <template>
173
- <div>
174
- <div v-for="(msg, i) in messages" :key="msg.id ?? i">
175
- <p>{{ msg.content }}</p>
176
-
177
- <template v-if="getMessagesMetadata(msg, i)?.branchOptions">
178
- <button
179
- @click="() => {
180
- const meta = getMessagesMetadata(msg, i);
181
- const prev = meta.branchOptions[meta.branchOptions.indexOf(meta.branch) - 1];
182
- if (prev) setBranch(prev);
183
- }"
184
- >
185
- Previous
186
- </button>
187
- <button
188
- @click="() => {
189
- const meta = getMessagesMetadata(msg, i);
190
- const next = meta.branchOptions[meta.branchOptions.indexOf(meta.branch) + 1];
191
- if (next) setBranch(next);
192
- }"
193
- >
194
- Next
195
- </button>
196
- </template>
197
- </div>
198
-
199
- <button
200
- @click="submit({ messages: [{ type: 'human', content: 'Hello' }] })"
201
- >
202
- Send
203
- </button>
204
- </div>
205
- </template>
206
- ```
207
-
208
- ## Server-Side Queuing
209
-
210
- When `submit()` is called while a stream is already active, the SDK automatically creates the run on the server with `multitaskStrategy: "enqueue"`. The pending runs are tracked in `queue` and processed in order as each finishes:
211
-
212
- ```vue
213
- <script setup lang="ts">
214
- import { useStream } from "@langchain/vue";
215
-
216
- const { messages, submit, isLoading, queue, switchThread } = useStream({
217
- assistantId: "agent",
218
- apiUrl: "http://localhost:2024",
219
- });
220
- </script>
221
-
222
- <template>
223
- <div>
224
- <div v-for="(msg, i) in messages" :key="msg.id ?? i">
225
- {{ msg.content }}
226
- </div>
227
-
228
- <div v-if="queue.size > 0">
229
- <p>{{ queue.size }} message(s) queued</p>
230
- <button @click="queue.clear()">Clear Queue</button>
231
- </div>
232
-
233
- <button
234
- :disabled="isLoading"
235
- @click="submit({ messages: [{ type: 'human', content: 'Hello!' }] })"
236
- >
237
- Send
238
- </button>
239
- <button @click="switchThread(null)">New Thread</button>
240
- </div>
241
- </template>
242
- ```
243
-
244
- Switching threads via `switchThread()` cancels all pending runs and clears the queue.
245
-
246
- ## Custom Transport
247
-
248
- Instead of connecting to a LangGraph API, you can provide your own streaming transport. Pass a `transport` object instead of `assistantId` to use a custom backend:
249
-
250
- ```vue
251
- <script setup lang="ts">
252
- import { useStream, FetchStreamTransport } from "@langchain/vue";
253
- import type { BaseMessage } from "langchain";
254
-
255
- const {
256
- messages,
257
- submit,
258
- isLoading,
259
- branch,
260
- setBranch,
261
- getMessagesMetadata,
262
- } = useStream<{ messages: BaseMessage[] }>({
263
- transport: new FetchStreamTransport({
264
- url: "https://my-api.example.com/stream",
265
- }),
266
- threadId: null,
267
- onThreadId: (id) => console.log("Thread created:", id),
268
- });
269
- </script>
270
-
271
- <template>
272
- <div>
273
- <div v-for="(msg, i) in messages" :key="msg.id ?? i">
274
- <p>{{ msg.content }}</p>
275
- <span v-if="getMessagesMetadata(msg, i)?.streamMetadata">
276
- Node: {{ getMessagesMetadata(msg, i)?.streamMetadata?.langgraph_node }}
277
- </span>
278
- </div>
279
-
280
- <p>Current branch: {{ branch }}</p>
281
-
282
- <button
283
- :disabled="isLoading"
284
- @click="submit({ messages: [{ type: 'human', content: 'Hello!' }] })"
285
- >
286
- Send
287
- </button>
288
- </div>
289
- </template>
290
- ```
291
-
292
- The custom transport interface returns the same properties as the standard `useStream` composable, including `getMessagesMetadata`, `branch`, `setBranch`, `switchThread`, and all message/interrupt/subagent helpers. When using a custom transport, `getMessagesMetadata` returns stream metadata sent alongside messages during streaming; `branch` and `setBranch` provide local branch state management. `onFinish` is also supported and receives a synthetic `ThreadState` built from the final locally streamed values; the run metadata argument is `undefined`.
293
-
294
- ## Sharing State with `provideStream`
295
-
296
- When multiple components need access to the same stream (a message list, a header, an input bar), use `provideStream` and `useStreamContext` to share a single stream instance via Vue's `provide`/`inject`:
297
-
298
- ```vue
299
- <!-- ChatContainer.vue -->
300
- <script setup lang="ts">
301
- import { provideStream } from "@langchain/vue";
302
-
303
- provideStream({
304
- assistantId: "agent",
305
- apiUrl: "http://localhost:2024",
306
- });
307
- </script>
308
-
309
- <template>
310
- <ChatHeader />
311
- <MessageList />
312
- <MessageInput />
313
- </template>
314
- ```
315
-
316
- ```vue
317
- <!-- MessageList.vue -->
318
- <script setup lang="ts">
319
- import { useStreamContext } from "@langchain/vue";
320
-
321
- const { messages } = useStreamContext();
322
- </script>
323
-
324
- <template>
325
- <div v-for="(msg, i) in messages" :key="msg.id ?? i">
326
- {{ msg.content }}
327
- </div>
328
- </template>
329
- ```
330
-
331
- ```vue
332
- <!-- MessageInput.vue -->
333
- <script setup lang="ts">
334
- import { useStreamContext } from "@langchain/vue";
335
- import { ref } from "vue";
336
-
337
- const { submit, isLoading } = useStreamContext();
338
- const input = ref("");
339
-
340
- function send() {
341
- submit({ messages: [{ type: "human", content: input.value }] });
342
- input.value = "";
343
- }
344
- </script>
345
-
346
- <template>
347
- <form @submit.prevent="send">
348
- <textarea v-model="input" />
349
- <button :disabled="isLoading" type="submit">Send</button>
350
- </form>
351
- </template>
352
- ```
353
-
354
- ### App-Level Configuration with `LangChainPlugin`
355
-
356
- Use the Vue plugin to set default configuration for all `useStream` calls:
357
-
358
- ```typescript
359
- import { createApp } from "vue";
360
- import { LangChainPlugin } from "@langchain/vue";
361
- import App from "./App.vue";
362
-
363
- const app = createApp(App);
364
- app.use(LangChainPlugin, {
365
- apiUrl: "http://localhost:2024",
366
- });
367
- app.mount("#app");
368
- ```
369
-
370
- Then in any component, `apiUrl` is inherited automatically:
371
-
372
- ```vue
373
- <script setup lang="ts">
374
- import { useStream } from "@langchain/vue";
375
-
376
- const stream = useStream({ assistantId: "agent" });
377
- </script>
378
- ```
379
-
380
- ### Multiple Agents
381
-
382
- Nest `provideStream` calls for multi-agent scenarios — Vue's `provide`/`inject` scoping ensures each subtree gets its own stream:
383
-
384
- ```vue
385
- <!-- ResearchPanel.vue -->
386
- <script setup lang="ts">
387
- import { provideStream } from "@langchain/vue";
388
- provideStream({ assistantId: "researcher", apiUrl: "http://localhost:2024" });
389
- </script>
390
-
391
- <template>
392
- <MessageList />
393
- <MessageInput />
394
- </template>
395
- ```
76
+ Reactive fields on the handle are Vue refs (`ShallowRef` /
77
+ `ComputedRef`). In `<script setup>`, read them with `.value`:
78
+ `stream.messages.value`, `stream.isLoading.value`. In `<template>`,
79
+ Vue auto-unwraps refs, so prefer the shorter
80
+ `stream.messages` / `stream.isLoading` form.
81
+
82
+ ## Documentation
83
+
84
+ In-depth guides live in [`docs/`](./docs):
85
+
86
+ - [API reference](./docs/api-reference.md) — `useStream` options and
87
+ return shape.
88
+ - [Selectors](./docs/selectors.md) — ref-counted readers for
89
+ namespaced / scoped data.
90
+ - [Transports](./docs/transports.md) — SSE, WebSocket, and custom
91
+ `AgentServerAdapter` implementations.
92
+ - [Custom transports](./docs/custom-transport.md) — implementing
93
+ `AgentServerAdapter` against your own backend, with a worked
94
+ walkthrough of [`examples/ui-react-transport`](../../examples/ui-react-transport).
95
+ - [Interrupts & headless tools](./docs/interrupts.md) — pausing a
96
+ run, responding to interrupts, registering browser-side tools.
97
+ - [Forking from a message](./docs/forking.md) — edit / retry flows
98
+ with `useMessageMetadata` + `submit({ forkFrom })`.
99
+ - [Submission queue](./docs/submission-queue.md) — inspecting and
100
+ cancelling enqueued submits.
101
+ - [Subagents & subgraphs](./docs/subagents.md) — rendering
102
+ per-subagent messages, tool calls, and state via scoped selectors.
103
+ - [Multimodal media](./docs/multimodal.md) — audio / image / video /
104
+ file streams with built-in players.
105
+ - [Sharing a stream](./docs/sharing-streams.md) — `provideStream`,
106
+ `useStreamContext`, and the `LangChainPlugin` app-level defaults.
107
+ - [Suspense-style hydration](./docs/suspense.md) gating
108
+ `async setup()` on `hydrationPromise`.
109
+ - [Type safety](./docs/type-safety.md) brand inference, generics,
110
+ and the exported helper types.
111
+ - [Testing](./docs/testing.md) — mounting components with mock
112
+ streams or real dev servers.
113
+ - [Migrating from 0.x](./docs/v1-migration.md) — full diff of
114
+ options, return shape, and transport classes.
396
115
 
397
116
  ## Playground
398
117
 
399
- For complete end-to-end examples with full agentic UIs, visit the [LangChain UI Playground](https://docs.langchain.com/playground).
118
+ For complete end-to-end examples with full agentic UIs, visit the
119
+ [LangChain UI Playground](https://docs.langchain.com/playground).
400
120
 
401
121
  ## License
402
122
 
package/dist/context.cjs CHANGED
@@ -1,4 +1,4 @@
1
- const require_index = require("./index.cjs");
1
+ const require_use_stream = require("./use-stream.cjs");
2
2
  let vue = require("vue");
3
3
  //#region src/context.ts
4
4
  const STREAM_CONTEXT_KEY = Symbol("langchain-stream");
@@ -62,7 +62,7 @@ const LangChainPlugin = { install(app, options = {}) {
62
62
  * @returns The stream instance (same as calling `useStream` directly).
63
63
  */
64
64
  function provideStream(options) {
65
- const stream = require_index.useStream(options);
65
+ const stream = require_use_stream.useStream(options);
66
66
  (0, vue.provide)(STREAM_CONTEXT_KEY, stream);
67
67
  return stream;
68
68
  }
@@ -1 +1 @@
1
- {"version":3,"file":"context.cjs","names":["useStream"],"sources":["../src/context.ts"],"sourcesContent":["import { provide, inject, type InjectionKey, type App, type Plugin } from \"vue\";\nimport type { BagTemplate } from \"@langchain/langgraph-sdk\";\nimport type {\n ResolveStreamOptions,\n InferBag,\n InferStateType,\n UseStreamCustomOptions,\n} from \"@langchain/langgraph-sdk/ui\";\nimport { Client } from \"@langchain/langgraph-sdk\";\nimport { useStream } from \"./index.js\";\n\n/**\n * Configuration options for the LangChain Vue plugin.\n * These provide default values that `useStream` will pick up automatically.\n */\nexport interface LangChainPluginOptions {\n /** Base URL of the LangGraph API. */\n apiUrl?: string;\n /** API key for authenticating with the LangGraph API. */\n apiKey?: string;\n /** Pre-configured Client instance. */\n client?: Client;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst STREAM_CONTEXT_KEY: InjectionKey<any> = Symbol(\"langchain-stream\");\n\nexport const LANGCHAIN_OPTIONS: InjectionKey<LangChainPluginOptions> =\n Symbol(\"langchain-options\");\n\n/**\n * Vue plugin that provides default LangGraph configuration to all components.\n *\n * When installed, `useStream` composables throughout the application will\n * automatically use the configured `apiUrl` and `client` without requiring\n * explicit options.\n *\n * @example\n * ```typescript\n * import { createApp } from \"vue\";\n * import { LangChainPlugin } from \"@langchain/vue\";\n * import App from \"./App.vue\";\n *\n * const app = createApp(App);\n * app.use(LangChainPlugin, {\n * apiUrl: \"http://localhost:2024\",\n * });\n * app.mount(\"#app\");\n * ```\n *\n * Then in any component:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStream } from \"@langchain/vue\";\n *\n * // apiUrl is inherited from the plugin — no need to repeat it\n * const stream = useStream({ assistantId: \"agent\" });\n * </script>\n * ```\n */\nexport const LangChainPlugin: Plugin<[LangChainPluginOptions?]> = {\n install(app: App, options: LangChainPluginOptions = {}) {\n app.provide(LANGCHAIN_OPTIONS, options);\n },\n};\n\n/**\n * Creates a shared `useStream` instance and provides it to all descendant\n * components via Vue's `provide`/`inject`.\n *\n * Call this in a parent component's `<script setup>` to make the stream\n * available to children via `useStreamContext()`.\n *\n * @example\n * ```vue\n * <!-- ChatContainer.vue -->\n * <script setup lang=\"ts\">\n * import { provideStream } from \"@langchain/vue\";\n *\n * provideStream({ assistantId: \"agent\", apiUrl: \"http://localhost:2024\" });\n * </script>\n *\n * <template>\n * <ChatHeader />\n * <MessageList />\n * <MessageInput />\n * </template>\n * ```\n *\n * @returns The stream instance (same as calling `useStream` directly).\n */\nexport function provideStream<\n T = Record<string, unknown>,\n Bag extends BagTemplate = BagTemplate,\n>(\n options:\n | ResolveStreamOptions<T, InferBag<T, Bag>>\n | UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>>\n): ReturnType<typeof useStream<T, Bag>> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const stream = useStream<T, Bag>(options as any);\n provide(STREAM_CONTEXT_KEY, stream);\n return stream;\n}\n\n/**\n * Accesses the shared stream instance from the nearest ancestor that\n * called `provideStream()`.\n *\n * Throws if no ancestor has provided a stream.\n *\n * @example\n * ```vue\n * <!-- MessageList.vue -->\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n *\n * const { messages } = useStreamContext();\n * </script>\n *\n * <template>\n * <div v-for=\"(msg, i) in messages.value\" :key=\"msg.id ?? i\">\n * {{ msg.content }}\n * </div>\n * </template>\n * ```\n *\n * @example With type parameters for full type safety:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n * import type { agent } from \"./agent\";\n *\n * const { toolCalls } = useStreamContext<typeof agent>();\n * </script>\n * ```\n */\nexport function useStreamContext<\n T = Record<string, unknown>,\n Bag extends BagTemplate = BagTemplate,\n>(): ReturnType<typeof useStream<T, Bag>> {\n const context = inject(STREAM_CONTEXT_KEY);\n if (context == null) {\n throw new Error(\n \"useStreamContext() requires a parent component to call provideStream(). \" +\n \"Add provideStream({ assistantId: '...' }) in an ancestor component.\"\n );\n }\n return context;\n}\n"],"mappings":";;;AAyBA,MAAM,qBAAwC,OAAO,mBAAmB;AAExE,MAAa,oBACX,OAAO,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC7B,MAAa,kBAAqD,EAChE,QAAQ,KAAU,UAAkC,EAAE,EAAE;AACtD,KAAI,QAAQ,mBAAmB,QAAQ;GAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,SAAgB,cAId,SAGsC;CAEtC,MAAM,SAASA,cAAAA,UAAkB,QAAe;AAChD,EAAA,GAAA,IAAA,SAAQ,oBAAoB,OAAO;AACnC,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCT,SAAgB,mBAG0B;CACxC,MAAM,WAAA,GAAA,IAAA,QAAiB,mBAAmB;AAC1C,KAAI,WAAW,KACb,OAAM,IAAI,MACR,8IAED;AAEH,QAAO"}
1
+ {"version":3,"file":"context.cjs","names":["useStream"],"sources":["../src/context.ts"],"sourcesContent":["import { provide, inject, type InjectionKey, type App, type Plugin } from \"vue\";\nimport { Client } from \"@langchain/langgraph-sdk\";\nimport { useStream } from \"./use-stream.js\";\n\n/**\n * Configuration options for the LangChain Vue plugin.\n * These provide default values that `useStream` will pick up automatically.\n */\nexport interface LangChainPluginOptions {\n /** Base URL of the LangGraph API. */\n apiUrl?: string;\n /** API key for authenticating with the LangGraph API. */\n apiKey?: string;\n /** Pre-configured Client instance. */\n client?: Client;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst STREAM_CONTEXT_KEY: InjectionKey<any> = Symbol(\"langchain-stream\");\n\nexport const LANGCHAIN_OPTIONS: InjectionKey<LangChainPluginOptions> =\n Symbol(\"langchain-options\");\n\n/**\n * Vue plugin that provides default LangGraph configuration to all components.\n *\n * When installed, `useStream` composables throughout the application will\n * automatically use the configured `apiUrl` and `client` without requiring\n * explicit options.\n *\n * @example\n * ```typescript\n * import { createApp } from \"vue\";\n * import { LangChainPlugin } from \"@langchain/vue\";\n * import App from \"./App.vue\";\n *\n * const app = createApp(App);\n * app.use(LangChainPlugin, {\n * apiUrl: \"http://localhost:2024\",\n * });\n * app.mount(\"#app\");\n * ```\n *\n * Then in any component:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStream } from \"@langchain/vue\";\n *\n * // apiUrl is inherited from the plugin — no need to repeat it\n * const stream = useStream({ assistantId: \"agent\" });\n * </script>\n * ```\n */\nexport const LangChainPlugin: Plugin<[LangChainPluginOptions?]> = {\n install(app: App, options: LangChainPluginOptions = {}) {\n app.provide(LANGCHAIN_OPTIONS, options);\n },\n};\n\n/**\n * Creates a shared `useStream` instance and provides it to all descendant\n * components via Vue's `provide`/`inject`.\n *\n * Call this in a parent component's `<script setup>` to make the stream\n * available to children via `useStreamContext()`.\n *\n * @example\n * ```vue\n * <!-- ChatContainer.vue -->\n * <script setup lang=\"ts\">\n * import { provideStream } from \"@langchain/vue\";\n *\n * provideStream({ assistantId: \"agent\", apiUrl: \"http://localhost:2024\" });\n * </script>\n *\n * <template>\n * <ChatHeader />\n * <MessageList />\n * <MessageInput />\n * </template>\n * ```\n *\n * @returns The stream instance (same as calling `useStream` directly).\n */\nexport function provideStream<\n T = Record<string, unknown>,\n InterruptType = unknown,\n ConfigurableType extends object = Record<string, unknown>,\n>(\n options: Parameters<typeof useStream>[0]\n): ReturnType<typeof useStream<T, InterruptType, ConfigurableType>> {\n const stream = useStream<T, InterruptType, ConfigurableType>(\n // The context helper is a thin pass-through; keep its generic surface\n // aligned with useStream without re-deriving the overload input type.\n options as Parameters<\n typeof useStream<T, InterruptType, ConfigurableType>\n >[0]\n );\n provide(STREAM_CONTEXT_KEY, stream);\n return stream;\n}\n\n/**\n * Accesses the shared stream instance from the nearest ancestor that\n * called `provideStream()`.\n *\n * Throws if no ancestor has provided a stream.\n *\n * @example\n * ```vue\n * <!-- MessageList.vue -->\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n *\n * const { messages } = useStreamContext();\n * </script>\n *\n * <template>\n * <div v-for=\"(msg, i) in messages.value\" :key=\"msg.id ?? i\">\n * {{ msg.content }}\n * </div>\n * </template>\n * ```\n *\n * @example With type parameters for full type safety:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n * import type { agent } from \"./agent\";\n *\n * const { toolCalls } = useStreamContext<typeof agent>();\n * </script>\n * ```\n */\nexport function useStreamContext<\n T = Record<string, unknown>,\n InterruptType = unknown,\n ConfigurableType extends object = Record<string, unknown>,\n>(): ReturnType<typeof useStream<T, InterruptType, ConfigurableType>> {\n const context = inject(STREAM_CONTEXT_KEY);\n if (context == null) {\n throw new Error(\n \"useStreamContext() requires a parent component to call provideStream(). \" +\n \"Add provideStream({ assistantId: '...' }) in an ancestor component.\"\n );\n }\n return context;\n}\n"],"mappings":";;;AAkBA,MAAM,qBAAwC,OAAO,mBAAmB;AAExE,MAAa,oBACX,OAAO,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC7B,MAAa,kBAAqD,EAChE,QAAQ,KAAU,UAAkC,EAAE,EAAE;AACtD,KAAI,QAAQ,mBAAmB,QAAQ;GAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,SAAgB,cAKd,SACkE;CAClE,MAAM,SAASA,mBAAAA,UAGb,QAGD;AACD,EAAA,GAAA,IAAA,SAAQ,oBAAoB,OAAO;AACnC,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCT,SAAgB,mBAIsD;CACpE,MAAM,WAAA,GAAA,IAAA,QAAiB,mBAAmB;AAC1C,KAAI,WAAW,KACb,OAAM,IAAI,MACR,8IAED;AAEH,QAAO"}
@@ -1,7 +1,6 @@
1
- import { useStream } from "./index.cjs";
1
+ import { useStream } from "./use-stream.cjs";
2
2
  import { InjectionKey, Plugin } from "vue";
3
- import { InferBag, InferStateType, ResolveStreamOptions, UseStreamCustomOptions } from "@langchain/langgraph-sdk/ui";
4
- import { BagTemplate, Client } from "@langchain/langgraph-sdk";
3
+ import { Client } from "@langchain/langgraph-sdk";
5
4
 
6
5
  //#region src/context.d.ts
7
6
  /**
@@ -73,7 +72,7 @@ declare const LangChainPlugin: Plugin<[LangChainPluginOptions?]>;
73
72
  *
74
73
  * @returns The stream instance (same as calling `useStream` directly).
75
74
  */
76
- declare function provideStream<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(options: ResolveStreamOptions<T, InferBag<T, Bag>> | UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>>): ReturnType<typeof useStream<T, Bag>>;
75
+ declare function provideStream<T = Record<string, unknown>, InterruptType = unknown, ConfigurableType extends object = Record<string, unknown>>(options: Parameters<typeof useStream>[0]): ReturnType<typeof useStream<T, InterruptType, ConfigurableType>>;
77
76
  /**
78
77
  * Accesses the shared stream instance from the nearest ancestor that
79
78
  * called `provideStream()`.
@@ -106,7 +105,7 @@ declare function provideStream<T = Record<string, unknown>, Bag extends BagTempl
106
105
  * </script>
107
106
  * ```
108
107
  */
109
- declare function useStreamContext<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(): ReturnType<typeof useStream<T, Bag>>;
108
+ declare function useStreamContext<T = Record<string, unknown>, InterruptType = unknown, ConfigurableType extends object = Record<string, unknown>>(): ReturnType<typeof useStream<T, InterruptType, ConfigurableType>>;
110
109
  //#endregion
111
110
  export { LANGCHAIN_OPTIONS, LangChainPlugin, LangChainPluginOptions, provideStream, useStreamContext };
112
111
  //# sourceMappingURL=context.d.cts.map
@@ -1 +1 @@
1
- {"version":3,"file":"context.d.cts","names":[],"sources":["../src/context.ts"],"mappings":";;;;;;;AAeA;;;UAAiB,sBAAA;EAEf;EAAA,MAAA;EAIA;EAFA,MAAA;EAEe;EAAf,MAAA,GAAS,MAAA;AAAA;AAAA,cAME,iBAAA,EAAmB,YAAA,CAAa,sBAAA;;;;AAiC7C;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;cA/Ba,eAAA,EAAiB,MAAA,EAAQ,sBAAA;;;;;;;;;;;;;;;;;;;;;;;;AA6EtC;;iBA9CgB,aAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAE1B,OAAA,EACI,oBAAA,CAAqB,CAAA,EAAG,QAAA,CAAS,CAAA,EAAG,GAAA,KACpC,sBAAA,CAAuB,cAAA,CAAe,CAAA,GAAI,QAAA,CAAS,CAAA,EAAG,GAAA,KACzD,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuClB,gBAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAAA,GACvB,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA"}
1
+ {"version":3,"file":"context.d.cts","names":[],"sources":["../src/context.ts"],"mappings":";;;;;;;AAQA;;UAAiB,sBAAA;EAMA;EAJf,MAAA;EAEA;EAAA,MAAA;EAES;EAAT,MAAA,GAAS,MAAA;AAAA;AAAA,cAME,iBAAA,EAAmB,YAAA,CAAa,sBAAA;;;;;AAiC7C;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;cA/Ba,eAAA,EAAiB,MAAA,EAAQ,sBAAA;;;;;;;;AAiFtC;;;;;;;;;;;;;;;;;;iBAlDgB,aAAA,KACV,MAAA,8EAE8B,MAAA,kBAAA,CAElC,OAAA,EAAS,UAAA,QAAkB,SAAA,OAC1B,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,aAAA,EAAe,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4CjC,gBAAA,KACV,MAAA,8EAE8B,MAAA,kBAAA,CAAA,GAC/B,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,aAAA,EAAe,gBAAA"}
package/dist/context.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { useStream } from "./index.js";
1
+ import { useStream } from "./use-stream.js";
2
2
  import { InjectionKey, Plugin } from "vue";
3
- import { InferBag, InferStateType, ResolveStreamOptions, UseStreamCustomOptions } from "@langchain/langgraph-sdk/ui";
4
- import { BagTemplate, Client } from "@langchain/langgraph-sdk";
3
+ import { Client } from "@langchain/langgraph-sdk";
5
4
 
6
5
  //#region src/context.d.ts
7
6
  /**
@@ -73,7 +72,7 @@ declare const LangChainPlugin: Plugin<[LangChainPluginOptions?]>;
73
72
  *
74
73
  * @returns The stream instance (same as calling `useStream` directly).
75
74
  */
76
- declare function provideStream<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(options: ResolveStreamOptions<T, InferBag<T, Bag>> | UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>>): ReturnType<typeof useStream<T, Bag>>;
75
+ declare function provideStream<T = Record<string, unknown>, InterruptType = unknown, ConfigurableType extends object = Record<string, unknown>>(options: Parameters<typeof useStream>[0]): ReturnType<typeof useStream<T, InterruptType, ConfigurableType>>;
77
76
  /**
78
77
  * Accesses the shared stream instance from the nearest ancestor that
79
78
  * called `provideStream()`.
@@ -106,7 +105,7 @@ declare function provideStream<T = Record<string, unknown>, Bag extends BagTempl
106
105
  * </script>
107
106
  * ```
108
107
  */
109
- declare function useStreamContext<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(): ReturnType<typeof useStream<T, Bag>>;
108
+ declare function useStreamContext<T = Record<string, unknown>, InterruptType = unknown, ConfigurableType extends object = Record<string, unknown>>(): ReturnType<typeof useStream<T, InterruptType, ConfigurableType>>;
110
109
  //#endregion
111
110
  export { LANGCHAIN_OPTIONS, LangChainPlugin, LangChainPluginOptions, provideStream, useStreamContext };
112
111
  //# sourceMappingURL=context.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"context.d.ts","names":[],"sources":["../src/context.ts"],"mappings":";;;;;;;AAeA;;;UAAiB,sBAAA;EAEf;EAAA,MAAA;EAIA;EAFA,MAAA;EAEe;EAAf,MAAA,GAAS,MAAA;AAAA;AAAA,cAME,iBAAA,EAAmB,YAAA,CAAa,sBAAA;;;;AAiC7C;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;cA/Ba,eAAA,EAAiB,MAAA,EAAQ,sBAAA;;;;;;;;;;;;;;;;;;;;;;;;AA6EtC;;iBA9CgB,aAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAE1B,OAAA,EACI,oBAAA,CAAqB,CAAA,EAAG,QAAA,CAAS,CAAA,EAAG,GAAA,KACpC,sBAAA,CAAuB,cAAA,CAAe,CAAA,GAAI,QAAA,CAAS,CAAA,EAAG,GAAA,KACzD,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuClB,gBAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAAA,GACvB,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA"}
1
+ {"version":3,"file":"context.d.ts","names":[],"sources":["../src/context.ts"],"mappings":";;;;;;;AAQA;;UAAiB,sBAAA;EAMA;EAJf,MAAA;EAEA;EAAA,MAAA;EAES;EAAT,MAAA,GAAS,MAAA;AAAA;AAAA,cAME,iBAAA,EAAmB,YAAA,CAAa,sBAAA;;;;;AAiC7C;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;cA/Ba,eAAA,EAAiB,MAAA,EAAQ,sBAAA;;;;;;;;AAiFtC;;;;;;;;;;;;;;;;;;iBAlDgB,aAAA,KACV,MAAA,8EAE8B,MAAA,kBAAA,CAElC,OAAA,EAAS,UAAA,QAAkB,SAAA,OAC1B,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,aAAA,EAAe,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4CjC,gBAAA,KACV,MAAA,8EAE8B,MAAA,kBAAA,CAAA,GAC/B,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,aAAA,EAAe,gBAAA"}
package/dist/context.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useStream } from "./index.js";
1
+ import { useStream } from "./use-stream.js";
2
2
  import { inject, provide } from "vue";
3
3
  //#region src/context.ts
4
4
  const STREAM_CONTEXT_KEY = Symbol("langchain-stream");
@@ -1 +1 @@
1
- {"version":3,"file":"context.js","names":[],"sources":["../src/context.ts"],"sourcesContent":["import { provide, inject, type InjectionKey, type App, type Plugin } from \"vue\";\nimport type { BagTemplate } from \"@langchain/langgraph-sdk\";\nimport type {\n ResolveStreamOptions,\n InferBag,\n InferStateType,\n UseStreamCustomOptions,\n} from \"@langchain/langgraph-sdk/ui\";\nimport { Client } from \"@langchain/langgraph-sdk\";\nimport { useStream } from \"./index.js\";\n\n/**\n * Configuration options for the LangChain Vue plugin.\n * These provide default values that `useStream` will pick up automatically.\n */\nexport interface LangChainPluginOptions {\n /** Base URL of the LangGraph API. */\n apiUrl?: string;\n /** API key for authenticating with the LangGraph API. */\n apiKey?: string;\n /** Pre-configured Client instance. */\n client?: Client;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst STREAM_CONTEXT_KEY: InjectionKey<any> = Symbol(\"langchain-stream\");\n\nexport const LANGCHAIN_OPTIONS: InjectionKey<LangChainPluginOptions> =\n Symbol(\"langchain-options\");\n\n/**\n * Vue plugin that provides default LangGraph configuration to all components.\n *\n * When installed, `useStream` composables throughout the application will\n * automatically use the configured `apiUrl` and `client` without requiring\n * explicit options.\n *\n * @example\n * ```typescript\n * import { createApp } from \"vue\";\n * import { LangChainPlugin } from \"@langchain/vue\";\n * import App from \"./App.vue\";\n *\n * const app = createApp(App);\n * app.use(LangChainPlugin, {\n * apiUrl: \"http://localhost:2024\",\n * });\n * app.mount(\"#app\");\n * ```\n *\n * Then in any component:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStream } from \"@langchain/vue\";\n *\n * // apiUrl is inherited from the plugin — no need to repeat it\n * const stream = useStream({ assistantId: \"agent\" });\n * </script>\n * ```\n */\nexport const LangChainPlugin: Plugin<[LangChainPluginOptions?]> = {\n install(app: App, options: LangChainPluginOptions = {}) {\n app.provide(LANGCHAIN_OPTIONS, options);\n },\n};\n\n/**\n * Creates a shared `useStream` instance and provides it to all descendant\n * components via Vue's `provide`/`inject`.\n *\n * Call this in a parent component's `<script setup>` to make the stream\n * available to children via `useStreamContext()`.\n *\n * @example\n * ```vue\n * <!-- ChatContainer.vue -->\n * <script setup lang=\"ts\">\n * import { provideStream } from \"@langchain/vue\";\n *\n * provideStream({ assistantId: \"agent\", apiUrl: \"http://localhost:2024\" });\n * </script>\n *\n * <template>\n * <ChatHeader />\n * <MessageList />\n * <MessageInput />\n * </template>\n * ```\n *\n * @returns The stream instance (same as calling `useStream` directly).\n */\nexport function provideStream<\n T = Record<string, unknown>,\n Bag extends BagTemplate = BagTemplate,\n>(\n options:\n | ResolveStreamOptions<T, InferBag<T, Bag>>\n | UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>>\n): ReturnType<typeof useStream<T, Bag>> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const stream = useStream<T, Bag>(options as any);\n provide(STREAM_CONTEXT_KEY, stream);\n return stream;\n}\n\n/**\n * Accesses the shared stream instance from the nearest ancestor that\n * called `provideStream()`.\n *\n * Throws if no ancestor has provided a stream.\n *\n * @example\n * ```vue\n * <!-- MessageList.vue -->\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n *\n * const { messages } = useStreamContext();\n * </script>\n *\n * <template>\n * <div v-for=\"(msg, i) in messages.value\" :key=\"msg.id ?? i\">\n * {{ msg.content }}\n * </div>\n * </template>\n * ```\n *\n * @example With type parameters for full type safety:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n * import type { agent } from \"./agent\";\n *\n * const { toolCalls } = useStreamContext<typeof agent>();\n * </script>\n * ```\n */\nexport function useStreamContext<\n T = Record<string, unknown>,\n Bag extends BagTemplate = BagTemplate,\n>(): ReturnType<typeof useStream<T, Bag>> {\n const context = inject(STREAM_CONTEXT_KEY);\n if (context == null) {\n throw new Error(\n \"useStreamContext() requires a parent component to call provideStream(). \" +\n \"Add provideStream({ assistantId: '...' }) in an ancestor component.\"\n );\n }\n return context;\n}\n"],"mappings":";;;AAyBA,MAAM,qBAAwC,OAAO,mBAAmB;AAExE,MAAa,oBACX,OAAO,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC7B,MAAa,kBAAqD,EAChE,QAAQ,KAAU,UAAkC,EAAE,EAAE;AACtD,KAAI,QAAQ,mBAAmB,QAAQ;GAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,SAAgB,cAId,SAGsC;CAEtC,MAAM,SAAS,UAAkB,QAAe;AAChD,SAAQ,oBAAoB,OAAO;AACnC,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCT,SAAgB,mBAG0B;CACxC,MAAM,UAAU,OAAO,mBAAmB;AAC1C,KAAI,WAAW,KACb,OAAM,IAAI,MACR,8IAED;AAEH,QAAO"}
1
+ {"version":3,"file":"context.js","names":[],"sources":["../src/context.ts"],"sourcesContent":["import { provide, inject, type InjectionKey, type App, type Plugin } from \"vue\";\nimport { Client } from \"@langchain/langgraph-sdk\";\nimport { useStream } from \"./use-stream.js\";\n\n/**\n * Configuration options for the LangChain Vue plugin.\n * These provide default values that `useStream` will pick up automatically.\n */\nexport interface LangChainPluginOptions {\n /** Base URL of the LangGraph API. */\n apiUrl?: string;\n /** API key for authenticating with the LangGraph API. */\n apiKey?: string;\n /** Pre-configured Client instance. */\n client?: Client;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst STREAM_CONTEXT_KEY: InjectionKey<any> = Symbol(\"langchain-stream\");\n\nexport const LANGCHAIN_OPTIONS: InjectionKey<LangChainPluginOptions> =\n Symbol(\"langchain-options\");\n\n/**\n * Vue plugin that provides default LangGraph configuration to all components.\n *\n * When installed, `useStream` composables throughout the application will\n * automatically use the configured `apiUrl` and `client` without requiring\n * explicit options.\n *\n * @example\n * ```typescript\n * import { createApp } from \"vue\";\n * import { LangChainPlugin } from \"@langchain/vue\";\n * import App from \"./App.vue\";\n *\n * const app = createApp(App);\n * app.use(LangChainPlugin, {\n * apiUrl: \"http://localhost:2024\",\n * });\n * app.mount(\"#app\");\n * ```\n *\n * Then in any component:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStream } from \"@langchain/vue\";\n *\n * // apiUrl is inherited from the plugin — no need to repeat it\n * const stream = useStream({ assistantId: \"agent\" });\n * </script>\n * ```\n */\nexport const LangChainPlugin: Plugin<[LangChainPluginOptions?]> = {\n install(app: App, options: LangChainPluginOptions = {}) {\n app.provide(LANGCHAIN_OPTIONS, options);\n },\n};\n\n/**\n * Creates a shared `useStream` instance and provides it to all descendant\n * components via Vue's `provide`/`inject`.\n *\n * Call this in a parent component's `<script setup>` to make the stream\n * available to children via `useStreamContext()`.\n *\n * @example\n * ```vue\n * <!-- ChatContainer.vue -->\n * <script setup lang=\"ts\">\n * import { provideStream } from \"@langchain/vue\";\n *\n * provideStream({ assistantId: \"agent\", apiUrl: \"http://localhost:2024\" });\n * </script>\n *\n * <template>\n * <ChatHeader />\n * <MessageList />\n * <MessageInput />\n * </template>\n * ```\n *\n * @returns The stream instance (same as calling `useStream` directly).\n */\nexport function provideStream<\n T = Record<string, unknown>,\n InterruptType = unknown,\n ConfigurableType extends object = Record<string, unknown>,\n>(\n options: Parameters<typeof useStream>[0]\n): ReturnType<typeof useStream<T, InterruptType, ConfigurableType>> {\n const stream = useStream<T, InterruptType, ConfigurableType>(\n // The context helper is a thin pass-through; keep its generic surface\n // aligned with useStream without re-deriving the overload input type.\n options as Parameters<\n typeof useStream<T, InterruptType, ConfigurableType>\n >[0]\n );\n provide(STREAM_CONTEXT_KEY, stream);\n return stream;\n}\n\n/**\n * Accesses the shared stream instance from the nearest ancestor that\n * called `provideStream()`.\n *\n * Throws if no ancestor has provided a stream.\n *\n * @example\n * ```vue\n * <!-- MessageList.vue -->\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n *\n * const { messages } = useStreamContext();\n * </script>\n *\n * <template>\n * <div v-for=\"(msg, i) in messages.value\" :key=\"msg.id ?? i\">\n * {{ msg.content }}\n * </div>\n * </template>\n * ```\n *\n * @example With type parameters for full type safety:\n * ```vue\n * <script setup lang=\"ts\">\n * import { useStreamContext } from \"@langchain/vue\";\n * import type { agent } from \"./agent\";\n *\n * const { toolCalls } = useStreamContext<typeof agent>();\n * </script>\n * ```\n */\nexport function useStreamContext<\n T = Record<string, unknown>,\n InterruptType = unknown,\n ConfigurableType extends object = Record<string, unknown>,\n>(): ReturnType<typeof useStream<T, InterruptType, ConfigurableType>> {\n const context = inject(STREAM_CONTEXT_KEY);\n if (context == null) {\n throw new Error(\n \"useStreamContext() requires a parent component to call provideStream(). \" +\n \"Add provideStream({ assistantId: '...' }) in an ancestor component.\"\n );\n }\n return context;\n}\n"],"mappings":";;;AAkBA,MAAM,qBAAwC,OAAO,mBAAmB;AAExE,MAAa,oBACX,OAAO,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC7B,MAAa,kBAAqD,EAChE,QAAQ,KAAU,UAAkC,EAAE,EAAE;AACtD,KAAI,QAAQ,mBAAmB,QAAQ;GAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,SAAgB,cAKd,SACkE;CAClE,MAAM,SAAS,UAGb,QAGD;AACD,SAAQ,oBAAoB,OAAO;AACnC,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCT,SAAgB,mBAIsD;CACpE,MAAM,UAAU,OAAO,mBAAmB;AAC1C,KAAI,WAAW,KACb,OAAM,IAAI,MACR,8IAED;AAEH,QAAO"}