add search name box

Author: Jicheng Lu

src/lib/common/Select.svelte

@@ -373,6 +373,7 @@
     >
         <Input
             type="text"
+            name={'select-display-text'}
             class={`clickable ${disabled ? 'disabled' : ''}`}
             value={displayText}
             placeholder={placeholder}
@@ -392,6 +393,7 @@
                     </div>
                     <Input
                         type="text"
+                        name={'select-search-text'}
                         value={searchValue}
                         placeholder={searchPlaceholder}
                         on:input={e => changeSearchValue(e)}
@@ -411,6 +413,7 @@
                         <div class="line-align-center select-box">
                             <Input
                                 type="checkbox"
+                                name={'select-select-all'}
                                 style="pointer-events: none;"
                                 checked={selectAllChecked}
                                 readonly
@@ -448,6 +451,7 @@
                             {#if multiSelect}
                                 <Input
                                     type="checkbox"
+                                    name={`select-checkbox-${option.value}`}
                                     style="pointer-events: none;"
                                     checked={option.checked}
                                     readonly

src/lib/scss/custom/pages/_agent.scss

@@ -29,7 +29,7 @@
             gap: 8px;
 
             > * {
-                width: 100%;
+                width: 100% !important;
             }
         }
     }

src/routes/page/agent/+page.svelte

@@ -4,7 +4,7 @@
 	import { goto } from '$app/navigation';
 	import Swal from 'sweetalert2';
 	import { page } from '$app/stores';
-	import { Button, Col, Row } from '@sveltestrap/sveltestrap';
+	import { Button, Col, Input, Row } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
@@ -281,6 +281,13 @@
 		{/if}
 	</div>
 	<div class="agent-filter">
+		<Input
+			type="text"
+			placeholder="Search by name"
+			style="width: fit-content;"
+			value={filter.similarName}
+			on:input={e => filter.similarName = e.target.value?.trim()}
+		/>
 		<Select
 			tag={'agent-label-select'}
 			placeholder={'Select labels'}

src/routes/page/conversation/+page.svelte

@@ -20,10 +20,14 @@
 	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';
 	import { ConversationChannel, TimeRange } from '$lib/helpers/enums';
 	import { TIME_RANGE_OPTIONS } from '$lib/helpers/constants';
+	import {
+		getConversations,
+		deleteConversation,
+		getConversationStateSearchKeys
+	} from '$lib/services/conversation-service.js';
 	import {
 		getPagingQueryParams,
 		setUrlQueryParams,