feat: prompt ide and fin direct ansewer node

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -0,0 +1,108 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import cn from 'classnames'
+import copy from 'copy-to-clipboard'
+import { useTranslation } from 'react-i18next'
+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'
+import { Expand04 } from '@/app/components/base/icons/src/vender/solid/arrows'
+import s from '@/app/components/app/configuration/config-prompt/style.module.css'
+
+type Props = {
+  title: string
+  value: string
+  variables: string[]
+  onChange: (value: string) => void
+}
+
+const Editor: FC<Props> = ({
+  title,
+  value,
+  variables,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  const minHeight = 98
+  const [editorHeight, setEditorHeight] = React.useState(minHeight)
+  const [isCopied, setIsCopied] = React.useState(false)
+  const handleCopy = useCallback(() => {
+    copy(value)
+    setIsCopied(true)
+  }, [value])
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  const toggleExpand = useCallback(() => {
+    setIsExpanded(!isExpanded)
+  }, [isExpanded])
+
+  return (
+    <div className={cn(s.gradientBorder, '!rounded-[9px] shadow-md')}>
+      <div className='rounded-lg bg-white'>
+        <div className='pt-1 pl-3 pr-1 flex justify-between h-6 items-center'>
+          <div className='leading-4 text-xs font-semibold text-gray-700 uppercase'>{title}</div>
+          <div className='flex items-center'>
+            <div className='leading-[18px] text-xs font-medium text-gray-500'>{value.length}</div>
+            <div className='w-px h-3 ml-2 mr-3 bg-gray-200'></div>
+            {!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>
+        </div>
+        <PromptEditorHeightResizeWrap
+          className='px-3 min-h-[102px] overflow-y-auto text-sm text-gray-700'
+          height={editorHeight}
+          minHeight={minHeight}
+          onHeightChange={setEditorHeight}
+          footer={(
+            <div className='pl-4 pb-2 flex'>
+              <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{'{x} '}{t('workflow.nodes.common.insertVarTip')}</div>
+            </div>
+          )}
+        >
+          <PromptEditor
+            className='min-h-[84px]'
+            value={value}
+            contextBlock={{
+              show: true,
+              selectable: true,
+              datasets: [],
+              onAddContext: () => { },
+            }}
+            variableBlock={{
+              variables: variables.map(item => ({
+                name: item,
+                value: item,
+              })),
+              externalTools: [],
+              onAddExternalTool: () => { },
+            }}
+            historyBlock={{
+              show: true,
+              selectable: true,
+              history: {
+                user: 'user',
+                assistant: 'xxx',
+              },
+              onEditRole: () => { },
+            }}
+            queryBlock={{
+              show: true,
+              selectable: true,
+            }}
+            onChange={onChange}
+            onBlur={() => { }}
+          />
+        </PromptEditorHeightResizeWrap>
+      </div>
+    </div>
+  )
+}
+export default React.memo(Editor)

web/app/components/workflow/nodes/direct-answer/panel.tsx

@@ -1,8 +1,47 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import useConfig from './use-config'
+import { mockData } from './mock'
+import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import AddButton from '@/app/components/base/button/add-button'
+import Split from '@/app/components/workflow/nodes/_base/components/split'
+import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
+const i18nPrefix = 'workflow.nodes.directAnswer'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  const readOnly = false
+
+  const {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+    handleAnswerChange,
+  } = useConfig(mockData)
+
   return (
-    <div>start panel inputs</div>
+    <div className='mt-2 px-4 space-y-4'>
+      <Field
+        title={t(`${i18nPrefix}.inputVars`)}
+        operations={
+          <AddButton onClick={handleAddVariable} />
+        }
+      >
+        <VarList
+          readonly={readOnly}
+          list={inputs.variables}
+          onChange={handleVarListChange}
+        />
+      </Field>
+      <Split />
+      <Editor
+        title={t(`${i18nPrefix}.answer`)}
+        value={inputs.answer}
+        onChange={handleAnswerChange}
+        variables={inputs.variables.map(item => item.variable)}
+      />
+    </div>
   )
 }
 

web/app/components/workflow/nodes/direct-answer/use-config.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react'
+import produce from 'immer'
+import type { Variable } from '../../types'
+import type { DirectAnswerNodeType } from './types'
+
+const useConfig = (initInputs: DirectAnswerNodeType) => {
+  const [inputs, setInputs] = useState<DirectAnswerNodeType>(initInputs)
+  // variables
+  const handleVarListChange = useCallback((newList: Variable[]) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.variables = newList
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleAddVariable = useCallback(() => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.variables.push({
+        variable: '',
+        value_selector: [],
+      })
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleAnswerChange = useCallback((value: string) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.answer = value
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+  return {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+    handleAnswerChange,
+  }
+}
+
+export default useConfig

web/app/components/workflow/nodes/llm/panel.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import VarList from '../_base/components/variable/var-list'
 import useConfig from './use-config'
 import { mockData } from './mock'
+import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'