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}

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

@@ -78,7 +78,6 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
                 placeholder={`${t('datasetDocuments.metadata.placeholder.add')}${label}`}
               />
               : <Input
-                className={s.input}
                 onChange={e => onUpdate?.(e.target.value)}
                 value={value}
                 defaultValue={defaultValue}

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

@@ -4,9 +4,9 @@ import React, { useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
+import { useDebounce, useDebounceFn } from 'ahooks'
 import { groupBy, omit } from 'lodash-es'
 import { PlusIcon } from '@heroicons/react/24/solid'
-import { useDebounce } from 'ahooks'
 import List from './list'
 import s from './style.module.css'
 import Loading from '@/app/components/base/loading'
@@ -77,6 +77,7 @@ export const fetcher = (url: string) => get(url, {}, {})
 
 const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
   const { t } = useTranslation()
+  const [inputValue, setInputValue] = useState<string>('') // the input value
   const [searchValue, setSearchValue] = useState<string>('')
   const [currPage, setCurrPage] = React.useState<number>(0)
   const router = useRouter()
@@ -195,6 +196,15 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
 
   const documentsList = isDataSourceNotion ? documentsWithProgress?.data : documentsRes?.data
 
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchValue(inputValue)
+  }, { wait: 500 })
+
+  const handleInputChange = (value: string) => {
+    setInputValue(value)
+    handleSearch()
+  }
+
   return (
     <div className='flex flex-col h-full overflow-y-auto'>
       <div className='flex flex-col justify-center gap-1 px-6 pt-4'>
@@ -205,10 +215,11 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
         <div className='flex items-center justify-between flex-wrap'>
           <Input
             showLeftIcon
+            showClearIcon
             wrapperClassName='!w-[200px]'
-            className='!h-8 !text-[13px]'
-            onChange={e => setSearchValue(e.target.value)}
-            value={searchValue}
+            value={inputValue}
+            onChange={e => handleInputChange(e.target.value)}
+            onClear={() => handleInputChange('')}
           />
           <div className='flex gap-2 justify-center items-center !h-8'>
             <RetryButton datasetId={datasetId} />

web/app/components/datasets/documents/rename-modal.tsx

@@ -6,6 +6,7 @@ import { useBoolean } from 'ahooks'
 import Toast from '../../base/toast'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import { renameDocumentName } from '@/service/datasets'
 
 type Props = {
@@ -59,7 +60,8 @@ const RenameModal: FC<Props> = ({
       onClose={onClose}
     >
       <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('datasetDocuments.list.table.name')}</div>
-      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-gray-100'}
+      <Input
+        className='mt-2 h-10'
         value={newName}
         onChange={e => setNewName(e.target.value)}
       />