CopilotForm prototype

[mme]

This is a prototype how a CopilotForm component could look like. It's implemented with actions and readables under the hood.

<CopilotForm
  name="recipe"
  description="Form to fill for a recipe"
  className="flex flex-col"
>
  <CopilotInput name="dish" placeholder="dish" />
  <CopilotInput name="ingredients" placeholder="ingredients" />
</CopilotForm>

A real-world form should:

• have different types for different types of inputs (enums, bool, number etc)
  • now supports radio, checkbox, all text inputs
  • needs select, radio group
• support external components (shadcn, radix ui, etc.)
• be filled out while streaming?
• be able to submit by itself?
• have a handler that is called when the form gets submitted
• play well with other libraries (react hook form, zod etc)
• let the user manage the form values themselves?
• support repeating elements
• Optional works different from useCopilotAction
  • when required is false, it can be left out, even if the current value is empty
  • when required is true, it cannot be left out, unless the current value is empty
  • default is required

Slightly crazy ideas:

• have "magic" button to autocomplete selected fields
• have "magic" button to autocomplete the whole form
• complete the whole form like CopilotTextarea (get suggestions and hit Tab key)
• Form Verification: Let GPT verify the contents of a form and provide suggestions to improve it