@yak-io/svelte 0.1.2 → 0.2.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 (2) hide show
  1. package/README.md +153 -0
  2. package/package.json +2 -2
package/README.md ADDED
@@ -0,0 +1,153 @@
1
+ # @yak-io/svelte
2
+
3
+ Svelte integration for the Yak embeddable chat widget. Uses Svelte stores for reactive state.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ pnpm add @yak-io/svelte
9
+ ```
10
+
11
+ ## Quickstart
12
+
13
+ ### 1. Initialize the provider (module scope)
14
+
15
+ ```ts
16
+ // src/yak.ts
17
+ import { onMount, onDestroy } from "svelte";
18
+ import { createYakProvider } from "@yak-io/svelte";
19
+
20
+ export const yak = createYakProvider({
21
+ appId: import.meta.env.VITE_YAK_APP_ID,
22
+ theme: { position: "bottom-right", colorMode: "system" },
23
+ trigger: { label: "Ask with AI" },
24
+ getConfig: async () => {
25
+ const res = await fetch("/api/yak");
26
+ return res.json();
27
+ },
28
+ onToolCall: async (name, args) => {
29
+ const res = await fetch("/api/yak", {
30
+ method: "POST",
31
+ headers: { "Content-Type": "application/json" },
32
+ body: JSON.stringify({ name, args }),
33
+ });
34
+ const data = await res.json();
35
+ if (!data.ok) throw new Error(data.error);
36
+ return data.result;
37
+ },
38
+ onRedirect: (path) => {
39
+ goto(path);
40
+ },
41
+ });
42
+ ```
43
+
44
+ ### 2. Mount and destroy in your root component
45
+
46
+ ```svelte
47
+ <!-- App.svelte -->
48
+ <script lang="ts">
49
+ import { onMount, onDestroy } from "svelte";
50
+ import { yak } from "./yak.ts";
51
+
52
+ onMount(() => yak.mount());
53
+ onDestroy(() => yak.destroy());
54
+ </script>
55
+
56
+ <slot />
57
+ ```
58
+
59
+ ### 3. Use stores in components
60
+
61
+ `isOpen` and `isReady` are Svelte `Readable` stores — subscribe with `$`:
62
+
63
+ ```svelte
64
+ <script lang="ts">
65
+ import { yak } from "../yak.ts";
66
+ const { isOpen, isReady, open, openWithPrompt } = yak;
67
+ </script>
68
+
69
+ <button on:click={open}>Open Chat</button>
70
+ {#if $isOpen}
71
+ <p>Chat is open</p>
72
+ {/if}
73
+ {#if $isOpen && !$isReady}
74
+ <p>Loading…</p>
75
+ {/if}
76
+ ```
77
+
78
+ ### 4. Subscribe to tool events
79
+
80
+ ```ts
81
+ yak.subscribeToToolEvents((event) => {
82
+ if (event.ok && event.name.startsWith("tasks.")) {
83
+ refreshTasks();
84
+ }
85
+ });
86
+ ```
87
+
88
+ ## API Reference
89
+
90
+ ### `createYakProvider(options)`
91
+
92
+ Creates a Yak widget instance. Returns a `YakApi` with Svelte stores for reactive state.
93
+
94
+ You must call `yak.mount()` in `onMount()` and `yak.destroy()` in `onDestroy()`.
95
+
96
+ **Options:**
97
+
98
+ | Option | Type | Description |
99
+ |--------|------|-------------|
100
+ | `appId` | `string` | Your Yak app ID |
101
+ | `getConfig` | `ChatConfigProvider` | Async function returning routes + tools. Called on first open. |
102
+ | `onToolCall` | `ToolCallHandler` | Handle tool invocations from the assistant |
103
+ | `onGraphQLSchemaCall` | `GraphQLSchemaHandler` | Handle GraphQL schema tool calls |
104
+ | `onRESTSchemaCall` | `RESTSchemaHandler` | Handle REST/OpenAPI schema tool calls |
105
+ | `theme` | `Theme` | Position, color mode, and custom colors |
106
+ | `onRedirect` | `(path: string) => void` | Navigation handler (defaults to `window.location.assign`) |
107
+ | `disableRestartButton` | `boolean` | Hide the restart session button |
108
+ | `trigger` | `boolean \| TriggerButtonConfig` | Built-in trigger button |
109
+
110
+ ### `YakApi`
111
+
112
+ ```ts
113
+ type YakApi = {
114
+ isOpen: Readable<boolean>; // Svelte store
115
+ isReady: Readable<boolean>; // Svelte store
116
+ open: () => void;
117
+ close: () => void;
118
+ openWithPrompt: (prompt: string) => void;
119
+ subscribeToToolEvents: (handler: ToolCallEventHandler) => () => void;
120
+ mount: () => void; // Call in onMount()
121
+ destroy: () => void; // Call in onDestroy()
122
+ };
123
+ ```
124
+
125
+ ## Logging
126
+
127
+ ```ts
128
+ import { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/svelte";
129
+
130
+ enableYakLogging(); // Enable verbose SDK logs
131
+ disableYakLogging(); // Disable SDK logs
132
+ isYakLoggingEnabled(); // → boolean
133
+ ```
134
+
135
+ ## Types
136
+
137
+ ```ts
138
+ import type {
139
+ YakProviderOptions,
140
+ YakApi,
141
+ ToolCallEventHandler,
142
+ ChatConfigProvider,
143
+ ToolCallHandler,
144
+ ToolCallEvent,
145
+ Theme,
146
+ TriggerButtonConfig,
147
+ WidgetPosition,
148
+ } from "@yak-io/svelte";
149
+ ```
150
+
151
+ ## License
152
+
153
+ Proprietary — see LICENSE file.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yak-io/svelte",
3
- "version": "0.1.2",
3
+ "version": "0.2.0",
4
4
  "description": "Svelte SDK for embedding yak chatbot",
5
5
  "type": "module",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -41,7 +41,7 @@
41
41
  "./package.json": "./package.json"
42
42
  },
43
43
  "dependencies": {
44
- "@yak-io/javascript": "0.6.0"
44
+ "@yak-io/javascript": "0.7.0"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "svelte": "^5.0.0"