Руководство пользователя

Редактор виджетов

Вкладки Code, Functions и States, панель Schema/Default, представления JSX и JSON-дерева, сцена предпросмотра.

🛠 Редактор виджетов

Редактор разделён на две части: слева код, справа живой предпросмотр. В шапке — имя виджета и кнопки Экспорт и Сохранить.

Устройство редактора — В шапке имя виджета, «Экспорт» и «Сохранить»; слева Code / Functions / States, справа сцена предпросмотра.

🗂 Три вкладки

Code — разметка виджета и контракт данных.
Functions — обработчики действий пользователя.
States — правила условной видимости.

💻 Вкладка Code

В правом верхнем углу редактора — переключатель двух представлений:

JSX — основной способ записи. Компоненты и свойства автодополняются, опечатка в свойстве подчёркивается.
JSON tree — то, что хранится. JSX печатается из этого дерева, поэтому представления не расходятся.

JSX разбирается примерно через 300 мс после последнего нажатия. При ошибке внизу выводится Line 7: …, а предпросмотр остаётся в последнем корректном состоянии.

📐 Нижняя панель: схема и данные

Под редактором кода находится панель данных: Schema · Default · Example 1 · +.

Schema — ожидаемая структура данных в формате JSON Schema. Переключатель справа показывает её также как Zod и d.ts (только чтение).
Default — пример данных для предпросмотра.
+ — сохраняет текущие данные как именованный пример; ✕ на вкладке примера удаляет его.
Infer from data строит схему по данным. Fill from schema создаёт пустые данные по схеме.

Если данные не соответствуют схеме (нет обязательного поля, неверный тип), внизу появляется предупреждение.

Панель схемы и данных — Под редактором кода: вкладки Schema · Default · +, справа JSON Schema / Zod / d.ts и «Infer from data».

✨ Автодополнение

При вводе {{ предлагаются все пути из схемы с типами: orders object[], orders.length, orders[0].status. В JSX это обычное выражение: value={order.total}.

👀 Сцена предпросмотра

Сцена справа показывает виджет так, как его увидит посетитель. Переключатель внизу даёт три режима:

Виджет — только сам виджет.
Чат — окно чата шириной 380px: шапка, два сообщения, виджет и поле ввода.
Страница агента — тот же диалог во всю ширину.

Кнопка солнце/луна справа вверху переключает в тёмную тему только сцену — чтобы проверить виджет в обеих темах.

Сцена предпросмотра — Режим «Чат» — виджет так, как его видит посетитель; кнопка сверху переключает сцену в тёмную тему.

💾 Сохранение, экспорт, импорт

Сохранить создаёт виджет или обновляет существующий. Кнопка выключена, пока в какой-либо панели некорректный JSON.
Экспорт скачивает файл .widget.
Импорт на странице «Виджеты» открывает такой файл как новый виджет.

🌐 О языке интерфейса

Названия Code, Schema, Default намеренно оставлены на английском — это термины разработчика, и в коде виджета они выглядят так же.