Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/datasets/documents/detail/completed/index.tsx

@@ -1,10 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import React, { memo, useEffect, useMemo, useState } from 'react'
+import { useDebounceFn } from 'ahooks'
 import { HashtagIcon } from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import { debounce, isNil, omitBy } from 'lodash-es'
+import { isNil, omitBy } from 'lodash-es'
 import {
   RiCloseLine,
   RiEditLine,
@@ -241,7 +242,8 @@ const Completed: FC<ICompletedProps> = ({
   // the current segment id and whether to show the modal
   const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean }>({ showModal: false })
 
-  const [searchValue, setSearchValue] = useState<string>() // the search value
+  const [inputValue, setInputValue] = useState<string>('') // the input value
+  const [searchValue, setSearchValue] = useState<string>('') // the search value
   const [selectedStatus, setSelectedStatus] = useState<boolean | 'all'>('all') // the selected status, enabled/disabled/undefined
 
   const [lastSegmentsRes, setLastSegmentsRes] = useState<SegmentsResponse | undefined>(undefined)
@@ -250,6 +252,15 @@ const Completed: FC<ICompletedProps> = ({
   const [total, setTotal] = useState<number | undefined>()
   const { eventEmitter } = useEventEmitterContextContext()
 
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchValue(inputValue)
+  }, { wait: 500 })
+
+  const handleInputChange = (value: string) => {
+    setInputValue(value)
+    handleSearch()
+  }
+
   const onChangeStatus = ({ value }: Item) => {
     setSelectedStatus(value === 'all' ? 'all' : !!value)
   }
@@ -391,7 +402,14 @@ const Completed: FC<ICompletedProps> = ({
           defaultValue={'all'}
           className={s.select}
           wrapperClassName='h-fit w-[120px] mr-2' />
-        <Input showLeftIcon wrapperClassName='!w-52' className='!h-8' onChange={debounce(e => setSearchValue(e.target.value), 500)} />
+        <Input
+          showLeftIcon
+          showClearIcon
+          wrapperClassName='!w-52'
+          value={inputValue}
+          onChange={e => handleInputChange(e.target.value)}
+          onClear={() => handleInputChange('')}
+        />
       </div>
       <InfiniteVirtualList
         embeddingAvailable={embeddingAvailable}