@yak-io/react 0.7.1 → 0.9.0

package/README.md

@@ -0,0 +1,186 @@
+# @yak-io/react
+
+React integration for the Yak embeddable chat widget. Provides `YakProvider`, `YakWidget`, `useYak`, and `useYakToolEvent`.
+
+## Installation
+
+```bash
+pnpm add @yak-io/react
+```
+
+For Next.js, use [`@yak-io/nextjs`](../nextjs) instead — it adds route scanning and server handler factories on top of this package.
+
+## Quickstart
+
+### 1. Wrap your app with `YakProvider`
+
+```tsx
+// src/App.tsx (or your root layout)
+import { YakProvider, YakWidget } from "@yak-io/react";
+
+export default function App({ children }: { children: React.ReactNode }) {
+  return (
+    <YakProvider
+      appId={import.meta.env.VITE_YAK_APP_ID}
+      theme={{ position: "bottom-right", colorMode: "system" }}
+      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;
+      }}
+    >
+      {children}
+      <YakWidget />
+    </YakProvider>
+  );
+}
+```
+
+### 2. Control the widget programmatically
+
+```tsx
+import { useYak } from "@yak-io/react";
+
+export function HelpButton() {
+  const { open, openWithPrompt, isOpen } = useYak();
+
+  return (
+    <div>
+      <button onClick={open}>Open Chat</button>
+      <button onClick={() => openWithPrompt("How do I get started?")}>
+        Get Help
+      </button>
+      {isOpen && <p>Chat is open</p>}
+    </div>
+  );
+}
+```
+
+### 3. Invalidate data after tool calls
+
+```tsx
+import { useYakToolEvent } from "@yak-io/react";
+
+function TasksPage() {
+  const [tasks, setTasks] = useState([]);
+
+  // Re-fetch when the chatbot modifies tasks
+  useYakToolEvent((event) => {
+    if (event.ok && event.name.startsWith("tasks.")) {
+      fetchTasks().then(setTasks);
+    }
+  });
+
+  // ...
+}
+```
+
+## API Reference
+
+### `YakProvider`
+
+Sets up context, initializes the widget, and delegates DOM rendering to `@yak-io/javascript`.
+
+**Props:**
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `appId` | `string` | ✅ | Your Yak app ID |
+| `children` | `ReactNode` | ✅ | Your app content |
+| `getConfig` | `ChatConfigProvider` | — | Async function returning routes + tools config. Called when the widget opens. |
+| `onToolCall` | `ToolCallHandler` | — | Handle tool calls from the assistant |
+| `onGraphQLSchemaCall` | `GraphQLSchemaHandler` | — | Handle GraphQL schema tool calls |
+| `onRESTSchemaCall` | `RESTSchemaHandler` | — | Handle REST/OpenAPI schema tool calls |
+| `theme` | `Theme` | — | Widget theme (position, colorMode, colors) |
+| `onRedirect` | `(path: string) => void` | — | Custom navigation handler (defaults to `window.location.assign`) |
+| `disableRestartButton` | `boolean` | — | Hide the restart session button |
+| `trigger` | `boolean \| TriggerButtonConfig` | — | Built-in trigger button config (`false` by default — use `<YakWidget>` instead) |
+
+### `YakWidget`
+
+Renders a fixed-position launcher button. Place it anywhere inside `YakProvider`.
+
+**Props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `triggerLabel` | `string` | Button label (default: `"Ask with AI"`) |
+| `position` | `WidgetPosition` | Button position (default: `"bottom-right"`) |
+| `colorMode` | `"light" \| "dark" \| "system"` | Color mode override |
+| `lightButton` | `{ background?, color?, border? }` | Custom light mode button colors |
+| `darkButton` | `{ background?, color?, border? }` | Custom dark mode button colors |
+
+### `useYak()`
+
+Access the widget API from any component inside `YakProvider`.
+
+```ts
+const {
+  isOpen,      // boolean — whether the widget is open
+  isReady,     // boolean — whether the iframe is ready
+  open,        // () => void
+  close,       // () => void
+  openWithPrompt, // (prompt: string) => void
+  subscribeToToolEvents, // (handler) => () => void
+} = useYak();
+```
+
+Throws if called outside `YakProvider`.
+
+### `useYakToolEvent(handler)`
+
+Subscribe to tool call completion events. Automatically unsubscribes on unmount. Useful for cache invalidation when the chatbot modifies data.
+
+```ts
+useYakToolEvent((event) => {
+  // event.name   — the tool name called ("tasks.list")
+  // event.args   — arguments passed to the tool
+  // event.ok     — whether the call succeeded
+  // event.result — the result (if ok)
+  // event.error  — error message (if not ok)
+});
+```
+
+## Logging
+
+```ts
+import { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/react";
+
+enableYakLogging();    // Enable verbose SDK logs
+disableYakLogging();   // Disable SDK logs
+isYakLoggingEnabled(); // → boolean
+```
+
+## Types
+
+All key types are re-exported for convenience:
+
+```ts
+import type {
+  ChatConfigProvider,
+  ToolCallHandler,
+  ToolCallEvent,
+  GraphQLSchemaHandler,
+  RESTSchemaHandler,
+  Theme,
+  ThemeColors,
+  TriggerButtonConfig,
+  WidgetPosition,
+  SchemaSource,
+  GraphQLSchemaSource,
+  OpenAPISchemaSource,
+} from "@yak-io/react";
+```
+
+## License
+
+Proprietary — see LICENSE file.

package/dist/YakProvider.d.ts

@@ -1,19 +1,27 @@
+import { type ChatConfigProvider, type GraphQLSchemaHandler, type RESTSchemaHandler, type Theme, type ToolCallHandler, type TriggerButtonConfig, type UserIdentity, type WidgetMode } from "@yak-io/javascript";
 import type React from "react";
-import { type TriggerButtonConfig, type ChatConfigProvider, type ToolCallHandler, type GraphQLSchemaHandler, type RESTSchemaHandler, type Theme } from "@yak-io/javascript";
 /**
  * Props for YakProvider
  */
 export type YakProviderProps = {
     /** App identifier in the yak SaaS */
     appId: string;
+    /**
+     * Which experiences this widget exposes.
+     *   "chat"  — chat only (iframe).
+     *   "voice" — voice only (WebRTC).
+     *   "both"  — both, sharing one trigger pill.
+     * Default: "chat".
+     */
+    mode?: WidgetMode;
     /**
      * Provider function for chat configuration (routes + tools).
      * The consuming platform decides how to get the config (static, fetch, etc.)
-     * Called when the widget is opened.
+     * Called when the chat is opened or when a voice session starts.
      */
     getConfig?: ChatConfigProvider;
     /**
-     * Handler for tool calls from the chat widget.
+     * Handler for tool calls from the chat or voice runtime.
      * The consuming platform decides how to execute (browser, server fetch, etc.)
      */
     onToolCall?: ToolCallHandler;
@@ -32,17 +40,27 @@ export type YakProviderProps = {
     /** Disable the restart session button in the header */
     disableRestartButton?: boolean;
     /**
-     * Trigger button configuration. Pass `false` to disable the built-in trigger button
-     * (useful when using `<YakWidget />` separately). Defaults to `false`.
+     * Trigger button configuration. Pass `false` to disable the built-in trigger
+     * (useful when rendering `<YakWidget />` separately). Defaults to `false`.
      */
     trigger?: boolean | TriggerButtonConfig;
+    /**
+     * Signed end-user identity for server-side conversation persistence.
+     *
+     * Compute the `hash` on your backend with
+     * `HMAC-SHA256(application.apiSecret, user.id)` and pass it down to the
+     * browser. When supplied, the widget stores conversations server-side and
+     * shows a history pane so end-users can resume past chats. When omitted,
+     * the widget runs in anonymous mode (no persistence).
+     */
+    user?: UserIdentity;
     /** Children components */
     children: React.ReactNode;
 };
 /**
- * YakProvider sets up the context, message handling, and renders the chat widget.
- * All DOM rendering (panel, iframe, styles, optional trigger) is delegated to YakEmbed
- * from the JavaScript SDK.
+ * YakProvider sets up the unified chat + voice runtime. All DOM rendering
+ * (panel, iframe, optional trigger) is delegated to YakEmbed. Consumers
+ * access both surfaces via `useYak()`.
  */
-export declare function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, trigger, children, }: YakProviderProps): React.JSX.Element;
+export declare function YakProvider({ appId, mode, getConfig, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, trigger, user, children, }: YakProviderProps): React.JSX.Element;
 //# sourceMappingURL=YakProvider.d.ts.map

package/dist/YakProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YakProvider.d.ts","sourceRoot":"","sources":["../src/YakProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAEpB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,KAAK,EACX,MAAM,oBAAoB,CAAC;AAG5B;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,mCAAmC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qEAAqE;IACrE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,uDAAuD;IACvD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IACxC,0BAA0B;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,oBAAoB,EACpB,OAAe,EACf,QAAQ,GACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoJtC"}
+{"version":3,"file":"YakProvider.d.ts","sourceRoot":"","sources":["../src/YakProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EAGzB,KAAK,iBAAiB,EACtB,KAAK,KAAK,EAEV,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAEjB,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,mCAAmC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qEAAqE;IACrE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,uDAAuD;IACvD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IACxC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0BAA0B;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAa,EACb,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,oBAAoB,EACpB,OAAe,EACf,IAAI,EACJ,QAAQ,GACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6MtC"}

package/dist/YakProvider.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { INITIAL_VOICE_MACHINE, logger, YakEmbed, } from "@yak-io/javascript";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { YakContext } from "./context.js";
-import { YakEmbed, } from "@yak-io/javascript";
-import { logger } from "@yak-io/javascript";
 /**
- * YakProvider sets up the context, message handling, and renders the chat widget.
- * All DOM rendering (panel, iframe, styles, optional trigger) is delegated to YakEmbed
- * from the JavaScript SDK.
+ * YakProvider sets up the unified chat + voice runtime. All DOM rendering
+ * (panel, iframe, optional trigger) is delegated to YakEmbed. Consumers
+ * access both surfaces via `useYak()`.
  */
-export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, trigger = false, children, }) {
+export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, trigger = false, user, children, }) {
     const [isOpen, setIsOpen] = useState(false);
-    const [isIframeReady, setIsIframeReady] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    const [voiceMachine, setVoiceMachine] = useState(INITIAL_VOICE_MACHINE);
     // Store event subscribers for tool call events
     const toolEventSubscribersRef = useRef(new Set());
     // Handler that notifies all subscribers when a tool call completes
@@ -45,30 +45,36 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
     if (!embedRef.current) {
         embedRef.current = new YakEmbed({
             appId,
+            mode,
             theme,
             trigger,
+            getConfig,
             onToolCall,
             onGraphQLSchemaCall,
             onRESTSchemaCall,
             onRedirect: resolvedRedirect,
             options: { disableRestartButton },
             onToolCallComplete: handleToolCallComplete,
+            user,
         });
     }
     const embed = embedRef.current;
-    // Mount/unmount embed and subscribe to state changes
+    // Mount/unmount embed and subscribe to chat + voice state changes
     useEffect(() => {
         embed.mount();
-        const unsubscribe = embed.onStateChange((state) => {
+        const unsubscribeChat = embed.onStateChange((state) => {
             setIsOpen(state.isOpen);
-            setIsIframeReady(state.isReady);
+            setIsReady(state.isReady);
         });
+        const unsubscribeVoice = embed.onVoiceStateChange((m) => setVoiceMachine(m));
         return () => {
-            unsubscribe();
+            unsubscribeChat();
+            unsubscribeVoice();
             embed.destroy();
         };
     }, [embed]);
-    // Update embed config when props change (exclude onReady/onClose which are managed by YakEmbed)
+    // Update embed config when props change. Chat config goes via the client;
+    // voice config goes via the voice session.
     useEffect(() => {
         embed.getClient().updateConfig({
             appId,
@@ -79,9 +85,19 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
             onRedirect: resolvedRedirect,
             options: { disableRestartButton },
             onToolCallComplete: handleToolCallComplete,
+            user,
+        });
+        embed.getVoiceSession()?.updateConfig({
+            appId,
+            getConfig,
+            onToolCall,
+            onGraphQLSchemaCall,
+            onRESTSchemaCall,
+            onRedirect: resolvedRedirect,
         });
     }, [
         appId,
+        getConfig,
         onToolCall,
         onGraphQLSchemaCall,
         onRESTSchemaCall,
@@ -90,8 +106,9 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
         disableRestartButton,
         embed,
         handleToolCallComplete,
+        user,
     ]);
-    // Fetch chat config when widget is opened
+    // Fetch chat config when the chat is opened
     useEffect(() => {
         if (typeof window === "undefined" || !isOpen || !getConfig)
             return;
@@ -113,10 +130,21 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
             cancelled = true;
         };
     }, [getConfig, isOpen, embed]);
-    // Open/close methods
+    // Chat methods
     const open = useCallback(() => embed.open(), [embed]);
     const close = useCallback(() => embed.close(), [embed]);
     const openWithPrompt = useCallback((prompt) => embed.openWithPrompt(prompt), [embed]);
+    // Voice methods
+    const voiceStart = useCallback(async () => {
+        try {
+            await embed.voiceStart();
+        }
+        catch (err) {
+            logger.warn("Voice start failed", err);
+        }
+    }, [embed]);
+    const voiceStop = useCallback(() => embed.voiceStop(), [embed]);
+    const voiceToggle = useCallback(() => embed.voiceToggle(), [embed]);
     // Subscribe to tool call completion events
     const subscribeToToolEvents = useCallback((handler) => {
         toolEventSubscribersRef.current.add(handler);
@@ -128,14 +156,41 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
     }, []);
     // Expose iframe origin for YakWidget
     const getIframeOrigin = useCallback(() => embed.getClient().getIframeOrigin(), [embed]);
+    const voiceState = voiceMachine.state;
+    const voiceIsActive = voiceState !== "idle" && voiceState !== "error";
     const contextValue = useMemo(() => ({
+        mode,
         isOpen,
-        isIframeReady,
+        isReady,
         open,
         close,
         openWithPrompt,
         subscribeToToolEvents,
+        voiceMachine,
+        voiceState,
+        voiceErrorMessage: voiceMachine.errorMessage,
+        voiceIsActive,
+        voiceStart,
+        voiceStop,
+        voiceToggle,
         getIframeOrigin,
-    }), [isOpen, isIframeReady, open, close, openWithPrompt, subscribeToToolEvents, getIframeOrigin]);
+        theme,
+    }), [
+        mode,
+        isOpen,
+        isReady,
+        open,
+        close,
+        openWithPrompt,
+        subscribeToToolEvents,
+        voiceMachine,
+        voiceState,
+        voiceIsActive,
+        voiceStart,
+        voiceStop,
+        voiceToggle,
+        getIframeOrigin,
+        theme,
+    ]);
     return _jsx(YakContext.Provider, { value: contextValue, children: children });
 }

package/dist/YakWidget.d.ts

@@ -1,15 +1,11 @@
+import type { WidgetMode } from "@yak-io/javascript";
 import type React from "react";
-import type { WidgetPosition } from "@yak-io/javascript";
 /**
  * Props for YakWidget
  */
 export type YakWidgetProps = {
-    /** Text to display next to the logo */
-    triggerLabel?: string;
-    /** Position of the button (defaults to theme position or "bottom-right") */
-    position?: WidgetPosition;
-    /** Color mode override */
-    colorMode?: "light" | "dark" | "system";
+    /** Override the mode from the provider. */
+    mode?: WidgetMode;
     /** Custom button colors for light mode */
     lightButton?: {
         background?: string;
@@ -24,9 +20,10 @@ export type YakWidgetProps = {
     };
 };
 /**
- * YakWidget renders a fixed-position launcher button.
- * Trigger CSS is injected by YakEmbed (via YakProvider) — this component
- * only provides the React button element using those shared class names.
+ * YakWidget renders a fixed-position launcher pill. The logo sits on the
+ * left; one or two icon buttons sit on the right based on `mode`. Trigger
+ * CSS is injected by YakEmbed (via YakProvider) — this component only
+ * provides the React markup using those shared class names.
  */
-export declare function YakWidget({ triggerLabel, position, colorMode, lightButton, darkButton, }?: YakWidgetProps): React.JSX.Element;
+export declare function YakWidget({ mode, lightButton, darkButton, }?: YakWidgetProps): React.JSX.Element;
 //# sourceMappingURL=YakWidget.d.ts.map

package/dist/YakWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YakWidget.d.ts","sourceRoot":"","sources":["../src/YakWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACxC,0CAA0C;IAC1C,WAAW,CAAC,EAAE;QACZ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,yCAAyC;IACzC,UAAU,CAAC,EAAE;QACX,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAwCF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAA4B,EAC5B,QAAyB,EACzB,SAAS,EACT,WAAW,EACX,UAAU,GACX,GAAE,cAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoCzC"}
+{"version":3,"file":"YakWidget.d.ts","sourceRoot":"","sources":["../src/YakWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAc,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,WAAW,CAAC,EAAE;QACZ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,yCAAyC;IACzC,UAAU,CAAC,EAAE;QACX,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAsGF;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,UAAU,GACX,GAAE,cAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkEzC"}

package/dist/YakWidget.js

@@ -1,10 +1,32 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import { YakContext, useYak } from "./context.js";
-/**
- * Compute button CSS variables from custom button color props
- */
+import { useYakInternal } from "./context.js";
+const VOICE_ARIA = {
+    idle: "Start voice mode",
+    connecting: "Connecting voice session",
+    listening: "Voice listening — tap to stop",
+    thinking: "Voice thinking — tap to stop",
+    speaking: "Voice speaking — tap to stop",
+    error: "Voice error — tap to retry",
+};
+function MessageCircleIcon() {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: 20, height: 20, "aria-hidden": "true", children: _jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }));
+}
+function AudioLinesIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: 20, height: 20, "aria-hidden": "true", children: [_jsx("path", { d: "M2 10v3" }), _jsx("path", { d: "M6 6v11" }), _jsx("path", { d: "M10 3v18" }), _jsx("path", { d: "M14 8v7" }), _jsx("path", { d: "M18 5v13" }), _jsx("path", { d: "M22 10v3" })] }));
+}
+function StopIcon() {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: 20, height: 20, "aria-hidden": "true", children: _jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }));
+}
+function VoiceIcon({ state }) {
+    if (state === "connecting") {
+        return _jsx("span", { className: "yak-widget-spinner", "aria-hidden": "true" });
+    }
+    if (state === "listening" || state === "speaking" || state === "thinking") {
+        return _jsx(StopIcon, {});
+    }
+    return _jsx(AudioLinesIcon, {});
+}
 function buildButtonStyle(lightButton, darkButton) {
     const style = {};
     if (lightButton?.background)
@@ -21,9 +43,6 @@ function buildButtonStyle(lightButton, darkButton) {
         style["--yak-btn-dark-border"] = darkButton.border;
     return style;
 }
-/**
- * Compute button class names from color mode and custom theme flags
- */
 function buildButtonClasses(colorMode, hasLightCustom, hasDarkCustom) {
     const colorModeClass = colorMode === "light" ? "yak-widget-light" : colorMode === "dark" ? "yak-widget-dark" : "";
     let customButtonClass = "";
@@ -36,18 +55,26 @@ function buildButtonClasses(colorMode, hasLightCustom, hasDarkCustom) {
     return ["yak-widget-trigger", colorModeClass, customButtonClass].filter(Boolean).join(" ");
 }
 /**
- * YakWidget renders a fixed-position launcher button.
- * Trigger CSS is injected by YakEmbed (via YakProvider) — this component
- * only provides the React button element using those shared class names.
+ * YakWidget renders a fixed-position launcher pill. The logo sits on the
+ * left; one or two icon buttons sit on the right based on `mode`. Trigger
+ * CSS is injected by YakEmbed (via YakProvider) — this component only
+ * provides the React markup using those shared class names.
  */
-export function YakWidget({ triggerLabel = "Ask with AI", position = "bottom-right", colorMode, lightButton, darkButton, } = {}) {
-    const { open, isOpen, isIframeReady } = useYak();
-    const internal = useContext(YakContext);
-    const logoUrl = internal ? `${internal.getIframeOrigin()}/logo.svg` : "";
-    const isLoading = isOpen && !isIframeReady;
+export function YakWidget({ mode, lightButton, darkButton, } = {}) {
+    const ctx = useYakInternal();
+    const resolvedMode = mode ?? ctx.mode;
+    const position = ctx.theme?.position ?? "bottom-left";
+    const colorMode = ctx.theme?.colorMode;
+    const logoUrl = `${ctx.getIframeOrigin()}/logo.svg`;
+    const showChat = resolvedMode === "chat" || resolvedMode === "both";
+    const showVoice = resolvedMode === "voice" || resolvedMode === "both";
+    const chatLoading = ctx.isOpen && !ctx.isReady;
+    const voiceConnecting = ctx.voiceState === "connecting";
     const hasLightCustom = lightButton?.background || lightButton?.color || lightButton?.border;
     const hasDarkCustom = darkButton?.background || darkButton?.color || darkButton?.border;
     const buttonStyle = buildButtonStyle(lightButton, darkButton);
     const buttonClasses = buildButtonClasses(colorMode, hasLightCustom, hasDarkCustom);
-    return (_jsxs("button", { type: "button", onClick: open, className: buttonClasses, style: Object.keys(buttonStyle).length > 0 ? buttonStyle : undefined, "data-position": position, "data-has-light-custom": hasLightCustom || undefined, "data-has-dark-custom": hasDarkCustom || undefined, "aria-label": isLoading ? "Loading chat" : "Open chat", disabled: isLoading, children: [_jsx("span", { className: "yak-widget-trigger-label", children: triggerLabel }), _jsx("div", { className: "yak-widget-icon-bg", children: isLoading ? (_jsx("div", { className: "yak-widget-spinner", "aria-hidden": "true" })) : (_jsx("img", { src: logoUrl, alt: "", width: 20, height: 20, className: "yak-widget-icon" })) })] }));
+    return (_jsxs("div", { className: buttonClasses, style: Object.keys(buttonStyle).length > 0 ? buttonStyle : undefined, "data-position": position, "data-mode": resolvedMode, "data-has-light-custom": hasLightCustom || undefined, "data-has-dark-custom": hasDarkCustom || undefined, children: [_jsx("div", { className: "yak-widget-icon-bg", children: _jsx("img", { src: logoUrl, alt: "", width: 20, height: 20, className: "yak-widget-icon" }) }), showChat && (_jsx("button", { type: "button", className: "yak-widget-trigger-icon-btn", "data-action": "chat", "aria-label": chatLoading ? "Loading chat" : "Open chat", disabled: chatLoading, onClick: ctx.open, children: chatLoading ? (_jsx("span", { className: "yak-widget-spinner", "aria-hidden": "true" })) : (_jsx(MessageCircleIcon, {})) })), showVoice && (_jsx("button", { type: "button", className: "yak-widget-trigger-icon-btn", "data-action": "voice", "data-state": ctx.voiceState, "aria-label": VOICE_ARIA[ctx.voiceState], disabled: voiceConnecting, onClick: () => {
+                    void ctx.voiceToggle();
+                }, children: _jsx(VoiceIcon, { state: ctx.voiceState }) }))] }));
 }

package/dist/context.d.ts

@@ -1,4 +1,4 @@
-import type { Theme, ChatConfig, ToolCallEvent } from "@yak-io/javascript";
+import type { ChatConfig, Theme, ToolCallEvent, VoiceMachine, VoiceState, WidgetMode } from "@yak-io/javascript";
 /**
  * Configuration for the yak provider
  */
@@ -13,14 +13,16 @@ export type YakConfig = {
  */
 export type ToolCallEventHandler = (event: ToolCallEvent) => void;
 /**
- * Public API for controlling the Yak chat widget.
+ * Public API for controlling the Yak widget — chat + voice combined.
  * This is what consumers get from useYak().
  */
 export type YakContextValue = {
+    /** Which modes are exposed: "chat", "voice", or "both". */
+    mode: WidgetMode;
     /** Whether the chat widget is currently open */
     isOpen: boolean;
     /** Whether the iframe is ready to receive messages */
-    isIframeReady: boolean;
+    isReady: boolean;
     /** Open the chat widget */
     open: () => void;
     /** Close the chat widget */
@@ -29,6 +31,20 @@ export type YakContextValue = {
     openWithPrompt: (prompt: string) => void;
     /** Subscribe to tool call completion events */
     subscribeToToolEvents: (handler: ToolCallEventHandler) => () => void;
+    /** Current voice state machine snapshot. `idle` when mode === "chat". */
+    voiceMachine: VoiceMachine;
+    /** Convenience: `voiceMachine.state`. */
+    voiceState: VoiceState;
+    /** Convenience: error message when voiceState === "error". */
+    voiceErrorMessage: string | undefined;
+    /** Whether a voice session is currently live (connecting/listening/thinking/speaking). */
+    voiceIsActive: boolean;
+    /** Start a voice session. Must be invoked from a user gesture. */
+    voiceStart: () => Promise<void>;
+    /** Stop the current voice session. */
+    voiceStop: () => Promise<void>;
+    /** Toggle: start if idle/error, stop if active. */
+    voiceToggle: () => Promise<void>;
 };
 /**
  * Internal context with additional methods for widget internals.
@@ -37,21 +53,21 @@ export type YakContextValue = {
 export type YakInternalContextValue = YakContextValue & {
     /** Get the iframe origin URL (determined by environment) */
     getIframeOrigin: () => string;
+    /** Theme passed to YakProvider — used by YakWidget to mirror panel placement. */
+    theme: Theme | undefined;
 };
 export declare const YakContext: import("react").Context<YakInternalContextValue | null>;
 /**
- * Hook to access the Yak chat widget API.
- * Provides methods for opening, closing, and triggering prompts.
+ * Hook to access the Yak widget API — chat and voice.
  *
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { open, close, openWithPrompt, isOpen } = useYak();
- *
+ *   const { open, voiceToggle, voiceState } = useYak();
  *   return (
  *     <div>
- *       <button onClick={() => open()}>Open Chat</button>
- *       <button onClick={() => openWithPrompt("Help me!")}>Get Help</button>
+ *       <button onClick={open}>Open chat</button>
+ *       <button onClick={voiceToggle}>{voiceState === "idle" ? "Start voice" : "Stop voice"}</button>
  *     </div>
  *   );
  * }

package/dist/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAElE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,aAAa,EAAE,OAAO,CAAC;IACvB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,yDAAyD;IACzD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,+CAA+C;IAC/C,qBAAqB,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,IAAI,CAAC;CACtE,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,4DAA4D;IAC5D,eAAe,EAAE,MAAM,MAAM,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,UAAU,yDAAsD,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,MAAM,IAAI,eAAe,CAcxC;AAED;;;GAGG;AACH,wBAAgB,cAAc,IAAI,uBAAuB,CAMxD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAkBnE"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,UAAU,EACV,KAAK,EACL,aAAa,EACb,YAAY,EACZ,UAAU,EACV,UAAU,EACX,MAAM,oBAAoB,CAAC;AAG5B;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAElE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,IAAI,EAAE,UAAU,CAAC;IAGjB,gDAAgD;IAChD,MAAM,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,yDAAyD;IACzD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,+CAA+C;IAC/C,qBAAqB,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,IAAI,CAAC;IAGrE,yEAAyE;IACzE,YAAY,EAAE,YAAY,CAAC;IAC3B,yCAAyC;IACzC,UAAU,EAAE,UAAU,CAAC;IACvB,8DAA8D;IAC9D,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,0FAA0F;IAC1F,aAAa,EAAE,OAAO,CAAC;IACvB,kEAAkE;IAClE,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,sCAAsC;IACtC,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,mDAAmD;IACnD,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,4DAA4D;IAC5D,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,iFAAiF;IACjF,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,UAAU,yDAAsD,CAAC;AAE9E;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,IAAI,eAAe,CAqBxC;AAED;;;GAGG;AACH,wBAAgB,cAAc,IAAI,uBAAuB,CAMxD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAkBnE"}

package/dist/context.js

@@ -2,18 +2,16 @@
 import { createContext, useContext, useEffect, useRef } from "react";
 export const YakContext = createContext(null);
 /**
- * Hook to access the Yak chat widget API.
- * Provides methods for opening, closing, and triggering prompts.
+ * Hook to access the Yak widget API — chat and voice.
  *
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { open, close, openWithPrompt, isOpen } = useYak();
- *
+ *   const { open, voiceToggle, voiceState } = useYak();
  *   return (
  *     <div>
- *       <button onClick={() => open()}>Open Chat</button>
- *       <button onClick={() => openWithPrompt("Help me!")}>Get Help</button>
+ *       <button onClick={open}>Open chat</button>
+ *       <button onClick={voiceToggle}>{voiceState === "idle" ? "Start voice" : "Stop voice"}</button>
  *     </div>
  *   );
  * }
@@ -26,14 +24,21 @@ export function useYak() {
     if (!context) {
         throw new Error("useYak must be used within YakProvider");
     }
-    // Return only the public API
     return {
+        mode: context.mode,
         isOpen: context.isOpen,
-        isIframeReady: context.isIframeReady,
+        isReady: context.isReady,
         open: context.open,
         close: context.close,
         openWithPrompt: context.openWithPrompt,
         subscribeToToolEvents: context.subscribeToToolEvents,
+        voiceMachine: context.voiceMachine,
+        voiceState: context.voiceState,
+        voiceErrorMessage: context.voiceErrorMessage,
+        voiceIsActive: context.voiceIsActive,
+        voiceStart: context.voiceStart,
+        voiceStop: context.voiceStop,
+        voiceToggle: context.voiceToggle,
     };
 }
 /**

package/dist/index.d.ts

@@ -1,8 +1,9 @@
+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, YakConfig, YakContextValue } from "./context.js";
 export { useYak, useYakToolEvent } from "./context.js";
-export type { YakConfig, YakContextValue, ToolCallEventHandler } from "./context.js";
-export { YakProvider } from "./YakProvider.js";
 export type { YakProviderProps } from "./YakProvider.js";
-export { YakWidget } from "./YakWidget.js";
+export { YakProvider } from "./YakProvider.js";
 export type { YakWidgetProps } from "./YakWidget.js";
-export type { GraphQLSchemaHandler, RESTSchemaHandler, GraphQLRequest, RESTRequest, ToolCallHandler, ToolCallEvent, SchemaSource, GraphQLSchemaSource, OpenAPISchemaSource, Theme, ThemeColors, TriggerButtonConfig, WidgetPosition, } from "@yak-io/javascript";
+export { YakWidget } from "./YakWidget.js";
 //# 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":"AAGA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD,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,GACf,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,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,EAAE,oBAAoB,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAErF,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -1,4 +1,6 @@
 "use client";
+// Re-export useful types and constants from @yak-io/javascript for consumers
+export { disableYakLogging, enableYakLogging, isYakLoggingEnabled } from "@yak-io/javascript";
 // Public API - only export what consumers need
 export { useYak, useYakToolEvent } from "./context.js";
 export { YakProvider } from "./YakProvider.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yak-io/react",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "React SDK for embedding yak chatbot",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -41,7 +41,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@yak-io/javascript": "0.6.0"
+    "@yak-io/javascript": "0.8.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -50,12 +50,12 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^24.12.0",
+    "@types/node": "^24.12.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.0",
     "jsdom": "^28.1.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "typescript": "^5.3.0",
     "@repo/typescript-config": "0.0.0"
   },