@yak-io/react 0.8.0 → 0.10.0

package/README.md

@@ -1,18 +1,29 @@
 # @yak-io/react
 
-React integration for the Yak embeddable chat widget. Provides `YakProvider`, `YakWidget`, `useYak`, and `useYakToolEvent`.
+> 📚 **Full documentation:** https://docs.yak.io/docs/sdks/react
+>
+> 🤖 **For LLMs / AI agents:** https://docs.yak.io/llms.txt
 
-## Installation
+React SDK for [Yak](https://docs.yak.io) — an embeddable AI assistant (text chat **and** push-to-talk voice) for web apps. Wrap your app in `YakProvider`, render `YakWidget` (or build your own trigger), and control everything with the `useYak()` hook.
+
+**On Next.js, use [`@yak-io/nextjs`](https://docs.yak.io/docs/sdks/nextjs) instead** — it adds route scanning and server handler factories on top of this package.
 
 ```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.
+## Exports
 
-## Quickstart
+| Export | Kind | Purpose |
+| --- | --- | --- |
+| `YakProvider` | component | Sets up the chat + voice runtime. Wrap your app once. |
+| `YakWidget` | component | The floating launcher pill. Render it inside `YakProvider`, or omit it and build your own trigger. |
+| `useYak()` | hook | Imperative control of chat + voice, plus reactive state. |
+| `useYakToolEvent(handler)` | hook | Run a callback after each tool call (e.g. cache invalidation). |
+| `enableYakLogging` / `disableYakLogging` / `isYakLoggingEnabled` | fn | Toggle verbose SDK logging. |
+| Types | — | `YakProviderProps`, `YakWidgetProps`, `YakContextValue`, plus core types re-exported from `@yak-io/javascript`. |
 
-### 1. Wrap your app with `YakProvider`
+## Quickstart
 
 ```tsx
 // src/App.tsx (or your root layout)
@@ -22,11 +33,14 @@ export default function App({ children }: { children: React.ReactNode }) {
   return (
     <YakProvider
       appId={import.meta.env.VITE_YAK_APP_ID}
+      mode="both" // "chat" | "voice" | "both" — default "chat"
       theme={{ position: "bottom-right", colorMode: "system" }}
+      // Routes + tools the assistant may use (usually your server endpoint).
       getConfig={async () => {
         const res = await fetch("/api/yak");
         return res.json();
       }}
+      // Execute a tool the assistant decides to call.
       onToolCall={async (name, args) => {
         const res = await fetch("/api/yak", {
           method: "POST",
@@ -45,142 +59,143 @@ export default function App({ children }: { children: React.ReactNode }) {
 }
 ```
 
-### 2. Control the widget programmatically
+## Programmatic control
+
+`useYak()` works from any component inside `YakProvider`. To skip the floating pill entirely, just don't render `<YakWidget>` and wire your own buttons:
 
 ```tsx
 import { useYak } from "@yak-io/react";
 
-export function HelpButton() {
+function HelpButton() {
   const { open, openWithPrompt, isOpen } = useYak();
+  return (
+    <>
+      <button onClick={open}>Open chat</button>
+      <button onClick={() => openWithPrompt("How do I get started?")}>Get help</button>
+      {isOpen && <span>Chat is open</span>}
+    </>
+  );
+}
+```
+
+## Voice
+
+Set `mode="voice"` or `mode="both"` on the provider, then drive the session with the voice methods. `voiceStart()` must run from a user gesture (browser mic requirement).
+
+```tsx
+import { useYak } from "@yak-io/react";
 
+function VoiceButton() {
+  const { voiceToggle, voiceState, voiceIsActive, voiceLoading } = 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>
+    <button onClick={voiceToggle} disabled={voiceLoading}>
+      {voiceIsActive ? `Stop (${voiceState})` : "Start voice"}
+    </button>
   );
 }
 ```
 
-### 3. Invalidate data after tool calls
+## Tool events
+
+Re-sync your UI when the assistant changes data:
 
 ```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);
-    }
+    // { name, args, ok, result?, error? }
+    if (event.ok && event.name.startsWith("tasks.")) refetchTasks();
   });
-
   // ...
 }
 ```
 
-## API Reference
+## API reference
 
-### `YakProvider`
+### `<YakProvider>`
 
-Sets up context, initializes the widget, and delegates DOM rendering to `@yak-io/javascript`.
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `appId` | `string` | — | Your Yak app ID (required). |
+| `children` | `ReactNode` | — | Your app (required). |
+| `mode` | `"chat" \| "voice" \| "both"` | `"chat"` | Which surfaces are exposed. |
+| `getConfig` | `ChatConfigProvider` | — | Async provider of routes + tools. Called on open / voice start. |
+| `onToolCall` | `ToolCallHandler` | — | Executes a tool the assistant calls. |
+| `onGraphQLSchemaCall` | `GraphQLSchemaHandler` | — | Handles GraphQL schema tool calls. |
+| `onRESTSchemaCall` | `RESTSchemaHandler` | — | Handles REST/OpenAPI schema tool calls. |
+| `theme` | `Theme` | — | Position, color mode, and colors. |
+| `onRedirect` | `(path: string) => void` | `window.location.assign` | Navigation handler. |
+| `disableRestartButton` | `boolean` | `false` | Hide the restart-session button. |
+| `trigger` | `boolean \| TriggerButtonConfig` | `false` | Render the provider's built-in pill. Leave `false` and use `<YakWidget>` instead. |
+| `user` | `UserIdentity` | — | Signed end-user identity for conversation persistence. See [end-user identity](https://docs.yak.io/docs/customization/end-user-identity). |
 
-**Props:**
+### `<YakWidget>`
 
-| 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) |
+The floating launcher pill. Shows a chat icon, a voice icon, or both, based on `mode`.
 
-### `YakWidget`
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `mode` | `"chat" \| "voice" \| "both"` | inherits provider | Override which icons appear. |
+| `lightButton` | `{ background?, color?, border? }` | — | Pill colors in light mode. |
+| `darkButton` | `{ background?, color?, border? }` | — | Pill colors in dark mode. |
 
-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 |
+> Position and color mode come from the provider's `theme` (`theme.position`, `theme.colorMode`) — not from `YakWidget` props.
 
 ### `useYak()`
 
-Access the widget API from any component inside `YakProvider`.
+Returns `YakContextValue`. Throws if used outside `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
+  // chat
+  isOpen,          // boolean
+  isReady,         // boolean — iframe ready to receive messages
+  chatLoading,     // boolean — isOpen && !isReady (show a loading spinner)
+  open,            // () => void
+  close,           // () => void
+  openWithPrompt,  // (prompt: string) => void
+  // voice
+  voiceState,      // "idle" | "connecting" | "listening" | "thinking" | "speaking" | "error"
+  voiceMachine,    // { state, errorMessage? }
+  voiceIsActive,   // boolean — connecting/listening/thinking/speaking
+  voiceLoading,    // boolean — voiceState === "connecting"
+  voiceErrorMessage, // string | undefined
+  voiceStart,      // () => Promise<void>
+  voiceStop,       // () => Promise<void>
+  voiceToggle,     // () => Promise<void>
+  // misc
+  mode,            // "chat" | "voice" | "both"
   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
+enableYakLogging(); // verbose SDK logs
 ```
 
 ## Types
 
-All key types are re-exported for convenience:
-
 ```ts
 import type {
+  YakProviderProps,
+  YakWidgetProps,
+  YakContextValue,
   ChatConfigProvider,
   ToolCallHandler,
   ToolCallEvent,
-  GraphQLSchemaHandler,
-  RESTSchemaHandler,
   Theme,
-  ThemeColors,
-  TriggerButtonConfig,
+  WidgetMode,
   WidgetPosition,
-  SchemaSource,
-  GraphQLSchemaSource,
-  OpenAPISchemaSource,
+  VoiceState,
+  VoiceMachine,
 } from "@yak-io/react";
 ```
 
 ## License
 
-Proprietary — see LICENSE file.
+Proprietary — see [LICENSE](./LICENSE).

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,CAmNtC"}

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 [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);
             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,47 @@ 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 chatLoading = isOpen && !isReady;
+    const voiceLoading = voiceState === "connecting";
     const contextValue = useMemo(() => ({
+        mode,
         isOpen,
         isReady,
+        chatLoading,
         open,
         close,
         openWithPrompt,
         subscribeToToolEvents,
+        voiceMachine,
+        voiceState,
+        voiceErrorMessage: voiceMachine.errorMessage,
+        voiceIsActive,
+        voiceLoading,
+        voiceStart,
+        voiceStop,
+        voiceToggle,
         getIframeOrigin,
-    }), [isOpen, isReady, open, close, openWithPrompt, subscribeToToolEvents, getIframeOrigin]);
+        theme,
+    }), [
+        mode,
+        isOpen,
+        isReady,
+        chatLoading,
+        open,
+        close,
+        openWithPrompt,
+        subscribeToToolEvents,
+        voiceMachine,
+        voiceState,
+        voiceIsActive,
+        voiceLoading,
+        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,CAmEzC"}

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,27 @@ 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, isReady } = useYak();
-    const internal = useContext(YakContext);
-    const logoUrl = internal ? `${internal.getIframeOrigin()}/logo.svg` : "";
-    const isLoading = isOpen && !isReady;
+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";
+    // Consume the shipped loading flags rather than re-deriving them here.
+    const chatLoading = ctx.chatLoading;
+    const voiceConnecting = ctx.voiceLoading;
     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,21 @@ 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 */
     isReady: boolean;
+    /**
+     * Whether the chat is opening but not yet interactive (`isOpen && !isReady`).
+     * Drive a custom loading state off this instead of re-deriving it.
+     */
+    chatLoading: boolean;
     /** Open the chat widget */
     open: () => void;
     /** Close the chat widget */
@@ -29,6 +36,22 @@ 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;
+    /** Whether the voice session is still connecting (`voiceState === "connecting"`). */
+    voiceLoading: 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 +60,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,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;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;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB,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,qFAAqF;IACrF,YAAY,EAAE,OAAO,CAAC;IACtB,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,CAuBxC;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,23 @@ 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,
         isReady: context.isReady,
+        chatLoading: context.chatLoading,
         open: context.open,
         close: context.close,
         openWithPrompt: context.openWithPrompt,
         subscribeToToolEvents: context.subscribeToToolEvents,
+        voiceMachine: context.voiceMachine,
+        voiceState: context.voiceState,
+        voiceErrorMessage: context.voiceErrorMessage,
+        voiceIsActive: context.voiceIsActive,
+        voiceLoading: context.voiceLoading,
+        voiceStart: context.voiceStart,
+        voiceStop: context.voiceStop,
+        voiceToggle: context.voiceToggle,
     };
 }
 /**

package/dist/index.d.ts

@@ -1,9 +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 { 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";
+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,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9F,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":"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,7 +1,7 @@
 "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";
 export { YakWidget } from "./YakWidget.js";
-// Re-export useful types and constants from @yak-io/javascript for consumers
-export { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/javascript";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yak-io/react",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "React SDK for embedding yak chatbot",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -25,6 +25,7 @@
     "node": ">=18"
   },
   "files": [
+    "README.md",
     "dist",
     "LICENSE"
   ],
@@ -41,7 +42,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@yak-io/javascript": "0.7.0"
+    "@yak-io/javascript": "0.9.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -50,15 +51,16 @@
   "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"
   },
+  "homepage": "https://docs.yak.io/docs/sdks/react",
   "scripts": {
     "build": "tsc",
     "check-types": "tsc --noEmit",