From 7e96c53a2044eec8cfe326e8db4cebea7c2b7a8e Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Mon, 27 Jul 2026 07:11:38 +0200
Subject: [PATCH] feat: multiselect valve input type with static or dynamic
 options (#26884)

Adds a multiselect input type for Valves and UserValves so plugin authors can let users pick multiple values from static or runtime-resolved options instead of maintaining comma-separated text fields with hardcoded allowed-value lists in the description.

ENABLED_ITEMS: list[str] = Field(
    default=["foo"],
    json_schema_extra={"input": {"type": "multiselect", "options": "get_item_options"}},
)

@classmethod
def get_item_options(cls):
    return [{"value": "foo", "label": "Foo"}, {"value": "bar", "label": "Bar"}]

Options accept the same shapes as the existing select input: either a static list (strings or {value, label} dicts) or a classmethod name resolved at request time (including __user__ context for UserValves). No backend changes are needed because resolve_valves_schema_options already resolves options independently of the input type.

The new MultiSelect component follows the existing Select portal dropdown pattern and renders checkbox rows that stay open while toggling, with the selected labels shown in the trigger. Values bind as a real string array end to end: the array-to-comma-string conversions in the chat controls valves panel and the valves modal are skipped for multiselect fields, so the stored valve is a native list[str] validated by Pydantic.

Requested in #26848.
---
 .../components/chat/Controls/Valves.svelte    |   6 +
 src/lib/components/common/MultiSelect.svelte  | 153 ++++++++++++++++++
 src/lib/components/common/Valves.svelte       |  17 +-
 .../workspace/common/ValvesModal.svelte       |   3 +
 4 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/common/MultiSelect.svelte

diff --git a/src/lib/components/chat/Controls/Valves.svelte b/src/lib/components/chat/Controls/Valves.svelte
index 880b55b298..898df9f4ee 100644
--- a/src/lib/components/chat/Controls/Valves.svelte
+++ b/src/lib/components/chat/Controls/Valves.svelte
@@ -62,6 +62,9 @@
 			// Convert array to string
 			for (const property in valvesSpec.properties) {
 				if (valvesSpec.properties[property]?.type === 'array') {
+					if (valvesSpec.properties[property]?.input?.type === 'multiselect') {
+						continue;
+					}
 					valves[property] = (valves[property] ?? []).join(',');
 				}
 			}
@@ -75,6 +78,9 @@
 			// Convert string to array
 			for (const property in valvesSpec.properties) {
 				if (valvesSpec.properties[property]?.type === 'array') {
+					if (valvesSpec.properties[property]?.input?.type === 'multiselect') {
+						continue;
+					}
 					valves[property] = (valves[property] ?? '').split(',').map((v) => v.trim());
 				}
 			}
diff --git a/src/lib/components/common/MultiSelect.svelte b/src/lib/components/common/MultiSelect.svelte
new file mode 100644
index 0000000000..e81199d821
--- /dev/null
+++ b/src/lib/components/common/MultiSelect.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { tick, createEventDispatcher } from 'svelte';
+	import { flyAndScale } from '$lib/utils/transitions';
+
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let value: string[] = [];
+	export let options: ({ label?: string; value: string } | string)[] = [];
+	export let placeholder = '';
+	export let className = '';
+
+	let open = false;
+	let triggerEl;
+	let contentEl;
+
+	$: items = options.map((option) =>
+		typeof option === 'object' && option !== null
+			? { value: option.value, label: option.label ?? option.value }
+			: { value: option, label: option }
+	);
+
+	$: selectedValues = Array.isArray(value) ? value : [];
+	$: selectedLabels = items
+		.filter((item) => selectedValues.includes(item.value))
+		.map((item) => item.label);
+
+	const toggleItem = (itemValue) => {
+		const current = Array.isArray(value) ? value : [];
+		value = current.includes(itemValue)
+			? current.filter((v) => v !== itemValue)
+			: [...current, itemValue];
+		dispatch('change');
+	};
+
+	/** Svelte action: moves the node to document.body (portal) */
+	function portal(node) {
+		document.body.appendChild(node);
+		return {
+			destroy() {
+				if (node.parentNode) {
+					node.parentNode.removeChild(node);
+				}
+			}
+		};
+	}
+
+	function positionContent() {
+		if (!triggerEl || !contentEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+
+		contentEl.style.position = 'fixed';
+		contentEl.style.zIndex = '9999';
+		contentEl.style.top = `${rect.bottom + 4}px`;
+		contentEl.style.left = `${rect.left}px`;
+		contentEl.style.minWidth = `${rect.width}px`;
+	}
+
+	async function toggleOpen() {
+		open = !open;
+		if (open) {
+			await tick();
+			positionContent();
+		}
+	}
+
+	function handleWindowClick(event) {
+		if (!open) return;
+		if (triggerEl?.contains(event.target)) return;
+		if (contentEl?.contains(event.target)) return;
+		open = false;
+	}
+
+	function handleKeydown(event) {
+		if (event.key === 'Escape' && open) {
+			open = false;
+		}
+	}
+</script>
+
+<svelte:window
+	on:click={handleWindowClick}
+	on:keydown={handleKeydown}
+	on:scroll|capture={positionContent}
+	on:resize={positionContent}
+/>
+
+<button
+	bind:this={triggerEl}
+	class={className}
+	aria-label={placeholder}
+	type="button"
+	on:click={toggleOpen}
+>
+	<div class="flex w-full items-center justify-between gap-2">
+		<span class="truncate text-left {selectedLabels.length ? '' : 'text-gray-500'}">
+			{selectedLabels.length ? selectedLabels.join(', ') : placeholder}
+		</span>
+
+		<ChevronDown className="size-3 shrink-0" strokeWidth="2.5" />
+	</div>
+</button>
+
+{#if open}
+	<div use:portal bind:this={contentEl} transition:flyAndScale>
+		<div
+			class="rounded-2xl min-w-[170px] max-h-72 overflow-y-auto p-1 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
+		>
+			{#each items as item}
+				<button
+					class="flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+					type="button"
+					on:click={() => toggleItem(item.value)}
+				>
+					<div
+						class="size-3.5 shrink-0 rounded-sm flex items-center justify-center outline -outline-offset-1 outline-[1.5px] {selectedValues.includes(
+							item.value
+						)
+							? 'bg-black outline-black text-white'
+							: 'outline-gray-200 dark:outline-gray-600'}"
+					>
+						{#if selectedValues.includes(item.value)}
+							<svg
+								class="size-3"
+								aria-hidden="true"
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke="currentColor"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="3"
+									d="m5 12 4.7 4.5 9.3-9"
+								/>
+							</svg>
+						{/if}
+					</div>
+
+					<span
+						class="truncate {selectedValues.includes(item.value)
+							? ''
+							: 'text-gray-500 dark:text-gray-400'}"
+					>
+						{item.label}
+					</span>
+				</button>
+			{/each}
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/common/Valves.svelte b/src/lib/components/common/Valves.svelte
index e174a4ef32..8cca8fd583 100644
--- a/src/lib/components/common/Valves.svelte
+++ b/src/lib/components/common/Valves.svelte
@@ -9,6 +9,7 @@
 	import Switch from './Switch.svelte';
 	import SensitiveInput from './SensitiveInput.svelte';
 	import NativeSelect from './NativeSelect.svelte';
+	import MultiSelect from './MultiSelect.svelte';
 	import MapSelector from './Valves/MapSelector.svelte';
 
 	export let valvesSpec = null;
@@ -37,7 +38,11 @@
 							// Initialize to custom value
 							if ((propertySpec?.type ?? null) === 'array') {
 								const defaultArray = propertySpec?.default ?? [];
-								valves[property] = Array.isArray(defaultArray) ? defaultArray.join(', ') : '';
+								if (propertySpec?.input?.type === 'multiselect') {
+									valves[property] = Array.isArray(defaultArray) ? [...defaultArray] : [];
+								} else {
+									valves[property] = Array.isArray(defaultArray) ? defaultArray.join(', ') : '';
+								}
 							} else {
 								valves[property] = propertySpec?.default ?? '';
 							}
@@ -95,6 +100,16 @@
 									/>
 								</div>
 							</div>
+						{:else if valvesSpec.properties[property]?.input?.type === 'multiselect' && valvesSpec.properties[property]?.input?.options}
+							<MultiSelect
+								className="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
+								bind:value={valves[property]}
+								options={valvesSpec.properties[property].input.options}
+								placeholder={$i18n.t('Select options')}
+								on:change={() => {
+									dispatch('change');
+								}}
+							/>
 						{:else if (valvesSpec.properties[property]?.type ?? null) !== 'string'}
 							<input
 								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
diff --git a/src/lib/components/workspace/common/ValvesModal.svelte b/src/lib/components/workspace/common/ValvesModal.svelte
index 254b758bb9..fc75607131 100644
--- a/src/lib/components/workspace/common/ValvesModal.svelte
+++ b/src/lib/components/workspace/common/ValvesModal.svelte
@@ -129,6 +129,9 @@
 			if (valvesSpec) {
 				for (const property in valvesSpec.properties) {
 					if (valvesSpec.properties[property]?.type === 'array') {
+						if (valvesSpec.properties[property]?.input?.type === 'multiselect') {
+							continue;
+						}
 						if (valves[property] != null) {
 							valves[property] = (Array.isArray(valves[property]) ? valves[property] : []).join(
 								','