feat: all other code expand

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) => {

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={cn(wrapClassName)}>
-      <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-1'>
+      <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='text-xs font-semibold text-gray-700'>{title}</div>
+        <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
-        <div className='flex items-center'>
+          <div className='text-xs font-semibold text-gray-700'>{title}</div>
-          {headerRight}
+          <div className='flex items-center'>
-          {!isCopied
+            {headerRight}
-            ? (
+            {!isCopied
-              <Clipboard className='mx-1 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleCopy} />
+              ? (
-            )
+                <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' />
+              : (
-            )
+                <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='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>
   )
 }

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'>

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

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',
+  title: 'Code',
-  desc: 'Test',
+  desc: '',
   type: BlockEnum.Code,
   variables: [
     {

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: [

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: {

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: [

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,

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,

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: {

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',

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: [

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: [

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',

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',