@yak-io/react 0.7.0 → 0.8.0

package/README.md

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

package/dist/YakProvider.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import { YakContext } from "./context.js";
 import { YakEmbed, } from "@yak-io/javascript";
-import { logger } from "./internal/logger.js";
+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
@@ -11,7 +11,7 @@ import { logger } from "./internal/logger.js";
  */
 export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, trigger = false, children, }) {
     const [isOpen, setIsOpen] = useState(false);
-    const [isIframeReady, setIsIframeReady] = useState(false);
+    const [isReady, setIsReady] = useState(false);
     // Store event subscribers for tool call events
     const toolEventSubscribersRef = useRef(new Set());
     // Handler that notifies all subscribers when a tool call completes
@@ -61,7 +61,7 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
         embed.mount();
         const unsubscribe = embed.onStateChange((state) => {
             setIsOpen(state.isOpen);
-            setIsIframeReady(state.isReady);
+            setIsReady(state.isReady);
         });
         return () => {
             unsubscribe();
@@ -130,12 +130,12 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
     const getIframeOrigin = useCallback(() => embed.getClient().getIframeOrigin(), [embed]);
     const contextValue = useMemo(() => ({
         isOpen,
-        isIframeReady,
+        isReady,
         open,
         close,
         openWithPrompt,
         subscribeToToolEvents,
         getIframeOrigin,
-    }), [isOpen, isIframeReady, open, close, openWithPrompt, subscribeToToolEvents, getIframeOrigin]);
+    }), [isOpen, isReady, open, close, openWithPrompt, subscribeToToolEvents, getIframeOrigin]);
     return _jsx(YakContext.Provider, { value: contextValue, children: children });
 }

package/dist/YakWidget.js

@@ -41,10 +41,10 @@ function buildButtonClasses(colorMode, hasLightCustom, hasDarkCustom) {
  * only provides the React button element using those shared class names.
  */
 export function YakWidget({ triggerLabel = "Ask with AI", position = "bottom-right", colorMode, lightButton, darkButton, } = {}) {
-    const { open, isOpen, isIframeReady } = useYak();
+    const { open, isOpen, isReady } = useYak();
     const internal = useContext(YakContext);
     const logoUrl = internal ? `${internal.getIframeOrigin()}/logo.svg` : "";
-    const isLoading = isOpen && !isIframeReady;
+    const isLoading = isOpen && !isReady;
     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

@@ -20,7 +20,7 @@ export type YakContextValue = {
     /** Whether the chat widget is currently open */
     isOpen: boolean;
     /** Whether the iframe is ready to receive messages */
-    isIframeReady: boolean;
+    isReady: boolean;
     /** Open the chat widget */
     open: () => void;
     /** Close the chat widget */

package/dist/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;AAElE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,MAAM,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,aAAa,EAAE,OAAO,CAAC;IACvB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,yDAAyD;IACzD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,+CAA+C;IAC/C,qBAAqB,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,IAAI,CAAC;CACtE,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,4DAA4D;IAC5D,eAAe,EAAE,MAAM,MAAM,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,UAAU,yDAAsD,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,MAAM,IAAI,eAAe,CAcxC;AAED;;;GAGG;AACH,wBAAgB,cAAc,IAAI,uBAAuB,CAMxD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAkBnE"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"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"}

package/dist/context.js

@@ -29,7 +29,7 @@ export function useYak() {
     // Return only the public API
     return {
         isOpen: context.isOpen,
-        isIframeReady: context.isIframeReady,
+        isReady: context.isReady,
         open: context.open,
         close: context.close,
         openWithPrompt: context.openWithPrompt,

package/dist/index.d.ts

@@ -4,5 +4,6 @@ export { YakProvider } from "./YakProvider.js";
 export type { YakProviderProps } from "./YakProvider.js";
 export { YakWidget } from "./YakWidget.js";
 export type { YakWidgetProps } from "./YakWidget.js";
-export type { GraphQLSchemaHandler, RESTSchemaHandler, GraphQLRequest, RESTRequest, ToolCallHandler, ToolCallEvent, SchemaSource, GraphQLSchemaSource, OpenAPISchemaSource, Theme, ThemeColors, TriggerButtonConfig, WidgetPosition, } from "@yak-io/javascript";
+export { 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";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGrD,YAAY,EACV,oBAAoB,EACpB,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,eAAe,EACf,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,cAAc,GACf,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -3,3 +3,5 @@
 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.7.0",
+  "version": "0.8.0",
   "description": "React SDK for embedding yak chatbot",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -41,7 +41,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@yak-io/javascript": "0.6.0"
+    "@yak-io/javascript": "0.7.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^24.10.4",
+    "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.0",
     "jsdom": "^28.1.0",

package/dist/internal/logger.d.ts

@@ -1,6 +0,0 @@
-/**
- * Re-export logger from @yak-io/javascript.
- * All logging configuration is centralized there.
- */
-export { logger } from "@yak-io/javascript";
-//# sourceMappingURL=logger.d.ts.map

package/dist/internal/logger.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/internal/logger.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/internal/logger.js

@@ -1,5 +0,0 @@
-/**
- * Re-export logger from @yak-io/javascript.
- * All logging configuration is centralized there.
- */
-export { logger } from "@yak-io/javascript";