feat: support prompt messages sorting (#3757)

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

@@ -3,12 +3,17 @@ 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 cn from 'classnames'
 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'
+import { DragHandle } from '@/app/components/base/icons/src/vender/line/others'
+
 const i18nPrefix = 'workflow.nodes.llm'
 
 type Props = {
@@ -39,6 +44,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,
@@ -94,37 +111,69 @@ const ConfigPrompt: FC<Props> = ({
     onChange(newPrompt)
   }, [onChange, payload])
 
-  // console.log(getInputVars((payload as PromptItem).text))
+  const canChooseSystemRole = (() => {
+    if (isChatModel && Array.isArray(payload))
+      return !payload.find(item => item.role === PromptRole.system)
 
+    return false
+  })()
   return (
     <div>
       {(isChatModel && Array.isArray(payload))
         ? (
           <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) => {
+                  if ((payload as PromptItem[])?.[0].role === PromptRole.system && list[0].p.role !== PromptRole.system)
+                    return
 
-              }
+                  onChange(list.map(item => item.p))
+                }}
+                handle='.handle'
+                ghostClass="opacity-50"
+                animation={150}
+              >
+                {
+                  (payload as PromptItem[]).map((item, index) => {
+                    const canDrag = (() => {
+                      if (readOnly)
+                        return false
+
+                      if (index === 0 && item.role === PromptRole.system)
+                        return false
+
+                      return true
+                    })()
+                    return (
+                      <div key={item.id} className='relative group'>
+                        {canDrag && <DragHandle className='group-hover:block hidden absolute left-[-14px] top-2 w-3.5 h-3.5 text-gray-400' />}
+                        <ConfigPromptItem
+                          className={cn(canDrag && 'handle')}
+                          headerClassName={cn(canDrag && 'cursor-grab')}
+                          canNotChooseSystemRole={!canChooseSystemRole}
+                          canRemove={payload.length > 1 && !(index === 0 && item.role === PromptRole.system)}
+                          readOnly={readOnly}
+                          id={item.id!}
+                          handleChatModeMessageRoleChange={handleChatModeMessageRoleChange(index)}
+                          isChatModel={isChatModel}
+                          isChatApp={isChatApp}
+                          payload={item}
+                          onPromptChange={handleChatModePromptChange(index)}
+                          onRemove={handleRemove(index)}
+                          isShowContext={isShowContext}
+                          hasSetBlockStatus={hasSetBlockStatus}
+                          availableVars={availableVars}
+                          availableNodes={availableNodes}
+                        />
+                      </div>
+
+                    )
+                  })
+
+                }
+              </ReactSortable>
             </div>
             <AddButton
               className='mt-2'