feat: support prompt messages sorting (#3757)

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(() => {