@antscorp/antsomi-ui 2.0.102 → 2.0.104

package/es/components/organism/SQLGeneration/integrations/AceEditor/useEnhancePlaceholder.d.ts

@@ -0,0 +1,10 @@
+import type { IAceEditor } from 'react-ace/lib/types';
+type Params = {
+    triggerTitle?: string;
+    maxRetries?: number;
+    baseDelay?: number;
+};
+export declare const useEnhancePlaceholder: (params?: Params) => {
+    setAceEditor: (editor: IAceEditor) => void;
+};
+export {};

package/es/components/organism/SQLGeneration/integrations/AceEditor/useEnhancePlaceholder.js

@@ -0,0 +1,172 @@
+import { useCallback, useRef, useEffect } from 'react';
+import { useUnmount } from '@antscorp/antsomi-ui/es/hooks';
+import { useSQLGenerationStore } from '../../store';
+export const useEnhancePlaceholder = (params) => {
+    const { triggerTitle = 'generate SQL with AI', maxRetries = 5, baseDelay = 100 } = params || {};
+    const timeoutRef = useRef();
+    const mutationObserverRef = useRef(null);
+    const editorRef = useRef(null);
+    const placeholderRef = useRef(null);
+    const triggerRef = useRef(null);
+    const retryCountRef = useRef(0);
+    const isDestroyedRef = useRef(false);
+    const setModalSqlGenerationOpen = useSQLGenerationStore(state => state.setIsOpen);
+    const syncPlaceholderEl = useCallback((editor) => {
+        if (isDestroyedRef.current)
+            return false;
+        const selectedEl = editor.renderer.container.querySelector('.ace_placeholder');
+        if (selectedEl && selectedEl instanceof HTMLDivElement) {
+            placeholderRef.current = selectedEl;
+            return true;
+        }
+        return false;
+    }, []);
+    const waitForPlaceholder = useCallback((editor, retryCount = 0) => new Promise(resolve => {
+        if (isDestroyedRef.current) {
+            resolve(null);
+            return;
+        }
+        // Try to find placeholder immediately
+        if (syncPlaceholderEl(editor)) {
+            resolve(placeholderRef.current);
+            return;
+        }
+        // If max retries reached, resolve with null
+        if (retryCount >= maxRetries) {
+            // eslint-disable-next-line no-console
+            console.warn(`AceEditor placeholder not found after ${maxRetries} retries`);
+            resolve(null);
+            return;
+        }
+        // Use exponential backoff: baseDelay * 2^retryCount
+        const delay = baseDelay * 2 ** retryCount;
+        timeoutRef.current = setTimeout(() => {
+            if (isDestroyedRef.current) {
+                resolve(null);
+                return;
+            }
+            waitForPlaceholder(editor, retryCount + 1).then(resolve);
+        }, delay);
+    }), [syncPlaceholderEl, maxRetries, baseDelay]);
+    const updatePlaceholderVisibility = useCallback(async (forceWait = false) => {
+        const editor = editorRef.current;
+        if (!editor || isDestroyedRef.current)
+            return;
+        // If placeholder not found and we need to wait for it
+        if (!placeholderRef.current || forceWait) {
+            clearTimeout(timeoutRef.current);
+            const placeholder = await waitForPlaceholder(editor, 0);
+            if (!placeholder || isDestroyedRef.current)
+                return;
+        }
+        if (!placeholderRef.current)
+            return;
+        const content = editor.session.getValue();
+        const isEmpty = content.length === 0;
+        const appendTriggerEl = (placeholderEl) => {
+            // Avoid duplicate triggers
+            if (triggerRef.current && placeholderEl.contains(triggerRef.current)) {
+                return;
+            }
+            let triggerEl;
+            if (triggerRef.current) {
+                triggerEl = triggerRef.current;
+            }
+            else {
+                triggerEl = document.createElement('span');
+                triggerRef.current = triggerEl;
+            }
+            triggerEl.classList.add('ace-sqlgen-placeholder');
+            triggerEl.innerHTML = ` or <u class='trigger-title'>${triggerTitle}</u>`;
+            triggerEl.addEventListener('click', () => {
+                setModalSqlGenerationOpen(true);
+            });
+            placeholderEl.appendChild(triggerEl);
+        };
+        if (isEmpty && placeholderRef.current) {
+            appendTriggerEl(placeholderRef.current);
+        }
+        if (!isEmpty && triggerRef.current) {
+            triggerRef.current.remove();
+            triggerRef.current = null;
+        }
+    }, [setModalSqlGenerationOpen, triggerTitle, waitForPlaceholder]);
+    // Setup MutationObserver to watch for DOM changes
+    const setupMutationObserver = useCallback((editor) => {
+        if (mutationObserverRef.current) {
+            mutationObserverRef.current.disconnect();
+        }
+        mutationObserverRef.current = new MutationObserver(mutations => {
+            if (isDestroyedRef.current)
+                return;
+            let shouldUpdate = false;
+            mutations.forEach(mutation => {
+                // Check if placeholder-related nodes were added/removed
+                if (mutation.type === 'childList') {
+                    const addedNodes = Array.from(mutation.addedNodes);
+                    const removedNodes = Array.from(mutation.removedNodes);
+                    const hasPlaceholderChanges = [...addedNodes, ...removedNodes].some(node => node instanceof Element &&
+                        (node.classList?.contains('ace_placeholder') ||
+                            node.querySelector?.('.ace_placeholder')));
+                    if (hasPlaceholderChanges) {
+                        shouldUpdate = true;
+                    }
+                }
+            });
+            if (shouldUpdate) {
+                // Small delay to ensure DOM is stable
+                setTimeout(() => {
+                    if (!isDestroyedRef.current) {
+                        updatePlaceholderVisibility(true);
+                    }
+                }, 50);
+            }
+        });
+        // Observe the editor container for changes
+        mutationObserverRef.current.observe(editor.renderer.container, {
+            childList: true,
+            subtree: true,
+        });
+    }, [updatePlaceholderVisibility]);
+    const setAceEditorRef = useCallback((editor) => {
+        if (isDestroyedRef.current)
+            return;
+        editorRef.current = editor;
+        retryCountRef.current = 0;
+        // Setup mutation observer to watch for DOM changes
+        setupMutationObserver(editor);
+        // Initial placeholder setup
+        updatePlaceholderVisibility(true);
+        const eventCb = () => {
+            if (!isDestroyedRef.current) {
+                updatePlaceholderVisibility();
+            }
+        };
+        editor.on('change', eventCb);
+        editor.on('blur', eventCb);
+        editor.on('focus', eventCb);
+    }, [updatePlaceholderVisibility, setupMutationObserver]);
+    // Cleanup function
+    const cleanup = useCallback(() => {
+        isDestroyedRef.current = true;
+        clearTimeout(timeoutRef.current);
+        if (mutationObserverRef.current) {
+            mutationObserverRef.current.disconnect();
+            mutationObserverRef.current = null;
+        }
+        if (triggerRef.current) {
+            triggerRef.current.remove();
+            triggerRef.current = null;
+        }
+        placeholderRef.current = null;
+        editorRef.current = null;
+    }, []);
+    useUnmount(cleanup);
+    // Also cleanup on component re-render if needed
+    useEffect(() => () => {
+        if (isDestroyedRef.current) {
+            cleanup();
+        }
+    }, [cleanup]);
+    return { setAceEditor: setAceEditorRef };
+};

package/es/components/organism/SQLGeneration/integrations/AceEditor/useInsertQuery.d.ts

@@ -0,0 +1,8 @@
+import type { IAceEditor } from 'react-ace/lib/types';
+type Params = {
+    onInsertQueryDone?: () => void;
+};
+export declare const useInsertQuery: (params?: Params) => {
+    setAceEditor: (editor: IAceEditor) => void;
+};
+export {};

package/es/components/organism/SQLGeneration/integrations/AceEditor/useInsertQuery.js

@@ -0,0 +1,21 @@
+import { useCallback, useRef } from 'react';
+import { useSQLGenerationStore } from '../../store';
+export const useInsertQuery = (params) => {
+    const { onInsertQueryDone } = params || {};
+    const editorRef = useRef(null);
+    const setState = useSQLGenerationStore(s => s.setState);
+    const setAceEditorRef = useCallback((editor) => {
+        editorRef.current = editor;
+        setState({
+            onInsertSQL: sql => {
+                const content = editor.session.getValue();
+                const isEmpty = content.length === 0;
+                if (isEmpty) {
+                    editor.insert(sql);
+                    onInsertQueryDone?.();
+                }
+            },
+        });
+    }, [setState, onInsertQueryDone]);
+    return { setAceEditor: setAceEditorRef };
+};

package/es/components/organism/SQLGeneration/integrations/AntsomiAI/index.d.ts

@@ -0,0 +1 @@
+export { useAntsomiAI } from './useAntsomiAI';

package/es/components/organism/SQLGeneration/integrations/AntsomiAI/index.js

@@ -0,0 +1 @@
+export { useAntsomiAI } from './useAntsomiAI';

package/es/components/organism/SQLGeneration/integrations/AntsomiAI/useAntsomiAI.d.ts

@@ -0,0 +1 @@
+export declare const useAntsomiAI: () => void;

package/es/components/organism/SQLGeneration/integrations/AntsomiAI/useAntsomiAI.js

@@ -0,0 +1,35 @@
+import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+import { useSQLGenerationStore } from '../../store';
+import { AntsomiAIQueries } from '@antscorp/antsomi-ui/es/queries/AI';
+import { useEffect } from 'react';
+export const useAntsomiAI = () => {
+    const setState = useSQLGenerationStore(s => s.setState);
+    const { appConfig } = useAppConfigContext();
+    const { generateSQLAsync } = AntsomiAIQueries.useSqlGeneration({
+        env: appConfig.env || 'production',
+        auth: {
+            token: appConfig.auth?.token || '',
+            userId: +(appConfig.auth?.userId || 0),
+            accountId: +(appConfig.auth?.accountId || 0),
+            portalId: +(appConfig.auth?.portalId || 0),
+        },
+    });
+    useEffect(() => {
+        setState({
+            onGenerateSQL: async (prompt, context) => {
+                const data = await generateSQLAsync({
+                    prompt,
+                    selected_tables: context.selectedTables,
+                    history: {
+                        pass_turns: context.history.pastTurns,
+                    },
+                });
+                const generationResult = {
+                    ...data,
+                    sqlSuggestion: data.sql_suggestion,
+                };
+                return generationResult;
+            },
+        });
+    }, [generateSQLAsync, setState]);
+};

package/es/components/organism/SQLGeneration/integrations/AntsomiSqlWS/index.d.ts

@@ -0,0 +1 @@
+export { useAntsomiSqlWS } from './useAntsomiSqlWS';

package/es/components/organism/SQLGeneration/integrations/AntsomiSqlWS/index.js

@@ -0,0 +1 @@
+export { useAntsomiSqlWS } from './useAntsomiSqlWS';

package/es/components/organism/SQLGeneration/integrations/AntsomiSqlWS/useAntsomiSqlWS.d.ts

@@ -0,0 +1,7 @@
+type Params = {
+    triggerTitle: string;
+};
+export declare const useAntsomiSqlWS: (params?: Params) => {
+    setAceEditor: (editor: import("react-ace/lib/types").IAceEditor) => void;
+};
+export {};

package/es/components/organism/SQLGeneration/integrations/AntsomiSqlWS/useAntsomiSqlWS.js

@@ -0,0 +1,10 @@
+import { useAceEditor } from '../AceEditor/useAceEditor';
+import { useAntsomiAI } from '../AntsomiAI';
+export const useAntsomiSqlWS = (params) => {
+    const { triggerTitle } = params || {};
+    const { setAceEditor } = useAceEditor({
+        triggerTitle,
+    });
+    useAntsomiAI();
+    return { setAceEditor };
+};