@antscorp/antsomi-ui 2.0.102 → 2.0.104

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

@@ -0,0 +1,382 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Button, Typography } from '../../../atoms';
+import { EditorScript } from '../../../molecules/EditorScript';
+import { Modal } from '../../../molecules/Modal';
+// Constants
+import { THEME } from '../../../../constants';
+import { Space } from 'antd';
+const { Text } = Typography;
+// SQLGenerationPopover styles
+export const PopoverContent = styled.div `
+  max-width: ${props => props.maxWidth || 800}px;
+  padding: 0;
+  border-radius: 8px;
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+`;
+export const PopoverBody = styled.div `
+  padding: 0 16px 16px;
+`;
+// SQLGenerationHeader styles
+export const HeaderContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+`;
+export const HeaderContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+export const HeaderTitle = styled(Text) `
+  &.antsomi-typography {
+    font-size: 16px;
+    font-weight: 500;
+    color: #202124;
+    margin: 0;
+  }
+`;
+export const CloseButton = styled(Button) `
+  border: none;
+  box-shadow: none;
+  padding: 4px;
+  min-width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+`;
+// SQLGenerationPrompt styles
+export const PromptSection = styled(Space) `
+  margin-bottom: 0px;
+`;
+export const PromptTextArea = styled.textarea `
+  width: 100%;
+  min-height: 72px;
+  max-height: 144px;
+  resize: none;
+  font-size: 14px;
+  line-height: 1.5;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+
+  &:focus {
+    border-color: ${THEME.token?.colorPrimary};
+    box-shadow: 0 0 0 2px rgba(0, 94, 184, 0.1);
+  }
+
+  &::placeholder {
+    color: ${THEME.token?.colorTextPlaceholder};
+  }
+
+  &:disabled {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+  }
+`;
+export const GenerateButtonContainer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+`;
+export const GenerateButton = styled(Button) `
+  border-radius: 6px;
+  font-weight: 500;
+`;
+// SQLGenerationResult styles
+export const ResultSection = styled.div `
+  margin-bottom: 16px;
+  min-height: 200px;
+`;
+export const LoadingContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  color: #666;
+  flex-direction: column;
+  gap: 12px;
+`;
+export const SQLCodeBlock = styled(EditorScript) `
+  padding: 0 12px;
+  background: #f1f3f4;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+`;
+export const ResultInfo = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #dbddde;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 4px 12px;
+`;
+export const PaginationIndicator = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+`;
+// SQLGenerationActions styles
+export const ActionsSection = styled.div `
+  border-top: 1px solid #f0f0f0;
+  padding-top: 12px;
+`;
+export const ActionButton = styled(Button) `
+  border-radius: 6px;
+  font-size: 13px;
+  height: 32px;
+  padding: 0 12px;
+
+  &.primary {
+    font-weight: 500;
+  }
+
+  &.with-icon {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+`;
+export const CautionLink = styled(Button) `
+  font-size: 13px;
+  height: 32px;
+  padding: 0 4px;
+  color: #1a73e8;
+  text-decoration: underline;
+  margin-left: auto;
+
+  &:hover {
+    color: #1557b0;
+  }
+`;
+export const RatingSection = styled.div `
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+export const RatingText = styled.span `
+  font-size: 13px;
+  color: #5f6368;
+`;
+export const RatingButton = styled(Button) `
+  min-width: auto;
+  height: 24px;
+  padding: 0 4px;
+  border: none;
+  box-shadow: none;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+`;
+// EditTableSourcesModal styles
+export const StyledModal = styled(Modal) `
+  .antsomi-modal-header {
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .antsomi-modal-body {
+    padding: 16px 24px;
+  }
+`;
+export const ModalDescription = styled(Text) `
+  font-size: 14px;
+  color: ${THEME.token?.colorTextSecondary};
+  margin-bottom: 16px;
+  display: block;
+`;
+export const SearchSection = styled.div `
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+  margin-bottom: 16px;
+`;
+export const LanguageSelector = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+`;
+export const SearchInput = styled.div `
+  flex: 1;
+`;
+export const SearchActions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+export const GeneratedSearchInfo = styled.div `
+  font-size: 13px;
+  color: #5f6368;
+  margin-bottom: 16px;
+`;
+export const TableListHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+`;
+export const TableListHeaderLeft = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+export const TableListHeaderRight = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+export const TableListContainer = styled.div `
+  max-height: 300px;
+  overflow-y: auto;
+`;
+export const TableItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid #f5f5f5;
+`;
+export const TableItemContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+`;
+export const TableName = styled(Text) `
+  font-size: 14px;
+  color: #1a73e8;
+`;
+export const EmptyState = styled.div `
+  text-align: center;
+  padding: 40px 20px;
+  color: #999;
+`;
+export const PaginationControls = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+export const PaginationText = styled(Text) `
+  font-size: 13px;
+  color: ${THEME.token?.colorTextSecondary};
+`;
+// Edit Prompt Styles
+export const EditPromptSection = styled.div `
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+`;
+export const EditPromptInput = styled.div `
+  display: flex;
+  align-items: center;
+  flex: 1;
+
+  .input__wrapper {
+    width: 100%;
+  }
+`;
+export const EditPromptActions = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`;
+// Prompt Display Styles
+export const PromptDisplaySection = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 12px;
+`;
+export const PromptDisplayText = styled.div `
+  flex: 1;
+  line-height: 1.4;
+`;
+export const PromptDisplayActions = styled.div `
+  flex-shrink: 0;
+`;
+export const SummarySection = styled.div `
+  margin-top: 16px;
+  max-height: 60px;
+  overflow-y: auto;
+  display: flex;
+  gap: 10px;
+
+  &.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+  }
+`;
+export const RefineSection = styled.div `
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+`;
+// Global styles for accessibility
+export const AccessibilityStyles = styled.div `
+  /* Focus indicators */
+  .antsomi-btn:focus-visible,
+  .antsomi-input:focus-visible,
+  .antsomi-checkbox:focus-visible {
+    outline: 2px solid #1890ff !important;
+    outline-offset: 2px !important;
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .sql-generation-modal {
+      border: 2px solid !important;
+    }
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .antsomi-spin {
+      animation: none !important;
+    }
+  }
+
+  /* Error display styles */
+  .sql-generation-error {
+    margin: 12px 0;
+  }
+
+  /* Keyboard shortcuts help */
+  kbd {
+    background-color: #f5f5f5;
+    border: 1px solid #d9d9d9;
+    border-radius: 3px;
+    padding: 2px 4px;
+    font-family: monospace;
+    font-size: 0.85em;
+  }
+`;

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

@@ -0,0 +1,48 @@
+export declare const SQL_GENERATION_CONSTANTS: {
+    readonly POPOVER_WIDTH: 600;
+    readonly POPOVER_MAX_WIDTH: 800;
+    readonly TEXTAREA_MIN_ROWS: 3;
+    readonly TEXTAREA_MAX_ROWS: 6;
+    readonly MODAL_WIDTH: 800;
+    readonly PLACEHOLDER_TEXTS: {
+        readonly PROMPT: "Enter a prompt to generate a query";
+        readonly SEARCH_TABLES: "Search for tables...";
+        readonly REFINE_PROMPT: "Refine";
+        readonly NO_RESULT: "No SQL generated yet";
+    };
+    readonly LOADING_TEXTS: {
+        readonly GENERATING: "Generating SQL...";
+    };
+    readonly RESULT_TEXTS: {
+        readonly PROCESSED_DATA: "This query will process {size} when run.";
+    };
+    readonly BUTTON_TEXTS: {
+        readonly GENERATE: "Generate";
+        readonly EDIT: "Edit";
+        readonly INSERT: "Insert";
+        readonly EDIT_TABLE_SOURCES: "Edit Table Sources";
+        readonly QUERY_SUMMARY: "Query Summary";
+        readonly APPLY: "Apply";
+        readonly CLOSE: "Close";
+        readonly CANCEL: "Cancel";
+    };
+    readonly TITLES: {
+        readonly MAIN: "Generate SQL with AI";
+        readonly EDIT_TABLE_SOURCES: "Edit table sources";
+        readonly TABLE_ASSET: "Table asset";
+        readonly RATING: {
+            readonly THUMBS_UP: "This is helpful";
+            readonly THUMBS_DOWN: "This is not helpful";
+            readonly MORE_FEEDBACK: "More feedback";
+        };
+    };
+    readonly MESSAGES: {
+        readonly LOADING: "Generating SQL...";
+        readonly NO_RESULT: "No SQL generated yet";
+        readonly PROCESSING_INFO: "This query will process {size} when run.";
+        readonly TABLE_SOURCES_INFO: "Metadata associated with the selected tables will be used to refine your suggestion.";
+    };
+};
+export declare const DEFAULT_RESULT_SETTINGS: {
+    showDiff: boolean;
+};

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

@@ -0,0 +1,48 @@
+export const SQL_GENERATION_CONSTANTS = {
+    POPOVER_WIDTH: 600,
+    POPOVER_MAX_WIDTH: 800,
+    TEXTAREA_MIN_ROWS: 3,
+    TEXTAREA_MAX_ROWS: 6,
+    MODAL_WIDTH: 800,
+    PLACEHOLDER_TEXTS: {
+        PROMPT: 'Enter a prompt to generate a query',
+        SEARCH_TABLES: 'Search for tables...',
+        REFINE_PROMPT: 'Refine',
+        NO_RESULT: 'No SQL generated yet',
+    },
+    LOADING_TEXTS: {
+        GENERATING: 'Generating SQL...',
+    },
+    RESULT_TEXTS: {
+        PROCESSED_DATA: 'This query will process {size} when run.',
+    },
+    BUTTON_TEXTS: {
+        GENERATE: 'Generate',
+        EDIT: 'Edit',
+        INSERT: 'Insert',
+        EDIT_TABLE_SOURCES: 'Edit Table Sources',
+        QUERY_SUMMARY: 'Query Summary',
+        APPLY: 'Apply',
+        CLOSE: 'Close',
+        CANCEL: 'Cancel',
+    },
+    TITLES: {
+        MAIN: 'Generate SQL with AI',
+        EDIT_TABLE_SOURCES: 'Edit table sources',
+        TABLE_ASSET: 'Table asset',
+        RATING: {
+            THUMBS_UP: 'This is helpful',
+            THUMBS_DOWN: 'This is not helpful',
+            MORE_FEEDBACK: 'More feedback',
+        },
+    },
+    MESSAGES: {
+        LOADING: 'Generating SQL...',
+        NO_RESULT: 'No SQL generated yet',
+        PROCESSING_INFO: 'This query will process {size} when run.',
+        TABLE_SOURCES_INFO: 'Metadata associated with the selected tables will be used to refine your suggestion.',
+    },
+};
+export const DEFAULT_RESULT_SETTINGS = {
+    showDiff: false,
+};

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

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

package/es/components/organism/SQLGeneration/hooks/index.js

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

package/es/components/organism/SQLGeneration/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,14 @@
+export interface KeyboardNavigationOptions {
+    onEscape?: () => void;
+    onEnter?: () => void;
+    onCtrlEnter?: () => void;
+    onArrowUp?: () => void;
+    onArrowDown?: () => void;
+    onArrowLeft?: () => void;
+    onArrowRight?: () => void;
+    disabled?: boolean;
+}
+export declare const useKeyboardNavigation: (options?: KeyboardNavigationOptions) => {
+    handleKeyDown: (event: KeyboardEvent) => void;
+};
+export declare const useSQLGenerationKeyboard: () => void;

package/es/components/organism/SQLGeneration/hooks/useKeyboardNavigation.js

@@ -0,0 +1,123 @@
+import { useEffect, useCallback } from 'react';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectHasResult, selectIsEditingPrompt, selectIsRefining, selectIsLoading, } from '../selectors';
+export const useKeyboardNavigation = (options = {}) => {
+    const { onEscape, onEnter, onCtrlEnter, onArrowUp, onArrowDown, onArrowLeft, onArrowRight, disabled = false, } = options;
+    const handleKeyDown = useCallback((event) => {
+        if (disabled)
+            return;
+        const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
+        const isModifierPressed = ctrlKey || metaKey || altKey || shiftKey;
+        // Prevent handling if user is typing in an input/textarea
+        const target = event.target;
+        const isInputElement = ['INPUT', 'TEXTAREA'].includes(target.tagName) || target.contentEditable === 'true';
+        switch (key) {
+            case 'Escape':
+                if (onEscape) {
+                    event.preventDefault();
+                    onEscape();
+                }
+                break;
+            case 'Enter':
+                if ((ctrlKey || metaKey) && onCtrlEnter) {
+                    event.preventDefault();
+                    onCtrlEnter();
+                }
+                else if (!isModifierPressed && !isInputElement && onEnter) {
+                    event.preventDefault();
+                    onEnter();
+                }
+                break;
+            case 'ArrowUp':
+                if (!isInputElement && onArrowUp) {
+                    event.preventDefault();
+                    onArrowUp();
+                }
+                break;
+            case 'ArrowDown':
+                if (!isInputElement && onArrowDown) {
+                    event.preventDefault();
+                    onArrowDown();
+                }
+                break;
+            case 'ArrowLeft':
+                if (!isInputElement && onArrowLeft) {
+                    event.preventDefault();
+                    onArrowLeft();
+                }
+                break;
+            case 'ArrowRight':
+                if (!isInputElement && onArrowRight) {
+                    event.preventDefault();
+                    onArrowRight();
+                }
+                break;
+            default:
+                break;
+        }
+    }, [disabled, onEscape, onEnter, onCtrlEnter, onArrowUp, onArrowDown, onArrowLeft, onArrowRight]);
+    useEffect(() => {
+        if (disabled)
+            return;
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown, disabled]);
+    return { handleKeyDown };
+};
+// Hook for SQL Generation specific keyboard shortcuts
+export const useSQLGenerationKeyboard = () => {
+    const hasResults = useSQLGenerationStore(selectHasResult);
+    const isEditingPrompt = useSQLGenerationStore(selectIsEditingPrompt);
+    const isRefining = useSQLGenerationStore(selectIsRefining);
+    const isLoading = useSQLGenerationStore(selectIsLoading);
+    const setIsOpen = useSQLGenerationStore(s => s.setIsOpen);
+    const setIsEditingPrompt = useSQLGenerationStore(s => s.setIsEditingPrompt);
+    const generateSQL = useSQLGenerationStore(s => s.generateSQL);
+    const refineSQL = useSQLGenerationStore(s => s.refineSQL);
+    const setCurrentResultKey = useSQLGenerationStore(s => s.setCurrentResultKey);
+    const resultAllKeys = useSQLGenerationStore(s => s.results.allKeys);
+    const currentResultKey = useSQLGenerationStore(s => s.currentResultKey);
+    const handleEscape = useCallback(() => {
+        if (isEditingPrompt) {
+            setIsEditingPrompt(false);
+        }
+        else {
+            setIsOpen(false);
+        }
+    }, [isEditingPrompt, setIsEditingPrompt, setIsOpen]);
+    const handleCtrlEnter = useCallback(() => {
+        if (isLoading)
+            return;
+        if (isRefining) {
+            refineSQL();
+        }
+        else if (!hasResults) {
+            generateSQL();
+        }
+    }, [isLoading, isRefining, hasResults, refineSQL, generateSQL]);
+    const handleArrowLeft = useCallback(() => {
+        if (hasResults && resultAllKeys.length > 1) {
+            const currentIndex = resultAllKeys.indexOf(currentResultKey || '');
+            if (currentIndex > 0) {
+                setCurrentResultKey(resultAllKeys[currentIndex - 1]);
+            }
+        }
+    }, [hasResults, resultAllKeys, currentResultKey, setCurrentResultKey]);
+    const handleArrowRight = useCallback(() => {
+        if (hasResults && resultAllKeys.length > 1) {
+            const currentIndex = resultAllKeys.indexOf(currentResultKey || '');
+            if (currentIndex < resultAllKeys.length - 1) {
+                setCurrentResultKey(resultAllKeys[currentIndex + 1]);
+            }
+        }
+    }, [hasResults, resultAllKeys, currentResultKey, setCurrentResultKey]);
+    useKeyboardNavigation({
+        onEscape: handleEscape,
+        onCtrlEnter: handleCtrlEnter,
+        onArrowLeft: handleArrowLeft,
+        onArrowRight: handleArrowRight,
+        disabled: false,
+    });
+};

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

@@ -0,0 +1,10 @@
+export { SQLGeneration } from './SQLGeneration';
+export type { SQLGenerationProps, SQLGenerationResult, TableSource } from './types';
+export { SQLGenerationProvider, useSQLGenerationStore, type SQLGenerationProviderProps, } from './store';
+export declare const SQLGenerationIntegrations: {
+    readonly useAntsomiSqlWS: (params?: {
+        triggerTitle: string;
+    } | undefined) => {
+        setAceEditor: (editor: import("react-ace/lib/types").IAceEditor) => void;
+    };
+};

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

@@ -0,0 +1,6 @@
+import { useAntsomiSqlWS } from './integrations/AntsomiSqlWS';
+export { SQLGeneration } from './SQLGeneration';
+export { SQLGenerationProvider, useSQLGenerationStore, } from './store';
+export const SQLGenerationIntegrations = {
+    useAntsomiSqlWS,
+};

package/es/components/organism/SQLGeneration/index.scss

@@ -0,0 +1 @@
+@use './integrations/AceEditor';

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

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

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

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

package/es/components/organism/SQLGeneration/integrations/AceEditor/index.scss

@@ -0,0 +1,4 @@
+.ace-sqlgen-placeholder {
+  display: inline-block;
+  cursor: pointer;
+}

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

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

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

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useEnhancePlaceholder } from './useEnhancePlaceholder';
+import { useInsertQuery } from './useInsertQuery';
+import { useSQLGenerationStore } from '../../store';
+export const useAceEditor = (params) => {
+    const setIsOpen = useSQLGenerationStore(s => s.setIsOpen);
+    const resetStore = useSQLGenerationStore(s => s.reset);
+    const { setAceEditor: setAceEditorForPlaceholder } = useEnhancePlaceholder({
+        triggerTitle: params?.triggerTitle,
+        maxRetries: params?.maxRetries,
+        baseDelay: params?.baseDelay,
+    });
+    const { setAceEditor: setAceEditorForInsertQuery } = useInsertQuery({
+        onInsertQueryDone: () => {
+            setIsOpen(false);
+            resetStore();
+        },
+    });
+    const setAceEditor = useCallback((editor) => {
+        setAceEditorForPlaceholder(editor);
+        setAceEditorForInsertQuery(editor);
+    }, [setAceEditorForPlaceholder, setAceEditorForInsertQuery]);
+    return { setAceEditor };
+};