From 7d9d670f9028aa1ad0a3ac8169c7c26737c10950 Mon Sep 17 00:00:00 2001
From: CorrectRoad <a778917369@gmail.com>
Date: Fri, 27 Jun 2025 10:36:01 +0800
Subject: [PATCH] feat: to add tag when tag input is unfocus (#21555)

---
 web/app/components/base/tag-input/index.tsx | 42 +++++++++++++--------
 web/i18n/en-US/dataset-documents.ts         |  2 +
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index 4824b6f62..eeed13c56 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/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()
-      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 2a7932447..7d0a3541a 100644
--- a/web/i18n/en-US/dataset-documents.ts
+++ b/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',