Войти
Ассистенты

Фрейм assistant: страница с чатом ассистента

Markdown
Открыть в ИИ

Фрейм assistant

assistant — фрейм страницы для посадочных страниц ассистента: сверху во всю ширину экрана чат Framesuite, под ним статья, блок вопросов и подвал сайта. Фрейм один на все такие страницы, а чат и агент у каждой свои — их задаёт frontmatter страницы. Живой пример — bota.chat/base/canva/.

Где стоитфрейм страницы: frame: "assistant" во frontmatter
Что читаетpage.data.assistant, page.data.agent, page.data.agent_view, page.title, тело страницы
Что вкладываетarticlefaq, sitefooter
Собираетсяна каждом запросе (зависит от страницы)

Разметка

Ключевой кусок — секция чата над телом:

<div class="opland opdoc__layout opdoc__layout--article ...">

  <section class="opland__assistant"><!-- onpress/assistant {"id":"page.data.assistant","agent":"page.data.agent","agent_view":"page.data.agent_view"} /--></section>

  <div class="opdoc__shell opdoc__shell--article">
    ...
    <div class="opdoc__body mdx-content prose ..." data-op-bind='{"data-page-title":"page.title"}'><!-- onpress/content /--></div>
    <!-- onpress/frame {"name":"article__faq"} /-->
    ...
  </div>

  <!-- onpress/frame {"name":"site__footer"} /-->
</div>

Атрибуты вставки onpress/assistant — токены page.data.*: при сборке каждый заменяется значением ключа из frontmatter собираемой страницы (см. параметры вызова). Значения нет — атрибут снимается:

  • нет data.assistant — чата на странице нет вовсе: ни контейнера, ни обвязки в <head>, ни запроса к Framesuite, ни загрузчика. На месте вставки остаётся комментарий op/assistant: у страницы нет id ассистента, остальная страница собирается как обычно;
  • нет data.agent — чат открывается без агента, на своём стартовом экране;
  • нет data.agent_view — агент открывается на экране по умолчанию.

Страница выбирает фрейм ключом frame: "assistant" во frontmatter: публикация записывает его в мету страницы _onpress_frame (id фрейма), по ней страница и собирается по шаблону. Выгрузка GET /pages/{ref}/markdown возвращает тот же ключ frame и в ответе — frame.meta_key: "_onpress_frame". Сменить фрейм — поменять frame и опубликовать страницу ещё раз.

Шапки сайта и своего <h1> во фрейме нет: над чатом ничего не стоит, а заголовок и оглавление пишутся в теле и встают под чатом: первой строкой # …, следом <!-- onpress/frame {"name":"outline"} /-->. Вставку onpress/assistant в тело не пишут — чат уже стоит во фрейме, тело передаёт ему только значения из frontmatter.

Параметры страницы

Ключ frontmatterТокен во фреймеСмысл
data.assistantpage.data.assistantid чата Framesuite (12 символов, например x8OA7Azs4hBy) — какой ассистент
data.agentpage.data.agentслаг агента внутри ассистента (canva) — с кем открыт чат
data.agent_viewpage.data.agent_viewпервый экран агента: profile — карточка агента, chat — сразу переписка

agent принимает латиницу, цифры, - и _ (до 100 символов), agent_view — только profile или chat; другое значение отбрасывается, и чат открывается как без него. Три формы записи ключа во frontmatter равноправны — data.agent: "canva", вложенная под data: и просто agent: "canva", — все читаются как page.data.agent (см. frontmatter).

Пример страницы

---
name: "AI design assistant"
seo_title: "AI design assistant — plan posts, posters and slides fast"
seo_description: "AI design assistant for Canva: layout, copy, colors and fonts from one short brief."
slug: "canva"
url: "/base/canva/"
lang: "en"
status: "publish"
frame: "assistant"
data.assistant: "x8OA7Azs4hBy"
data.agent: "canva"
data.agent_view: "profile"
---

# AI design assistant

<!-- onpress/frame {"name":"outline"} /-->

This AI design assistant turns a short brief into a ready design plan...

## How to use the AI design generator

1. Say what you are making and for which platform.
2. Get a layout with copy, colors and fonts.

## AI design assistant FAQ

<!-- onpress/frame {"name":"faq"} -->
### Is the AI design assistant free?

You can start for free.

### Does it create the design inside my Canva account?

No. It plans the design and explains how to build it in Canva.
<!-- /onpress/frame -->

В теле — только текст и вызовы фреймов: outline ставит свёрнутое оглавление под заголовком, faq получает вопросы слотом и выводит аккордеон с FAQPage. Чата в теле нет: его ставит фрейм.

Опубликовать

API=https://onpress.pro/api/v2
curl -s -X POST "$API/pages/markdown" \
  -H "Authorization: Bearer op_ВАШ_ТОКЕН" -H "X-OnPress-Blog-Id: $SITE" \
  -H 'Content-Type: application/json' \
  -d "$(jq -n --rawfile md canva.md '{markdown: $md}')" \
  | jq '{id, url, updated, frame, warnings}'

Ключи data.* — свои ключи frontmatter, публикация записывает их метаполями страницы и возвращает обратно в выгрузке GET /pages/{ref}/markdown. Поменять агента на готовой странице — поменять data.agent и опубликовать страницу ещё раз; фрейм трогать не нужно. Другой ассистент для одной страницы — другой data.assistant там же.

Проверить

Без кук, по адресу страницы:

curl -s "https://bota.chat/base/canva/" > page.html
grep -c 'id="ai-assistant-mount"' page.html          # контейнер чата есть
grep -o 'data-slug="[^"]*"' page.html | head -1      # data-slug="x8OA7Azs4hBy" — id из data.assistant
grep -o 'var ENTRY = [^;]*' page.html                # {"agent":"canva","agent_view":"profile"}
grep -c '<h1' page.html                              # один заголовок — из тела

ENTRY — вход, с которым загрузчик поднимает приложение: агент и его первый экран уходят в запросы к Framesuite параметрами fs_agent и fs_agent_view, в адресную строку не попадают. Если ENTRY пустой при заполненном data.agent — проверьте значение на допустимые символы. Страница без data.assistant должна дать ноль совпадений по ai-assistant-mount и комментарий op/assistant: у страницы нет id ассистента.

Переключатель языка в чате

Когда посетитель выбирает язык в самом чате, приложение Framesuite сообщает об этом странице событием framesuite:locale-change. Загрузчик ищет перевод текущей страницы в её ссылках <link rel="alternate" hreflang>: сначала по коду целиком (pt-br), потом по языку без региона (pt → pt-PT), x-default пропускается. Перевод есть — уводит на него с тем же диалогом (?c=<id диалога>), и чат поднимается уже на языке новой страницы. Перевода нет — остаётся на странице, чат переключает только себя. Отдельно настраивать ничего не нужно: достаточно, чтобы у страницы были переводы, связанные через translation_of (см. языки и переводы страниц).

Почему чат не ставят в тело

Тело страницы собирается внутри колонки текста .opdoc__body — узкой, с отступами и стилями статьи. Чату нужна вся ширина и высота экрана: в колонке сайдбар чата уходит за край, поле ввода сжимается, высота оказывается меньше экрана. Поэтому чат стоит во фрейме, секцией над колонкой, а тело передаёт ему только значения через frontmatter.

На сайте есть фрейм assistant__chat — тот же чат обычной разметкой, который вызывается onpress/frame с параметрами. Для тела страницы он не годится по той же причине, а ещё в нём нет обработчика переключателя языка. Вставку onpress/assistant в теле страницы (<!-- onpress/assistant {"id":…,"agent":…} /--> первой строкой) больше не используем: вход задаётся ключами data.*, и тело остаётся чистым markdown. Старые страницы с такой строкой продолжают работать — вставка в теле уточняет вход вставки из фрейма и второго чата не рисует.

Своя копия

Скопируйте фрейм под своим слагом, поменяйте разметку вокруг секции чата и поставьте копию страницам:

curl -s -H "Authorization: Bearer op_ВАШ_ТОКЕН" -H "X-OnPress-Blog-Id: $SITE" "$API/frames/assistant" | jq -r .frame.html > assistant.html
# правим assistant.html: например, добавляем шапку <!-- onpress/frame {"name":"site__header"} /--> над секцией
curl -s -X POST "$API/frames" -H "Authorization: Bearer op_ВАШ_ТОКЕН" -H "X-OnPress-Blog-Id: $SITE" \
  -H 'Content-Type: application/json' \
  -d "$(jq -n --rawfile html assistant.html '{slug: "assistant--with-header", html: $html}')" | jq '{success, frame: .frame.slug, warnings}'

Вставку onpress/assistant с токенами page.data.* оставьте как есть — на ней держатся чат, обвязка в <head> и вход. Один чат на страницу: вторая вставка с тем же id ничего не рисует. Подробно о копиях — свой фрейм из готового.