@antscorp/antsomi-ui 2.0.103 → 2.0.104

package/es/components/organism/SQLGeneration/store/store.js

@@ -0,0 +1,309 @@
+import { createStore } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import { devtools } from 'zustand/middleware';
+import { selectAllPreviousResults, selectCurrentResult, selectCurrentResultIndex, selectCurrentResultSettings, selectSelctedTableSources, } from '../selectors';
+import { pick } from 'lodash';
+import { DEFAULT_RESULT_SETTINGS } from '../constants';
+import produce from 'immer';
+import { createContext } from 'react';
+export const createSQLGenerationStore = (initProps) => {
+    const DEFAULT_PROPS = {
+        abortControllers: {},
+        isOpen: false,
+        isLoading: false,
+        isEditTableSourcesOpen: false,
+        isSummaryLoading: false,
+        isEditingPrompt: false,
+        isRefining: false,
+        currentResultKey: null,
+        prompt: '',
+        refinePrompt: '',
+        results: {
+            byKey: {},
+            byKeySettings: {},
+            allKeys: [],
+        },
+        tableSources: [],
+        searchQuery: '',
+        error: null,
+        generateSQLError: null,
+        refineSQLError: null,
+        querySummaryError: null,
+        ...initProps,
+    };
+    return createStore()(devtools(immer((set, get, store) => ({
+        ...DEFAULT_PROPS,
+        setIsOpen: isOpen => {
+            set({ isOpen });
+            get().onOpenChange?.(isOpen);
+        },
+        setIsLoading: isLoading => set({ isLoading }),
+        setIsSummaryLoading: isSummaryLoading => set({ isSummaryLoading }),
+        setIsEditTableSourcesOpen: isEditTableSourcesOpen => set({ isEditTableSourcesOpen }),
+        setIsEditingPrompt: isEditingPrompt => set({ isEditingPrompt }),
+        setCurrentResultKey: newKey => {
+            if (newKey !== get().currentResultKey) {
+                get().abortQuerySummary();
+                get().abortGenerateSQL();
+                set({ isEditingPrompt: false });
+            }
+            set(state => {
+                state.currentResultKey = newKey;
+            });
+        },
+        setPrompt: prompt => set({ prompt }),
+        setResults: results => set({ results }),
+        setTableSources: tableSources => set({ tableSources }),
+        setSearchQuery: searchQuery => set({ searchQuery }),
+        generateSQL: async () => {
+            const { onGenerateSQL, prompt, setIsLoading, setGenerateSQLError } = get();
+            if (!onGenerateSQL)
+                return;
+            const selectedTables = selectSelctedTableSources(get());
+            const pastTurns = selectAllPreviousResults(get());
+            const controller = new AbortController();
+            // Clear previous errors
+            setGenerateSQLError(null);
+            setIsLoading(true);
+            set(state => {
+                state.abortControllers.generateSQL = controller;
+            });
+            try {
+                const sqlResult = await onGenerateSQL(prompt, {
+                    selectedTables,
+                    history: { pastTurns },
+                }, {
+                    signal: controller.signal,
+                });
+                const currentResultIndex = selectCurrentResultIndex(get());
+                const prevCurrentResultSettings = selectCurrentResultSettings(get());
+                if (currentResultIndex !== -1) {
+                    // remove from current results and insert new result
+                    set(state => {
+                        state.results.allKeys.splice(currentResultIndex);
+                        state.results.byKey = pick(state.results.byKey, state.results.allKeys);
+                        state.results.byKeySettings = pick(state.results.byKeySettings, state.results.allKeys);
+                    });
+                }
+                set(state => {
+                    state.prompt = '';
+                    state.results.allKeys.push(sqlResult.key);
+                    state.results.byKey[sqlResult.key] = sqlResult;
+                    state.results.byKeySettings[sqlResult.key] =
+                        prevCurrentResultSettings || DEFAULT_RESULT_SETTINGS;
+                    state.currentResultKey = sqlResult.key;
+                });
+            }
+            catch (error) {
+                if (controller.signal.aborted)
+                    return;
+                // eslint-disable-next-line no-console
+                console.error('Failed to generate SQL:', error);
+                // Set error state
+                const errorMessage = error instanceof Error ? error.message : 'Failed to generate SQL';
+                setGenerateSQLError({
+                    message: errorMessage,
+                    code: 'GENERATE_SQL_ERROR',
+                    timestamp: Date.now(),
+                    operation: 'generateSQL',
+                });
+            }
+            finally {
+                setIsLoading(false);
+                set(state => {
+                    state.abortControllers.generateSQL = undefined;
+                });
+            }
+        },
+        insertSQL: () => {
+            const { onInsertSQL, results, currentResultKey } = get();
+            if (!currentResultKey)
+                return;
+            const currentSql = results.byKey[currentResultKey].sqlSuggestion;
+            if (onInsertSQL && currentSql) {
+                onInsertSQL(currentSql);
+            }
+        },
+        querySummary: async () => {
+            const { onQuerySummary, results, currentResultKey, setIsSummaryLoading, setQuerySummaryError, } = get();
+            const controller = new AbortController();
+            try {
+                if (!currentResultKey)
+                    return;
+                const currentSql = results.byKey[currentResultKey].sqlSuggestion;
+                if (!onQuerySummary || !currentSql)
+                    return;
+                // Clear previous errors
+                setQuerySummaryError(null);
+                setIsSummaryLoading(true);
+                set(state => {
+                    state.abortControllers.querySummary = controller;
+                });
+                const summarySqlResult = await onQuerySummary(currentSql, {
+                    signal: controller.signal,
+                });
+                set(state => {
+                    const currentResult = state.results.byKey[currentResultKey];
+                    if (currentResult) {
+                        currentResult.summary = summarySqlResult;
+                    }
+                });
+            }
+            catch (error) {
+                if (controller.signal.aborted)
+                    return;
+                // eslint-disable-next-line no-console
+                console.error('Failed to generate query summary:', error);
+                // Set error state
+                const errorMessage = error instanceof Error ? error.message : 'Failed to generate query summary';
+                setQuerySummaryError({
+                    message: errorMessage,
+                    code: 'QUERY_SUMMARY_ERROR',
+                    timestamp: Date.now(),
+                    operation: 'querySummary',
+                });
+            }
+            finally {
+                setIsSummaryLoading(false);
+                set(state => {
+                    state.abortControllers.querySummary = undefined;
+                });
+            }
+        },
+        abortGenerateSQL: () => {
+            const { abortControllers, setIsLoading } = get();
+            abortControllers.generateSQL?.abort();
+            setIsLoading(false);
+        },
+        abortQuerySummary: () => {
+            const { abortControllers, setIsSummaryLoading } = get();
+            abortControllers.querySummary?.abort();
+            setIsSummaryLoading(false);
+        },
+        abortRefineSQL: () => {
+            const { abortControllers, setIsRefining } = get();
+            abortControllers.refineSQL?.abort();
+            setIsRefining(false);
+        },
+        refineSQL: async () => {
+            const { setIsRefining, setRefineSQLError } = get();
+            const onRefineSQL = get().onRefineSQL || get().onGenerateSQL;
+            const currentResult = selectCurrentResult(get());
+            const previousResults = selectAllPreviousResults(get());
+            if (!onRefineSQL || !currentResult)
+                return;
+            const pastTurns = [...previousResults, currentResult];
+            const controller = new AbortController();
+            try {
+                // Clear previous errors
+                setRefineSQLError(null);
+                setIsRefining(true);
+                set(state => {
+                    state.abortControllers.refineSQL = controller;
+                    // update current result refine prompt
+                    state.results.byKey[currentResult.key].refinePrompt = get().refinePrompt;
+                });
+                const refineResult = await onRefineSQL(get().refinePrompt, {
+                    selectedTables: selectSelctedTableSources(get()),
+                    history: { pastTurns },
+                }, {
+                    signal: controller.signal,
+                });
+                const currentResultIndex = selectCurrentResultIndex(get());
+                set(state => {
+                    // remove all results after current result
+                    state.results.allKeys.splice(currentResultIndex + 1);
+                    state.results.allKeys.push(refineResult.key);
+                    state.results.byKey = pick(state.results.byKey, state.results.allKeys);
+                    state.results.byKeySettings = pick(state.results.byKeySettings, state.results.allKeys);
+                    // update refine result
+                    state.results.byKey[refineResult.key] = refineResult;
+                    state.results.byKeySettings[refineResult.key] = DEFAULT_RESULT_SETTINGS;
+                    state.refinePrompt = '';
+                    state.currentResultKey = refineResult.key;
+                });
+            }
+            catch (error) {
+                if (controller.signal.aborted)
+                    return;
+                // eslint-disable-next-line no-console
+                console.error('Failed to refine SQL:', error);
+                // Set error state
+                const errorMessage = error instanceof Error ? error.message : 'Failed to refine SQL';
+                setRefineSQLError({
+                    message: errorMessage,
+                    code: 'REFINE_SQL_ERROR',
+                    timestamp: Date.now(),
+                    operation: 'refineSQL',
+                });
+            }
+            finally {
+                setIsRefining(false);
+                set(state => {
+                    state.abortControllers.refineSQL = undefined;
+                });
+            }
+        },
+        setRefinePrompt: refinePrompt => set({ refinePrompt }),
+        setIsRefining: isRefining => set({ isRefining }),
+        setCurrentResultSettings: updateFn => {
+            const { currentResultKey } = get();
+            if (!currentResultKey)
+                return;
+            set(state => {
+                const updated = produce(state.results.byKeySettings[currentResultKey], updateFn);
+                state.results.byKeySettings[currentResultKey] = updated;
+            });
+        },
+        // Error actions
+        setError: error => set({ error }),
+        setGenerateSQLError: generateSQLError => set({ generateSQLError }),
+        setRefineSQLError: refineSQLError => set({ refineSQLError }),
+        setQuerySummaryError: querySummaryError => set({ querySummaryError }),
+        clearErrors: () => set({
+            error: null,
+            generateSQLError: null,
+            refineSQLError: null,
+            querySummaryError: null,
+        }),
+        clearError: operation => {
+            switch (operation) {
+                case 'generateSQL':
+                    set({ generateSQLError: null });
+                    break;
+                case 'refineSQL':
+                    set({ refineSQLError: null });
+                    break;
+                case 'querySummary':
+                    set({ querySummaryError: null });
+                    break;
+                default:
+                    break;
+            }
+        },
+        // Retry actions
+        retryGenerateSQL: async () => {
+            const { generateSQL, clearError } = get();
+            clearError('generateSQL');
+            return generateSQL();
+        },
+        retryRefineSQL: async () => {
+            const { refineSQL, clearError } = get();
+            clearError('refineSQL');
+            return refineSQL();
+        },
+        retryQuerySummary: async () => {
+            const { querySummary, clearError } = get();
+            clearError('querySummary');
+            return querySummary();
+        },
+        setState: nextStateOrUpdater => set(nextStateOrUpdater),
+        reset: () => {
+            set(store.getInitialState());
+        },
+    })), {
+        name: 'SQLGenerationStore',
+        enabled: initProps?.env !== 'production',
+    }));
+};
+export const SQLGenerationContext = createContext(undefined);

package/es/components/organism/SQLGeneration/store/types.d.ts

@@ -0,0 +1,97 @@
+import { SQLGenerationContext, SQLGenerationResult, TableSource } from '../types';
+import { Draft } from 'immer';
+export interface SQLResultSettings {
+    showDiff: boolean;
+}
+export interface SQLResults {
+    byKey: Record<string, SQLGenerationResult>;
+    byKeySettings: Record<string, SQLResultSettings>;
+    allKeys: string[];
+}
+export interface SQLGenerationError {
+    message: string;
+    code?: string;
+    timestamp: number;
+    operation: 'generateSQL' | 'refineSQL' | 'querySummary';
+}
+export interface SQLGenerationState {
+    abortControllers: {
+        generateSQL?: AbortController;
+        querySummary?: AbortController;
+        refineSQL?: AbortController;
+    };
+    isOpen: boolean;
+    isLoading: boolean;
+    isRefining: boolean;
+    isSummaryLoading: boolean;
+    isEditTableSourcesOpen: boolean;
+    isEditingPrompt: boolean;
+    currentResultKey: string | null;
+    error: SQLGenerationError | null;
+    generateSQLError: SQLGenerationError | null;
+    refineSQLError: SQLGenerationError | null;
+    querySummaryError: SQLGenerationError | null;
+    prompt: string;
+    refinePrompt: string;
+    tableSources: TableSource[];
+    searchQuery: string;
+    results: SQLResults;
+    onGenerateSQL?: (prompt: string, context: SQLGenerationContext, options: {
+        signal: AbortSignal;
+    }) => Promise<SQLGenerationResult>;
+    onRefineSQL?: (refinePrompt: string, context: SQLGenerationContext, options: {
+        signal: AbortSignal;
+    }) => Promise<SQLGenerationResult>;
+    onInsertSQL?: (sql: string) => void;
+    onQuerySummary?: (sql: string, options: {
+        signal: AbortSignal;
+    }) => Promise<string>;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface SQLGenerationActions {
+    setState: (update: Partial<SQLGenerationState>) => void;
+    reset: () => void;
+    setIsOpen: (isOpen: boolean) => void;
+    setIsLoading: (isLoading: boolean) => void;
+    setIsSummaryLoading: (isLoading: boolean) => void;
+    setIsEditTableSourcesOpen: (isOpen: boolean) => void;
+    setIsEditingPrompt: (isEditing: boolean) => void;
+    setCurrentResultKey: (key: string) => void;
+    setPrompt: (prompt: string) => void;
+    setResults: (results: SQLResults) => void;
+    setTableSources: (sources: TableSource[]) => void;
+    setSearchQuery: (query: string) => void;
+    setRefinePrompt: (prompt: string) => void;
+    setIsRefining: (isRefining: boolean) => void;
+    setCurrentResultSettings: (updateFn: (draft: Draft<SQLResultSettings>) => void) => void;
+    setError: (error: SQLGenerationError | null) => void;
+    setGenerateSQLError: (error: SQLGenerationError | null) => void;
+    setRefineSQLError: (error: SQLGenerationError | null) => void;
+    setQuerySummaryError: (error: SQLGenerationError | null) => void;
+    clearErrors: () => void;
+    clearError: (operation: SQLGenerationError['operation']) => void;
+    generateSQL: () => Promise<void>;
+    insertSQL: () => void;
+    querySummary: () => Promise<void>;
+    refineSQL: () => Promise<void>;
+    abortGenerateSQL: () => void;
+    abortQuerySummary: () => void;
+    abortRefineSQL: () => void;
+    retryGenerateSQL: () => Promise<void>;
+    retryRefineSQL: () => Promise<void>;
+    retryQuerySummary: () => Promise<void>;
+}
+export type SQLGenerationStore = SQLGenerationState & SQLGenerationActions;
+export type SQLGenerationStoreInitialProps = {
+    env?: 'production' | 'staging' | 'development';
+    onGenerateSQL?: (prompt: string, context: SQLGenerationContext, options: {
+        signal: AbortSignal;
+    }) => Promise<SQLGenerationResult>;
+    onRefineSQL?: (refinePrompt: string, context: SQLGenerationContext, options: {
+        signal: AbortSignal;
+    }) => Promise<SQLGenerationResult>;
+    onInsertSQL?: (sql: string) => void;
+    onQuerySummary?: (sql: string, options: {
+        signal: AbortSignal;
+    }) => Promise<string>;
+};

package/es/components/organism/SQLGeneration/store/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/SQLGeneration/types.d.ts

@@ -0,0 +1,29 @@
+export interface TableSource {
+    id: string;
+    name: string;
+    dataset: string;
+    project: string;
+    selected: boolean;
+}
+export interface SQLGenerationResult {
+    key: string;
+    prompt: string;
+    sqlSuggestion: string;
+    summary?: string;
+    refinePrompt?: string;
+    explanation?: string;
+    processedDataSize?: string;
+    estimatedCost?: string;
+    queryComplexity?: 'simple' | 'medium' | 'complex';
+}
+export interface SQLGenerationContext {
+    selectedTables: TableSource[];
+    history: {
+        pastTurns: SQLGenerationResult[];
+    };
+}
+export interface SQLGenerationProps {
+    tableSources?: TableSource[];
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}

package/es/components/organism/SQLGeneration/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/index.d.ts

@@ -16,4 +16,5 @@ export * from './Login';
 export * from './BasicLogin';
 export * from './Filter';
 export { ActivityTimeline, type ActivityTimeLineProps } from './ActivityTimeline';
+export { SQLGeneration, SQLGenerationIntegrations, SQLGenerationProvider, useSQLGenerationStore, type SQLGenerationProps, type SQLGenerationProviderProps, } from './SQLGeneration';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.js

@@ -16,4 +16,5 @@ export * from './Login';
 export * from './BasicLogin';
 export * from './Filter';
 export { ActivityTimeline } from './ActivityTimeline';
+export { SQLGeneration, SQLGenerationIntegrations, SQLGenerationProvider, useSQLGenerationStore, } from './SQLGeneration';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/components/organism/index.scss

@@ -0,0 +1 @@
+@use './SQLGeneration';

package/es/components/template/TemplateListing/hooks/useTemplateListing.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-import { ResponseListing, TServiceAuth } from '@antscorp/antsomi-ui/es/types';
+import { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
 import { TCategoryItem, TCheckedCategories, TSelectTemplateAction, TTemplateItem } from '../types';
 import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
 import { TThumbnailCardId } from '../../../molecules/ThumbnailCard';
 import { InfiniteData } from '@tanstack/react-query';
-import { ObjectTemplate } from '@antscorp/antsomi-ui/es/models/ObjectTemplate';
 import { TemplateCategory } from '@antscorp/antsomi-ui/es/models/TemplateCategory';
 interface TemplateListingOptions {
     serviceAuth: TServiceAuth;
@@ -62,7 +61,7 @@ export declare const useTemplateListing: <T = undefined>(options: TemplateListin
     templateItems: (TTemplateItem | undefined)[];
     openCategoryKeys: string[];
     similarTemplates: (TTemplateItem | undefined)[];
-    templateDetail: ObjectTemplate | undefined;
+    templateDetail: any;
     checkedCategories: TCheckedCategories;
     selectTemplateAction: string | T | undefined;
     previewTemplateCategories: TCategoryItem[];
@@ -71,7 +70,7 @@ export declare const useTemplateListing: <T = undefined>(options: TemplateListin
     isLoadingTemplateList: boolean;
     isLoadingTemplateDetail: boolean;
     refetchCategoryList: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<ResponseListing<ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<any>, any>>;
     onChangeCheckedCategories: (checkedCategories: TCheckedCategories) => void;
     onChangeOpenCategoryKeys: (openKeys: string[]) => void;
     onRemoveObjectTemplate: (id: TThumbnailCardId) => void;

package/es/hooks/index.d.ts

@@ -26,4 +26,5 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useFocusManagement';
 export * from './useCountdown';

package/es/hooks/index.js

@@ -45,4 +45,5 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useFocusManagement';
 export * from './useCountdown';

package/es/hooks/useFocusManagement.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface FocusManagementOptions {
+    autoFocus?: boolean;
+    restoreFocus?: boolean;
+    trapFocus?: boolean;
+}
+export declare const useFocusManagement: (isOpen: boolean, options?: FocusManagementOptions) => {
+    containerRef: import("react").RefObject<HTMLDivElement>;
+};
+export declare const useComponentFocus: () => {
+    focusElement: (selector: string, delay?: number) => void;
+    focusFirstInput: (container?: HTMLElement, delay?: number) => void;
+    focusButton: (text: string, delay?: number) => void;
+};

package/es/hooks/useFocusManagement.js

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useCallback } from 'react';
+// Helper function to get all focusable elements
+const getFocusableElements = (container) => {
+    const focusableSelectors = [
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'textarea:not([disabled])',
+        'select:not([disabled])',
+        'a[href]',
+        '[tabindex]:not([tabindex="-1"])',
+        '[contenteditable="true"]',
+    ].join(', ');
+    const focusableEls = [];
+    Array.from(container.querySelectorAll(focusableSelectors)).forEach(element => {
+        if (!(element instanceof HTMLElement))
+            return false;
+        if (element.offsetWidth > 0 &&
+            element.offsetHeight > 0 &&
+            !element.hidden &&
+            window.getComputedStyle(element).visibility !== 'hidden') {
+            focusableEls.push(element);
+        }
+    });
+    return focusableEls;
+};
+export const useFocusManagement = (isOpen, options = {}) => {
+    const { autoFocus = true, restoreFocus = true, trapFocus = true } = options;
+    const containerRef = useRef(null);
+    const previousActiveElementRef = useRef(null);
+    // Store the previously focused element when modal opens
+    useEffect(() => {
+        if (isOpen && restoreFocus) {
+            const { activeElement } = document;
+            if (activeElement instanceof HTMLElement) {
+                previousActiveElementRef.current = activeElement;
+            }
+        }
+    }, [isOpen, restoreFocus]);
+    // Auto focus first focusable element when modal opens
+    useEffect(() => {
+        if (isOpen && autoFocus && containerRef.current) {
+            const firstFocusable = getFocusableElements(containerRef.current)[0];
+            if (firstFocusable) {
+                // Small delay to ensure modal is fully rendered
+                setTimeout(() => {
+                    firstFocusable.focus();
+                }, 100);
+            }
+        }
+    }, [isOpen, autoFocus]);
+    // Restore focus when modal closes
+    useEffect(() => {
+        if (!isOpen && restoreFocus && previousActiveElementRef.current) {
+            previousActiveElementRef.current.focus();
+            previousActiveElementRef.current = null;
+        }
+    }, [isOpen, restoreFocus]);
+    // Focus trap
+    const handleKeyDown = useCallback((event) => {
+        if (!isOpen || !trapFocus || !containerRef.current)
+            return;
+        if (event.key === 'Tab') {
+            const focusableElements = getFocusableElements(containerRef.current);
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            if (event.shiftKey) {
+                // Shift + Tab
+                if (document.activeElement === firstElement) {
+                    event.preventDefault();
+                    lastElement?.focus();
+                }
+            }
+            else {
+                // Tab
+                if (document.activeElement === lastElement) {
+                    event.preventDefault();
+                    firstElement?.focus();
+                }
+            }
+        }
+    }, [isOpen, trapFocus]);
+    useEffect(() => {
+        if (isOpen && trapFocus) {
+            document.addEventListener('keydown', handleKeyDown);
+            return () => {
+                document.removeEventListener('keydown', handleKeyDown);
+            };
+        }
+    }, [handleKeyDown, isOpen, trapFocus]);
+    return { containerRef };
+};
+export const useComponentFocus = () => {
+    const focusElement = useCallback((selector, delay = 0) => {
+        setTimeout(() => {
+            const element = document.querySelector(selector);
+            if (element instanceof HTMLElement) {
+                element.focus();
+            }
+        }, delay);
+    }, []);
+    const focusFirstInput = useCallback((container, delay = 0) => {
+        setTimeout(() => {
+            const targetContainer = container || document;
+            const firstInput = targetContainer.querySelector('input:not([disabled]), textarea:not([disabled])');
+            if (firstInput) {
+                firstInput.focus();
+            }
+        }, delay);
+    }, []);
+    const focusButton = useCallback((text, delay = 0) => {
+        setTimeout(() => {
+            const buttons = Array.from(document.querySelectorAll('button'));
+            const targetButton = buttons.find(button => button.textContent?.trim().toLowerCase() === text.toLowerCase());
+            if (targetButton) {
+                targetButton.focus();
+            }
+        }, delay);
+    }, []);
+    return {
+        focusElement,
+        focusFirstInput,
+        focusButton,
+    };
+};

package/es/locales/ja/google-sheet.json

@@ -971,7 +971,7 @@
     "_TAB_INFORMATION_FIELD": "情報フィールド",
     "_TAB_JOURNEY": "旅",
     "_TAB_METRIC": "メトリック",
-    "_TAB_MODEL_DIAGRAM": "図",
+    "_TAB_MODEL_DIAGRAM": "ダイアグラム",
     "_TAB_MODEL_FIELD": "フィールド",
     "_TAB_OBECT_REFERENCE": "オブジェクト参照",
     "_TAB_OBJECT_ATTRIBUTE": "属性",
@@ -2538,7 +2538,7 @@
     "_WEBPER_TEMP_OBJ_INLINE_5": "社会的証明の表示",
     "_WEBPER_TEMP_OBJ_INLINE_6": "教育コンテンツ",
     "_WEBPER_TEMP_OBJ_SLIDEIN_1": "リードマグネット",
-    "_WEBPER_TEMP_OBJ_SLIDEIN_2": "終了意図",
+    "_WEBPER_TEMP_OBJ_SLIDEIN_2": "終了の意図",
     "_WEBPER_TEMP_OBJ_SLIDEIN_3": "コンテンツティーザー",
     "_WEBPER_TEMP_OBJ_SLIDEIN_4": "アンケートと世論調査",
     "_WEBPER_TEMP_OBJ_SLIDEIN_5": "社会的証明の表示",