From 5ec3a967b5bd9e23f82aabe286ef3ad360ef4998 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 6 Mar 2024 17:59:23 +0800
Subject: [PATCH] feat: all other code expand

---
 .../(commonLayout)/workflow/nodes/page.tsx    |  2 +-
 .../nodes/_base/components/editor/base.tsx    | 70 +++++++++++--------
 .../nodes/_base/components/prompt/editor.tsx  | 21 +++---
 .../nodes/_base/hooks/use-toggle-expend.ts    | 26 +++++++
 .../components/workflow/nodes/code/mock.ts    |  4 +-
 .../workflow/nodes/direct-answer/mock.ts      |  2 +-
 web/app/components/workflow/nodes/end/mock.ts |  2 +-
 .../components/workflow/nodes/http/mock.ts    |  2 +-
 .../components/workflow/nodes/if-else/mock.ts |  2 +-
 .../nodes/knowledge-retrieval/mock.ts         |  2 +-
 web/app/components/workflow/nodes/llm/mock.ts |  2 +-
 .../nodes/question-classifier/mock.ts         |  4 +-
 .../components/workflow/nodes/start/mock.ts   |  2 +-
 .../workflow/nodes/template-transform/mock.ts |  2 +-
 .../components/workflow/nodes/tool/mock.ts    |  2 +-
 .../workflow/nodes/variable-assigner/mock.ts  |  2 +-
 16 files changed, 91 insertions(+), 56 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts

diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index 99ae3905e2..a0cb8f1c3b 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -32,7 +32,7 @@ const allMockData = {
   [BlockEnum.End]: EndNodeMock,
 }
 const nodes = [
-  BlockEnum.LLM/* 3 */, BlockEnum.Start/* 1 */, BlockEnum.QuestionClassifier/* 5 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.KnowledgeRetrieval/* 4 */,
+  BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */,
   BlockEnum.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */,
   BlockEnum.VariableAssigner/* 11 */, BlockEnum.End/* 12 */,
 ].map((item, i) => {
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index 3f3f8d5f9c..779746d68c 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -1,11 +1,13 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import copy from 'copy-to-clipboard'
 import cn from 'classnames'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
 import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
-import { Expand04 } from '@/app/components/base/icons/src/vender/solid/arrows'
+import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
+import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
+
 type Props = {
   className?: string
   title: JSX.Element | string
@@ -25,6 +27,14 @@ const Base: FC<Props> = ({
   value,
   isFocus,
 }) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const {
+    wrapClassName,
+    isExpand,
+    setIsExpand,
+    editorExpandHeight,
+  } = useToggleExpend({ ref, hasFooter: false })
+
   const editorContentMinHeight = minHeight - 28
   const [editorContentHeight, setEditorContentHeight] = useState(editorContentMinHeight)
 
@@ -34,37 +44,37 @@ const Base: FC<Props> = ({
     setIsCopied(true)
   }, [value])
 
-  const [isExpanded, setIsExpanded] = React.useState(false)
-  const toggleExpand = useCallback(() => {
-    setIsExpanded(!isExpanded)
-  }, [isExpanded])
-
   return (
-    <div className={cn(className, 'rounded-lg border', isFocus ? 'bg-white border-gray-200' : 'bg-gray-100 border-gray-100 overflow-hidden')}>
-      <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-1'>
-        <div className='text-xs font-semibold text-gray-700'>{title}</div>
-        <div className='flex items-center'>
-          {headerRight}
-          {!isCopied
-            ? (
-              <Clipboard className='mx-1 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleCopy} />
-            )
-            : (
-              <ClipboardCheck className='mx-1 w-3.5 h-3.5 text-gray-500' />
-            )
-          }
-          <Expand04 className='ml-2 mr-2 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={toggleExpand} />
+    <div className={cn(wrapClassName)}>
+      <div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', isFocus ? 'bg-white border-gray-200' : 'bg-gray-100 border-gray-100 overflow-hidden')}>
+        <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
+          <div className='text-xs font-semibold text-gray-700'>{title}</div>
+          <div className='flex items-center'>
+            {headerRight}
+            {!isCopied
+              ? (
+                <Clipboard className='mx-1 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleCopy} />
+              )
+              : (
+                <ClipboardCheck className='mx-1 w-3.5 h-3.5 text-gray-500' />
+              )
+            }
+            <div className='ml-1'>
+              <ToggleExpandBtn isExpand={isExpand} onExpandChange={setIsExpand} />
+            </div>
+          </div>
         </div>
+        <PromptEditorHeightResizeWrap
+          height={isExpand ? editorExpandHeight : editorContentHeight}
+          minHeight={editorContentMinHeight}
+          onHeightChange={setEditorContentHeight}
+          hideResize={isExpand}
+        >
+          <div className='h-full pb-2'>
+            {children}
+          </div>
+        </PromptEditorHeightResizeWrap>
       </div>
-      <PromptEditorHeightResizeWrap
-        height={editorContentHeight}
-        minHeight={editorContentMinHeight}
-        onHeightChange={setEditorContentHeight}
-      >
-        <div className='h-full'>
-          {children}
-        </div>
-      </PromptEditorHeightResizeWrap>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index e685886eb8..d7fa0215bd 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -1,11 +1,12 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useRef } from 'react'
 import cn from 'classnames'
 import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import ToggleExpandBtn from '../toggle-expand-btn'
+import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
+import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
@@ -33,6 +34,13 @@ const Editor: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
 
+  const ref = useRef<HTMLDivElement>(null)
+  const {
+    wrapClassName,
+    isExpand,
+    setIsExpand,
+    editorExpandHeight,
+  } = useToggleExpend({ ref })
   const minHeight = 98
   const [editorHeight, setEditorHeight] = React.useState(minHeight)
   const [isCopied, setIsCopied] = React.useState(false)
@@ -46,15 +54,8 @@ const Editor: FC<Props> = ({
     setFalse: setBlur,
   }] = useBoolean(false)
 
-  const ref = useRef<HTMLDivElement>(null)
-  const [isExpand, setIsExpand] = useState(false)
-  const [wrapHeight, setWrapHeight] = useState(ref.current?.clientHeight)
-  const editorExpandHeight = isExpand ? wrapHeight! - 56 : 0
-  useEffect(() => {
-    setWrapHeight(ref.current?.clientHeight)
-  }, [isExpand])
   return (
-    <div className={cn(isExpand && 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white')}>
+    <div className={cn(wrapClassName)}>
       <div ref={ref} className={cn(isFocus && s.gradientBorder, isExpand && 'h-full', '!rounded-[9px] shadow-md')}>
         <div className={cn(isFocus ? 'bg-white' : 'bg-gray-100', isExpand && 'h-full flex flex-col', 'rounded-lg')}>
           <div className='pt-1 pl-3 pr-2 flex justify-between h-6 items-center'>
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts b/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts
new file mode 100644
index 0000000000..4909515ac6
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts
@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+type Params = {
+  ref: React.RefObject<HTMLDivElement>
+  hasFooter?: boolean
+}
+
+const useToggleExpend = ({ ref, hasFooter = true }: Params) => {
+  const [isExpand, setIsExpand] = useState(false)
+  const [wrapHeight, setWrapHeight] = useState(ref.current?.clientHeight)
+  const editorExpandHeight = isExpand ? wrapHeight! - (hasFooter ? 56 : 29) : 0
+  useEffect(() => {
+    setWrapHeight(ref.current?.clientHeight)
+  }, [isExpand])
+
+  const wrapClassName = isExpand && 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white'
+
+  return {
+    wrapClassName,
+    editorExpandHeight,
+    isExpand,
+    setIsExpand,
+  }
+}
+
+export default useToggleExpend
diff --git a/web/app/components/workflow/nodes/code/mock.ts b/web/app/components/workflow/nodes/code/mock.ts
index 6d0d095341..a7a1a44c06 100644
--- a/web/app/components/workflow/nodes/code/mock.ts
+++ b/web/app/components/workflow/nodes/code/mock.ts
@@ -3,8 +3,8 @@ import { CodeLanguage } from './types'
 import type { CodeNodeType } from './types'
 
 export const mockData: CodeNodeType = {
-  title: 'Test',
-  desc: 'Test',
+  title: 'Code',
+  desc: '',
   type: BlockEnum.Code,
   variables: [
     {
diff --git a/web/app/components/workflow/nodes/direct-answer/mock.ts b/web/app/components/workflow/nodes/direct-answer/mock.ts
index 856606aeb7..48e2a715c6 100644
--- a/web/app/components/workflow/nodes/direct-answer/mock.ts
+++ b/web/app/components/workflow/nodes/direct-answer/mock.ts
@@ -2,7 +2,7 @@ import { BlockEnum } from '../../types'
 import type { DirectAnswerNodeType } from './types'
 
 export const mockData: DirectAnswerNodeType = {
-  title: 'Test',
+  title: 'Direct answer',
   desc: 'Test',
   type: BlockEnum.DirectAnswer,
   variables: [
diff --git a/web/app/components/workflow/nodes/end/mock.ts b/web/app/components/workflow/nodes/end/mock.ts
index d1885c6117..f66e8cf2b3 100644
--- a/web/app/components/workflow/nodes/end/mock.ts
+++ b/web/app/components/workflow/nodes/end/mock.ts
@@ -3,7 +3,7 @@ import { EndVarType } from './types'
 import type { EndNodeType } from './types'
 
 export const mockData: EndNodeType = {
-  title: 'Test',
+  title: 'End',
   desc: 'Test',
   type: BlockEnum.End,
   outputs: {
diff --git a/web/app/components/workflow/nodes/http/mock.ts b/web/app/components/workflow/nodes/http/mock.ts
index 15aa6ab0f1..2a48ac369c 100644
--- a/web/app/components/workflow/nodes/http/mock.ts
+++ b/web/app/components/workflow/nodes/http/mock.ts
@@ -3,7 +3,7 @@ import { APIType, AuthorizationType, BodyType, Method } from './types'
 import type { HttpNodeType } from './types'
 
 export const mockData: HttpNodeType = {
-  title: 'Test',
+  title: 'HTTP Request',
   desc: 'Test',
   type: BlockEnum.HttpRequest,
   variables: [
diff --git a/web/app/components/workflow/nodes/if-else/mock.ts b/web/app/components/workflow/nodes/if-else/mock.ts
index fda1d3bc9d..bbf97a7627 100644
--- a/web/app/components/workflow/nodes/if-else/mock.ts
+++ b/web/app/components/workflow/nodes/if-else/mock.ts
@@ -3,7 +3,7 @@ import type { IfElseNodeType } from './types'
 import { ComparisonOperator, LogicalOperator } from './types'
 
 export const mockData: IfElseNodeType = {
-  title: 'Test',
+  title: 'If Else',
   desc: 'Test',
   type: BlockEnum.IfElse,
   logical_operator: LogicalOperator.and,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/mock.ts b/web/app/components/workflow/nodes/knowledge-retrieval/mock.ts
index 680f6ed184..d821c98182 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/mock.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/mock.ts
@@ -5,7 +5,7 @@ import { RETRIEVE_TYPE } from '@/types/app'
 export const mockData: KnowledgeRetrievalNodeType = {
   type: BlockEnum.KnowledgeRetrieval,
   desc: 'xxx',
-  title: 'KnowledgeRetrieval',
+  title: 'Knowledge Retrieval',
   query_variable_selector: ['aaa', 'name'],
   dataset_ids: ['744a0635-2496-4a87-8e6d-fae410f610be'],
   retrieval_mode: RETRIEVE_TYPE.oneWay,
diff --git a/web/app/components/workflow/nodes/llm/mock.ts b/web/app/components/workflow/nodes/llm/mock.ts
index 8e94177077..4a597c7fcd 100644
--- a/web/app/components/workflow/nodes/llm/mock.ts
+++ b/web/app/components/workflow/nodes/llm/mock.ts
@@ -3,7 +3,7 @@ import type { LLMNodeType } from './types'
 import { Resolution } from '@/types/app'
 
 export const mockData: LLMNodeType = {
-  title: 'Test',
+  title: 'LLM',
   desc: 'Test',
   type: BlockEnum.LLM,
   model: {
diff --git a/web/app/components/workflow/nodes/question-classifier/mock.ts b/web/app/components/workflow/nodes/question-classifier/mock.ts
index daada0fa1a..a90e25377a 100644
--- a/web/app/components/workflow/nodes/question-classifier/mock.ts
+++ b/web/app/components/workflow/nodes/question-classifier/mock.ts
@@ -2,7 +2,7 @@ import { BlockEnum } from '../../types'
 import type { QuestionClassifierNodeType } from './types'
 
 export const mockData: QuestionClassifierNodeType = {
-  title: 'Test',
+  title: 'Question Classifier',
   desc: 'Test',
   type: BlockEnum.QuestionClassifier,
   query_variable_selector: ['aaa', 'name'],
@@ -18,12 +18,10 @@ export const mockData: QuestionClassifierNodeType = {
     {
       id: '1',
       name: 'topic 1',
-      topic: 'xxxxx',
     },
     {
       id: '2',
       name: 'topic 2',
-      topic: 'xxxxx2',
     },
   ],
   instruction: 'You are an entity extraction model that accepts an input',
diff --git a/web/app/components/workflow/nodes/start/mock.ts b/web/app/components/workflow/nodes/start/mock.ts
index d74113753e..e7b27d6b9d 100644
--- a/web/app/components/workflow/nodes/start/mock.ts
+++ b/web/app/components/workflow/nodes/start/mock.ts
@@ -2,7 +2,7 @@ import type { StartNodeType } from './types'
 import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
 
 export const mockData: StartNodeType = {
-  title: 'Test',
+  title: 'Start',
   desc: 'Test',
   type: BlockEnum.Start,
   variables: [
diff --git a/web/app/components/workflow/nodes/template-transform/mock.ts b/web/app/components/workflow/nodes/template-transform/mock.ts
index a22c6013cb..1f50c8ae4d 100644
--- a/web/app/components/workflow/nodes/template-transform/mock.ts
+++ b/web/app/components/workflow/nodes/template-transform/mock.ts
@@ -2,7 +2,7 @@ import { BlockEnum } from '../../types'
 import type { TemplateTransformNodeType } from './types'
 
 export const mockData: TemplateTransformNodeType = {
-  title: 'Test',
+  title: 'Template Transform',
   desc: 'Test',
   type: BlockEnum.TemplateTransform,
   variables: [
diff --git a/web/app/components/workflow/nodes/tool/mock.ts b/web/app/components/workflow/nodes/tool/mock.ts
index abb26e19ab..3827ec22ec 100644
--- a/web/app/components/workflow/nodes/tool/mock.ts
+++ b/web/app/components/workflow/nodes/tool/mock.ts
@@ -3,7 +3,7 @@ import type { ToolNodeType } from './types'
 import { VarType } from './types'
 
 export const mockData: ToolNodeType = {
-  title: 'Test',
+  title: 'Tool',
   desc: 'Test',
   type: BlockEnum.Tool,
   provider_id: 'test',
diff --git a/web/app/components/workflow/nodes/variable-assigner/mock.ts b/web/app/components/workflow/nodes/variable-assigner/mock.ts
index 505de87adc..8171ce0792 100644
--- a/web/app/components/workflow/nodes/variable-assigner/mock.ts
+++ b/web/app/components/workflow/nodes/variable-assigner/mock.ts
@@ -2,7 +2,7 @@ import { BlockEnum } from '../../types'
 import type { VariableAssignerNodeType } from './types'
 
 export const mockData: VariableAssignerNodeType = {
-  title: 'Test',
+  title: 'Variable Assigner',
   desc: 'Test',
   type: BlockEnum.VariableAssigner,
   output_type: 'string',