feat: can drag

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

@@ -22,6 +22,7 @@ import { Variable02 } from '@/app/components/base/icons/src/vender/solid/develop
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type Props = {
+  className?: string
   instanceId?: string
   title: string | JSX.Element
   value: string
@@ -43,6 +44,7 @@ type Props = {
 }
 
 const Editor: FC<Props> = ({
+  className,
   instanceId,
   title,
   value,
@@ -102,7 +104,7 @@ const Editor: FC<Props> = ({
   }
 
   return (
-    <div className={cn(wrapClassName)} style={wrapStyle}>
+    <div className={cn(className, wrapClassName)} style={wrapStyle}>
       <div ref={ref} className={cn(isFocus ? s.gradientBorder : 'bg-gray-100', isExpand && 'h-full', '!rounded-[9px] p-0.5')}>
         <div className={cn(isFocus ? 'bg-gray-50' : '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/llm/components/config-prompt-item.tsx

@@ -13,6 +13,7 @@ import { PromptRole } from '@/models/debug'
 const i18nPrefix = 'workflow.nodes.llm'
 
 type Props = {
+  className?: string
   readOnly: boolean
   id: string
   canRemove: boolean
@@ -48,6 +49,7 @@ const roleOptions = [
 ]
 
 const ConfigPromptItem: FC<Props> = ({
+  className,
   readOnly,
   id,
   canRemove,
@@ -68,8 +70,8 @@ const ConfigPromptItem: FC<Props> = ({
     setInstanceId(`${id}-${uniqueId()}`)
   }, [id])
   return (
-
     <Editor
+      className={className}
       instanceId={instanceId}
       key={instanceId}
       title={

web/app/components/workflow/nodes/llm/components/config-prompt.tsx

@@ -3,12 +3,15 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
+import { ReactSortable } from 'react-sortablejs'
+import { v4 as uuid4 } from 'uuid'
 import type { PromptItem, ValueSelector, Var } from '../../../types'
 import { PromptRole } from '../../../types'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import ConfigPromptItem from './config-prompt-item'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
+
 const i18nPrefix = 'workflow.nodes.llm'
 
 type Props = {
@@ -39,6 +42,18 @@ const ConfigPrompt: FC<Props> = ({
   hasSetBlockStatus,
 }) => {
   const { t } = useTranslation()
+  const payloadWithIds = (isChatModel && Array.isArray(payload))
+    ? payload.map((item, i) => {
+      const id = uuid4()
+      return {
+        id: item.id || id,
+        p: {
+          ...item,
+          id: item.id || id,
+        },
+      }
+    })
+    : []
   const {
     availableVars,
     availableNodes,
@@ -102,29 +117,38 @@ const ConfigPrompt: FC<Props> = ({
         ? (
           <div>
             <div className='space-y-2'>
-              {
-                (payload as PromptItem[]).map((item, index) => {
-                  return (
-                    <ConfigPromptItem
-                      key={`${payload.length}-${index}`}
-                      canRemove={payload.length > 1}
-                      readOnly={readOnly}
-                      id={`${payload.length}-${index}`}
-                      handleChatModeMessageRoleChange={handleChatModeMessageRoleChange(index)}
-                      isChatModel={isChatModel}
-                      isChatApp={isChatApp}
-                      payload={item}
-                      onPromptChange={handleChatModePromptChange(index)}
-                      onRemove={handleRemove(index)}
-                      isShowContext={isShowContext}
-                      hasSetBlockStatus={hasSetBlockStatus}
-                      availableVars={availableVars}
-                      availableNodes={availableNodes}
-                    />
-                  )
-                })
+              <ReactSortable className="space-y-1"
+                list={payloadWithIds}
+                setList={list => onChange(list.map(item => item.p))}
+                handle='.handle'
+                ghostClass="opacity-50"
+                animation={150}
+              >
+                {
+                  (payload as PromptItem[]).map((item, index) => {
+                    return (
+                      <ConfigPromptItem
+                        className='handle'
+                        key={item.id}
+                        canRemove={payload.length > 1}
+                        readOnly={readOnly}
+                        id={`${payload.length}-${index}`}
+                        handleChatModeMessageRoleChange={handleChatModeMessageRoleChange(index)}
+                        isChatModel={isChatModel}
+                        isChatApp={isChatApp}
+                        payload={item}
+                        onPromptChange={handleChatModePromptChange(index)}
+                        onRemove={handleRemove(index)}
+                        isShowContext={isShowContext}
+                        hasSetBlockStatus={hasSetBlockStatus}
+                        availableVars={availableVars}
+                        availableNodes={availableNodes}
+                      />
+                    )
+                  })
 
-              }
+                }
+              </ReactSortable>
             </div>
             <AddButton
               className='mt-2'

web/app/components/workflow/types.ts

@@ -122,6 +122,7 @@ export enum PromptRole {
 }
 
 export type PromptItem = {
+  id?: string
   role?: PromptRole
   text: string
 }