@yak-io/react 0.4.0 → 0.5.0

package/dist/YakProvider.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 import { type Theme, type ChatConfigProvider, type ToolCallHandler, type GraphQLSchemaHandler, type RESTSchemaHandler } from "@yak-io/javascript";
 /**
  * Props for YakProvider

package/dist/YakProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YakProvider.d.ts","sourceRoot":"","sources":["../src/YakProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAEL,KAAK,KAAK,EAGV,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAEpB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAG5B;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,mCAAmC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qEAAqE;IACrE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,uDAAuD;IACvD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,0BAA0B;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAmMF;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,oBAAoB,EACpB,QAAQ,GACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwUtC"}
+{"version":3,"file":"YakProvider.d.ts","sourceRoot":"","sources":["../src/YakProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,KAAK,KAAK,EAGV,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAEpB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAG5B;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;;OAEG;IACH,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,mCAAmC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qEAAqE;IACrE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,uDAAuD;IACvD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,0BAA0B;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAmMF;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,oBAAoB,EACpB,QAAQ,GACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqVtC"}

package/dist/YakProvider.js

@@ -260,7 +260,18 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
             chatConfig: chatConfig ?? undefined,
             onToolCallComplete: handleToolCallComplete,
         });
-    }, [appId, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, chatConfig, client, handleToolCallComplete]);
+    }, [
+        appId,
+        onToolCall,
+        onGraphQLSchemaCall,
+        onRESTSchemaCall,
+        theme,
+        onRedirect,
+        disableRestartButton,
+        chatConfig,
+        client,
+        handleToolCallComplete,
+    ]);
     // Update client iframe window
     useEffect(() => {
         client.setIframeWindow(iframeWindow);
@@ -320,7 +331,10 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
             return;
         const mobileQuery = window.matchMedia("(max-width: 640px)");
         const notifyFullscreen = (isFullscreen) => {
-            const msg = { type: "yak:viewport", payload: { fullscreen: isFullscreen } };
+            const msg = {
+                type: "yak:viewport",
+                payload: { fullscreen: isFullscreen },
+            };
             iframeWindow?.postMessage(msg, iframeOrigin);
         };
         // Send initial state
@@ -450,10 +464,8 @@ export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall,
     // Determine color mode class for the container
     const colorModeClass = colorMode === "light" ? "yak-panel-light" : colorMode === "dark" ? "yak-panel-dark" : "";
     // Build container class names
-    const containerClasses = [
-        "yak-panel-container",
-        isDrawer && "yak-panel-drawer",
-        colorModeClass,
-    ].filter(Boolean).join(" ");
+    const containerClasses = ["yak-panel-container", isDrawer && "yak-panel-drawer", colorModeClass]
+        .filter(Boolean)
+        .join(" ");
     return (_jsxs(YakContext.Provider, { value: contextValue, children: [children, _jsx("style", { children: getIframeStyles() }), hasBeenOpened && (_jsx("div", { className: "yak-panel-root", "data-expanded": isExpanded, children: _jsx("div", { className: containerClasses, "data-position": position, "data-open": isWidgetOpen && isIframeReady, "data-expanded": isExpanded, children: _jsx("iframe", { ref: iframeRef, src: iframeSrc, className: "yak-panel-iframe", title: "yak-chat-host" }) }) }))] }));
 }

package/dist/YakWidget.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 import type { WidgetPosition } from "@yak-io/javascript";
 /**
  * Props for YakWidget

package/dist/YakWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YakWidget.d.ts","sourceRoot":"","sources":["../src/YakWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAiPzD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACxC,0CAA0C;IAC1C,WAAW,CAAC,EAAE;QACZ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,yCAAyC;IACzC,UAAU,CAAC,EAAE;QACX,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAA4B,EAC5B,QAAyB,EACzB,SAAS,EACT,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,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AA4NzD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACxC,0CAA0C;IAC1C,WAAW,CAAC,EAAE;QACZ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,yCAAyC;IACzC,UAAU,CAAC,EAAE;QACX,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAwCF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAA4B,EAC5B,QAAyB,EACzB,SAAS,EACT,WAAW,EACX,UAAU,GACX,GAAE,cAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyCzC"}

package/dist/YakWidget.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useYak } from "./context.js";
+import { useContext } from "react";
+import { YakContext, useYak } from "./context.js";
 /**
  * All button styles consolidated in one place
  */
@@ -99,6 +100,19 @@ function getButtonStyles() {
       color: currentColor;
     }
 
+    /* Invert logo for dark mode */
+    @media (prefers-color-scheme: dark) {
+      .yak-widget-trigger:not(.yak-widget-light) .yak-widget-icon {
+        filter: invert(1);
+      }
+    }
+    .yak-widget-trigger.yak-widget-dark .yak-widget-icon {
+      filter: invert(1);
+    }
+    .yak-widget-trigger.yak-widget-light .yak-widget-icon {
+      filter: none;
+    }
+
     /* Spinner animation for loading state */
     .yak-widget-spinner {
       width: 20px;
@@ -206,25 +220,29 @@ function getButtonStyles() {
   `;
 }
 /**
- * Inline SVG for brain/circuit fallback icon
+ * Compute button CSS variables from custom button color props
  */
-function BrainCircuitIcon({ size = 20, className }) {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [_jsx("path", { d: "M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" }), _jsx("path", { d: "M9 13a4.5 4.5 0 0 0 3-4" }), _jsx("path", { d: "M6.003 5.125A3 3 0 0 0 6.401 6.5" }), _jsx("path", { d: "M3.477 10.896a4 4 0 0 1 .585-.396" }), _jsx("path", { d: "M6 18a4 4 0 0 1-1.967-.516" }), _jsx("path", { d: "M12 13h4" }), _jsx("path", { d: "M12 18h6a2 2 0 0 1 2 2v1" }), _jsx("path", { d: "M12 8h8" }), _jsx("path", { d: "M16 8V5a2 2 0 0 1 2-2" }), _jsx("circle", { cx: "16", cy: "13", r: ".5" }), _jsx("circle", { cx: "18", cy: "3", r: ".5" }), _jsx("circle", { cx: "20", cy: "21", r: ".5" }), _jsx("circle", { cx: "20", cy: "8", r: ".5" })] }));
+function buildButtonStyle(lightButton, darkButton) {
+    const style = {};
+    if (lightButton?.background)
+        style["--yak-btn-light-bg"] = lightButton.background;
+    if (lightButton?.color)
+        style["--yak-btn-light-color"] = lightButton.color;
+    if (lightButton?.border)
+        style["--yak-btn-light-border"] = lightButton.border;
+    if (darkButton?.background)
+        style["--yak-btn-dark-bg"] = darkButton.background;
+    if (darkButton?.color)
+        style["--yak-btn-dark-color"] = darkButton.color;
+    if (darkButton?.border)
+        style["--yak-btn-dark-border"] = darkButton.border;
+    return style;
 }
 /**
- * YakWidget renders a fixed-position launcher button.
- * The chat iframe is rendered by YakProvider - this is just the trigger button.
+ * Compute button class names from color mode and custom theme flags
  */
-export function YakWidget({ triggerLabel = "Ask with AI", position = "bottom-right", colorMode, lightButton, darkButton, } = {}) {
-    const { open, isOpen, isIframeReady } = useYak();
-    // Track if we're in a loading state (open but iframe not ready)
-    const isLoading = isOpen && !isIframeReady;
-    // Check if custom button theme is provided
-    const hasLightCustom = lightButton?.background || lightButton?.color || lightButton?.border;
-    const hasDarkCustom = darkButton?.background || darkButton?.color || darkButton?.border;
-    // Determine color mode class for the widget
+function buildButtonClasses(colorMode, hasLightCustom, hasDarkCustom) {
     const colorModeClass = colorMode === "light" ? "yak-widget-light" : colorMode === "dark" ? "yak-widget-dark" : "";
-    // Determine which custom class to apply based on color mode
     let customButtonClass = "";
     if (colorMode === "light" && hasLightCustom) {
         customButtonClass = "yak-widget-custom-light";
@@ -232,25 +250,20 @@ export function YakWidget({ triggerLabel = "Ask with AI", position = "bottom-rig
     else if (colorMode === "dark" && hasDarkCustom) {
         customButtonClass = "yak-widget-custom-dark";
     }
-    // Build inline style for button CSS variables
-    const buttonStyle = {};
-    if (lightButton?.background)
-        buttonStyle["--yak-btn-light-bg"] = lightButton.background;
-    if (lightButton?.color)
-        buttonStyle["--yak-btn-light-color"] = lightButton.color;
-    if (lightButton?.border)
-        buttonStyle["--yak-btn-light-border"] = lightButton.border;
-    if (darkButton?.background)
-        buttonStyle["--yak-btn-dark-bg"] = darkButton.background;
-    if (darkButton?.color)
-        buttonStyle["--yak-btn-dark-color"] = darkButton.color;
-    if (darkButton?.border)
-        buttonStyle["--yak-btn-dark-border"] = darkButton.border;
-    // Build button class names
-    const buttonClasses = [
-        "yak-widget-trigger",
-        colorModeClass,
-        customButtonClass,
-    ].filter(Boolean).join(" ");
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: getButtonStyles() }), _jsxs("button", { onClick: open, className: buttonClasses, style: Object.keys(buttonStyle).length > 0 ? buttonStyle : undefined, "data-position": position, "data-has-light-custom": hasLightCustom || undefined, "data-has-dark-custom": hasDarkCustom || undefined, "aria-label": isLoading ? "Loading chat" : "Open chat", disabled: isLoading, children: [_jsx("span", { className: "yak-widget-trigger-label", children: triggerLabel }), _jsx("div", { className: "yak-widget-icon-bg", children: isLoading ? (_jsx("div", { className: "yak-widget-spinner", "aria-hidden": "true" })) : (_jsx(BrainCircuitIcon, { size: 20, className: "yak-widget-icon" })) })] })] }));
+    return ["yak-widget-trigger", colorModeClass, customButtonClass].filter(Boolean).join(" ");
+}
+/**
+ * YakWidget renders a fixed-position launcher button.
+ * The chat iframe is rendered by YakProvider - this is just the trigger button.
+ */
+export function YakWidget({ triggerLabel = "Ask with AI", position = "bottom-right", colorMode, lightButton, darkButton, } = {}) {
+    const { open, isOpen, isIframeReady } = useYak();
+    const internal = useContext(YakContext);
+    const logoUrl = internal ? `${internal.getIframeOrigin()}/logo.svg` : "";
+    const isLoading = isOpen && !isIframeReady;
+    const hasLightCustom = lightButton?.background || lightButton?.color || lightButton?.border;
+    const hasDarkCustom = darkButton?.background || darkButton?.color || darkButton?.border;
+    const buttonStyle = buildButtonStyle(lightButton, darkButton);
+    const buttonClasses = buildButtonClasses(colorMode, hasLightCustom, hasDarkCustom);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: getButtonStyles() }), _jsxs("button", { type: "button", onClick: open, className: buttonClasses, style: Object.keys(buttonStyle).length > 0 ? buttonStyle : undefined, "data-position": position, "data-has-light-custom": hasLightCustom || undefined, "data-has-dark-custom": hasDarkCustom || undefined, "aria-label": isLoading ? "Loading chat" : "Open chat", disabled: isLoading, children: [_jsx("span", { className: "yak-widget-trigger-label", children: triggerLabel }), _jsx("div", { className: "yak-widget-icon-bg", children: isLoading ? (_jsx("div", { className: "yak-widget-spinner", "aria-hidden": "true" })) : (_jsx("img", { src: logoUrl, alt: "", width: 20, height: 20, className: "yak-widget-icon" })) })] })] }));
 }

package/dist/index.d.ts

@@ -4,5 +4,5 @@ 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, type RESTSchemaHandler, type GraphQLRequest, type RESTRequest, type ToolCallHandler, type ToolCallEvent, type SchemaSource, type GraphQLSchemaSource, type OpenAPISchemaSource, type Theme, type ThemeColors, type ButtonColors, type WidgetPosition, } from "@yak-io/javascript";
+export type { GraphQLSchemaHandler, RESTSchemaHandler, GraphQLRequest, RESTRequest, ToolCallHandler, ToolCallEvent, SchemaSource, GraphQLSchemaSource, OpenAPISchemaSource, Theme, ThemeColors, ButtonColors, WidgetPosition, } 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,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,KAAK,EACV,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,cAAc,GACpB,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,YAAY,EACV,oBAAoB,EACpB,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,eAAe,EACf,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,cAAc,GACf,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@yak-io/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React SDK for embedding yak chatbot",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Yak <support@yak.io>",
   "repository": {
     "type": "git",
-    "url": "https://github.com/9f-au/yak.git",
+    "url": "https://github.com/388-labs/yak.git",
     "directory": "packages/react"
   },
   "publishConfig": {
@@ -41,21 +41,29 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@yak-io/javascript": "0.4.0"
+    "@yak-io/javascript": "0.4.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^24.10.4",
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.0",
+    "jsdom": "^28.1.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "typescript": "^5.3.0",
     "@repo/typescript-config": "0.0.0"
   },
   "scripts": {
     "build": "tsc",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "test": "vitest run",
+    "lint": "biome lint ./src --fix",
+    "format": "biome format ./src --write"
   }
 }