@yak-io/react 0.11.0 → 0.12.0

package/dist/YakProvider.js

@@ -1,195 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { INITIAL_VOICE_MACHINE, logger, YakEmbed, } from "@yak-io/javascript";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { YakContext } from "./context.js";
-/**
- * YakProvider sets up the unified chat + voice runtime. All DOM rendering
- * (panel, iframe, optional trigger) is delegated to YakEmbed. Consumers
- * access both surfaces via `useYak()`.
- */
-export function YakProvider({ appId, origin, mode = "chat", getConfig, onToolCall, theme, onRedirect, disableRestartButton, trigger = false, user, children, }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [isReady, setIsReady] = useState(false);
-    const [voiceMachine, setVoiceMachine] = useState(INITIAL_VOICE_MACHINE);
-    // Store event subscribers for tool call events
-    const toolEventSubscribersRef = useRef(new Set());
-    // Handler that notifies all subscribers when a tool call completes
-    const handleToolCallComplete = useCallback((event) => {
-        logger.debug("Tool call completed, notifying subscribers:", {
-            name: event.name,
-            ok: event.ok,
-            subscriberCount: toolEventSubscribersRef.current.size,
-        });
-        for (const handler of toolEventSubscribersRef.current) {
-            try {
-                handler(event);
-            }
-            catch (err) {
-                logger.warn("Error in tool event subscriber:", err);
-            }
-        }
-    }, []);
-    // Resolve redirect handler
-    const resolvedRedirect = useMemo(() => {
-        if (onRedirect)
-            return onRedirect;
-        if (typeof window === "undefined")
-            return undefined;
-        return (path) => {
-            window.location.assign(path);
-        };
-    }, [onRedirect]);
-    // Initialize YakEmbed — created once, never recreated
-    const embedRef = useRef(null);
-    if (!embedRef.current) {
-        embedRef.current = new YakEmbed({
-            appId,
-            origin,
-            mode,
-            theme,
-            trigger,
-            getConfig,
-            onToolCall,
-            onRedirect: resolvedRedirect,
-            options: { disableRestartButton },
-            onToolCallComplete: handleToolCallComplete,
-            user,
-        });
-    }
-    const embed = embedRef.current;
-    // Mount/unmount embed and subscribe to chat + voice state changes
-    useEffect(() => {
-        embed.mount();
-        const unsubscribeChat = embed.onStateChange((state) => {
-            setIsOpen(state.isOpen);
-            setIsReady(state.isReady);
-        });
-        const unsubscribeVoice = embed.onVoiceStateChange((m) => setVoiceMachine(m));
-        return () => {
-            unsubscribeChat();
-            unsubscribeVoice();
-            embed.destroy();
-        };
-    }, [embed]);
-    // Update embed config when props change. Chat config goes via the client;
-    // voice config goes via the voice session.
-    useEffect(() => {
-        embed.getClient().updateConfig({
-            appId,
-            onToolCall,
-            theme,
-            onRedirect: resolvedRedirect,
-            options: { disableRestartButton },
-            onToolCallComplete: handleToolCallComplete,
-            user,
-        });
-        embed.getVoiceSession()?.updateConfig({
-            appId,
-            getConfig,
-            onToolCall,
-            onRedirect: resolvedRedirect,
-        });
-    }, [
-        appId,
-        getConfig,
-        onToolCall,
-        theme,
-        resolvedRedirect,
-        disableRestartButton,
-        embed,
-        handleToolCallComplete,
-        user,
-    ]);
-    // Fetch chat config when the chat is opened
-    useEffect(() => {
-        if (typeof window === "undefined" || !isOpen || !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`);
-                    embed.getClient().updateConfig({ chatConfig: config });
-                }
-            }
-            catch (err) {
-                logger.warn("Error getting chat config:", err);
-            }
-        })();
-        return () => {
-            cancelled = true;
-        };
-    }, [getConfig, isOpen, embed]);
-    // Chat methods
-    const open = useCallback(() => embed.open(), [embed]);
-    const close = useCallback(() => embed.close(), [embed]);
-    const openWithPrompt = useCallback((prompt) => embed.openWithPrompt(prompt), [embed]);
-    // Voice methods
-    const voiceStart = useCallback(async () => {
-        try {
-            await embed.voiceStart();
-        }
-        catch (err) {
-            logger.warn("Voice start failed", err);
-        }
-    }, [embed]);
-    const voiceStop = useCallback(() => embed.voiceStop(), [embed]);
-    const voiceToggle = useCallback(() => embed.voiceToggle(), [embed]);
-    // Subscribe to tool call completion events
-    const subscribeToToolEvents = useCallback((handler) => {
-        toolEventSubscribersRef.current.add(handler);
-        logger.debug("Tool event subscriber added, total:", toolEventSubscribersRef.current.size);
-        return () => {
-            toolEventSubscribersRef.current.delete(handler);
-            logger.debug("Tool event subscriber removed, total:", toolEventSubscribersRef.current.size);
-        };
-    }, []);
-    // Expose iframe origin for YakWidget
-    const getIframeOrigin = useCallback(() => embed.getClient().getIframeOrigin(), [embed]);
-    const voiceState = voiceMachine.state;
-    const voiceIsActive = voiceState !== "idle" && voiceState !== "error";
-    const chatLoading = isOpen && !isReady;
-    const voiceLoading = voiceState === "connecting";
-    const contextValue = useMemo(() => ({
-        mode,
-        isOpen,
-        isReady,
-        chatLoading,
-        open,
-        close,
-        openWithPrompt,
-        subscribeToToolEvents,
-        voiceMachine,
-        voiceState,
-        voiceErrorMessage: voiceMachine.errorMessage,
-        voiceIsActive,
-        voiceLoading,
-        voiceStart,
-        voiceStop,
-        voiceToggle,
-        getIframeOrigin,
-        theme,
-    }), [
-        mode,
-        isOpen,
-        isReady,
-        chatLoading,
-        open,
-        close,
-        openWithPrompt,
-        subscribeToToolEvents,
-        voiceMachine,
-        voiceState,
-        voiceIsActive,
-        voiceLoading,
-        voiceStart,
-        voiceStop,
-        voiceToggle,
-        getIframeOrigin,
-        theme,
-    ]);
-    return _jsx(YakContext.Provider, { value: contextValue, children: children });
-}

package/dist/YakWidget.js

@@ -1,81 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useYakInternal } from "./context.js";
-const VOICE_ARIA = {
-    idle: "Start voice mode",
-    connecting: "Connecting voice session",
-    listening: "Voice listening — tap to stop",
-    thinking: "Voice thinking — tap to stop",
-    speaking: "Voice speaking — tap to stop",
-    error: "Voice error — tap to retry",
-};
-function MessageCircleIcon() {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: 20, height: 20, "aria-hidden": "true", children: _jsx("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }));
-}
-function AudioLinesIcon() {
-    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", width: 20, height: 20, "aria-hidden": "true", children: [_jsx("path", { d: "M2 10v3" }), _jsx("path", { d: "M6 6v11" }), _jsx("path", { d: "M10 3v18" }), _jsx("path", { d: "M14 8v7" }), _jsx("path", { d: "M18 5v13" }), _jsx("path", { d: "M22 10v3" })] }));
-}
-function StopIcon() {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: 20, height: 20, "aria-hidden": "true", children: _jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }));
-}
-function VoiceIcon({ state }) {
-    if (state === "connecting") {
-        return _jsx("span", { className: "yak-widget-spinner", "aria-hidden": "true" });
-    }
-    if (state === "listening" || state === "speaking" || state === "thinking") {
-        return _jsx(StopIcon, {});
-    }
-    return _jsx(AudioLinesIcon, {});
-}
-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;
-}
-function buildButtonClasses(colorMode, hasLightCustom, hasDarkCustom) {
-    const colorModeClass = colorMode === "light" ? "yak-widget-light" : colorMode === "dark" ? "yak-widget-dark" : "";
-    let customButtonClass = "";
-    if (colorMode === "light" && hasLightCustom) {
-        customButtonClass = "yak-widget-custom-light";
-    }
-    else if (colorMode === "dark" && hasDarkCustom) {
-        customButtonClass = "yak-widget-custom-dark";
-    }
-    return ["yak-widget-trigger", colorModeClass, customButtonClass].filter(Boolean).join(" ");
-}
-/**
- * YakWidget renders a fixed-position launcher pill. The logo sits on the
- * left; one or two icon buttons sit on the right based on `mode`. Trigger
- * CSS is injected by YakEmbed (via YakProvider) — this component only
- * provides the React markup using those shared class names.
- */
-export function YakWidget({ mode, lightButton, darkButton, } = {}) {
-    const ctx = useYakInternal();
-    const resolvedMode = mode ?? ctx.mode;
-    const position = ctx.theme?.position ?? "bottom-left";
-    const colorMode = ctx.theme?.colorMode;
-    const logoUrl = `${ctx.getIframeOrigin()}/logo.svg`;
-    const showChat = resolvedMode === "chat" || resolvedMode === "both";
-    const showVoice = resolvedMode === "voice" || resolvedMode === "both";
-    // Consume the shipped loading flags rather than re-deriving them here.
-    const chatLoading = ctx.chatLoading;
-    const voiceConnecting = ctx.voiceLoading;
-    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("div", { className: buttonClasses, style: Object.keys(buttonStyle).length > 0 ? buttonStyle : undefined, "data-position": position, "data-mode": resolvedMode, "data-has-light-custom": hasLightCustom || undefined, "data-has-dark-custom": hasDarkCustom || undefined, children: [_jsx("div", { className: "yak-widget-icon-bg", children: _jsx("img", { src: logoUrl, alt: "", width: 20, height: 20, className: "yak-widget-icon" }) }), showChat && (_jsx("button", { type: "button", className: "yak-widget-trigger-icon-btn", "data-action": "chat", "aria-label": chatLoading ? "Loading chat" : "Open chat", disabled: chatLoading, onClick: ctx.open, children: chatLoading ? (_jsx("span", { className: "yak-widget-spinner", "aria-hidden": "true" })) : (_jsx(MessageCircleIcon, {})) })), showVoice && (_jsx("button", { type: "button", className: "yak-widget-trigger-icon-btn", "data-action": "voice", "data-state": ctx.voiceState, "aria-label": VOICE_ARIA[ctx.voiceState], disabled: voiceConnecting, onClick: () => {
-                    void ctx.voiceToggle();
-                }, children: _jsx(VoiceIcon, { state: ctx.voiceState }) }))] }));
-}

package/dist/context.js

@@ -1,103 +0,0 @@
-"use client";
-import { createContext, useContext, useEffect, useRef } from "react";
-export const YakContext = createContext(null);
-/**
- * Hook to access the Yak widget API — chat and voice.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { open, voiceToggle, voiceState } = useYak();
- *   return (
- *     <div>
- *       <button onClick={open}>Open chat</button>
- *       <button onClick={voiceToggle}>{voiceState === "idle" ? "Start voice" : "Stop voice"}</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 {
-        mode: context.mode,
-        isOpen: context.isOpen,
-        isReady: context.isReady,
-        chatLoading: context.chatLoading,
-        open: context.open,
-        close: context.close,
-        openWithPrompt: context.openWithPrompt,
-        subscribeToToolEvents: context.subscribeToToolEvents,
-        voiceMachine: context.voiceMachine,
-        voiceState: context.voiceState,
-        voiceErrorMessage: context.voiceErrorMessage,
-        voiceIsActive: context.voiceIsActive,
-        voiceLoading: context.voiceLoading,
-        voiceStart: context.voiceStart,
-        voiceStop: context.voiceStop,
-        voiceToggle: context.voiceToggle,
-    };
-}
-/**
- * Internal hook for components that need full context access.
- * Not exported publicly.
- */
-export function useYakInternal() {
-    const context = useContext(YakContext);
-    if (!context) {
-        throw new Error("useYakInternal must be used within YakProvider");
-    }
-    return context;
-}
-/**
- * Hook to subscribe to tool call completion events.
- * Useful for page-level cache invalidation when chatbot tools modify data.
- *
- * The handler receives an event with:
- * - `name`: The tool name that was called (e.g., "order.cancel")
- * - `args`: The arguments passed to the tool
- * - `ok`: Whether the call succeeded
- * - `result`: The result (if ok is true)
- * - `error`: The error message (if ok is false)
- *
- * @example
- * ```tsx
- * function PlanPage({ planId }: { planId: string }) {
- *   const utils = trpc.useUtils();
- *
- *   useYakToolEvent((event) => {
- *     // Only invalidate if this tool touched plans
- *     if (event.ok && event.name.startsWith("plan.")) {
- *       utils.plan.get.invalidate({ id: planId });
- *       utils.planItem.list.invalidate({ planId });
- *     }
- *   });
- *
- *   // ... rest of component
- * }
- * ```
- *
- * @param handler - Function called after each tool call completes
- * @throws {Error} if used outside YakProvider
- */
-export function useYakToolEvent(handler) {
-    const context = useContext(YakContext);
-    if (!context) {
-        throw new Error("useYakToolEvent must be used within YakProvider");
-    }
-    // Use ref to always have latest handler without re-subscribing
-    const handlerRef = useRef(handler);
-    handlerRef.current = handler;
-    useEffect(() => {
-        // Wrap handler to use ref (stable reference)
-        const stableHandler = (event) => {
-            handlerRef.current(event);
-        };
-        return context.subscribeToToolEvents(stableHandler);
-    }, [context]);
-}