@yak-io/react 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,18 +1,29 @@
1
1
  # @yak-io/react
2
2
 
3
- React integration for the Yak embeddable chat widget. Provides `YakProvider`, `YakWidget`, `useYak`, and `useYakToolEvent`.
3
+ > 📚 **Full documentation:** https://docs.yak.io/docs/sdks/react
4
+ >
5
+ > 🤖 **For LLMs / AI agents:** https://docs.yak.io/llms.txt
4
6
 
5
- ## Installation
7
+ 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.
8
+
9
+ **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.
6
10
 
7
11
  ```bash
8
12
  pnpm add @yak-io/react
9
13
  ```
10
14
 
11
- For Next.js, use [`@yak-io/nextjs`](../nextjs) instead — it adds route scanning and server handler factories on top of this package.
15
+ ## Exports
12
16
 
13
- ## Quickstart
17
+ | Export | Kind | Purpose |
18
+ | --- | --- | --- |
19
+ | `YakProvider` | component | Sets up the chat + voice runtime. Wrap your app once. |
20
+ | `YakWidget` | component | The floating launcher pill. Render it inside `YakProvider`, or omit it and build your own trigger. |
21
+ | `useYak()` | hook | Imperative control of chat + voice, plus reactive state. |
22
+ | `useYakToolEvent(handler)` | hook | Run a callback after each tool call (e.g. cache invalidation). |
23
+ | `enableYakLogging` / `disableYakLogging` / `isYakLoggingEnabled` | fn | Toggle verbose SDK logging. |
24
+ | Types | — | `YakProviderProps`, `YakWidgetProps`, `YakContextValue`, plus core types re-exported from `@yak-io/javascript`. |
14
25
 
15
- ### 1. Wrap your app with `YakProvider`
26
+ ## Quickstart
16
27
 
17
28
  ```tsx
18
29
  // src/App.tsx (or your root layout)
@@ -22,11 +33,14 @@ export default function App({ children }: { children: React.ReactNode }) {
22
33
  return (
23
34
  <YakProvider
24
35
  appId={import.meta.env.VITE_YAK_APP_ID}
36
+ mode="both" // "chat" | "voice" | "both" — default "chat"
25
37
  theme={{ position: "bottom-right", colorMode: "system" }}
38
+ // Routes + tools the assistant may use (usually your server endpoint).
26
39
  getConfig={async () => {
27
40
  const res = await fetch("/api/yak");
28
41
  return res.json();
29
42
  }}
43
+ // Execute a tool the assistant decides to call.
30
44
  onToolCall={async (name, args) => {
31
45
  const res = await fetch("/api/yak", {
32
46
  method: "POST",
@@ -45,142 +59,143 @@ export default function App({ children }: { children: React.ReactNode }) {
45
59
  }
46
60
  ```
47
61
 
48
- ### 2. Control the widget programmatically
62
+ ## Programmatic control
63
+
64
+ `useYak()` works from any component inside `YakProvider`. To skip the floating pill entirely, just don't render `<YakWidget>` and wire your own buttons:
49
65
 
50
66
  ```tsx
51
67
  import { useYak } from "@yak-io/react";
52
68
 
53
- export function HelpButton() {
69
+ function HelpButton() {
54
70
  const { open, openWithPrompt, isOpen } = useYak();
71
+ return (
72
+ <>
73
+ <button onClick={open}>Open chat</button>
74
+ <button onClick={() => openWithPrompt("How do I get started?")}>Get help</button>
75
+ {isOpen && <span>Chat is open</span>}
76
+ </>
77
+ );
78
+ }
79
+ ```
80
+
81
+ ## Voice
82
+
83
+ 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).
84
+
85
+ ```tsx
86
+ import { useYak } from "@yak-io/react";
55
87
 
88
+ function VoiceButton() {
89
+ const { voiceToggle, voiceState, voiceIsActive, voiceLoading } = useYak();
56
90
  return (
57
- <div>
58
- <button onClick={open}>Open Chat</button>
59
- <button onClick={() => openWithPrompt("How do I get started?")}>
60
- Get Help
61
- </button>
62
- {isOpen && <p>Chat is open</p>}
63
- </div>
91
+ <button onClick={voiceToggle} disabled={voiceLoading}>
92
+ {voiceIsActive ? `Stop (${voiceState})` : "Start voice"}
93
+ </button>
64
94
  );
65
95
  }
66
96
  ```
67
97
 
68
- ### 3. Invalidate data after tool calls
98
+ ## Tool events
99
+
100
+ Re-sync your UI when the assistant changes data:
69
101
 
70
102
  ```tsx
71
103
  import { useYakToolEvent } from "@yak-io/react";
72
104
 
73
105
  function TasksPage() {
74
- const [tasks, setTasks] = useState([]);
75
-
76
- // Re-fetch when the chatbot modifies tasks
77
106
  useYakToolEvent((event) => {
78
- if (event.ok && event.name.startsWith("tasks.")) {
79
- fetchTasks().then(setTasks);
80
- }
107
+ // { name, args, ok, result?, error? }
108
+ if (event.ok && event.name.startsWith("tasks.")) refetchTasks();
81
109
  });
82
-
83
110
  // ...
84
111
  }
85
112
  ```
86
113
 
87
- ## API Reference
114
+ ## API reference
88
115
 
89
- ### `YakProvider`
116
+ ### `<YakProvider>`
90
117
 
91
- Sets up context, initializes the widget, and delegates DOM rendering to `@yak-io/javascript`.
118
+ | Prop | Type | Default | Description |
119
+ | --- | --- | --- | --- |
120
+ | `appId` | `string` | — | Your Yak app ID (required). |
121
+ | `children` | `ReactNode` | — | Your app (required). |
122
+ | `mode` | `"chat" \| "voice" \| "both"` | `"chat"` | Which surfaces are exposed. |
123
+ | `getConfig` | `ChatConfigProvider` | — | Async provider of routes + tools. Called on open / voice start. |
124
+ | `onToolCall` | `ToolCallHandler` | — | Executes a tool the assistant calls. |
125
+ | `onGraphQLSchemaCall` | `GraphQLSchemaHandler` | — | Handles GraphQL schema tool calls. |
126
+ | `onRESTSchemaCall` | `RESTSchemaHandler` | — | Handles REST/OpenAPI schema tool calls. |
127
+ | `theme` | `Theme` | — | Position, color mode, and colors. |
128
+ | `onRedirect` | `(path: string) => void` | `window.location.assign` | Navigation handler. |
129
+ | `disableRestartButton` | `boolean` | `false` | Hide the restart-session button. |
130
+ | `trigger` | `boolean \| TriggerButtonConfig` | `false` | Render the provider's built-in pill. Leave `false` and use `<YakWidget>` instead. |
131
+ | `user` | `UserIdentity` | — | Signed end-user identity for conversation persistence. See [end-user identity](https://docs.yak.io/docs/customization/end-user-identity). |
92
132
 
93
- **Props:**
133
+ ### `<YakWidget>`
94
134
 
95
- | Prop | Type | Required | Description |
96
- |------|------|----------|-------------|
97
- | `appId` | `string` | ✅ | Your Yak app ID |
98
- | `children` | `ReactNode` | ✅ | Your app content |
99
- | `getConfig` | `ChatConfigProvider` | — | Async function returning routes + tools config. Called when the widget opens. |
100
- | `onToolCall` | `ToolCallHandler` | — | Handle tool calls from the assistant |
101
- | `onGraphQLSchemaCall` | `GraphQLSchemaHandler` | — | Handle GraphQL schema tool calls |
102
- | `onRESTSchemaCall` | `RESTSchemaHandler` | — | Handle REST/OpenAPI schema tool calls |
103
- | `theme` | `Theme` | — | Widget theme (position, colorMode, colors) |
104
- | `onRedirect` | `(path: string) => void` | — | Custom navigation handler (defaults to `window.location.assign`) |
105
- | `disableRestartButton` | `boolean` | — | Hide the restart session button |
106
- | `trigger` | `boolean \| TriggerButtonConfig` | — | Built-in trigger button config (`false` by default — use `<YakWidget>` instead) |
135
+ The floating launcher pill. Shows a chat icon, a voice icon, or both, based on `mode`.
107
136
 
108
- ### `YakWidget`
137
+ | Prop | Type | Default | Description |
138
+ | --- | --- | --- | --- |
139
+ | `mode` | `"chat" \| "voice" \| "both"` | inherits provider | Override which icons appear. |
140
+ | `lightButton` | `{ background?, color?, border? }` | — | Pill colors in light mode. |
141
+ | `darkButton` | `{ background?, color?, border? }` | — | Pill colors in dark mode. |
109
142
 
110
- Renders a fixed-position launcher button. Place it anywhere inside `YakProvider`.
111
-
112
- **Props:**
113
-
114
- | Prop | Type | Description |
115
- |------|------|-------------|
116
- | `triggerLabel` | `string` | Button label (default: `"Ask with AI"`) |
117
- | `position` | `WidgetPosition` | Button position (default: `"bottom-right"`) |
118
- | `colorMode` | `"light" \| "dark" \| "system"` | Color mode override |
119
- | `lightButton` | `{ background?, color?, border? }` | Custom light mode button colors |
120
- | `darkButton` | `{ background?, color?, border? }` | Custom dark mode button colors |
143
+ > Position and color mode come from the provider's `theme` (`theme.position`, `theme.colorMode`) not from `YakWidget` props.
121
144
 
122
145
  ### `useYak()`
123
146
 
124
- Access the widget API from any component inside `YakProvider`.
147
+ Returns `YakContextValue`. Throws if used outside `YakProvider`.
125
148
 
126
149
  ```ts
127
150
  const {
128
- isOpen, // boolean — whether the widget is open
129
- isReady, // boolean — whether the iframe is ready
130
- open, // () => void
131
- close, // () => void
132
- openWithPrompt, // (prompt: string) => void
151
+ // chat
152
+ isOpen, // boolean
153
+ isReady, // boolean iframe ready to receive messages
154
+ chatLoading, // boolean — isOpen && !isReady (show a loading spinner)
155
+ open, // () => void
156
+ close, // () => void
157
+ openWithPrompt, // (prompt: string) => void
158
+ // voice
159
+ voiceState, // "idle" | "connecting" | "listening" | "thinking" | "speaking" | "error"
160
+ voiceMachine, // { state, errorMessage? }
161
+ voiceIsActive, // boolean — connecting/listening/thinking/speaking
162
+ voiceLoading, // boolean — voiceState === "connecting"
163
+ voiceErrorMessage, // string | undefined
164
+ voiceStart, // () => Promise<void>
165
+ voiceStop, // () => Promise<void>
166
+ voiceToggle, // () => Promise<void>
167
+ // misc
168
+ mode, // "chat" | "voice" | "both"
133
169
  subscribeToToolEvents, // (handler) => () => void
134
170
  } = useYak();
135
171
  ```
136
172
 
137
- Throws if called outside `YakProvider`.
138
-
139
- ### `useYakToolEvent(handler)`
140
-
141
- Subscribe to tool call completion events. Automatically unsubscribes on unmount. Useful for cache invalidation when the chatbot modifies data.
142
-
143
- ```ts
144
- useYakToolEvent((event) => {
145
- // event.name — the tool name called ("tasks.list")
146
- // event.args — arguments passed to the tool
147
- // event.ok — whether the call succeeded
148
- // event.result — the result (if ok)
149
- // event.error — error message (if not ok)
150
- });
151
- ```
152
-
153
173
  ## Logging
154
174
 
155
175
  ```ts
156
176
  import { enableYakLogging, disableYakLogging, isYakLoggingEnabled } from "@yak-io/react";
157
177
 
158
- enableYakLogging(); // Enable verbose SDK logs
159
- disableYakLogging(); // Disable SDK logs
160
- isYakLoggingEnabled(); // → boolean
178
+ enableYakLogging(); // verbose SDK logs
161
179
  ```
162
180
 
163
181
  ## Types
164
182
 
165
- All key types are re-exported for convenience:
166
-
167
183
  ```ts
168
184
  import type {
185
+ YakProviderProps,
186
+ YakWidgetProps,
187
+ YakContextValue,
169
188
  ChatConfigProvider,
170
189
  ToolCallHandler,
171
190
  ToolCallEvent,
172
- GraphQLSchemaHandler,
173
- RESTSchemaHandler,
174
191
  Theme,
175
- ThemeColors,
176
- TriggerButtonConfig,
192
+ WidgetMode,
177
193
  WidgetPosition,
178
- SchemaSource,
179
- GraphQLSchemaSource,
180
- OpenAPISchemaSource,
194
+ VoiceState,
195
+ VoiceMachine,
181
196
  } from "@yak-io/react";
182
197
  ```
183
198
 
184
199
  ## License
185
200
 
186
- Proprietary — see LICENSE file.
201
+ Proprietary — see [LICENSE](./LICENSE).
@@ -1 +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"}
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,CAmNtC"}
@@ -158,10 +158,13 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
158
158
  const getIframeOrigin = useCallback(() => embed.getClient().getIframeOrigin(), [embed]);
159
159
  const voiceState = voiceMachine.state;
160
160
  const voiceIsActive = voiceState !== "idle" && voiceState !== "error";
161
+ const chatLoading = isOpen && !isReady;
162
+ const voiceLoading = voiceState === "connecting";
161
163
  const contextValue = useMemo(() => ({
162
164
  mode,
163
165
  isOpen,
164
166
  isReady,
167
+ chatLoading,
165
168
  open,
166
169
  close,
167
170
  openWithPrompt,
@@ -170,6 +173,7 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
170
173
  voiceState,
171
174
  voiceErrorMessage: voiceMachine.errorMessage,
172
175
  voiceIsActive,
176
+ voiceLoading,
173
177
  voiceStart,
174
178
  voiceStop,
175
179
  voiceToggle,
@@ -179,6 +183,7 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
179
183
  mode,
180
184
  isOpen,
181
185
  isReady,
186
+ chatLoading,
182
187
  open,
183
188
  close,
184
189
  openWithPrompt,
@@ -186,6 +191,7 @@ export function YakProvider({ appId, mode = "chat", getConfig, onToolCall, onGra
186
191
  voiceMachine,
187
192
  voiceState,
188
193
  voiceIsActive,
194
+ voiceLoading,
189
195
  voiceStart,
190
196
  voiceStop,
191
197
  voiceToggle,
@@ -1 +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"}
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,CAmEzC"}
package/dist/YakWidget.js CHANGED
@@ -68,8 +68,9 @@ export function YakWidget({ mode, lightButton, darkButton, } = {}) {
68
68
  const logoUrl = `${ctx.getIframeOrigin()}/logo.svg`;
69
69
  const showChat = resolvedMode === "chat" || resolvedMode === "both";
70
70
  const showVoice = resolvedMode === "voice" || resolvedMode === "both";
71
- const chatLoading = ctx.isOpen && !ctx.isReady;
72
- const voiceConnecting = ctx.voiceState === "connecting";
71
+ // Consume the shipped loading flags rather than re-deriving them here.
72
+ const chatLoading = ctx.chatLoading;
73
+ const voiceConnecting = ctx.voiceLoading;
73
74
  const hasLightCustom = lightButton?.background || lightButton?.color || lightButton?.border;
74
75
  const hasDarkCustom = darkButton?.background || darkButton?.color || darkButton?.border;
75
76
  const buttonStyle = buildButtonStyle(lightButton, darkButton);
package/dist/context.d.ts CHANGED
@@ -23,6 +23,11 @@ export type YakContextValue = {
23
23
  isOpen: boolean;
24
24
  /** Whether the iframe is ready to receive messages */
25
25
  isReady: boolean;
26
+ /**
27
+ * Whether the chat is opening but not yet interactive (`isOpen && !isReady`).
28
+ * Drive a custom loading state off this instead of re-deriving it.
29
+ */
30
+ chatLoading: boolean;
26
31
  /** Open the chat widget */
27
32
  open: () => void;
28
33
  /** Close the chat widget */
@@ -39,6 +44,8 @@ export type YakContextValue = {
39
44
  voiceErrorMessage: string | undefined;
40
45
  /** Whether a voice session is currently live (connecting/listening/thinking/speaking). */
41
46
  voiceIsActive: boolean;
47
+ /** Whether the voice session is still connecting (`voiceState === "connecting"`). */
48
+ voiceLoading: boolean;
42
49
  /** Start a voice session. Must be invoked from a user gesture. */
43
50
  voiceStart: () => Promise<void>;
44
51
  /** Stop the current voice session. */
@@ -1 +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"}
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;;;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 CHANGED
@@ -28,6 +28,7 @@ export function useYak() {
28
28
  mode: context.mode,
29
29
  isOpen: context.isOpen,
30
30
  isReady: context.isReady,
31
+ chatLoading: context.chatLoading,
31
32
  open: context.open,
32
33
  close: context.close,
33
34
  openWithPrompt: context.openWithPrompt,
@@ -36,6 +37,7 @@ export function useYak() {
36
37
  voiceState: context.voiceState,
37
38
  voiceErrorMessage: context.voiceErrorMessage,
38
39
  voiceIsActive: context.voiceIsActive,
40
+ voiceLoading: context.voiceLoading,
39
41
  voiceStart: context.voiceStart,
40
42
  voiceStop: context.voiceStop,
41
43
  voiceToggle: context.voiceToggle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yak-io/react",
3
- "version": "0.9.0",
3
+ "version": "0.10.0",
4
4
  "description": "React SDK for embedding yak chatbot",
5
5
  "type": "module",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -25,6 +25,7 @@
25
25
  "node": ">=18"
26
26
  },
27
27
  "files": [
28
+ "README.md",
28
29
  "dist",
29
30
  "LICENSE"
30
31
  ],
@@ -41,7 +42,7 @@
41
42
  "./package.json": "./package.json"
42
43
  },
43
44
  "dependencies": {
44
- "@yak-io/javascript": "0.8.0"
45
+ "@yak-io/javascript": "0.9.0"
45
46
  },
46
47
  "peerDependencies": {
47
48
  "react": "^18.0.0 || ^19.0.0",
@@ -59,6 +60,7 @@
59
60
  "typescript": "^5.3.0",
60
61
  "@repo/typescript-config": "0.0.0"
61
62
  },
63
+ "homepage": "https://docs.yak.io/docs/sdks/react",
62
64
  "scripts": {
63
65
  "build": "tsc",
64
66
  "check-types": "tsc --noEmit",