mirror of https://github.com/langgenius/dify.git
feat(humanInput): improve form handling with site info integration and error management
This commit is contained in:
parent
441104ac3c
commit
1b0abdf642
|
|
@ -1,6 +1,7 @@
|
|||
'use client'
|
||||
import type { ButtonProps } from '@/app/components/base/button'
|
||||
import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
|
||||
import type { SiteInfo } from '@/models/share'
|
||||
import type { HumanInputFormError } from '@/service/use-share'
|
||||
import {
|
||||
RiCheckboxCircleFill,
|
||||
|
|
@ -24,7 +25,7 @@ import { useGetHumanInputForm, useSubmitHumanInputForm } from '@/service/use-sha
|
|||
import { cn } from '@/utils/classnames'
|
||||
|
||||
export type FormData = {
|
||||
site: any
|
||||
site: { site: SiteInfo }
|
||||
form_content: string
|
||||
inputs: FormInputItem[]
|
||||
resolved_default_values: Record<string, string>
|
||||
|
|
@ -40,16 +41,14 @@ const FormContent = () => {
|
|||
|
||||
const [inputs, setInputs] = useState<Record<string, string>>({})
|
||||
const [success, setSuccess] = useState(false)
|
||||
const [expired, setExpired] = useState(false)
|
||||
|
||||
const { mutate: submitForm, isPending: isSubmitting } = useSubmitHumanInputForm()
|
||||
|
||||
const { data: formData, isLoading, error } = useGetHumanInputForm(token)
|
||||
|
||||
const expired = (error as HumanInputFormError | null)?.code === 'human_input_form_expired'
|
||||
const submitted = (error as HumanInputFormError | null)?.code === 'human_input_form_submitted'
|
||||
|
||||
const site = formData?.site.site
|
||||
|
||||
const splitByOutputVar = (content: string): string[] => {
|
||||
const outputVarRegex = /(\{\{#\$output\.[^#]+#\}\})/g
|
||||
const parts = content.split(outputVarRegex)
|
||||
|
|
@ -87,6 +86,14 @@ const FormContent = () => {
|
|||
onSuccess: () => {
|
||||
setSuccess(true)
|
||||
},
|
||||
onError: async (error) => {
|
||||
if (error instanceof Response && error.status && error.json) {
|
||||
const errorData = await error.json() as { code: string, message: string }
|
||||
if (errorData.code === 'human_input_form_expired') {
|
||||
setExpired(true)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
@ -207,12 +214,14 @@ const FormContent = () => {
|
|||
)
|
||||
}
|
||||
|
||||
const site = formData.site.site
|
||||
|
||||
return (
|
||||
<div className={cn('mx-auto flex h-full w-full max-w-[720px] flex-col items-center')}>
|
||||
<div className="mt-4 flex w-full shrink-0 items-center gap-3 py-3">
|
||||
<AppIcon
|
||||
size="large"
|
||||
iconType={site.icon_type as any}
|
||||
iconType={site.icon_type}
|
||||
icon={site.icon}
|
||||
background={site.icon_background}
|
||||
imageUrl={site.icon_url}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const ExpirationTime = ({
|
|||
<div
|
||||
className={cn(
|
||||
'system-xs-regular mt-1 flex items-center gap-x-1 text-text-tertiary',
|
||||
isSameOrAfter && 'text-text-warning',
|
||||
!isSameOrAfter && 'text-text-warning',
|
||||
)}
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -102,9 +102,6 @@
|
|||
"app/(humanInputLayout)/form/[token]/form.tsx": {
|
||||
"react-hooks-extra/no-direct-set-state-in-use-effect": {
|
||||
"count": 1
|
||||
},
|
||||
"ts/no-explicit-any": {
|
||||
"count": 2
|
||||
}
|
||||
},
|
||||
"app/(shareLayout)/components/splash.tsx": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue