dify/web/app/(humanInputLayout)/form/[token]/form.tsx

'use client'
import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
import type { CustomConfigValueType, SiteInfo } from '@/models/share'
import type { HumanInputFormError } from '@/service/use-share'
import type { HumanInputResolvedValue } from '@/types/workflow'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import useDocumentTitle from '@/hooks/use-document-title'
import { useParams } from '@/next/navigation'
import { useGetHumanInputForm } from '@/service/use-share'
import FormStatusCard from './form-status-card'
import LoadedFormContent from './loaded-form-content'
import { useFormSubmit } from './use-form-submit'

export type FormData = {
  site: {
    site: SiteInfo
    custom_config?: Record<string, CustomConfigValueType> | null
  }
  form_content: string
  inputs: FormInputItem[]
  resolved_default_values: Record<string, HumanInputResolvedValue>
  user_actions: UserAction[]
  expiration_time: number
}

const FormContent = () => {
  const { t } = useTranslation()

  const { token } = useParams<{ token: string }>()
  useDocumentTitle('')

  const { data: formData, isLoading, error } = useGetHumanInputForm(token)
  const { isSubmitting, submit, success } = useFormSubmit(token)

  const removeWebappBrand = formData?.site?.custom_config?.remove_webapp_brand === true
  const replaceWebappLogo =
    typeof formData?.site?.custom_config?.replace_webapp_logo === 'string'
      ? formData.site.custom_config.replace_webapp_logo
      : null

  const expired = (error as HumanInputFormError | null)?.code === 'human_input_form_expired'
  const submitted = (error as HumanInputFormError | null)?.code === 'human_input_form_submitted'
  const rateLimitExceeded =
    (error as HumanInputFormError | null)?.code === 'web_form_rate_limit_exceeded'

  if (isLoading) {
    return <Loading type="app" />
  }

  if (success) {
    return (
      <FormStatusCard
        iconClassName="i-ri-checkbox-circle-fill text-text-success"
        title={t(($) => $['humanInput.thanks'], { ns: 'share' })}
        subtitle={t(($) => $['humanInput.recorded'], { ns: 'share' })}
        submissionID={token}
        removeWebappBrand={removeWebappBrand}
        replaceWebappLogo={replaceWebappLogo}
      />
    )
  }

  if (expired) {
    return (
      <FormStatusCard
        iconClassName="i-ri-information-2-fill text-text-accent"
        title={t(($) => $['humanInput.sorry'], { ns: 'share' })}
        subtitle={t(($) => $['humanInput.expired'], { ns: 'share' })}
        submissionID={token}
      />
    )
  }

  if (submitted) {
    return (
      <FormStatusCard
        iconClassName="i-ri-information-2-fill text-text-accent"
        title={t(($) => $['humanInput.sorry'], { ns: 'share' })}
        subtitle={t(($) => $['humanInput.completed'], { ns: 'share' })}
        submissionID={token}
      />
    )
  }

  if (rateLimitExceeded) {
    return (
      <FormStatusCard
        iconClassName="i-ri-error-warning-fill text-text-destructive"
        title={t(($) => $['humanInput.rateLimitExceeded'], { ns: 'share' })}
      />
    )
  }

  if (!formData) {
    return (
      <FormStatusCard
        iconClassName="i-ri-error-warning-fill text-text-destructive"
        title={t(($) => $['humanInput.formNotFound'], { ns: 'share' })}
      />
    )
  }

  return (
    <LoadedFormContent
      key={token}
      formData={formData}
      isSubmitting={isSubmitting}
      onSubmit={submit}
      removeWebappBrand={removeWebappBrand}
      replaceWebappLogo={replaceWebappLogo}
    />
  )
}

export default React.memo(FormContent)