From 38a1ea139ac66270121d8298223c356041f0182e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 20 Mar 2024 15:32:06 +0800
Subject: [PATCH] feat: answer support readonly

---
 .../nodes/_base/components/variable/var-list.tsx       | 10 ++++++----
 .../_base/components/variable/var-reference-picker.tsx |  8 ++++++--
 web/app/components/workflow/nodes/answer/panel.tsx     |  4 ++--
 web/app/components/workflow/nodes/answer/use-config.ts |  5 +++++
 web/app/components/workflow/nodes/code/use-config.ts   |  6 ++++++
 web/app/components/workflow/nodes/end/use-config.ts    |  6 +++++-
 web/app/components/workflow/nodes/http/use-config.ts   |  5 +++++
 .../components/workflow/nodes/if-else/use-config.ts    |  3 +++
 .../workflow/nodes/knowledge-retrieval/use-config.ts   |  7 ++++++-
 web/app/components/workflow/nodes/llm/use-config.ts    |  7 ++++++-
 .../workflow/nodes/question-classifier/use-config.ts   |  7 ++++++-
 .../workflow/nodes/template-transform/use-config.ts    |  5 +++++
 web/app/components/workflow/nodes/tool/use-config.ts   |  6 ++++++
 .../workflow/nodes/variable-assigner/use-config.ts     |  5 +++++
 14 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index c968a7955b..18b54a2212 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -92,10 +92,12 @@ const VarList: FC<Props> = ({
             onlyLeafNodeVar={onlyLeafNodeVar}
             filterVar={filterVar}
           />
-          <RemoveButton
-            className='!p-2 !bg-gray-100 hover:!bg-gray-200'
-            onClick={handleVarRemove(index)}
-          />
+          {!readonly && (
+            <RemoveButton
+              className='!p-2 !bg-gray-100 hover:!bg-gray-200'
+              onClick={handleVarRemove(index)}
+            />
+          )}
         </div>
       ))}
     </div>
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index aecc4fd5ef..a68dfb67af 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -183,7 +183,11 @@ const VarReferencePicker: FC<Props> = ({
         onOpenChange={setOpen}
         placement='bottom-start'
       >
-        <PortalToFollowElemTrigger onClick={() => !isConstant ? setOpen(!open) : setControlFocus(Date.now())} className='!flex'>
+        <PortalToFollowElemTrigger onClick={() => {
+          if (readonly)
+            return
+          !isConstant ? setOpen(!open) : setControlFocus(Date.now())
+        }} className='!flex'>
           <div className={cn((open || isFocus) && 'border border-gray-300', 'relative group/wrap flex items-center w-full h-8 p-1 rounded-lg bg-gray-100')}>
             {isSupportConstantValue
               ? <div onClick={(e) => {
@@ -242,7 +246,7 @@ const VarReferencePicker: FC<Props> = ({
                     : <div className='text-[13px] font-normal text-gray-400'>{t('workflow.common.setVarValuePlaceholder')}</div>}
                 </div>
               )}
-            {hasValue && (<div
+            {(hasValue && !readonly) && (<div
               className='invisible group-hover/wrap:visible absolute h-5 right-1 top-[50%] translate-y-[-50%] group p-1 rounded-md hover:bg-black/5 cursor-pointer'
               onClick={handleClearVar}
             >
diff --git a/web/app/components/workflow/nodes/answer/panel.tsx b/web/app/components/workflow/nodes/answer/panel.tsx
index e2bf44cc0a..694d2fd97c 100644
--- a/web/app/components/workflow/nodes/answer/panel.tsx
+++ b/web/app/components/workflow/nodes/answer/panel.tsx
@@ -17,9 +17,9 @@ const Panel: FC<NodePanelProps<AnswerNodeType>> = ({
   data,
 }) => {
   const { t } = useTranslation()
-  const readOnly = false
 
   const {
+    readOnly,
     inputs,
     handleVarListChange,
     handleAddVariable,
@@ -32,7 +32,7 @@ const Panel: FC<NodePanelProps<AnswerNodeType>> = ({
       <Field
         title={t(`${i18nPrefix}.outputVars`)}
         operations={
-          <AddButton onClick={handleAddVariable} />
+          !readOnly ? <AddButton onClick={handleAddVariable} /> : undefined
         }
       >
         <VarList
diff --git a/web/app/components/workflow/nodes/answer/use-config.ts b/web/app/components/workflow/nodes/answer/use-config.ts
index 60fc4aee45..269d953743 100644
--- a/web/app/components/workflow/nodes/answer/use-config.ts
+++ b/web/app/components/workflow/nodes/answer/use-config.ts
@@ -5,8 +5,12 @@ import type { Var } from '../../types'
 import { VarType } from '../../types'
 import type { AnswerNodeType } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
+import {
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
 
 const useConfig = (id: string, payload: AnswerNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { inputs, setInputs } = useNodeCrud<AnswerNodeType>(id, payload)
   // variables
   const { handleVarListChange, handleAddVariable } = useVarList<AnswerNodeType>({
@@ -25,6 +29,7 @@ const useConfig = (id: string, payload: AnswerNodeType) => {
     return varPayload.type !== VarType.arrayObject
   }, [])
   return {
+    readOnly,
     inputs,
     handleVarListChange,
     handleAddVariable,
diff --git a/web/app/components/workflow/nodes/code/use-config.ts b/web/app/components/workflow/nodes/code/use-config.ts
index a5498d6c62..826ad74ddc 100644
--- a/web/app/components/workflow/nodes/code/use-config.ts
+++ b/web/app/components/workflow/nodes/code/use-config.ts
@@ -11,8 +11,13 @@ import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-cr
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
 import { fetchNodeDefault } from '@/service/workflow'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import {
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
 
 const useConfig = (id: string, payload: CodeNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
+
   const appId = useAppStore.getState().appDetail?.id
 
   const [allLanguageDefault, setAllLanguageDefault] = useState<Record<CodeLanguage, CodeNodeType> | null>(null)
@@ -114,6 +119,7 @@ const useConfig = (id: string, payload: CodeNodeType) => {
   }, [setRunInputData])
 
   return {
+    readOnly,
     inputs,
     handleVarListChange,
     handleAddVariable,
diff --git a/web/app/components/workflow/nodes/end/use-config.ts b/web/app/components/workflow/nodes/end/use-config.ts
index 81c9b19411..b9876f95ed 100644
--- a/web/app/components/workflow/nodes/end/use-config.ts
+++ b/web/app/components/workflow/nodes/end/use-config.ts
@@ -1,8 +1,11 @@
 import useVarList from '../_base/hooks/use-var-list'
 import type { EndNodeType } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
-
+import {
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
 const useConfig = (id: string, payload: EndNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { inputs, setInputs } = useNodeCrud<EndNodeType>(id, payload)
 
   const { handleVarListChange, handleAddVariable } = useVarList<EndNodeType>({
@@ -14,6 +17,7 @@ const useConfig = (id: string, payload: EndNodeType) => {
   })
 
   return {
+    readOnly,
     inputs,
     handleVarListChange,
     handleAddVariable,
diff --git a/web/app/components/workflow/nodes/http/use-config.ts b/web/app/components/workflow/nodes/http/use-config.ts
index d301770967..9fea12ade6 100644
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -8,8 +8,12 @@ import type { Authorization, Body, HttpNodeType, Method } from './types'
 import useKeyValueList from './hooks/use-key-value-list'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
+import {
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
 
 const useConfig = (id: string, payload: HttpNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { inputs, setInputs } = useNodeCrud<HttpNodeType>(id, payload)
 
   const { handleVarListChange, handleAddVariable } = useVarList<HttpNodeType>({
@@ -112,6 +116,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
   }, [setRunInputData])
 
   return {
+    readOnly,
     inputs,
     handleVarListChange,
     handleAddVariable,
diff --git a/web/app/components/workflow/nodes/if-else/use-config.ts b/web/app/components/workflow/nodes/if-else/use-config.ts
index 993641ba89..dc38d3773c 100644
--- a/web/app/components/workflow/nodes/if-else/use-config.ts
+++ b/web/app/components/workflow/nodes/if-else/use-config.ts
@@ -8,10 +8,12 @@ import type { Condition, IfElseNodeType } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import {
   useIsChatMode,
+  useNodesReadOnly,
   useWorkflow,
 } from '@/app/components/workflow/hooks'
 
 const useConfig = (id: string, payload: IfElseNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { getBeforeNodesInSameBranch } = useWorkflow()
   const isChatMode = useIsChatMode()
   const availableNodes = getBeforeNodesInSameBranch(id)
@@ -53,6 +55,7 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
   })
 
   return {
+    readOnly,
     inputs,
     handleConditionsChange,
     handleAddCondition,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
index 31a93c70de..efa1274bc2 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
@@ -3,7 +3,10 @@ import produce from 'immer'
 import { isEqual } from 'lodash-es'
 import type { ValueSelector, Var } from '../../types'
 import { BlockEnum, VarType } from '../../types'
-import { useIsChatMode, useWorkflow } from '../../hooks'
+import {
+  useIsChatMode, useNodesReadOnly,
+  useWorkflow,
+} from '../../hooks'
 import type { KnowledgeRetrievalNodeType, MultipleRetrievalConfig } from './types'
 import { RETRIEVE_TYPE } from '@/types/app'
 import { DATASET_DEFAULT } from '@/config'
@@ -14,6 +17,7 @@ import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-s
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const isChatMode = useIsChatMode()
   const { getBeforeNodesInSameBranch } = useWorkflow()
   const startNode = getBeforeNodesInSameBranch(id).find(node => node.data.type === BlockEnum.Start)
@@ -242,6 +246,7 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
   }, [runInputData, setRunInputData])
 
   return {
+    readOnly,
     inputs,
     handleQueryVarChange,
     filterVar,
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts
index 80d5396721..bf5dbec284 100644
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -4,7 +4,10 @@ import useVarList from '../_base/hooks/use-var-list'
 import { VarType } from '../../types'
 import type { Memory, ValueSelector, Var } from '../../types'
 import { useStore } from '../../store'
-import { useIsChatMode } from '../../hooks'
+import {
+  useIsChatMode,
+  useNodesReadOnly,
+} from '../../hooks'
 import type { LLMNodeType } from './types'
 import { Resolution } from '@/types/app'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel, useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -16,6 +19,7 @@ import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
 import { checkHasContextBlock, checkHasHistoryBlock, checkHasQueryBlock } from '@/app/components/base/prompt-editor/constants'
 
 const useConfig = (id: string, payload: LLMNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const isChatMode = useIsChatMode()
 
   const defaultConfig = useStore(s => s.nodesDefaultConfigs)[payload.type]
@@ -259,6 +263,7 @@ const useConfig = (id: string, payload: LLMNodeType) => {
   const varInputs = toVarInputs(inputs.variables)
 
   return {
+    readOnly,
     isChatMode,
     inputs,
     isChatModel,
diff --git a/web/app/components/workflow/nodes/question-classifier/use-config.ts b/web/app/components/workflow/nodes/question-classifier/use-config.ts
index 0e2de8005e..c70663fb34 100644
--- a/web/app/components/workflow/nodes/question-classifier/use-config.ts
+++ b/web/app/components/workflow/nodes/question-classifier/use-config.ts
@@ -2,7 +2,10 @@ import { useCallback, useEffect, useRef } from 'react'
 import produce from 'immer'
 import { BlockEnum, VarType } from '../../types'
 import type { Memory, ValueSelector, Var } from '../../types'
-import { useIsChatMode, useWorkflow } from '../../hooks'
+import {
+  useIsChatMode, useNodesReadOnly,
+  useWorkflow,
+} from '../../hooks'
 import { useStore } from '../../store'
 import type { QuestionClassifierNodeType } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
@@ -10,6 +13,7 @@ import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-s
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const isChatMode = useIsChatMode()
   const defaultConfig = useStore(s => s.nodesDefaultConfigs)[payload.type]
   const { getBeforeNodesInSameBranch } = useWorkflow()
@@ -133,6 +137,7 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
   }, [])
 
   return {
+    readOnly,
     inputs,
     handleModelChanged,
     isChatModel,
diff --git a/web/app/components/workflow/nodes/template-transform/use-config.ts b/web/app/components/workflow/nodes/template-transform/use-config.ts
index 8310b1a2b3..55692fbd69 100644
--- a/web/app/components/workflow/nodes/template-transform/use-config.ts
+++ b/web/app/components/workflow/nodes/template-transform/use-config.ts
@@ -7,8 +7,12 @@ import { useStore } from '../../store'
 import type { TemplateTransformNodeType } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
+import {
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
 
 const useConfig = (id: string, payload: TemplateTransformNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const defaultConfig = useStore(s => s.nodesDefaultConfigs)[payload.type]
 
   const { inputs, setInputs } = useNodeCrud<TemplateTransformNodeType>(id, payload)
@@ -74,6 +78,7 @@ const useConfig = (id: string, payload: TemplateTransformNodeType) => {
   }, [])
 
   return {
+    readOnly,
     inputs,
     handleVarListChange,
     handleAddVariable,
diff --git a/web/app/components/workflow/nodes/tool/use-config.ts b/web/app/components/workflow/nodes/tool/use-config.ts
index db99bce409..0d874248b1 100644
--- a/web/app/components/workflow/nodes/tool/use-config.ts
+++ b/web/app/components/workflow/nodes/tool/use-config.ts
@@ -15,7 +15,12 @@ import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/c
 import { VarType as VarVarType } from '@/app/components/workflow/types'
 import type { InputVar, Var } from '@/app/components/workflow/types'
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
+import {
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
+
 const useConfig = (id: string, payload: ToolNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { t } = useTranslation()
 
   const language = useLanguage()
@@ -191,6 +196,7 @@ const useConfig = (id: string, payload: ToolNodeType) => {
   })
 
   return {
+    readOnly,
     inputs,
     currTool,
     toolSettingSchema,
diff --git a/web/app/components/workflow/nodes/variable-assigner/use-config.ts b/web/app/components/workflow/nodes/variable-assigner/use-config.ts
index c3531095c3..a4882c8d8e 100644
--- a/web/app/components/workflow/nodes/variable-assigner/use-config.ts
+++ b/web/app/components/workflow/nodes/variable-assigner/use-config.ts
@@ -5,8 +5,12 @@ import type { VariableAssignerNodeType } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
+import {
+  useNodesReadOnly,
+} from '@/app/components/workflow/hooks'
 
 const useConfig = (id: string, payload: VariableAssignerNodeType) => {
+  const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { inputs, setInputs } = useNodeCrud<VariableAssignerNodeType>(id, payload)
 
   const handleOutputTypeChange = useCallback((outputType: string) => {
@@ -47,6 +51,7 @@ const useConfig = (id: string, payload: VariableAssignerNodeType) => {
     return true
   }, [currVar, inputs.output_type, variables])
   return {
+    readOnly,
     inputs,
     handleOutputTypeChange,
     handleVarListChange,