@yak-io/angular 0.1.2 → 0.3.0

package/README.md

@@ -0,0 +1,188 @@
+# @yak-io/angular
+
+Angular integration for the Yak embeddable chat widget. Uses a factory function compatible with Angular's component and service patterns.
+
+## Installation
+
+```bash
+pnpm add @yak-io/angular
+```
+
+## Quickstart
+
+### 1. Initialize in your root component
+
+```ts
+// app.component.ts
+import { Component, OnInit, OnDestroy, inject } from "@angular/core";
+import { Router } from "@angular/router";
+import { createYakProvider, type YakApi } from "@yak-io/angular";
+import { environment } from "../environments/environment";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  template: "<router-outlet />",
+})
+export class AppComponent implements OnInit, OnDestroy {
+  private router = inject(Router);
+  private yak: YakApi;
+
+  constructor() {
+    this.yak = createYakProvider({
+      appId: environment.yakAppId,
+      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) => {
+        this.router.navigateByUrl(path);
+      },
+    });
+  }
+
+  ngOnInit() {
+    this.yak.mount();
+  }
+
+  ngOnDestroy() {
+    this.yak.destroy();
+  }
+}
+```
+
+### 2. Share via an Angular service
+
+Create a service to share the widget API across components:
+
+```ts
+// yak.service.ts
+import { Injectable, signal } from "@angular/core";
+import type { YakApi } from "@yak-io/angular";
+
+@Injectable({ providedIn: "root" })
+export class YakService {
+  private yak: YakApi | null = null;
+  readonly isOpen = signal(false);
+  readonly isReady = signal(false);
+
+  setYak(yak: YakApi) {
+    this.yak = yak;
+    yak.subscribeToState(({ isOpen, isReady }) => {
+      this.isOpen.set(isOpen);
+      this.isReady.set(isReady);
+    });
+  }
+
+  open() { this.yak?.open(); }
+  close() { this.yak?.close(); }
+  openWithPrompt(prompt: string) { this.yak?.openWithPrompt(prompt); }
+}
+```
+
+### 3. Use in components
+
+```ts
+// any.component.ts
+import { Component, inject } from "@angular/core";
+import { YakService } from "./yak.service";
+
+@Component({
+  template: `
+    <button (click)="yakService.open()">Open Chat</button>
+    <p *ngIf="yakService.isOpen()">Chat is open</p>
+  `,
+})
+export class AnyComponent {
+  yakService = inject(YakService);
+}
+```
+
+## API Reference
+
+### `createYakProvider(options)`
+
+Creates a Yak widget instance. Returns a `YakApi` object.
+
+Call `yak.mount()` in `ngOnInit()` and `yak.destroy()` in `ngOnDestroy()`.
+
+**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 |
+
+### `YakApi`
+
+```ts
+type YakApi = {
+  readonly isOpen: boolean;  // Plain boolean (use subscribeToState for reactivity)
+  readonly isReady: boolean; // Plain boolean
+  open: () => void;
+  close: () => void;
+  openWithPrompt: (prompt: string) => void;
+  subscribeToToolEvents: (handler: ToolCallEventHandler) => () => void;
+  subscribeToState: (handler: (state: { isOpen: boolean; isReady: boolean }) => void) => () => void;
+  mount: () => void;    // Call in ngOnInit() or ngAfterViewInit()
+  destroy: () => void;  // Call in ngOnDestroy()
+};
+```
+
+Use `subscribeToState` to react to state changes — wire it to Angular signals, `BehaviorSubject`s, or change detection:
+
+```ts
+yak.subscribeToState(({ isOpen, isReady }) => {
+  this.isOpen.set(isOpen);
+  this.changeDetector.markForCheck();
+});
+```
+
+## Logging
+
+```ts
+import { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/angular";
+
+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/angular";
+```
+
+## License
+
+Proprietary — see LICENSE file.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
+export type { ChatConfigProvider, GraphQLRequest, GraphQLSchemaHandler, GraphQLSchemaSource, OpenAPISchemaSource, RESTRequest, RESTSchemaHandler, SchemaSource, Theme, ThemeColors, ToolCallEvent, ToolCallHandler, TriggerButtonConfig, VoiceMachine, VoiceState, WidgetMode, WidgetPosition, } from "@yak-io/javascript";
+export { disableYakLogging, enableYakLogging, isYakLoggingEnabled } from "@yak-io/javascript";
+export type { ToolCallEventHandler, YakApi, YakProviderOptions, YakState, } from "./service.js";
 export { createYakProvider } from "./service.js";
-export type { YakProviderOptions, YakApi, ToolCallEventHandler } from "./service.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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGrF,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,KAAK,EACL,WAAW,EACX,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACV,UAAU,EACV,cAAc,GACf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9F,YAAY,EACV,oBAAoB,EACpB,MAAM,EACN,kBAAkB,EAClB,QAAQ,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

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

package/dist/service.d.ts

@@ -1,7 +1,8 @@
-import { type TriggerButtonConfig, type ChatConfigProvider, type ToolCallHandler, type ToolCallEvent, type GraphQLSchemaHandler, type RESTSchemaHandler, type Theme } from "@yak-io/javascript";
+import { type ChatConfigProvider, type GraphQLSchemaHandler, type RESTSchemaHandler, type Theme, type ToolCallEvent, type ToolCallHandler, type TriggerButtonConfig, type VoiceMachine, type WidgetMode } from "@yak-io/javascript";
 export type ToolCallEventHandler = (event: ToolCallEvent) => void;
 export type YakProviderOptions = {
     appId: string;
+    mode?: WidgetMode;
     getConfig?: ChatConfigProvider;
     onToolCall?: ToolCallHandler;
     onGraphQLSchemaCall?: GraphQLSchemaHandler;
@@ -11,51 +12,30 @@ export type YakProviderOptions = {
     disableRestartButton?: boolean;
     trigger?: boolean | TriggerButtonConfig;
 };
+export type YakState = {
+    isOpen: boolean;
+    isReady: boolean;
+    voiceMachine: VoiceMachine;
+};
 export type YakApi = {
-    /** Whether the chat widget is open */
     readonly isOpen: boolean;
-    /** Whether the iframe is ready */
     readonly isReady: boolean;
-    /** Open the chat widget */
+    readonly voiceMachine: VoiceMachine;
     open: () => void;
-    /** Close the chat widget */
     close: () => void;
-    /** Open the chat widget and send a prompt */
     openWithPrompt: (prompt: string) => void;
-    /** Subscribe to tool call completion events. Returns an unsubscribe function. */
+    voiceStart: () => Promise<void>;
+    voiceStop: () => Promise<void>;
+    voiceToggle: () => Promise<void>;
     subscribeToToolEvents: (handler: ToolCallEventHandler) => () => void;
-    /** Subscribe to state changes. Returns an unsubscribe function. */
-    subscribeToState: (handler: (state: {
-        isOpen: boolean;
-        isReady: boolean;
-    }) => void) => () => void;
-    /** Mount the widget DOM — call in ngOnInit or ngAfterViewInit */
+    /** Subscribe to chat + voice state changes. */
+    subscribeToState: (handler: (state: YakState) => void) => () => void;
     mount: () => void;
-    /** Destroy the widget DOM — call in ngOnDestroy */
     destroy: () => void;
 };
 /**
- * Creates a yak chat widget instance for Angular.
- * Use in an Angular service or component — call `mount()` in `ngOnInit`
- * and `destroy()` in `ngOnDestroy`.
- *
- * @example
- * ```ts
- * import { Component, OnInit, OnDestroy } from "@angular/core";
- * import { createYakProvider, type YakApi } from "@yak-io/angular";
- *
- * @Component({ selector: "app-root", template: `...` })
- * export class AppComponent implements OnInit, OnDestroy {
- *   private yak: YakApi;
- *
- *   constructor() {
- *     this.yak = createYakProvider({ appId: "my-app" });
- *   }
- *
- *   ngOnInit() { this.yak.mount(); }
- *   ngOnDestroy() { this.yak.destroy(); }
- * }
- * ```
+ * Creates a yak widget (chat + voice) for Angular.
+ * Call `mount()` in `ngOnInit` and `destroy()` in `ngOnDestroy`.
  */
 export declare function createYakProvider(options: YakProviderOptions): YakApi;
 //# sourceMappingURL=service.d.ts.map

package/dist/service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAAA,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,sCAAsC;IACtC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,2BAA2B;IAC3B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,6CAA6C;IAC7C,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iFAAiF;IACjF,qBAAqB,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,IAAI,CAAC;IACrE,mEAAmE;IACnE,gBAAgB,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;IAClG,iEAAiE;IACjE,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mDAAmD;IACnD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM,CAoGrE"}
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EAGzB,KAAK,iBAAiB,EACtB,KAAK,KAAK,EACV,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAI5B,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,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,QAAQ,GAAG;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,qBAAqB,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,IAAI,CAAC;IACrE,+CAA+C;IAC/C,gBAAgB,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,KAAK,MAAM,IAAI,CAAC;IACrE,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAIF;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM,CA6HrE"}

package/dist/service.js

@@ -1,34 +1,26 @@
-import { YakEmbed, } from "@yak-io/javascript";
-import { logger } from "@yak-io/javascript";
+import { INITIAL_VOICE_MACHINE, logger, YakEmbed, } from "@yak-io/javascript";
 // ── Provider factory ────────────────────────────────────────────────────────
 /**
- * Creates a yak chat widget instance for Angular.
- * Use in an Angular service or component — call `mount()` in `ngOnInit`
- * and `destroy()` in `ngOnDestroy`.
- *
- * @example
- * ```ts
- * import { Component, OnInit, OnDestroy } from "@angular/core";
- * import { createYakProvider, type YakApi } from "@yak-io/angular";
- *
- * @Component({ selector: "app-root", template: `...` })
- * export class AppComponent implements OnInit, OnDestroy {
- *   private yak: YakApi;
- *
- *   constructor() {
- *     this.yak = createYakProvider({ appId: "my-app" });
- *   }
- *
- *   ngOnInit() { this.yak.mount(); }
- *   ngOnDestroy() { this.yak.destroy(); }
- * }
- * ```
+ * Creates a yak widget (chat + voice) for Angular.
+ * Call `mount()` in `ngOnInit` and `destroy()` in `ngOnDestroy`.
  */
 export function createYakProvider(options) {
     let _isOpen = false;
     let _isReady = false;
+    let _voiceMachine = INITIAL_VOICE_MACHINE;
     const toolEventSubscribers = new Set();
     const stateSubscribers = new Set();
+    const notifyState = () => {
+        const snap = { isOpen: _isOpen, isReady: _isReady, voiceMachine: _voiceMachine };
+        for (const subscriber of stateSubscribers) {
+            try {
+                subscriber(snap);
+            }
+            catch (err) {
+                logger.warn("Error in state subscriber:", err);
+            }
+        }
+    };
     const handleToolCallComplete = (event) => {
         logger.debug("Tool call completed, notifying subscribers:", {
             name: event.name,
@@ -48,8 +40,10 @@ export function createYakProvider(options) {
         (typeof window !== "undefined" ? (path) => window.location.assign(path) : undefined);
     const embed = new YakEmbed({
         appId: options.appId,
+        mode: options.mode,
         theme: options.theme,
         trigger: options.trigger ?? false,
+        getConfig: options.getConfig,
         onToolCall: options.onToolCall,
         onGraphQLSchemaCall: options.onGraphQLSchemaCall,
         onRESTSchemaCall: options.onRESTSchemaCall,
@@ -57,18 +51,14 @@ export function createYakProvider(options) {
         options: { disableRestartButton: options.disableRestartButton },
         onToolCallComplete: handleToolCallComplete,
     });
-    // Sync embed state
     embed.onStateChange((state) => {
         _isOpen = state.isOpen;
         _isReady = state.isReady;
-        for (const subscriber of stateSubscribers) {
-            try {
-                subscriber({ isOpen: _isOpen, isReady: _isReady });
-            }
-            catch (err) {
-                logger.warn("Error in state subscriber:", err);
-            }
-        }
+        notifyState();
+    });
+    embed.onVoiceStateChange((m) => {
+        _voiceMachine = m;
+        notifyState();
     });
     // Fetch chat config on first open
     if (options.getConfig) {
@@ -90,6 +80,14 @@ export function createYakProvider(options) {
             }
         });
     }
+    const voiceStart = async () => {
+        try {
+            await embed.voiceStart();
+        }
+        catch (err) {
+            logger.warn("Voice start failed", err);
+        }
+    };
     return {
         get isOpen() {
             return _isOpen;
@@ -97,9 +95,15 @@ export function createYakProvider(options) {
         get isReady() {
             return _isReady;
         },
+        get voiceMachine() {
+            return _voiceMachine;
+        },
         open: () => embed.open(),
         close: () => embed.close(),
         openWithPrompt: (prompt) => embed.openWithPrompt(prompt),
+        voiceStart,
+        voiceStop: () => embed.voiceStop(),
+        voiceToggle: () => embed.voiceToggle(),
         subscribeToToolEvents: (handler) => {
             toolEventSubscribers.add(handler);
             return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yak-io/angular",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "Angular 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.8.0"
   },
   "peerDependencies": {
-    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
   },
   "devDependencies": {
-    "@types/node": "^24.12.0",
+    "@types/node": "^24.12.4",
     "typescript": "^5.3.0",
     "@repo/typescript-config": "0.0.0"
   },