Merge branch 'feat/gtag-1016' into deploy/dev

web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx

@@ -118,8 +118,20 @@ const FormItem: FC<Props> = ({
     <div className={cn(className)}>
       {!isArrayLikeType && !isBooleanType && (
         <div className='system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary'>
-          <div className='truncate'>{typeof payload.label === 'object' ? nodeKey : payload.label}</div>
-          {!payload.required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
+          <div className='truncate'>
+            {typeof payload.label === 'object' ? nodeKey : payload.label}
+          </div>
+          {payload.hide === true ? (
+            <span className='system-xs-regular text-text-tertiary'>
+              {t('workflow.panel.optional_and_hidden')}
+            </span>
+          ) : (
+            !payload.required && (
+              <span className='system-xs-regular text-text-tertiary'>
+                {t('workflow.panel.optional')}
+              </span>
+            )
+          )}
         </div>
       )}
       <div className='grow'>

web/app/components/workflow/nodes/_base/components/variable/var-list.tsx

@@ -61,7 +61,6 @@ const VarList: FC<Props> = ({
       return
     }
     if (list.some(item => item.variable?.trim() === newKey.trim())) {
-      console.log('new key', newKey.trim())
       setToastHandle(Toast.notify({
         type: 'error',
         message: t('appDebug.varKeyError.keyAlreadyExists', { key: newKey }),

web/app/components/workflow/nodes/start/components/var-list.tsx

@@ -5,7 +5,6 @@ import produce from 'immer'
 import { useTranslation } from 'react-i18next'
 import VarItem from './var-item'
 import { ChangeType, type InputVar, type MoreInfo } from '@/app/components/workflow/types'
-import { v4 as uuid4 } from 'uuid'
 import { ReactSortable } from 'react-sortablejs'
 import { RiDraggable } from '@remixicon/react'
 import cn from '@/utils/classnames'
@@ -71,9 +70,8 @@ const VarList: FC<Props> = ({
   }, [list, onChange])
 
   const listWithIds = useMemo(() => list.map((item) => {
-    const id = uuid4()
     return {
-      id,
+      id: item.variable,
       variable: { ...item },
     }
   }), [list])
@@ -88,6 +86,8 @@ const VarList: FC<Props> = ({
     )
   }
 
+  const canDrag = !readonly && varCount > 1
+
   return (
     <ReactSortable
       className='space-y-1'
@@ -97,30 +97,23 @@ const VarList: FC<Props> = ({
       ghostClass='opacity-50'
       animation={150}
     >
-      {list.map((item, index) => {
-        const canDrag = (() => {
-          if (readonly)
-            return false
-          return varCount > 1
-        })()
-        return (
-          <div key={index} className='group relative'>
-            <VarItem
-              className={cn(canDrag && 'handle')}
-              readonly={readonly}
-              payload={item}
-              onChange={handleVarChange(index)}
-              onRemove={handleVarRemove(index)}
-              varKeys={list.map(item => item.variable)}
-              canDrag={canDrag}
-            />
-            {canDrag && <RiDraggable className={cn(
-              'handle absolute left-3 top-2.5 hidden h-3 w-3 cursor-pointer text-text-tertiary',
-              'group-hover:block',
-            )} />}
-          </div>
-        )
-      })}
+      {listWithIds.map((itemWithId, index) => (
+        <div key={itemWithId.id} className='group relative'>
+          <VarItem
+            className={cn(canDrag && 'handle')}
+            readonly={readonly}
+            payload={itemWithId.variable}
+            onChange={handleVarChange(index)}
+            onRemove={handleVarRemove(index)}
+            varKeys={list.map(item => item.variable)}
+            canDrag={canDrag}
+          />
+          {canDrag && <RiDraggable className={cn(
+            'handle absolute left-3 top-2.5 hidden h-3 w-3 cursor-pointer text-text-tertiary',
+            'group-hover:block',
+          )} />}
+        </div>
+      ))}
     </ReactSortable>
   )
 }

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -39,7 +39,7 @@ const DebugAndPreview = () => {
   const startNode = useFindNode(['sys']) as Node<StartNodeType>
   const selectedNode = useReactFlowStore(s => s.getNodes().find(node => node.data.selected))
   const variables = startNode?.data.variables || []
-  const visibleVariables = variables.filter(v => v.hide !== true)
+  const visibleVariables = variables
 
   const [showConversationVariableModal, setShowConversationVariableModal] = useState(false)
 

web/app/components/workflow/panel/debug-and-preview/user-input.tsx

@@ -15,8 +15,9 @@ const UserInput = () => {
   const workflowStore = useWorkflowStore()
   const inputs = useStore(s => s.inputs)
   const startNode = useFindNode(['sys']) as Node<StartNodeType>
+  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
   const variables = startNode?.data.variables || []
-  const visibleVariables = variables.filter(v => v.hide !== true)
+  const visibleVariables = showDebugAndPreviewPanel ? variables : variables.filter(v => v.hide !== true)
 
   const handleValueChange = (variable: string, v: string) => {
     const {