@langchain/vue 0.1.3 → 0.3.0

package/dist/context.js

@@ -0,0 +1,109 @@
+import { useStream } from "./index.js";
+import { inject, provide } from "vue";
+//#region src/context.ts
+const STREAM_CONTEXT_KEY = Symbol("langchain-stream");
+const LANGCHAIN_OPTIONS = Symbol("langchain-options");
+/**
+* Vue plugin that provides default LangGraph configuration to all components.
+*
+* When installed, `useStream` composables throughout the application will
+* automatically use the configured `apiUrl` and `client` without requiring
+* explicit options.
+*
+* @example
+* ```typescript
+* import { createApp } from "vue";
+* import { LangChainPlugin } from "@langchain/vue";
+* import App from "./App.vue";
+*
+* const app = createApp(App);
+* app.use(LangChainPlugin, {
+*   apiUrl: "http://localhost:2024",
+* });
+* app.mount("#app");
+* ```
+*
+* Then in any component:
+* ```vue
+* <script setup lang="ts">
+* import { useStream } from "@langchain/vue";
+*
+* // apiUrl is inherited from the plugin — no need to repeat it
+* const stream = useStream({ assistantId: "agent" });
+* <\/script>
+* ```
+*/
+const LangChainPlugin = { install(app, options = {}) {
+	app.provide(LANGCHAIN_OPTIONS, options);
+} };
+/**
+* Creates a shared `useStream` instance and provides it to all descendant
+* components via Vue's `provide`/`inject`.
+*
+* Call this in a parent component's `<script setup>` to make the stream
+* available to children via `useStreamContext()`.
+*
+* @example
+* ```vue
+* <!-- ChatContainer.vue -->
+* <script setup lang="ts">
+* import { provideStream } from "@langchain/vue";
+*
+* provideStream({ assistantId: "agent", apiUrl: "http://localhost:2024" });
+* <\/script>
+*
+* <template>
+*   <ChatHeader />
+*   <MessageList />
+*   <MessageInput />
+* </template>
+* ```
+*
+* @returns The stream instance (same as calling `useStream` directly).
+*/
+function provideStream(options) {
+	const stream = useStream(options);
+	provide(STREAM_CONTEXT_KEY, stream);
+	return stream;
+}
+/**
+* Accesses the shared stream instance from the nearest ancestor that
+* called `provideStream()`.
+*
+* Throws if no ancestor has provided a stream.
+*
+* @example
+* ```vue
+* <!-- MessageList.vue -->
+* <script setup lang="ts">
+* import { useStreamContext } from "@langchain/vue";
+*
+* const { messages } = useStreamContext();
+* <\/script>
+*
+* <template>
+*   <div v-for="(msg, i) in messages.value" :key="msg.id ?? i">
+*     {{ msg.content }}
+*   </div>
+* </template>
+* ```
+*
+* @example With type parameters for full type safety:
+* ```vue
+* <script setup lang="ts">
+* import { useStreamContext } from "@langchain/vue";
+* import type { agent } from "./agent";
+*
+* const { toolCalls } = useStreamContext<typeof agent>();
+* <\/script>
+* ```
+*/
+function useStreamContext() {
+	const context = inject(STREAM_CONTEXT_KEY);
+	if (context == null) throw new Error("useStreamContext() requires a parent component to call provideStream(). Add provideStream({ assistantId: '...' }) in an ancestor component.");
+	return context;
+}
+//#endregion
+export { LANGCHAIN_OPTIONS, LangChainPlugin, provideStream, useStreamContext };
+
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +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"}