@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 +100 -85
- package/dist/YakProvider.d.ts.map +1 -1
- package/dist/YakProvider.js +6 -0
- package/dist/YakWidget.d.ts.map +1 -1
- package/dist/YakWidget.js +3 -2
- package/dist/context.d.ts +7 -0
- package/dist/context.d.ts.map +1 -1
- package/dist/context.js +2 -0
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -1,18 +1,29 @@
|
|
|
1
1
|
# @yak-io/react
|
|
2
2
|
|
|
3
|
-
|
|
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
|
-
|
|
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
|
-
|
|
15
|
+
## Exports
|
|
12
16
|
|
|
13
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
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
|
-
|
|
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
|
-
|
|
79
|
-
|
|
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
|
|
114
|
+
## API reference
|
|
88
115
|
|
|
89
|
-
###
|
|
116
|
+
### `<YakProvider>`
|
|
90
117
|
|
|
91
|
-
|
|
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
|
-
|
|
133
|
+
### `<YakWidget>`
|
|
94
134
|
|
|
95
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
147
|
+
Returns `YakContextValue`. Throws if used outside `YakProvider`.
|
|
125
148
|
|
|
126
149
|
```ts
|
|
127
150
|
const {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
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();
|
|
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
|
-
|
|
176
|
-
TriggerButtonConfig,
|
|
192
|
+
WidgetMode,
|
|
177
193
|
WidgetPosition,
|
|
178
|
-
|
|
179
|
-
|
|
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
|
|
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,
|
|
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"}
|
package/dist/YakProvider.js
CHANGED
|
@@ -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,
|
package/dist/YakWidget.d.ts.map
CHANGED
|
@@ -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,
|
|
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
|
-
|
|
72
|
-
const
|
|
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. */
|
package/dist/context.d.ts.map
CHANGED
|
@@ -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,
|
|
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.
|
|
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.
|
|
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",
|