dynim-react 1.0.0

package/dist/builder/BuilderProvider.js

@@ -0,0 +1,339 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BuilderProvider - React integration for the visual builder
+ *
+ * Integrates the visual builder UI (floating bar, drag engine, overlays)
+ * from dynim-core.
+ */
+import { createContext, useContext, useEffect, useRef, useCallback, useMemo, useState, } from 'react';
+import { createBuilderClient, createBuilder, createCodeClient, createBundleManager, createStyleApplier, hasStyleChanges, } from 'dynim-core';
+const BuilderContext = createContext(null);
+/**
+ * BuilderProvider - Wraps your app with builder support
+ */
+export function BuilderProvider({ children, config = {}, onBuilderReady, }) {
+    const builderClientRef = useRef(null);
+    const builderRef = useRef(null);
+    const codeClientRef = useRef(null);
+    const bundleManagerRef = useRef(null);
+    const styleApplierRef = useRef(null);
+    const [internalContainer, setInternalContainer] = useState(null);
+    const [isBuilderActive, setIsBuilderActive] = useState(false);
+    const [isBundleLoaded, setIsBundleLoaded] = useState(false);
+    const [isBundleLoading, setIsBundleLoading] = useState(false);
+    const [hasBundleManager, setHasBundleManager] = useState(false);
+    const [codeMessage, setCodeMessage] = useState({
+        thinking: '',
+        text: '',
+        edits: [],
+        status: 'idle',
+        bundleReady: false,
+        bundleError: undefined,
+    });
+    // Initialize visual builder (createBuilder from core)
+    useEffect(() => {
+        const { apiBase = 'http://localhost:8080', pageId = window.location.pathname, logo = 'Builder', contentRoot = document.body, sessionToken, refreshToken, getSession, } = config;
+        // Create the visual builder instance
+        builderRef.current = createBuilder({
+            logo,
+            contentRoot,
+            pageId,
+            apiBase,
+            sessionToken,
+            refreshToken,
+            getSession,
+            onEnter: () => {
+                console.log('[BuilderProvider] Visual builder entered');
+                setIsBuilderActive(true);
+            },
+            onExit: () => {
+                console.log('[BuilderProvider] Visual builder exited');
+                setIsBuilderActive(false);
+            },
+            onSave: (diffs) => {
+                console.log('[BuilderProvider] Changes saved:', diffs);
+            },
+        });
+        return () => {
+            builderRef.current?.destroy();
+        };
+    }, [config]);
+    // Initialize builder client for visual builder operations (saveDiffs, preview, exit)
+    useEffect(() => {
+        const { apiBase = 'http://localhost:8080', sessionToken, refreshToken, getSession, onError, } = config;
+        builderClientRef.current = createBuilderClient({
+            apiBase,
+            sessionToken,
+            refreshToken,
+            getSession,
+            onError: (error) => {
+                console.error('[BuilderProvider] Error:', error);
+                onError?.(error);
+            },
+        });
+    }, [config]);
+    // Initialize bundle manager
+    useEffect(() => {
+        const { previewContainer, inPlacePreview = true, previewTransitionDuration = 300, onStyleApplied, onBundleLoadStart, onBundleLoadComplete, onError, } = config;
+        // Determine which container to use
+        const container = inPlacePreview ? internalContainer : previewContainer;
+        if (!container) {
+            // For inPlacePreview, container may not be ready on first render
+            return;
+        }
+        bundleManagerRef.current = createBundleManager({
+            parent: container,
+            transitionDuration: previewTransitionDuration,
+            onLoadStart: (url) => {
+                setIsBundleLoading(true);
+                onBundleLoadStart?.(url);
+            },
+            onLoadComplete: (url) => {
+                setIsBundleLoading(false);
+                setIsBundleLoaded(true);
+                onBundleLoadComplete?.(url);
+            },
+            onError: (error) => {
+                setIsBundleLoading(false);
+                console.error('[BuilderProvider] Bundle load error:', error);
+                onError?.(error);
+            },
+            onUnload: () => {
+                setIsBundleLoaded(false);
+            },
+        });
+        setHasBundleManager(true);
+        // Create style applier that targets the bundle manager's container
+        styleApplierRef.current = createStyleApplier({
+            queryElements: (selector) => {
+                const container = bundleManagerRef.current?.getActiveContainer();
+                return container?.querySelectorAll(selector) ?? document.querySelectorAll(selector);
+            },
+            onApply: (change, elements) => {
+                console.log('[BuilderProvider] Style applied:', change, elements.length, 'elements');
+                onStyleApplied?.(change, elements);
+            },
+            onError: (change, error) => {
+                console.error('[BuilderProvider] Style apply error:', error, change);
+            },
+        });
+        return () => {
+            bundleManagerRef.current?.destroy();
+            bundleManagerRef.current = null;
+            styleApplierRef.current = null;
+            setHasBundleManager(false);
+        };
+    }, [config, internalContainer]);
+    // Initialize code client for flexcode integration
+    useEffect(() => {
+        const { apiBase = 'http://localhost:8080', sessionToken, refreshToken, getSession, onCodeMessageUpdate, onCodeMessage, // deprecated
+        onCodeEdit, onError, autoApplyStyles = true, } = config;
+        codeClientRef.current = createCodeClient({
+            apiBase,
+            sessionToken,
+            refreshToken,
+            getSession,
+            onMessageUpdate: (message) => {
+                // Update local state with the structured message
+                setCodeMessage(message);
+                // Forward to consumer callback
+                onCodeMessageUpdate?.(message);
+            },
+            onRawEvent: (event) => {
+                // Forward raw events for debugging/advanced use
+                onCodeMessage?.(event);
+            },
+            onEdit: (edit) => {
+                console.log('[BuilderProvider] Code edit:', edit);
+                // Auto-apply style changes if enabled and style applier is available
+                if (autoApplyStyles && styleApplierRef.current && hasStyleChanges(edit)) {
+                    const result = styleApplierRef.current.processEdit(edit);
+                    console.log('[BuilderProvider] Style changes:', result.changes.length, 'applied:', result.applied);
+                }
+                onCodeEdit?.(edit);
+            },
+            onError: (error) => {
+                console.error('[BuilderProvider] Code error:', error);
+                onError?.(error);
+            },
+        });
+    }, [config]);
+    // Enter builder mode - activates the visual builder UI
+    const enterBuilder = useCallback(() => {
+        if (builderRef.current && !builderRef.current.isActive()) {
+            builderRef.current.enter();
+        }
+    }, []);
+    // Exit builder mode - deactivates the visual builder UI
+    const exitBuilder = useCallback(() => {
+        if (builderRef.current && builderRef.current.isActive()) {
+            builderRef.current.exit();
+        }
+    }, []);
+    // Save and exit builder mode
+    const saveBuilder = useCallback(async () => {
+        if (builderRef.current && builderRef.current.isActive()) {
+            await builderRef.current.save();
+        }
+    }, []);
+    // Bundle manager methods (defined first since saveCode depends on loadProjectBundle)
+    const loadBundle = useCallback(async (bundleUrl) => {
+        if (!bundleManagerRef.current) {
+            console.warn('[BuilderProvider] Bundle manager not initialized (no previewContainer)');
+            return;
+        }
+        await bundleManagerRef.current.load(bundleUrl);
+    }, []);
+    const loadProjectBundle = useCallback(async (projectId, forceReload = false) => {
+        const { getBundleUrl, apiBase = 'http://localhost:8080' } = config;
+        let bundleUrl;
+        if (getBundleUrl) {
+            bundleUrl = await getBundleUrl(projectId);
+        }
+        else {
+            bundleUrl = `${apiBase.replace(':8080', ':8081')}/bundles/preview?project_id=${projectId}`;
+        }
+        // Cache bust to force reload (bypasses bundle manager's same-URL skip)
+        if (forceReload) {
+            bundleUrl += `&_t=${Date.now()}`;
+        }
+        await loadBundle(bundleUrl);
+    }, [config, loadBundle]);
+    // Load saved (permanent) bundle - used for initial load, after save, and after abandon
+    const loadSavedBundle = useCallback(async (projectId) => {
+        const { apiBase = 'http://localhost:8080' } = config;
+        const bundleUrl = `${apiBase.replace(':8080', ':8081')}/bundles/saved?project_id=${projectId}`;
+        await loadBundle(bundleUrl);
+    }, [config, loadBundle]);
+    // Load temp bundle - used when AI finishes editing to preview changes
+    const loadTempBundle = useCallback(async (projectId) => {
+        const { apiBase = 'http://localhost:8080' } = config;
+        const bundleUrl = `${apiBase.replace(':8080', ':8081')}/bundles/temp?project_id=${projectId}`;
+        console.log('[BuilderProvider] Loading temp bundle:', bundleUrl);
+        await loadBundle(bundleUrl);
+        console.log('[BuilderProvider] Temp bundle loaded');
+    }, [config, loadBundle]);
+    // Auto-reload temp bundle when bundle is ready (projectId comes from server event)
+    useEffect(() => {
+        if (codeMessage.bundleReady &&
+            codeMessage.projectId &&
+            bundleManagerRef.current) {
+            console.log('[BuilderProvider] Bundle ready - loading temp bundle:', codeMessage.projectId);
+            loadTempBundle(codeMessage.projectId);
+        }
+    }, [codeMessage.bundleReady, codeMessage.projectId, loadTempBundle]);
+    const applyStyles = useCallback((selector, styles) => {
+        bundleManagerRef.current?.applyStyles(selector, styles);
+    }, []);
+    const applyClassName = useCallback((selector, className) => {
+        bundleManagerRef.current?.applyClassName(selector, className);
+    }, []);
+    const toggleClasses = useCallback((selector, add, remove) => {
+        bundleManagerRef.current?.toggleClasses(selector, add, remove);
+    }, []);
+    const unloadBundle = useCallback(() => {
+        bundleManagerRef.current?.unload();
+    }, []);
+    // Code client methods (projectId comes from JWT on server, or from codeMessage for bundles)
+    const sendCode = useCallback(async (query) => {
+        await codeClientRef.current?.sendCode(query);
+    }, []);
+    const saveCode = useCallback(async () => {
+        // 1. Persist changes to backend (promotes temp to saved)
+        await codeClientRef.current?.saveCode();
+        // 2. Load the newly saved bundle (projectId from last bundle_ready event)
+        if (bundleManagerRef.current && codeMessage.projectId) {
+            await loadSavedBundle(codeMessage.projectId);
+        }
+    }, [loadSavedBundle, codeMessage.projectId]);
+    const abandonCode = useCallback(async () => {
+        // 1. Discard temp changes on server
+        await codeClientRef.current?.abandonCode();
+        // 2. Revert to saved bundle (projectId from last bundle_ready event)
+        if (bundleManagerRef.current && codeMessage.projectId) {
+            await loadSavedBundle(codeMessage.projectId);
+        }
+    }, [loadSavedBundle, codeMessage.projectId]);
+    const warmCache = useCallback(async () => {
+        await codeClientRef.current?.warmCache();
+    }, []);
+    const resetCodeMessage = useCallback(() => {
+        codeClientRef.current?.resetMessage();
+    }, []);
+    const contextValue = useMemo(() => ({
+        enterBuilder,
+        exitBuilder,
+        saveBuilder,
+        isBuilderActive,
+        getBuilder: () => builderRef.current,
+        // Code client methods (all AI chat goes through sendCode)
+        sendCode,
+        saveCode,
+        abandonCode,
+        warmCache,
+        codeMessage,
+        resetCodeMessage,
+        // Deprecated - use codeMessage.edits instead
+        codeEdits: codeMessage.edits,
+        // Bundle manager methods
+        loadBundle,
+        loadProjectBundle,
+        loadSavedBundle,
+        loadTempBundle,
+        applyStyles,
+        applyClassName,
+        toggleClasses,
+        hasBundleManager,
+        isBundleLoaded,
+        isBundleLoading,
+        unloadBundle,
+    }), [
+        enterBuilder,
+        exitBuilder,
+        saveBuilder,
+        isBuilderActive,
+        sendCode,
+        saveCode,
+        abandonCode,
+        warmCache,
+        codeMessage,
+        resetCodeMessage,
+        loadBundle,
+        loadProjectBundle,
+        loadSavedBundle,
+        loadTempBundle,
+        applyStyles,
+        applyClassName,
+        toggleClasses,
+        hasBundleManager,
+        isBundleLoaded,
+        isBundleLoading,
+        unloadBundle,
+    ]);
+    // Notify parent when ready (only once on mount)
+    const hasNotifiedRef = useRef(false);
+    useEffect(() => {
+        if (!hasNotifiedRef.current && onBuilderReady) {
+            hasNotifiedRef.current = true;
+            onBuilderReady(contextValue);
+        }
+    }, [contextValue, onBuilderReady]);
+    const { inPlacePreview = true } = config;
+    // Callback ref to capture container element
+    const containerRefCallback = useCallback((node) => {
+        if (node) {
+            setInternalContainer(node);
+        }
+    }, []);
+    return (_jsxs(BuilderContext.Provider, { value: contextValue, children: [(!inPlacePreview || !isBundleLoaded) && children, inPlacePreview && (_jsx("div", { ref: containerRefCallback, style: { display: isBundleLoaded ? 'block' : 'none' } }))] }));
+}
+/**
+ * Hook to access builder functionality
+ */
+export function useBuilder() {
+    const context = useContext(BuilderContext);
+    if (!context) {
+        throw new Error('useBuilder must be used within a BuilderProvider');
+    }
+    return context;
+}

package/dist/builder/ChatContext.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React Context for sharing chatbot state across components
+ */
+import { type ReactNode } from 'react';
+import { type UseChatbotConfig, type UseChatbotReturn } from './useChatbot';
+export interface ChatProviderProps extends UseChatbotConfig {
+    children: ReactNode;
+}
+export declare function ChatProvider({ children, ...config }: ChatProviderProps): JSX.Element;
+export declare function useChatContext(): UseChatbotReturn;
+//# sourceMappingURL=ChatContext.d.ts.map

package/dist/builder/ChatContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/builder/ChatContext.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAc,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIxF,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAIpF;AAED,wBAAgB,cAAc,IAAI,gBAAgB,CAMjD"}

package/dist/builder/ChatContext.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * React Context for sharing chatbot state across components
+ */
+import { createContext, useContext } from 'react';
+import { useChatbot } from './useChatbot';
+const ChatContext = createContext(null);
+export function ChatProvider({ children, ...config }) {
+    const chatbot = useChatbot(config);
+    return _jsx(ChatContext.Provider, { value: chatbot, children: children });
+}
+export function useChatContext() {
+    const context = useContext(ChatContext);
+    if (!context) {
+        throw new Error('useChatContext must be used within a ChatProvider');
+    }
+    return context;
+}

package/dist/builder/ChatInput.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Chat input component
+ */
+export interface ChatInputProps {
+    className?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onSubmit?: (text: string) => void;
+}
+export declare function ChatInput({ className, placeholder, disabled, onSubmit, }: ChatInputProps): JSX.Element;
+//# sourceMappingURL=ChatInput.d.ts.map

package/dist/builder/ChatInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../src/builder/ChatInput.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAc,EACd,WAAiC,EACjC,QAAgB,EAChB,QAAQ,GACT,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAuC9B"}

package/dist/builder/ChatInput.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chat input component
+ */
+import { useState, useCallback } from 'react';
+import { useChatContext } from './ChatContext';
+export function ChatInput({ className = '', placeholder = 'Type a message...', disabled = false, onSubmit, }) {
+    const { sendMessage, isLoading } = useChatContext();
+    const [value, setValue] = useState('');
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        const text = value.trim();
+        if (!text || isLoading)
+            return;
+        setValue('');
+        onSubmit?.(text);
+        sendMessage(text);
+    }, [value, isLoading, sendMessage, onSubmit]);
+    return (_jsxs("form", { className: `chatbot-form ${className}`, onSubmit: handleSubmit, children: [_jsx("input", { type: "text", className: "chatbot-input", placeholder: placeholder, value: value, onChange: (e) => setValue(e.target.value), disabled: disabled || isLoading, autoComplete: "off" }), _jsx("button", { type: "submit", className: "chatbot-send", disabled: disabled || isLoading || !value.trim(), children: _jsx("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor", children: _jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) }) })] }));
+}

package/dist/builder/CodeChatPanel.d.ts

@@ -0,0 +1,24 @@
+/**
+ * CodeChatPanel - Self-contained code chat UI component
+ *
+ * Handles all the complexity internally:
+ * - Streaming responses with thinking/text differentiation
+ * - Code edit display with accept/reject
+ * - Loading states, errors
+ *
+ * Consuming app just drops this in and it works.
+ */
+export interface CodeChatPanelProps {
+    /** Optional placeholder text for input */
+    placeholder?: string;
+    /** Optional class name for the container */
+    className?: string;
+    /** Called when edits are saved */
+    onSave?: () => void;
+    /** Called when edits are abandoned */
+    onAbandon?: () => void;
+    /** Called on errors */
+    onError?: (error: string) => void;
+}
+export declare function CodeChatPanel({ placeholder, className, onSave, onAbandon, onError, }: CodeChatPanelProps): JSX.Element;
+//# sourceMappingURL=CodeChatPanel.d.ts.map

package/dist/builder/CodeChatPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeChatPanel.d.ts","sourceRoot":"","sources":["../../src/builder/CodeChatPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,MAAM,WAAW,kBAAkB;IACjC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,uBAAuB;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAwMD,wBAAgB,aAAa,CAAC,EAC5B,WAAsD,EACtD,SAAc,EACd,MAAM,EACN,SAAS,EACT,OAAO,GACR,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA6LlC"}