AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-13 10:09:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat/14573 support more types in form (#15093)

Browse Source
This commit is contained in:
crazywoola 2025-03-06 17:38:50 +08:00 committed by GitHub
parent 5be8fbab56
commit 8369e59b4d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 107 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/base/date-and-time-picker/date-picker/index.tsx
View File

@ -234,7 +234,7 @@ const DatePicker = ({
</div>
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<PortalToFollowElemContent className='z-50'>
<div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
{/* Header */}
{view === ViewType.date ? (

2
web/app/components/base/date-and-time-picker/time-picker/index.tsx
View File

@ -142,7 +142,7 @@ const TimePicker = ({
</div>
)}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent>
<PortalToFollowElemContent className='z-50'>
<div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
{/* Header */}
<Header />

110
web/app/components/base/markdown-blocks/form.tsx
View File

@ -2,6 +2,10 @@ import React, { useEffect, useState } from 'react'
import Button from '@/app/components/base/button'
import Input from '@/app/components/base/input'
import Textarea from '@/app/components/base/textarea'
import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
import Checkbox from '@/app/components/base/checkbox'
import Select from '@/app/components/base/select'
import { useChatContext } from '@/app/components/base/chat/chat/context'
enum DATA_FORMAT {
@ -19,18 +23,13 @@ enum SUPPORTED_TYPES {
PASSWORD = 'password',
EMAIL = 'email',
NUMBER = 'number',
DATE = 'date',
TIME = 'time',
DATETIME = 'datetime',
CHECKBOX = 'checkbox',
SELECT = 'select',
}
const MarkdownForm = ({ node }: any) => {
// const supportedTypes = ['text', 'password', 'email', 'number']
// <form data-format="text">
// <label for="username">Username:</label>
// <input type="text" name="username" />
// <label for="password">Password:</label>
// <input type="password" name="password" />
// <label for="content">Content:</label>
// <textarea name="content"></textarea>
// <button data-size="small" data-variant="primary">Login</button>
// </form>
const { onSend } = useChatContext()
const [formValues, setFormValues] = useState<{ [key: string]: any }>({})
@ -90,6 +89,97 @@ const MarkdownForm = ({ node }: any) => {
)
}
if (child.tagName === SUPPORTED_TAGS.INPUT && Object.values(SUPPORTED_TYPES).includes(child.properties.type)) {
if (child.properties.type === SUPPORTED_TYPES.DATE || child.properties.type === SUPPORTED_TYPES.DATETIME) {
return (
<DatePicker
key={index}
value={formValues[child.properties.name]}
needTimePicker={child.properties.type === SUPPORTED_TYPES.DATETIME}
onChange={(date) => {
setFormValues(prevValues => ({
...prevValues,
[child.properties.name]: date,
}))
}}
onClear={() => {
setFormValues(prevValues => ({
...prevValues,
[child.properties.name]: undefined,
}))
}}
/>
)
}
if (child.properties.type === SUPPORTED_TYPES.TIME) {
return (
<TimePicker
key={index}
value={formValues[child.properties.name]}
onChange={(time) => {
setFormValues(prevValues => ({
...prevValues,
[child.properties.name]: time,
}))
}}
onClear={() => {
setFormValues(prevValues => ({
...prevValues,
[child.properties.name]: undefined,
}))
}}
/>
)
}
if (child.properties.type === SUPPORTED_TYPES.CHECKBOX) {
return (
<div className='mt-2 flex items-center h-6 space-x-2' key={index}>
<Checkbox
key={index}
checked={formValues[child.properties.name]}
onCheck={() => {
setFormValues(prevValues => ({
...prevValues,
[child.properties.name]: !prevValues[child.properties.name],
}))
}}
/>
<span>{child.properties.dataTip || child.properties['data-tip'] || ''}</span>
</div>
)
}
if (child.properties.type === SUPPORTED_TYPES.SELECT) {
return (
<Select
key={index}
allowSearch={false}
className="w-full"
items={(() => {
let options = child.properties.dataOptions || child.properties['data-options'] || []
if (typeof options === 'string') {
try {
options = JSON.parse(options)
}
catch (e) {
console.error('Failed to parse options:', e)
options = []
}
}
return options.map((option: string) => ({
name: option,
value: option,
}))
})()}
defaultValue={formValues[child.properties.name]}
onSelect={(item) => {
setFormValues(prevValues => ({
...prevValues,
[child.properties.name]: item.value,
}))
}}
/>
)
}
return (
<Input
key={index}

7
web/app/styles/markdown.scss
View File

@ -425,7 +425,10 @@
.markdown-body ol {
padding-left: 2em;
}
.markdown-body ul[role="listbox"] {
list-style: none !important;
padding-left: 0 !important;
}
.markdown-body blockquote> :first-child {
margin-top: 0;
}
@ -1035,4 +1038,4 @@
.markdown-body .react-syntax-highlighter-line-number {
color: var(--color-text-quaternary);
}
}