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,6 +39,29 @@ const TagInput: FC<TagInputProps> = ({
     onChange(copyItems)
   }
 
+  const handleNewTag = useCallback((value: string) => {
+    const valueTrimmed = value.trim()
+    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') })
+      return
+    }
+
+    onChange([...items, valueTrimmed])
+    setTimeout(() => {
+      setValue('')
+    })
+  }, [items, onChange, notify, t])
+
   const handleKeyDown = (e: KeyboardEvent) => {
     if (isSpecialMode && e.key === 'Enter')
       setValue(`${value}↵`)
@@ -48,24 +70,12 @@ const TagInput: FC<TagInputProps> = ({
       if (isSpecialMode)
         e.preventDefault()
 
-      const valueTrimmed = value.trim()
+      handleNewTag(value)
-      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('')
-      })
     }
   }
 
   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',