windmill-components 1.291.4 → 1.305.0

package/package/components/apps/editor/settingsPanel/StylePanel.svelte

@@ -103,10 +103,10 @@ onMount(() => {
 
 {#if component}
 	{#key component?.id}
-		<div class="px-2 flex items-center gap-2 flex-row justify-between">
-			{#if !cssEditorOpen}
+		<div class="px-2 flex gap-1 flex-col w-full pb-4">
+			{#if !$cssEditorOpen}
 				<Button
-					color="blue"
+					color="light"
 					size="xs2"
 					variant="border"
 					on:click={() => {
@@ -114,7 +114,7 @@ onMount(() => {
 					}}
 				>
 					<div class="flex flex-row gap-1 text-xs items-center">
-						Open CSS editor{$enterpriseLicense === undefined ? '  (EE only)' : ''}
+						Open theme editor{$enterpriseLicense === undefined ? '  (EE only)' : ''}
 						<Tooltip light>
 							You can also use the App CSS Editor to customise the CSS of all components.
 						</Tooltip>
@@ -124,19 +124,18 @@ onMount(() => {
 				<div />
 			{/if}
 
-			<div class="flex flex-row gap-2 items-center justify-between">
-				{#if $enterpriseLicense !== undefined}
-					<Button
-						color="dark"
-						size="xs2"
-						on:click={() => {
-							migrationModal?.open()
-						}}
-					>
-						Convert to global CSS
-					</Button>
-				{/if}
-			</div>
+			{#if $enterpriseLicense !== undefined}
+				<Button
+					color="light"
+					size="xs2"
+					variant="border"
+					on:click={() => {
+						migrationModal?.open()
+					}}
+				>
+					Convert to global CSS
+				</Button>
+			{/if}
 		</div>
 
 		<Tabs bind:selected={tab}>
@@ -166,28 +165,30 @@ onMount(() => {
 			<svelte:fragment slot="content">
 				<TabContent value="local">
 					{#if component && component.customCss !== undefined}
-						{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
-							<div class="w-full">
-								<CssProperty
-									quickStyleProperties={quickStyleProperties?.[component.type]?.[name]}
-									forceStyle={ccomponents[component.type].customCss[name].style !== undefined}
-									forceClass={ccomponents[component.type].customCss[name].class !== undefined}
-									tooltip={ccomponents[component.type].customCss[name].tooltip}
-									{name}
-									wmClass={getSelector(name)}
-									componentType={component.type}
-									bind:value={component.customCss[name]}
-									on:change={() => app.set($app)}
-									shouldDisplayRight={hasStyleValue(component.customCss[name])}
-									on:right={() => {
-										copyLocalToGlobal(name, component?.customCss?.[name])
-										tab = 'global'
-									}}
-									overridding={hasStyleValue($app.css?.[component.type]?.[name]) &&
-										hasStyleValue(component.customCss[name])}
-								/>
-							</div>
-						{/each}
+						<div class="flex-col flex gap-4 divide-y">
+							{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
+								<div class="w-full">
+									<CssProperty
+										quickStyleProperties={quickStyleProperties?.[component.type]?.[name]}
+										forceStyle={ccomponents[component.type].customCss[name].style !== undefined}
+										forceClass={ccomponents[component.type].customCss[name].class !== undefined}
+										tooltip={ccomponents[component.type].customCss[name].tooltip}
+										{name}
+										wmClass={getSelector(name)}
+										componentType={component.type}
+										bind:value={component.customCss[name]}
+										on:change={() => app.set($app)}
+										shouldDisplayRight={hasStyleValue(component.customCss[name])}
+										on:right={() => {
+											copyLocalToGlobal(name, component?.customCss?.[name])
+											tab = 'global'
+										}}
+										overridding={hasStyleValue($app.css?.[component.type]?.[name]) &&
+											hasStyleValue(component.customCss[name])}
+									/>
+								</div>
+							{/each}
+						</div>
 					{/if}
 				</TabContent>
 				<TabContent value="global">

package/package/components/apps/editor/settingsPanel/SubTypeEditor.svelte

@@ -3,6 +3,7 @@ export let value;
 export let componentInput;
 export let subFieldType;
 export let id;
+export let dragging = false;
 let fakeComponentInput = {
     ...componentInput,
     value
@@ -16,4 +17,5 @@ $: fakeComponentInput && (value = fakeComponentInput.value);
 	fieldType={subFieldType}
 	bind:componentInput={fakeComponentInput}
 	on:remove
+	{dragging}
 />

package/package/components/apps/editor/settingsPanel/SubTypeEditor.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         componentInput: StaticInput<any>;
         subFieldType: InputType | undefined;
         id: string | undefined;
+        dragging?: boolean | undefined;
     };
     events: {
         remove: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -84,7 +84,6 @@ let focus = false;
 				lang="javascript"
 				bind:code={componentInput.expr}
 				shouldBindKey={false}
-				domLib
 				{extraLib}
 				autoHeight
 				{fixedOverflowWidgets}

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -7,7 +7,7 @@ import ColorInput from './ColorInput.svelte';
 import TabSelectInput from './TabSelectInput.svelte';
 import Toggle from '../../../../Toggle.svelte';
 import SchemaEditor from '../../../../SchemaEditor.svelte';
-import autosize from 'svelte-autosize';
+import autosize from '../../../../../autosize';
 import Button from '../../../../common/button/Button.svelte';
 import { Settings } from 'lucide-svelte';
 import AgGridWizard from '../../../../wizards/AgGridWizard.svelte';
@@ -26,6 +26,7 @@ export let selectOptions = undefined;
 export let placeholder = undefined;
 export let format = undefined;
 export let id;
+export let dragging = false;
 const { onchange } = getContext('AppViewerContext');
 $: componentInput && onchange?.();
 </script>
@@ -147,11 +148,17 @@ $: componentInput && onchange?.();
 				/>
 			{:else}
 				<div class="flex w-full flex-col">
-					<JsonEditor
-						small
-						bind:value={componentInput.value}
-						code={JSON.stringify(componentInput.value, null, 2)}
-					/>
+					{#if dragging}
+						<div class="text-xs text-secondary whitespace-pre border p-1"
+							>{JSON.stringify(componentInput.value, null, 2)}</div
+						>
+					{:else}
+						<JsonEditor
+							small
+							bind:value={componentInput.value}
+							code={JSON.stringify(componentInput.value, null, 2)}
+						/>
+					{/if}
 				</div>
 			{/if}
 		{:else if fieldType === 'array'}

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         placeholder?: string | undefined;
         format?: string | undefined;
         id: string | undefined;
+        dragging?: boolean | undefined;
     };
     events: {
         keydown: KeyboardEvent;

package/package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -17,7 +17,11 @@ let picker;
 const { app, workspace } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 async function loadSchemaFromTriggerable(path, runType) {
-    return loadSchema(workspace, path, runType) ?? emptySchema();
+    const schema = await loadSchema(workspace, path, runType);
+    if (!schema.schema.order) {
+        schema.schema.order = Object.keys(schema.schema.properties ?? {});
+    }
+    return schema ?? { schema: emptySchema(), summary: undefined };
 }
 async function pickScript(path) {
     const schema = await loadSchemaFromTriggerable(path, 'script');
@@ -26,7 +30,7 @@ async function pickScript(path) {
         type: 'runnableByPath',
         path,
         runType: 'script',
-        schema,
+        schema: schema.schema,
         name: defaultIfEmptyString(schema.summary, path)
     };
     dispatch('pick', {

package/package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -1,5 +1,4 @@
 <script>import { fly } from 'svelte/transition';
-import { Badge } from '../../../../common';
 import { secondaryMenuLeft, secondaryMenuRight } from './';
 import { getContext } from 'svelte';
 import CloseButton from '../../../../common/CloseButton.svelte';
@@ -29,11 +28,7 @@ $: if (right && lastSelected !== $selectedComponent) {
 				class="flex justify-between {right ? '' : 'flex-row-reverse'} items-center gap-1 px-3 py-2"
 			>
 				<CloseButton on:close={() => secondaryMenu?.close()} />
-				{#if $selectedComponent}
-					<Badge color="blue">{$selectedComponent}</Badge>
-				{:else}
-					<div />
-				{/if}
+				<div class="text-xs font-bold"> Style Panel</div>
 			</div>
 			<div class="relative h-full overflow-y-auto">
 				{#if typeof $secondaryMenu.component === 'string'}

package/package/components/apps/svelte-select/lib/Select.svelte.d.ts

@@ -3,9 +3,9 @@
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 export default class Select extends SvelteComponent<{
     value?: any;
+    input?: any;
     id?: null | undefined;
     name?: null | undefined;
-    input?: any;
     filter?: typeof _filter | undefined;
     class?: string | undefined;
     label?: string | undefined;
@@ -107,9 +107,9 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value?: any;
+        input?: any;
         id?: null | undefined;
         name?: null | undefined;
-        input?: any;
         filter?: typeof _filter | undefined;
         class?: string | undefined;
         label?: string | undefined;

package/package/components/apps/types.d.ts

@@ -194,6 +194,7 @@ export type AppViewerContext = {
         invalidate?: (key: string, error: string) => void;
         validateAll?: () => void;
         clearFiles?: () => void;
+        showToast?: (message: string, error?: boolean) => void;
     }>>;
     hoverStore: Writable<string | undefined>;
     allIdsInPath: Writable<string[]>;

package/package/components/apps/utils.js

@@ -177,18 +177,18 @@ declare function close(id: string): void;
  * @param id component's id
  * @param key property's key to validate
  */
-declare function validate(id: string, key: number): void;
+declare function validate(id: string, key: string): void;
 
 /** validate form field property 'key'
  * @param id component's id
  * @param key property's key to validate
  */
-declare function invalidate(id: string, key: number, error: string): void;
+declare function invalidate(id: string, key: string, error: string): void;
 
 /** validate all form's properties
  * @param id component's id
  */
-declare function validateAll(id: string, key: number): void;
+declare function validateAll(id: string): void;
 
 /** Clear the files of a file input component
  * @param id component's id

package/package/components/build_workers.js

@@ -1,5 +1,6 @@
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
 import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
@@ -27,7 +28,7 @@ export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
             case 'template':
             case 'typescript':
             case 'javascript':
-                return new Worker(new URL('../../../node_modules/monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url), { type: 'module' });
+                return new tsWorker();
             case 'html':
             case 'handlebars':
             case 'razor':

package/package/components/common/FileProgressBar.svelte

@@ -18,7 +18,7 @@ $: tweenedProgress.set(progress);
 			<div class="progress-bar">
 				<div
 					class={`progress ${!ended ? 'blinking' : ''}`}
-					style={`--color: ${color}; width: ${$tweenedProgress}%`}
+					style={`--color: ${color}; width: ${Math.round($tweenedProgress)}%`}
 				/>
 			</div>
 			<span class="text-xs p-1">{Math.round($tweenedProgress)}%</span>

package/package/components/common/clearableInput/ClearableInput.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         value?: any;
         placeholder?: string | undefined;
-        type?: "number" | "text" | "textarea" | undefined;
+        type?: "number" | "textarea" | "text" | undefined;
         inputClass?: string | undefined;
         wrapperClass?: string | undefined;
         buttonClass?: string | undefined;

package/package/components/common/fileInput/FileInput.svelte

@@ -85,6 +85,10 @@ async function dispatchChange() {
         dispatch('change', files);
     }
 }
+export function clearFiles() {
+    files = undefined;
+    dispatchChange();
+}
 </script>
 
 <button

package/package/components/common/fileInput/FileInput.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         returnFileNames?: boolean | undefined;
         submittedText?: string | undefined;
         defaultFile?: string | undefined;
+        clearFiles?: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -28,5 +29,6 @@ export type FileInputProps = typeof __propDef.props;
 export type FileInputEvents = typeof __propDef.events;
 export type FileInputSlots = typeof __propDef.slots;
 export default class FileInput extends SvelteComponent<FileInputProps, FileInputEvents, FileInputSlots> {
+    get clearFiles(): () => void;
 }
 export {};

package/package/components/common/modal/Modal.svelte

@@ -35,6 +35,7 @@ function fadeFast(node) {
 
 {#if open}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<div
 		on:click={() => (open = false)}
 		transition:fadeFast|local
@@ -50,6 +51,7 @@ function fadeFast(node) {
 
 		<div class="fixed inset-0 z-10 overflow-y-auto">
 			<div class="flex min-h-full items-center justify-center p-4">
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
 				<div
 					on:click|stopPropagation
 					class={twMerge(

package/package/components/copilot/MetadataGen.svelte

@@ -5,7 +5,7 @@ import { copilotInfo, metadataCompletionEnabled } from '../../stores';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import { sendUserToast } from '../../toast';
 import { twMerge } from 'tailwind-merge';
-import autosize from 'svelte-autosize';
+import autosize from '../../autosize';
 import { yamlStringifyExceptKeys } from './utils';
 const promptConfigs = {
     summary: {
@@ -197,7 +197,9 @@ onDestroy(() => {
 	}}
 >
 	<div
-		class={'absolute left-[0.5rem] top-[0.3rem] flex flex-row  gap-2 items-start  pointer-events-none'}
+		class="absolute left-[0.5rem] {elementType === 'textarea'
+			? 'top-[1.3rem]'
+			: 'top-[0.3rem]'}  flex flex-row gap-2 items-start pointer-events-none"
 	>
 		{#if active}
 			<span
@@ -236,16 +238,19 @@ onDestroy(() => {
 		{/if}
 	</div>
 	{#if elementType === 'textarea'}
-		<textarea
-			bind:this={el}
-			bind:value={content}
-			use:autosize
-			{...elementProps}
-			placeholder={!active ? elementProps.placeholder : ''}
-			class={active ? '!indent-[3.5rem]' : ''}
-			on:focus={() => (focused = true)}
-			on:blur={() => (focused = false)}
-		/>
+		<div>
+			<div class="flex flex-row-reverse text-2xs text-tertiary -mt-4">GH Markdown</div>
+			<textarea
+				bind:this={el}
+				bind:value={content}
+				use:autosize
+				{...elementProps}
+				placeholder={!active ? elementProps.placeholder : ''}
+				class={active ? '!indent-[3.5rem]' : ''}
+				on:focus={() => (focused = true)}
+				on:blur={() => (focused = false)}
+			/>
+		</div>
 	{:else}
 		<input
 			bind:this={el}

package/package/components/copilot/MetadataGen.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         flow?: FlowValue | undefined;
         promptConfigName: "summary" | "description" | "flowSummary" | "flowDescription";
         generateOnAppear?: boolean | undefined;
-        elementType?: "input" | "textarea" | undefined;
+        elementType?: "textarea" | "input" | undefined;
         elementProps?: Record<string, any> | undefined;
     };
     events: {

package/package/components/copilot/ScriptGen.svelte

@@ -1,5 +1,5 @@
 <script>import { Button } from '../common';
-import { SUPPORTED_LANGUAGES, copilot } from './lib';
+import { MAX_SCHEMA_LENGTH, SUPPORTED_LANGUAGES, addThousandsSeparator, copilot } from './lib';
 import { sendUserToast } from '../../toast';
 import Popup from '../common/popup/Popup.svelte';
 import { dbSchemas, copilotInfo, workspaceStore } from '../../stores';
@@ -8,15 +8,16 @@ import Tooltip from '../Tooltip.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import { writable } from 'svelte/store';
-import { WindmillIcon } from '../icons';
 import HighlightCode from '../HighlightCode.svelte';
 import LoadingIcon from '../apps/svelte-select/lib/LoadingIcon.svelte';
 import { sleep } from '../../utils';
 import { autoPlacement } from '@floating-ui/core';
-import { Ban, Bot, Check, ExternalLink, HistoryIcon, Wand2, X } from 'lucide-svelte';
+import { AlertTriangle, Ban, Bot, Check, ExternalLink, HistoryIcon, Wand2, X } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
 import { isInitialCode } from '../../script_helpers';
 import { twMerge } from 'tailwind-merge';
+import Popover from '../Popover.svelte';
+import { onDestroy } from 'svelte';
 // props
 export let iconOnly = false;
 export let lang;
@@ -27,6 +28,7 @@ export let args;
 export let transformer = false;
 // state
 let funcDesc = '';
+let trimmedDesc = '';
 let genLoading = false;
 let input;
 let generatedCode = writable('');
@@ -35,8 +37,9 @@ let abortController = undefined;
 let blockPopupOpen = false;
 let mode = 'gen';
 let button;
+$: trimmedDesc = funcDesc.trim();
 async function onGenerate(closePopup) {
-    if (funcDesc.length <= 0) {
+    if (trimmedDesc.length <= 0) {
         return;
     }
     savePrompt();
@@ -47,7 +50,7 @@ async function onGenerate(closePopup) {
         if (mode === 'edit') {
             await copilot({
                 language: transformer && lang === 'frontend' ? 'transformer' : lang,
-                description: funcDesc,
+                description: trimmedDesc,
                 code: editor?.getCode() || '',
                 dbSchema: dbSchema,
                 type: 'edit',
@@ -57,7 +60,7 @@ async function onGenerate(closePopup) {
         else {
             await copilot({
                 language: transformer && lang === 'frontend' ? 'transformer' : lang,
-                description: funcDesc,
+                description: trimmedDesc,
                 dbSchema: dbSchema,
                 type: 'gen',
                 workspace: $workspaceStore
@@ -86,6 +89,9 @@ async function onGenerate(closePopup) {
     finally {
         genLoading = false;
         blockPopupOpen = false;
+        setTimeout(() => {
+            autoResize();
+        }, 0);
     }
 }
 function acceptDiff() {
@@ -148,10 +154,10 @@ function getPromptHistory() {
     }
 }
 function savePrompt() {
-    if (promptHistory.includes(funcDesc)) {
+    if (promptHistory.includes(trimmedDesc)) {
         return;
     }
-    promptHistory.unshift(funcDesc);
+    promptHistory.unshift(trimmedDesc);
     while (promptHistory.length > 5) {
         promptHistory.pop();
     }
@@ -173,6 +179,18 @@ function clearPromptHistory() {
 }
 $: lang && getPromptHistory();
 $: $generatedCode && updateScroll();
+function autoResize() {
+    if (input) {
+        const maxLinesHeight = 100; // Adjust this value based on your font size and line-height to fit 5 lines
+        input.style.height = 'auto'; // Reset height to recalibrate
+        const newHeight = Math.min(input.scrollHeight, maxLinesHeight); // Calculate new height, but not exceed max
+        input.style.height = newHeight + 'px'; // Set new height
+        input.style.overflowY = newHeight >= maxLinesHeight ? 'scroll' : 'hidden'; // Show scrollbar if at max height
+    }
+}
+onDestroy(() => {
+    abortController?.abort();
+});
 </script>
 
 {#if genLoading}
@@ -247,7 +265,7 @@ $: $generatedCode && updateScroll();
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
 					btnClasses={genLoading ? '!px-3 z-[5000]' : '!px-2'}
-					propagateEvent
+					propagateEvent={!genLoading}
 					on:click={genLoading
 						? () => abortController?.abort()
 						: () => {
@@ -258,6 +276,9 @@ $: $generatedCode && updateScroll();
 										mode = 'edit'
 									}
 								}
+								setTimeout(() => {
+									autoResize()
+								}, 0)
 						  }}
 					bind:element={button}
 					iconOnly
@@ -276,8 +297,8 @@ $: $generatedCode && updateScroll();
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
 					spacingSize="md"
-					startIcon={genLoading ? undefined : { icon: Wand2 }}
-					propagateEvent
+					startIcon={genLoading ? { icon: Ban } : { icon: Wand2 }}
+					propagateEvent={!genLoading}
 					on:click={genLoading
 						? () => abortController?.abort()
 						: () => {
@@ -288,18 +309,14 @@ $: $generatedCode && updateScroll();
 										mode = 'edit'
 									}
 								}
+								setTimeout(() => {
+									autoResize()
+								}, 0)
 						  }}
 					bind:element={button}
 					{iconOnly}
 				>
 					{#if genLoading}
-						<WindmillIcon
-							white={true}
-							class="mr-1 text-white"
-							height="16px"
-							width="20px"
-							spin="veryfast"
-						/>
 						Stop
 					{:else}
 						AI Gen
@@ -330,31 +347,34 @@ $: $generatedCode && updateScroll();
 							GPT-4 Turbo<Bot size={14} />
 						</div>
 					</div>
-					<div class="flex w-96">
-						<input
-							type="text"
+					<div class="flex w-96 items-start">
+						<textarea
 							bind:this={input}
 							bind:value={funcDesc}
-							on:keypress={({ key }) => {
-								if (key === 'Enter' && funcDesc.length > 0) {
+							on:input={autoResize}
+							on:keydown={({ key, shiftKey }) => {
+								if (key === 'Enter' && !shiftKey && trimmedDesc.length > 0) {
 									onGenerate(() => close(input || null))
+									return false
 								}
 							}}
 							placeholder={mode === 'edit'
 								? 'Describe the changes you want'
 								: 'Describe what the script should do'}
+							rows="1"
+							class="resize-none overflow-hidden"
 						/>
 						<Button
 							size="xs"
 							color="light"
 							buttonType="button"
-							btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+							btnClasses="h-[36px] !p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
 							title="Generate code from prompt"
 							aria-label="Generate"
 							on:click={() => {
 								onGenerate(() => close(input || null))
 							}}
-							disabled={funcDesc.length <= 0}
+							disabled={trimmedDesc.length <= 0}
 							iconOnly
 							startIcon={{ icon: Wand2 }}
 						/>
@@ -369,6 +389,9 @@ $: $generatedCode && updateScroll();
 									startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
 									on:click={() => {
 										funcDesc = p
+										setTimeout(() => {
+											autoResize()
+										}, 0)
 									}}>{p}</Button
 								>
 							{/each}
@@ -381,13 +404,24 @@ $: $generatedCode && updateScroll();
 
 					{#if ['postgresql', 'mysql', 'snowflake', 'bigquery', 'mssql', 'graphql'].includes(lang) && dbSchema?.lang === lang}
 						<div class="flex flex-row items-center justify-between gap-2 w-96">
-							<div class="flex flex-row items-center">
+							<div class="flex flex-row items-center gap-1">
 								<p class="text-xs text-secondary">
 									Context: {lang === 'graphql' ? 'GraphQL' : 'DB'} schema
 								</p>
-								<Tooltip>
+								<Tooltip placement="top">
 									We pass the selected schema to GPT-4 Turbo for better script generation.
 								</Tooltip>
+								{#if dbSchema.stringified.length > MAX_SCHEMA_LENGTH}
+									<Popover notClickable placement="top">
+										<AlertTriangle size={16} class="text-yellow-500" />
+										<svelte:fragment slot="text">
+											The schema is about {addThousandsSeparator(dbSchema.stringified.length / 3.5)}
+											tokens. To avoid exceeding the model's context length, it will be truncated to
+											{addThousandsSeparator(MAX_SCHEMA_LENGTH / 3.5)}
+											tokens.
+										</svelte:fragment>
+									</Popover>
+								{/if}
 							</div>
 							{#if dbSchema.lang !== 'graphql' && (dbSchema.schema?.public || dbSchema.schema?.PUBLIC || dbSchema.schema?.dbo)}
 								<ToggleButtonGroup class="w-auto shrink-0" bind:selected={dbSchema.publicOnly}>