@yak-io/react 0.1.0

package/LICENSE

@@ -0,0 +1,36 @@
+Yak Proprietary License
+
+Copyright (c) 2025 Yak. All rights reserved.
+
+This software and associated documentation files (the "Software") are the
+proprietary property of Yak and are protected by copyright law.
+
+GRANT OF LICENSE:
+Subject to the terms of this license and your valid subscription or agreement
+with Yak, you are granted a limited, non-exclusive, non-transferable license
+to use the Software solely for integrating the Yak chatbot widget into your
+applications as intended and documented.
+
+RESTRICTIONS:
+You may NOT:
+- Modify, adapt, alter, translate, or create derivative works of the Software
+- Reverse engineer, disassemble, decompile, or otherwise attempt to derive
+  the source code of the Software
+- Redistribute, sublicense, lease, rent, or lend the Software to third parties
+- Remove or alter any proprietary notices, labels, or marks on the Software
+- Use the Software for any purpose other than as expressly permitted herein
+
+NO WARRANTY:
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL YAK
+BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+TERMINATION:
+This license is effective until terminated. Your rights under this license
+will terminate automatically without notice if you fail to comply with any
+of its terms.
+
+For licensing inquiries, contact: support@yak.io

package/dist/YakProvider.d.ts

@@ -0,0 +1,112 @@
+import React from "react";
+import { type Theme, type ChatConfigProvider, type ToolCallHandler, type GraphQLSchemaHandler, type RESTSchemaHandler } from "@yak-io/javascript";
+/**
+ * Props for YakProvider
+ */
+export type YakProviderProps = {
+    /** App identifier in the yak SaaS */
+    appId: string;
+    /**
+     * Provider function for chat configuration (routes + tools).
+     * The consuming platform decides how to get the config (static, fetch, etc.)
+     * Called when the widget is opened.
+     *
+     * @example Static config
+     * ```tsx
+     * getConfig={() => ({
+     *   routes: { routes: [...], generated_at: "..." },
+     *   tools: { tools: [...], generated_at: "..." },
+     * })}
+     * ```
+     *
+     * @example Fetch from server
+     * ```tsx
+     * getConfig={async () => {
+     *   const res = await fetch("/api/yak/config");
+     *   return res.json();
+     * }}
+     * ```
+     */
+    getConfig?: ChatConfigProvider;
+    /**
+     * Handler for tool calls from the chat widget.
+     * The consuming platform decides how to execute (browser, server fetch, etc.)
+     *
+     * @example Browser-only execution
+     * ```tsx
+     * onToolCall={async (name, args) => {
+     *   if (name === "ui.scrollTo") {
+     *     document.getElementById((args as {id: string}).id)?.scrollIntoView();
+     *     return { success: true };
+     *   }
+     *   throw new Error(`Unknown tool: ${name}`);
+     * }}
+     * ```
+     *
+     * @example Server delegation
+     * ```tsx
+     * onToolCall={async (name, args) => {
+     *   const res = await fetch("/api/yak/tools", {
+     *     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;
+     * }}
+     * ```
+     */
+    onToolCall?: ToolCallHandler;
+    /**
+     * Handler for GraphQL schema tool calls.
+     * Called when the LLM generates a GraphQL operation based on provided schema context.
+     *
+     * @example
+     * ```tsx
+     * onGraphQLSchemaCall={async (schemaName, request) => {
+     *   const response = await fetch("/graphql", {
+     *     method: "POST",
+     *     headers: { "Content-Type": "application/json" },
+     *     body: JSON.stringify(request),
+     *   });
+     *   return response.json();
+     * }}
+     * ```
+     */
+    onGraphQLSchemaCall?: GraphQLSchemaHandler;
+    /**
+     * Handler for REST/OpenAPI schema tool calls.
+     * Called when the LLM generates a REST request based on provided OpenAPI schema context.
+     *
+     * @example
+     * ```tsx
+     * onRESTSchemaCall={async (schemaName, request) => {
+     *   const url = new URL(request.path, "https://api.example.com");
+     *   if (request.query) {
+     *     Object.entries(request.query).forEach(([k, v]) => url.searchParams.set(k, v));
+     *   }
+     *   const response = await fetch(url, {
+     *     method: request.method,
+     *     headers: request.body ? { "Content-Type": "application/json" } : undefined,
+     *     body: request.body ? JSON.stringify(request.body) : undefined,
+     *   });
+     *   return response.json();
+     * }}
+     * ```
+     */
+    onRESTSchemaCall?: RESTSchemaHandler;
+    /** Optional theme configuration */
+    theme?: Theme;
+    /** Optional redirect handler (defaults to window.location.assign) */
+    onRedirect?: (path: string) => void;
+    /** Disable the restart session button in the header */
+    disableRestartButton?: boolean;
+    /** Children components */
+    children: React.ReactNode;
+};
+/**
+ * YakProvider sets up the context and message handling for the yak widget.
+ */
+export declare function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, children, }: YakProviderProps): React.JSX.Element;
+//# sourceMappingURL=YakProvider.d.ts.map

package/dist/YakProvider.d.ts.map

@@ -0,0 +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,EACpB,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAG5B;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B;;;;;;;;;;;;;;;OAeG;IACH,mBAAmB,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;;;;;;;;;;;;;;;;;;OAmBG;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;AAEF;;GAEG;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,CAgMtC"}

package/dist/YakProvider.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { YakContext } from "./context.js";
+import { YakClient, } from "@yak-io/javascript";
+import { logger } from "./internal/logger.js";
+/**
+ * YakProvider sets up the context and message handling for the yak widget.
+ */
+export function YakProvider({ appId, getConfig, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, children, }) {
+    const [iframeWindow, setIframeWindow] = useState(null);
+    const [chatConfig, setChatConfig] = useState(null);
+    const [isWidgetOpen, setIsWidgetOpen] = useState(false);
+    const [pendingPrompt, setPendingPrompt] = useState(null);
+    const [isIframeReady, setIsIframeReady] = useState(false);
+    // Initialize YakClient
+    const clientRef = useRef(null);
+    if (!clientRef.current) {
+        clientRef.current = new YakClient({
+            appId,
+            onToolCall,
+            onGraphQLSchemaCall,
+            onRESTSchemaCall,
+            theme,
+            onRedirect,
+            options: { disableRestartButton },
+            onClose: () => setIsWidgetOpen(false),
+            onReady: () => setIsIframeReady(true),
+        });
+    }
+    const client = clientRef.current;
+    // Get the iframe origin from the client (computed based on environment)
+    const iframeOrigin = client.getIframeOrigin();
+    // Update client config when props change
+    useEffect(() => {
+        client.updateConfig({
+            appId,
+            onToolCall,
+            onGraphQLSchemaCall,
+            onRESTSchemaCall,
+            theme,
+            onRedirect,
+            options: { disableRestartButton },
+            chatConfig: chatConfig ?? undefined,
+        });
+    }, [appId, onToolCall, onGraphQLSchemaCall, onRESTSchemaCall, theme, onRedirect, disableRestartButton, chatConfig, client]);
+    // Update client iframe window
+    useEffect(() => {
+        client.setIframeWindow(iframeWindow);
+    }, [iframeWindow, client]);
+    // Update client widget open state
+    useEffect(() => {
+        client.setWidgetOpen(isWidgetOpen);
+    }, [isWidgetOpen, client]);
+    // Mount/Unmount client listeners
+    useEffect(() => {
+        client.mount();
+        return () => client.unmount();
+    }, [client]);
+    // Get chat config when widget is opened
+    useEffect(() => {
+        if (typeof window === "undefined" || !isWidgetOpen || !getConfig)
+            return;
+        logger.debug("Getting chat config");
+        let cancelled = false;
+        (async () => {
+            try {
+                const config = await getConfig();
+                if (!cancelled) {
+                    logger.debug(`Chat config loaded with ${config.tools?.tools.length ?? 0} tools and ${config.routes?.routes.length ?? 0} routes`);
+                    setChatConfig(config);
+                }
+            }
+            catch (err) {
+                logger.warn("Error getting chat config:", err);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [getConfig, isWidgetOpen]);
+    const resolvedRedirect = useMemo(() => {
+        if (onRedirect)
+            return onRedirect;
+        if (typeof window === "undefined")
+            return undefined;
+        return (path) => {
+            window.location.assign(path);
+        };
+    }, [onRedirect]);
+    const config = useMemo(() => ({
+        appId,
+        theme,
+        chatConfig,
+        onRedirect: resolvedRedirect,
+    }), [appId, theme, chatConfig, resolvedRedirect]);
+    // Methods to get URLs from the client
+    const getIframeOrigin = useCallback(() => client.getIframeOrigin(), [client]);
+    const getEmbedUrl = useCallback(() => client.getEmbedUrl(), [client]);
+    const registerIframeWindow = useCallback((win) => {
+        logger.debug("Iframe window registered");
+        setIframeWindow(win);
+    }, []);
+    const unregisterIframeWindow = useCallback(() => {
+        logger.debug("Iframe window unregistered");
+        setIframeWindow(null);
+    }, []);
+    const sendMessage = useCallback((message) => {
+        iframeWindow?.postMessage(message, iframeOrigin);
+    }, [iframeWindow, iframeOrigin]);
+    const open = useCallback(() => {
+        setIsWidgetOpen(true);
+    }, []);
+    const close = useCallback(() => {
+        setIsWidgetOpen(false);
+    }, []);
+    const openWithPrompt = useCallback((prompt) => {
+        logger.debug("Opening widget with prompt:", prompt);
+        setPendingPrompt(prompt);
+        setIsWidgetOpen(true);
+    }, []);
+    // Effect to send pending prompt when iframe becomes ready
+    useEffect(() => {
+        if (isIframeReady && pendingPrompt && iframeWindow) {
+            logger.debug("Sending pending prompt to iframe:", pendingPrompt);
+            const promptMessage = {
+                type: "yak:prompt",
+                payload: { prompt: pendingPrompt },
+            };
+            iframeWindow.postMessage(promptMessage, iframeOrigin);
+            setPendingPrompt(null);
+        }
+    }, [isIframeReady, pendingPrompt, iframeWindow, iframeOrigin]);
+    // Effect to send focus message when widget is opened
+    useEffect(() => {
+        if (isWidgetOpen && iframeWindow && isIframeReady) {
+            logger.debug("Sending focus request to iframe");
+            const focusMessage = {
+                type: "yak:focus",
+            };
+            iframeWindow.postMessage(focusMessage, iframeOrigin);
+        }
+    }, [isWidgetOpen, iframeWindow, isIframeReady, iframeOrigin]);
+    const contextValue = useMemo(() => ({
+        config,
+        getIframeOrigin,
+        getEmbedUrl,
+        registerIframeWindow,
+        unregisterIframeWindow,
+        sendMessage,
+        isOpen: isWidgetOpen,
+        isIframeReady,
+        open,
+        close,
+        openWithPrompt,
+        setIsIframeReady,
+    }), [
+        config,
+        getIframeOrigin,
+        getEmbedUrl,
+        registerIframeWindow,
+        unregisterIframeWindow,
+        sendMessage,
+        isWidgetOpen,
+        isIframeReady,
+        open,
+        close,
+        openWithPrompt,
+    ]);
+    return _jsx(YakContext.Provider, { value: contextValue, children: children });
+}

package/dist/YakWidget.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+/**
+ * Props for YakWidget
+ */
+export type YakWidgetProps = {
+    /** Optional CSS class name for the iframe */
+    iframeClassName?: string;
+    /** Text to display next to the logo */
+    triggerLabel?: string;
+};
+/**
+ * YakWidget renders a fixed-position launcher button and iframe panel.
+ * The iframe loads immediately and shows its own skeleton while waiting for config.
+ */
+export declare function YakWidget({ iframeClassName, triggerLabel, }?: YakWidgetProps): React.JSX.Element;
+//# sourceMappingURL=YakWidget.d.ts.map

package/dist/YakWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YakWidget.d.ts","sourceRoot":"","sources":["../src/YakWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAqU3D;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,eAAe,EACf,YAA4B,GAC7B,GAAE,cAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwJzC"}

package/dist/YakWidget.js

@@ -0,0 +1,385 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import { useYak } from "./context.js";
+/**
+ * All widget styles consolidated in one place
+ */
+function getWidgetStyles() {
+    return `
+    /* ===========================================
+       YAK WIDGET STYLES
+       =========================================== */
+
+    /* Trigger Button Base */
+    .yak-widget-trigger {
+      position: fixed;
+      z-index: 9997;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      border: none;
+      border-radius: 30px;
+      padding: 0 5px 0 20px;
+      height: 45px;
+      min-width: 45px;
+      width: auto;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+      overflow: hidden;
+      background-color: #000;
+      color: #fff;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    /* Trigger position variants */
+    .yak-widget-trigger[data-position="left"] {
+      bottom: 28px;
+      left: 28px;
+      flex-direction: row-reverse;
+    }
+    .yak-widget-trigger[data-position="right"] {
+      bottom: 28px;
+      right: 28px;
+      flex-direction: row;
+    }
+
+    .yak-widget-trigger-label {
+      font-size: 14px;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
+    .yak-widget-icon-bg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .yak-widget-icon {
+      width: 20px;
+      height: 20px;
+      color: currentColor;
+    }
+
+    /* Spinner animation for loading state */
+    .yak-widget-spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: yak-widget-spin 0.8s linear infinite;
+    }
+
+    @keyframes yak-widget-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    /* Loading/disabled state for trigger button */
+    .yak-widget-trigger:disabled {
+      cursor: wait;
+      opacity: 0.8;
+    }
+
+    /* Custom button styles for forced light mode */
+    .yak-widget-trigger.yak-widget-custom-light {
+      background-color: var(--yak-btn-light-bg, #fff);
+      color: var(--yak-btn-light-color, #000);
+      border: 1px solid var(--yak-btn-light-border, transparent);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    /* Custom button styles for forced dark mode */
+    .yak-widget-trigger.yak-widget-custom-dark {
+      background-color: var(--yak-btn-dark-bg, #000);
+      color: var(--yak-btn-dark-color, #fff);
+      border: 1px solid var(--yak-btn-dark-border, transparent);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    /* System mode with custom light colors */
+    @media (prefers-color-scheme: light) {
+      .yak-widget-trigger[data-has-light-custom]:not(.yak-widget-dark) {
+        background-color: var(--yak-btn-light-bg, #fff);
+        color: var(--yak-btn-light-color, #000);
+        border: 1px solid var(--yak-btn-light-border, transparent);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    /* System mode with custom dark colors */
+    @media (prefers-color-scheme: dark) {
+      .yak-widget-trigger[data-has-dark-custom]:not(.yak-widget-light) {
+        background-color: var(--yak-btn-dark-bg, #000);
+        color: var(--yak-btn-dark-color, #fff);
+        border: 1px solid var(--yak-btn-dark-border, transparent);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+    }
+
+    /* Light mode via system preference (default styling without custom) */
+    @media (prefers-color-scheme: light) {
+      .yak-widget-trigger:not(.yak-widget-dark):not([data-has-light-custom]) {
+        background-color: #fff;
+        color: #000;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e5e5e5;
+      }
+      .yak-widget-trigger:not(.yak-widget-dark):not([data-has-light-custom]) .yak-widget-icon-bg {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+    }
+
+    /* Dark mode via system preference (default styling without custom) */
+    @media (prefers-color-scheme: dark) {
+      .yak-widget-trigger:not(.yak-widget-light):not([data-has-dark-custom]) {
+        background-color: #000;
+        color: #fff;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        border: none;
+      }
+      .yak-widget-trigger:not(.yak-widget-light):not([data-has-dark-custom]) .yak-widget-icon-bg {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    /* Forced light mode (default styling) */
+    .yak-widget-trigger.yak-widget-light:not(.yak-widget-custom-light) {
+      background-color: #fff;
+      color: #000;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      border: 1px solid #e5e5e5;
+    }
+    .yak-widget-trigger.yak-widget-light:not(.yak-widget-custom-light) .yak-widget-icon-bg {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    /* Forced dark mode (default styling) */
+    .yak-widget-trigger.yak-widget-dark:not(.yak-widget-custom-dark) {
+      background-color: #000;
+      color: #fff;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      border: none;
+    }
+    .yak-widget-trigger.yak-widget-dark:not(.yak-widget-custom-dark) .yak-widget-icon-bg {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    /* ===========================================
+       BACKDROP
+       =========================================== */
+    .yak-widget-backdrop {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      z-index: 9997;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+    }
+    .yak-widget-backdrop[data-open="true"] {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    /* ===========================================
+       CONTAINER
+       =========================================== */
+    .yak-widget-container {
+      position: fixed;
+      width: 500px;
+      height: 600px;
+      max-width: calc(100vw - 40px);
+      max-height: calc(100vh - 120px);
+      border-radius: 15px;
+      overflow: hidden;
+      z-index: 9998;
+      background-color: transparent;
+    }
+
+    /* Container position variants (chatbox mode) */
+    .yak-widget-container[data-position="left"]:not(.yak-widget-drawer) {
+      bottom: 16px;
+      left: 16px;
+    }
+    .yak-widget-container[data-position="right"]:not(.yak-widget-drawer) {
+      bottom: 16px;
+      right: 16px;
+    }
+
+    /* Container visibility (chatbox mode) */
+    .yak-widget-container:not(.yak-widget-drawer) {
+      display: none;
+    }
+    .yak-widget-container:not(.yak-widget-drawer)[data-open="true"] {
+      display: block;
+    }
+
+    /* ===========================================
+       DRAWER MODE
+       =========================================== */
+    .yak-widget-container.yak-widget-drawer {
+      height: calc(100% - 32px);
+      max-width: 100vw;
+      max-height: none;
+      border-radius: 15px;
+      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    /* Drawer position */
+    .yak-widget-container.yak-widget-drawer[data-position="left"] {
+      top: 16px;
+      left: 16px;
+      bottom: 16px;
+      transform: translateX(calc(-100% - 16px));
+    }
+    .yak-widget-container.yak-widget-drawer[data-position="right"] {
+      top: 16px;
+      right: 16px;
+      bottom: 16px;
+      transform: translateX(calc(100% + 16px));
+    }
+
+    /* Drawer open state */
+    .yak-widget-container.yak-widget-drawer[data-open="true"] {
+      transform: translateX(0);
+    }
+
+    /* ===========================================
+       IFRAME
+       =========================================== */
+    .yak-widget-iframe {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    /* ===========================================
+       MOBILE RESPONSIVE
+       =========================================== */
+    @media (max-width: 640px) {
+      .yak-widget-container:not(.yak-widget-drawer) {
+        width: 100% !important;
+        height: 100% !important;
+        height: 100dvh !important;
+        max-width: none !important;
+        max-height: none !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        border-radius: 0 !important;
+      }
+      .yak-widget-container.yak-widget-drawer {
+        width: 100% !important;
+        max-width: none !important;
+      }
+    }
+  `;
+}
+/**
+ * Inline SVG for brain/circuit fallback icon
+ */
+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" })] }));
+}
+/**
+ * YakWidget renders a fixed-position launcher button and iframe panel.
+ * The iframe loads immediately and shows its own skeleton while waiting for config.
+ */
+export function YakWidget({ iframeClassName, triggerLabel = "Ask with AI", } = {}) {
+    const { config, getEmbedUrl, registerIframeWindow, unregisterIframeWindow, isOpen, isIframeReady, open, close, } = useYak();
+    const iframeRef = useRef(null);
+    const [hasBeenOpened, setHasBeenOpened] = useState(false);
+    // Track if we're in a loading state (open but iframe not ready)
+    const isLoading = isOpen && hasBeenOpened && !isIframeReady;
+    // Get URLs from the client (computed based on environment)
+    const iframeSrc = getEmbedUrl();
+    // Track when widget is first opened
+    useEffect(() => {
+        if (isOpen && !hasBeenOpened) {
+            setHasBeenOpened(true);
+        }
+    }, [isOpen, hasBeenOpened]);
+    // Register iframe window when loaded
+    useEffect(() => {
+        if (!hasBeenOpened)
+            return;
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        const handleLoad = () => {
+            if (iframe.contentWindow) {
+                registerIframeWindow(iframe.contentWindow);
+            }
+        };
+        iframe.addEventListener("load", handleLoad);
+        return () => {
+            iframe.removeEventListener("load", handleLoad);
+            unregisterIframeWindow();
+        };
+    }, [registerIframeWindow, unregisterIframeWindow, hasBeenOpened]);
+    // Determine position styles based on theme
+    const position = config.theme?.position ?? "right";
+    const colorMode = config.theme?.colorMode;
+    const displayMode = config.theme?.displayMode ?? "chatbox";
+    const isDrawer = displayMode === "drawer";
+    // Determine color mode class for the widget
+    const colorModeClass = colorMode === "light" ? "yak-widget-light" : colorMode === "dark" ? "yak-widget-dark" : "";
+    // Check if custom button theme is provided (now nested in light/dark)
+    const lightButton = config.theme?.light?.button;
+    const darkButton = config.theme?.dark?.button;
+    const hasLightCustom = lightButton?.background || lightButton?.color || lightButton?.border;
+    const hasDarkCustom = darkButton?.background || darkButton?.color || darkButton?.border;
+    // Determine which custom class to apply based on color mode
+    let customButtonClass = "";
+    if (colorMode === "light" && hasLightCustom) {
+        customButtonClass = "yak-widget-custom-light";
+    }
+    else if (colorMode === "dark" && hasDarkCustom) {
+        customButtonClass = "yak-widget-custom-dark";
+    }
+    else if (colorMode === "system" || colorMode === undefined) {
+        // For system mode, we need to handle both via media queries
+        // We'll use a data attribute approach instead
+    }
+    // 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 container class names
+    const containerClasses = [
+        "yak-widget-container",
+        isDrawer && "yak-widget-drawer",
+        colorModeClass,
+    ].filter(Boolean).join(" ");
+    // Build button class names
+    const buttonClasses = [
+        "yak-widget-trigger",
+        colorModeClass,
+        customButtonClass,
+    ].filter(Boolean).join(" ");
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: getWidgetStyles() }), _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" })) })] }), isDrawer && hasBeenOpened && (_jsx("div", { className: "yak-widget-backdrop", "data-open": isOpen && isIframeReady, onClick: close, "aria-hidden": "true" })), hasBeenOpened && (_jsx("div", { className: containerClasses, "data-position": position, "data-open": isOpen && isIframeReady, children: _jsx("iframe", { ref: iframeRef, src: iframeSrc, className: `yak-widget-iframe ${iframeClassName ?? ""}`.trim(), title: "yak-chat-host" }) }))] }));
+}

package/dist/context.d.ts

@@ -0,0 +1,57 @@
+import type { Theme, IframeMessageFromHost, ChatConfig } from "@yak-io/javascript";
+/**
+ * Configuration for the yak provider
+ */
+export type YakConfig = {
+    appId: string;
+    theme?: Theme;
+    chatConfig?: ChatConfig | null;
+    onRedirect?: (path: string) => void;
+};
+/**
+ * Context value with config and iframe management
+ */
+export type YakContextValue = {
+    config: YakConfig;
+    /** Get the iframe origin URL (determined by environment) */
+    getIframeOrigin: () => string;
+    /** Get the full iframe embed URL */
+    getEmbedUrl: () => string;
+    registerIframeWindow: (win: Window) => void;
+    unregisterIframeWindow: () => void;
+    sendMessage: (message: IframeMessageFromHost) => void;
+    /** Whether the chat widget is currently open */
+    isOpen: boolean;
+    /** Whether the iframe is ready to receive messages */
+    isIframeReady: boolean;
+    /** Open the chat widget */
+    open: () => void;
+    /** Close the chat widget */
+    close: () => void;
+    /** Open the chat widget and trigger a specific prompt */
+    openWithPrompt: (prompt: string) => void;
+    setIsIframeReady: (ready: boolean) => void;
+};
+export declare const YakContext: import("react").Context<YakContextValue | null>;
+/**
+ * Hook to access the Yak chat widget API.
+ * Provides methods for opening, closing, and triggering prompts.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { open, close, openWithPrompt, isOpen } = useYak();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => open()}>Open Chat</button>
+ *       <button onClick={() => openWithPrompt("Help me!")}>Get Help</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @throws {Error} if used outside YakProvider
+ */
+export declare function useYak(): YakContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEnF;;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,eAAe,GAAG;IAC5B,MAAM,EAAE,SAAS,CAAC;IAClB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,oCAAoC;IACpC,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,sBAAsB,EAAE,MAAM,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,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,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,UAAU,iDAA8C,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,MAAM,IAAI,eAAe,CAMxC"}

package/dist/context.js

@@ -0,0 +1,30 @@
+"use client";
+import { createContext, useContext } from "react";
+export const YakContext = createContext(null);
+/**
+ * Hook to access the Yak chat widget API.
+ * Provides methods for opening, closing, and triggering prompts.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { open, close, openWithPrompt, isOpen } = useYak();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => open()}>Open Chat</button>
+ *       <button onClick={() => openWithPrompt("Help me!")}>Get Help</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @throws {Error} if used outside YakProvider
+ */
+export function useYak() {
+    const context = useContext(YakContext);
+    if (!context) {
+        throw new Error("useYak must be used within YakProvider");
+    }
+    return context;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { useYak } from "./context.js";
+export type { YakConfig, YakContextValue } from "./context.js";
+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 SchemaSource, type GraphQLSchemaSource, type OpenAPISchemaSource, type Theme, type ThemeColors, type ButtonColors, } from "@yak-io/javascript";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/D,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,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,KAAK,EACV,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+"use client";
+// Public API - only export what consumers need
+export { useYak } from "./context.js";
+export { YakProvider } from "./YakProvider.js";
+export { YakWidget } from "./YakWidget.js";

package/dist/internal/logger.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Simple logger utility for the yak React SDK.
+ * Debug/info logs are only emitted in development mode.
+ * Warnings and errors are always logged.
+ */
+export declare const logger: {
+    debug: (message: string, data?: unknown) => void;
+    info: (message: string, data?: unknown) => void;
+    warn: (message: string, data?: unknown) => void;
+    error: (message: string, data?: unknown) => void;
+};
+//# sourceMappingURL=logger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/internal/logger.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,eAAO,MAAM,MAAM;qBACA,MAAM,SAAS,OAAO,KAAG,IAAI;oBAU9B,MAAM,SAAS,OAAO,KAAG,IAAI;oBAU7B,MAAM,SAAS,OAAO,KAAG,IAAI;qBAQ5B,MAAM,SAAS,OAAO,KAAG,IAAI;CAO/C,CAAC"}

package/dist/internal/logger.js

@@ -0,0 +1,44 @@
+/**
+ * Simple logger utility for the yak React SDK.
+ * Debug/info logs are only emitted in development mode.
+ * Warnings and errors are always logged.
+ */
+const isDev = typeof process !== "undefined" && process.env?.NODE_ENV === "development";
+export const logger = {
+    debug: (message, data) => {
+        if (isDev) {
+            if (data !== undefined) {
+                console.log(`[yak-chat-host] ${message}`, data);
+            }
+            else {
+                console.log(`[yak-chat-host] ${message}`);
+            }
+        }
+    },
+    info: (message, data) => {
+        if (isDev) {
+            if (data !== undefined) {
+                console.info(`[yak-chat-host] ${message}`, data);
+            }
+            else {
+                console.info(`[yak-chat-host] ${message}`);
+            }
+        }
+    },
+    warn: (message, data) => {
+        if (data !== undefined) {
+            console.warn(`[yak-chat-host] ${message}`, data);
+        }
+        else {
+            console.warn(`[yak-chat-host] ${message}`);
+        }
+    },
+    error: (message, data) => {
+        if (data !== undefined) {
+            console.error(`[yak-chat-host] ${message}`, data);
+        }
+        else {
+            console.error(`[yak-chat-host] ${message}`);
+        }
+    },
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@yak-io/react",
+  "version": "0.1.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",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "keywords": [
+    "yak",
+    "chatbot",
+    "ai",
+    "widget",
+    "chat",
+    "react"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@yak-io/javascript": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.0",
+    "typescript": "^5.3.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "check-types": "tsc --noEmit"
+  }
+}