@yak-io/vue 0.1.0

package/LICENSE

@@ -0,0 +1,36 @@
+Yak Proprietary License
+
+Copyright (c) 2025 Yak. All rights reserved.
+
+This software and associated documentation files (the "Software") are the
+proprietary property of Yak and are protected by copyright law.
+
+GRANT OF LICENSE:
+Subject to the terms of this license and your valid subscription or agreement
+with Yak, you are granted a limited, non-exclusive, non-transferable license
+to use the Software solely for integrating the Yak chatbot widget into your
+applications as intended and documented.
+
+RESTRICTIONS:
+You may NOT:
+- Modify, adapt, alter, translate, or create derivative works of the Software
+- Reverse engineer, disassemble, decompile, or otherwise attempt to derive
+  the source code of the Software
+- Redistribute, sublicense, lease, rent, or lend the Software to third parties
+- Remove or alter any proprietary notices, labels, or marks on the Software
+- Use the Software for any purpose other than as expressly permitted herein
+
+NO WARRANTY:
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL YAK
+BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+TERMINATION:
+This license is effective until terminated. Your rights under this license
+will terminate automatically without notice if you fail to comply with any
+of its terms.
+
+For licensing inquiries, contact: support@yak.io

package/dist/composables.d.ts

@@ -0,0 +1,64 @@
+import { type Ref, type DeepReadonly } from "vue";
+import { type TriggerButtonConfig, type ChatConfigProvider, type ToolCallHandler, type ToolCallEvent, type GraphQLSchemaHandler, type RESTSchemaHandler, type Theme } from "@yak-io/javascript";
+export type ToolCallEventHandler = (event: ToolCallEvent) => void;
+export type YakProviderOptions = {
+    appId: string;
+    getConfig?: ChatConfigProvider;
+    onToolCall?: ToolCallHandler;
+    onGraphQLSchemaCall?: GraphQLSchemaHandler;
+    onRESTSchemaCall?: RESTSchemaHandler;
+    theme?: Theme;
+    onRedirect?: (path: string) => void;
+    disableRestartButton?: boolean;
+    trigger?: boolean | TriggerButtonConfig;
+};
+export type YakApi = {
+    isOpen: DeepReadonly<Ref<boolean>>;
+    isReady: DeepReadonly<Ref<boolean>>;
+    open: () => void;
+    close: () => void;
+    openWithPrompt: (prompt: string) => void;
+    subscribeToToolEvents: (handler: ToolCallEventHandler) => () => void;
+};
+/**
+ * Sets up the yak chat widget and provides it to descendant components.
+ * Call this once in a root/layout component.
+ *
+ * @example
+ * ```ts
+ * // App.vue <script setup>
+ * import { createYakProvider } from "@yak-io/vue";
+ *
+ * createYakProvider({
+ *   appId: "my-app",
+ *   trigger: { label: "Ask with AI" },
+ * });
+ * ```
+ */
+export declare function createYakProvider(options: YakProviderOptions): YakApi;
+/**
+ * Access the yak chat widget API.
+ *
+ * @example
+ * ```ts
+ * const { open, isOpen, openWithPrompt } = useYak();
+ * ```
+ *
+ * @throws {Error} if used outside a component tree with createYakProvider
+ */
+export declare function useYak(): YakApi;
+/**
+ * Subscribe to tool call completion events.
+ * Automatically cleans up on component unmount.
+ *
+ * @example
+ * ```ts
+ * useYakToolEvent((event) => {
+ *   if (event.ok && event.name.startsWith("task.")) {
+ *     refreshTasks();
+ *   }
+ * });
+ * ```
+ */
+export declare function useYakToolEvent(handler: ToolCallEventHandler): void;
+//# sourceMappingURL=composables.d.ts.map

package/dist/composables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables.d.ts","sourceRoot":"","sources":["../src/composables.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,GAAG,EACR,KAAK,YAAY,EAClB,MAAM,KAAK,CAAC;AACb,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,KAAK,EACX,MAAM,oBAAoB,CAAC;AAK5B,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACnC,OAAO,EAAE,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;IACpC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,qBAAqB,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,IAAI,CAAC;CACtE,CAAC;AAQF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM,CA6FrE;AAID;;;;;;;;;GASG;AACH,wBAAgB,MAAM,IAAI,MAAM,CAM/B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAUnE"}

package/dist/composables.js

@@ -0,0 +1,142 @@
+import { ref, readonly, onMounted, onUnmounted, inject, provide, } from "vue";
+import { YakEmbed, } from "@yak-io/javascript";
+import { logger } from "./internal/logger.js";
+// ── Injection key ───────────────────────────────────────────────────────────
+const YAK_KEY = Symbol("yak");
+// ── Provider composable ─────────────────────────────────────────────────────
+/**
+ * Sets up the yak chat widget and provides it to descendant components.
+ * Call this once in a root/layout component.
+ *
+ * @example
+ * ```ts
+ * // App.vue <script setup>
+ * import { createYakProvider } from "@yak-io/vue";
+ *
+ * createYakProvider({
+ *   appId: "my-app",
+ *   trigger: { label: "Ask with AI" },
+ * });
+ * ```
+ */
+export function createYakProvider(options) {
+    const isOpen = ref(false);
+    const isReady = ref(false);
+    const toolEventSubscribers = new Set();
+    const handleToolCallComplete = (event) => {
+        logger.debug("Tool call completed, notifying subscribers:", {
+            name: event.name,
+            ok: event.ok,
+            subscriberCount: toolEventSubscribers.size,
+        });
+        for (const handler of toolEventSubscribers) {
+            try {
+                handler(event);
+            }
+            catch (err) {
+                logger.warn("Error in tool event subscriber:", err);
+            }
+        }
+    };
+    const resolvedRedirect = options.onRedirect ??
+        (typeof window !== "undefined" ? (path) => window.location.assign(path) : undefined);
+    const embed = new YakEmbed({
+        appId: options.appId,
+        theme: options.theme,
+        trigger: options.trigger ?? false,
+        onToolCall: options.onToolCall,
+        onGraphQLSchemaCall: options.onGraphQLSchemaCall,
+        onRESTSchemaCall: options.onRESTSchemaCall,
+        onRedirect: resolvedRedirect,
+        options: { disableRestartButton: options.disableRestartButton },
+        onToolCallComplete: handleToolCallComplete,
+    });
+    // Subscribe to state changes
+    embed.onStateChange((state) => {
+        isOpen.value = state.isOpen;
+        isReady.value = state.isReady;
+    });
+    // Mount/unmount with component lifecycle
+    onMounted(() => {
+        embed.mount();
+    });
+    onUnmounted(() => {
+        embed.destroy();
+    });
+    // Fetch chat config when widget opens
+    if (options.getConfig) {
+        const getConfig = options.getConfig;
+        let configFetched = false;
+        embed.onStateChange((state) => {
+            if (state.isOpen && !configFetched) {
+                configFetched = true;
+                logger.debug("Getting chat config");
+                Promise.resolve(getConfig())
+                    .then((config) => {
+                    logger.debug(`Chat config loaded with ${config.tools?.tools.length ?? 0} tools and ${config.routes?.routes.length ?? 0} routes`);
+                    embed.getClient().updateConfig({ chatConfig: config });
+                })
+                    .catch((err) => {
+                    logger.warn("Error getting chat config:", err);
+                    configFetched = false;
+                });
+            }
+        });
+    }
+    const api = {
+        isOpen: readonly(isOpen),
+        isReady: readonly(isReady),
+        open: () => embed.open(),
+        close: () => embed.close(),
+        openWithPrompt: (prompt) => embed.openWithPrompt(prompt),
+        subscribeToToolEvents: (handler) => {
+            toolEventSubscribers.add(handler);
+            return () => {
+                toolEventSubscribers.delete(handler);
+            };
+        },
+    };
+    provide(YAK_KEY, api);
+    return api;
+}
+// ── Consumer composables ────────────────────────────────────────────────────
+/**
+ * Access the yak chat widget API.
+ *
+ * @example
+ * ```ts
+ * const { open, isOpen, openWithPrompt } = useYak();
+ * ```
+ *
+ * @throws {Error} if used outside a component tree with createYakProvider
+ */
+export function useYak() {
+    const api = inject(YAK_KEY);
+    if (!api) {
+        throw new Error("useYak() requires createYakProvider() in an ancestor component");
+    }
+    return api;
+}
+/**
+ * Subscribe to tool call completion events.
+ * Automatically cleans up on component unmount.
+ *
+ * @example
+ * ```ts
+ * useYakToolEvent((event) => {
+ *   if (event.ok && event.name.startsWith("task.")) {
+ *     refreshTasks();
+ *   }
+ * });
+ * ```
+ */
+export function useYakToolEvent(handler) {
+    const api = inject(YAK_KEY);
+    if (!api) {
+        throw new Error("useYakToolEvent() requires createYakProvider() in an ancestor component");
+    }
+    onMounted(() => {
+        const unsubscribe = api.subscribeToToolEvents(handler);
+        onUnmounted(unsubscribe);
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { useYak, useYakToolEvent, createYakProvider } from "./composables.js";
+export type { YakProviderOptions, YakApi, ToolCallEventHandler } from "./composables.js";
+export { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/javascript";
+export type { GraphQLSchemaHandler, RESTSchemaHandler, GraphQLRequest, RESTRequest, ToolCallHandler, ToolCallEvent, SchemaSource, GraphQLSchemaSource, OpenAPISchemaSource, Theme, ThemeColors, TriggerButtonConfig, WidgetPosition, ChatConfigProvider, } from "@yak-io/javascript";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC9E,YAAY,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGzF,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9F,YAAY,EACV,oBAAoB,EACpB,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,eAAe,EACf,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,kBAAkB,GACnB,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+// Public API
+export { useYak, useYakToolEvent, createYakProvider } from "./composables.js";
+// Re-export logging utilities
+export { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/javascript";

package/dist/internal/logger.d.ts

@@ -0,0 +1,2 @@
+export { logger } from "@yak-io/javascript";
+//# sourceMappingURL=logger.d.ts.map

package/dist/internal/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/internal/logger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/internal/logger.js

@@ -0,0 +1 @@
+export { logger } from "@yak-io/javascript";

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@yak-io/vue",
+  "version": "0.1.0",
+  "description": "Vue SDK for embedding yak chatbot",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Yak <support@yak.io>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/388-labs/yak.git",
+    "directory": "packages/vue"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": ["yak", "chatbot", "ai", "widget", "chat", "vue"],
+  "engines": {
+    "node": ">=18"
+  },
+  "files": ["dist", "LICENSE"],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsc",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run",
+    "lint": "biome lint ./src --fix",
+    "format": "biome format ./src --write",
+    "prepare": "pnpm build"
+  },
+  "dependencies": {
+    "@yak-io/javascript": "workspace:*"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "@types/node": "^24.10.4",
+    "typescript": "^5.3.0",
+    "vue": "^3.5.16"
+  }
+}