reactbridge-sdk 0.1.21 → 0.2.1

package/dist/index.esm.js

@@ -32,14 +32,14 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const DEFAULT_BASE_URL = 'https://react-bridge-api-14089992360.northamerica-northeast2.run.app'; // 'http://localhost:5093';
+const DEFAULT_BASE_URL$1 = 'https://react-bridge-api-14089992360.northamerica-northeast2.run.app'; // 'http://localhost:5093';
 class ReactBridgeAPI {
     constructor(config) {
         this.config = config;
     }
     sendMessage(request) {
         return __awaiter(this, void 0, void 0, function* () {
-            const baseURL = this.config.baseURL || DEFAULT_BASE_URL;
+            const baseURL = this.config.baseURL || DEFAULT_BASE_URL$1;
             const url = `${baseURL}/api/orchestrator/process`;
             try {
                 // Configure abort signal for fetch with robust fallback.
@@ -1437,5 +1437,719 @@ function createCustomTheme(baseTheme, overrides) {
     return Object.assign(Object.assign(Object.assign({}, baseTheme), overrides), { colors: Object.assign(Object.assign({}, baseTheme.colors), (overrides.colors || {})), spacing: Object.assign(Object.assign({}, baseTheme.spacing), (overrides.spacing || {})), fontSizes: Object.assign(Object.assign({}, baseTheme.fontSizes), (overrides.fontSizes || {})) });
 }
 
-export { ReactBridgeAPI, ReactBridgeChatbox, ReactBridgeProvider, ReactBridgeSearch, WebSpeechSTTProvider, WebSpeechTTSProvider, createCustomTheme, darkTheme, getTheme, lightTheme, useReactBridge, useReactBridgeContext };
+const DEFAULT_BASE_URL = 'https://react-bridge-api-14089992360.northamerica-northeast2.run.app';
+class AnalyticsAPI {
+    constructor(config) {
+        this.config = config;
+    }
+    /**
+     * Fetch all analytics configurations for the client
+     */
+    getConfigs() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const baseURL = this.config.baseURL || DEFAULT_BASE_URL;
+            const url = `${baseURL}/api/analytics/configs`;
+            const response = yield fetch(url, {
+                method: 'GET',
+                headers: Object.assign({ 'X-API-Key': this.config.apiKey }, this.config.headers),
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch analytics configs: ${response.statusText}`);
+            }
+            return response.json();
+        });
+    }
+    /**
+     * Fetch the latest analytics result for a specific type
+     */
+    getLatestResult(analyticsType) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const baseURL = this.config.baseURL || DEFAULT_BASE_URL;
+            const url = `${baseURL}/api/analytics/${analyticsType}/latest`;
+            const response = yield fetch(url, {
+                method: 'GET',
+                headers: Object.assign({ 'X-API-Key': this.config.apiKey, 'Content-Type': 'application/json' }, this.config.headers),
+            });
+            if (!response.ok) {
+                if (response.status === 404) {
+                    throw new Error(`No results found for analytics type: ${analyticsType}`);
+                }
+                throw new Error(`Failed to fetch analytics result: ${response.statusText}`);
+            }
+            return response.json();
+        });
+    }
+    /**
+     * Update directive status (executed, declined, failed)
+     */
+    updateDirectiveStatus(directiveId, status) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const baseURL = this.config.baseURL || DEFAULT_BASE_URL;
+            const url = `${baseURL}/api/analytics/directives/${directiveId}/status`;
+            const response = yield fetch(url, {
+                method: 'PATCH',
+                headers: Object.assign({ 'X-API-Key': this.config.apiKey, 'Content-Type': 'application/json' }, this.config.headers),
+                body: JSON.stringify({ status }),
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to update directive status: ${response.statusText}`);
+            }
+            return response.json();
+        });
+    }
+}
+
+function useAnalyticsConfigs() {
+    const { config } = useReactBridgeContext();
+    const [configs, setConfigs] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const fetchConfigs = () => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setIsLoading(true);
+            setError(null);
+            const api = new AnalyticsAPI(config);
+            const data = yield api.getConfigs();
+            setConfigs(data);
+        }
+        catch (err) {
+            setError(err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    useEffect(() => {
+        fetchConfigs();
+    }, [config]);
+    return {
+        configs,
+        isLoading,
+        error,
+        refetch: fetchConfigs,
+    };
+}
+
+function useAnalyticsResult(analyticsType) {
+    const { config } = useReactBridgeContext();
+    const [result, setResult] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchResult = () => __awaiter(this, void 0, void 0, function* () {
+        if (!analyticsType)
+            return;
+        try {
+            setIsLoading(true);
+            setError(null);
+            const api = new AnalyticsAPI(config);
+            const data = yield api.getLatestResult(analyticsType);
+            setResult(data);
+        }
+        catch (err) {
+            setError(err);
+            setResult(null);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    });
+    useEffect(() => {
+        fetchResult();
+    }, [analyticsType, config]);
+    return {
+        result,
+        isLoading,
+        error,
+        refetch: fetchResult,
+    };
+}
+
+const MetricsPanel = ({ metrics, theme }) => {
+    const getStatusColor = (status) => {
+        switch (status) {
+            case 'ok':
+                return theme.colors.success;
+            case 'warning':
+                return '#FFA500'; // Orange
+            case 'critical':
+                return theme.colors.error;
+            default:
+                return theme.colors.textSecondary;
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement("h3", { style: {
+                margin: 0,
+                marginBottom: theme.spacing.md,
+                fontSize: theme.fontSizes.lg,
+                color: theme.colors.text,
+            } }, "Metrics"),
+        React.createElement("div", { style: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+                gap: theme.spacing.md,
+            } }, metrics.map((metric, index) => (React.createElement("div", { key: index, style: {
+                padding: theme.spacing.md,
+                backgroundColor: theme.colors.surface,
+                borderRadius: theme.borderRadius,
+                border: `2px solid ${getStatusColor(metric.status)}`,
+            } },
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: theme.spacing.xs,
+                } },
+                React.createElement("span", { style: {
+                        fontSize: theme.fontSizes.sm,
+                        color: theme.colors.textSecondary,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.5px',
+                    } }, metric.name.replace(/_/g, ' ')),
+                React.createElement("span", { style: {
+                        fontSize: theme.fontSizes.xs,
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        backgroundColor: getStatusColor(metric.status),
+                        color: '#fff',
+                        textTransform: 'uppercase',
+                    } }, metric.status)),
+            React.createElement("div", { style: {
+                    fontSize: theme.fontSizes.xl,
+                    fontWeight: 'bold',
+                    color: theme.colors.text,
+                    marginBottom: theme.spacing.xs,
+                } },
+                metric.value,
+                " ",
+                metric.unit),
+            React.createElement("div", { style: {
+                    fontSize: theme.fontSizes.sm,
+                    color: theme.colors.textSecondary,
+                } }, metric.explanation)))))));
+};
+
+const ObservationsPanel = ({ observations, theme, }) => {
+    const getSeverityColor = (severity) => {
+        switch (severity) {
+            case 'low':
+                return theme.colors.success;
+            case 'medium':
+                return '#FFA500'; // Orange
+            case 'high':
+                return theme.colors.error;
+            default:
+                return theme.colors.textSecondary;
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement("h3", { style: {
+                margin: 0,
+                marginBottom: theme.spacing.md,
+                fontSize: theme.fontSizes.lg,
+                color: theme.colors.text,
+            } }, "Observations"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } }, observations.map((observation, index) => (React.createElement("div", { key: index, style: {
+                padding: theme.spacing.md,
+                backgroundColor: theme.colors.surface,
+                borderRadius: theme.borderRadius,
+                border: `1px solid ${theme.colors.border}`,
+                borderLeft: `4px solid ${getSeverityColor(observation.severity)}`,
+            } },
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: theme.spacing.xs,
+                } },
+                React.createElement("span", { style: {
+                        fontSize: theme.fontSizes.xs,
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        backgroundColor: getSeverityColor(observation.severity),
+                        color: '#fff',
+                        textTransform: 'uppercase',
+                    } }, observation.severity),
+                React.createElement("span", { style: {
+                        fontSize: theme.fontSizes.xs,
+                        color: theme.colors.textSecondary,
+                    } }, observation.scope)),
+            React.createElement("div", { style: {
+                    fontSize: theme.fontSizes.md,
+                    color: theme.colors.text,
+                    lineHeight: '1.5',
+                } }, observation.text)))))));
+};
+
+function useDirectiveAction(onDirectiveAction) {
+    const { config } = useReactBridgeContext();
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [error, setError] = useState(null);
+    const handleAction = (directive, action) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            setIsProcessing(true);
+            setError(null);
+            const api = new AnalyticsAPI(config);
+            // If onDirectiveAction callback is provided, execute it first
+            if (onDirectiveAction) {
+                const result = yield onDirectiveAction(directive, action);
+                if (result.success) {
+                    // Update status to 'executed' if action succeeded
+                    yield api.updateDirectiveStatus(directive.directiveId, 'executed');
+                }
+                else {
+                    // Update status to 'failed' if action failed
+                    yield api.updateDirectiveStatus(directive.directiveId, 'failed');
+                    throw new Error(result.error || 'Directive execution failed');
+                }
+                return { success: true };
+            }
+            else {
+                // No callback provided, just update status to 'declined'
+                if (action === 'decline') {
+                    yield api.updateDirectiveStatus(directive.directiveId, 'declined');
+                }
+                return { success: true };
+            }
+        }
+        catch (err) {
+            setError(err);
+            return { success: false, error: err.message };
+        }
+        finally {
+            setIsProcessing(false);
+        }
+    });
+    return {
+        handleAction,
+        isProcessing,
+        error,
+    };
+}
+
+const DirectivesPanel = ({ directives, theme, onDirectiveAction, onUpdate, }) => {
+    const { handleAction, isProcessing } = useDirectiveAction(onDirectiveAction);
+    const [processingId, setProcessingId] = useState(null);
+    const getPriorityColor = (priority) => {
+        if (priority >= 3)
+            return theme.colors.error; // High/Critical
+        if (priority === 2)
+            return '#FFA500'; // Medium
+        return theme.colors.success; // Low
+    };
+    const getPriorityLabel = (priority) => {
+        if (priority >= 3)
+            return 'Critical';
+        if (priority === 2)
+            return 'High';
+        if (priority === 1)
+            return 'Medium';
+        return 'Low';
+    };
+    const getStatusLabel = (status) => {
+        switch (status) {
+            case 'proposed':
+                return 'Pending';
+            case 'executed':
+                return 'Executed ✓';
+            case 'declined':
+                return 'Declined';
+            case 'failed':
+                return 'Failed ✗';
+            default:
+                return status;
+        }
+    };
+    const handleDirectiveAction = (directive, action) => __awaiter(void 0, void 0, void 0, function* () {
+        setProcessingId(directive.directiveId);
+        yield handleAction(directive, action);
+        setProcessingId(null);
+        if (onUpdate) {
+            onUpdate();
+        }
+    });
+    return (React.createElement("div", null,
+        React.createElement("h3", { style: {
+                margin: 0,
+                marginBottom: theme.spacing.md,
+                fontSize: theme.fontSizes.lg,
+                color: theme.colors.text,
+            } }, "Directives"),
+        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } }, directives.map((directive) => {
+            const isDisabled = directive.status !== 'proposed' ||
+                isProcessing ||
+                processingId === directive.directiveId;
+            return (React.createElement("div", { key: directive.directiveId, style: {
+                    padding: theme.spacing.md,
+                    backgroundColor: theme.colors.surface,
+                    borderRadius: theme.borderRadius,
+                    border: `1px solid ${theme.colors.border}`,
+                } },
+                React.createElement("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginBottom: theme.spacing.sm,
+                    } },
+                    React.createElement("span", { style: {
+                            fontSize: theme.fontSizes.xs,
+                            padding: '2px 8px',
+                            borderRadius: '12px',
+                            backgroundColor: getPriorityColor(directive.priority),
+                            color: '#fff',
+                            textTransform: 'uppercase',
+                        } }, getPriorityLabel(directive.priority)),
+                    React.createElement("span", { style: {
+                            fontSize: theme.fontSizes.xs,
+                            padding: '2px 8px',
+                            borderRadius: '12px',
+                            backgroundColor: theme.colors.textSecondary,
+                            color: '#fff',
+                        } }, getStatusLabel(directive.status))),
+                React.createElement("div", { style: {
+                        fontSize: theme.fontSizes.lg,
+                        fontWeight: 'bold',
+                        color: theme.colors.text,
+                        marginBottom: theme.spacing.xs,
+                    } }, directive.action.replace(/_/g, ' ').toUpperCase()),
+                directive.targets.length > 0 && (React.createElement("div", { style: {
+                        fontSize: theme.fontSizes.sm,
+                        color: theme.colors.textSecondary,
+                        marginBottom: theme.spacing.xs,
+                    } },
+                    React.createElement("strong", null, "Targets:"),
+                    " ",
+                    directive.targets.join(', '))),
+                directive.parameters.length > 0 && (React.createElement("div", { style: {
+                        marginBottom: theme.spacing.sm,
+                        padding: theme.spacing.sm,
+                        backgroundColor: theme.colors.background,
+                        borderRadius: theme.borderRadius,
+                    } }, directive.parameters.map((param, index) => (React.createElement("div", { key: index, style: {
+                        fontSize: theme.fontSizes.sm,
+                        color: theme.colors.text,
+                        marginBottom: '4px',
+                    } },
+                    React.createElement("strong", null,
+                        param.name,
+                        ":"),
+                    " ",
+                    param.value,
+                    " (",
+                    param.valueType,
+                    ")"))))),
+                React.createElement("div", { style: {
+                        fontSize: theme.fontSizes.sm,
+                        color: theme.colors.textSecondary,
+                        marginBottom: theme.spacing.md,
+                        lineHeight: '1.5',
+                    } }, directive.rationale),
+                directive.status === 'proposed' && (React.createElement("div", { style: { display: 'flex', gap: theme.spacing.sm } },
+                    React.createElement("button", { onClick: () => handleDirectiveAction(directive, 'execute'), disabled: isDisabled, style: {
+                            flex: 1,
+                            padding: theme.spacing.sm,
+                            backgroundColor: isDisabled
+                                ? theme.colors.textSecondary
+                                : theme.colors.success,
+                            color: '#fff',
+                            border: 'none',
+                            borderRadius: theme.borderRadius,
+                            cursor: isDisabled ? 'not-allowed' : 'pointer',
+                            fontSize: theme.fontSizes.sm,
+                            fontWeight: 'bold',
+                            opacity: isDisabled ? 0.6 : 1,
+                        } }, processingId === directive.directiveId ? 'Processing...' : 'Execute'),
+                    React.createElement("button", { onClick: () => handleDirectiveAction(directive, 'decline'), disabled: isDisabled, style: {
+                            flex: 1,
+                            padding: theme.spacing.sm,
+                            backgroundColor: isDisabled
+                                ? theme.colors.textSecondary
+                                : theme.colors.error,
+                            color: '#fff',
+                            border: 'none',
+                            borderRadius: theme.borderRadius,
+                            cursor: isDisabled ? 'not-allowed' : 'pointer',
+                            fontSize: theme.fontSizes.sm,
+                            fontWeight: 'bold',
+                            opacity: isDisabled ? 0.6 : 1,
+                        } }, "Decline")))));
+        }))));
+};
+
+// Refresh Icon SVG
+const REFRESH_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" })));
+// Back Arrow Icon SVG
+const BACK_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })));
+// Close Icon SVG
+const CLOSE_ICON_SVG$1 = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })));
+const AnalyticsReport = ({ analyticsType, theme: customTheme, onDirectiveAction, onRefresh, onBack, onClose, }) => {
+    const { result, isLoading, error, refetch } = useAnalyticsResult(analyticsType);
+    const handleRefresh = () => {
+        refetch();
+        if (onRefresh) {
+            onRefresh();
+        }
+    };
+    // Use a default theme if none provided
+    const theme = customTheme || {
+        colors: {
+            background: '#ffffff',
+            surface: '#f5f5f5',
+            text: '#333333',
+            textSecondary: '#666666',
+            border: '#e0e0e0',
+            primary: '#007bff',
+            success: '#28a745',
+            error: '#dc3545',
+            secondary: '#6c757d',
+        },
+        spacing: {
+            xs: '4px',
+            sm: '8px',
+            md: '16px',
+            lg: '24px',
+            xl: '32px',
+        },
+        fontSizes: {
+            xs: '12px',
+            sm: '14px',
+            md: '16px',
+            lg: '20px',
+            xl: '24px',
+        },
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        name: 'default',
+    };
+    return (React.createElement("div", { style: {
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: theme.colors.background,
+        } },
+        React.createElement("div", { style: {
+                padding: theme.spacing.lg,
+                borderBottom: `1px solid ${theme.colors.border}`,
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            } },
+            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: theme.spacing.sm } },
+                onBack && (React.createElement("button", { onClick: onBack, style: {
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: '24px',
+                        color: theme.colors.text,
+                        padding: 0,
+                    } }, BACK_ICON_SVG)),
+                React.createElement("div", null,
+                    React.createElement("h2", { style: {
+                            margin: 0,
+                            fontSize: theme.fontSizes.xl,
+                            color: theme.colors.text,
+                        } }, analyticsType),
+                    result && (React.createElement("div", { style: {
+                            fontSize: theme.fontSizes.xs,
+                            color: theme.colors.textSecondary,
+                            marginTop: '4px',
+                        } },
+                        "Last updated: ",
+                        new Date(result.createdAt).toLocaleString())))),
+            React.createElement("div", { style: { display: 'flex', gap: theme.spacing.sm } },
+                React.createElement("button", { onClick: handleRefresh, disabled: isLoading, style: {
+                        background: 'none',
+                        border: 'none',
+                        cursor: isLoading ? 'not-allowed' : 'pointer',
+                        fontSize: '24px',
+                        color: theme.colors.text,
+                        padding: 0,
+                        opacity: isLoading ? 0.5 : 1,
+                    } }, REFRESH_ICON_SVG),
+                onClose && (React.createElement("button", { onClick: onClose, style: {
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: '24px',
+                        color: theme.colors.text,
+                        padding: 0,
+                    } }, CLOSE_ICON_SVG$1)))),
+        React.createElement("div", { style: {
+                flex: 1,
+                overflowY: 'auto',
+                padding: theme.spacing.lg,
+            } }, isLoading ? (React.createElement("div", { style: { textAlign: 'center', color: theme.colors.textSecondary } }, "Loading analytics result...")) : error ? (React.createElement("div", { style: {
+                padding: theme.spacing.md,
+                backgroundColor: theme.colors.surface,
+                borderRadius: theme.borderRadius,
+                border: `1px solid ${theme.colors.error}`,
+                color: theme.colors.error,
+            } },
+            "Error: ",
+            error.message)) : result ? (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.xl } },
+            result.metrics.length > 0 && (React.createElement(MetricsPanel, { metrics: result.metrics, theme: theme })),
+            result.observations.length > 0 && (React.createElement(ObservationsPanel, { observations: result.observations, theme: theme })),
+            result.directives.length > 0 && (React.createElement(DirectivesPanel, { directives: result.directives, theme: theme, onDirectiveAction: onDirectiveAction, onUpdate: refetch })))) : (React.createElement("div", { style: { textAlign: 'center', color: theme.colors.textSecondary } }, "No results available")))));
+};
+
+// Close Icon SVG
+const CLOSE_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })));
+const AnalyticsDrawer = ({ isOpen, onClose, configs, isLoading, theme, onDirectiveAction, }) => {
+    const [selectedAnalytics, setSelectedAnalytics] = useState(null);
+    // Check if mobile
+    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
+    const drawerStyles = {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        width: isMobile ? '100%' : '400px',
+        height: '100%',
+        backgroundColor: theme.colors.background,
+        boxShadow: theme.boxShadow,
+        zIndex: 1001,
+        display: 'flex',
+        flexDirection: 'column',
+        transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
+        transition: 'transform 0.3s ease',
+    };
+    const overlayStyles = {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 1000,
+        opacity: isOpen ? 1 : 0,
+        pointerEvents: isOpen ? 'auto' : 'none',
+        transition: 'opacity 0.3s ease',
+    };
+    if (selectedAnalytics) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: overlayStyles, onClick: onClose }),
+            React.createElement("div", { style: drawerStyles },
+                React.createElement(AnalyticsReport, { analyticsType: selectedAnalytics, theme: theme, onDirectiveAction: onDirectiveAction, onBack: () => setSelectedAnalytics(null), onClose: onClose }))));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: overlayStyles, onClick: onClose }),
+        React.createElement("div", { style: drawerStyles },
+            React.createElement("div", { style: {
+                    padding: theme.spacing.lg,
+                    borderBottom: `1px solid ${theme.colors.border}`,
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                } },
+                React.createElement("h2", { style: {
+                        margin: 0,
+                        fontSize: theme.fontSizes.xl,
+                        color: theme.colors.text,
+                    } }, "Analytics"),
+                React.createElement("button", { onClick: onClose, style: {
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: '24px',
+                        color: theme.colors.text,
+                        padding: 0,
+                    } }, CLOSE_ICON_SVG)),
+            React.createElement("div", { style: {
+                    flex: 1,
+                    overflowY: 'auto',
+                    padding: theme.spacing.lg,
+                } }, isLoading ? (React.createElement("div", { style: { textAlign: 'center', color: theme.colors.textSecondary } }, "Loading analytics...")) : configs.length === 0 ? (React.createElement("div", { style: { textAlign: 'center', color: theme.colors.textSecondary } }, "No analytics configured")) : (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: theme.spacing.md } }, configs.map((config) => (React.createElement("div", { key: config.configId, onClick: () => config.isEnabled && setSelectedAnalytics(config.analyticsType), style: {
+                    padding: theme.spacing.md,
+                    backgroundColor: theme.colors.surface,
+                    borderRadius: theme.borderRadius,
+                    border: `1px solid ${theme.colors.border}`,
+                    cursor: config.isEnabled ? 'pointer' : 'not-allowed',
+                    opacity: config.isEnabled ? 1 : 0.6,
+                    transition: 'transform 0.2s ease',
+                }, onMouseEnter: (e) => {
+                    if (config.isEnabled) {
+                        e.currentTarget.style.transform = 'translateX(5px)';
+                    }
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.transform = 'translateX(0)';
+                } },
+                React.createElement("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        marginBottom: theme.spacing.xs,
+                    } },
+                    React.createElement("h3", { style: {
+                            margin: 0,
+                            fontSize: theme.fontSizes.md,
+                            color: theme.colors.text,
+                        } }, config.analyticsType),
+                    React.createElement("span", { style: {
+                            fontSize: theme.fontSizes.xs,
+                            padding: '2px 8px',
+                            borderRadius: '12px',
+                            backgroundColor: config.isEnabled
+                                ? theme.colors.success
+                                : theme.colors.textSecondary,
+                            color: '#fff',
+                        } }, config.isEnabled ? 'Enabled' : 'Disabled')),
+                React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: theme.fontSizes.sm,
+                        color: theme.colors.textSecondary,
+                        marginBottom: theme.spacing.xs,
+                    } }, config.templateDescription),
+                React.createElement("div", { style: {
+                        fontSize: theme.fontSizes.xs,
+                        color: theme.colors.textSecondary,
+                    } },
+                    React.createElement("div", null,
+                        "Frequency: ",
+                        config.frequency),
+                    config.lastExecutedAt && (React.createElement("div", null,
+                        "Last run: ",
+                        new Date(config.lastExecutedAt).toLocaleString()))))))))))));
+};
+
+// Analytics Icon SVG
+const ANALYTICS_ICON_SVG = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor" },
+    React.createElement("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" })));
+const AnalyticsWidget = ({ position = 'bottom-right', theme: customTheme, onDirectiveAction, }) => {
+    const { theme: contextTheme } = useReactBridgeContext();
+    const theme = customTheme || contextTheme;
+    const { configs, isLoading } = useAnalyticsConfigs();
+    const [isOpen, setIsOpen] = useState(false);
+    const enabledCount = configs.filter((c) => c.isEnabled).length;
+    const positionStyles = position === 'bottom-right'
+        ? { right: theme.spacing.lg, bottom: theme.spacing.lg }
+        : { left: theme.spacing.lg, bottom: theme.spacing.lg };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: Object.assign(Object.assign({ position: 'fixed' }, positionStyles), { width: '60px', height: '60px', borderRadius: '50%', backgroundColor: theme.colors.primary, color: '#fff', border: 'none', boxShadow: theme.boxShadow, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '24px', zIndex: 1000, transition: 'transform 0.2s ease' }), onMouseEnter: (e) => {
+                e.currentTarget.style.transform = 'scale(1.1)';
+            }, onMouseLeave: (e) => {
+                e.currentTarget.style.transform = 'scale(1)';
+            } },
+            ANALYTICS_ICON_SVG,
+            !isLoading && enabledCount > 0 && (React.createElement("span", { style: {
+                    position: 'absolute',
+                    top: '-5px',
+                    right: '-5px',
+                    backgroundColor: theme.colors.error,
+                    color: '#fff',
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                } }, enabledCount))),
+        isOpen && (React.createElement(AnalyticsDrawer, { isOpen: isOpen, onClose: () => setIsOpen(false), configs: configs, isLoading: isLoading, theme: theme, onDirectiveAction: onDirectiveAction }))));
+};
+
+export { AnalyticsAPI, AnalyticsReport, AnalyticsWidget, DirectivesPanel, MetricsPanel, ObservationsPanel, ReactBridgeAPI, ReactBridgeChatbox, ReactBridgeProvider, ReactBridgeSearch, WebSpeechSTTProvider, WebSpeechTTSProvider, createCustomTheme, darkTheme, getTheme, lightTheme, useAnalyticsConfigs, useAnalyticsResult, useDirectiveAction, useReactBridge, useReactBridgeContext };
 //# sourceMappingURL=index.esm.js.map