@quillsql/react 2.11.14 → 2.11.16

package/dist/esm/ReportBuilder.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useRef, useState, } from 'react';
-import { MemoizedButton, MemoizedCheckbox, MemoizedHeader, MemoizedLabel, MemoizedPopover, MemoizedSecondaryButton, MemoizedText, } from './components/UiComponents';
+import { MemoizedButton, MemoizedCheckbox, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedPopover, MemoizedSecondaryButton, MemoizedText, } from './components/UiComponents';
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
 import { CSS as DND_CSS } from '@dnd-kit/utilities';
@@ -8,7 +8,8 @@ import { getQuarter } from 'date-fns';
 import { ClientContext, ThemeContext } from './Context';
 import { getTableAliases, getTableNames, isDateishColumnType, isNumericColumnType, isTextColumnType, } from './components/ReportBuilder/ast';
 import { ChartBuilderWithModal } from './ChartBuilder';
-import { QuillPopover, QuillTabs, QuillTextInput, QuillSidebar, CustomContainer, QuillHandleButton, QuillSelectColumn, QuillDraggableColumn, QuillButtonLoadingState, QuillTableLoadingState, QuillSidebarHeading, QuillSidebarSubHeading, QuillFilterPopover, QuillSortPopover, DEFAULT_TAB_OPTIONS, TagWrapper, EditPopover, AddFilterPopover, } from './components/ReportBuilder/ui';
+import { QuillTextInput } from './components/UiComponents';
+import { QuillPopover, QuillTabs, QuillSidebar, CustomContainer, QuillHandleButton, QuillSelectColumn, QuillDraggableColumn, QuillButtonLoadingState, QuillTableLoadingState, QuillSidebarHeading, QuillSidebarSubHeading, QuillFilterPopover, QuillSortPopover, DEFAULT_TAB_OPTIONS, TagWrapper, EditPopover, AddFilterPopover, } from './components/ReportBuilder/ui';
 import { generateCurrentPeriodPostgres, generateEqualsPostgres, generateLastNPeriodsPostgres, generatePreviousPeriodPostgres, } from './components/ReportBuilder/postgres';
 import { convertBigQuery, convertGroupBy, convertRemoveSimpleParentheses, convertStringComparison, convertWildcardColumns, } from './components/ReportBuilder/convert';
 import { deepCopy, formatDateComparisonNode, getDateFilterInfo, getInTheCurrentIntervalSentence, getInTheLastIntervalSentence, getInThePreviousIntervalSentence, getPostgresBasicType, isColumnComparison, isDateTruncEquals, isInTheLastInterval, isNodeEmptyCollection, isTheCurrentInterval, isThePreviousInterval, isTopLevelBoolean, showNodeAsRow, tryConvertDateEquality, removeNonSelectedTableReferences, } from './components/ReportBuilder/util';
@@ -23,6 +24,7 @@ import QuillTable from './components/QuillTable';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { snakeCaseToTitleCase } from './utils/textProcessing';
 import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddLimitPopover';
+import { updateFirstChildWidth } from './utils/width';
 /**
  * Quill Report Builder
  *
@@ -31,7 +33,7 @@ import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddL
  * they can click a button and add that report to their dashboard or export it
  * as a CSV.
  */
-export default function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, TextInput = QuillTextInput, Select = QuillSelectComponent, Table = QuillTable, Popover = QuillPopover, Tabs = QuillTabs, Checkbox = MemoizedCheckbox, Sidebar = QuillSidebar, Container = CustomContainer, HandleButton = QuillHandleButton, SelectColumn = QuillSelectColumn, DraggableColumn = QuillDraggableColumn, ButtonLoadingState = QuillButtonLoadingState, TableLoadingState = QuillTableLoadingState, SidebarHeading = QuillSidebarHeading, SidebarSubHeading = QuillSidebarSubHeading, FilterPopover = QuillFilterPopover, SortPopover = QuillSortPopover, Label = MemoizedLabel, Header = MemoizedHeader, Text = MemoizedText, PivotPopover = MemoizedPopover, admin = false, hideAi = false, containerStyle, }) {
+export default function ReportBuilder({ initialTableName = '', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, organizationName = '', Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, DeleteButton = MemoizedDeleteButton, TextInput = QuillTextInput, Select = QuillSelectComponent, Table = QuillTable, Popover = QuillPopover, Tabs = QuillTabs, Checkbox = MemoizedCheckbox, Sidebar = QuillSidebar, Container = CustomContainer, HandleButton = QuillHandleButton, SelectColumn = QuillSelectColumn, DraggableColumn = QuillDraggableColumn, ButtonLoadingState = QuillButtonLoadingState, TableLoadingState = QuillTableLoadingState, SidebarHeading = QuillSidebarHeading, SidebarSubHeading = QuillSidebarSubHeading, FilterPopover = QuillFilterPopover, SortPopover = QuillSortPopover, Label = MemoizedLabel, Header = MemoizedHeader, Text = MemoizedText, PivotPopover = MemoizedPopover, admin = false, hideAi = false, containerStyle, }) {
     const [aiPrompt, setAiPrompt] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [baseAst, setBaseAst] = useState(null);
@@ -44,6 +46,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
     const [activePath, setActivePath] = useState(null);
     const [openPopover, setOpenPopover] = useState(null);
     const [loading, setLoading] = useState(false);
+    const [loadingSchema, setLoadingSchema] = useState(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
     const [isPending, setIsPending] = useState(false);
     const [isCopying, setIsCopying] = useState(false);
@@ -63,6 +66,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
     const [initialLoad, setInitialLoad] = useState(true);
     const [currentTable, setCurrentTable] = useState(initialTableName || '');
     const parentRef = useRef(null);
+    const askAIContainerRef = useRef(null);
+    const askAILoadingContainerRef = useRef(null);
+    const [askAIInputWidth, setAskAIInputWidth] = useState(200);
+    const [askAILoadingContainerWidth, setAskAILoadingContainerWidth] = useState(200);
     const [theme] = useContext(ThemeContext);
     const [pivotRowField, setPivotRowField] = useState(undefined);
     const [pivotColumnField, setPivotColumnField] = useState(undefined);
@@ -70,6 +77,19 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
     const [pivotAggregation, setPivotAggregation] = useState(undefined);
     // eslint-disable-next-line no-unused-vars
     const [client, _setClient] = useContext(ClientContext);
+    useEffect(() => {
+        // Since the TextInput component takes a required numeric width parameter,
+        // we dynamically calculate the width of this component here.
+        function handleResize() {
+            updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
+            updateFirstChildWidth(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [baseAst, loading]);
     const enforceOrderOnColumns = (columnNames) => {
         if (pivot) {
             const rowName = pivot.rowField;
@@ -257,6 +277,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
     useEffect(() => {
         const fetchSchema = async () => {
             try {
+                setLoadingSchema(true);
                 const response = await fetch(`${client.queryEndpoint}`, {
                     method: 'POST',
                     headers: {
@@ -296,6 +317,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         ?.columns.map((c) => c.name);
                     await handleAsk(`get ${columnsForTable} from ${initialTableName}`);
                 }
+                setLoadingSchema(false);
             }
             catch (error) {
                 console.error(error);
@@ -711,7 +733,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                     // see onChange callback handleChange
                     // eslint-disable-next-line no-unused-vars
                     dateColumnPath, dateFilterType, intervalCount, intervalType, intervalPaths, } = getDateFilterInfo(node);
-                    const isPlural = intervalCount && intervalCount > 1 ? 's' : '';
+                    const isPlural = intervalCount !== 1 ? 's' : '';
                     // Pull off the string literal date for "equals" comparisons
                     const rawDateStringEquals = node.right?.value ??
                         node.right?.args?.value[1]?.column ??
@@ -778,11 +800,15 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     { label: 'in the previous', value: 'in the previous' },
                                     { label: 'in the current', value: 'in the current' },
                                     { label: 'equals', value: 'equals' },
-                                ] }), !['in the current', 'equals'].includes(dateFilterType) && (_jsx(TextInput, { value: intervalCount, type: "number", style: { width: '70px' }, onChange: (e) => {
-                                    const isPluralNow = e.target.value > 1 ? 's' : '';
+                                ] }), !['in the current', 'equals'].includes(dateFilterType) && (_jsx(TextInput, { id: "date_filter_interval_count", value: intervalCount, width: 70, onChange: (e) => {
+                                    if (Number.isNaN(parseFloat(e.target.value || '0'))) {
+                                        alert('Please input a number.');
+                                        return;
+                                    }
+                                    const isPluralNow = parseFloat(e.target.value || '0') !== 1 ? 's' : '';
                                     intervalPaths.forEach((intervalPath) => handleChangeText([
                                         {
-                                            value: `${e.target.value} ${intervalType}${isPluralNow}`,
+                                            value: `${e.target.value || 0} ${intervalType}${isPluralNow}`,
                                             path: keyPrefix + intervalPath,
                                         },
                                     ]));
@@ -820,7 +846,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     { label: `week${isPlural}`, value: 'week' },
                                     { label: `day${isPlural}`, value: 'day' },
                                     { label: `hour${isPlural}`, value: 'hour' },
-                                ] }), dateFilterType === 'equals' && (_jsx(TextInput, { value: rawDateStringEquals, type: "text", style: { width: '120px' }, onChange: (e) => {
+                                ] }), dateFilterType === 'equals' && (_jsx(TextInput, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
                                     handleChangeText([
                                         {
                                             value: e.target.value,
@@ -835,36 +861,38 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         label: snakeCaseToTitleCase(column.displayName),
                         value: column.name,
                     }));
-                    const plural = node.right.args.value[1].expr.value > 1 ? 's' : '';
+                    const plural = node.right.args.value[1].expr.value !== 1 ? 's' : '';
                     return (_jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 20,
-                        }, children: [_jsx("div", { children: _jsx(Select, { theme: theme, value: node.left.column, onChange: (value) => {
-                                        const columnType = getColumnTypeByName(value);
-                                        if (isDateishColumnType(columnType)) {
-                                            // handleChange(value, keyPrefix + dateColumnPath, "text");
-                                            handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
-                                        }
-                                        else if (isNumericColumnType(columnType)) {
-                                            const newSubtree = deepCopy(defaultNumericComparison);
-                                            newSubtree.left.column = value;
-                                            handleReplaceSubtree(keyPrefix, newSubtree);
-                                        }
-                                        else {
-                                            const newSubtree = deepCopy(defaultEntry);
-                                            newSubtree.left.args.value[0].column = value;
-                                            handleReplaceSubtree(keyPrefix, newSubtree);
-                                        }
-                                    }, options: options }) }), _jsx(Select, { theme: theme, value: dateFilterType, onChange: (value) => {
+                        }, children: [_jsx(Select, { theme: theme, value: node.left.column, onChange: (value) => {
+                                    const columnType = getColumnTypeByName(value);
+                                    if (isDateishColumnType(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                    }
+                                    else if (isNumericColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                        newSubtree.left.column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = deepCopy(defaultEntry);
+                                        newSubtree.left.args.value[0].column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, options: options }), _jsx(Select, { theme: theme, value: 'IN_THE_LAST', onChange: (value) => {
                                     handleOperatorChange(value, node, keyPrefix, dateColumn);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
                                     { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
-                                ] }), _jsx(TextInput, { defaultValue: node.right.args.value[1].expr.value, type: "number", style: { width: '120px', height: '42px' }, min: 0, onBlur: (e) => {
+                                ] }), _jsx(TextInput, { id: 'date_window_interval_count', value: node.right.args.value[1].expr.value, width: 120, onChange: (e) => {
                                     handleChange([
                                         {
                                             value: e.target.value,
@@ -913,6 +941,8 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
                                     { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
                                 ] }), _jsx(Select, { theme: theme, value: node.left.args.value[1].column, onChange: (value) => {
                                     handleChange([
@@ -952,12 +982,14 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                         newSubtree.left.args.value[0].column = value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
-                                }, opt: true, options: options }), _jsx(Select, { theme: theme, value: 'IN_THE_PREVIOUS', onChange: (value) => {
+                                }, options: options }), _jsx(Select, { theme: theme, value: 'IN_THE_PREVIOUS', onChange: (value) => {
                                     handleOperatorChange(value, node, keyPrefix, node.left.column);
                                 }, options: [
                                     { label: 'in the last', value: 'IN_THE_LAST' },
                                     { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
                                     { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
                                     // { label: 'equals', value: 'equals' },
                                 ] }), _jsx(Select, { theme: theme, value: node.left.args.value[1].column, onChange: (value) => {
                                     const dayConversion = {
@@ -1001,7 +1033,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                     const tables = getTableNames(baseAst);
                     const table = tables.length === 1 ? tables[0] : initialTableName;
                     const columnType = column?.fieldType;
-                    const operatorOptions = [
+                    let operatorOptions = [
                         ...(isNumericColumnType(columnType)
                             ? [
                                 { label: 'equal to', value: '=' },
@@ -1038,6 +1070,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                             ]
                             : []),
                     ];
+                    if (client.databaseType === 'BigQuery' &&
+                        isDateishColumnType(columnType)) {
+                        operatorOptions = operatorOptions.filter((option) => option.value !== 'equals');
+                    }
                     return (_jsxs("div", { style: {
                             display: 'flex',
                             gap: 12,
@@ -1150,11 +1186,9 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 const len = node.value.length;
                 return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [node.value.map((elem, index) => {
                             if (elem.value) {
-                                return (_jsx(TextInput, { type: elem.type === 'number' ? 'number' : 'text', defaultValue: elem.value, onBlur: (e) => handleChange([
+                                return (_jsx(TextInput, { id: `expr_list_${index}`, width: 200, value: elem.value, onChange: (e) => handleChange([
                                         {
-                                            value: elem.type === 'number'
-                                                ? parseFloat(e.target.value)
-                                                : e.target.value,
+                                            value: e.target.value,
                                             path: keyPrefix + `value.${index}.`,
                                         },
                                     ]) }, `input_${index}`));
@@ -1164,23 +1198,19 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
             }
             case 'double_quote_string':
             case 'single_quote_string':
-                return (_jsx(TextInput, { type: "text", defaultValue: node.value.replaceAll('%', ''), style: { width: '120px' }, onBlur: (e) => handleChange([
+                return (_jsx(TextInput, { id: 'quoted_string', value: node.value.replaceAll('%', ''), width: 120, onChange: (e) => handleChange([
                         {
-                            value: node.type === 'number'
-                                ? parseFloat(e.target.value)
-                                : e.target.value,
+                            value: e.target.value,
                             path: keyPrefix + 'value',
                         },
                     ]) }));
             case 'null':
                 return _jsx("div", {});
             case 'number':
-                return (_jsx(TextInput, { defaultValue: node.value, type: "number", style: { width: '120px' }, onBlur: (e) => {
+                return (_jsx(TextInput, { id: "quill_number_input", value: node.value, width: 120, onChange: (e) => {
                         handleChange([
                             {
-                                value: node.type === 'number'
-                                    ? parseFloat(e.target.value)
-                                    : e.target.value,
+                                value: e.target.value,
                                 path: keyPrefix + 'value',
                             },
                         ]);
@@ -1207,6 +1237,22 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 return null;
         }
     };
+    const isValidPivot = (fields) => {
+        let validPivot = true;
+        if (pivot.rowField &&
+            !fields.find((field) => field.name === pivot.rowField)) {
+            validPivot = false;
+        }
+        if (pivot.valueField &&
+            !fields.find((field) => field.name === pivot.valueField)) {
+            validPivot = false;
+        }
+        if (pivot.columnField &&
+            !fields.find((field) => field.name === pivot.columnField)) {
+            validPivot = false;
+        }
+        return validPivot;
+    };
     const renderSentence = (formData, node, keyPrefix = '', 
     // @depreciated TODO: remove next update
     // eslint-disable-next-line no-unused-vars
@@ -1410,26 +1456,24 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                         orgId: client.customerId,
                     }),
                 });
+                const tables = getTableNames(baseAst);
+                const table = tables.length >= 1 ? tables[0] : initialTableName;
+                if (table !== currentTable) {
+                    await getDistinctValues(table);
+                    setCurrentTable(table);
+                }
                 const data2 = await res2.json();
                 if (data2.rows && data2.rows.length) {
                     const tables = getTableNames(baseAst);
-                    const table = tables.length >= 1 ? tables[0] : initialTableName;
-                    if (table !== currentTable) {
-                        getDistinctValues(table);
-                        setCurrentTable(table);
-                    }
-                    const sortedFields = data2.fields.sort((a, b) => {
-                        const aIsId = a.name.toLowerCase() === 'id' ||
-                            a.name.toLowerCase().endsWith('_id');
-                        const bIsId = b.name.toLowerCase() === 'id' ||
-                            b.name.toLowerCase().endsWith('_id');
-                        if (aIsId && !bIsId)
-                            return 1;
-                        if (bIsId && !aIsId)
-                            return -1;
-                        return 0;
-                    });
                     if (pivot) {
+                        // check if any of the pivot fields aren't in the data2.fields array
+                        if (!isValidPivot(data2.fields)) {
+                            setPivot(null);
+                            setPivotData(null);
+                            setRows(data2.rows);
+                            setFields(data2.fields);
+                            return;
+                        }
                         // Do all of this to make sure we have the right unique columns when applying a pivot
                         let uniqueFormatted = {};
                         const uniqueRecords = Array.from(new Set(data2.rows.map((row) => row[pivot.columnField]))).reduce((acc, curr) => {
@@ -1658,7 +1702,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 // newAst = convertDateComparison(newAst); // TODO
                 ast = newAst; // so we fetch data for newAst later.
                 if (table !== currentTable) {
-                    getDistinctValues(table);
+                    await getDistinctValues(table);
                     setCurrentTable(table);
                 }
                 setPivotRowField(groupByPivot?.rowField);
@@ -1847,6 +1891,8 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                 height: '100%',
                 ...containerStyle,
             }, ref: parentRef, children: [_jsxs(Sidebar, { children: [_jsx(SidebarHeading, { label: "Columns" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(DraggableColumns, {}), _jsx(Popover, { isOpen: openPopover === 'AddColumnPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
+                                    if (loadingSchema)
+                                        return;
                                     if (!openPopover) {
                                         setOpenPopover('AddColumnPopover');
                                     }
@@ -1873,7 +1919,9 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 gap: 2.5,
                                 alignItems: 'flex-start',
                             }, children: [_jsx(Popover, { isOpen: openPopover === 'AddFilterPopover', title: 'Add filter', trigger: _jsx(SecondaryButton, { onClick: () => {
-                                            if (!selectedColumns || selectedColumns.length === 0) {
+                                            if (!selectedColumns ||
+                                                selectedColumns.length === 0 ||
+                                                loading) {
                                                 return;
                                             }
                                             if (!openPopover) {
@@ -2010,7 +2058,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     if (!pivot) {
                                         fetchSqlQuery(baseAst);
                                     }
-                                } }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
+                                }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 gap: 8,
@@ -2044,7 +2092,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     if (!pivot) {
                                         fetchSqlQuery(newAst);
                                     }
-                                } }, `sort-sentence-${id}`))) })), _jsx(Popover, { isOpen: openPopover === 'AddSortPopover', setIsOpen: () => { }, trigger: _jsx(SecondaryButton, { onClick: () => {
+                                }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-${id}`))) })), _jsx(Popover, { isOpen: openPopover === 'AddSortPopover', setIsOpen: () => { }, trigger: _jsx(SecondaryButton, { onClick: () => {
+                                    if (!selectedColumns || selectedColumns.length === 0) {
+                                        return;
+                                    }
                                     if (!openPopover) {
                                         setOpenPopover('AddSortPopover');
                                     }
@@ -2077,7 +2128,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     setOpenPopover(null);
                                     setBaseAst(deepCopy(newAst));
                                     fetchSqlQuery(newAst);
-                                } }) })) : (_jsx(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: _jsx(SecondaryButton, { onClick: () => {
+                                }, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) })) : (_jsx(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: _jsx(SecondaryButton, { onClick: () => {
                                     if (!openPopover) {
                                         setOpenPopover('AddLimitPopover');
                                     }
@@ -2086,14 +2137,14 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 setActiveEditItem(null);
                                 setActivePath(null);
                                 setOpenPopover(null);
-                            }, children: _jsx(TextInput, { value: 0, type: "number", style: { width: 120, minHeight: 32 }, onChange: (e) => { } }) }))] }), _jsxs(Container, { children: [!hideAi && (_jsxs("form", { onSubmit: (event) => {
+                            }, children: _jsx(TextInput, { id: "loading_input_limit", value: 0, width: 120, onChange: () => { } }) }))] }), _jsxs(Container, { children: [!hideAi && (_jsxs("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
                                 event.preventDefault();
                             }, style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 gap: 12,
                                 padding: 1,
-                            }, children: [_jsx(TextInput, { placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...', type: "text", style: { width: '100%', fontSize: 14 }, value: aiPrompt }), _jsx(Button, { onClick: () => { }, label: 'Ask AI' }), baseAst && (_jsx(SecondaryButton, { onClick: clearAllState, label: "New report" }))] })), _jsxs(_Fragment, { children: [_jsx(TableLoadingState, {}), _jsxs("div", { style: {
+                            }, children: [_jsx(TextInput, { id: "ask_ai_loading_bar", placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...', width: askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(Button, { onClick: () => { }, label: "Ask AI" }), baseAst && (_jsx(SecondaryButton, { onClick: clearAllState, label: "New report" }))] })), _jsxs(_Fragment, { children: [_jsx(TableLoadingState, {}), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
@@ -2136,7 +2187,9 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                             gap: 2.5,
                             alignItems: 'flex-start',
                         }, children: [_jsx(Popover, { title: 'Add filter', isOpen: openPopover === 'AddFilterPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
-                                        if (!selectedColumns || selectedColumns.length === 0) {
+                                        if (!selectedColumns ||
+                                            selectedColumns.length === 0 ||
+                                            loading) {
                                             return;
                                         }
                                         if (!openPopover) {
@@ -2283,7 +2336,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 setOpenPopover(null);
                                 setBaseAst(deepCopy(baseAst));
                                 fetchSqlQuery(deepCopy(baseAst));
-                            } }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
+                            }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
@@ -2325,7 +2378,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 setOpenPopover(null);
                                 setBaseAst(deepCopy(newAst));
                                 fetchSqlQuery(deepCopy(newAst));
-                            } }, `sort-sentence-${id}`))) })), _jsx(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
+                            }, Select: Select, Button: Button, SecondaryButton: SecondaryButton }, `sort-sentence-${id}`))) })), _jsx(Popover, { isOpen: openPopover === 'AddSortPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
+                                if (!selectedColumns || selectedColumns.length === 0) {
+                                    return;
+                                }
                                 if (!openPopover) {
                                     setOpenPopover('AddSortPopover');
                                 }
@@ -2334,7 +2390,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                             setActiveEditItem(null);
                             setActivePath(null);
                             setOpenPopover(null);
-                        }, children: _jsx(AddSortPopover, { columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, Select: Select, Button: Button, onSave: (column, direction) => {
+                        }, children: _jsx(AddSortPopover, { columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, Select: Select, Button: Button, SecondaryButton: SecondaryButton, onSave: (column, direction) => {
                                 if (column === '')
                                     return;
                                 if (pivot) {
@@ -2382,7 +2438,10 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 setOpenPopover(null);
                                 setBaseAst(deepCopy(newAst));
                                 fetchSqlQuery(deepCopy(newAst));
-                            } }) })) : (_jsx(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: _jsx(SecondaryButton, { onClick: () => {
+                            }, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton }) })) : (_jsx(Popover, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: () => { }, trigger: _jsx(SecondaryButton, { onClick: () => {
+                                if (!selectedColumns || selectedColumns.length === 0) {
+                                    return;
+                                }
                                 if (!baseAst) {
                                     return;
                                 }
@@ -2394,7 +2453,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                             setActiveEditItem(null);
                             setActivePath(null);
                             setOpenPopover(null);
-                        }, children: _jsx(AddLimitPopover, { TextInput: TextInput, onSave: (limit) => {
+                        }, children: _jsx(AddLimitPopover, { TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, onSave: (limit) => {
                                 const newAst = { ...baseAst };
                                 newAst.limit = {
                                     seperator: '',
@@ -2408,7 +2467,7 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                 setOpenPopover(null);
                                 setBaseAst(deepCopy(newAst));
                                 fetchSqlQuery(deepCopy(newAst));
-                            } }) }))] }), _jsxs(Container, { children: [!hideAi && (_jsxs("form", { onSubmit: (event) => {
+                            } }) }))] }), _jsxs(Container, { children: [!hideAi && (_jsxs("form", { ref: askAIContainerRef, onSubmit: (event) => {
                             event.preventDefault();
                             handleAsk();
                         }, style: {
@@ -2416,14 +2475,14 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                             flexDirection: 'row',
                             gap: 12,
                             padding: 1,
-                        }, children: [_jsx(TextInput, { type: "text", value: aiPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), _jsx(Button, { onClick: handleAsk, label: 'Ask AI' }), baseAst && (_jsx(SecondaryButton, { label: 'New report', onClick: clearAllState }))] })), baseAst && (_jsx(_Fragment, { children: loading && errorMessage.length === 0 ? (_jsx(TableLoadingState, {})) : (_jsx(Table, { rows: applyFormatting({
+                        }, children: [_jsx(TextInput, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), _jsx(Button, { onClick: handleAsk, label: 'Ask AI' }), baseAst && (_jsx(SecondaryButton, { label: 'New report', onClick: clearAllState }))] })), baseAst && (_jsx(_Fragment, { children: loading && errorMessage.length === 0 ? (_jsx(TableLoadingState, {})) : (_jsx(Table, { rows: applyFormatting({
                                 rows: pivotData?.rows || rows,
                                 fields: pivotData?.fields || fields,
                             }, baseAst?.columns ?? []), columns: pivot
                                 ? pivotData?.columns || emptyPivotColumns()
                                 : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                     return { label: snakeCaseToTitleCase(c), field: c };
-                                }), error: errorMessage, rowsPerPage: 20 })) })), _jsxs("div", { style: {
+                                }), rowsPerPage: 20 })) })), _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             gap: '12px',
@@ -2434,5 +2493,8 @@ export default function ReportBuilder({ initialTableName = '', onAddToDashboardC
                                     whiteSpace: 'nowrap',
                                 }, children: errorMessage })), _jsx("div", { style: { width: '100%' } }), baseAst && (_jsxs(_Fragment, { children: [_jsx(SecondaryButton, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), _jsx(Button, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, label: 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilderWithModal, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData })] }));
+                                        }, label: 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilderWithModal, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: admin ? true : false, showDateFieldOptions: admin ? true : false, showAccessControlOptions: admin ? true : false, title: "Add to dashboard", isEditMode: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, Select: Select, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, Header: Header, Label: Label, Text: Text, 
+                // TODO: Modal={Modal}
+                // TODO: Popover={Popover}
+                DeleteButton: DeleteButton })] }));
 }

package/dist/esm/SQLEditor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ModalComponentProps, TableComponentProps } from './components/UiComponents';
+import { ModalComponentProps, TableComponentProps, TextInputComponentProps } from './components/UiComponents';
 export declare function convertPostgresColumn(column: any): {
     label: any;
     field: any;
@@ -38,12 +38,6 @@ interface SQLEditorProps {
     organizationName?: string;
     chartBuilderHorizontalView?: boolean;
 }
-interface TextInputComponentProps {
-    onChange: (e: any) => void;
-    value: string;
-    id: string;
-    placeholder?: string;
-}
 export default function QueryEditor({ containerStyle, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled, LoadingComponent, ModalComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode, chartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, dashboardItem, organizationName, chartBuilderHorizontalView, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
 export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, onClick, }: {
     schema: any;

package/dist/esm/SQLEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,mBAAmB,EACnB,mBAAmB,EAEpB,MAAM,2BAA2B,CAAC;AAInC,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAQD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuCD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAgC,EAChC,wBAAkD,EAClD,kBAAmC,EACnC,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,EAC5B,0BAAkC,GACnC,EAAE,cAAc,2CA+WhB;AA6JD,eAAO,MAAM,mBAAmB;;;;;;;6CAuG/B,CAAC"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAQf,OAAO,EAGL,mBAAmB,EACnB,mBAAmB,EAEnB,uBAAuB,EACxB,MAAM,2BAA2B,CAAC;AAKnC,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AA6CD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAgC,EAChC,wBAAkD,EAClD,kBAAmC,EACnC,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,EAC5B,0BAAkC,GACnC,EAAE,cAAc,2CAgYhB;AA6JD,eAAO,MAAM,mBAAmB;;;;;;;6CAuG/B,CAAC"}

package/dist/esm/SQLEditor.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-import { useState, useContext, useEffect, } from 'react';
+import { useState, useContext, useEffect, useRef, } from 'react';
 import MonacoEditor from '@monaco-editor/react';
 // import './nightOwlLight.css';
 import { ClientContext, SchemaContext, ThemeContext } from './Context';
@@ -9,7 +9,8 @@ import QuillTable from './components/QuillTable';
 import { getData, getDataFromCloud } from './utils/dataFetcher';
 import { ChartBuilderWithModal } from './ChartBuilder';
 import { MemoizedButton, MemoizedSecondaryButton, } from './components/UiComponents';
-import { QuillTextInput } from './components/ReportBuilder/ui';
+import { QuillTextInput } from './components/UiComponents';
+import { updateFirstChildWidth } from './utils/width';
 export function convertPostgresColumn(column) {
     let format;
     let fieldType;
@@ -139,6 +140,20 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
     const [schemaLoading, setSchemaLoading] = useState(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
     const [displayTable, setDisplayTable] = useState(false);
+    const formRef = useRef(null);
+    const [searchBarWidth, setSearchBarWidth] = useState(200);
+    useEffect(() => {
+        // Since the TextInput component takes a required numeric width parameter,
+        // we dynamically calculate the width of this component here.
+        function handleResize() {
+            updateFirstChildWidth(formRef, setSearchBarWidth, { gap: 12 });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
     const getSchema = async (isSubscribed) => {
         setSchemaLoading(true);
         const { queryEndpoint, queryHeaders, publicKey } = client;
@@ -288,7 +303,7 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                     width: 'calc(100% - 290px)',
                                     height: '100%',
                                     overflowX: 'hidden',
-                                }, children: [_jsxs("form", { onSubmit: (e) => {
+                                }, children: [_jsxs("form", { ref: formRef, onSubmit: (e) => {
                                             e.preventDefault();
                                             handleRunSqlPrompt();
                                         }, style: {
@@ -297,7 +312,7 @@ export default function QueryEditor({ containerStyle = { height: '100vh' }, Butt
                                             gap: 12,
                                             paddingTop: 16,
                                             paddingBottom: 16,
-                                        }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _jsx(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, handleFixWithAI: handleFixWithAI, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), _jsxs("div", { style: {
+                                        }, children: [_jsx(TextInputComponent, { id: "ai-search", value: sqlPrompt, width: searchBarWidth, onChange: (e) => setSqlPrompt(e.target.value), placeholder: "Ask a question..." }), (ButtonComponent && (_jsx(ButtonComponent, { onClick: handleRunSqlPrompt, label: "Ask AI" }))) || (_jsx(QuillButton, { theme: theme, onClick: handleRunSqlPrompt, label: "Ask AI" }))] }), _jsx("div", { style: { height: 'calc(50% - 40px)' }, children: _jsx(SQLEditorComponent, { query: query, setQuery: setQuery, handleRunQuery: handleRunQuery, handleFixWithAI: handleFixWithAI, newQueryEnabled: newQueryEnabled, handleClearQuery: handleClearQuery, theme: theme, defineEditorTheme: defineEditorTheme, setEditorTheme: setEditorTheme, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, loading: sqlResponseLoading, LoadingComponent: LoadingComponent }) }), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             height: 'calc(50% - 108px)',