@antscorp/antsomi-ui 2.0.103 → 2.0.105

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-extra-boolean-cast */
 // Libraries
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -383,11 +384,11 @@ export function useDataTableListing(props) {
         if (columns?.toggle) {
             const { key, dataIndex, valueKey, title, value, disabled, onChange } = columns.toggle || {};
             data.push({
-                key: 'toggle' || key,
+                key: key || 'toggle',
                 fixed: 'left',
                 align: 'center',
-                dataIndex: 'toggle' || dataIndex,
-                title: 'Toggle' || title,
+                dataIndex: dataIndex || 'toggle',
+                title: title || 'Toggle',
                 width: DEFAULT_TOGGLE_WIDTH,
                 ...columns.toggle,
                 render: (_, record) => {
@@ -590,7 +591,7 @@ export function useDataTableListing(props) {
         if (!!modeView) {
             setState(prev => ({ ...prev, modeView }));
         }
-    }, [localStorageValues]);
+    }, [localStorageValues, disabledCache]);
     /**
      * Set default groupBy column
      */

package/es/components/organism/Login/components/LoginWithEmail/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
 export const TextInfo = styled.span `
   color: #7f7f7f;
-  font-size: ${(props) => (props.isMobile ? ' 13px !important' : '11px')};
+  font-size: ${props => (props.isMobile ? ' 13px !important' : '11px')};
 `;

package/es/components/organism/Login/components/SetupGGAuthenticator/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 export const LabelStep = styled.span `
   color: #005eb8;
-  font-size: ${(props) => (props.isMobile ? '16px' : '14px')};
+  font-size: ${props => (props.isMobile ? '16px' : '14px')};
   font-weight: 500;
 `;
 export const Link = styled.a `

package/es/components/organism/Login/components/SignIn/styled.js

@@ -6,5 +6,5 @@ export const Wrapper = styled.div `
 
   width: 100%;
 
-  ${(props) => !props.isMobile ? 'padding: 100px 50px' : ' padding: 100px 30px'}
+  ${props => (!props.isMobile ? 'padding: 100px 50px' : ' padding: 100px 30px')}
 `;

package/es/components/organism/Login/components/WidgetLayout/styled.js

@@ -1,7 +1,7 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
 export const Title = styled.div `
-  font-size: ${(props) => (props.isMobile ? '20px' : '18px')};
+  font-size: ${props => (props.isMobile ? '20px' : '18px')};
   font-weight: 700;
   color: #005eb8;
   text-align: center;

package/es/components/organism/Login/styled.d.ts

@@ -2,7 +2,7 @@
 export declare const LoginMain: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const LoginBannerZone: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperLogin: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
-    isMobile: boolean;
+    isMobile?: boolean | undefined;
 }, never>;
 export declare const WrapperImage: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
@@ -44,8 +44,8 @@ export declare const StyleButton: import("styled-components").StyledComponent<im
 }, any, {
     isMobile: boolean;
 }, never>;
-export declare const Text: import("styled-components").StyledComponent<"span", any, {
+export declare const Text: import("styled-components").StyledComponent<"div", any, {
     color?: string | undefined;
-    isMobile: boolean;
     isBold?: boolean | undefined;
+    isMobile?: boolean | undefined;
 }, never>;

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

@@ -28,7 +28,7 @@ export const WrapperLogin = styled(Flex) `
   min-width: ${props => (props.isMobile ? '100%' : '300px')};
   max-width: ${props => (props.isMobile ? '100%' : '404px')};
 
-  ${(props) => !props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : ''}
+  ${props => (!props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : '')}
 `;
 export const WrapperImage = styled.img `
   width: 180px;
@@ -73,8 +73,8 @@ export const AvatarImage = styled.img `
 `;
 export const StyledForm = styled(Form) `
   input {
-    height: ${(props) => (props.isMobile ? ' 44px' : '36px')};
-    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    height: ${props => (props.isMobile ? ' 44px' : '36px')};
+    font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
 
     &::placeholder {
       font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
@@ -111,19 +111,19 @@ export const StyledForm = styled(Form) `
   }
 `;
 export const StyleInput = styled(Input) `
-  height: ${(props) => props.isMobile ? ' 44px !important' : '36px !important'};
-  font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+  height: ${props => (props.isMobile ? ' 44px !important' : '36px !important')};
+  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
 
   &::placeholder {
     font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
   }
 `;
 export const StyleButton = styled(Button) `
-  height: ${(props) => props.isMobile ? ' 44px !important' : '40px !important'};
-  font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+  height: ${props => (props.isMobile ? ' 44px !important' : '40px !important')};
+  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
 `;
-export const Text = styled.span `
-  color: ${(props) => props.color ? props.color : ' #000000'};
-  font-size: ${(props) => (props.isMobile ? ' 14px !important' : '12px')};
-  font-weight: ${(props) => (props.isBold ? 'bold' : 'normal')};
+export const Text = styled.div `
+  color: ${props => (props.color ? props.color : ' #000000')};
+  font-size: ${props => (props.isMobile ? ' 14px !important' : '12px')};
+  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
 `;

package/es/components/organism/ModifyColumnModal/styled.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { ModalV2Props } from '../../molecules/ModalV2';
 export declare const StyledModal: import("styled-components").StyledComponent<(props: ModalV2Props) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
-export declare const ParentMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../atoms/Scrollbars").ScrollbarsProps>, any, {}, never>;
-export declare const ChildrenMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../atoms/Scrollbars").ScrollbarsProps>, any, {}, never>;
+export declare const ParentMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("react-custom-scrollbars").ScrollbarProps>, any, {}, never>;
+export declare const ChildrenMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("react-custom-scrollbars").ScrollbarProps>, any, {}, never>;
 export declare const SelectedMetricsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const SelectedMetricItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
     disabled?: boolean | undefined;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const ThumbnailSliderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SwiperSlideWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperSlideProps>, any, {}, never>;
+export declare const SwiperSlideWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.js

@@ -27,7 +27,9 @@ export const ThumbnailSliderWrapper = styled.div `
     }
 
     &:hover {
-      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.04);
+      box-shadow:
+        0 8px 20px rgba(0, 0, 0, 0.1),
+        0 0 32px rgba(0, 0, 0, 0.04);
     }
   }
 

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SQLGenerationProps } from './types';
+export declare const SQLGeneration: React.FC<SQLGenerationProps>;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { SQLGenerationModal } from './components';
+import { useSQLGenerationStore } from './store';
+import { isBoolean } from 'lodash';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+export const SQLGeneration = props => {
+    const { isOpen, onOpenChange, tableSources } = props;
+    const setState = useSQLGenerationStore(s => s.setState);
+    useEffect(() => {
+        if (isBoolean(isOpen)) {
+            setState({ isOpen });
+        }
+    }, [isOpen, setState]);
+    useEffect(() => {
+        if (onOpenChange) {
+            setState({ onOpenChange });
+        }
+    }, [setState, onOpenChange]);
+    useDeepCompareEffect(() => {
+        if (tableSources !== undefined) {
+            setState({ tableSources });
+        }
+    }, [setState, tableSources]);
+    return _jsx(SQLGenerationModal, {});
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CheckboxShowDiff: React.FC;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from '../../../atoms';
+import { selectCurrentResultIndex, selectCurrentResultShowDiff } from '../selectors';
+import { useSQLGenerationStore } from '../store/provider';
+export const CheckboxShowDiff = () => {
+    const currentResultShowDiff = useSQLGenerationStore(selectCurrentResultShowDiff);
+    const setCurrentResultSettings = useSQLGenerationStore(s => s.setCurrentResultSettings);
+    const currentResultIndex = useSQLGenerationStore(selectCurrentResultIndex);
+    if (currentResultIndex === 0)
+        return null;
+    return (_jsx(Checkbox, { title: "Show diff", checked: currentResultShowDiff, onChange: () => {
+            setCurrentResultSettings(draft => {
+                draft.showDiff = !draft.showDiff;
+            });
+        }, children: "Show diff" }));
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EditTableSourcesDrawer: React.FC;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useState } from 'react';
+import { Input, Button, Checkbox, Space, Typography, Icon } from '../../../atoms';
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { ModalDescription, SearchSection, LanguageSelector, SearchInput, SearchActions, GeneratedSearchInfo, TableListHeader, TableListHeaderLeft, TableListHeaderRight, TableListContainer, TableItem, TableItemContent, TableName, EmptyState, PaginationControls, PaginationText, } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { selectIsEditTableSourcesOpen, selectTableSources } from '../selectors';
+import { Drawer } from 'antd';
+const { Text } = Typography;
+export const EditTableSourcesDrawer = () => {
+    const tableSources = useSQLGenerationStore(selectTableSources);
+    const isEditTableSourcesOpen = useSQLGenerationStore(selectIsEditTableSourcesOpen);
+    const setTableSources = useSQLGenerationStore(s => s.setTableSources);
+    const setIsEditTableSourcesOpen = useSQLGenerationStore(s => s.setIsEditTableSourcesOpen);
+    const [searchTerm, setSearchTerm] = useState('');
+    const selectedTables = useMemo(() => tableSources.filter(t => t.selected), [tableSources]);
+    // Filter tables based on search term
+    const filteredTables = useMemo(() => {
+        if (!searchTerm.trim())
+            return tableSources;
+        return tableSources.filter(table => searchStringQuery(table.name, searchTerm) ||
+            searchStringQuery(table.dataset, searchTerm) ||
+            searchStringQuery(table.project, searchTerm));
+    }, [tableSources, searchTerm]);
+    // Check selection states
+    const isAllSelected = useMemo(() => filteredTables.every(table => selectedTables.some(selected => selected.id === table.id)), [filteredTables, selectedTables]);
+    const isIndeterminate = useMemo(() => {
+        const selectedCount = filteredTables.filter(table => selectedTables.some(selected => selected.id === table.id)).length;
+        return selectedCount > 0 && selectedCount < filteredTables.length;
+    }, [filteredTables, selectedTables]);
+    // Handle select all
+    const handleSelectAll = useCallback((checked) => {
+        const newTableSources = tableSources.map(ts => {
+            if (filteredTables.some(ft => ft.id === ts.id)) {
+                return { ...ts, selected: checked };
+            }
+            return ts;
+        });
+        setTableSources(newTableSources);
+    }, [filteredTables, tableSources, setTableSources]);
+    // Handle individual table selection
+    const handleTableSelect = useCallback((table, checked) => {
+        const newTableSources = tableSources.map(ts => ts.id === table.id ? { ...ts, selected: checked } : ts);
+        setTableSources(newTableSources);
+    }, [tableSources, setTableSources]);
+    // Handle apply
+    const handleApply = useCallback(() => {
+        setIsEditTableSourcesOpen(false);
+    }, [setIsEditTableSourcesOpen]);
+    const handleClose = () => setIsEditTableSourcesOpen(false);
+    return (_jsx(Drawer, { title: SQL_GENERATION_CONSTANTS.TITLES.EDIT_TABLE_SOURCES, open: isEditTableSourcesOpen, onClose: handleClose, width: SQL_GENERATION_CONSTANTS.MODAL_WIDTH, footer: [
+            _jsx(Button, { onClick: handleClose, children: SQL_GENERATION_CONSTANTS.BUTTON_TEXTS.CLOSE }, "close"),
+            _jsx(Button, { type: "primary", onClick: handleApply, children: SQL_GENERATION_CONSTANTS.BUTTON_TEXTS.APPLY }, "apply"),
+        ], children: _jsxs(Space, { direction: "vertical", size: 16, style: { width: '100%' }, children: [_jsx(ModalDescription, { children: SQL_GENERATION_CONSTANTS.MESSAGES.TABLE_SOURCES_INFO }), _jsxs(SearchSection, { children: [_jsxs(LanguageSelector, { children: [_jsx(Icon, { type: "icon-ants-translate", size: 16 }), _jsx(Text, { style: { fontSize: '14px', fontWeight: 500 }, children: "Natural language" }), _jsx(Icon, { type: "icon-ants-chevron-down", size: 14 })] }), _jsx(SearchInput, { children: _jsx(Input, { placeholder: SQL_GENERATION_CONSTANTS.PLACEHOLDER_TEXTS.SEARCH_TABLES, value: searchTerm, onChange: e => setSearchTerm(e.target.value), style: { width: '100%' }, suffix: _jsx(Icon, { type: "icon-ants-search", size: 16 }) }) }), _jsxs(SearchActions, { children: [_jsx(Icon, { type: "icon-ants-filter", size: 16 }), _jsx(Icon, { type: "icon-ants-more-horizontal", size: 16 })] })] }), _jsxs(GeneratedSearchInfo, { children: [_jsxs(Text, { type: "secondary", children: ["Generated search for ", `"${searchTerm || 'all tables'}"`] }), _jsx(Button, { type: "link", size: "small", style: { fontSize: '13px', padding: 0, marginLeft: '8px' }, children: "Edit Search" })] }), _jsxs(TableListHeader, { children: [_jsxs(TableListHeaderLeft, { children: [_jsx(Checkbox, { checked: isAllSelected, indeterminate: isIndeterminate, onChange: e => handleSelectAll(e.target.checked) }), _jsx(Text, { style: { fontWeight: 500 }, children: SQL_GENERATION_CONSTANTS.TITLES.TABLE_ASSET })] }), _jsxs(TableListHeaderRight, { children: [_jsxs(PaginationText, { children: [selectedTables.length, " of ", filteredTables.length, " selected"] }), _jsxs(PaginationControls, { children: [_jsx(Button, { type: "text", size: "small", disabled: true, children: _jsx(Icon, { type: "icon-ants-chevron-left", size: 12 }) }), _jsxs(PaginationText, { children: ["1-", Math.min(10, filteredTables.length), " of ", filteredTables.length] }), _jsx(Button, { type: "text", size: "small", disabled: true, children: _jsx(Icon, { type: "icon-ants-chevron-right", size: 12 }) })] })] })] }), _jsx(TableListContainer, { children: filteredTables.length === 0 ? (_jsxs(EmptyState, { children: ["No tables found matching ", `"${searchTerm}"`] })) : (filteredTables.slice(0, 10).map(table => (_jsxs(TableItem, { children: [_jsx(Checkbox, { checked: table.selected, onChange: e => handleTableSelect(table, e.target.checked) }), _jsxs(TableItemContent, { children: [_jsx(Icon, { type: "icon-ants-table", size: 16, style: { color: '#4285f4' } }), _jsx(TableName, { children: table.project ? `${table.project}.${table.dataset}.${table.name}` : table.name })] })] }, table.id)))) })] }) }));
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SQLGenerationError } from '../store/types';
+export interface ErrorDisplayProps {
+    error?: SQLGenerationError | null;
+    onRetry?: () => void;
+    onDismiss?: () => void;
+    showRetry?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ErrorDisplay: React.FC<ErrorDisplayProps>;
+export declare const CurrentOperationError: React.FC;
+export declare const GenerateSQLError: React.FC<{
+    style?: React.CSSProperties;
+}>;
+export declare const RefineSQLError: React.FC<{
+    style?: React.CSSProperties;
+}>;
+export declare const QuerySummaryError: React.FC<{
+    style?: React.CSSProperties;
+}>;

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Space } from '@antscorp/antsomi-ui/es/components/atoms';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectGenerateSQLError, selectRefineSQLError, selectQuerySummaryError, selectCurrentOperationError, } from '../selectors';
+export const ErrorDisplay = ({ error, onRetry, onDismiss, showRetry = true, className, style, }) => {
+    if (!error)
+        return null;
+    const getErrorTitle = (operation) => {
+        switch (operation) {
+            case 'generateSQL':
+                return 'Failed to Generate SQL';
+            case 'refineSQL':
+                return 'Failed to Refine SQL';
+            case 'querySummary':
+                return 'Failed to Generate Summary';
+            default:
+                return 'An Error Occurred';
+        }
+    };
+    const action = (_jsxs(Space, { children: [showRetry && onRetry && (_jsx(Button, { onClick: onRetry, type: "primary", children: "Retry" })), onDismiss && _jsx(Button, { onClick: onDismiss, children: "Dismiss" })] }));
+    return (_jsx(Alert, { style: style, message: getErrorTitle(error.operation), description: error.message, type: "error", showIcon: false, action: action, className: className, role: "alert", "aria-live": "assertive" }));
+};
+// Component for displaying current operation error
+export const CurrentOperationError = () => {
+    const currentError = useSQLGenerationStore(selectCurrentOperationError);
+    const retryGenerateSQL = useSQLGenerationStore(s => s.retryGenerateSQL);
+    const retryRefineSQL = useSQLGenerationStore(s => s.retryRefineSQL);
+    const retryQuerySummary = useSQLGenerationStore(s => s.retryQuerySummary);
+    const clearError = useSQLGenerationStore(s => s.clearError);
+    if (!currentError)
+        return null;
+    const handleRetry = () => {
+        switch (currentError.operation) {
+            case 'generateSQL':
+                retryGenerateSQL();
+                break;
+            case 'refineSQL':
+                retryRefineSQL();
+                break;
+            case 'querySummary':
+                retryQuerySummary();
+                break;
+            default:
+                break;
+        }
+    };
+    const handleDismiss = () => {
+        clearError(currentError.operation);
+    };
+    return (_jsx(ErrorDisplay, { error: currentError, onRetry: handleRetry, onDismiss: handleDismiss, className: "sql-generation-error" }));
+};
+export const GenerateSQLError = ({ style }) => {
+    const error = useSQLGenerationStore(selectGenerateSQLError);
+    const retryGenerateSQL = useSQLGenerationStore(s => s.retryGenerateSQL);
+    const setGenerateSQLError = useSQLGenerationStore(s => s.setGenerateSQLError);
+    return (_jsx(ErrorDisplay, { style: style, error: error, onRetry: retryGenerateSQL, onDismiss: () => setGenerateSQLError(null) }));
+};
+export const RefineSQLError = ({ style }) => {
+    const error = useSQLGenerationStore(selectRefineSQLError);
+    const retryRefineSQL = useSQLGenerationStore(s => s.retryRefineSQL);
+    const setRefineSQLError = useSQLGenerationStore(s => s.setRefineSQLError);
+    return (_jsx(ErrorDisplay, { style: style, error: error, onRetry: retryRefineSQL, onDismiss: () => setRefineSQLError(null) }));
+};
+export const QuerySummaryError = ({ style }) => {
+    const error = useSQLGenerationStore(selectQuerySummaryError);
+    const retryQuerySummary = useSQLGenerationStore(s => s.retryQuerySummary);
+    const setQuerySummaryError = useSQLGenerationStore(s => s.setQuerySummaryError);
+    return (_jsx(ErrorDisplay, { error: error, onRetry: retryQuerySummary, onDismiss: () => setQuerySummaryError(null), style: style }));
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SQLGenerationActions: React.FC<{
+    children: React.ReactNode;
+}>;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Space } from '../../../atoms';
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { ActionsSection, ActionButton, CautionLink, RatingSection, RatingText, RatingButton, } from './styled';
+import { FeedbackOutlinedIcon, SummarizeIcon, TableIcon, ThumbDownHandIcon, ThumbUpHandIcon, } from '../../../icons';
+import { Flex, Tooltip } from 'antd';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectHasResult, selectIsLoading, selectQuerySummaryError } from '../selectors';
+import { QuerySummaryError } from './ErrorDisplay';
+export const SQLGenerationActions = ({ children }) => {
+    const isLoading = useSQLGenerationStore(selectIsLoading);
+    const hasResult = useSQLGenerationStore(selectHasResult);
+    const summaryError = useSQLGenerationStore(selectQuerySummaryError);
+    const insertSQL = useSQLGenerationStore(s => s.insertSQL);
+    const querySummary = useSQLGenerationStore(s => s.querySummary);
+    const setIsEditTableSourcesOpen = useSQLGenerationStore(s => s.setIsEditTableSourcesOpen);
+    // Get current result
+    const isDisabled = isLoading || !hasResult;
+    return (_jsxs(ActionsSection, { children: [_jsxs(Flex, { gap: 8, children: [_jsx(ActionButton, { type: "text", size: "small", onClick: () => setIsEditTableSourcesOpen(true), className: "with-icon", icon: _jsx(TableIcon, { size: 18 }), 
+                        // Temporary not support
+                        disabled: true, children: SQL_GENERATION_CONSTANTS.BUTTON_TEXTS.EDIT_TABLE_SOURCES }), _jsx(ActionButton, { type: "text", size: "small", onClick: querySummary, disabled: isDisabled, className: "with-icon", icon: _jsx(SummarizeIcon, { size: 18 }), children: SQL_GENERATION_CONSTANTS.BUTTON_TEXTS.QUERY_SUMMARY }), hasResult && (_jsx(CautionLink, { type: "link", size: "small", children: "Use query with caution" }))] }), children, hasResult && (_jsxs(_Fragment, { children: [_jsxs(RatingSection, { children: [_jsx(RatingText, { children: "Rate this suggestion" }), _jsxs(Space, { size: 2, children: [_jsx(RatingButton, { type: "text", size: "small", disabled: isDisabled, children: _jsx(Tooltip, { title: SQL_GENERATION_CONSTANTS.TITLES.RATING.THUMBS_UP, children: _jsx(ThumbUpHandIcon, { size: 14, color: globalToken?.bw8 }) }) }), _jsx(RatingButton, { type: "text", size: "small", disabled: isDisabled, children: _jsx(Tooltip, { title: SQL_GENERATION_CONSTANTS.TITLES.RATING.THUMBS_DOWN, children: _jsx(ThumbDownHandIcon, { size: 14, color: globalToken?.bw8 }) }) }), _jsx(RatingButton, { type: "text", size: "small", disabled: isDisabled, children: _jsx(Tooltip, { title: SQL_GENERATION_CONSTANTS.TITLES.RATING.MORE_FEEDBACK, children: _jsx(FeedbackOutlinedIcon, { size: 14, color: globalToken?.bw8 }) }) })] })] }), _jsx(Flex, { justify: "end", children: _jsx(ActionButton, { type: "primary", onClick: insertSQL, disabled: isDisabled, className: "primary", children: SQL_GENERATION_CONSTANTS.BUTTON_TEXTS.INSERT }) })] })), summaryError && _jsx(QuerySummaryError, { style: { marginTop: 12 } })] }));
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SQLGenerationCodeBlock: React.FC;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSQLGenerationStore } from '../store/provider';
+import { SQLCodeBlock } from './styled';
+import { selectCurrentResult, selectCurrentResultSettings, selectPreviousCurrentResult, } from '../selectors';
+import DiffViewer, { DiffMethod } from 'react-diff-viewer';
+export const SQLGenerationCodeBlock = () => {
+    const currentResult = useSQLGenerationStore(selectCurrentResult);
+    const currentResultSettings = useSQLGenerationStore(selectCurrentResultSettings);
+    const previousCurrentResult = useSQLGenerationStore(selectPreviousCurrentResult);
+    const showDiff = currentResultSettings?.showDiff || false;
+    if (!currentResult)
+        return null;
+    if (showDiff && previousCurrentResult) {
+        return (_jsx("div", { style: { height: '300px', overflow: 'auto' }, children: _jsx(DiffViewer, { oldValue: previousCurrentResult.sqlSuggestion, newValue: currentResult.sqlSuggestion, compareMethod: DiffMethod.LINES, hideLineNumbers: true, splitView: false, styles: {
+                    contentText: {
+                        fontFamily: 'Monoca',
+                        fontSize: '14px',
+                    },
+                } }) }));
+    }
+    return (_jsx(SQLCodeBlock, { readOnly: true, hideExpand: true, height: "300px", mode: "mysql", theme: "textmate", fontSize: 14, showGutter: false, showPrintMargin: false, value: currentResult.sqlSuggestion, style: { background: 'transparent' }, scrollMargin: [10, 10] }));
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SQLGenerationEditPrompt: React.FC;

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Input, Button, Space } from '../../../atoms';
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { EditPromptSection, EditPromptInput, EditPromptActions } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResult, selectIsLoading } from '../selectors';
+export const SQLGenerationEditPrompt = () => {
+    const currentResult = useSQLGenerationStore(selectCurrentResult);
+    const isLoading = useSQLGenerationStore(selectIsLoading);
+    const setPrompt = useSQLGenerationStore(s => s.setPrompt);
+    const generateSQL = useSQLGenerationStore(s => s.generateSQL);
+    const onGenerateSQL = useSQLGenerationStore(s => s.onGenerateSQL);
+    const setIsEditingPrompt = useSQLGenerationStore(s => s.setIsEditingPrompt);
+    const originalPrompt = currentResult?.prompt || '';
+    const isClickingUpdate = useRef(false);
+    const [currentPrompt, setCurrentPrompt] = useState(originalPrompt);
+    const [hasChanges, setHasChanges] = useState(false);
+    const disabled = !onGenerateSQL;
+    // Reset prompt when originalPrompt changes
+    useEffect(() => {
+        setCurrentPrompt(originalPrompt);
+        setHasChanges(false);
+    }, [originalPrompt]);
+    // Update hasChanges when prompt changes
+    useEffect(() => {
+        setHasChanges(currentPrompt.trim() !== originalPrompt.trim());
+    }, [currentPrompt, originalPrompt]);
+    // Handle prompt change
+    const handlePromptChange = (e) => {
+        setCurrentPrompt(e.target.value);
+    };
+    // Handle update
+    const handleUpdate = async () => {
+        if (hasChanges && currentPrompt.trim()) {
+            setPrompt(currentPrompt.trim());
+            setIsEditingPrompt(false);
+            await generateSQL();
+        }
+    };
+    // Handle cancel
+    const handleCancel = () => {
+        setCurrentPrompt(originalPrompt);
+        setHasChanges(false);
+        setIsEditingPrompt(false);
+    };
+    // Handle key press
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && hasChanges && !isLoading) {
+            handleUpdate();
+        }
+        if (e.key === 'Escape') {
+            handleCancel();
+        }
+    };
+    const handleBlur = () => {
+        if (isClickingUpdate.current) {
+            isClickingUpdate.current = false;
+            return;
+        }
+        handleCancel();
+    };
+    return (_jsxs(EditPromptSection, { children: [_jsx(EditPromptInput, { children: _jsx(Input, { onBlur: handleBlur, value: currentPrompt, onChange: handlePromptChange, onKeyDown: handleKeyPress, placeholder: SQL_GENERATION_CONSTANTS.PLACEHOLDER_TEXTS.PROMPT, disabled: disabled || isLoading, autoFocus: true }) }), _jsx(EditPromptActions, { children: _jsxs(Space, { size: 8, children: [_jsx(Button, { type: "default", onClick: handleCancel, disabled: isLoading, children: "Cancel" }), _jsx(Button, { type: "primary", onClick: handleUpdate, onMouseDown: () => {
+                                isClickingUpdate.current = true;
+                            }, disabled: !hasChanges || isLoading || !currentPrompt.trim(), loading: isLoading, children: "Update" })] }) })] }));
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SQLGenerationHeader: React.FC;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { HeaderContainer, HeaderContent, HeaderTitle, CloseButton } from './styled';
+import { CloseIcon, PenSparkIcon } from '../../../icons';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { useSQLGenerationStore } from '../store/provider';
+export const SQLGenerationHeader = () => {
+    const setIsOpen = useSQLGenerationStore(state => state.setIsOpen);
+    return (_jsxs(HeaderContainer, { children: [_jsxs(HeaderContent, { children: [_jsx(PenSparkIcon, { size: 22, "aria-hidden": "true" }), _jsx(HeaderTitle, { id: "sql-generation-title", role: "heading", "aria-level": 1, children: SQL_GENERATION_CONSTANTS.TITLES.MAIN })] }), _jsx(CloseButton, { type: "text", size: "small", icon: _jsx(CloseIcon, { size: 20, color: globalToken?.colorText }), onClick: () => setIsOpen(false), "aria-label": "Close SQL Generation dialog", title: "Close SQL Generation dialog (Escape)" })] }));
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SQLGenerationModal: React.FC;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from 'antd';
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { PopoverContent, PopoverBody, AccessibilityStyles } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectHasResult, selectIsEditingPrompt, selectIsOpen } from '../selectors';
+import { SQLGenerationHeader } from './SQLGenerationHeader';
+import { SQLGenerationEditPrompt } from './SQLGenerationEditPrompt';
+import { SQLGenerationPromptDisplay } from './SQLGenerationPromptDisplay';
+import { SQLGenerationResult } from './SQLGenerationResult';
+import { SQLGenerationRefine } from './SQLGenerationRefine';
+import { SQLGenerationActions } from './SQLGenerationActions';
+import { SQLGenerationQuerySummary } from './SQLGenerationQuerySummary';
+import { SQLGenerationPrompt } from './SQLGenerationPrompt';
+import { EditTableSourcesDrawer } from './EditTableSourcesDrawer';
+import { useSQLGenerationKeyboard } from '../hooks';
+import { useFocusManagement } from '@antscorp/antsomi-ui/es/hooks';
+export const SQLGenerationModal = () => {
+    const isOpen = useSQLGenerationStore(selectIsOpen);
+    const hasResults = useSQLGenerationStore(selectHasResult);
+    const isEditingPrompt = useSQLGenerationStore(selectIsEditingPrompt);
+    const setIsOpen = useSQLGenerationStore(s => s.setIsOpen);
+    // Enable keyboard navigation
+    useSQLGenerationKeyboard();
+    // Enable focus management
+    const { containerRef } = useFocusManagement(isOpen, {
+        autoFocus: true,
+        restoreFocus: true,
+        trapFocus: true,
+    });
+    const popoverContent = (_jsxs(PopoverContent, { ref: containerRef, children: [_jsx(SQLGenerationHeader, {}), _jsx(PopoverBody, { children: hasResults ? (_jsxs(_Fragment, { children: [isEditingPrompt ? _jsx(SQLGenerationEditPrompt, {}) : _jsx(SQLGenerationPromptDisplay, {}), _jsx(SQLGenerationResult, {}), _jsx(SQLGenerationRefine, {}), _jsx(SQLGenerationActions, { children: _jsx(SQLGenerationQuerySummary, {}) })] })) : (_jsx(SQLGenerationPrompt, {})) })] }));
+    return (_jsx(AccessibilityStyles, { children: _jsxs(Modal, { open: isOpen, footer: null, closeIcon: null, width: SQL_GENERATION_CONSTANTS.MODAL_WIDTH, onCancel: () => setIsOpen(false), destroyOnClose: true, maskClosable: false, 
+            // Accessibility improvements - Antd Modal already has role="dialog" and aria-modal="true"
+            title: null, className: "sql-generation-modal", children: [popoverContent, _jsx(EditTableSourcesDrawer, {})] }) }));
+};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SQLGenerationPagination: React.FC<{
+    style?: React.CSSProperties;
+}>;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResultIndex, selectResultsAllKeys, selectTotalResults } from '../selectors';
+import { PaginationIndicator } from './styled';
+import { Button, Space, Text } from '../../../atoms';
+import { NavigateBeforeIcon, NavigateNextIcon } from '../../../icons';
+export const SQLGenerationPagination = ({ style }) => {
+    const totalResults = useSQLGenerationStore(selectTotalResults);
+    const currentResultIndex = useSQLGenerationStore(selectCurrentResultIndex);
+    const resultAllKeys = useSQLGenerationStore(selectResultsAllKeys);
+    const setCurrentResultKey = useSQLGenerationStore(s => s.setCurrentResultKey);
+    return (_jsxs(_Fragment, { children: [totalResults > 1 && (_jsx(PaginationIndicator, { style: style, role: "navigation", "aria-label": "SQL results pagination", children: _jsxs(Space, { size: 8, align: "center", children: [_jsx(Button, { type: "text", size: "small", disabled: currentResultIndex === 0, onClick: () => setCurrentResultKey(resultAllKeys[currentResultIndex - 1]), icon: _jsx(NavigateBeforeIcon, { size: 14 }), "aria-label": "Go to previous SQL result", title: "Previous result (Arrow Left)" }), _jsxs(Text, { style: { fontSize: '13px', color: '#999' }, role: "status", "aria-label": `Result ${currentResultIndex + 1} of ${totalResults}`, children: [currentResultIndex + 1, " / ", totalResults] }), _jsx(Button, { type: "text", size: "small", disabled: currentResultIndex === totalResults - 1, onClick: () => setCurrentResultKey(resultAllKeys[currentResultIndex + 1]), icon: _jsx(NavigateNextIcon, { size: 14 }), "aria-label": "Go to next SQL result", title: "Next result (Arrow Right)" })] }) })), totalResults === 1 && (_jsx(PaginationIndicator, { style: style, role: "status", "aria-label": "Single result", children: _jsx(Text, { style: { fontSize: '13px', color: '#5f6368' }, children: "1/1" }) }))] }));
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SQLGenerationPrompt: React.FC;