@yak-io/vue 0.1.1 → 0.2.0

package/README.md

@@ -0,0 +1,151 @@
+# @yak-io/vue
+
+Vue 3 integration for the Yak embeddable chat widget. Uses Vue's Composition API with reactive refs.
+
+## Installation
+
+```bash
+pnpm add @yak-io/vue
+```
+
+## Quickstart
+
+### 1. Initialize in your root component
+
+```ts
+// App.vue <script setup>
+import { createYakProvider } from "@yak-io/vue";
+
+createYakProvider({
+  appId: import.meta.env.VITE_YAK_APP_ID,
+  theme: { position: "bottom-right", colorMode: "system" },
+  trigger: { label: "Ask with AI" },
+  getConfig: async () => {
+    const res = await fetch("/api/yak");
+    return res.json();
+  },
+  onToolCall: async (name, args) => {
+    const res = await fetch("/api/yak", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, args }),
+    });
+    const data = await res.json();
+    if (!data.ok) throw new Error(data.error);
+    return data.result;
+  },
+  onRedirect: (path) => {
+    router.push(path);
+  },
+});
+```
+
+`createYakProvider` calls `onMounted` and `onUnmounted` internally — no manual lifecycle management needed.
+
+### 2. Use in descendant components
+
+```ts
+// MyComponent.vue <script setup>
+import { useYak } from "@yak-io/vue";
+
+const { open, openWithPrompt, isOpen, isReady } = useYak();
+```
+
+`isOpen` and `isReady` are `readonly` Vue refs — use them like any other ref:
+
+```html
+<template>
+  <div>
+    <button @click="open">Open Chat</button>
+    <p v-if="isOpen">Chat is open</p>
+    <p v-if="!isReady && isOpen">Loading…</p>
+  </div>
+</template>
+```
+
+### 3. Subscribe to tool events
+
+```ts
+import { useYakToolEvent } from "@yak-io/vue";
+
+useYakToolEvent((event) => {
+  if (event.ok && event.name.startsWith("tasks.")) {
+    refreshTasks();
+  }
+});
+```
+
+Automatically unsubscribes when the component unmounts.
+
+## API Reference
+
+### `createYakProvider(options)`
+
+Call once in your root/layout component. Sets up the widget, registers lifecycle hooks, and provides the API to all descendant components via Vue's `provide/inject`.
+
+Returns a `YakApi` object (same as `useYak()`).
+
+**Options:**
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `appId` | `string` | Your Yak app ID |
+| `getConfig` | `ChatConfigProvider` | Async function returning routes + tools. Called on first open. |
+| `onToolCall` | `ToolCallHandler` | Handle tool invocations from the assistant |
+| `onGraphQLSchemaCall` | `GraphQLSchemaHandler` | Handle GraphQL schema tool calls |
+| `onRESTSchemaCall` | `RESTSchemaHandler` | Handle REST/OpenAPI schema tool calls |
+| `theme` | `Theme` | Position, color mode, and custom colors |
+| `onRedirect` | `(path: string) => void` | Navigation handler (defaults to `window.location.assign`) |
+| `disableRestartButton` | `boolean` | Hide the restart session button |
+| `trigger` | `boolean \| TriggerButtonConfig` | Built-in trigger button |
+
+### `useYak()`
+
+Inject the widget API in any descendant component.
+
+```ts
+const {
+  isOpen,             // DeepReadonly<Ref<boolean>>
+  isReady,            // DeepReadonly<Ref<boolean>>
+  open,               // () => void
+  close,              // () => void
+  openWithPrompt,     // (prompt: string) => void
+  subscribeToToolEvents, // (handler) => () => void
+} = useYak();
+```
+
+Throws if called outside a component tree where `createYakProvider` was used.
+
+### `useYakToolEvent(handler)`
+
+Subscribe to tool call completion events. Unsubscribes automatically on component unmount.
+
+## Logging
+
+```ts
+import { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/vue";
+
+enableYakLogging();    // Enable verbose SDK logs
+disableYakLogging();   // Disable SDK logs
+isYakLoggingEnabled(); // → boolean
+```
+
+## Types
+
+```ts
+import type {
+  YakProviderOptions,
+  YakApi,
+  ToolCallEventHandler,
+  ChatConfigProvider,
+  ToolCallHandler,
+  ToolCallEvent,
+  Theme,
+  TriggerButtonConfig,
+  WidgetPosition,
+} from "@yak-io/vue";
+```
+
+## License
+
+Proprietary — see LICENSE file.

package/dist/composables.js

@@ -1,6 +1,6 @@
 import { ref, readonly, onMounted, onUnmounted, inject, provide, } from "vue";
 import { YakEmbed, } from "@yak-io/javascript";
-import { logger } from "./internal/logger.js";
+import { logger } from "@yak-io/javascript";
 // ── Injection key ───────────────────────────────────────────────────────────
 const YAK_KEY = Symbol("yak");
 // ── Provider composable ─────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yak-io/vue",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Vue SDK for embedding yak chatbot",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -41,13 +41,13 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@yak-io/javascript": "0.6.0"
+    "@yak-io/javascript": "0.7.0"
   },
   "peerDependencies": {
     "vue": "^3.3.0"
   },
   "devDependencies": {
-    "@types/node": "^24.10.4",
+    "@types/node": "^24.12.0",
     "typescript": "^5.3.0",
     "vue": "^3.5.16",
     "@repo/typescript-config": "0.0.0"

package/dist/internal/logger.d.ts

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

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

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

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