windmill-components 1.448.50 → 1.472.2

package/package/components/copilot/ScriptFix.svelte

@@ -4,15 +4,13 @@ import { SUPPORTED_LANGUAGES, copilot } from './lib';
 import { sendUserToast } from '../../toast';
 import { dbSchemas, copilotInfo, workspaceStore } from '../../stores';
 import { scriptLangToEditorLang } from '../../scripts';
-import Popover from '../Popover.svelte';
-import Popup from '../common/popup/Popup.svelte';
+import Popover from '../meltComponents/Popover.svelte';
 import { writable } from 'svelte/store';
-import { sleep } from '../../utils';
 import { WindmillIcon } from '../icons';
 import HighlightCode from '../HighlightCode.svelte';
 import LoadingIcon from '../apps/svelte-select/lib/LoadingIcon.svelte';
 import { autoPlacement } from '@floating-ui/core';
-import { Check, Wand2, X } from 'lucide-svelte';
+import { Check, Wand2, X, RotateCw } from 'lucide-svelte';
 // props
 export let lang;
 export let editor;
@@ -25,7 +23,7 @@ let generatedCode = writable('');
 let generatedExplanation = writable('');
 let dbSchema = undefined;
 let abortController = undefined;
-async function onFix(closePopup) {
+async function onFix() {
     if (!error) {
         return;
     }
@@ -43,9 +41,6 @@ async function onFix(closePopup) {
         }, generatedCode, abortController, aiProvider, generatedExplanation);
         setupDiff();
         diffEditor?.setModified($generatedCode);
-        await sleep(500);
-        closePopup();
-        await sleep(300);
         showDiff();
     }
     catch (err) {
@@ -58,7 +53,6 @@ async function onFix(closePopup) {
                 console.error(err);
             }
         }
-        closePopup();
     }
     finally {
         genLoading = false;
@@ -97,110 +91,133 @@ function updateSchema(lang, args) {
     }
 }
 $: updateSchema(lang, args);
+let popover = undefined;
 </script>
 
 {#if SUPPORTED_LANGUAGES.has(lang)}
-	<div>
-		{#if !genLoading && $generatedCode.length > 0}
-			<div class="flex gap-1">
+	{#if !genLoading && $generatedCode.length > 0}
+		<div class="flex gap-1">
+			<Button
+				title="Discard generated code"
+				size="xs"
+				color="red"
+				spacingSize="xs2"
+				on:click={() => {
+					popover?.close()
+					rejectDiff()
+				}}
+				variant="contained"
+				startIcon={{ icon: X }}
+				propagateEvent={true}
+			>
+				Discard
+			</Button>
+			<Button
+				title="Accept generated code"
+				size="xs"
+				color="green"
+				spacingSize="xs2"
+				on:click={() => {
+					popover?.close()
+					acceptDiff()
+				}}
+				startIcon={{ icon: Check }}
+				propagateEvent={true}
+			>
+				Accept
+			</Button>
+			<Button
+				size="xs"
+				color="light"
+				spacingSize="xs2"
+				on:click={() => {
+					$generatedExplanation = ''
+					popover?.open()
+					onFix()
+				}}
+				startIcon={{ icon: RotateCw }}
+				title="Retry"
+				btnClasses="text-violet-800 dark:text-violet-400"
+			/>
+		</div>
+	{/if}
+	<Popover
+		bind:this={popover}
+		floatingConfig={{
+			middleware: [
+				autoPlacement({
+					allowedPlacements: ['bottom-end', 'top-end']
+				})
+			]
+		}}
+		closeOnOutsideClick={!genLoading}
+		closeButton={!genLoading}
+		displayArrow={true}
+	>
+		<svelte:fragment slot="trigger" let:isOpen>
+			<div class="flex flex-row">
 				<Button
-					title="Discard generated code"
+					title="Fix code"
 					size="xs"
-					color="red"
+					color={genLoading ? 'red' : 'light'}
 					spacingSize="xs2"
-					on:click={rejectDiff}
-					variant="contained"
-					startIcon={{ icon: X }}
+					startIcon={genLoading ? undefined : { icon: Wand2 }}
+					propagateEvent={true}
+					on:click={genLoading
+						? () => abortController?.abort()
+						: $generatedCode.length > 0
+						? undefined
+						: () => onFix()}
+					btnClasses={genLoading
+						? ''
+						: 'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 min-w-[84px]'}
 				>
-					Discard
-				</Button><Button
-					title="Accept generated code"
-					size="xs"
-					color="green"
-					spacingSize="xs2"
-					on:click={acceptDiff}
-					startIcon={{ icon: Check }}
-				>
-					Accept
+					{#if genLoading}
+						<WindmillIcon
+							white
+							class="mr-1 text-white"
+							height="16px"
+							width="20px"
+							spin="veryfast"
+						/>
+						Stop
+					{:else if $generatedCode.length > 0}
+						<span class="text-xs">{isOpen ? 'Hide' : 'Show'}</span>
+					{:else}
+						AI Fix
+					{/if}
 				</Button>
-				{#if $generatedExplanation.length > 0}
-					<Popover>
-						<svelte:fragment slot="text">{$generatedExplanation}</svelte:fragment>
-						<Button size="xs" color="light" variant="contained" spacingSize="xs2">Explain</Button>
-					</Popover>
-				{/if}
 			</div>
-		{:else}
-			<Popup
-				floatingConfig={{
-					middleware: [
-						autoPlacement({
-							allowedPlacements: ['bottom-end', 'top-end']
-						})
-					]
-				}}
-				let:close
-			>
-				<svelte:fragment slot="button">
-					<Button
-						title="Fix code"
-						size="xs"
-						color={genLoading ? 'red' : 'light'}
-						spacingSize="xs2"
-						startIcon={genLoading ? undefined : { icon: Wand2 }}
-						nonCaptureEvent={!genLoading}
-						on:click={genLoading ? () => abortController?.abort() : undefined}
-						btnClasses={genLoading
-							? ''
-							: 'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700'}
-						>{#if genLoading}
-							<WindmillIcon
-								white
-								class="mr-1 text-white"
-								height="16px"
-								width="20px"
-								spin="veryfast"
-							/>
-							Stop
-						{:else}
-							AI Fix
+		</svelte:fragment>
+		<svelte:fragment slot="content">
+			<div class="p-4">
+				{#if $copilotInfo.exists_ai_resource}
+					<div class="w-[42rem] min-h-[3rem] max-h-[34rem] overflow-y-auto">
+						{#if $generatedCode.length > 0 && genLoading}
+							<div class="overflow-x-scroll">
+								<HighlightCode language={lang} code={$generatedCode} />
+							</div>
+						{:else if genLoading}
+							<LoadingIcon />
 						{/if}
-					</Button>
-				</svelte:fragment>
-				{@const fixAction = (_) => {
-					if ($copilotInfo.exists_ai_resource) {
-						onFix(() => close(null))
-					}
-				}}
-				<div use:fixAction>
-					{#if $copilotInfo.exists_ai_resource}
-						<div class="w-[42rem] min-h-[3rem] max-h-[34rem] overflow-y-scroll">
-							{#if $generatedCode.length > 0}
-								<div class="overflow-x-scroll">
-									<HighlightCode language={lang} code={$generatedCode} />
-								</div>
-								{#if $generatedExplanation.length > 0}
-									<p class="text-sm mt-2"
-										><span class="font-bold">Explanation:</span> {$generatedExplanation}</p
-									>
-								{/if}
-							{:else}
-								<LoadingIcon />
-							{/if}
-						</div>
-					{:else}
-						<div class="w-80">
-							<p class="text-sm"
-								>Enable Windmill AI in the <a
-									class="inline-flex flex-row items-center gap-1"
-									href="{base}/workspace_settings?tab=ai"
-									target="_blank">workspace settings</a
-								></p
-							></div
-						>
-					{/if}
-				</div>
-			</Popup>
-		{/if}
-	</div>
+						{#if $generatedExplanation.length > 0}
+							<p class="text-sm mt-2"
+								><span class="font-bold">Explanation: test</span> {$generatedExplanation}</p
+							>
+						{/if}
+					</div>
+				{:else}
+					<div class="w-80">
+						<p class="text-sm"
+							>Enable Windmill AI in the <a
+								class="inline-flex flex-row items-center gap-1"
+								href="{base}/workspace_settings?tab=ai"
+								target="_blank">workspace settings</a
+							></p
+						></div
+					>
+				{/if}
+			</div>
+		</svelte:fragment>
+	</Popover>
 {/if}

package/package/components/copilot/ScriptGen.svelte

@@ -2,8 +2,9 @@
 import { Button } from '../common';
 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';
+import Popover from '../meltComponents/Popover.svelte';
+import TooltipV2 from '../meltComponents/Tooltip.svelte';
+import { dbSchemas, copilotInfo, workspaceStore, copilotSessionModel } from '../../stores';
 import { scriptLangToEditorLang } from '../../scripts';
 import Tooltip from '../Tooltip.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -13,11 +14,10 @@ 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 { AlertTriangle, Ban, Bot, Check, ExternalLink, HistoryIcon, Wand2, X } from 'lucide-svelte';
+import { AlertTriangle, Ban, 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;
@@ -202,6 +202,18 @@ function autoResize() {
         }
     }
 }
+function checkForInvalidModel() {
+    if (!$copilotSessionModel ||
+        ($copilotSessionModel && !$copilotInfo.ai_models.includes($copilotSessionModel))) {
+        $copilotSessionModel = $copilotInfo.ai_models[0];
+    }
+}
+$: $copilotInfo && checkForInvalidModel();
+function handlePublicOnlySelected({ detail }) {
+    if (!dbSchema)
+        return;
+    dbSchema.publicOnly = detail === 'true';
+}
 onDestroy(() => {
     abortController?.abort();
 });
@@ -264,7 +276,7 @@ onDestroy(() => {
 	{/if}
 {/if}
 {#if ($generatedCode.length === 0 || genLoading) && SUPPORTED_LANGUAGES.has(lang ?? '')}
-	<Popup
+	<Popover
 		floatingConfig={{
 			middleware: [
 				autoPlacement({
@@ -272,10 +284,9 @@ onDestroy(() => {
 				})
 			]
 		}}
-		let:close
-		blockOpen={blockPopupOpen}
+		disabled={blockPopupOpen}
 	>
-		<svelte:fragment slot="button">
+		<svelte:fragment slot="trigger">
 			{#if inlineScript}
 				<Button
 					size="xs"
@@ -340,137 +351,168 @@ onDestroy(() => {
 				</Button>
 			{/if}
 		</svelte:fragment>
-		<div class="block text-primary">
-			{#if genLoading}
-				<div class="w-[42rem] min-h-[3rem] max-h-[34rem] overflow-y-scroll" bind:this={codeDiv}>
-					{#if $generatedCode.length > 0}
-						<div class="overflow-x-scroll">
-							<HighlightCode language={lang} code={$generatedCode} /></div
-						>
-					{:else}
-						<LoadingIcon />
-					{/if}
-				</div>
-			{:else if $copilotInfo.exists_ai_resource}
-				<div class="flex flex-col gap-4">
-					<div class="flex flex-row justify-between items-center">
-						<ToggleButtonGroup class="w-auto shrink-0" bind:selected={mode}>
-							<ToggleButton value={'gen'} label="Generate from scratch" small light />
-							<ToggleButton value={'edit'} label="Edit existing code" small light />
-						</ToggleButtonGroup>
+		<svelte:fragment slot="content" let:close>
+			<div class="p-4">
+				{#if genLoading}
+					<div class="w-[42rem] min-h-[3rem] max-h-[34rem] overflow-y-scroll" bind:this={codeDiv}>
+						{#if $generatedCode.length > 0}
+							<div class="overflow-x-scroll">
+								<HighlightCode language={lang} code={$generatedCode} /></div
+							>
+						{:else}
+							<LoadingIcon />
+						{/if}
+					</div>
+				{:else if $copilotInfo.exists_ai_resource}
+					<div class="flex flex-col gap-4">
+						<div class="flex flex-row justify-between items-center w-96 gap-2">
+							<ToggleButtonGroup class="w-auto shrink-0 h-auto" bind:selected={mode} let:item>
+								<ToggleButton
+									value={'gen'}
+									label="Generate from scratch"
+									light
+									class="px-2"
+									{item}
+								/>
+								<ToggleButton value={'edit'} label="Edit existing code" light class="px-2" {item} />
+							</ToggleButtonGroup>
 
-						<div class="text-[0.6rem] text-secondary opacity-60 flex flex-row items-center gap-0.5">
-							{#if $copilotInfo.ai_provider === 'openai'}
-								GPT-4o
-							{:else if $copilotInfo.ai_provider === 'anthropic'}
-								Claude-3.5
-							{:else}
-								Codestral
-							{/if}
-							<Bot size={14} />
+							<div class="min-w-0">
+								<TooltipV2>
+									{#if $copilotInfo.ai_models.length > 1}
+										<select
+											bind:value={$copilotSessionModel}
+											class="!text-xs !pr-5 !bg-[right_center] overflow-ellipsis text-right !border-none !shadow-none"
+										>
+											{#each $copilotInfo.ai_models as model}
+												<option value={model} class="pr-4">{model}</option>
+											{/each}
+										</select>
+									{:else if $copilotInfo.ai_models.length === 1}
+										<div class="text-xs whitespace-nowrap overflow-hidden overflow-ellipsis">
+											{$copilotInfo.ai_models[0]}
+										</div>
+									{/if}
+									<svelte:fragment slot="text">
+										<span class="text-xs"
+											>{$copilotInfo.ai_models.length > 1
+												? $copilotSessionModel
+												: $copilotInfo.ai_models[0]}</span
+										>
+									</svelte:fragment>
+								</TooltipV2>
+							</div>
 						</div>
-					</div>
-					<div class="flex w-96 items-start">
-						<textarea
-							bind:this={input}
-							bind:value={funcDesc}
-							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="!h-[34px] qhd:!h-[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={trimmedDesc.length <= 0}
-							iconOnly
-							startIcon={{ icon: Wand2 }}
-						/>
-					</div>
-					{#if promptHistory.length > 0}
-						<div class="w-96 flex flex-col gap-1">
-							{#each promptHistory as p}
-								<Button
-									size="xs2"
-									color="light"
-									btnClasses="justify-start overflow-x-scroll no-scrollbar"
-									startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
-									on:click={() => {
-										funcDesc = p
-										setTimeout(() => {
-											autoResize()
-										}, 0)
-									}}>{p}</Button
-								>
-							{/each}
-							<button
-								class="underline text-xs text-start px-2 text-secondary font-normal"
-								on:click={clearPromptHistory}>clear history</button
-							>
+						<div class="flex w-96 items-start">
+							<textarea
+								bind:this={input}
+								bind:value={funcDesc}
+								on:input={autoResize}
+								on:keydown={({ key, shiftKey }) => {
+									if (key === 'Enter' && !shiftKey && trimmedDesc.length > 0) {
+										onGenerate(() => close())
+										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="!h-[34px] qhd:!h-[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())
+								}}
+								disabled={trimmedDesc.length <= 0}
+								iconOnly
+								startIcon={{ icon: Wand2 }}
+							/>
 						</div>
-					{/if}
+						{#if promptHistory.length > 0}
+							<div class="w-96 flex flex-col gap-1">
+								{#each promptHistory as p}
+									<Button
+										size="xs2"
+										color="light"
+										btnClasses="justify-start overflow-x-scroll no-scrollbar"
+										startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
+										on:click={() => {
+											funcDesc = p
+											setTimeout(() => {
+												autoResize()
+											}, 0)
+										}}>{p}</Button
+									>
+								{/each}
+								<button
+									class="underline text-xs text-start px-2 text-secondary font-normal"
+									on:click={clearPromptHistory}>clear history</button
+								>
+							</div>
+						{/if}
 
-					{#if ['postgresql', 'mysql', 'snowflake', 'bigquery', 'mssql', 'graphql, oracledb'].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 gap-1">
-								<p class="text-xs text-secondary">
-									Context: {lang === 'graphql' ? 'GraphQL' : 'DB'} schema
-								</p>
-								<Tooltip placement="top">
-									We pass the selected schema to GPT-4 Turbo for better script generation.
-								</Tooltip>
-								{#if dbSchema && 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 ['postgresql', 'mysql', 'snowflake', 'bigquery', 'mssql', 'graphql, oracledb'].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 gap-1">
+									<p class="text-xs text-secondary">
+										Context: {lang === 'graphql' ? 'GraphQL' : 'DB'} schema
+									</p>
+									<Tooltip placement="top">
+										We pass the selected schema to GPT-4 Turbo for better script generation.
+									</Tooltip>
+									{#if dbSchema && dbSchema.stringified.length > MAX_SCHEMA_LENGTH}
+										<TooltipV2 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>
+										</TooltipV2>
+									{/if}
+								</div>
+								{#if dbSchema && dbSchema.lang !== 'graphql' && (dbSchema.schema?.public || dbSchema.schema?.PUBLIC || dbSchema.schema?.dbo)}
+									<ToggleButtonGroup
+										class="w-auto shrink-0"
+										selected={dbSchema?.publicOnly ? 'true' : 'false'}
+										on:selected={handlePublicOnlySelected}
+										let:item
+									>
+										<ToggleButton
+											value={'true'}
+											label={(dbSchema.schema?.dbo ? 'Dbo' : 'Public') + ' schema'}
+											small
+											light
+											{item}
+										/>
+										<ToggleButton value={'false'} label="All schemas" small light {item} />
+									</ToggleButtonGroup>
 								{/if}
 							</div>
-							{#if dbSchema && dbSchema.lang !== 'graphql' && (dbSchema.schema?.public || dbSchema.schema?.PUBLIC || dbSchema.schema?.dbo)}
-								<ToggleButtonGroup class="w-auto shrink-0" bind:selected={dbSchema.publicOnly}>
-									<ToggleButton
-										value={true}
-										label={(dbSchema.schema?.dbo ? 'Dbo' : 'Public') + ' schema'}
-										small
-										light
-									/>
-									<ToggleButton value={false} label="All schemas" small light />
-								</ToggleButtonGroup>
-							{/if}
-						</div>
-					{/if}
-				</div>
-			{:else}
-				<p class="text-sm">
-					Enable Windmill AI in the <a
-						href="{base}/workspace_settings?tab=ai"
-						target="_blank"
-						class="inline-flex flex-row items-center gap-1"
-					>
-						workspace settings <ExternalLink size={16} />
-					</a>
-				</p>
-			{/if}
-		</div>
-	</Popup>
+						{/if}
+					</div>
+				{:else}
+					<p class="text-sm">
+						Enable Windmill AI in the <a
+							href="{base}/workspace_settings?tab=ai"
+							target="_blank"
+							class="inline-flex flex-row items-center gap-1"
+						>
+							workspace settings <ExternalLink size={16} />
+						</a>
+					</p>
+				{/if}
+			</div>
+		</svelte:fragment>
+	</Popover>
 {/if}