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(
 								','