flowstudio 0.0.18 → 0.0.22

package/dist/project_widget.js

@@ -18,6 +18,6 @@ export default function ProjectWidget({ api_key, identifier, name, logo, ...rest
             setOpenedProjects([...openedProjects, { identifier, name }]);
         }
     };
-    return (_jsx(_Fragment, { children: _jsx(Card, { onClick: handleClick, style: { cursor: 'pointer' }, children: _jsx(Inset, { children: _jsxs(Flex, { direction: 'column', justify: 'center', align: 'center', children: [_jsx(Flex, { height: '100%', width: '100%', direction: 'column', align: 'center', justify: 'center', p: '5', children: _jsx("img", { fetchPriority: 'high', src: logo || '/onenote.png', alt: 'icon', width: 70, height: 70 }) }), _jsx(Separator, { size: '4' }), _jsx(Flex, { p: '2', children: _jsx(Text, { size: '1', color: 'gray', children: name }) })] }) }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(Card, { onClick: handleClick, style: { cursor: 'pointer' }, children: _jsx(Inset, { children: _jsxs(Flex, { direction: 'column', justify: 'center', align: 'center', children: [_jsx(Flex, { height: '100%', width: '100%', direction: 'column', align: 'center', justify: 'center', p: '5', children: _jsx("img", { fetchPriority: 'high', src: logo || '/onenote.png', alt: 'icon', width: 70, height: 70 }) }), _jsx(Separator, { size: '4' }), _jsx(Flex, { p: '2', justify: 'center', align: 'center', children: _jsx(Text, { size: '1', color: 'gray', align: 'center', truncate: true, children: name }) })] }) }) }) }));
 }
 //# sourceMappingURL=project_widget.js.map

package/dist/project_widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"project_widget.js","sourceRoot":"","sources":["../src/project_widget.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAErE,iCAAiC;AACjC,8CAA8C;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,EAAO;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvC,6BAA6B;IAC7B,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAA;IAE5E,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,UAAU,CAAC,CAAA;QACzB,IAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAAC,CAAC,OAAY,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,KAAK,UAAU,CAAC,EAAE,CAAC;YAC3E,OAAO,cAAc,CAAC;QAC1B,CAAC;aAAM,CAAC;YACJ,iBAAiB,CAAC,CAAC,GAAG,cAAc,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAEjE,CAAC;IAEL,CAAC,CAAA;IAED,OAAO,CACH,4BACI,KAAC,IAAI,IAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAC,MAAM,EAAC,SAAS,EAAC,YACjD,KAAC,KAAK,cACN,MAAC,IAAI,IAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,aACzD,KAAC,IAAI,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,YAChG,cAAK,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,IAAI,cAAc,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC5F,EACP,KAAC,SAAS,IAAC,IAAI,EAAE,GAAG,GAAI,EACxB,KAAC,IAAI,IAAC,CAAC,EAAE,GAAG,YACR,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,YAAG,IAAI,GAAQ,GAC1C,IACJ,GACC,GACL,GACR,CACN,CAAA;AACL,CAAC"}
+{"version":3,"file":"project_widget.js","sourceRoot":"","sources":["../src/project_widget.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAErE,iCAAiC;AACjC,8CAA8C;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,EAAO;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvC,6BAA6B;IAC7B,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAA;IAE5E,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,UAAU,CAAC,CAAA;QACzB,IAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAAC,CAAC,OAAY,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,KAAK,UAAU,CAAC,EAAE,CAAC;YAC3E,OAAO,cAAc,CAAC;QAC1B,CAAC;aAAM,CAAC;YACJ,iBAAiB,CAAC,CAAC,GAAG,cAAc,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAEjE,CAAC;IAEL,CAAC,CAAA;IAED,OAAO,CACH,4BACI,KAAC,IAAI,IAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAC,MAAM,EAAC,SAAS,EAAC,YACjD,KAAC,KAAK,cACN,MAAC,IAAI,IAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,aACzD,KAAC,IAAI,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,YAChG,cAAK,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,IAAI,cAAc,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAC5F,EACP,KAAC,SAAS,IAAC,IAAI,EAAE,GAAG,GAAI,EACxB,KAAC,IAAI,IAAC,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,YAC5C,KAAC,IAAI,IAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,kBAAE,IAAI,GAAQ,GACpE,IACJ,GACC,GACL,GACR,CACN,CAAA;AACL,CAAC"}

package/dist/simulator.js

@@ -20,12 +20,12 @@ export default function Simulator({ api_key, projectId }) {
         setRefreshing(true);
         await handleSubmit({
             production_type: deploymentType || "live",
-            user_input: "000",
-            sessionid: '1234567',
+            user_input: "800",
+            sessionId: '1234567',
             msisdn: "024",
-            mode: "start",
-            trafficid: "123456789",
-            traffic_source: "ussd"
+            requestType: "INITIATION",
+            trafficId: "123456789",
+            trafficSource: "ussd"
         });
         setRefreshing(false);
     };
@@ -46,26 +46,28 @@ export default function Simulator({ api_key, projectId }) {
             const post_data = JSON.stringify({
                 project_id: projectId,
                 production_type: deploymentType,
-                userdata: data.user_input,
-                sessionid: '1234567',
+                userInput: data.user_input,
+                sessionId: '1234567',
                 msisdn: "024",
-                mode: (data === null || data === void 0 ? void 0 : data.mode) || "more",
-                trafficid: "123456789",
-                traffic_source: "ussd"
+                requestType: (data === null || data === void 0 ? void 0 : data.requestType) || "EXISTING",
+                trafficId: "123456789",
+                trafficSource: "ussd"
             });
             const response = await fetch(`${simulatorEndpoint}`, { method: 'POST', body: post_data, headers: { "X-API-KEY": `${api_key}`, "Content-Type": "application/json" } });
+            const response_data = await response.json();
             if (await response.ok) {
-                const response_data = await response.text();
                 resetForm({});
                 setFocus('user_input');
-                setFlowMessage(response_data);
+                const new_message = response_data.menuContent.replace(/\\n/g, "<br>");
+                // console.log(new_message)
+                setFlowMessage(new_message);
             }
             else {
-                console.log('simulator POST not successful');
+                console.log(`simulator POST not successful: ${response_data}`);
             }
         }
         catch (e) {
-            console.log('Form Submit Error: ' + e);
+            console.log(`Form Submit Error: ${e}`);
         }
     };
     return (_jsxs(Popover.Root, { children: [_jsx(Tooltip, { content: 'Simulator', side: 'right', align: 'center', children: _jsx(Popover.Trigger, { children: _jsx(Button, { size: '1', variant: 'soft', children: _jsx(MdOutlinePhoneAndroid, {}) }) }) }), _jsx(Popover.Content, { side: 'right', sideOffset: 10, children: _jsxs(Flex, { direction: 'column', gap: '3', children: [_jsxs(Flex, { justify: 'between', children: [_jsxs(SegmentedControl.Root, { size: "1", defaultValue: "draft", radius: "large", children: [_jsx(SegmentedControl.Item, { onClick: () => setDeploymentType('draft'), value: "draft", children: "Draft" }), _jsx(SegmentedControl.Item, { onClick: () => setDeploymentType('live'), value: "live", children: "Live" })] }), _jsxs(Button, { size: '1', variant: 'outline', onClick: initialFormSubmit, children: [!refreshing && _jsx(IoReload, { size: '13' }), refreshing && _jsx(Spinner, {})] })] }), _jsx(Card, { style: { height: 'auto', minHeight: '150px', maxWidth: '230px' }, children: _jsx(Text, { wrap: 'wrap', color: 'gray', size: '1', children: parse(flowMessage) || 'No message' }) }), _jsx(Form.Root, { onSubmit: handleFormSubmit(handleSubmit), noValidate: true, children: _jsxs(Form.Field, { name: 'user_input', serverInvalid: errors.user_input != null, children: [_jsx(TextField.Root, { type: "text", ...registerInput('user_input'), id: "user_input", autoComplete: "off", placeholder: 'User Input', autoFocus: true, children: _jsx(TextField.Slot, { side: 'right', pr: '1', children: _jsxs(Button, { size: '1', highContrast: true, disabled: isSubmitting, type: "submit", children: [_jsx(Spinner, { loading: isSubmitting }), !isSubmitting && _jsx(SendHorizonalIcon, { size: '15' })] }) }) }), ((_a = errors.user_input) === null || _a === void 0 ? void 0 : _a.message) && _jsx(Form.Message, { children: (_b = errors.user_input) === null || _b === void 0 ? void 0 : _b.message })] }) })] }) })] }));

package/dist/simulator.js.map

@@ -1 +1 @@
-{"version":3,"file":"simulator.js","sourceRoot":"","sources":["../src/simulator.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"simulator.js","sourceRoot":"","sources":["../src/simulator.tsx"],"names":[],"mappings":"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"}

package/dist/studio_pane.d.ts

@@ -1 +1,2 @@
-export default function StudioPane({ api_key, projectsRefetch, identifier, providers, provider }: any): import("react/jsx-runtime").JSX.Element;
+import './studio.css';
+export default function StudioPane({ api_key, projectsRefetch, identifier, providers, provider, theme }: any): import("react/jsx-runtime").JSX.Element;

package/dist/studio_pane.js

@@ -12,70 +12,279 @@ import { v4 as uuidv4 } from 'uuid';
 import TopRightPanel from './top_right_panel';
 import TopCenterPanel from './top_center_panel';
 import TopLeftPanel from './top_left_panel';
-// import './studio.css';
+import './studio.css';
 import AppAnalytics from './app_analytics';
-export default function StudioPane({ api_key, projectsRefetch, identifier, providers, provider }) {
-    const { appTheme, stateType } = useConfigStore();
-    const { data: project, status: projectStatus, refetch: projectRefetch } = useQuery({ queryKey: [`project_${identifier}`], queryFn: async () => {
-            const res = await fetch(`${process.env.BACKEND_ENDPOINT}/projects/${identifier}`, { headers: { "X-API-KEY": `${api_key}` } });
+import flow_constants from './constants';
+// Constants
+const MAX_HISTORY_SIZE = 50;
+const AUTO_SAVE_DELAY = 1000;
+const QUERY_STALE_TIME = 5 * 60 * 1000; // 5 minutes
+const QUERY_CACHE_TIME = 10 * 60 * 1000; // 10 minutes
+// Node templates for performance
+const NODE_TEMPLATES = {
+    function: {
+        type: 'fNode',
+        data: { label: '', function: '' }
+    },
+    default: {
+        type: 'gNode',
+        data: {
+            label: '',
+            message: '',
+            type: 'end',
+            response: {
+                validation: 'alpha-numeric',
+                source: 'manual',
+                inputs: [{ id: 1 }]
+            }
+        }
+    }
+};
+// Debounce utility
+function useDebounce(callback, delay) {
+    const timeoutRef = useRef(null);
+    return useCallback((...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => callback(...args), delay);
+    }, [callback, delay]);
+}
+// Custom hook for history management
+function useFlowHistory() {
+    const [history, setHistory] = useState([]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const addToHistory = useCallback((newState) => {
+        setHistory(prevHistory => {
+            let updatedHistory = prevHistory;
+            // If we're not at the end, truncate future history
+            if (historyIndex < prevHistory.length - 1) {
+                updatedHistory = prevHistory.slice(0, historyIndex + 1);
+            }
+            // Add new state and maintain max size
+            const newHistory = [...updatedHistory, newState];
+            return newHistory.length > MAX_HISTORY_SIZE
+                ? newHistory.slice(-MAX_HISTORY_SIZE)
+                : newHistory;
+        });
+        setHistoryIndex(prev => {
+            const newIndex = Math.min(prev + 1, MAX_HISTORY_SIZE - 1);
+            return newIndex;
+        });
+    }, [historyIndex]);
+    const undo = useCallback(() => {
+        if (historyIndex > 0) {
+            setHistoryIndex(prev => prev - 1);
+            return history[historyIndex - 1];
+        }
+        return null;
+    }, [history, historyIndex]);
+    const redo = useCallback(() => {
+        if (historyIndex < history.length - 1) {
+            setHistoryIndex(prev => prev + 1);
+            return history[historyIndex + 1];
+        }
+        return null;
+    }, [history, historyIndex]);
+    return { addToHistory, undo, redo, historyIndex, historySize: history.length };
+}
+// Custom hook for auto-save functionality
+function useAutoSave(rfInstance, identifier, api_key, nodes, edges, addToHistory) {
+    const [saving, setSaving] = useState(false);
+    const lastSavedStateRef = useRef('');
+    const performSave = useCallback(async () => {
+        if (!rfInstance || !identifier)
+            return;
+        setSaving(true);
+        try {
+            const flow = rfInstance.toObject();
+            const response = await fetch(`${flow_constants.BACKEND_ENDPOINT}/projects/${identifier}`, {
+                method: 'PATCH',
+                headers: {
+                    "X-API-KEY": `${api_key}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ flow_draft: flow })
+            });
+            if (!response.ok) {
+                console.error('Failed to save flow draft');
+            }
+        }
+        catch (error) {
+            console.error('Error saving nodes and edges:', error);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [rfInstance, identifier, api_key]);
+    const debouncedSave = useDebounce(performSave, AUTO_SAVE_DELAY);
+    const saveWithHistory = useCallback(() => {
+        if (!rfInstance)
+            return;
+        const currentState = {
+            nodes: nodes === null || nodes === void 0 ? void 0 : nodes.map(n => ({ ...n })),
+            edges: edges === null || edges === void 0 ? void 0 : edges.map(e => ({ ...e })),
+            viewport: rfInstance.getViewport()
+        };
+        // Check if state actually changed to avoid unnecessary saves
+        const currentStateString = JSON.stringify(currentState);
+        if (currentStateString === lastSavedStateRef.current)
+            return;
+        lastSavedStateRef.current = currentStateString;
+        addToHistory(currentState);
+        debouncedSave();
+    }, [rfInstance, nodes, edges, addToHistory, debouncedSave]);
+    return { performSave, saveWithHistory, saving };
+}
+// Custom hook for context menu
+function useContextMenu() {
+    const [contextMenu, setContextMenu] = useState({
+        show: false,
+        position: { x: 0, y: 0 }
+    });
+    const handleContextMenu = useCallback((event) => {
+        event.preventDefault();
+        setContextMenu({
+            show: true,
+            position: { x: event.clientX, y: event.clientY }
+        });
+    }, []);
+    const hideContextMenu = useCallback(() => {
+        setContextMenu(prev => ({ ...prev, show: false }));
+    }, []);
+    return {
+        showContextMenu: contextMenu.show,
+        contextMenuPosition: contextMenu.position,
+        handleContextMenu,
+        setShowContextMenu: hideContextMenu
+    };
+}
+export default function StudioPane({ api_key, projectsRefetch, identifier, providers, provider, theme }) {
+    const { stateType } = useConfigStore();
+    // Optimized queries with better caching
+    const { data: project, status: projectStatus, refetch: projectRefetch } = useQuery({
+        queryKey: [`project_${identifier}`],
+        queryFn: async () => {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/projects/${identifier}`, {
+                headers: { "X-API-KEY": `${api_key}` }
+            });
             return res === null || res === void 0 ? void 0 : res.json();
-        }, enabled: !!identifier });
-    const { data: functions, refetch: functionsRefetch } = useQuery({ queryKey: [`project_${identifier}_functions`], queryFn: async () => {
-            const res = await fetch(`${process.env.BACKEND_ENDPOINT}/functions?project=${identifier}`, { headers: { "X-API-KEY": `${api_key}` } });
+        },
+        enabled: !!identifier,
+        staleTime: QUERY_STALE_TIME,
+        gcTime: QUERY_CACHE_TIME
+    });
+    const { data: functions, refetch: functionsRefetch } = useQuery({
+        queryKey: [`project_${identifier}_functions`],
+        queryFn: async () => {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/functions?project=${identifier}`, {
+                headers: { "X-API-KEY": `${api_key}` }
+            });
             return res === null || res === void 0 ? void 0 : res.json();
-        }, enabled: !!identifier });
-    const { data: triggers, refetch: triggersRefetch } = useQuery({ queryKey: [`project_${identifier}_triggers`], queryFn: async () => {
-            const res = await fetch(`${process.env.BACKEND_ENDPOINT}/triggers?project=${identifier}`, { headers: { "X-API-KEY": `${api_key}` } });
+        },
+        enabled: !!identifier,
+        staleTime: QUERY_STALE_TIME,
+        gcTime: QUERY_CACHE_TIME
+    });
+    const { data: triggers, refetch: triggersRefetch } = useQuery({
+        queryKey: [`project_${identifier}_triggers`],
+        queryFn: async () => {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/triggers?project=${identifier}`, {
+                headers: { "X-API-KEY": `${api_key}` }
+            });
             return res === null || res === void 0 ? void 0 : res.json();
-        }, enabled: !!identifier });
-    const { data: envs, refetch: envsRefetch } = useQuery({ queryKey: [`project_${identifier}_envs`], queryFn: async () => {
-            const res = await fetch(`${process.env.BACKEND_ENDPOINT}/envs?project=${identifier}`, { headers: { "X-API-KEY": `${api_key}` } });
+        },
+        enabled: !!identifier,
+        staleTime: QUERY_STALE_TIME,
+        gcTime: QUERY_CACHE_TIME
+    });
+    const { data: envs, refetch: envsRefetch } = useQuery({
+        queryKey: [`project_${identifier}_envs`],
+        queryFn: async () => {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/envs?project=${identifier}`, {
+                headers: { "X-API-KEY": `${api_key}` }
+            });
             return res === null || res === void 0 ? void 0 : res.json();
-        }, enabled: !!identifier });
-    const { data: sessions, status: sessionsStatus, refetch: sessionsRefetch } = useQuery({ queryKey: [`project_${identifier}_sessions`], queryFn: async () => {
-            const res = await fetch(`${process.env.BACKEND_ENDPOINT}/sessions?project=${identifier}`, { headers: { "X-API-KEY": `${api_key}` } });
+        },
+        enabled: !!identifier,
+        staleTime: QUERY_STALE_TIME,
+        gcTime: QUERY_CACHE_TIME
+    });
+    const { data: sessions, status: sessionsStatus, refetch: sessionsRefetch } = useQuery({
+        queryKey: [`project_${identifier}_sessions`],
+        queryFn: async () => {
+            const res = await fetch(`${flow_constants.BACKEND_ENDPOINT}/sessions?project=${identifier}`, {
+                headers: { "X-API-KEY": `${api_key}` }
+            });
             return res === null || res === void 0 ? void 0 : res.json();
-        }, enabled: !!identifier });
+        },
+        enabled: !!identifier,
+        staleTime: QUERY_STALE_TIME,
+        gcTime: QUERY_CACHE_TIME
+    });
+    // Optimized session lookup - compute once, use many times
+    const sessionsByNodeId = useMemo(() => {
+        if (!(sessions === null || sessions === void 0 ? void 0 : sessions.results))
+            return {};
+        return sessions.results.reduce((acc, session) => {
+            if (!acc[session.node_id]) {
+                acc[session.node_id] = [];
+            }
+            acc[session.node_id].push(session);
+            return acc;
+        }, {});
+    }, [sessions === null || sessions === void 0 ? void 0 : sessions.results]);
     ////////////////// Nodes Management (React Flow) /////////////////////////////
-    const CustomSmoothstepEdge = ({ data, ...props }) => {
+    const CustomSmoothstepEdge = memo(({ data, ...props }) => {
         return _jsx(SmoothStepEdge, { ...props, data: data, style: { strokeWidth: 2 } });
-    };
+    });
+    // Optimized node types with memoized session lookup
     const nodeTypes = useMemo(() => ({
-        gNode: (props) => { var _a; return (_jsx(GNode, { ...props, data: { ...props.data, functions: functions === null || functions === void 0 ? void 0 : functions.results, sessions: ((_a = sessions === null || sessions === void 0 ? void 0 : sessions.results) === null || _a === void 0 ? void 0 : _a.filter((session) => session.node_id === props.id)) || [] } })); },
-        fNode: (props) => { var _a; return (_jsx(FNode, { ...props, data: { ...props.data, functions: functions === null || functions === void 0 ? void 0 : functions.results, sessions: ((_a = sessions === null || sessions === void 0 ? void 0 : sessions.results) === null || _a === void 0 ? void 0 : _a.filter((session) => session.node_id === props.id)) || [] } })); }
-    }), [project === null || project === void 0 ? void 0 : project.identifier, functions]);
-    const edgeTypes = useMemo(() => ({ default: memo((props) => (_jsx(CustomSmoothstepEdge, { ...props, deletable: true }))) }), []);
+        gNode: (props) => (_jsx(GNode, { ...props, data: {
+                ...props.data,
+                functions: functions === null || functions === void 0 ? void 0 : functions.results,
+                sessions: sessionsByNodeId[props.id] || []
+            } })),
+        fNode: (props) => (_jsx(FNode, { ...props, data: {
+                ...props.data,
+                functions: functions === null || functions === void 0 ? void 0 : functions.results,
+                sessions: sessionsByNodeId[props.id] || []
+            } }))
+    }), [functions === null || functions === void 0 ? void 0 : functions.results, sessionsByNodeId]);
+    const edgeTypes = useMemo(() => ({
+        default: memo((props) => (_jsx(CustomSmoothstepEdge, { ...props, deletable: true })))
+    }), []);
     const [nodes, setNodes, onNodesChange] = useNodesState((project === null || project === void 0 ? void 0 : project.nodes) || []);
     const [edges, setEdges, onEdgesChange] = useEdgesState((project === null || project === void 0 ? void 0 : project.edges) || []);
     const [rfInstance, setRfInstance] = useState(null);
-    const [saving, setSaving] = useState(false);
     const { setViewport, screenToFlowPosition, getNodes, getEdges } = useReactFlow();
     const isReconnectingRef = useRef(false);
-    const [currentState, setCurrentState] = useState(null);
-    const [history, setHistory] = useState([]);
-    const [historyIndex, setHistoryIndex] = useState(0);
+    // Custom hooks
+    const { addToHistory, undo, redo, historyIndex, historySize } = useFlowHistory();
+    const { performSave, saveWithHistory, saving } = useAutoSave(rfInstance, identifier, api_key, nodes, edges, addToHistory);
+    const { showContextMenu, contextMenuPosition, handleContextMenu, setShowContextMenu } = useContextMenu();
     // Key Presses
     const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
     const cmdAndZPressed = useKeyPress(['Meta+z', 'Strg+z']);
     const cmdAndYPressed = useKeyPress(['Meta+y', 'Strg+y']);
     ////////////// onMount and Initial Load //////////////
     useEffect(() => {
+        // Component initialization logic can go here
     }, []);
     useEffect(() => {
         var _a, _b, _c;
         if (project === null || project === void 0 ? void 0 : project.flow_draft) {
             const { x = 0, y = 0, zoom = 1 } = ((_a = project === null || project === void 0 ? void 0 : project.flow_draft) === null || _a === void 0 ? void 0 : _a.viewport) || {};
-            // const updatedNodes = project?.flow_draft?.nodes?.map((val: any) => {
-            //   return { ...val, data: { ...val.data, 
-            //    },};
-            // }) || [];
             setNodes(((_b = project === null || project === void 0 ? void 0 : project.flow_draft) === null || _b === void 0 ? void 0 : _b.nodes) || []);
             setEdges(((_c = project === null || project === void 0 ? void 0 : project.flow_draft) === null || _c === void 0 ? void 0 : _c.edges) || []);
             setViewport({ x, y, zoom });
         }
-    }, [project]);
+    }, [project, setNodes, setEdges, setViewport]);
     useEffect(() => {
-        setEdges((eds) => eds.map((edge) => ({ ...edge, animated: stateType === 'sessions', })));
+        setEdges((eds) => eds.map((edge) => ({
+            ...edge,
+            animated: stateType === 'sessions'
+        })));
     }, [stateType, setEdges]);
     //////////////////////////// Connections /////////////////////////////////
     const onConnect = useCallback((connection) => {
@@ -86,7 +295,6 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
             // Generate a unique ID for the new edge
             const newEdgeId = `e${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}`;
             // Add the new connection with the unique ID
-            // console.log(`on connect edge: ${connection}`)
             return addEdge({ ...connection, id: newEdgeId }, filteredEdges);
         });
     }, [setEdges]);
@@ -94,7 +302,6 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
         // isReconnectingRef.current = false;
     }, []);
     const onConnectEnd = useCallback((event, connectionState) => {
-        // const reactFlowWrapper = document.querySelector('.react-flow'); // or your actual wrapper class
         if (!connectionState.isValid && !connectionState.toNode) {
             if (!connectionState.toNode && !isReconnectingRef.current) {
                 const { clientX, clientY } = 'changedTouches' in event ? event.changedTouches[0] : event;
@@ -151,7 +358,7 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
     }, []);
     const onEdgesDelete = useCallback((edgesToDelete) => {
         setEdges((eds) => eds.filter((e) => !edgesToDelete.some((d) => d.id === e.id)));
-    }, []);
+    }, [setEdges]);
     const onReconnect = useCallback((oldEdge, newConnection) => {
         if (!newConnection.target) {
             // If no target, remove the edge
@@ -171,86 +378,41 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
         isReconnectingRef.current = false;
     }, [setEdges]);
     ///////////////////////////////Save//////////////////////////////////////////
-    const onSave = useCallback(async () => {
-        if (rfInstance) {
-            setSaving(true);
-            const flow = rfInstance.toObject();
-            // alert(JSON.stringify(flow))
-            if (!identifier)
-                return;
-            try {
-                const response = await fetch(`${process.env.BACKEND_ENDPOINT}/projects/${identifier}`, { method: 'PATCH', headers: { "X-API-KEY": `${api_key}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ flow_draft: flow }) });
-                if (!response.ok) {
-                    setSaving(false);
-                    // throw new Error('Failed to save flow draft');
-                }
-                setSaving(false);
-                // const result = await response.json();
-                // console.log('Save successful:', result);
-            }
-            catch (error) {
-                setSaving(false);
-                console.error('Error saving nodes and edges:', error);
-            }
-        }
-    }, [rfInstance]);
+    const onSave = useCallback(() => {
+        performSave();
+    }, [performSave]);
     useEffect(() => {
         if (cmdAndSPressed) {
             onSave();
         }
     }, [cmdAndSPressed, onSave]);
     ///////////////// Undo and Redo ///////////////////////
-    const handleChange = (newState) => {
-        // console.log('handleChange', newState);
-        if (historyIndex < history.length - 1) {
-            setHistory((prevHistory) => prevHistory.slice(0, historyIndex + 1));
-        }
-        // Add new state to history
-        setHistory((prevHistory) => [...prevHistory, newState]);
-        setHistoryIndex((prevIndex) => prevIndex + 1);
-        setCurrentState(newState);
-    };
-    // Undo function
-    const undo = () => {
-        if (historyIndex > 0) {
-            const prevIndex = historyIndex - 1;
-            setHistoryIndex(prevIndex);
-            setCurrentState(history[prevIndex]);
-            setNodes(history[prevIndex].nodes);
-            setEdges(history[prevIndex].edges);
-            setViewport(history[prevIndex].viewport);
+    const handleUndo = useCallback(() => {
+        const prevState = undo();
+        if (prevState) {
+            setNodes(prevState.nodes);
+            setEdges(prevState.edges);
+            setViewport(prevState.viewport);
         }
-    };
-    // Redo function
-    const redo = () => {
-        if (historyIndex < history.length - 1) {
-            const nextIndex = historyIndex + 1;
-            setHistoryIndex(nextIndex);
-            setCurrentState(history[nextIndex]);
-            setNodes(history[nextIndex].nodes);
-            setEdges(history[nextIndex].edges);
-            setViewport(history[nextIndex].viewport);
+    }, [undo, setNodes, setEdges, setViewport]);
+    const handleRedo = useCallback(() => {
+        const nextState = redo();
+        if (nextState) {
+            setNodes(nextState.nodes);
+            setEdges(nextState.edges);
+            setViewport(nextState.viewport);
         }
-    };
+    }, [redo, setNodes, setEdges, setViewport]);
     useEffect(() => {
         if (cmdAndZPressed) {
-            undo();
+            handleUndo();
         }
         if (cmdAndYPressed) {
-            redo();
+            handleRedo();
         }
-    }, [cmdAndZPressed, cmdAndYPressed]);
+    }, [cmdAndZPressed, cmdAndYPressed, handleUndo, handleRedo]);
     ////////////////// For Context Menu /////////////////////////////
-    const [showContextMenu, setShowContextMenu] = useState(false);
-    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
-    const handleContextMenu = (event) => {
-        event.preventDefault();
-        const clickX = event.clientX;
-        const clickY = event.clientY;
-        setContextMenuPosition({ x: clickX, y: clickY });
-        setShowContextMenu(true);
-    };
-    const createNode = (type) => {
+    const createNode = useCallback((type) => {
         if ((contextMenuPosition === null || contextMenuPosition === void 0 ? void 0 : contextMenuPosition.x) != null && (contextMenuPosition === null || contextMenuPosition === void 0 ? void 0 : contextMenuPosition.y) != null) {
             setNodes((prevNodes) => {
                 const newId = `node-${uuidv4()}`;
@@ -261,32 +423,37 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
                 while (existingLabels.has(newLabel)) {
                     newLabel = `${type}_label_${counter++}`;
                 }
+                const template = type === 'function' ? NODE_TEMPLATES.function : NODE_TEMPLATES.default;
                 return [
                     ...prevNodes,
                     {
                         id: newId,
-                        type: type === 'function' ? 'fNode' : 'gNode',
+                        type: template.type,
                         position: { x: contextMenuPosition.x, y: contextMenuPosition.y },
-                        data: type === 'function'
-                            ? { label: newLabel, function: '' }
-                            : { label: newLabel, message: '', type, response: { validation: 'alpha-numeric', source: 'manual', inputs: [{ id: 1 }] } }
+                        data: {
+                            ...template.data,
+                            label: newLabel,
+                            ...(type === 'function' ? { function: '' } : {
+                                message: '',
+                                type,
+                                response: {
+                                    validation: 'alpha-numeric',
+                                    source: 'manual',
+                                    inputs: [{ id: 1 }]
+                                }
+                            })
+                        }
                     }
                 ];
             });
-            // Reset context menu position to avoid reusing the same position
-            setContextMenuPosition({ x: 0, y: 0 });
         }
-    };
+    }, [contextMenuPosition, setNodes]);
     //////////////////// Auto Save //////////////////
     useEffect(() => {
-        // Only save if there's an rfInstance and identifier
-        if (rfInstance && identifier) {
-            // Add a small debounce to prevent too frequent saves
-            const timer = setTimeout(() => { onSave(); }, 1000); // 1 second debounce
-            handleChange({ nodes, edges, viewport: rfInstance.getViewport() });
-            return () => clearTimeout(timer);
+        if (rfInstance && identifier && (nodes.length > 0 || edges.length > 0)) {
+            saveWithHistory();
         }
-    }, [nodes, edges]);
+    }, [nodes, edges, rfInstance, identifier, saveWithHistory]);
     ///////////////// Delete Key Code ////////////////
     const onSelectionChange = useCallback(({ nodes, edges }) => {
         // console.log('Selected nodes:', nodes)
@@ -302,8 +469,6 @@ export default function StudioPane({ api_key, projectsRefetch, identifier, provi
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [setNodes, setEdges]);
-    return (_jsxs(Box, { position: 'absolute', top: '0', right: '0', bottom: '0px', left: '0', style: {}, children: [_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onSelectionChange: onSelectionChange, onConnectEnd: onConnectEnd, onConnectStart: onConnectStart, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onInit: setRfInstance, snapToGrid: true, fitView: true, minZoom: 0.1, maxZoom: 3, colorMode: appTheme, onPaneContextMenu: handleContextMenu, deleteKeyCode: null, 
-                // viewport={project?.flow_draft?.viewport}
-                attributionPosition: "bottom-right", children: [_jsx(Controls, {}), _jsx(Background, { gap: 12, size: 1 }), _jsxs(Panel, { position: "top-center", children: [" ", _jsx(TopCenterPanel, { projectId: identifier })] }), _jsxs(Panel, { position: "top-left", children: [" ", _jsx(TopLeftPanel, { api_key: api_key, projectId: identifier, createNode: createNode, onSave: onSave, saving: saving, rfInstance: rfInstance, redo: redo, undo: undo, historyIndex: historyIndex })] }), _jsxs(Panel, { position: "top-right", children: [" ", _jsx(TopRightPanel, { api_key: api_key, projectId: identifier, createNode: createNode, onSave: onSave, saving: saving, rfInstance: rfInstance })] })] }), _jsx(AppAnalytics, { api_key: api_key, project: project, sessions: sessions, sessionsStatus: sessionsStatus, refetch: sessionsRefetch }), _jsx(AppSettings, { api_key: api_key, project: project, projectsRefetch: projectsRefetch, providers: providers, provider: provider, triggers: triggers, triggersRefetch: triggersRefetch, functions: functions, functionsRefetch: functionsRefetch, envs: envs, envsRefetch: envsRefetch }), _jsx(ContextMenu, { api_key: api_key, open: showContextMenu, setOpen: setShowContextMenu, createNode: createNode, menuPosition: contextMenuPosition })] }));
+    return (_jsxs(Box, { position: 'absolute', top: '0', right: '0', bottom: '0px', left: '0', style: {}, children: [_jsxs(ReactFlow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onSelectionChange: onSelectionChange, onConnectEnd: onConnectEnd, onConnectStart: onConnectStart, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onInit: setRfInstance, snapToGrid: true, fitView: true, minZoom: 0.1, maxZoom: 3, colorMode: theme, onPaneContextMenu: handleContextMenu, deleteKeyCode: null, attributionPosition: "bottom-right", children: [_jsx(Controls, {}), _jsx(Background, { gap: 12, size: 1 }), _jsx(Panel, { position: "top-center", children: _jsx(TopCenterPanel, { projectId: identifier }) }), _jsx(Panel, { position: "top-left", children: _jsx(TopLeftPanel, { api_key: api_key, projectId: identifier, createNode: createNode, onSave: onSave, saving: saving, rfInstance: rfInstance, redo: handleRedo, undo: handleUndo, historyIndex: historyIndex }) }), _jsx(Panel, { position: "top-right", children: _jsx(TopRightPanel, { api_key: api_key, projectId: identifier, createNode: createNode, onSave: onSave, saving: saving, rfInstance: rfInstance }) })] }), _jsx(AppAnalytics, { api_key: api_key, project: project, sessions: sessions, sessionsStatus: sessionsStatus, refetch: sessionsRefetch }), _jsx(AppSettings, { api_key: api_key, project: project, projectsRefetch: projectsRefetch, providers: providers, provider: provider, triggers: triggers, triggersRefetch: triggersRefetch, functions: functions, functionsRefetch: functionsRefetch, envs: envs, envsRefetch: envsRefetch }), _jsx(ContextMenu, { api_key: api_key, open: showContextMenu, setOpen: setShowContextMenu, createNode: createNode, menuPosition: contextMenuPosition })] }));
 }
 //# sourceMappingURL=studio_pane.js.map