From 1e5317d3f09dea7eb4fe4c63244c1df274e933c7 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 1 Aug 2025 16:35:27 +0800
Subject: [PATCH] feat: Enhance InputFieldPanel to manage preview and edit
 states more effectively

---
 .../components/panel/input-field/index.tsx             | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
index dde148fb77..44722e2fc3 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
@@ -31,6 +31,7 @@ const InputFieldPanel = () => {
   const showInputFieldPreviewPanel = useStore(state => state.showInputFieldPreviewPanel)
   const setShowInputFieldPreviewPanel = useStore(state => state.setShowInputFieldPreviewPanel)
   const inputFieldEditPanelProps = useStore(state => state.inputFieldEditPanelProps)
+  const setInputFieldEditPanelProps = useStore(state => state.setInputFieldEditPanelProps)
 
   const getInputFieldsMap = () => {
     const inputFieldsMap: Record<string, InputVar[]> = {}
@@ -86,11 +87,13 @@ const InputFieldPanel = () => {
 
   const closePanel = useCallback(() => {
     setShowInputFieldPanel?.(false)
-  }, [setShowInputFieldPanel])
+    setShowInputFieldPreviewPanel?.(false)
+    setInputFieldEditPanelProps?.(null)
+  }, [setShowInputFieldPanel, setShowInputFieldPreviewPanel, setInputFieldEditPanelProps])
 
   const togglePreviewPanel = useCallback(() => {
-    setShowInputFieldPreviewPanel?.(true)
-  }, [setShowInputFieldPreviewPanel])
+    setShowInputFieldPreviewPanel?.(!showInputFieldPreviewPanel)
+  }, [showInputFieldPreviewPanel, setShowInputFieldPreviewPanel])
 
   const allVariableNames = useMemo(() => {
     return ragPipelineVariables?.map(variable => variable.variable) || []
@@ -110,6 +113,7 @@ const InputFieldPanel = () => {
             showInputFieldPreviewPanel && 'bg-state-accent-active text-text-accent',
           )}
           onClick={togglePreviewPanel}
+          disabled={!!inputFieldEditPanelProps}
         >
           <RiEyeLine className='size-3.5' />
           <span className='px-[3px]'>{t('datasetPipeline.operations.preview')}</span>