@yak-io/react 0.9.0 → 0.11.0

package/README.md

@@ -1,18 +1,30 @@
 # @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). |
+| `createYakToolset` / `createYakServerAdapter` | fn | Compose GraphQL/REST/tRPC/custom tool adapters into one `onToolCall` (re-exported from `@yak-io/javascript`). |
+| `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 +34,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 +60,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. || `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,
+  ToolAdapter,
+  YakToolset,
+  YakServerAdapterConfig,
   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,4 +1,4 @@
-import { type ChatConfigProvider, type GraphQLSchemaHandler, type RESTSchemaHandler, type Theme, type ToolCallHandler, type TriggerButtonConfig, type UserIdentity, type WidgetMode } from "@yak-io/javascript";
+import { type ChatConfigProvider, type Theme, type ToolCallHandler, type TriggerButtonConfig, type UserIdentity, type WidgetMode } from "@yak-io/javascript";
 import type React from "react";
 /**
  * Props for YakProvider
@@ -6,6 +6,12 @@ import type React from "react";
 export type YakProviderProps = {
     /** App identifier in the yak SaaS */
     appId: string;
+    /**
+     * Override the origin the chat/voice runtime connects to. Defaults to
+     * `https://chat.yak.io`. Read once when the provider mounts; most integrators
+     * never set this.
+     */
+    origin?: string;
     /**
      * Which experiences this widget exposes.
      *   "chat"  — chat only (iframe).
@@ -25,14 +31,6 @@ export type YakProviderProps = {
      * The consuming platform decides how to execute (browser, server fetch, etc.)
      */
     onToolCall?: ToolCallHandler;
-    /**
-     * Handler for GraphQL schema tool calls.
-     */
-    onGraphQLSchemaCall?: GraphQLSchemaHandler;
-    /**
-     * Handler for REST/OpenAPI schema tool calls.
-     */
-    onRESTSchemaCall?: RESTSchemaHandler;
     /** Optional theme configuration */
     theme?: Theme;
     /** Optional redirect handler (defaults to window.location.assign) */
@@ -62,5 +60,5 @@ export type YakProviderProps = {
  * (panel, iframe, optional trigger) is delegated to YakEmbed. Consumers
  * access both surfaces via `useYak()`.
  */
-export declare function YakProvider({ appId, mode, getConfig, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, trigger, user, children, }: YakProviderProps): React.JSX.Element;
+export declare function YakProvider({ appId, origin, mode, getConfig, onToolCall, 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,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"}
+{"version":3,"file":"YakProvider.d.ts","sourceRoot":"","sources":["../src/YakProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,kBAAkB,EAGvB,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;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;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,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,MAAM,EACN,IAAa,EACb,SAAS,EACT,UAAU,EACV,KAAK,EACL,UAAU,EACV,oBAAoB,EACpB,OAAe,EACf,IAAI,EACJ,QAAQ,GACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4MtC"}

package/dist/YakProvider.js

@@ -8,7 +8,7 @@ import { YakContext } from "./context.js";
  * (panel, iframe, optional trigger) is delegated to YakEmbed. Consumers
  * access both surfaces via `useYak()`.
  */
-export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, trigger = false, user, children, }) {
+export function YakProvider({ appId, origin, mode = "chat", getConfig, onToolCall, theme, onRedirect, disableRestartButton, trigger = false, user, children, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [isReady, setIsReady] = useState(false);
     const [voiceMachine, setVoiceMachine] = useState(INITIAL_VOICE_MACHINE);
@@ -45,13 +45,12 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
     if (!embedRef.current) {
         embedRef.current = new YakEmbed({
             appId,
+            origin,
             mode,
             theme,
             trigger,
             getConfig,
             onToolCall,
-            onGraphQLSchemaCall,
-            onRESTSchemaCall,
             onRedirect: resolvedRedirect,
             options: { disableRestartButton },
             onToolCallComplete: handleToolCallComplete,
@@ -79,8 +78,6 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
         embed.getClient().updateConfig({
             appId,
             onToolCall,
-            onGraphQLSchemaCall,
-            onRESTSchemaCall,
             theme,
             onRedirect: resolvedRedirect,
             options: { disableRestartButton },
@@ -91,16 +88,12 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
             appId,
             getConfig,
             onToolCall,
-            onGraphQLSchemaCall,
-            onRESTSchemaCall,
             onRedirect: resolvedRedirect,
         });
     }, [
         appId,
         getConfig,
         onToolCall,
-        onGraphQLSchemaCall,
-        onRESTSchemaCall,
         theme,
         resolvedRedirect,
         disableRestartButton,
@@ -158,10 +151,13 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
     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,
@@ -170,6 +166,7 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
         voiceState,
         voiceErrorMessage: voiceMachine.errorMessage,
         voiceIsActive,
+        voiceLoading,
         voiceStart,
         voiceStop,
         voiceToggle,
@@ -179,6 +176,7 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
         mode,
         isOpen,
         isReady,
+        chatLoading,
         open,
         close,
         openWithPrompt,
@@ -186,6 +184,7 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
         voiceMachine,
         voiceState,
         voiceIsActive,
+        voiceLoading,
         voiceStart,
         voiceStop,
         voiceToggle,

package/dist/YakWidget.d.ts.map

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

@@ -68,8 +68,9 @@ export function YakWidget({ mode, lightButton, darkButton, } = {}) {
     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";
+    // 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);

package/dist/context.d.ts

@@ -23,6 +23,11 @@ export type YakContextValue = {
     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 */
@@ -39,6 +44,8 @@ export type YakContextValue = {
     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. */

package/dist/context.d.ts.map

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

@@ -28,6 +28,7 @@ export function useYak() {
         mode: context.mode,
         isOpen: context.isOpen,
         isReady: context.isReady,
+        chatLoading: context.chatLoading,
         open: context.open,
         close: context.close,
         openWithPrompt: context.openWithPrompt,
@@ -36,6 +37,7 @@ export function useYak() {
         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,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 { ChatConfigProvider, GraphQLRequest, RESTRequest, Theme, ThemeColors, ToolAdapter, ToolCallEvent, ToolCallHandler, TriggerButtonConfig, VoiceMachine, VoiceState, WidgetMode, WidgetPosition, YakServerAdapterConfig, YakToolset, } from "@yak-io/javascript";
+export { createYakServerAdapter, createYakToolset, disableYakLogging, enableYakLogging, isYakLoggingEnabled, } from "@yak-io/javascript";
 export type { ToolCallEventHandler, YakConfig, YakContextValue } from "./context.js";
 export { useYak, useYakToolEvent } from "./context.js";
 export type { YakProviderProps } from "./YakProvider.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,KAAK,EACL,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACV,UAAU,EACV,cAAc,EACd,sBAAsB,EACtB,UAAU,GACX,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,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,6 +1,6 @@
 "use client";
 // Re-export useful types and constants from @yak-io/javascript for consumers
-export { disableYakLogging, enableYakLogging, isYakLoggingEnabled } from "@yak-io/javascript";
+export { createYakServerAdapter, createYakToolset, 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.9.0",
+  "version": "0.11.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.8.0"
+    "@yak-io/javascript": "0.10.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -59,6 +60,7 @@
     "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",