File size: 4,849 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
import { useContext } from 'use-context-selector'
import { useTranslation } from 'react-i18next'
import cn from 'classnames'
import Button from '../../base/button'
import Tag from '../../base/tag'
import Tooltip from '../../base/tooltip'
import { getIcon } from '../common/retrieval-method-info'
import s from './style.module.css'
import DatasetDetailContext from '@/context/dataset-detail'
import type { HitTestingResponse } from '@/models/datasets'
import { hitTesting } from '@/service/datasets'
import { asyncRunSafe } from '@/utils'
import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
type TextAreaWithButtonIProps = {
datasetId: string
onUpdateList: () => void
setHitResult: (res: HitTestingResponse) => void
loading: boolean
setLoading: (v: boolean) => void
text: string
setText: (v: string) => void
onClickRetrievalMethod: () => void
retrievalConfig: RetrievalConfig
isEconomy: boolean
onSubmit?: () => void
}
const TextAreaWithButton = ({
datasetId,
onUpdateList,
setHitResult,
setLoading,
loading,
text,
setText,
onClickRetrievalMethod,
retrievalConfig,
isEconomy,
onSubmit: _onSubmit,
}: TextAreaWithButtonIProps) => {
const { t } = useTranslation()
const { indexingTechnique } = useContext(DatasetDetailContext)
function handleTextChange(event: any) {
setText(event.target.value)
}
const onSubmit = async () => {
setLoading(true)
const [e, res] = await asyncRunSafe<HitTestingResponse>(
hitTesting({
datasetId,
queryText: text,
retrieval_model: {
...retrievalConfig,
search_method: isEconomy ? RETRIEVE_METHOD.keywordSearch : retrievalConfig.search_method,
},
}) as Promise<HitTestingResponse>,
)
if (!e) {
setHitResult(res)
onUpdateList?.()
}
setLoading(false)
_onSubmit && _onSubmit()
}
const retrievalMethod = isEconomy ? RETRIEVE_METHOD.invertedIndex : retrievalConfig.search_method
const Icon = getIcon(retrievalMethod)
return (
<>
<div className={s.wrapper}>
<div className='pt-2 rounded-tl-xl rounded-tr-xl bg-[#EEF4FF]'>
<div className="px-4 pb-2 flex justify-between h-8 items-center">
<span className="text-gray-800 font-semibold text-sm">
{t('datasetHitTesting.input.title')}
</span>
<Tooltip
selector={'change-retrieval-method'}
htmlContent={t('dataset.retrieval.changeRetrievalMethod')}
>
<div
onClick={onClickRetrievalMethod}
className='flex px-2 h-7 items-center space-x-1 bg-white hover:bg-[#ECE9FE] rounded-md shadow-sm cursor-pointer text-[#6927DA]'
>
<Icon className='w-3.5 h-3.5'></Icon>
<div className='text-xs font-medium'>{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
</div>
</Tooltip>
</div>
<div className='h-2 rounded-tl-xl rounded-tr-xl bg-white'></div>
</div>
<div className='px-4 pb-11'>
<textarea
value={text}
onChange={handleTextChange}
placeholder={t('datasetHitTesting.input.placeholder') as string}
className={s.textarea}
/>
<div className="absolute inset-x-0 bottom-0 flex items-center justify-between mx-4 mt-2 mb-2">
{text?.length > 200
? (
<Tooltip
content={t('datasetHitTesting.input.countWarning') as string}
selector="hit-testing-warning"
>
<div>
<Tag color="red" className="!text-red-600">
{text?.length}
<span className="text-red-300 mx-0.5">/</span>
200
</Tag>
</div>
</Tooltip>
)
: (
<Tag
color="gray"
className={cn('!text-gray-500', text?.length ? '' : 'opacity-50')}
>
{text?.length}
<span className="text-gray-300 mx-0.5">/</span>
200
</Tag>
)}
<div>
<Button
onClick={onSubmit}
type="primary"
loading={loading}
disabled={(!text?.length || text?.length > 200)}
>
{t('datasetHitTesting.input.testing')}
</Button>
</div>
</div>
</div>
</div>
</>
)
}
export default TextAreaWithButton
|