feat: add blur add new tag and same tag warn to polish tag input

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,17 +40,12 @@ const TagInput: FC<TagInputProps> = ({
     onChange(copyItems)
   }
 
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (isSpecialMode && e.key === 'Enter')
-      setValue(`${value}↵`)
-
-    if (e.key === customizedConfirmKey) {
-      if (isSpecialMode)
-        e.preventDefault()
-
+  const handleNewTag = useCallback((value: string) => {
     const valueTrimmed = value.trim()
-      if (!valueTrimmed || (items.find(item => item === valueTrimmed)))
+    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') })
@@ -61,11 +56,22 @@ const TagInput: FC<TagInputProps> = ({
     setTimeout(() => {
       setValue('')
     })
+  }, [items, onChange, notify, t])
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (isSpecialMode && e.key === 'Enter')
+      setValue(`${value}↵`)
+
+    if (e.key === customizedConfirmKey) {
+      if (isSpecialMode)
+        e.preventDefault()
+
+      handleNewTag(value)
     }
   }
 
   const handleBlur = () => {
-    setValue('')
+    handleNewTag(value)
     setFocused(false)
   }
 

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',