feat: support prompt messages sorting (#3757)

web/app/components/base/icons/assets/vender/line/others/drag-handle.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Drag Handle">
+<path id="drag-handle" fill-rule="evenodd" clip-rule="evenodd" d="M6 5C6.55228 5 7 4.55228 7 4C7 3.44772 6.55228 3 6 3C5.44772 3 5 3.44772 5 4C5 4.55228 5.44772 5 6 5ZM6 9C6.55228 9 7 8.55228 7 8C7 7.44772 6.55228 7 6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9ZM11 4C11 4.55228 10.5523 5 10 5C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3C10.5523 3 11 3.44772 11 4ZM10 9C10.5523 9 11 8.55228 11 8C11 7.44772 10.5523 7 10 7C9.44772 7 9 7.44772 9 8C9 8.55228 9.44772 9 10 9ZM7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55228 11 7 11.4477 7 12ZM10 13C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13Z" fill="#98A2B3"/>
+</g>
+</svg>

web/app/components/base/icons/src/vender/line/others/DragHandle.json

@@ -0,0 +1,38 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "Drag Handle"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "drag-handle",
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M6 5C6.55228 5 7 4.55228 7 4C7 3.44772 6.55228 3 6 3C5.44772 3 5 3.44772 5 4C5 4.55228 5.44772 5 6 5ZM6 9C6.55228 9 7 8.55228 7 8C7 7.44772 6.55228 7 6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9ZM11 4C11 4.55228 10.5523 5 10 5C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3C10.5523 3 11 3.44772 11 4ZM10 9C10.5523 9 11 8.55228 11 8C11 7.44772 10.5523 7 10 7C9.44772 7 9 7.44772 9 8C9 8.55228 9.44772 9 10 9ZM7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55228 11 7 11.4477 7 12ZM10 13C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11C9.44772 11 9 11.4477 9 12C9 12.5523 9.44772 13 10 13Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "DragHandle"
+}

web/app/components/base/icons/src/vender/line/others/DragHandle.tsx

@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './DragHandle.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'DragHandle'
+
+export default Icon

web/app/components/base/icons/src/vender/line/others/index.ts

@@ -0,0 +1 @@
+export { default as DragHandle } from './DragHandle'

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

@@ -22,6 +22,8 @@ import { Variable02 } from '@/app/components/base/icons/src/vender/solid/develop
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type Props = {
+  className?: string
+  headerClassName?: string
   instanceId?: string
   title: string | JSX.Element
   value: string
@@ -43,6 +45,8 @@ type Props = {
 }
 
 const Editor: FC<Props> = ({
+  className,
+  headerClassName,
   instanceId,
   title,
   value,
@@ -102,10 +106,10 @@ 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'>
+          <div className={cn(headerClassName, 'pt-1 pl-3 pr-2 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 || 0}</div>

web/app/components/workflow/nodes/_base/components/selector.tsx

@@ -14,6 +14,7 @@ type Props = {
   DropDownIcon?: any
   noLeft?: boolean
   options: Item[]
+  allOptions?: Item[]
   value: string
   placeholder?: string
   onChange: (value: any) => void
@@ -30,6 +31,7 @@ const TypeSelector: FC<Props> = ({
   DropDownIcon = ChevronSelectorVertical,
   noLeft,
   options: list,
+  allOptions,
   value,
   placeholder = '',
   onChange,
@@ -41,7 +43,7 @@ const TypeSelector: FC<Props> = ({
   showChecked,
 }) => {
   const noValue = value === '' || value === undefined || value === null
-  const item = list.find(item => item.value === value)
+  const item = allOptions ? allOptions.find(item => item.value === value) : list.find(item => item.value === value)
   const [showOption, { setFalse: setHide, toggle: toggleShow }] = useBoolean(false)
   const ref = React.useRef(null)
   useClickAway(() => {

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

@@ -13,6 +13,9 @@ import { PromptRole } from '@/models/debug'
 const i18nPrefix = 'workflow.nodes.llm'
 
 type Props = {
+  className?: string
+  headerClassName?: string
+  canNotChooseSystemRole?: boolean
   readOnly: boolean
   id: string
   canRemove: boolean
@@ -47,7 +50,12 @@ const roleOptions = [
   },
 ]
 
+const roleOptionsWithoutSystemRole = roleOptions.filter(item => item.value !== PromptRole.system)
+
 const ConfigPromptItem: FC<Props> = ({
+  className,
+  headerClassName,
+  canNotChooseSystemRole,
   readOnly,
   id,
   canRemove,
@@ -68,19 +76,28 @@ const ConfigPromptItem: FC<Props> = ({
     setInstanceId(`${id}-${uniqueId()}`)
   }, [id])
   return (
-
     <Editor
+      className={className}
+      headerClassName={headerClassName}
       instanceId={instanceId}
       key={instanceId}
       title={
         <div className='relative left-1 flex items-center'>
-          <TypeSelector
+          {payload.role === PromptRole.system
-            value={payload.role as string}
+            ? (<div className='relative left-[-4px] text-xs font-semibold text-gray-700 uppercase'>
-            options={roleOptions}
+              SYSTEM
-            onChange={handleChatModeMessageRoleChange}
+            </div>)
-            triggerClassName='text-xs font-semibold text-gray-700 uppercase'
+            : (
-            itemClassName='text-[13px] font-medium text-gray-700'
+              <TypeSelector
-          />
+                value={payload.role as string}
+                allOptions={roleOptions}
+                options={canNotChooseSystemRole ? roleOptionsWithoutSystemRole : roleOptions}
+                onChange={handleChatModeMessageRoleChange}
+                triggerClassName='text-xs font-semibold text-gray-700 uppercase'
+                itemClassName='text-[13px] font-medium text-gray-700'
+              />
+            )}
+
           <TooltipPlus
             popupContent={
               <div className='max-w-[180px]'>{t(`${i18nPrefix}.roleDescription.${payload.role}`)}</div>

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'>
-              {
+              <ReactSortable className="space-y-1"
-                (payload as PromptItem[]).map((item, index) => {
+                list={payloadWithIds}
-                  return (
+                setList={(list) => {
-                    <ConfigPromptItem
+                  if ((payload as PromptItem[])?.[0].role === PromptRole.system && list[0].p.role !== PromptRole.system)
-                      key={`${payload.length}-${index}`}
+                    return
-                      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}
-                    />
-                  )
-                })
 
-              }
+                  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'

web/app/components/workflow/types.ts

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