timeout new data structure

web/app/components/workflow/nodes/human-input/components/timeout.tsx

@@ -1,19 +1,20 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import type { Timeout } from '../types'
 import Input from '@/app/components/base/input'
 import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.humanInput'
 
 type Props = {
-  timeout: Timeout
-  onChange: (state: Timeout) => void
+  timeout: number
+  unit: 'day' | 'hour'
+  onChange: (state: { timeout: number; unit: 'day' | 'hour' }) => void
 }
 
 const TimeoutInput: FC<Props> = ({
   timeout,
+  unit,
   onChange,
 }) => {
   const { t } = useTranslation()
@@ -22,26 +23,26 @@ const TimeoutInput: FC<Props> = ({
       <Input
         wrapperClassName='w-16'
         type='number'
-        value={timeout.value}
+        value={timeout}
         min={1}
-        onChange={e => onChange({ ...timeout, value: Number(e.target.value) })}
+        onChange={e => onChange({ timeout: Number(e.target.value), unit })}
       />
       <div className='flex items-center gap-0.5 rounded-[10px] bg-components-segmented-control-bg-normal p-0.5'>
         <div
           className={cn(
             'cursor-pointer rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-            timeout.unit === 'days' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
+            unit === 'day' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
           )}
-          onClick={() => onChange({ ...timeout, unit: 'days' })}
+          onClick={() => onChange({ timeout, unit: 'day' })}
         >
           <div className='system-sm-medium p-0.5'>{t(`${i18nPrefix}.timeout.days`)}</div>
         </div>
         <div
           className={cn(
             'cursor-pointer rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-            timeout.unit === 'hours' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
+            unit === 'hour' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
           )}
-          onClick={() => onChange({ ...timeout, unit: 'hours' })}
+          onClick={() => onChange({ timeout, unit: 'hour' })}
         >
           <div className='system-sm-medium p-0.5'>{t(`${i18nPrefix}.timeout.hours`)}</div>
         </div>

web/app/components/workflow/nodes/human-input/default.ts

@@ -37,10 +37,8 @@ const nodeDefault: NodeDefault<HumanInputNodeType> = {
         button_style: UserActionButtonType.Ghost,
       },
     ],
-    timeout: {
-      value: 3,
-      unit: 'days',
-    },
+    timeout: 3,
+    timeout_unit: 'day',
   },
   getAvailablePrevNodes(isChatMode: boolean) {
     const nodes = isChatMode

web/app/components/workflow/nodes/human-input/panel.tsx

@@ -100,6 +100,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
         <div className='system-sm-semibold-uppercase text-text-secondary'>{t(`${i18nPrefix}.timeout.title`)}</div>
         <TimeoutInput
           timeout={inputs.timeout}
+          unit={inputs.timeout_unit}
           onChange={handleTimeoutChange}
         />
       </div>

web/app/components/workflow/nodes/human-input/types.ts

@@ -4,15 +4,11 @@ export type HumanInputNodeType = CommonNodeType & {
   delivery_methods: DeliveryMethod[]
   form_content: any
   user_actions: UserAction[]
-  timeout: Timeout
+  timeout: number
+  timeout_unit: 'hour' | 'day'
   outputs: Variable[]
 }
 
-export type Timeout = {
-  value: number
-  unit: 'hours' | 'days'
-}
-
 export enum DeliveryMethodType {
   WebApp = 'webapp',
   Email = 'email',

web/app/components/workflow/nodes/human-input/use-config.ts

@@ -1,5 +1,5 @@
 import produce from 'immer'
-import type { DeliveryMethod, HumanInputNodeType, Timeout, UserAction } from './types'
+import type { DeliveryMethod, HumanInputNodeType, UserAction } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import {
   useNodesReadOnly,
@@ -8,9 +8,6 @@ const useConfig = (id: string, payload: HumanInputNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { inputs, setInputs } = useNodeCrud<HumanInputNodeType>(id, payload)
 
-  // 1 check email address valid
-  // 2 use immer to handle delivery method configuration
-
   const handleDeliveryMethodChange = (methods: DeliveryMethod[]) => {
     setInputs({
       ...inputs,
@@ -45,10 +42,11 @@ const useConfig = (id: string, payload: HumanInputNodeType) => {
     })
   }
 
-  const handleTimeoutChange = (timeout: Timeout) => {
+  const handleTimeoutChange = ({ timeout, unit }: { timeout: number; unit: 'hour' | 'day' }) => {
     setInputs({
       ...inputs,
       timeout,
+      timeout_unit: unit,
     })
   }