feat: add role tooltip and fix add prompt error

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

@@ -56,7 +56,7 @@ const Editor: FC<Props> = ({
 
   return (
     <div className={cn(wrapClassName)}>
-      <div ref={ref} className={cn(isFocus && s.gradientBorder, isExpand && 'h-full', '!rounded-[9px] shadow-md')}>
+      <div ref={ref} className={cn(isFocus && s.gradientBorder, isExpand && 'h-full', '!rounded-[9px]')}>
         <div className={cn(isFocus ? 'bg-white' : '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='leading-4 text-xs font-semibold text-gray-700 uppercase'>{title}</div>

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

@@ -16,6 +16,7 @@ type Props = {
   onChange: (value: any) => void
   uppercase?: boolean
   popupClassName?: string
+  triggerClassName?: string
   itemClassName?: string
   readonly?: boolean
   showChecked?: boolean
@@ -27,6 +28,7 @@ const TypeSelector: FC<Props> = ({
   value,
   onChange,
   uppercase,
+  triggerClassName,
   popupClassName,
   itemClassName,
   readonly,
@@ -52,7 +54,7 @@ const TypeSelector: FC<Props> = ({
           <div
             onClick={toggleShow}
             className={cn(showOption && 'bg-black/5', 'flex items-center h-5 pl-1 pr-0.5 rounded-md text-xs font-semibold text-gray-700 cursor-pointer hover:bg-black/5')}>
-            <div className={cn('text-sm font-semibold', uppercase && 'uppercase')}>{item?.label}</div>
+            <div className={cn(triggerClassName, 'text-sm font-semibold', uppercase && 'uppercase')}>{item?.label}</div>
             <ChevronSelectorVertical className='w-3 h-3 ' />
           </div>
         )}

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

@@ -8,6 +8,8 @@ import { PromptRole } from '../../../types'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 
 const i18nPrefix = 'workflow.nodes.llm'
 
@@ -38,13 +40,17 @@ const ConfigPrompt: FC<Props> = ({
   }, [onChange, payload])
 
   const roleOptions = [
+    {
+      label: 'system',
+      value: PromptRole.system,
+    },
     {
       label: 'user',
       value: PromptRole.user,
     },
     {
-      label: 'system',
-      value: PromptRole.system,
+      label: 'assistant',
+      value: PromptRole.assistant,
     },
   ]
 
@@ -60,7 +66,7 @@ const ConfigPrompt: FC<Props> = ({
   const handleAddPrompt = useCallback(() => {
     const newPrompt = produce(payload as PromptItem[], (draft) => {
       const isLastItemUser = draft[draft.length - 1].role === PromptRole.user
-      draft.push({ role: isLastItemUser ? PromptRole.system : PromptRole.user, text: '' })
+      draft.push({ role: isLastItemUser ? PromptRole.assistant : PromptRole.user, text: '' })
     })
     onChange(newPrompt)
   }, [onChange, payload])
@@ -93,12 +99,21 @@ const ConfigPrompt: FC<Props> = ({
                     <Editor
                       key={index}
                       title={
-                        <div className='relative left-1'>
+                        <div className='relative left-1 flex items-center'>
                           <TypeSelector
                             value={item.role as string}
                             options={roleOptions}
                             onChange={handleChatModeMessageRoleChange(index)}
+                            triggerClassName='text-xs font-semibold text-gray-700 uppercase'
+                            itemClassName='text-[13px] font-medium text-gray-700'
                           />
+                          <TooltipPlus
+                            popupContent={
+                              <div>{t(`${i18nPrefix}.roleDescription`)}</div>
+                            }
+                          >
+                            <HelpCircle className='w-3.5 h-3.5 text-gray-400' />
+                          </TooltipPlus>
                         </div>
                       }
                       value={item.text}

web/i18n/en-US/workflow.ts

@@ -97,6 +97,7 @@ const translation = {
       context: 'context',
       contextTooltip: 'You can import Knowledge as context',
       prompt: 'prompt',
+      roleDescription: 'TODO: Role Description',
       addMessage: 'Add Message',
       vision: 'vision',
       resolution: {

web/i18n/zh-Hans/workflow.ts

@@ -98,6 +98,7 @@ const translation = {
       contextTooltip: '您可以导入知识库作为上下文',
       prompt: '提示词',
       addMessage: '添加消息',
+      roleDescription: 'TODO: Role Description',
       vision: '视觉',
       resolution: {
         name: '分辨率',