feat: to add tag when tag input is unfocus (#21555)

web/app/components/base/tag-input/index.tsx

@@ -1,6 +1,5 @@
-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'
 import AutosizeInput from 'react-18-input-autosize'
 import { RiAddLine, RiCloseLine } from '@remixicon/react'
@@ -40,17 +39,17 @@ 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) {
+      notify({ type: 'error', message: t('datasetDocuments.segment.keywordEmpty') })
       return
+    }
+
+    if ((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 +60,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

@@ -355,7 +355,9 @@ const translation = {
     newChildChunk: 'New Child Chunk',
     keywords: 'KEYWORDS',
     addKeyWord: 'Add keyword',
+    keywordEmpty: 'The keyword cannot be empty',
     keywordError: 'The maximum length of keyword is 20',
+    keywordDuplicate: 'The keyword already exists',
     characters_one: 'character',
     characters_other: 'characters',
     hitCount: 'Retrieval count',