feat: copy and expand

web/app/components/workflow/nodes/human-input/components/form-content.tsx

@@ -24,6 +24,7 @@ type Props = {
   onFormInputItemRename: (payload: FormInputItem, oldName: string) => void
   onFormInputItemRemove: (varName: string) => void
   editorKey: number
+  isExpand: boolean
 }
 
 const Key: FC<{ children: React.ReactNode, className?: string }> = ({ children, className }) => {
@@ -44,6 +45,7 @@ const FormContent: FC<Props> = ({
   onFormInputItemRename,
   onFormInputItemRemove,
   editorKey,
+  isExpand,
 }) => {
   const { t } = useTranslation()
   const filterVar = () => true
@@ -90,12 +92,13 @@ const FormContent: FC<Props> = ({
   }] = useBoolean(false)
 
   return (
-    <div className={cn('rounded-[10px] border border-components-input-bg-normal bg-components-input-bg-normal px-3 pt-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active')}>
+    <div className={cn('flex grow flex-col rounded-[10px] border border-components-input-bg-normal bg-components-input-bg-normal pt-1', isFocus && 'border-components-input-border-active bg-components-input-bg-active', !isFocus && 'pb-[32px]')}>
       <PromptEditor
         key={editorKey}
         value={value}
         onChange={onChange}
-        className='min-h-[80px]'
+        className={cn('min-h-[80px] ', isExpand && 'h-full')}
+        wrapperClassName={cn('max-h-[300px] overflow-y-auto px-3', isExpand && 'h-0 max-h-full grow')}
         onFocus={setFocus}
         onBlur={setBlur}
         hitlInputBlock={{
@@ -141,7 +144,7 @@ const FormContent: FC<Props> = ({
         }]}
       />
       {isFocus && (
-        <div className='system-xs-regular flex h-8 items-center text-components-input-text-placeholder'>
+        <div className='system-xs-regular flex h-8 shrink-0 items-center px-3 text-components-input-text-placeholder'>
           <Trans
             i18nKey='workflow.nodes.humanInput.formContent.hotkeyTip'
             components={

web/app/components/workflow/nodes/human-input/panel.tsx

@@ -2,6 +2,10 @@ import type { FC } from 'react'
 import React from 'react'
 import {
   RiAddLine,
+  RiClipboardLine,
+  RiCollapseDiagonalLine,
+  RiExpandDiagonalLine,
+  RiEyeLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
@@ -19,6 +23,12 @@ import { VarType } from '@/app/components/workflow/types'
 import type { Var } from '@/app/components/workflow/types'
 import FormContent from './components/form-content'
 import { genActionId } from './utils'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import copy from 'copy-to-clipboard'
+import { useBoolean } from 'ahooks'
+import cn from '@/utils/classnames'
+import { useStore } from '@/app/components/workflow/store'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
@@ -48,6 +58,11 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
     },
   })
 
+  const [isExpandFormContent, {
+    toggle: toggleExpandFormContent,
+  }] = useBoolean(true)
+  const panelWidth = useStore(state => state.panelWidth)
+
   return (
     <div className='py-2'>
       {/* delivery methods */}
@@ -61,14 +76,32 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
         <Divider className='!my-0 !h-px !bg-divider-subtle' />
       </div>
       {/* form content */}
-      <div className='px-4 py-2'>
-        <div className='mb-1 flex items-center justify-between'>
+      <div className={cn('px-4 py-2', isExpandFormContent && 'fixed bottom-[8px] right-[4px] top-[189px] z-10 flex flex-col bg-components-panel-bg')} style={{ width: panelWidth }}>
+        <div className='mb-1 flex shrink-0 items-center justify-between'>
           <div className='flex h-6 items-center gap-0.5'>
             <div className='system-sm-semibold-uppercase text-text-secondary'>{t(`${i18nPrefix}.formContent.title`)}</div>
             <Tooltip
               popupContent={t(`${i18nPrefix}.formContent.tooltip`)}
             />
           </div>
+          <div className='flex items-center '>
+            <Button variant='ghost' className='flex items-center space-x-1 px-2 text-components-button-ghost-text'>
+              <RiEyeLine className='size-3.5' />
+              <div className='system-xs-medium'>Preview</div>
+            </Button>
+            <div className='ml-3 mr-2 h-3 w-px bg-divider-regular'></div>
+            <div className='flex items-center space-x-1'>
+              <div className='flex size-6 cursor-pointer items-center justify-center rounded-md hover:bg-components-button-ghost-bg-hover' onClick={() => {
+                copy(inputs.form_content)
+                Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') })
+              }}>
+                <RiClipboardLine className='h-4 w-4 text-text-secondary' />
+              </div>
+              <div className={cn('flex size-6 cursor-pointer items-center justify-center rounded-md text-text-secondary hover:bg-components-button-ghost-bg-hover', isExpandFormContent && 'bg-state-accent-active text-text-accent')} onClick={toggleExpandFormContent}>
+                {isExpandFormContent ? <RiCollapseDiagonalLine className='h-4 w-4' /> : <RiExpandDiagonalLine className='h-4 w-4' />}
+              </div>
+            </div>
+          </div>
         </div>
         <FormContent
           editorKey={editorKey}
@@ -80,6 +113,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
           onFormInputsChange={handleFormInputsChange}
           onFormInputItemRename={handleFormInputItemRename}
           onFormInputItemRemove={handleFormInputItemRemove}
+          isExpand={isExpandFormContent}
         />
       </div>
       {/* user actions */}