@antscorp/antsomi-ui 2.0.103 → 2.0.104

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { PromptSection, PromptTextArea, GenerateButtonContainer, GenerateButton } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectIsLoading, selectPrompt, selectGenerateSQLError } from '../selectors';
+import { GenerateSQLError } from './ErrorDisplay';
+export const SQLGenerationPrompt = () => {
+    const prompt = useSQLGenerationStore(selectPrompt);
+    const isLoading = useSQLGenerationStore(selectIsLoading);
+    const generateError = useSQLGenerationStore(selectGenerateSQLError);
+    const setPrompt = useSQLGenerationStore(s => s.setPrompt);
+    const generateSQL = useSQLGenerationStore(s => s.generateSQL);
+    const onGenerateSQL = useSQLGenerationStore(s => s.onGenerateSQL);
+    const disabled = !onGenerateSQL;
+    // Handle textarea change
+    const handleChange = (e) => {
+        setPrompt(e.target.value);
+    };
+    // Handle Enter key press (Ctrl/Cmd + Enter to generate)
+    const handleKeyDown = (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            e.preventDefault();
+            if (!disabled && !isLoading && prompt.trim()) {
+                generateSQL();
+            }
+        }
+    };
+    // Check if generate button should be disabled
+    const isGenerateDisabled = disabled || isLoading || !prompt.trim();
+    return (_jsxs(PromptSection, { direction: "vertical", size: 12, style: { width: '100%' }, children: [_jsx(PromptTextArea, { id: "sql-prompt-input", value: prompt, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: SQL_GENERATION_CONSTANTS.PLACEHOLDER_TEXTS.PROMPT, disabled: disabled, "aria-label": "SQL generation prompt", "aria-describedby": "sql-generation-description prompt-help-text", "aria-required": "true", autoFocus: true }), _jsx(GenerateButtonContainer, { children: _jsx(GenerateButton, { type: "primary", onClick: generateSQL, loading: isLoading, disabled: isGenerateDisabled, children: SQL_GENERATION_CONSTANTS.BUTTON_TEXTS.GENERATE }) }), generateError && _jsx(GenerateSQLError, { style: { marginTop: '12px' } })] }));
+};

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

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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography, Button } from '../../../atoms';
+import { PromptDisplaySection, PromptDisplayText, PromptDisplayActions } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResult, selectIsLoading } from '../selectors';
+const { Text } = Typography;
+export const SQLGenerationPromptDisplay = () => {
+    const currentResult = useSQLGenerationStore(selectCurrentResult);
+    const isLoading = useSQLGenerationStore(selectIsLoading);
+    const setIsEditingPrompt = useSQLGenerationStore(s => s.setIsEditingPrompt);
+    if (!currentResult)
+        return null;
+    const { prompt } = currentResult;
+    return (_jsxs(PromptDisplaySection, { children: [_jsx(PromptDisplayText, { children: _jsx(Text, { style: { color: '#1a73e8', fontSize: '14px' }, children: prompt }) }), _jsx(PromptDisplayActions, { children: _jsx(Button, { onClick: () => setIsEditingPrompt(true), disabled: isLoading, children: "Edit" }) })] }));
+};

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

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResultSummary, selectIsSummaryLoading } from '../selectors';
+import { SummarySection } from './styled';
+import { Spin, Typography } from '../../../atoms';
+const { Text } = Typography;
+export const SQLGenerationQuerySummary = () => {
+    const isSummaryLoading = useSQLGenerationStore(selectIsSummaryLoading);
+    const summary = useSQLGenerationStore(selectCurrentResultSummary);
+    if (isSummaryLoading) {
+        return (_jsx(SummarySection, { className: "loading", role: "status", "aria-live": "polite", children: _jsx(Spin, { size: "small", indicatorSize: 20, "aria-hidden": "true" }) }));
+    }
+    if (!summary) {
+        return null;
+    }
+    return (_jsx(SummarySection, { role: "region", "aria-label": "Query summary", children: _jsx(Text, { children: summary }) }));
+};

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

@@ -0,0 +1 @@
+export declare const SQLGenerationRefine: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input } from 'antd';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResult, selectIsRefining, selectRefineSQLError } from '../selectors';
+import { RefineSection } from './styled';
+import { useEffect, useRef, useState } from 'react';
+import { PlaneIcon } from '../../../icons';
+import { RefineSQLError } from './ErrorDisplay';
+export const SQLGenerationRefine = () => {
+    const currentResult = useSQLGenerationStore(selectCurrentResult);
+    const isRefining = useSQLGenerationStore(selectIsRefining);
+    const refineError = useSQLGenerationStore(selectRefineSQLError);
+    const setRefinePrompt = useSQLGenerationStore(s => s.setRefinePrompt);
+    const refineSQL = useSQLGenerationStore(s => s.refineSQL);
+    const { refinePrompt: originalRefinePrompt = '' } = currentResult || {};
+    const sectionRef = useRef(null);
+    const [hasChanges, setHasChanges] = useState(false);
+    const [currentRefinePrompt, setCurrentRefinePrompt] = useState(originalRefinePrompt);
+    useEffect(() => {
+        setCurrentRefinePrompt(originalRefinePrompt);
+        setHasChanges(false);
+    }, [originalRefinePrompt]);
+    useEffect(() => {
+        setHasChanges(currentRefinePrompt.trim() !== originalRefinePrompt.trim());
+    }, [currentRefinePrompt, originalRefinePrompt]);
+    const handleCancel = () => {
+        setCurrentRefinePrompt(originalRefinePrompt);
+        setHasChanges(false);
+    };
+    const handleBlur = (e) => {
+        if (!sectionRef.current?.contains(e.relatedTarget)) {
+            handleCancel();
+        }
+    };
+    const handleRefine = () => {
+        if (hasChanges && currentRefinePrompt.trim()) {
+            setRefinePrompt(currentRefinePrompt.trim());
+            refineSQL().finally(() => {
+                setHasChanges(false);
+            });
+        }
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && hasChanges && !isRefining) {
+            handleRefine();
+        }
+        if (e.key === 'Escape') {
+            handleCancel();
+        }
+    };
+    const handleRefinePromptChange = (e) => {
+        setCurrentRefinePrompt(e.target.value);
+    };
+    return (_jsxs(RefineSection, { ref: sectionRef, role: "region", "aria-label": "Refine SQL query", children: [_jsx(Input, { id: "refine-input", value: currentRefinePrompt, onChange: handleRefinePromptChange, onKeyDown: handleKeyPress, placeholder: "Enter refine prompt", disabled: isRefining, onBlur: handleBlur, "aria-label": "SQL refinement prompt" }), _jsxs(Button, { type: "primary", disabled: !hasChanges, onClick: handleRefine, loading: isRefining, "aria-describedby": isRefining ? 'refine-loading' : undefined, children: ["Refine", _jsx(PlaneIcon, { size: 16 })] }), refineError && _jsx(RefineSQLError, { style: { marginTop: '12px' } })] }));
+};

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

@@ -0,0 +1,5 @@
+/// <reference types="react-ace/node_modules/ace-builds/ace-modules" />
+import React from 'react';
+import 'ace-builds/src-noconflict/mode-mysql';
+import 'ace-builds/src-noconflict/theme-textmate';
+export declare const SQLGenerationResult: React.FC;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spin, Typography, Flex } from '../../../atoms';
+import { SQL_GENERATION_CONSTANTS } from '../constants';
+import { ResultSection, LoadingContainer, ResultInfo } from './styled';
+import { useSQLGenerationStore } from '../store/provider';
+import { selectCurrentResult, selectIsLoading, selectResultsAllKeys } from '../selectors';
+import { StatusSuccessIcon } from '../../../icons';
+import 'ace-builds/src-noconflict/mode-mysql';
+import 'ace-builds/src-noconflict/theme-textmate';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { SQLGenerationCodeBlock } from './SQLGenerationCodeBlock';
+import { SQLGenerationPagination } from './SQLGenerationPagination';
+import { CheckboxShowDiff } from './CheckboxShowDiff';
+const { Text } = Typography;
+export const SQLGenerationResult = () => {
+    const isLoading = useSQLGenerationStore(selectIsLoading);
+    const resultAllKeys = useSQLGenerationStore(selectResultsAllKeys);
+    const currentResult = useSQLGenerationStore(selectCurrentResult);
+    // Loading state
+    if (isLoading) {
+        return (_jsx(ResultSection, { role: "region", "aria-labelledby": "result-heading", children: _jsxs(LoadingContainer, { role: "status", "aria-live": "polite", children: [_jsx(Spin, { size: "small", indicatorSize: 20, "aria-hidden": "true" }), _jsx(Text, { style: { fontSize: '14px', color: '#666' }, children: SQL_GENERATION_CONSTANTS.LOADING_TEXTS.GENERATING })] }) }));
+    }
+    if (resultAllKeys.length === 0) {
+        return (_jsx(ResultSection, { role: "region", "aria-labelledby": "result-heading", children: _jsx(LoadingContainer, { role: "status", children: _jsx(Text, { style: { fontSize: '14px', color: '#999' }, children: SQL_GENERATION_CONSTANTS.PLACEHOLDER_TEXTS.NO_RESULT }) }) }));
+    }
+    if (!currentResult)
+        return null;
+    return (_jsxs(ResultSection, { role: "region", "aria-labelledby": "result-heading", children: [_jsx("div", { role: "region", "aria-label": "Generated SQL code", children: _jsx(SQLGenerationCodeBlock, {}) }), currentResult.processedDataSize && (_jsxs(ResultInfo, { role: "status", "aria-label": "Query processing information", children: [_jsx(StatusSuccessIcon, { size: 16, color: globalToken?.colorSuccess, "aria-hidden": "true" }), _jsx(Text, { style: { fontSize: '13px', color: '#5f6368' }, children: SQL_GENERATION_CONSTANTS.RESULT_TEXTS.PROCESSED_DATA.replace('{size}', currentResult.processedDataSize) })] })), _jsxs(Flex, { style: { marginTop: '16px', marginBottom: '16px' }, justify: "space-between", align: "center", children: [_jsx(CheckboxShowDiff, {}), _jsx(SQLGenerationPagination, { style: { marginLeft: 'auto' } })] })] }));
+};

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

@@ -0,0 +1,9 @@
+export { SQLGenerationModal } from './SQLGenerationModal';
+export { SQLGenerationHeader } from './SQLGenerationHeader';
+export { SQLGenerationPrompt } from './SQLGenerationPrompt';
+export { SQLGenerationEditPrompt } from './SQLGenerationEditPrompt';
+export { SQLGenerationPromptDisplay } from './SQLGenerationPromptDisplay';
+export { SQLGenerationResult } from './SQLGenerationResult';
+export { SQLGenerationActions } from './SQLGenerationActions';
+export { EditTableSourcesDrawer } from './EditTableSourcesDrawer';
+export { ErrorDisplay, CurrentOperationError, GenerateSQLError, RefineSQLError, QuerySummaryError, } from './ErrorDisplay';

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

@@ -0,0 +1,9 @@
+export { SQLGenerationModal } from './SQLGenerationModal';
+export { SQLGenerationHeader } from './SQLGenerationHeader';
+export { SQLGenerationPrompt } from './SQLGenerationPrompt';
+export { SQLGenerationEditPrompt } from './SQLGenerationEditPrompt';
+export { SQLGenerationPromptDisplay } from './SQLGenerationPromptDisplay';
+export { SQLGenerationResult } from './SQLGenerationResult';
+export { SQLGenerationActions } from './SQLGenerationActions';
+export { EditTableSourcesDrawer } from './EditTableSourcesDrawer';
+export { ErrorDisplay, CurrentOperationError, GenerateSQLError, RefineSQLError, QuerySummaryError, } from './ErrorDisplay';

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

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+export declare const PopoverContent: import("styled-components").StyledComponent<"div", any, {
+    maxWidth?: number | undefined;
+}, never>;
+export declare const PopoverBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const PromptSection: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").SpaceProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Compact: import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>;
+}, any, {}, never>;
+export declare const PromptTextArea: import("styled-components").StyledComponent<"textarea", any, {}, never>;
+export declare const GenerateButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GenerateButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const ResultSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SQLCodeBlock: import("styled-components").StyledComponent<import("react").FC<import("../../../molecules/EditorScript").EditorScriptProps>, any, {}, never>;
+export declare const ResultInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaginationIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionsSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const CautionLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const RatingSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RatingText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const RatingButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
+export declare const ModalDescription: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const SearchSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LanguageSelector: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchInput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GeneratedSearchInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableListHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableListHeaderLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableListHeaderRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableName: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const EmptyState: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaginationControls: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PaginationText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const EditPromptSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditPromptInput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditPromptActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PromptDisplaySection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PromptDisplayText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PromptDisplayActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SummarySection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RefineSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AccessibilityStyles: import("styled-components").StyledComponent<"div", any, {}, never>;

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;
+  }
+`;