## Description
Rate Limiting toasts.
Mic enable toast.
Improved Error messages toasts for debugability reasons.
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
The AI request helper now takes a `Promise<Response>` coming from
calling fetch() outside of the helper eg. `handleAiRequest(fetch(...))`
In this PR I also fixed the casing of GPT* types
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.
This PR introduces the baseline `@webstudio-is/ai` package which
includes:
1. A LLM Abstraction (types) for messages format to make requests to a
model
2. An implementation of the above that uses the OpenAI chat completion
endpoint
3. A common interface for chains. Chains are regular async functions
that can execute an arbitrary number of steps, including calling a LLM
via a model client.
The idea is that a builder API route can use any of these chains to
perform a task that requires AI. For example generate text copy, images,
a theme etc.
Bogdan Chadkin