https://ai-agent.buzz/assets/js/componentTree.js?m=1784312666.0

1// Initialize the namespace immediately
2if (typeof window.dashMantineFunctions === 'undefined') {
3    window.dashMantineFunctions = {};
4}
5
6var dmcfuncs = window.dashMantineFunctions;
7
8/**
9 * Custom render function for component tree nodes
10 * Shows file type icon, component ID, and z-index with checkbox
11 * UPDATED: Added video icon support
12 */
13dmcfuncs.renderComponentNode = function (payload) {
14    const dmc = window.dash_mantine_components;
15    const iconify = window.dash_iconify;
16
17    /**
18     * Get appropriate icon based on component type
19     */
20    function getComponentIcon(type) {
21        const size = 16;
22        const iconMap = {
23            'iframe': { icon: 'tabler:world', color: '#228be6' },
24            'code': { icon: 'tabler:code', color: '#7950f2' },
25            'text': { icon: 'tabler:note', color: '#12b886' },
26            'image': { icon: 'tabler:photo', color: '#fd7e14' },
27            'image_with_note': { icon: 'tabler:photo-plus', color: '#fa5252' },
28            'multi_image': { icon: 'tabler:photo-scan', color: '#e64980' },
29            'image_gallery': { icon: 'tabler:layout-grid', color: '#be4bdb' },
30            'pdf': { icon: 'tabler:file-text', color: '#f59f00' },
31            'video': { icon: 'tabler:video', color: '#d9480f' },  // NEW: Video icon
32            'markdown': { icon: 'tabler:markdown', color: '#1971c2' },
33            'grid': { icon: 'tabler:table', color: '#2f9e44' },
34            'donut_chart': { icon: 'tabler:chart-pie', color: '#f59e0b' },
35            'line_chart': { icon: 'tabler:chart-line', color: '#4f46e5' },
36            'bar_chart': { icon: 'tabler:chart-bar', color: '#7e22ce' },
37            'pie_chart': { icon: 'tabler:chart-pie', color: '#f59e0b' },
38            'bubble_chart': { icon: 'tabler:chart-bubble', color: '#4f46e5' },
39            'scatter_chart': { icon: 'tabler:chart-scatter', color: '#7e22ce' },
40            'map': { icon: 'tabler:map', color: '#10b981' },
41            'table': { icon: 'tabler:table', color: '#2f9e44' },
42            'list': { icon: 'tabler:list', color: '#7e22ce' },
43            'bullet_list': { icon: 'tabler:list-check', color: '#4f46e5' },
44        };
45
46        const iconInfo = iconMap[type] || { icon: 'tabler:file', color: '#868e96' };
47
48        return React.createElement(iconify.DashIconify, {
49            icon: iconInfo.icon,
50            width: size,
51            height: size,
52            color: iconInfo.color
53        });
54    }
55
56    const { node, tree, elementProps } = payload;
57    const nodeData = node.nodeData || {};
58    const componentType = nodeData.type || 'unknown';
59
60    // SAFETY CHECK: Wrap in try-catch to handle internal DMC Tree errors
61    let isChecked = false;
62    try {
63        if (tree && typeof tree.isNodeChecked === 'function') {
64            isChecked = tree.isNodeChecked(node.value);
65        }
66    } catch (e) {
67        // Silently handle the error - tree state not initialized yet
68        isChecked = false;
69    }
70
71    // Create the checkbox with proper toggle logic
72    const checkbox = React.createElement(dmc.Checkbox, {
73        checked: isChecked,
74        onChange: (event) => {
75            event.stopPropagation();
76            // Wrap tree operations in try-catch
77            try {
78                if (tree && typeof tree.uncheckNode === 'function' && typeof tree.checkNode === 'function') {
79                    if (isChecked) {
80                        tree.uncheckNode(node.value);
81                    } else {
82                        tree.checkNode(node.value);
83                    }
84                }
85            } catch (e) {
86                console.warn('Tree operation failed:', e);
87            }
88        },
89        size: 'xs',
90        styles: {
91            input: { cursor: 'pointer' }
92        },
93        tabIndex: -1
94    });
95
96    // Create the content group
97    return React.createElement(
98        dmc.Group,
99        {
100            gap: 8,
101            wrap: 'nowrap',
102            style: { flex: 1, cursor: 'default' },
103            ...elementProps
104        },
105        checkbox,
106        getComponentIcon(componentType),
107        React.createElement(
108            dmc.Text,
109            {
110                size: 'sm',
111                style: {
112                    flex: 1,
113                    fontFamily: 'monospace',
114                    fontSize: '12px'
115                }
116            },
117            node.label
118        )
119    );
120};
121
122// Ensure it's globally accessible
123window.dashMantineFunctions = dmcfuncs;