@datalayer/agent-runtimes 0.0.2

package/lib/examples/main.js

@@ -0,0 +1,334 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/// <reference types="vite/client" />
+import { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
+import { ServiceManager } from '@jupyterlab/services';
+import { coreStore, iamStore, createDatalayerServiceManager, } from '@datalayer/core';
+import { useChatStore } from '../components/chat/store';
+import { EXAMPLES } from './example-selector';
+import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
+// Load configurations from DOM
+const loadConfigurations = () => {
+    // Load Datalayer configuration
+    const datalayerConfigElement = document.getElementById('datalayer-config-data');
+    if (datalayerConfigElement?.textContent) {
+        try {
+            const datalayerConfig = JSON.parse(datalayerConfigElement.textContent);
+            // If token is empty or still has placeholder, use environment variable from .env
+            if (!datalayerConfig.token ||
+                datalayerConfig.token.startsWith('%VITE_')) {
+                const envToken = import.meta.env.VITE_DATALAYER_API_TOKEN;
+                if (envToken) {
+                    datalayerConfig.token = envToken;
+                }
+            }
+            if (datalayerConfig.runUrl) {
+                coreStore.getState().setConfiguration(datalayerConfig);
+                // Also set the token in the IAM store for API authentication
+                if (datalayerConfig.token) {
+                    // Use the setLogin method to set the token in IAM store
+                    // For now, we'll just set a minimal user object since we don't have full user data
+                    iamStore.getState().setLogin({
+                        id: 'example-id',
+                        handle: 'example-user',
+                        email: 'example@datalayer.com',
+                        firstName: 'Example',
+                        lastName: 'User',
+                        initials: 'EU',
+                        displayName: 'Example User',
+                        avatarUrl: '',
+                        roles: [],
+                        setRoles: () => { },
+                        iamProviders: [],
+                        settings: {},
+                        unsubscribedFromOutbounds: false,
+                        onboarding: {
+                            clients: {
+                                Platform: 0,
+                                JupyterLab: 0,
+                                CLI: 0,
+                                VSCode: 0,
+                            },
+                            position: {},
+                            tours: {},
+                        },
+                        events: [],
+                    }, datalayerConfig.token);
+                }
+            }
+        }
+        catch (e) {
+            console.error('Failed to parse Datalayer config:', e);
+        }
+    }
+    // Load Simple configuration
+    loadJupyterConfig();
+    // Also set Simple server URL and token if available in jupyter-config-data
+    const jupyterConfigElement = document.getElementById('jupyter-config-data');
+    if (jupyterConfigElement?.textContent) {
+        try {
+            const jupyterConfig = JSON.parse(jupyterConfigElement.textContent);
+            if (jupyterConfig.baseUrl) {
+                setJupyterServerUrl(jupyterConfig.baseUrl);
+            }
+            if (jupyterConfig.token) {
+                setJupyterServerToken(jupyterConfig.token);
+            }
+        }
+        catch (e) {
+            console.error('Failed to parse Simple config:', e);
+        }
+    }
+};
+const getExampleNames = () => Object.keys(EXAMPLES);
+// Check if we're on the notebook-only route
+const isNotebookOnlyRoute = () => {
+    const path = window.location.pathname;
+    console.log('Current pathname:', path);
+    const isNotebookRoute = path === '/datalayer/notebook';
+    console.log('Is notebook-only route:', isNotebookRoute);
+    return isNotebookRoute;
+};
+// Get the default example name from localStorage
+const getDefaultExampleName = () => {
+    const stored = localStorage.getItem('selectedExample');
+    if (stored && EXAMPLES[stored]) {
+        return stored;
+    }
+    return 'DatalayerNotebookExample';
+};
+// Notebook-only component for iframe display - renders ONLY the notebook without any UI chrome
+const NotebookOnlyApp = () => {
+    const [serviceManager, setServiceManager] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [nbformat] = useState(nbformatExample);
+    const [NotebookComponent, setNotebookComponent] = 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    useState(null);
+    const [collaborationProvider, setCollaborationProvider] = useState(null);
+    useEffect(() => {
+        loadConfigurations();
+        const initializeApp = async () => {
+            try {
+                const { configuration } = coreStore.getState();
+                // Always try to create collaboration provider if we have token and runUrl
+                if (configuration?.token && configuration?.runUrl) {
+                    try {
+                        const { DatalayerCollaborationProvider } = await import('@datalayer/core/lib/collaboration/DatalayerCollaborationProvider');
+                        const provider = new DatalayerCollaborationProvider({
+                            runUrl: configuration.runUrl,
+                            token: configuration.token,
+                        });
+                        console.log('[NotebookOnlyApp] Created collaboration provider:', provider);
+                        setCollaborationProvider(provider);
+                    }
+                    catch (error) {
+                        console.error('Failed to create DatalayerCollaborationProvider:', error);
+                    }
+                }
+                // Create service manager
+                if (configuration?.token) {
+                    try {
+                        const manager = await createDatalayerServiceManager(configuration.cpuEnvironment || 'python-3.11', configuration.credits || 100);
+                        await manager.ready;
+                        setServiceManager(manager);
+                    }
+                    catch (error) {
+                        console.error('Failed to create DatalayerServiceManager:', error);
+                        const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                        const manager = new ServiceManager({ serverSettings });
+                        await manager.ready;
+                        setServiceManager(manager);
+                    }
+                }
+                else {
+                    const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                    const manager = new ServiceManager({ serverSettings });
+                    await manager.ready;
+                    setServiceManager(manager);
+                }
+                setLoading(false);
+            }
+            catch (e) {
+                console.error('Failed to initialize app:', e);
+                setError(`Failed to initialize app: ${e}`);
+                setLoading(false);
+            }
+        };
+        initializeApp();
+    }, []);
+    useEffect(() => {
+        // Dynamically import Notebook component
+        import('@datalayer/jupyter-react').then(module => {
+            setNotebookComponent(() => module.Notebook);
+        });
+    }, []);
+    if (loading || !NotebookComponent) {
+        return (_jsxs("div", { style: { padding: '20px', textAlign: 'center' }, children: [_jsx("h2", { children: "Loading Notebook..." }), _jsx("p", { children: "Please wait..." })] }));
+    }
+    if (error) {
+        return (_jsxs("div", { style: { padding: '20px', color: 'red' }, children: [_jsx("h2", { children: "Error Loading Notebook" }), _jsx("pre", { children: error })] }));
+    }
+    if (!serviceManager) {
+        return null;
+    }
+    const NOTEBOOK_ID = '01JZQRQ35GG871QQCZW9TB1A8J';
+    console.log('[NotebookOnlyApp] Rendering with:', {
+        hasServiceManager: !!serviceManager,
+        hasCollaborationProvider: !!collaborationProvider,
+        notebookId: NOTEBOOK_ID,
+    });
+    return (_jsx(JupyterReactTheme, { children: _jsx("div", { style: { width: '100vw', height: '100vh' }, children: _jsx(NotebookComponent, { id: NOTEBOOK_ID, height: "100vh", nbformat: nbformat, readonly: false, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider }) }) }));
+};
+// Main App component that loads and renders the selected example
+export const ExampleApp = () => {
+    const [ExampleComponent, setExampleComponent] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [serviceManager, setServiceManager] = useState(null);
+    const [selectedExample, setSelectedExample] = useState(getDefaultExampleName());
+    const [isChangingExample, setIsChangingExample] = useState(false);
+    const loadExample = async (exampleName, _manager) => {
+        try {
+            setIsChangingExample(true);
+            setError(null);
+            const exampleLoader = EXAMPLES[exampleName];
+            if (!exampleLoader) {
+                throw new Error(`Example "${exampleName}" not found`);
+            }
+            const module = await exampleLoader();
+            setExampleComponent(() => module.default);
+            setIsChangingExample(false);
+        }
+        catch (e) {
+            console.error('Failed to load example:', e);
+            setError(`Failed to load example: ${e}`);
+            setIsChangingExample(false);
+        }
+    };
+    useEffect(() => {
+        // Load configurations
+        loadConfigurations();
+        // Create service manager and load example - must be sequential
+        const initializeApp = async () => {
+            try {
+                const { configuration } = coreStore.getState();
+                // Try to use DatalayerServiceManager if we have a token
+                if (configuration?.token) {
+                    try {
+                        const manager = await createDatalayerServiceManager(configuration.cpuEnvironment || 'python-3.11', configuration.credits || 100);
+                        await manager.ready;
+                        setServiceManager(manager);
+                        // Load initial example
+                        await loadExample(selectedExample, manager);
+                    }
+                    catch (error) {
+                        console.error('Failed to create DatalayerServiceManager:', error);
+                        // Fall back to regular ServiceManager
+                        const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                        const manager = new ServiceManager({ serverSettings });
+                        await manager.ready;
+                        setServiceManager(manager);
+                        // Load initial example
+                        await loadExample(selectedExample, manager);
+                    }
+                }
+                else {
+                    // Use regular ServiceManager (no Datalayer token)
+                    const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                    const manager = new ServiceManager({ serverSettings });
+                    await manager.ready;
+                    setServiceManager(manager);
+                    // Load initial example
+                    await loadExample(selectedExample, manager);
+                }
+                setLoading(false);
+            }
+            catch (e) {
+                console.error('Failed to initialize app:', e);
+                setError(`Failed to initialize app: ${e}`);
+                setLoading(false);
+            }
+        };
+        initializeApp();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const handleExampleChange = async (newExample) => {
+        if (newExample === selectedExample || !serviceManager)
+            return;
+        // Clear chat store when changing examples to start fresh
+        useChatStore.getState().clearMessages();
+        setSelectedExample(newExample);
+        localStorage.setItem('selectedExample', newExample);
+        await loadExample(newExample, serviceManager);
+    };
+    if (loading) {
+        return (_jsxs("div", { style: { padding: '20px', textAlign: 'center' }, children: [_jsxs("h2", { children: ["Loading Example: ", selectedExample] }), _jsx("p", { children: "Please wait..." })] }));
+    }
+    if (error && !ExampleComponent) {
+        return (_jsxs("div", { style: { padding: '20px', color: 'red' }, children: [_jsx("h2", { children: "Error Loading Example" }), _jsx("pre", { children: error })] }));
+    }
+    if (!ExampleComponent && !isChangingExample) {
+        return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h2", { children: "Example Not Found" }), _jsx("p", { children: "The selected example could not be loaded." })] }));
+    }
+    // Check if the example component expects props
+    // Most examples will need serviceManager
+    const exampleProps = {};
+    if (serviceManager) {
+        exampleProps.serviceManager = serviceManager;
+    }
+    return (_jsx(JupyterReactTheme, { children: _jsxs("div", { style: { width: '100vw', height: '100vh', overflow: 'hidden' }, children: [_jsxs("div", { style: {
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        zIndex: 100,
+                        padding: '10px 20px',
+                        background: '#f0f0f0',
+                        borderBottom: '1px solid #ccc',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: '15px',
+                        fontSize: '14px',
+                        fontFamily: 'system-ui, -apple-system, sans-serif',
+                        height: '50px',
+                        boxSizing: 'border-box',
+                    }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '15px' }, children: [_jsx("label", { style: { fontWeight: 500, color: '#333' }, children: "Select Example:" }), _jsx("select", { value: selectedExample, onChange: e => handleExampleChange(e.target.value), disabled: isChangingExample, style: {
+                                        padding: '6px 12px',
+                                        fontSize: '14px',
+                                        border: '1px solid #ccc',
+                                        borderRadius: '4px',
+                                        background: 'white',
+                                        cursor: isChangingExample ? 'not-allowed' : 'pointer',
+                                        fontFamily: 'monospace',
+                                        minWidth: '250px',
+                                    }, children: getExampleNames()
+                                        .sort()
+                                        .map(name => (_jsx("option", { value: name, children: name }, name))) }), isChangingExample && (_jsx("span", { style: { color: '#666', fontSize: '12px' }, children: "Loading..." })), error && (_jsxs("span", { style: { color: '#dc3545', fontSize: '12px' }, children: ["Error: ", error] }))] }), _jsx("img", { src: "https://assets.datalayer.tech/datalayer-25.svg", alt: "Datalayer", style: { height: '24px' } })] }), _jsx("div", { style: {
+                        marginTop: '50px',
+                        height: 'calc(100vh - 50px)',
+                        overflow: 'auto',
+                    }, children: isChangingExample ? (_jsxs("div", { style: { padding: '40px', textAlign: 'center', color: '#666' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "..."] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleComponent, { ...exampleProps })) : null })] }) }));
+};
+// Mount the app - check route to determine which app to render
+const root = document.getElementById('root');
+if (root) {
+    if (isNotebookOnlyRoute()) {
+        console.log('Rendering NotebookOnlyApp');
+        createRoot(root).render(_jsx(NotebookOnlyApp, {}));
+    }
+    else {
+        console.log('Rendering ExampleApp');
+        createRoot(root).render(_jsx(ExampleApp, {}));
+    }
+}
+else {
+    console.error('Root element not found');
+}