Feat/support form in conversation

[crazywoola]

Checklist:

Important

Please review the checklist below before submitting your pull request.

• Please open an issue before creating a PR or link to an existing issue
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

Description

// This defines the response structure of the submit action
enum DATA_FORMAT {
  TEXT = 'text',
  JSON = 'json',
}

// This defines supported tags in a form item for now :)
enum SUPPORTED_TAGS {
  LABEL = 'label',
  INPUT = 'input',
  TEXTAREA = 'textarea',
  BUTTON = 'button',
}

// This defines supported types of a input element
enum SUPPORTED_TYPES {
  TEXT = 'text',
  PASSWORD = 'password',
  EMAIL = 'email',
  NUMBER = 'number',
}

<form data-format="json"> // Default to text
  <label for="username">Username:</label>
  <input type="text" name="username" />
  <label for="password">Password:</label>
  <input type="password" name="password" />
  <div>This tag is not supported</div>
  <input type="random" name="password" /> // This is not supported as well
  <label for="content">Content:</label>
  <textarea name="content"></textarea>
  <button data-size="small" data-variant="primary">Login</button>
</form>

Response type: Text	Response type: Json

Example DSL: Form in conversation.yml.zip

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update, included: Dify Document
• Improvement, including but not limited to code refactoring, performance optimization, and UI/UX improvement
• Dependency upgrade

Testing Instructions

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Test A
• Test B

[obadakhalili]

@crazywoola @zxhlyh is their docs that explain how to use this?

[crazywoola]

@crazywoola @zxhlyh is their docs that explain how to use this?

I will add it later. You can explore it with the provided DSL.

[obadakhalili]

yeah, it turned out that the issue I encountered that made me need the docs was due to using the wrong version (0.10.2). I used the code from the main branch and it worked.

[svcvit]

Add an example to help everyone understand how to use this feature.
FormDemo.zip