From 6eb17d464be0e6eca389c2a14e9906b5ff653f10 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 15 Jul 2025 14:40:14 -0500
Subject: [PATCH 1/4] use multi select

---
 .../{MultiSelect.svelte => Select.svelte}     | 211 +++++++++++++-----
 src/lib/helpers/types/conversationTypes.js    |   2 +
 src/lib/scss/app.scss                         |   2 +-
 .../{_multiselect.scss => _select.scss}       |  18 ++
 src/routes/page/agent/+page.svelte            |  12 +-
 src/routes/page/conversation/+page.svelte     |  85 ++++---
 .../instruction-llm.svelte                    |  53 +++--
 .../instruction-template.svelte               |  53 +++--
 src/routes/page/instruction/log/+page.svelte  | 110 +++++----
 .../page/instruction/testing/+page.svelte     |   7 +-
 10 files changed, 373 insertions(+), 180 deletions(-)
 rename src/lib/common/{MultiSelect.svelte => Select.svelte} (63%)
 rename src/lib/scss/custom/components/{_multiselect.scss => _select.scss} (82%)

diff --git a/src/lib/common/MultiSelect.svelte b/src/lib/common/Select.svelte
similarity index 63%
rename from src/lib/common/MultiSelect.svelte
rename to src/lib/common/Select.svelte
index 9e915c11..1aea0ee4 100644
--- a/src/lib/common/MultiSelect.svelte
+++ b/src/lib/common/Select.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { onMount, createEventDispatcher, tick, afterUpdate } from "svelte";
+	import { onMount, createEventDispatcher, tick } from "svelte";
     import { Input } from "@sveltestrap/sveltestrap";
     import { clickoutsideDirective } from "$lib/helpers/directives";
 
@@ -11,9 +11,15 @@
     /** @type {import('$commonTypes').LabelValuePair[]} */
     export let options = [];
 
+    /** @type {boolean} */
+    export let multiSelect = false;
+
     /** @type {boolean} */
     export let selectAll = true;
 
+    /** @type {boolean} */
+    export let disabled = false;
+
     /** @type {string} */
     export let searchPlaceholder = '';
 
@@ -24,7 +30,7 @@
     export let selectedText = '';
 
     /** @type {string[]} */
-    export let selectedLabels;
+    export let selectedValues = [];
 
     /** @type {string} */
     export let containerClasses = "";
@@ -38,6 +44,9 @@
     /** @type {boolean} */
     export let searchMode = false;
 
+    /** @type {boolean} */
+    export let loadMore = false;
+
     /** @type {null | undefined | (() => Promise<any>)} */
     export let onScrollMoreOptions = null;
 
@@ -64,6 +73,48 @@
     let loading = false;
 
     onMount(() => {
+        initOptions();
+    });
+
+    $: {
+        innerOptions = verifySelectedOptions(innerOptions, selectedValues);
+        refOptions = verifySelectedOptions(innerOptions, selectedValues);
+        changeDisplayText();
+    }
+
+    $: {
+        if (loadMore) {
+            if (options.length > refOptions.length) {
+                const curKeys = refOptions.map(x => x.value);
+                const newOptions = options.filter(x => !curKeys.includes(x.value)).map(x => {
+                    return {
+                        label: x.label,
+                        value: x.value,
+                        checked: false
+                    };
+                });
+
+                innerOptions = [
+                    ...innerOptions,
+                    ...newOptions
+                ];
+
+                refOptions = [
+                    ...refOptions,
+                    ...newOptions
+                ];
+
+                changeDisplayText();
+            }
+        } else {
+            innerOptions = verifySelectedOptions(options, selectedValues);
+            refOptions = verifySelectedOptions(options, selectedValues);
+            changeDisplayText();
+        }
+    }
+
+
+    function initOptions() {
         innerOptions = options.map(x => {
             return {
                 label: x.label,
@@ -79,47 +130,27 @@
                 checked: false
             }
         });
-    });
-
-    $: {
-        innerOptions = innerOptions.map(x => {
-            x.checked = !!selectedLabels?.includes(x.label);
-            return {...x};
-        });
-        refOptions = refOptions.map(x => {
-            x.checked = !!selectedLabels?.includes(x.label);
-            return {...x};
-        });
-        changeDisplayText();
     }
 
-    $: {
-        if (options.length > refOptions.length) {
-            const curKeys = refOptions.map(x => x.label);
-            const newOptions = options.filter(x => !curKeys.includes(x.label)).map(x => {
-                return {
-                    label: x.label,
-                    value: x.value,
-                    checked: false
-                };
-            });
-
-            innerOptions = [
-                ...innerOptions,
-                ...newOptions
-            ];
-
-            refOptions = [
-                ...refOptions,
-                ...newOptions
-            ];
-
-            changeDisplayText();
-        }
+    /**
+	 * @param {any[]} list
+	 * @param {string[]} selecteds
+	 */
+    function verifySelectedOptions(list, selecteds) {
+        return list?.map(x => {
+            const item = { ...x, checked: false };
+            if (multiSelect) {
+                item.checked = !!selecteds?.includes(item.value);
+            } else {
+                item.checked = selecteds.length > 0 && selecteds[0] === item.value;
+            }
+            return item;
+        }) || [];
     }
 
-
     async function toggleOptionList() {
+        if (disabled) return;
+
         showOptionList = !showOptionList;
         if (showOptionList) {
             await tick();
@@ -131,8 +162,10 @@
     /** @param {any} e */
     function changeSearchValue(e) {
         searchValue = e.target.value || '';
+        const innerValue = searchValue.toLowerCase();
+
         if (searchValue) {
-            innerOptions = [...refOptions.filter(x => x.value.includes(searchValue))];
+            innerOptions = [...refOptions.filter(x => x.label.toLowerCase().includes(innerValue))];
         } else {
             innerOptions = [...refOptions];
         }
@@ -147,21 +180,28 @@
 	 */
     function checkOption(e, option) {
         innerOptions = innerOptions.map(x => {
-            if (x.label == option.label) {
-                x.checked = e == null ? !x.checked : e.target.checked;
+            const item = { ...x };
+            if (item.value == option.value) {
+                item.checked = e == null ? !item.checked : e.target.checked;
+            } else if (!multiSelect) {
+                item.checked = false;
             }
-            return { ...x };
+            return item;
         });
 
         refOptions = refOptions.map(x => {
-            if (x.label == option.label) {
-                x.checked = e == null ? !x.checked : e.target.checked;
+            const item = { ...x };
+            if (item.value == option.value) {
+                item.checked = e == null ? !item.checked : e.target.checked;
+            } else if (!multiSelect) {
+                item.checked = false;
             }
-            return { ...x };
+            return item;
         });
 
         changeDisplayText();
         sendEvent();
+        hideOptionList();
     }
 
     /** @param {any} e */
@@ -178,9 +218,9 @@
 
     /** @param {boolean} checked */
     function syncChangesToRef(checked) {
-        const keys = innerOptions.map(x => x.label);
+        const keys = innerOptions.map(x => x.value);
         refOptions = refOptions.map(x => {
-            if (keys.includes(x.label)) {
+            if (keys.includes(x.value)) {
                 return {
                     ...x,
                     checked: checked
@@ -192,20 +232,25 @@
     }
 
     function changeDisplayText() {
-        const count = refOptions.filter(x => x.checked).length;
-        if (count === 0) {
-            displayText = '';
-        } else if (count === options.length) {
-            displayText = `All selected ${selectedText} (${count})`;
+        if (multiSelect) {
+            const count = refOptions.filter(x => x.checked).length;
+            if (count === 0) {
+                displayText = '';
+            } else if (count === options.length) {
+                displayText = `All selected ${selectedText} (${count})`;
+            } else {
+                displayText = `Selected ${selectedText} (${count})`;
+            }
         } else {
-            displayText = `Selected ${selectedText} (${count})`;
+            const selected = refOptions.find(x => x.checked);
+            displayText = selected?.label || '';
         }
 
         verifySelectAll();
     }
 
     function verifySelectAll() {
-        if (!selectAll) return;
+        if (!selectAll || !multiSelect) return;
 
         const innerCount = innerOptions.filter(x => x.checked).length;
         if (innerCount < innerOptions.length) {
@@ -266,6 +311,26 @@
             }
         }
     }
+
+    function clearSelection() {
+        innerOptions = innerOptions.map(x => {
+            return { ...x, checked: false }
+        });
+
+        refOptions = refOptions.map(x => {
+            return { ...x, checked: false }
+        });
+
+        changeDisplayText();
+        sendEvent();
+        hideOptionList();
+    }
+
+    function hideOptionList() {
+        if (!multiSelect) {
+            showOptionList = false;
+        }
+    }
 </script>
 
 
@@ -277,22 +342,24 @@
 >
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-    <ul
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
         class="display-container"
         id={`multiselect-btn-${tag}`}
         on:click={() => toggleOptionList()}
     >
         <Input
             type="text"
-            class='clickable'
+            class={`clickable ${disabled ? 'disabled' : ''}`}
             value={displayText}
             placeholder={placeholder}
+            disabled={disabled}
             readonly
         />
         <div class={`display-suffix ${showOptionList ? 'show-list' : ''}`}>
             <i class="bx bx-chevron-down" />
         </div>
-    </ul>
+    </div>
     {#if showOptionList}
         <ul class="option-list" id={`multiselect-list-${tag}`} on:scroll={() => innerScroll()}>
             {#if searchMode}
@@ -309,18 +376,21 @@
                 </div>
             {/if}
             {#if innerOptions.length > 0}
-                {#if selectAll}
+                {#if selectAll && multiSelect}
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                     <li
                         class="option-item clickable"
-                        on:click={() => checkSelectAll(null)}
+                        on:click|preventDefault|stopPropagation={() => {
+                            checkSelectAll(null);
+                        }}
                     >
                         <div class="line-align-center select-box">
                             <Input
                                 type="checkbox"
+                                style="pointer-events: none;"
                                 checked={selectAllChecked}
-                                on:change={e => checkSelectAll(e)}
+                                readonly
                             />
                         </div>
                         <div class="line-align-center select-name fw-bold">
@@ -328,18 +398,35 @@
                         </div>
                     </li>
                 {/if}
+                {#if !multiSelect}
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+                    <li
+                        class="option-item clickable"
+                        on:click|preventDefault|stopPropagation={() => {
+                            clearSelection();
+                        }}
+                    >
+                        <div class="line-align-center text-secondary">
+                            {`Clear selection`}
+                        </div>
+                    </li>
+                {/if}
                 {#each innerOptions as option, idx (idx)}
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                     <li
                         class="option-item clickable"
-                        on:click={() => checkOption(null, option)}
+                        on:click|preventDefault|stopPropagation={() => {
+                            checkOption(null, option);
+                        }}
                     >
                         <div class="line-align-center select-box">
                             <Input
                                 type="checkbox"
+                                style="pointer-events: none;"
                                 checked={option.checked}
-                                on:change={e => checkOption(e, option)}
+                                readonly
                             />
                         </div>
                         <div class="line-align-center select-name">
diff --git a/src/lib/helpers/types/conversationTypes.js b/src/lib/helpers/types/conversationTypes.js
index a7b436f3..cfda9e15 100644
--- a/src/lib/helpers/types/conversationTypes.js
+++ b/src/lib/helpers/types/conversationTypes.js
@@ -7,6 +7,7 @@
  * @typedef {Object} ConversationFilter
  * @property {import('$commonTypes').Pagination} pager - Pagination
  * @property {string?} [agentId] - The agent id.
+ * @property {string[]?} [agentIds] - The agent ids.
  * @property {string?} [channel] - The conversation channel.
  * @property {string?} [status] - The conversation status.
  * @property {string?} [taskId] - The task id.
@@ -288,6 +289,7 @@ IRichContent.prototype.quick_replies;
 /**
  * @typedef {Object} ConversationSearchOption
  * @property {string?} [agentId]
+ * @property {string[]} [agentIds]
  * @property {string?} [channel]
  * @property {string?} [taskId]
  * @property {string?} [status]
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
index 0a103e52..b7873393 100644
--- a/src/lib/scss/app.scss
+++ b/src/lib/scss/app.scss
@@ -43,7 +43,7 @@ File: Main Css File
 @import "custom/components/file";
 @import "custom/components/audio";
 @import "custom/components/text";
-@import "custom/components/multiselect";
+@import "custom/components/select";
 @import "custom/components/markdown";
 @import "custom/components/state";
 
diff --git a/src/lib/scss/custom/components/_multiselect.scss b/src/lib/scss/custom/components/_select.scss
similarity index 82%
rename from src/lib/scss/custom/components/_multiselect.scss
rename to src/lib/scss/custom/components/_select.scss
index 45e9909a..f17fa349 100644
--- a/src/lib/scss/custom/components/_multiselect.scss
+++ b/src/lib/scss/custom/components/_select.scss
@@ -1,6 +1,17 @@
 .multiselect-container {
     position: relative;
 
+    &.disabled {
+        .display-container {
+            cursor: not-allowed;
+
+            .display-suffix {
+                opacity: 0.65;
+                cursor: not-allowed;
+            }
+        }
+    }
+
     .display-container {
         .display-suffix {
             position: absolute;
@@ -15,6 +26,13 @@
 
         input[type='text'] {
             padding-right: 1.5rem;
+
+            &.disabled {
+                background-color: var(--bs-secondary-bg) !important;
+                color: var(--bs-secondary-color);
+                cursor: not-allowed;
+                opacity: 0.65;
+            }
         }
 
         .show-list {
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
index 83efd7aa..0686b7b8 100644
--- a/src/routes/page/agent/+page.svelte
+++ b/src/routes/page/agent/+page.svelte
@@ -9,7 +9,7 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 	import PlainPagination from '$lib/common/PlainPagination.svelte';
-	import MultiSelect from '$lib/common/MultiSelect.svelte';
+	import Select from '$lib/common/Select.svelte';
   	import { createAgent, getAgentLabels, getAgents } from '$lib/services/agent-service.js';
 	import { AgentType, GlobalEvent, UserPermission } from '$lib/helpers/enums';
   	import { myInfo } from '$lib/services/auth-service';
@@ -255,21 +255,23 @@
 		{/if}
 	</div>
 	<div class="agent-filter">
-		<MultiSelect
+		<Select
 			tag={'agent-label-select'}
 			placeholder={'Select labels'}
 			selectedText={'labels'}
+			multiSelect
 			searchMode
-			selectedLabels={selectedAgentLabels}
+			selectedValues={selectedAgentLabels}
 			options={agentLabelOptions}
 			on:select={e => selectAgentLabelOption(e)}
 		/>
-		<MultiSelect
+		<Select
 			tag={'agent-type-select'}
 			placeholder={'Select types'}
 			selectedText={'types'}
+			multiSelect
 			searchMode
-			selectedLabels={selectedAgentTypes}
+			selectedValues={selectedAgentTypes}
 			options={agentTypeOptions}
 			on:select={e => selectAgentTypeOption(e)}
 		/>
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 0ba8ffac..34432978 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -18,6 +18,7 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import TablePagination from '$lib/common/TablePagination.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import Select from '$lib/common/Select.svelte';
 	import { getAgentOptions } from '$lib/services/agent-service';
 	import { getConversations, deleteConversation, getConversationStateSearchKeys } from '$lib/services/conversation-service.js';
 	import { utcToLocal } from '$lib/helpers/datetime';
@@ -55,23 +56,24 @@
 	/** @type {string[]} */
 	let searchStateStrs = [];
 
-	/** @type {import('$commonTypes').IdName[]} */
+	/** @type {import('$commonTypes').LabelValuePair[]} */
 	let agentOptions = [];
 
-	/** @type {import('$commonTypes').IdName[]} */
+	/** @type {import('$commonTypes').LabelValuePair[]} */
 	let statusOptions = [
-		{ id: 'open', name: 'Active' },
-		{ id: 'closed', name: 'Completed' }
+		{ value: 'open', label: 'Active' },
+		{ value: 'closed', label: 'Completed' }
 	];
 
-	/** @type {import('$commonTypes').IdName[]} */
+	/** @type {import('$commonTypes').LabelValuePair[]} */
 	let channelOptions = Object.entries(ConversationChannel).map(([k, v]) => (
-		{ id: k.toLowerCase(), name: v }
+		{ value: k.toLowerCase(), label: v }
 	));
 
 	/** @type {import('$conversationTypes').ConversationSearchOption} */
 	let searchOption = {
 		agentId: null,
+		agentIds: [],
 		channel: null,
 		status: null,
 		taskId: null,
@@ -134,8 +136,8 @@
 			getAgentOptions().then(res => {
 				agentOptions = res?.map(x => {
 					return {
-						id: x.id,
-						name: x.name
+						label: x.name || '',
+						value: x.id || ''
 					};
 				}) || [];
 				resolve(agentOptions);
@@ -276,6 +278,7 @@
 		filter = {
 			...filter,
 			agentId: searchOption.agentId,
+			agentIds: searchOption.agentIds,
 			channel: searchOption.channel,
 			status: searchOption.status,
 			taskId: searchOption.taskId,
@@ -339,25 +342,28 @@
 	 * @param {string} type
 	 */
 	function changeOption(e, type) {
+		// @ts-ignore
+		const selectedValues = e?.detail?.selecteds?.map(x => x.value) || [];
+
 		if (type === 'agent') {
 			searchOption = {
 				...searchOption,
-				agentId: e.target.value || null
+				agentIds: selectedValues
 			};
 		} else if (type === 'task') {
 			searchOption = {
 				...searchOption,
-				taskId: e.target.value || null
+				taskId: selectedValues.length > 0 ? selectedValues[0] : null
 			};
 		} else if (type === 'channel') {
 			searchOption = {
 				...searchOption,
-				channel: e.target.value || null
+				channel: selectedValues.length > 0 ? selectedValues[0] : null
 			};
 		} else if (type === 'status') {
 			searchOption = {
 				...searchOption,
-				status: e.target.value || null
+				status: selectedValues.length > 0 ? selectedValues[0] : null
 			};
 		} else if (type === 'tags') {
 			searchOption = {
@@ -424,33 +430,46 @@
 			<CardBody class="border-bottom">
 				<Row class="g-3">
 					<Col lg="3">
-						<select class="form-select" id="idAgent" value={searchOption.agentId} on:change={e => changeOption(e, 'agent')}>
-							<option value={null}>{$_('Select Agent')}</option>
-							{#each agentOptions as op}
-								<option value={`${op.id}`} selected={op.id === searchOption.agentId}>{$_(`${op.name}`)}</option>
-							{/each}
-						</select>
+						<Select
+							tag={'agent-select'}
+							placeholder={'Select Agents'}
+							selectedText={'agents'}
+							multiSelect
+							searchMode
+							selectedValues={searchOption.agentIds}
+							options={agentOptions}
+							on:select={e => changeOption(e, 'agent')}
+						/>
 					</Col>
 					<Col lg="2">
-						<select class="form-select" id="idTask" value={searchOption.taskId} on:change={e => changeOption(e, 'task')}>
-							<option value={null}>{$_('Select Task')}</option>
-						</select>
+						<Select
+							tag={'task-select'}
+							placeholder={'Select Task'}
+							selectedText={'task'}
+							selectedValues={[]}
+							options={[]}
+							on:select={e => changeOption(e, 'task')}
+						/>
 					</Col>					
 					<Col lg="2">
-						<select class="form-select" id="idStatus" value={searchOption.status} on:change={e => changeOption(e, 'status')}>
-							<option value={null}>{$_('Select Status')}</option>
-							{#each statusOptions as op}
-								<option value={`${op.id}`} selected={op.id === searchOption.status}>{$_(`${op.name}`)}</option>
-							{/each}
-						</select>
+						<Select
+							tag={'task-select'}
+							placeholder={'Select Status'}
+							selectedText={'status'}
+							selectedValues={searchOption.status ? [searchOption.status] : []}
+							options={statusOptions}
+							on:select={e => changeOption(e, 'status')}
+						/>
 					</Col>
 					<Col lg="2">
-						<select class="form-select" id="idChannel" value={searchOption.channel} on:change={e => changeOption(e, 'channel')}>
-							<option value={null}>{$_('Select Channel')}</option>
-							{#each channelOptions as op}
-								<option value={`${op.id}`} selected={op.id === searchOption.channel}>{$_(`${op.name}`)}</option>
-							{/each}
-						</select>
+						<Select
+							tag={'channel-select'}
+							placeholder={'Select Channel'}
+							selectedText={'channel'}
+							selectedValues={searchOption.channel ? [searchOption.channel] : []}
+							options={channelOptions}
+							on:select={e => changeOption(e, 'channel')}
+						/>
 					</Col>
 					<Col lg="2">
 						<Input
diff --git a/src/routes/page/instruction/instruction-components/instruction-llm.svelte b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
index 7502af47..fcd05d39 100644
--- a/src/routes/page/instruction/instruction-components/instruction-llm.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
@@ -1,6 +1,7 @@
 <script>
     import { afterUpdate, createEventDispatcher, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
+    import Select from '$lib/common/Select.svelte';
 
     const svelteDispatch = createEventDispatcher();
 
@@ -16,7 +17,7 @@
     /** @type {any} */
     export let selectedModel = null;
 
-    /** @type {any[]} */
+    /** @type {import('$commonTypes').LabelValuePair[]} */
     let providerOptions = [];
     /** @type {any[]} */
     let modelOptions = [];
@@ -36,23 +37,25 @@
     /** @param {import('$commonTypes').LlmConfig[]} llmConfigs */
     function collectLlmOptions(llmConfigs) {
         providerOptions = llmConfigs?.map(x => ({
-            id: x.provider,
-            name: x.provider
-        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+            label: x.provider,
+            value: x.provider
+        }))?.sort((a, b) => a.label.localeCompare(b.label)) || [];
     }
 
     /** @param {any} e */
     function selectProvider(e) {
-        const selected = e.target.value || null;
-        selectedProvider = llmConfigs?.find(x => x.provider === selected) || null;
+        // @ts-ignore
+		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
+        selectedProvider = llmConfigs?.find(x => x.provider === selectedValues[0]) || null;
         onProviderChanged();
         disPatchEvent();
     }
 
     /** @param {any} e */
     function selectModel(e) {
-        const selected = e.target.value || null;
-        selectedModel = modelOptions.find(x => x.id === selected);
+        // @ts-ignore
+		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
+        selectedModel = modelOptions.find(x => x.id === selectedValues[0]);
         disPatchEvent();
     }
 
@@ -60,11 +63,13 @@
     function onProviderChanged(targetModel = null) {
         modelOptions = selectedProvider?.models?.map(x => ({
             id: x.name,
-            name: x.name
-        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+            name: x.name,
+            label: x.name,
+            value: x.name
+        }))?.sort((a, b) => a.label.localeCompare(b.label)) || [];
 
         if (!!targetModel) {
-            selectedModel = modelOptions.find(x => x.name === targetModel) || null;
+            selectedModel = modelOptions.find(x => x.value === targetModel) || null;
         } else {
             selectedModel = modelOptions.length > 0 ? modelOptions[0] : null;
         }
@@ -83,24 +88,42 @@
     <div class="instruct-setting-item">
         <div class="instruct-setting-dropdown">
             <div class="text-primary fw-bold mb-1">Provider</div>
-            <select class="form-select" id="provider" value={selectedProvider?.provider || null} disabled={disabled} on:change={e => selectProvider(e)}>
+            <!-- <select class="form-select" id="provider" value={selectedProvider?.provider || null} disabled={disabled} on:change={e => selectProvider(e)}>
                 <option value={null} disabled selected>{$_('Select Provider')}</option>
                 {#each providerOptions as op}
                     <option value={`${op.id}`} selected={op.id === selectedProvider?.provider}>{$_(`${op.name}`)}</option>
                 {/each}
-            </select>
+            </select> -->
+            <Select
+                tag={'provider-select'}
+                placeholder={'Select Provider'}
+                searchMode
+                disabled={disabled}
+                selectedValues={selectedProvider?.provider ? [selectedProvider.provider] : []}
+                options={providerOptions}
+                on:select={e => selectProvider(e)}
+            />
         </div>
     </div>
 
     <div class="instruct-setting-item">
         <div class="instruct-setting-dropdown">
             <div class="text-primary fw-bold mb-1">Model</div>
-            <select class="form-select" id="model" value={selectedModel?.id || null} disabled={disabled} on:change={e => selectModel(e)}>
+            <!-- <select class="form-select" id="model" value={selectedModel?.id || null} disabled={disabled} on:change={e => selectModel(e)}>
                 <option value={null} disabled selected>{$_('Select Model')}</option>
                 {#each modelOptions as op}
                     <option value={`${op.id}`} selected={op.id === selectedModel?.id}>{$_(`${op.name}`)}</option>
                 {/each}
-            </select>
+            </select> -->
+            <Select
+                tag={'model-select'}
+                placeholder={'Select Model'}
+                searchMode
+                disabled={disabled}
+                selectedValues={selectedModel?.id ? [selectedModel.id] : []}
+                options={modelOptions}
+                on:select={e => selectModel(e)}
+            />
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-template.svelte b/src/routes/page/instruction/instruction-components/instruction-template.svelte
index 578f28b9..c828f454 100644
--- a/src/routes/page/instruction/instruction-components/instruction-template.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-template.svelte
@@ -1,6 +1,7 @@
 <script>
     import { createEventDispatcher, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
+    import Select from '$lib/common/Select.svelte';
 
     const svelteDispatch = createEventDispatcher();
 
@@ -10,7 +11,7 @@
     /** @type {boolean} */
     export let disabled = false;
 
-    /** @type {any[]} */
+    /** @type {import('$commonTypes').LabelValuePair[]} */
     let agentOptions = [];
     /** @type {any[]} */
     let templateOptions = [];
@@ -29,33 +30,37 @@
 	 */
     function collectAgentOptions(agents) {
         agentOptions = agents?.filter(x => x.templates?.length > 0).map(x => ({
-            id: x.id,
-            name: x.name
-        }))?.sort((a, b) => a.name.localeCompare(b.name)) || [];
+            label: x.name,
+            value: x.id
+        }))?.sort((a, b) => a.label.localeCompare(b.label)) || [];
     }
 
     /** @param {any} e */
     function selectAgent(e) {
-        const selected = e.target.value || null;
+        // @ts-ignore
+		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
         selectedTemplate = null;
-        selectedAgent = agents?.find(x => x.id === selected) || null;
+        selectedAgent = agents?.find(x => x.id === selectedValues[0]) || null;
         templateOptions = selectedAgent?.templates?.map(x => ({
             id: x.name,
             name: x.name,
+            label: x.name,
+            value: x.name,
             content: x.content
         })) || [];
 
-        disPatchEvent();
+        dispatchEvent();
     }
 
     /** @param {any} e */
     function selectTemplate(e) {
-        const selected = e.target.value || null;
-        selectedTemplate = templateOptions.find(x => x.id === selected) || null;
-        disPatchEvent();
+        // @ts-ignore
+		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
+        selectedTemplate = templateOptions.find(x => x.value === selectedValues[0]) || null;
+        dispatchEvent();
     }
 
-    function disPatchEvent() {
+    function dispatchEvent() {
         svelteDispatch('agentSelected', {
             agent: selectedAgent,
             template: selectedTemplate
@@ -68,24 +73,42 @@
     <div class="instruct-setting-item">
         <div class="instruct-setting-dropdown">
             <div class="text-primary fw-bold mb-1">Agent</div>
-            <select class="form-select" id="agent" value={selectedAgent?.id || null} disabled={disabled} on:change={e => selectAgent(e)}>
+            <!-- <select class="form-select" id="agent" value={selectedAgent?.id || null} disabled={disabled} on:change={e => selectAgent(e)}>
                 <option value={null}>{$_('Select Agent')}</option>
                 {#each agentOptions as op}
                     <option value={`${op.id}`} selected={op.id === selectedAgent?.id}>{$_(`${op.name}`)}</option>
                 {/each}
-            </select>
+            </select> -->
+            <Select
+                tag={'agent-select'}
+                placeholder={'Select Agent'}
+                searchMode
+                disabled={disabled}
+                selectedValues={selectedAgent?.id ? [selectedAgent.id] : []}
+                options={agentOptions}
+                on:select={e => selectAgent(e)}
+            />
         </div>
     </div>
 
     <div class="instruct-setting-item">
         <div class="instruct-setting-dropdown">
             <div class="text-primary fw-bold mb-1">Template</div>
-            <select class="form-select" id="template" value={selectedTemplate?.id || null} disabled={disabled} on:change={e => selectTemplate(e)}>
+            <!-- <select class="form-select" id="template" value={selectedTemplate?.id || null} disabled={disabled} on:change={e => selectTemplate(e)}>
                 <option value={null}>{$_('Select Template')}</option>
                 {#each templateOptions as op}
                     <option value={`${op.id}`} selected={op.id === selectedTemplate?.id}>{$_(`${op.name}`)}</option>
                 {/each}
-            </select>
+            </select> -->
+            <Select
+                tag={'template-select'}
+                placeholder={'Select Template'}
+                searchMode
+                disabled={disabled}
+                selectedValues={selectedTemplate?.id ? [selectedTemplate.id] : []}
+                options={templateOptions}
+                on:select={e => selectTemplate(e)}
+            />
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index b0efd88c..118b81bd 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -14,6 +14,7 @@
 	import LogItem from './log-item.svelte';
 	import { removeDuplicates } from '$lib/helpers/utils/common';
 	import StateSearch from '$lib/common/StateSearch.svelte';
+	import Select from '$lib/common/Select.svelte';
 	import {
 		getPagingQueryParams,
 		setUrlQueryParams,
@@ -35,7 +36,7 @@
     /** @type {import('$instructTypes').InstructionLogModel[]} */
 	let logItems = [];
 
-    /** @type {import('$commonTypes').IdName[]} */
+    /** @type {import('$commonTypes').LabelValuePair[]} */
 	let agentOptions = [];
 
     /** @type {import('$commonTypes').LlmConfig[]} */
@@ -49,9 +50,9 @@
 
     /** @type {any} */
 	let searchOption = {
-		agentId: null,
-		provider: null,
-		model: null,
+		agentIds: [],
+		providers: [],
+		models: [],
         template: '',
 		states: []
 	};
@@ -93,8 +94,8 @@
 			getAgentOptions().then(res => {
 				agentOptions = res?.map(x => {
 					return {
-						id: x.id,
-						name: x.name
+						label: x.name || '',
+						value: x.id || ''
 					};
 				}) || [];
 				resolve(agentOptions);
@@ -110,10 +111,10 @@
 			getLlmConfigs().then(res => {
 				llmConfigs = res || [];
                 providerOptions = llmConfigs.map(x => ({
-                    id: x.provider,
-                    name: x.provider,
+					label: x.provider,
+					value: x.provider,
                     models: x.models || []
-                })).sort((a, b) => a.name.localeCompare(b.name));
+                })).sort((a, b) => a.label.localeCompare(b.label));
                 modelOptions = [];
 				resolve(llmConfigs);
 			}).catch((error) => {
@@ -167,29 +168,36 @@
 	 * @param {string} type
 	 */
 	function changeOption(e, type) {
-        const value = e.target.value;
+		// @ts-ignore
+		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
+
 		if (type === 'agent') {
 			searchOption = {
 				...searchOption,
-				agentId: value || null
+				agentIds: selectedValues
 			};
 		} else if (type === 'provider') {
 			searchOption = {
 				...searchOption,
-				provider: value || null,
-                model: null,
+				// @ts-ignore
+				providers: selectedValues,
+                models: [],
 			};
 
-            const models = llmConfigs.find(x => x.provider === value)?.models?.map(x => ({
-                id: x.name,
-                name: x.name
-            })) || [];
-            const uniqueModels = removeDuplicates(models, 'id');
-            modelOptions = uniqueModels.sort((a, b) => a.name.localeCompare(b.name)) || [];
+			if (selectedValues.length > 0) {
+				const models = llmConfigs.find(x => x.provider === selectedValues[0])?.models?.map(x => ({
+					label: x.name,
+					value: x.name
+				})) || [];
+				const uniqueModels = removeDuplicates(models, 'label');
+				modelOptions = uniqueModels.sort((a, b) => a.label.localeCompare(b.label)) || [];
+			} else {
+				modelOptions = [];
+			}
 		} else if (type === 'model') {
             searchOption = {
 				...searchOption,
-				model: value || null
+				models: selectedValues
 			};
         }
 	}
@@ -201,18 +209,18 @@
     }
 
     function prepareFilter() {
-        const agentId = searchOption.agentId || null;
-        const provider = searchOption.provider || null;
-        const model = searchOption.model || null;
+        const agentIds = searchOption.agentIds;
+        const providers = searchOption.providers;
+        const models = searchOption.models;
         const template = util.trim(searchOption.template) || null;
 		const states = getSearchStates();
 
         filter = {
             ...filter,
             page: firstPage,
-            agentIds: agentId ? [agentId] : [],
-            providers: provider ? [provider] : [],
-            models: model ? [model] : [],
+            agentIds: agentIds,
+            providers: providers,
+            models: models,
             templateNames: template ? [template] : [],
 			states: states
         };
@@ -251,7 +259,7 @@
 			getInstructionLogSearchKeys({
 				query: query,
 				keyLimit: 20,
-				agentIds: searchOption.agentId ? [searchOption.agentId] : null
+				agentIds: searchOption.agentIds
 			}).then(res => {
 				resolve(res || []);
 			}).catch(() => resolve([]));
@@ -303,28 +311,38 @@
 			<CardBody class="border-bottom">
 				<Row class="g-3">
 					<Col lg="3">
-						<select class="form-select" id="idAgent" value={searchOption.agentId} on:change={e => changeOption(e, 'agent')}>
-							<option value={null}>{$_('Select Agent')}</option>
-							{#each agentOptions as op}
-								<option value={`${op.id}`} selected={op.id === searchOption.agentId}>{$_(`${op.name}`)}</option>
-							{/each}
-						</select>
+						<Select
+							tag={'agent-select'}
+							placeholder={'Select Agents'}
+							selectedText={'agents'}
+							multiSelect
+							searchMode
+							selectedValues={searchOption.agentIds}
+							options={agentOptions}
+							on:select={e => changeOption(e, 'agent')}
+						/>
 					</Col>
 					<Col lg="2">
-						<select class="form-select" id="idProvider" value={searchOption.provider} on:change={e => changeOption(e, 'provider')}>
-							<option value={null}>{$_('Select Llm Provider')}</option>
-							{#each providerOptions as op}
-								<option value={`${op.id}`} selected={op.id === searchOption.provider}>{$_(`${op.name}`)}</option>
-							{/each}
-						</select>
-					</Col>					
+						<Select
+							tag={'llm-provider-select'}
+							placeholder={'Select LLM Provider'}
+							searchMode
+							selectedValues={searchOption.providers}
+							options={providerOptions}
+							on:select={e => changeOption(e, 'provider')}
+						/>
+					</Col>
 					<Col lg="3">
-						<select class="form-select" id="idModel" value={searchOption.model} on:change={e => changeOption(e, 'model')}>
-							<option value={null}>{$_('Select Llm Model')}</option>
-							{#each modelOptions as op}
-								<option value={`${op.id}`} selected={op.id === searchOption.model}>{$_(`${op.name}`)}</option>
-							{/each}
-						</select>
+						<Select
+							tag={'llm-model-select'}
+							placeholder={'Select LLM Model'}
+							selectedText={'models'}
+							multiSelect
+							searchMode
+							selectedValues={searchOption.models}
+							options={modelOptions}
+							on:select={e => changeOption(e, 'model')}
+						/>
 					</Col>
 					<Col lg="3">
 						<Input bind:value={searchOption.template} maxlength={100} placeholder={'Search template...'} />
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index cbc0cc7e..067a22f3 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -138,14 +138,15 @@
     /** @param {any} e */
     function onAgentSelected(e) {
         selectedAgent = e.detail.agent || null;
-        instruction = selectedAgent?.instruction || '';
+        let text = selectedAgent?.instruction;
 
         const template = e.detail.template || null;
         selectedTemplate = template?.name || null;
         if (!!template) {
-            instruction = template?.content || '';
+            text = template?.content;
         }
-
+        
+        instruction = text || '';
         const providerName = selectedAgent?.llm_config?.provider || null;
         const modelName = selectedAgent?.llm_config?.model || null;
         selectedProvider = llmConfigs?.find(x => x.provider === providerName) || null;

From c17aacbb6593590102aae0bfaf3f4dbf7e3fca13 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 15 Jul 2025 14:41:53 -0500
Subject: [PATCH 2/4] rename

---
 src/routes/page/instruction/testing/+page.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index 067a22f3..dfc25921 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -138,15 +138,15 @@
     /** @param {any} e */
     function onAgentSelected(e) {
         selectedAgent = e.detail.agent || null;
-        let text = selectedAgent?.instruction;
+        let localText = selectedAgent?.instruction;
 
         const template = e.detail.template || null;
         selectedTemplate = template?.name || null;
         if (!!template) {
-            text = template?.content;
+            localText = template?.content;
         }
-        
-        instruction = text || '';
+
+        instruction = localText || '';
         const providerName = selectedAgent?.llm_config?.provider || null;
         const modelName = selectedAgent?.llm_config?.model || null;
         selectedProvider = llmConfigs?.find(x => x.provider === providerName) || null;

From 5ec010a724bf20e6774ba67f9570d35a518c8946 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 15 Jul 2025 14:44:55 -0500
Subject: [PATCH 3/4] clean code

---
 src/lib/scss/custom/components/_select.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/lib/scss/custom/components/_select.scss b/src/lib/scss/custom/components/_select.scss
index f17fa349..0271e5ff 100644
--- a/src/lib/scss/custom/components/_select.scss
+++ b/src/lib/scss/custom/components/_select.scss
@@ -1,17 +1,6 @@
 .multiselect-container {
     position: relative;
 
-    &.disabled {
-        .display-container {
-            cursor: not-allowed;
-
-            .display-suffix {
-                opacity: 0.65;
-                cursor: not-allowed;
-            }
-        }
-    }
-
     .display-container {
         .display-suffix {
             position: absolute;

From 48b315bde9c5ed88621a5fc588732dec8a20fb8e Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 15 Jul 2025 17:09:42 -0500
Subject: [PATCH 4/4] clean code

---
 .../instruction-llm.svelte                    | 26 +++++--------------
 .../instruction-template.svelte               | 10 +++----
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/routes/page/instruction/instruction-components/instruction-llm.svelte b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
index fcd05d39..da5529be 100644
--- a/src/routes/page/instruction/instruction-components/instruction-llm.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
@@ -11,7 +11,7 @@
     /** @type {boolean} */
     export let disabled = false;
 
-    /** @type {import('$commonTypes').LlmConfig?} */
+    /** @type {import('$commonTypes').LlmConfig | null | undefined} */
     export let selectedProvider = null;
 
     /** @type {any} */
@@ -46,17 +46,17 @@
     function selectProvider(e) {
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
-        selectedProvider = llmConfigs?.find(x => x.provider === selectedValues[0]) || null;
+        selectedProvider = selectedValues.length > 0 ? llmConfigs?.find(x => x.provider === selectedValues[0]) : null;
         onProviderChanged();
-        disPatchEvent();
+        dispatchEvent();
     }
 
     /** @param {any} e */
     function selectModel(e) {
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
-        selectedModel = modelOptions.find(x => x.id === selectedValues[0]);
-        disPatchEvent();
+        selectedModel = selectedValues.length > 0 ? modelOptions.find(x => x.id === selectedValues[0]) : null;
+        dispatchEvent();
     }
 
     /** @param {any?} targetModel */
@@ -75,9 +75,9 @@
         }
     }
 
-    function disPatchEvent() {
+    function dispatchEvent() {
         svelteDispatch('llmSelected', {
-            provider: selectedProvider,
+            provider: selectedProvider || null,
             model: selectedModel?.name
         });
     }
@@ -88,12 +88,6 @@
     <div class="instruct-setting-item">
         <div class="instruct-setting-dropdown">
             <div class="text-primary fw-bold mb-1">Provider</div>
-            <!-- <select class="form-select" id="provider" value={selectedProvider?.provider || null} disabled={disabled} on:change={e => selectProvider(e)}>
-                <option value={null} disabled selected>{$_('Select Provider')}</option>
-                {#each providerOptions as op}
-                    <option value={`${op.id}`} selected={op.id === selectedProvider?.provider}>{$_(`${op.name}`)}</option>
-                {/each}
-            </select> -->
             <Select
                 tag={'provider-select'}
                 placeholder={'Select Provider'}
@@ -109,12 +103,6 @@
     <div class="instruct-setting-item">
         <div class="instruct-setting-dropdown">
             <div class="text-primary fw-bold mb-1">Model</div>
-            <!-- <select class="form-select" id="model" value={selectedModel?.id || null} disabled={disabled} on:change={e => selectModel(e)}>
-                <option value={null} disabled selected>{$_('Select Model')}</option>
-                {#each modelOptions as op}
-                    <option value={`${op.id}`} selected={op.id === selectedModel?.id}>{$_(`${op.name}`)}</option>
-                {/each}
-            </select> -->
             <Select
                 tag={'model-select'}
                 placeholder={'Select Model'}
diff --git a/src/routes/page/instruction/instruction-components/instruction-template.svelte b/src/routes/page/instruction/instruction-components/instruction-template.svelte
index c828f454..e7a9ffbe 100644
--- a/src/routes/page/instruction/instruction-components/instruction-template.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-template.svelte
@@ -16,7 +16,7 @@
     /** @type {any[]} */
     let templateOptions = [];
 
-    /** @type {import('$agentTypes').AgentModel?} */
+    /** @type {import('$agentTypes').AgentModel | null | undefined} */
     let selectedAgent = null;
     /** @type {any} */
     let selectedTemplate = null;
@@ -40,7 +40,7 @@
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
         selectedTemplate = null;
-        selectedAgent = agents?.find(x => x.id === selectedValues[0]) || null;
+        selectedAgent = selectedValues.length > 0 ? agents?.find(x => x.id === selectedValues[0]) : null;
         templateOptions = selectedAgent?.templates?.map(x => ({
             id: x.name,
             name: x.name,
@@ -56,14 +56,14 @@
     function selectTemplate(e) {
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
-        selectedTemplate = templateOptions.find(x => x.value === selectedValues[0]) || null;
+        selectedTemplate = selectedValues.length > 0 ? templateOptions.find(x => x.value === selectedValues[0]) : null;
         dispatchEvent();
     }
 
     function dispatchEvent() {
         svelteDispatch('agentSelected', {
-            agent: selectedAgent,
-            template: selectedTemplate
+            agent: selectedAgent || null,
+            template: selectedTemplate || null
         });
     }
 </script>