windmill-components 1.542.5 → 1.555.0

package/package/components/SchemaForm.svelte

@@ -14,7 +14,9 @@ import ArgInput from './ArgInput.svelte';
 import { createEventDispatcher, untrack } from 'svelte';
 import { deepEqual } from 'fast-equals';
 import { dragHandleZone } from '@windmill-labs/svelte-dnd-action';
-let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', computeS3ForceViewerPolicies = undefined, workspace = undefined, actions: actions_render = undefined } = $props();
+import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte';
+import { twMerge } from 'tailwind-merge';
+let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', lightHeaderFont = false, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions: actions_render = undefined } = $props();
 const dispatch = createEventDispatcher();
 let inputCheck = $state({});
 export function setDefaults() {
@@ -155,10 +157,15 @@ $effect.pre(() => {
 	{#if keys.length > 0 && args}
 		{#each fields as item, i (item.id)}
 			{@const argName = item.value}
-			<div
-				class={typeof diff[argName] === 'object' && diff[argName].diff !== 'same'
-					? 'bg-red-300 dark:bg-red-800 rounded-md'
-					: ''}
+			<ResizeTransitionWrapper
+				vertical
+				class={twMerge(
+					typeof diff[argName] === 'object' &&
+						diff[argName].diff !== 'same' &&
+						'bg-red-300 dark:bg-red-800 rounded-md',
+					'relative'
+				)}
+				innerClass="w-full"
 			>
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				{#if !hiddenArgs.includes(argName) && keys.includes(argName)}
@@ -166,6 +173,7 @@ $effect.pre(() => {
 						{@const formerProperty = diff[argName].oldSchema}
 						<div class="px-2">
 							<ArgInput
+								{lightHeaderFont}
 								{disablePortal}
 								{resourceTypes}
 								{prettifyHeader}
@@ -228,6 +236,7 @@ $effect.pre(() => {
 							{JSON.stringify(args?.[argName])} -->
 							{#if !hidden[argName]}
 								<ArgInput
+									{lightHeaderFont}
 									on:change={() => {
 										dispatch('change')
 									}}
@@ -289,7 +298,7 @@ $effect.pre(() => {
 									{displayType}
 								>
 									{#snippet actions()}
-										{@render actions_render?.()}
+										{@render actions_render?.({ item })}
 										{#if linkedSecretCandidates?.includes(argName)}
 											<div>
 												<ToggleButtonGroup
@@ -305,15 +314,14 @@ $effect.pre(() => {
 													{#snippet children({ item })}
 														<ToggleButton
 															value="inlined"
-															size="sm"
+															small
 															label="Inlined"
 															tooltip="The value is inlined in the resource and thus has no special treatment."
 															{item}
 														/>
 														<ToggleButton
-															position="right"
 															value="secret"
-															size="sm"
+															small
 															label="Secret"
 															tooltip="The value will be stored in a newly created linked secret variable at the same path. That variable can be permissioned differently, will be treated as a secret the UI, operators will not be able to load it and every access will generate a corresponding audit log."
 															{item}
@@ -329,7 +337,7 @@ $effect.pre(() => {
 						{/if}
 					</div>
 				{/if}
-			</div>
+			</ResizeTransitionWrapper>
 		{/each}
 	{:else if !shouldHideNoInputs}
 		<div class="text-secondary text-sm">No inputs</div>

package/package/components/SchemaForm.svelte.d.ts

@@ -45,6 +45,7 @@ interface Props {
     displayType?: boolean;
     appPath?: string | undefined;
     className?: string;
+    lightHeaderFont?: boolean;
     computeS3ForceViewerPolicies?: (() => {
         allowed_resources: string[];
         allow_user_resources: boolean;
@@ -52,7 +53,12 @@ interface Props {
         file_key_regex: string;
     } | undefined) | undefined;
     workspace?: string | undefined;
-    actions?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet<[{
+        item: {
+            id: string;
+            value: string;
+        };
+    }]> | undefined;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/SchemaFormWithArgPicker.svelte

@@ -81,7 +81,7 @@ let savedInputsPicker = undefined;
 let loading = false;
 let captureTable = undefined;
 let historicInputs = undefined;
-$: selectedTab, (dropdownItems = getDropdownItems());
+$: (selectedTab, (dropdownItems = getDropdownItems()));
 let inputPanelSize = 70;
 </script>
 

package/package/components/ScriptBuilder.svelte

@@ -221,7 +221,7 @@ async function isTemplateScript() {
         return templateScript;
     }
     catch (error) {
-        sendUserToast('An error occured when trying to load your template script, please try again later', true);
+        sendUserToast('An error occurred when trying to load your template script, please try again later', true);
     }
 }
 async function initContent(language, kind, template) {
@@ -1492,7 +1492,7 @@ async function loadWorkerTags() {
 							{#if $workerTags?.length ?? 0 > 0}
 								<div class="max-w-[200px] pr-8">
 									<WorkerTagSelect
-										inputClass="text-sm text-secondary !placeholder-secondary"
+										inputClass="text-sm text-secondary !h-8 !placeholder-secondary"
 										nullTag={script.language}
 										placeholder={customUi?.tagSelectPlaceholder}
 										bind:tag={script.tag}

package/package/components/ScriptEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
 import { JobService } from '../gen';
-import { copilotInfo, enterpriseLicense, userStore, workspaceStore } from '../stores';
+import { enterpriseLicense, userStore, workspaceStore } from '../stores';
 import { copyToClipboard, emptySchema, sendUserToast } from '../utils';
 import Editor from './Editor.svelte';
 import { inferArgs, inferAssets } from '../infer';
@@ -36,6 +36,7 @@ import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte';
 import { assetEq } from './assets/lib';
 import { editor as meditor } from 'monaco-editor';
+import { copilotInfo } from '../aiStore';
 let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right, enablePreprocessorSnippet = false } = $props();
 $effect.pre(() => {
     if (schema == undefined) {
@@ -43,7 +44,7 @@ $effect.pre(() => {
     }
 });
 let showHistoryDrawer = $state(false);
-let jobProgressReset = $state(undefined);
+let jobProgressBar = $state(undefined);
 let diffMode = $state(false);
 let websocketAlive = $state({
     pyright: false,
@@ -109,8 +110,7 @@ export function setArgs(nargs) {
 }
 export async function runTest() {
     // Not defined if JobProgressBar not loaded
-    if (jobProgressReset)
-        jobProgressReset();
+    jobProgressBar?.reset();
     //@ts-ignore
     let job = await jobLoader.runPreview(path, code, lang, selectedTab === 'preprocessor' || kind === 'preprocessor'
         ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...(args ?? {}) }
@@ -392,7 +392,7 @@ $effect(() => {
 						icon: Github
 					}}
 				>
-					Use VScode
+					VScode
 				</Button>
 			</div>
 		{/if}
@@ -401,7 +401,7 @@ $effect(() => {
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane bind:size={codePanelSize} minSize={10} class="!overflow-visible">
-			<div class="h-full !overflow-visible bg-gray-50 dark:bg-[#272D38] relative">
+			<div class="h-full !overflow-visible bg-surface dark:bg-[#272D38] relative">
 				<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
 					{#if assets?.length}
 						<AssetsDropdownButton {assets} />
@@ -615,7 +615,7 @@ $effect(() => {
 								{#key argsRender}
 									<SchemaForm
 										helperScript={{
-											type: 'inline',
+											source: 'inline',
 											code,
 											//@ts-ignore
 											lang
@@ -648,8 +648,8 @@ $effect(() => {
 								<!-- Put to the slot in logpanel -->
 								<JobProgressBar
 									job={testJob}
-									bind:scriptProgress
-									bind:reset={jobProgressReset}
+									{scriptProgress}
+									bind:this={jobProgressBar}
 									compact={true}
 								/>
 							{/if}

package/package/components/ScriptEditor.svelte.d.ts

@@ -75,6 +75,6 @@ declare const ScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     setCollaborationMode: () => Promise<void>;
     disableCollaboration: () => void;
     updateArgs: (newArgs: Record<string, any>) => Promise<void>;
-}, "args" | "code" | "assets" | "schema" | "editor" | "selectedTab" | "diffEditor" | "hasPreprocessor" | "captureTable">;
+}, "args" | "code" | "assets" | "schema" | "selectedTab" | "editor" | "diffEditor" | "hasPreprocessor" | "captureTable">;
 type ScriptEditor = InstanceType<typeof ScriptEditor>;
 export default ScriptEditor;

package/package/components/ShareModal.svelte

@@ -93,8 +93,8 @@ async function addAcl(owner, write) {
 						<div>
 							<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (owner = '')}>
 								{#snippet children({ item })}
-									<ToggleButton value="user" size="xs" label="User" {item} />
-									<ToggleButton value="group" size="xs" label="Group" {item} />
+									<ToggleButton value="user" small label="User" {item} />
+									<ToggleButton value="group" small label="Group" {item} />
 								{/snippet}
 							</ToggleButtonGroup>
 						</div>
@@ -139,8 +139,8 @@ async function addAcl(owner, write) {
 													}}
 												>
 													{#snippet children({ item })}
-														<ToggleButton value="viewer" size="xs" label="Viewer" {item} />
-														<ToggleButton value="writer" size="xs" label="Writer" {item} />
+														<ToggleButton value="viewer" small label="Viewer" {item} />
+														<ToggleButton value="writer" small label="Writer" {item} />
 													{/snippet}
 												</ToggleButtonGroup>
 											</div>

package/package/components/SimpleEditor.svelte

@@ -46,7 +46,7 @@ let suggestion = $state('');
 let placeholderVisible = $state(false);
 let mounted = $state(false);
 let valueAfterDispose = undefined;
-let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false, key, disabled = false, minHeight = 1000 } = $props();
+let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', fakeMonacoPlaceholderClass = '', loadAsync = false, key, disabled = false, minHeight = 1000, renderLineHighlight = 'none', yPadding } = $props();
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
 export function getCode() {
@@ -229,6 +229,8 @@ async function loadMonaco() {
         editor = meditor.create(divEl, {
             ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
             model,
+            ...(yPadding !== undefined ? { padding: { bottom: yPadding, top: yPadding } } : {}),
+            renderLineHighlight,
             lineDecorationsWidth: 6,
             lineNumbersMinChars: 2,
             fontSize: fontSize,
@@ -480,9 +482,11 @@ updatePlaceholderVisibility(code ?? '');
 	<FakeMonacoPlaceHolder
 		{code}
 		autoheight
-		lineNumbersWidth={(23 * fontSize) / 14}
+		lineNumbersWidth={hideLineNumbers ? 0 : (23 * fontSize) / 14}
 		lineNumbersOffset={fontSize == 14 ? -8 : -11}
 		{fontSize}
+		showNumbers={!hideLineNumbers}
+		class={fakeMonacoPlaceholderClass}
 	/>
 {/if}
 

package/package/components/SimpleEditor.svelte.d.ts

@@ -25,11 +25,14 @@ type $$ComponentProps = {
     allowVim?: boolean;
     tailwindClasses?: string[];
     class?: string;
+    fakeMonacoPlaceholderClass?: string;
     loadAsync?: boolean;
     initialCursorPos?: IPosition;
     key?: string;
     disabled?: boolean;
     minHeight?: number;
+    renderLineHighlight?: 'all' | 'line' | 'gutter' | 'none';
+    yPadding?: number;
 };
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/StringTypeNarrowing.svelte

@@ -9,6 +9,7 @@ import ClearableInput from './common/clearableInput/ClearableInput.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import RegexGen from './copilot/RegexGen.svelte';
+import TextInput from './text_input/TextInput.svelte';
 let { pattern = $bindable(), enum_ = $bindable(), format = $bindable(), contentEncoding = $bindable(), customErrorMessage = $bindable(), minRows = $bindable(undefined), disableCreate = $bindable(undefined), disableVariablePicker = $bindable(undefined), password = $bindable(undefined), noExtra = false, dateFormat = $bindable(), enumLabels = $bindable(undefined), overrideAllowKindChange = true, originalType = undefined } = $props();
 let kind = $state(computeKind(enum_, contentEncoding, pattern, format));
 const allowKindChange = overrideAllowKindChange || originalType === 'string';
@@ -57,7 +58,7 @@ function add() {
 }
 function remove(item) {
     enum_ = (enum_ || []).filter((el) => el !== item);
-    if (enum_.length == 0) {
+    if (enum_?.length == 0) {
         enum_ = undefined;
     }
     if (enumLabels !== undefined) {
@@ -181,34 +182,49 @@ function onEnumKeyChange(oldKey, newKey) {
 			<div class="flex flex-col gap-1">
 				{#if enum_}
 					{#each enum_ as _, i}
-						<div class="flex flex-row w-full gap-2 pt-2">
-							<input
-								id="input"
-								type="text"
-								bind:value={enum_[i]}
-								oninput={(event) => enum_ && onEnumKeyChange(event?.currentTarget.value, enum_[i])}
-							/>
-							{#if enumLabels !== undefined}
+						{#if typeof enum_[i] === 'string'}
+							<div class="flex flex-row w-full gap-2 pt-2">
 								<input
 									id="input"
 									type="text"
-									bind:value={enumLabels[enum_[i]]}
-									placeholder="Optional title..."
-									oninput={(event) => {
-										if (event?.currentTarget.value === '') {
-											if (enumLabels === undefined) {
-												enumLabels = {}
-											}
-											enum_ && delete enumLabels[enum_[i]]
-										}
-									}}
+									bind:value={enum_[i]}
+									oninput={(event) =>
+										enum_ &&
+										typeof enum_[i] === 'string' &&
+										onEnumKeyChange(event?.currentTarget.value, enum_[i])}
 								/>
-							{/if}
+								{#if enumLabels !== undefined}
+									<input
+										id="input"
+										type="text"
+										bind:value={enumLabels[enum_[i]]}
+										placeholder="Optional title..."
+										oninput={(event) => {
+											if (event?.currentTarget.value === '') {
+												if (enumLabels === undefined) {
+													enumLabels = {}
+												}
+												if (typeof enum_?.[i] === 'string') {
+													enum_ && delete enumLabels[enum_[i]]
+												}
+											}
+										}}
+									/>
+								{/if}
 
-							{#if allowKindChange}
-								<Button size="sm" on:click={() => enum_ && remove(enum_[i])}>-</Button>
-							{/if}
-						</div>
+								{#if allowKindChange}
+									<Button
+										size="sm"
+										on:click={() => enum_ && typeof enum_[i] === 'string' && remove(enum_[i])}
+										>-</Button
+									>
+								{/if}
+							</div>
+						{:else}
+							<div class="flex flex-row w-full gap-2 pt-2">
+								{JSON.stringify(enum_[i])} is not a string, remove it
+							</div>
+						{/if}
 					{/each}
 				{/if}
 			</div>
@@ -277,7 +293,10 @@ function onEnumKeyChange(oldKey, newKey) {
 	{:else if kind == 'none'}
 		{#if !noExtra}
 			<Label label="Min textarea rows">
-				<input type="number" bind:value={minRows} />
+				<TextInput
+					inputProps={{ type: 'number' }}
+					bind:value={() => minRows?.toString(), (v) => (minRows = v ? parseInt(v) : undefined)}
+				/>
 			</Label>
 		{/if}
 	{:else if kind === 'base64'}

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -15,6 +15,6 @@ interface Props {
     overrideAllowKindChange?: boolean;
     originalType?: string | undefined;
 }
-declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "disableCreate" | "pattern" | "format" | "enum_" | "enumLabels" | "contentEncoding" | "customErrorMessage" | "minRows" | "disableVariablePicker" | "dateFormat">;
+declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "pattern" | "disableCreate" | "format" | "enum_" | "enumLabels" | "contentEncoding" | "customErrorMessage" | "minRows" | "disableVariablePicker" | "dateFormat">;
 type StringTypeNarrowing = ReturnType<typeof StringTypeNarrowing>;
 export default StringTypeNarrowing;

package/package/components/SuperadminSettingsInner.svelte

@@ -288,17 +288,17 @@ async function updateName(name, email) {
 															}}
 														>
 															{#snippet children({ item })}
-																<ToggleButton value={'user'} size="xs" label="User" {item} />
+																<ToggleButton value={'user'} small label="User" {item} />
 																<ToggleButton
 																	value={'devops'}
-																	size="xs"
+																	small
 																	label="Devops"
 																	tooltip="Devops is a role that grants visibilty similar to that of a super admin, but without giving all rights. For example devops users can see service logs and crtical alerts. You can think of it as a 'readonly' super admin"
 																	{item}
 																/>
 																<ToggleButton
 																	value={'super_admin'}
-																	size="xs"
+																	small
 																	label="Superadmin"
 																	{item}
 																/>

package/package/components/TeamSelector.svelte

@@ -2,71 +2,117 @@
 import { RefreshCcw } from 'lucide-svelte';
 import { WorkspaceService } from '../gen';
 import Select from './select/Select.svelte';
-import { onMount } from 'svelte';
-let { disabled = false, placeholder = 'Select a team', selectedTeam = $bindable(), containerClass = 'w-64', showRefreshButton = true, teams = undefined, minWidth = '160px', onError } = $props();
+import { debounce } from '../utils';
+let { disabled = false, selectedTeam = $bindable(), containerClass = 'w-64', showRefreshButton = true, teams = undefined, minWidth = '160px', onError } = $props();
 let isFetching = $state(false);
-onMount(() => {
-    if (!teams)
-        loadTeams();
+let searchResults = $state([]);
+// Only enable search mode if no teams are provided
+const searchMode = !teams;
+// Determine which teams to show: provided teams or search results
+// In search mode, include the selected team if it exists
+let displayTeams = $derived(() => {
+    const baseTeams = teams || searchResults;
+    if (searchMode && selectedTeam && !baseTeams.find(t => t.team_id === selectedTeam?.team_id)) {
+        return [selectedTeam, ...baseTeams];
+    }
+    return baseTeams;
+});
+// Create separate filter text for search mode
+let searchFilterText = $state('');
+// Debounced search function
+const debouncedSearch = debounce(async (query) => {
+    await searchTeams(query);
+}, 500);
+// Watch for search filter text changes (only in search mode)
+$effect(() => {
+    if (searchMode) {
+        if (searchFilterText.length >= 1) {
+            debouncedSearch.debounced(searchFilterText);
+        }
+        else if (searchFilterText.length === 0) {
+            searchResults = [];
+        }
+    }
 });
-async function loadTeams() {
+async function searchTeams(query) {
+    if (!query)
+        return;
     isFetching = true;
     try {
         const response = (await WorkspaceService.listAvailableTeamsIds({
-            workspace: $workspaceStore
+            workspace: $workspaceStore,
+            search: query
         }));
-        teams = response || [];
+        searchResults = response || [];
         isFetching = false;
-        console.log('Teams loaded:', teams.length);
-        return teams;
+        return searchResults;
     }
     catch (error) {
         isFetching = false;
         onError?.(error);
-        console.error('Error loading teams:', error);
+        console.error('Error searching teams:', error);
+        searchResults = [];
         return [];
     }
 }
+async function refreshSearch() {
+    if (searchMode && searchFilterText.length >= 2) {
+        await searchTeams(searchFilterText);
+    }
+}
 </script>
 
 <div class={containerClass}>
 	<div class="flex items-center gap-2">
 		<div class="flex-grow" style="min-width: {minWidth};">
-			<Select
-				containerStyle={'min-width: ' + minWidth}
-				items={teams?.map((team) => ({
-					label: team.team_name,
-					value: team.team_id
-				})) ?? []}
-				{placeholder}
-				clearable
-				disabled={disabled || isFetching}
-				bind:value={
-					() => selectedTeam?.team_id,
-					(value) => (selectedTeam = teams?.find((team) => team.team_id === value))
-				}
-			/>
+			{#if searchMode}
+				<Select
+					containerStyle={'min-width: ' + minWidth}
+					items={searchFilterText.length >= 1 || (searchFilterText.length === 0 && selectedTeam) ? displayTeams().map((team) => ({
+						label: team.team_name,
+						value: team.team_id
+					})) : []}
+					placeholder={isFetching ? "Searching..." : "Search teams..."}
+					clearable
+					disabled={disabled || isFetching}
+					bind:filterText={searchFilterText}
+					bind:value={
+						() => selectedTeam?.team_id,
+						(value) => {
+							selectedTeam = value ? displayTeams().find((team) => team.team_id === value) : undefined
+						}
+					}
+				/>
+			{:else}
+				<Select
+					containerStyle={'min-width: ' + minWidth}
+					items={displayTeams().map((team) => ({
+						label: team.team_name,
+						value: team.team_id
+					}))}
+					placeholder="Select a team"
+					clearable
+					disabled={disabled || isFetching}
+					bind:value={
+						() => selectedTeam?.team_id,
+						(value) => {
+							selectedTeam = value ? displayTeams().find((team) => team.team_id === value) : undefined
+						}
+					}
+				/>
+			{/if}
 		</div>
 
 		{#if showRefreshButton}
 			<button
-				onclick={loadTeams}
-				disabled={isFetching || disabled}
+				onclick={refreshSearch}
+				disabled={isFetching || disabled || (searchMode && searchFilterText.length < 2)}
 				class="flex items-center justify-center p-1.5 rounded hover:bg-surface-hover focus:bg-surface-hover disabled:opacity-50"
-				title="Refresh teams from Microsoft"
+				title={searchMode ? "Refresh search results" : "Refresh teams from Microsoft"}
 			>
 				<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
 			</button>
 		{/if}
 	</div>
 
-	{#if isFetching || ((!teams || teams.length === 0) && !isFetching)}
-		<div class="text-xs text-tertiary mt-1">
-			{#if isFetching}
-				Fetching teams from Microsoft...
-			{:else}
-				No available teams found
-			{/if}
-		</div>
-	{/if}
 </div>

package/package/components/TeamSelector.svelte.d.ts

@@ -4,7 +4,6 @@ interface TeamItem {
 }
 interface Props {
     disabled?: boolean;
-    placeholder?: string;
     selectedTeam?: TeamItem | undefined;
     containerClass?: string;
     showRefreshButton?: boolean;

package/package/components/TemplateEditor.svelte

@@ -15,6 +15,7 @@ import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
 import { setMonacoJsonOptions } from './monacoLanguagesOptions';
+import { inputBorderClass } from './text_input/TextInput.svelte';
 export const conf = {
     wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
     comments: {
@@ -388,7 +389,13 @@ async function loadMonaco() {
             lineDecorationsWidth: 6,
             lineNumbersMinChars: 2,
             fontSize,
-            suggestOnTriggerCharacters: true
+            suggestOnTriggerCharacters: true,
+            renderLineHighlight: 'none',
+            lineNumbers: 'off',
+            padding: {
+                bottom: 8,
+                top: 8
+            }
         });
     }
     catch (e) {
@@ -431,9 +438,11 @@ async function loadMonaco() {
     }
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
+        isFocus = true;
     });
     editor.onDidBlurEditorText(() => {
         dispatch('blur');
+        isFocus = false;
         updateCode();
     });
     jsLoader = setTimeout(async () => {
@@ -509,6 +518,7 @@ async function loadMonaco() {
 export function focus() {
     editor?.focus();
 }
+let isFocus = false;
 let mounted = false;
 let loadTimeout = undefined;
 onMount(async () => {
@@ -562,19 +572,18 @@ onDestroy(() => {
 {#if !editor}
 	<FakeMonacoPlaceHolder
 		autoheight
+		showNumbers={false}
 		{code}
-		lineNumbersWidth={23}
-		lineNumbersOffset={-8}
-		class="border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip"
+		lineNumbersWidth={14}
+		lineNumbersOffset={-20}
+		class="template nonmain-editor rounded-md min-h-4 bg-surface-secondary !py-[9px] overflow-clip"
 	/>
 {/if}
 <div
 	bind:this={divEl}
-	style="height: 18px;"
-	class="{$$props.class ??
-		''} border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip {!editor
-		? 'hidden'
-		: ''}"
+	style="height: 18px; padding-left: 6px;"
+	class="{inputBorderClass({ forceFocus: isFocus })} {$$props.class ??
+		''} template nonmain-editor rounded-md min-h-4 overflow-clip {!editor ? 'hidden' : ''}"
 	bind:clientWidth={width}
 ></div>