Merge remote-tracking branch 'origin/main' into feat/support-agent-sandbox

web/app/components/workflow/panel/chat-variable-panel/components/object-value-item.tsx

@@ -96,7 +96,7 @@ const ObjectValueItem: FC<Props> = ({
       {/* Key */}
       <div className="w-[120px] border-r border-gray-200">
         <input
-          className="system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
+          className="block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none system-xs-regular placeholder:text-components-input-text-placeholder placeholder:system-xs-regular hover:bg-state-base-hover focus:bg-components-input-bg-active"
           placeholder={t('chatVariable.modal.objectKey', { ns: 'workflow' }) || ''}
           value={list[index].key}
           onChange={handleKeyChange(index)}
@@ -115,7 +115,7 @@ const ObjectValueItem: FC<Props> = ({
       {/* Value */}
       <div className="relative w-[230px]">
         <input
-          className="system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active"
+          className="block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none system-xs-regular placeholder:text-components-input-text-placeholder placeholder:system-xs-regular hover:bg-state-base-hover focus:bg-components-input-bg-active"
           placeholder={t('chatVariable.modal.objectValue', { ns: 'workflow' }) || ''}
           value={list[index].value}
           onChange={handleValueChange(index)}

web/app/components/workflow/panel/chat-variable-panel/components/object-value-list.tsx

@@ -17,7 +17,7 @@ const ObjectValueList: FC<Props> = ({
 
   return (
     <div className="w-full overflow-hidden rounded-lg border border-gray-200">
-      <div className="system-xs-medium flex h-7 items-center uppercase text-text-tertiary">
+      <div className="flex h-7 items-center uppercase text-text-tertiary system-xs-medium">
         <div className="flex h-full w-[120px] items-center border-r border-gray-200 pl-2">{t('chatVariable.modal.objectKey', { ns: 'workflow' })}</div>
         <div className="flex h-full w-[96px] items-center border-r border-gray-200 pl-2">{t('chatVariable.modal.objectType', { ns: 'workflow' })}</div>
         <div className="flex h-full w-[230px] items-center pl-2 pr-1">{t('chatVariable.modal.objectValue', { ns: 'workflow' })}</div>

web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx

@@ -19,22 +19,22 @@ const VariableItem = ({
   const [destructive, setDestructive] = useState(false)
   return (
     <div className={cn(
-      'radius-md mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover',
+      'mb-1 border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 py-2 shadow-xs radius-md hover:bg-components-panel-on-panel-item-bg-hover',
       destructive && 'border-state-destructive-border hover:bg-state-destructive-hover',
     )}
     >
       <div className="flex items-center justify-between">
         <div className="flex grow items-center gap-1">
           <BubbleX className="h-4 w-4 text-util-colors-teal-teal-700" />
-          <div className="system-sm-medium text-text-primary">{item.name}</div>
-          <div className="system-xs-medium text-text-tertiary">{capitalize(item.value_type)}</div>
+          <div className="text-text-primary system-sm-medium">{item.name}</div>
+          <div className="text-text-tertiary system-xs-medium">{capitalize(item.value_type)}</div>
         </div>
         <div className="flex shrink-0 items-center gap-1 text-text-tertiary">
-          <div className="radius-md cursor-pointer p-1 hover:bg-state-base-hover hover:text-text-secondary">
+          <div className="cursor-pointer p-1 radius-md hover:bg-state-base-hover hover:text-text-secondary">
             <RiEditLine className="h-4 w-4" onClick={() => onEdit(item)} />
           </div>
           <div
-            className="radius-md cursor-pointer p-1 hover:bg-state-destructive-hover hover:text-text-destructive"
+            className="cursor-pointer p-1 radius-md hover:bg-state-destructive-hover hover:text-text-destructive"
             onMouseOver={() => setDestructive(true)}
             onMouseOut={() => setDestructive(false)}
           >
@@ -42,7 +42,7 @@ const VariableItem = ({
           </div>
         </div>
       </div>
-      <div className="system-xs-regular truncate text-text-tertiary">{item.description}</div>
+      <div className="truncate text-text-tertiary system-xs-regular">{item.description}</div>
     </div>
   )
 }

web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx

@@ -273,7 +273,7 @@ const ChatVariableModal = ({
     <div
       className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl', type === ChatVarType.Object && 'w-[480px]')}
     >
-      <div className="system-xl-semibold mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
+      <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold">
         {!chatVar ? t('chatVariable.modal.title', { ns: 'workflow' }) : t('chatVariable.modal.editTitle', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
@@ -287,7 +287,7 @@ const ChatVariableModal = ({
       <div className="max-h-[480px] overflow-y-auto px-4 py-2">
         {/* name */}
         <div className="mb-4">
-          <div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('chatVariable.modal.name', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('chatVariable.modal.name', { ns: 'workflow' })}</div>
           <div className="flex">
             <Input
               placeholder={t('chatVariable.modal.namePlaceholder', { ns: 'workflow' }) || ''}
@@ -300,7 +300,7 @@ const ChatVariableModal = ({
         </div>
         {/* type */}
         <div className="mb-4">
-          <div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('chatVariable.modal.type', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('chatVariable.modal.type', { ns: 'workflow' })}</div>
           <div className="flex">
             <VariableTypeSelector
               value={type}
@@ -312,7 +312,7 @@ const ChatVariableModal = ({
         </div>
         {/* default value */}
         <div className="mb-4">
-          <div className="system-sm-semibold mb-1 flex h-6 items-center justify-between text-text-secondary">
+          <div className="mb-1 flex h-6 items-center justify-between text-text-secondary system-sm-semibold">
             <div>{t('chatVariable.modal.value', { ns: 'workflow' })}</div>
             {(type === ChatVarType.ArrayString || type === ChatVarType.ArrayNumber || type === ChatVarType.ArrayBoolean) && (
               <Button
@@ -341,7 +341,7 @@ const ChatVariableModal = ({
             {type === ChatVarType.String && (
               // Input will remove \n\r, so use Textarea just like description area
               <textarea
-                className="system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+                className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
                 value={value}
                 placeholder={t('chatVariable.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
                 onChange={e => setValue(e.target.value)}
@@ -404,10 +404,10 @@ const ChatVariableModal = ({
         </div>
         {/* description */}
         <div className="">
-          <div className="system-sm-semibold mb-1 flex h-6 items-center text-text-secondary">{t('chatVariable.modal.description', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('chatVariable.modal.description', { ns: 'workflow' })}</div>
           <div className="flex">
             <textarea
-              className="system-sm-regular placeholder:system-sm-regular block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+              className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
               value={description}
               placeholder={t('chatVariable.modal.descriptionPlaceholder', { ns: 'workflow' }) || ''}
               onChange={e => setDescription(e.target.value)}

web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx

@@ -35,15 +35,15 @@ const VariableTypeSelector = ({
       <PortalToFollowElemTrigger className="w-full" onClick={() => setOpen(v => !v)}>
         <div className={cn(
           'flex w-full cursor-pointer items-center px-2',
-          !inCell && 'radius-md bg-components-input-bg-normal py-1 hover:bg-state-base-hover-alt',
+          !inCell && 'bg-components-input-bg-normal py-1 radius-md hover:bg-state-base-hover-alt',
           inCell && 'py-0.5 hover:bg-state-base-hover',
           open && !inCell && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
           open && inCell && 'bg-state-base-hover hover:bg-state-base-hover',
         )}
         >
           <div className={cn(
-            'system-sm-regular grow truncate p-1 text-components-input-text-filled',
-            inCell && 'system-xs-regular text-text-secondary',
+            'grow truncate p-1 text-components-input-text-filled system-sm-regular',
+            inCell && 'text-text-secondary system-xs-regular',
           )}
           >
             {value}
@@ -52,17 +52,17 @@ const VariableTypeSelector = ({
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={cn('z-[11] w-full', popupClassName)}>
-        <div className="radius-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
+        <div className="border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg radius-xl">
           {list.map((item: any) => (
             <div
               key={item}
-              className="radius-md flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 hover:bg-state-base-hover"
+              className="flex cursor-pointer items-center gap-2 py-[6px] pl-3 pr-2 radius-md hover:bg-state-base-hover"
               onClick={() => {
                 onSelect(item)
                 setOpen(false)
               }}
             >
-              <div className="system-md-regular grow truncate text-text-secondary">{item}</div>
+              <div className="grow truncate text-text-secondary system-md-regular">{item}</div>
               {value === item && <RiCheckLine className="h-4 w-4 text-text-accent" />}
             </div>
           ))}

web/app/components/workflow/panel/chat-variable-panel/index.tsx

@@ -187,7 +187,7 @@ const ChatVariablePanel = () => {
         'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
       )}
     >
-      <div className="system-xl-semibold flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary">
+      <div className="flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold">
         {t('chatVariable.panelTitle', { ns: 'workflow' })}
         <div className="flex items-center gap-1">
           <ActionButton state={showTip ? ActionButtonState.Active : undefined} onClick={() => setShowTip(!showTip)}>
@@ -203,33 +203,33 @@ const ChatVariablePanel = () => {
       </div>
       {showTip && (
         <div className="shrink-0 px-3 pb-2 pt-2.5">
-          <div className="radius-2xl relative bg-background-section-burn p-3">
-            <div className="system-2xs-medium-uppercase inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary">TIPS</div>
-            <div className="system-sm-regular mb-4 mt-1 text-text-secondary">
+          <div className="relative bg-background-section-burn p-3 radius-2xl">
+            <div className="inline-block rounded-[5px] border border-divider-deep px-[5px] py-[3px] text-text-tertiary system-2xs-medium-uppercase">TIPS</div>
+            <div className="mb-4 mt-1 text-text-secondary system-sm-regular">
               {t('chatVariable.panelDescription', { ns: 'workflow' })}
             </div>
             <div className="flex items-center gap-2">
-              <div className="radius-lg flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md">
+              <div className="flex flex-col border border-workflow-block-border bg-workflow-block-bg p-3 pb-4 shadow-md radius-lg">
                 <BubbleX className="mb-1 h-4 w-4 shrink-0 text-util-colors-teal-teal-700" />
-                <div className="system-xs-semibold text-text-secondary">conversation_var</div>
-                <div className="system-2xs-regular text-text-tertiary">String</div>
+                <div className="text-text-secondary system-xs-semibold">conversation_var</div>
+                <div className="text-text-tertiary system-2xs-regular">String</div>
               </div>
               <div className="grow">
                 <div className="mb-2 flex items-center gap-2 py-1">
                   <div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
                     <LongArrowLeft className="h-2 grow text-text-quaternary" />
-                    <div className="system-2xs-medium shrink-0 text-text-tertiary">WRITE</div>
+                    <div className="shrink-0 text-text-tertiary system-2xs-medium">WRITE</div>
                   </div>
                   <BlockIcon className="shrink-0" type={BlockEnum.Assigner} />
-                  <div className="system-xs-semibold grow truncate text-text-secondary">{t('blocks.assigner', { ns: 'workflow' })}</div>
+                  <div className="grow truncate text-text-secondary system-xs-semibold">{t('blocks.assigner', { ns: 'workflow' })}</div>
                 </div>
                 <div className="flex items-center gap-2 py-1">
                   <div className="flex h-3 w-16 shrink-0 items-center gap-1 px-1">
-                    <div className="system-2xs-medium shrink-0 text-text-tertiary">READ</div>
+                    <div className="shrink-0 text-text-tertiary system-2xs-medium">READ</div>
                     <LongArrowRight className="h-2 grow text-text-quaternary" />
                   </div>
                   <BlockIcon className="shrink-0" type={BlockEnum.LLM} />
-                  <div className="system-xs-semibold grow truncate text-text-secondary">{t('blocks.llm', { ns: 'workflow' })}</div>
+                  <div className="grow truncate text-text-secondary system-xs-semibold">{t('blocks.llm', { ns: 'workflow' })}</div>
                 </div>
               </div>
             </div>