From 524b19bb3a1260882d8ae476a0da154b80b82e09 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 21 Mar 2024 15:57:55 +0800
Subject: [PATCH] node style

---
 web/app/components/workflow/hooks/use-workflow-run.ts    | 2 +-
 web/app/components/workflow/nodes/_base/node.tsx         | 6 ++----
 web/app/components/workflow/nodes/end/node.tsx           | 9 +++++++--
 web/app/components/workflow/nodes/http/node.tsx          | 2 +-
 .../workflow/nodes/knowledge-retrieval/node.tsx          | 6 +++++-
 web/app/components/workflow/nodes/llm/node.tsx           | 6 +++++-
 .../workflow/nodes/question-classifier/node.tsx          | 5 ++++-
 web/app/components/workflow/nodes/start/node.tsx         | 5 ++++-
 web/app/components/workflow/nodes/start/panel.tsx        | 2 +-
 web/app/components/workflow/nodes/tool/node.tsx          | 8 ++++++--
 .../components/workflow/nodes/variable-assigner/node.tsx | 2 +-
 11 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/web/app/components/workflow/hooks/use-workflow-run.ts b/web/app/components/workflow/hooks/use-workflow-run.ts
index e72d6a374b..057e20fe94 100644
--- a/web/app/components/workflow/hooks/use-workflow-run.ts
+++ b/web/app/components/workflow/hooks/use-workflow-run.ts
@@ -285,7 +285,7 @@ export const useWorkflowRun = () => {
         ...restCallback,
       },
     )
-  }, [store, reactflow, workflowStore])
+  }, [store, reactflow, workflowStore, handleLoadBackupDraft])
 
   const handleStopRun = useCallback((taskId: string) => {
     const appId = useAppStore.getState().appDetail?.id
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 94b2d887a2..ac38f79496 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -51,7 +51,7 @@ const BaseNode: FC<BaseNodeProps> = ({
     >
       <div
         className={`
-          group relative w-[240px] bg-[#fcfdff] shadow-xs
+          group relative pb-1 w-[240px] bg-[#fcfdff] shadow-xs
           border border-transparent rounded-[15px]
           ${!data._runningStatus && 'hover:shadow-lg'}
           ${data._runningStatus === NodeRunningStatus.Running && '!border-primary-500'}
@@ -118,9 +118,7 @@ const BaseNode: FC<BaseNodeProps> = ({
             )
           }
         </div>
-        <div className='pb-1'>
-          {cloneElement(children, { id, data })}
-        </div>
+        {cloneElement(children, { id, data })}
         {
           data.desc && (
             <div className='px-3 pt-1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
diff --git a/web/app/components/workflow/nodes/end/node.tsx b/web/app/components/workflow/nodes/end/node.tsx
index 5d2bbe20c8..1bd4ab72c0 100644
--- a/web/app/components/workflow/nodes/end/node.tsx
+++ b/web/app/components/workflow/nodes/end/node.tsx
@@ -46,9 +46,14 @@ const Node: FC<NodeProps<EndNodeType>> = ({
     return type
   }
   const { outputs } = data
+  const filteredOutputs = (outputs as Variable[]).filter(({ value_selector }) => value_selector.length > 0)
+
+  if (!filteredOutputs.length)
+    return null
+
   return (
-    <div className='px-3 space-y-0.5'>
-      {(outputs as Variable[]).filter(({ value_selector }) => value_selector.length > 0).map(({ value_selector }, index) => {
+    <div className='mb-1 px-3 py-1 space-y-0.5'>
+      {filteredOutputs.map(({ value_selector }, index) => {
         const node = getNode(value_selector[0])
         const varName = value_selector[value_selector.length - 1]
         return (
diff --git a/web/app/components/workflow/nodes/http/node.tsx b/web/app/components/workflow/nodes/http/node.tsx
index 8747fc9b0f..8ed5877207 100644
--- a/web/app/components/workflow/nodes/http/node.tsx
+++ b/web/app/components/workflow/nodes/http/node.tsx
@@ -8,7 +8,7 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
 }) => {
   const { method, url } = data
   return (
-    <div className='px-3'>
+    <div className='mb-1 px-3 py-1'>
       <div className='flex items-center p-1 rounded-md bg-gray-100'>
         <div className='shrink-0 px-1 h-7 leading-7 rounded bg-gray-25 text-xs font-semibold text-gray-700 uppercase'>{method}</div>
         <div className='ml-1 w-0 grow truncate text-xs font-normal text-gray-700'>{url}</div>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
index 4c4ad76c39..b32229818f 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
@@ -21,8 +21,12 @@ const Node: FC<NodeProps<KnowledgeRetrievalNodeType>> = ({
       }
     })()
   }, [data.dataset_ids])
+
+  if (!selectedDatasets.length)
+    return null
+
   return (
-    <div className='px-3'>
+    <div className='mb-1 px-3 py-1'>
       <div className='space-y-0.5'>
         {selectedDatasets.map(({ id, name }) => (
           <div key={id} className='flex items-center h-[26px] bg-gray-100 rounded-md  px-1 text-xs font-normal text-gray-700'>
diff --git a/web/app/components/workflow/nodes/llm/node.tsx b/web/app/components/workflow/nodes/llm/node.tsx
index 521ac05dd4..3d81c172be 100644
--- a/web/app/components/workflow/nodes/llm/node.tsx
+++ b/web/app/components/workflow/nodes/llm/node.tsx
@@ -15,8 +15,12 @@ const Node: FC<NodeProps<LLMNodeType>> = ({
     textGenerationModelList,
   } = useTextGenerationCurrentProviderAndModelAndModelList()
   const hasSetModel = provider && modelId
+
+  if (!hasSetModel)
+    return null
+
   return (
-    <div className='px-3'>
+    <div className='mb-1 px-3 py-1'>
       {hasSetModel && (
         <ModelSelector
           defaultModel={{ provider, model: modelId }}
diff --git a/web/app/components/workflow/nodes/question-classifier/node.tsx b/web/app/components/workflow/nodes/question-classifier/node.tsx
index 5e4ac9a7b2..8ca721fbef 100644
--- a/web/app/components/workflow/nodes/question-classifier/node.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/node.tsx
@@ -24,8 +24,11 @@ const Node: FC<NodeProps<QuestionClassifierNodeType>> = (props) => {
   } = useTextGenerationCurrentProviderAndModelAndModelList()
   const hasSetModel = provider && modelId
 
+  if (!hasSetModel && !topics.length)
+    return null
+
   return (
-    <div className='px-3'>
+    <div className='mb-1 px-3 py-1'>
       {hasSetModel && (
         <ModelSelector
           defaultModel={{ provider, model: modelId }}
diff --git a/web/app/components/workflow/nodes/start/node.tsx b/web/app/components/workflow/nodes/start/node.tsx
index 4a48b25e39..8a259ce29d 100644
--- a/web/app/components/workflow/nodes/start/node.tsx
+++ b/web/app/components/workflow/nodes/start/node.tsx
@@ -13,8 +13,11 @@ const Node: FC<NodeProps<StartNodeType>> = ({
   const { t } = useTranslation()
   const { variables } = data
 
+  if (!variables.length)
+    return null
+
   return (
-    <div className='px-3'>
+    <div className='mb-1 px-3 py-1'>
       <div className='space-y-0.5'>
         {variables.map(variable => (
           <div key={variable.variable} className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index acc0dec17d..4d890b52d1 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -50,7 +50,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
           />
         </Field>
       </div>
-      <Split />
+      {isChatMode && <Split />}
       {isChatMode && (
         <div className='px-4 pt-4 pb-2'>
           <OutputVars title={t(`${i18nPrefix}.builtInVar`)!}>
diff --git a/web/app/components/workflow/nodes/tool/node.tsx b/web/app/components/workflow/nodes/tool/node.tsx
index c9de133972..fba833eab7 100644
--- a/web/app/components/workflow/nodes/tool/node.tsx
+++ b/web/app/components/workflow/nodes/tool/node.tsx
@@ -7,11 +7,15 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
   data,
 }) => {
   const { tool_configurations } = data
+  const toolConfigs = Object.keys(tool_configurations || {})
+
+  if (!toolConfigs.length)
+    return null
 
   return (
-    <div className='px-3'>
+    <div className='mb-1 px-3 py-1'>
       <div className='space-y-0.5'>
-        {Object.keys(tool_configurations || {}).map((key, index) => (
+        {toolConfigs.map((key, index) => (
           <div key={index} className='flex items-center h-6 justify-between bg-gray-100 rounded-md  px-1 space-x-1 text-xs font-normal text-gray-700'>
             <div className='text-xs font-medium text-gray-500 uppercase'>
               {key}
diff --git a/web/app/components/workflow/nodes/variable-assigner/node.tsx b/web/app/components/workflow/nodes/variable-assigner/node.tsx
index b501e2320e..876d4b6f3e 100644
--- a/web/app/components/workflow/nodes/variable-assigner/node.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/node.tsx
@@ -24,7 +24,7 @@ const Node: FC<NodeProps<VariableAssignerNodeType>> = (props) => {
   const variables = originVariables.filter(item => item.length > 0)
 
   return (
-    <div className='px-3'>
+    <div className='mb-1 px-3 py-1'>
       <div className='mb-0.5 leading-4 text-xs font-medium text-gray-500 uppercase'>{t(`${i18nPrefix}.title`)}</div>
       {
         variables.length === 0 && (