diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx index 4824b6f62d..3669d84490 100644 --- a/web/app/components/base/tag-input/index.tsx +++ b/web/app/components/base/tag-input/index.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useCallback, useState } from 'react' import type { ChangeEvent, FC, KeyboardEvent } from 'react' import { } from 'use-context-selector' import { useTranslation } from 'react-i18next' @@ -40,6 +40,24 @@ const TagInput: FC = ({ onChange(copyItems) } + const handleNewTag = useCallback((value: string) => { + const valueTrimmed = value.trim() + if (!valueTrimmed || (items.find(item => item === valueTrimmed))) { + notify({ type: 'error', message: t('datasetDocuments.segment.keywordDuplicate') }) + return + } + + if (valueTrimmed.length > 20) { + notify({ type: 'error', message: t('datasetDocuments.segment.keywordError') }) + return + } + + onChange([...items, valueTrimmed]) + setTimeout(() => { + setValue('') + }) + }, [items, onChange, notify, t]) + const handleKeyDown = (e: KeyboardEvent) => { if (isSpecialMode && e.key === 'Enter') setValue(`${value}↵`) @@ -48,24 +66,12 @@ const TagInput: FC = ({ if (isSpecialMode) e.preventDefault() - const valueTrimmed = value.trim() - if (!valueTrimmed || (items.find(item => item === valueTrimmed))) - return - - if (valueTrimmed.length > 20) { - notify({ type: 'error', message: t('datasetDocuments.segment.keywordError') }) - return - } - - onChange([...items, valueTrimmed]) - setTimeout(() => { - setValue('') - }) + handleNewTag(value) } } const handleBlur = () => { - setValue('') + handleNewTag(value) setFocused(false) } diff --git a/web/i18n/en-US/dataset-documents.ts b/web/i18n/en-US/dataset-documents.ts index 2a79324477..98fcc48fbb 100644 --- a/web/i18n/en-US/dataset-documents.ts +++ b/web/i18n/en-US/dataset-documents.ts @@ -356,6 +356,7 @@ const translation = { keywords: 'KEYWORDS', addKeyWord: 'Add keyword', keywordError: 'The maximum length of keyword is 20', + keywordDuplicate: 'The keyword already exists', characters_one: 'character', characters_other: 'characters', hitCount: 'Retrieval count',