dify

dify/web/app/components/rag-pipeline/hooks/use-input-field-panel.ts

@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from 'react'
+import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
+import type { InputFieldEditorProps } from '../components/panel/input-field/editor'
+
+export const useInputFieldPanel = () => {
+  const workflowStore = useWorkflowStore()
+  const showInputFieldPreviewPanel = useStore(state => state.showInputFieldPreviewPanel)
+  const inputFieldEditPanelProps = useStore(state => state.inputFieldEditPanelProps)
+
+  const isPreviewing = useMemo(() => {
+    return showInputFieldPreviewPanel
+  }, [showInputFieldPreviewPanel])
+
+  const isEditing = useMemo(() => {
+    return !!inputFieldEditPanelProps
+  }, [inputFieldEditPanelProps])
+
+  const closeAllInputFieldPanels = useCallback(() => {
+    const {
+      setShowInputFieldPanel,
+      setShowInputFieldPreviewPanel,
+      setInputFieldEditPanelProps,
+    } = workflowStore.getState()
+
+    setShowInputFieldPanel?.(false)
+    setShowInputFieldPreviewPanel?.(false)
+    setInputFieldEditPanelProps?.(null)
+  }, [workflowStore])
+
+  const toggleInputFieldPreviewPanel = useCallback(() => {
+    const {
+      showInputFieldPreviewPanel,
+      setShowInputFieldPreviewPanel,
+    } = workflowStore.getState()
+
+    setShowInputFieldPreviewPanel?.(!showInputFieldPreviewPanel)
+  }, [workflowStore])
+
+  const toggleInputFieldEditPanel = useCallback((editContent: InputFieldEditorProps | null) => {
+    const {
+      setInputFieldEditPanelProps,
+    } = workflowStore.getState()
+
+    setInputFieldEditPanelProps?.(editContent)
+  }, [workflowStore])
+
+  return {
+    closeAllInputFieldPanels,
+    toggleInputFieldPreviewPanel,
+    toggleInputFieldEditPanel,
+    isPreviewing,
+    isEditing,
+  }
+}