Fixes:
- Disable Radix components via feat flag
- classNames should be optional when generating templates
- Prevent unwrapped JSX to fail
- Use shared computeSelectorForInstanceId when inserting templates and deleting instances
- Add extra instruction for GPT to fill required values just in case
Removes markdown code block delimiters from JSX the parser utility and
adds a new utility to extract code blocks from LLM responses.
There was a bug in the previous implementation where we were parsing the JSX stripped out of code blocks
delimiters but when extracting the props from the source string we were slicing the original string with delimiters.
- esbuild
- jest
- eslint
- eslint-typescript
Also removed "jest" binary from packages and use the one installed in
the root
and deduplicated all deps (got a little messy recently).
Implements an operation-based system to accomplish a number of edit
tasks on a JSX+CSS representation of a selected Webstudio tree.
Every JSX element has the instance id as data-ws-id and therefore the
LLM knows what to edit.
The idea is to create a number of operations (aiOperations)
specs/schemas with Zod describing unique edit tasks, make a
discriminated union, convert them to JSON Schema. We then inject this
information and the current JSX+CSS in the LLM prompt asking the model
to generate an array of operations.
The LLM responds with an array of operations (aiOperations) to fulfill
the user request. We then process these doing the necessary
transformations to convert these to a Webstudio-friendly format
(wsOperations) and send them to the client where we apply them (see
applyOperations).
Some of these operations are going to be "intermediate" operations for
now.
Generating quality user interfaces might be challenging with LLMs.
Having to do so within a generic operations framework like the one
described above makes it even more challenging.
For this reason when it comes to generating user interfaces, the
Operation chain instead offers an operation called
generateTemplatePrompt that provides information about insertion point
in the existing UI and a prompt, possibly enhanced.
Another chain can use these information and a more sophisticated prompt
and model to then generate the user interface and return a
generateInsertTemplate wsOperation. Webstudio does exactly this in a
rest endpoint, using the template-generator chain with gpt4 instead of
gpt-3.5-turbo.
Adds utils to work with JSX and transform it to Webstudio Embed Template
as well as converting Tailwind styles to Webstudio Embed Template style
declarations and a fake `<HeroIcon>` component to `HtmlEmbed` with
inline SVG taken from heroicons (we will need this for ai).
Giuseppe