refactor: update form submission parameter from formID to formToken across chat components

web/app/components/base/chat/chat-with-history/chat-wrapper.tsx

@@ -163,11 +163,11 @@ const ChatWrapper = () => {
     return chatList.filter(item => !item.isOpeningStatement)
   }, [chatList, currentConversationId])
 
-  const handleSubmitHumanInputForm = useCallback(async (formID: string, formData: any) => {
+  const handleSubmitHumanInputForm = useCallback(async (formToken: string, formData: any) => {
     if (isInstalledApp)
-      await submitHumanInputFormService(formID, formData)
+      await submitHumanInputFormService(formToken, formData)
     else
-      await submitHumanInputForm(formID, formData)
+      await submitHumanInputForm(formToken, formData)
   }, [isInstalledApp])
 
   const [collapsed, setCollapsed] = useState(!!currentConversationId)

web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx

@@ -10,7 +10,7 @@ const HumanInputForm = ({
   formData,
   onSubmit,
 }: HumanInputFormProps) => {
-  const formID = formData.form_id
+  const formToken = formData.form_token
   const defaultInputs = initializeInputs(formData.inputs)
   const contentList = splitByOutputVar(formData.form_content)
   const [inputs, setInputs] = useState(defaultInputs)
@@ -23,9 +23,9 @@ const HumanInputForm = ({
     }))
   }, [])
 
-  const submit = async (formID: string, actionID: string, inputs: Record<string, any>) => {
+  const submit = async (formToken: string, actionID: string, inputs: Record<string, any>) => {
     setIsSubmitting(true)
-    await onSubmit?.(formID, { inputs, action: actionID })
+    await onSubmit?.(formToken, { inputs, action: actionID })
     setIsSubmitting(false)
   }
 
@@ -47,7 +47,7 @@ const HumanInputForm = ({
             key={action.id}
             disabled={isSubmitting}
             variant={getButtonStyle(action.button_style) as any}
-            onClick={() => submit(formID, action.id, inputs)}
+            onClick={() => submit(formToken, action.id, inputs)}
           >
             {action.title}
           </Button>

web/app/components/base/chat/chat/answer/human-input-content/type.ts

@@ -13,7 +13,7 @@ export type UnsubmittedHumanInputContentProps = {
   showDebugModeTip?: boolean
   showTimeout?: boolean
   expirationTime?: number
-  onSubmit?: (formID: string, data: any) => Promise<void>
+  onSubmit?: (formToken: string, data: any) => Promise<void>
 }
 
 export type SubmittedHumanInputContentProps = {
@@ -22,7 +22,7 @@ export type SubmittedHumanInputContentProps = {
 
 export type HumanInputFormProps = {
   formData: HumanInputFormData
-  onSubmit?: (formID: string, data: any) => Promise<void>
+  onSubmit?: (formToken: string, data: any) => Promise<void>
 }
 
 export type ContentItemProps = {

web/app/components/base/chat/chat/answer/human-input-filled-form-list.tsx

@@ -15,7 +15,7 @@ const HumanInputFilledFormList = ({
         humanInputFilledFormDataList.map(formData => (
           <ContentWrapper
             key={formData.node_id}
-            nodeTitle="todo: replace with node title"
+            nodeTitle={formData.node_title}
             showExpandIcon
           >
             <SubmittedHumanInputContent

web/app/components/base/chat/chat/answer/human-input-form-list.tsx

@@ -7,7 +7,7 @@ import { UnsubmittedHumanInputContent } from './human-input-content/unsubmitted'
 
 type HumanInputFormListProps = {
   humanInputFormDataList: HumanInputFormData[]
-  onHumanInputFormSubmit?: (formID: string, formData: any) => Promise<void>
+  onHumanInputFormSubmit?: (formToken: string, formData: any) => Promise<void>
   getHumanInputNodeData?: (nodeID: string) => any
 }
 

web/app/components/base/chat/chat/answer/index.tsx

@@ -40,7 +40,7 @@ type AnswerProps = {
   noChatInput?: boolean
   switchSibling?: (siblingMessageId: string) => void
   hideAvatar?: boolean
-  onHumanInputFormSubmit?: (formID: string, formData: any) => Promise<void>
+  onHumanInputFormSubmit?: (formToken: string, formData: any) => Promise<void>
 }
 const Answer: FC<AnswerProps> = ({
   item,

web/app/components/base/chat/chat/index.tsx

@@ -73,7 +73,7 @@ export type ChatProps = {
   inputDisabled?: boolean
   sidebarCollapseState?: boolean
   hideAvatar?: boolean
-  onHumanInputFormSubmit?: (formID: string, formData: any) => Promise<void>
+  onHumanInputFormSubmit?: (formToken: string, formData: any) => Promise<void>
   getHumanInputNodeData?: (nodeID: string) => any
 }
 

web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx

@@ -176,11 +176,11 @@ const ChatWrapper = () => {
     }
   }, [inputsForms.length, isMobile, currentConversationId, collapsed, allInputsHidden])
 
-  const handleSubmitHumanInputForm = useCallback(async (formID: string, formData: any) => {
+  const handleSubmitHumanInputForm = useCallback(async (formToken: string, formData: any) => {
     if (isInstalledApp)
-      await submitHumanInputFormService(formID, formData)
+      await submitHumanInputFormService(formToken, formData)
     else
-      await submitHumanInputForm(formID, formData)
+      await submitHumanInputForm(formToken, formData)
   }, [isInstalledApp])
 
   const welcome = useMemo(() => {

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

@@ -123,9 +123,9 @@ const ChatWrapper = (
     doSend(editedQuestion ? editedQuestion.message : question.content, editedQuestion ? editedQuestion.files : question.message_files, true, isValidGeneratedAnswer(parentAnswer) ? parentAnswer : null)
   }, [chatList, doSend])
 
-  const doHumanInputFormSubmit = useCallback(async (formID: string, formData: any) => {
+  const doHumanInputFormSubmit = useCallback(async (formToken: string, formData: any) => {
     // Handle human input form submission
-    await handleSubmitHumanInputForm(formID, formData)
+    await handleSubmitHumanInputForm(formToken, formData)
   }, [handleSubmitHumanInputForm])
 
   const inputDisabled = useMemo(() => {

web/app/components/workflow/panel/debug-and-preview/hooks.ts

@@ -583,8 +583,8 @@ export const useChat = (
     )
   }, [threadMessages, chatTree.length, updateCurrentQAOnTree, handleResponding, formSettings?.inputsForm, handleRun, notify, t, workflowStore, fetchInspectVars, invalidAllLastRun, config?.suggested_questions_after_answer?.enabled])
 
-  const handleSubmitHumanInputForm = async (formID: string, formData: any) => {
+  const handleSubmitHumanInputForm = async (formToken: string, formData: any) => {
-    await submitHumanInputForm(formID, formData)
+    await submitHumanInputForm(formToken, formData)
   }
 
   const getHumanInputNodeData = (nodeID: string) => {

web/app/components/workflow/panel/human-input-filled-form-list.tsx

@@ -1,9 +1,6 @@
 import type { HumanInputFilledFormData } from '@/types/workflow'
-import { useCallback } from 'react'
-import { useStoreApi } from 'reactflow'
 import ContentWrapper from '@/app/components/base/chat/chat/answer/human-input-content/content-wrapper'
 import { SubmittedHumanInputContent } from '@/app/components/base/chat/chat/answer/human-input-content/submitted'
-import { CUSTOM_NODE } from '@/app/components/workflow/constants'
 
 type HumanInputFilledFormListProps = {
   humanInputFilledFormDataList: HumanInputFilledFormData[]
@@ -12,24 +9,13 @@ type HumanInputFilledFormListProps = {
 const HumanInputFilledFormList = ({
   humanInputFilledFormDataList,
 }: HumanInputFilledFormListProps) => {
-  const store = useStoreApi()
-
-  const getHumanInputNodeTitle = useCallback((nodeID: string) => {
-    const {
-      getNodes,
-    } = store.getState()
-    const nodes = getNodes().filter(node => node.type === CUSTOM_NODE)
-    const node = nodes.find(n => n.id === nodeID)
-    return node?.data.title
-  }, [store])
-
   return (
     <div className="mt-3 flex flex-col gap-y-3 first:mt-0">
       {
         humanInputFilledFormDataList.map(formData => (
           <ContentWrapper
             key={formData.node_id}
-            nodeTitle={getHumanInputNodeTitle(formData.node_id)}
+            nodeTitle={formData.node_title}
             showExpandIcon
             className="bg-components-panel-bg"
             expanded

web/app/components/workflow/panel/human-input-form-list.tsx

@@ -9,7 +9,7 @@ import { DeliveryMethodType } from '@/app/components/workflow/nodes/human-input/
 
 type HumanInputFormListProps = {
   humanInputFormDataList: HumanInputFormData[]
-  onHumanInputFormSubmit?: (formID: string, formData: any) => Promise<void>
+  onHumanInputFormSubmit?: (formToken: string, formData: any) => Promise<void>
 }
 
 const HumanInputFormList = ({

web/app/components/workflow/panel/workflow-preview.tsx

@@ -99,8 +99,8 @@ const WorkflowPreview = () => {
     }
   }, [resize, stopResizing])
 
-  const handleSubmitHumanInputForm = useCallback(async (formID: string, formData: any) => {
+  const handleSubmitHumanInputForm = useCallback(async (formToken: string, formData: any) => {
-    await submitHumanInputForm(formID, formData)
+    await submitHumanInputForm(formToken, formData)
   }, [])
 
   return (

web/types/workflow.ts

@@ -320,7 +320,7 @@ export type HumanInputFormData = {
   form_content: string
   inputs: FormInputItem[]
   actions: UserAction[]
-  web_app_form_token: string // For WebApp
+  form_token: string
   resolved_placeholder_values: Record<string, string> // For human input placeholder when its type is variable
 }
 
@@ -333,6 +333,7 @@ export type HumanInputRequiredResponse = {
 
 export type HumanInputFilledFormData = {
   node_id: string
+  node_title: string
   rendered_content: string
   action_id: string
   action_text: string