fix: https://github.com/langgenius/dify/issues/27063 (#27074)

web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
@@ -16,7 +16,7 @@ type Props = {
   type: EditItemType
   content: string
   readonly?: boolean
-  onSave: (content: string) => void
+  onSave: (content: string) => Promise<void>
 }
 
 export const EditTitle: FC<{ className?: string; title: string }> = ({ className, title }) => (
@@ -46,8 +46,13 @@ const EditItem: FC<Props> = ({
   const placeholder = type === EditItemType.Query ? t('appAnnotation.editModal.queryPlaceholder') : t('appAnnotation.editModal.answerPlaceholder')
   const [isEdit, setIsEdit] = useState(false)
 
-  const handleSave = () => {
-    onSave(newContent)
+  // Reset newContent when content prop changes
+  useEffect(() => {
+    setNewContent('')
+  }, [content])
+
+  const handleSave = async () => {
+    await onSave(newContent)
     setIsEdit(false)
   }
 

web/app/components/app/annotation/view-annotation-modal/index.tsx

@@ -21,7 +21,7 @@ type Props = {
   isShow: boolean
   onHide: () => void
   item: AnnotationItem
-  onSave: (editedQuery: string, editedAnswer: string) => void
+  onSave: (editedQuery: string, editedAnswer: string) => Promise<void>
   onRemove: () => void
 }
 
@@ -46,6 +46,16 @@ const ViewAnnotationModal: FC<Props> = ({
   const [currPage, setCurrPage] = React.useState<number>(0)
   const [total, setTotal] = useState(0)
   const [hitHistoryList, setHitHistoryList] = useState<HitHistoryItem[]>([])
+
+  // Update local state when item prop changes (e.g., when modal is reopened with updated data)
+  useEffect(() => {
+    setNewQuery(question)
+    setNewAnswer(answer)
+    setCurrPage(0)
+    setTotal(0)
+    setHitHistoryList([])
+  }, [question, answer, id])
+
   const fetchHitHistory = async (page = 1) => {
     try {
       const { data, total }: any = await fetchHitHistoryList(appId, id, {
@@ -63,6 +73,12 @@ const ViewAnnotationModal: FC<Props> = ({
     fetchHitHistory(currPage + 1)
   }, [currPage])
 
+  // Fetch hit history when item changes
+  useEffect(() => {
+    if (isShow && id)
+      fetchHitHistory(1)
+  }, [id, isShow])
+
   const tabs = [
     { value: TabType.annotation, text: t('appAnnotation.viewModal.annotatedResponse') },
     {
@@ -82,14 +98,20 @@ const ViewAnnotationModal: FC<Props> = ({
     },
   ]
   const [activeTab, setActiveTab] = useState(TabType.annotation)
-  const handleSave = (type: EditItemType, editedContent: string) => {
-    if (type === EditItemType.Query) {
-      setNewQuery(editedContent)
-      onSave(editedContent, newAnswer)
+  const handleSave = async (type: EditItemType, editedContent: string) => {
+    try {
+      if (type === EditItemType.Query) {
+        await onSave(editedContent, newAnswer)
+        setNewQuery(editedContent)
+      }
+      else {
+        await onSave(newQuestion, editedContent)
+        setNewAnswer(editedContent)
+      }
     }
-    else {
-      setNewAnswer(editedContent)
-      onSave(newQuestion, editedContent)
+    catch (error) {
+      // If save fails, don't update local state
+      console.error('Failed to save annotation:', error)
     }
   }
   const [showModal, setShowModal] = useState(false)