aiCodeBlock

Компонент aiCodeBlock отображает фрагмент исходного кода с подсветкой синтаксиса, необязательной меткой языка и действиями для копирования и переноса строк кода.

XML-элемент

aiCodeBlock

Java-класс

AiCodeBlock

Используйте его везде, где приложение показывает код. Внутри диалога он также используется автоматически: aiMessageList отображает каждый блок кода из сообщения ассистента как aiCodeBlock, поэтому код в чате выглядит и ведет себя так же, как код в других местах приложения.

Блок кода

Основы

Объявите пространство имен aichat в XML-дескрипторе экрана:

<view xmlns="http://jmix.io/schema/flowui/view"
      xmlns:aichat="http://jmix.io/schema/aichat/ui"
      title="msg://CodeBlockView.title">
Studio автоматически добавляет пространство имен, когда вы добавляете компонент с помощью действия Add Component на верхней панели действий. См. Палитра компонентов.

Затем объявите блок и поместите исходный код во вложенный элемент code:

            <aichat:aiCodeBlock id="basicsBlock" language="sql">
                <aichat:code><![CDATA[select c.name, count(o.id) as order_count
from CUSTOMER c
    left join ORDER_ o on o.customer_id = c.id
group by c.name
order by order_count desc]]></aichat:code>
            </aichat:aiCodeBlock>

Записывайте вложенный элемент с префиксом aichat, то есть как <aichat:code>. В пространстве имен экрана по умолчанию тоже есть элемент с именем code, поэтому <code> без префикса внутри aiCodeBlock — это другой компонент, а не этот элемент, и экран может загрузиться без сообщения об ошибке.

Блок принимает ширину своего содержимого и никогда не превышает ширину своего контейнера.

Код

Задать код можно двумя способами.

Вложенный элемент code содержит многострочный исходный код. Оберните его в CDATA, чтобы исходный код передавался без изменений, как в примере выше.

Атрибут code содержит одну строку и принимает ключ сообщения, что удобно, когда исходный код хранится в пакете сообщений:

XML
<aichat:aiCodeBlock id="bundleBlock"
                    language="bash"
                    code="msg://runCommand.code"/>
Пакет сообщений
com.company.demo.view.codeblock/runCommand.code=./gradlew -Pvaadin.productionMode=true bootJar

Если заданы оба способа, приоритет имеет вложенный элемент. Если элемент code присутствует, но пуст, загрузка экрана завершается ошибкой, чтобы такой элемент не мог незаметно перекрыть код, объявленный в атрибуте.

Можно не задавать ни один из них. Тогда блок отображается пустым. Это обычное состояние блока, который позже заполняет контроллер.

Язык

Атрибут language выполняет две функции: он выводит метку в заголовке блока и сообщает механизму подсветки, какую грамматику применять.

AiCodeBlockLanguage содержит распространенные идентификаторы языков в виде констант:

AiCodeBlock codeBlock = uiComponents.create(AiCodeBlock.class);
codeBlock.setLanguage(AiCodeBlockLanguage.JAVA);
codeBlock.setCode("""
        @Autowired
        private Notifications notifications;

        @Subscribe("saveButton")
        public void onSaveButtonClick(final ClickEvent<JmixButton> event) {
            notifications.show("Saved");
        }""");

programmaticBox.add(codeBlock);

Константы введены для удобства и не ограничивают набор допустимых значений: атрибут принимает любую строку. Значение, которое механизм подсветки не распознает, не является ошибкой: код отображается как простой текст.

Без языка у блока совсем нет строки заголовка. Вместо этого действия располагаются поверх кода в верхнем углу со стороны конца строки, а код получает отступ, чтобы под ними ничего не отображалось:

Блок кода без языка

Для подсветки нужен язык, но эти две настройки не взаимозаменяемы. Если задать highlight="false" для блока с языком, заголовок и метка сохранятся, а код отобразится без подсветки. Если не задавать язык, исчезнет и заголовок.

Действия копирования и переноса строк

Действие копирования копирует исходный код блока в буфер обмена, всегда исходный текст и никогда разметку подсветки, и на короткое время показывает подтверждение.

Действие переноса строк переключает блок между горизонтальной прокруткой и мягким переносом строк. Его значок и всплывающая подсказка описывают, что произойдет при следующем нажатии, а не текущее состояние. При замене кода блока перенос строк возвращается к объявленному значению.

Любое из действий можно убрать с помощью copyActionEnabled или wrapActionEnabled. Отключенное действие вообще не отображается:

            <aichat:aiCodeBlock id="actionsDisabledBlock"
                                language="properties"
                                copyActionEnabled="false"
                                wrapActionEnabled="false">
                <aichat:code><![CDATA[main.datasource.url=jdbc:postgresql://localhost:5432/demo
main.datasource.username=demo
jmix.core.available-locales=en,de]]></aichat:code>
            </aichat:aiCodeBlock>

Действие копирования ничего не сообщает об ошибке, если браузер запрещает запись в буфер обмена: ничего не копируется, и пользователь об этом не узнает. Обычная причина — приложение работает по простому HTTP, а браузеры разрешают доступ к буферу обмена только в безопасных контекстах. Копирование работает по HTTPS и на localhost.

Локализация

Надписи действий копирования и переноса строк берутся из пакета сообщений дополнения, из ключей aiCodeBlock.i18n.*: copy, copied, wrapOn и wrapOff. Переопределите эти ключи в пакете сообщений приложения, чтобы изменить надписи действий везде.

Чтобы изменить надписи действий одного блока, добавьте вложенный элемент i18n:

XML
            <aichat:aiCodeBlock id="i18nBlock" language="yaml">
                <aichat:code><![CDATA[name: demo
services:
  db:
    image: postgres:17
    environment:
      POSTGRES_DB: demo
      POSTGRES_PASSWORD: demo]]></aichat:code>
                <aichat:i18n copy="msg://i18nBlock.copy"
                             copied="msg://i18nBlock.copied"/>
            </aichat:aiCodeBlock>
Пакет сообщений
com.company.demo.view.codeblock/i18nBlock.copy=Copy the compose file
com.company.demo.view.codeblock/i18nBlock.copied=Compose file copied

В примере выше действие переноса строк сохраняет стандартные надписи. О том, как сочетаются эти два уровня, см. Приоритет.

Стилизация

Блок открывает свои внутренние элементы как shadow parts, к которым можно обращаться с помощью селектора ::part().

Следующие свойства стилей можно использовать в таблицах стилей CSS, чтобы настроить внешний вид этого компонента.

Имя Описание

--jmix-ai-code-block-background

Фон блока.

--jmix-ai-code-block-border-radius

Радиус скругления углов блока.

--jmix-ai-code-block-font-family

Семейство шрифтов кода.

--jmix-ai-code-block-font-size

Размер шрифта кода.

--jmix-ai-code-block-actions-gap

Промежуток между кнопками действий.

--jmix-ai-code-block-action-icon-size

Размер значков действий.

--jmix-ai-code-block-color-text

Цвет кода, у которого нет синтаксической роли.

--jmix-ai-code-block-color-keyword

Цвет ключевых слов языка.

--jmix-ai-code-block-color-string

Цвет строковых литералов.

--jmix-ai-code-block-color-number

Цвет числовых литералов.

--jmix-ai-code-block-color-comment

Цвет комментариев.

--jmix-ai-code-block-color-title

Цвет имен в объявлениях, например функций и классов.

--jmix-ai-code-block-color-type

Цвет имен типов.

--jmix-ai-code-block-color-built-in

Цвет встроенных идентификаторов языка.

--jmix-ai-code-block-color-attr

Цвет имен атрибутов и свойств.

--jmix-ai-code-block-color-tag

Цвет тегов разметки.

--jmix-ai-code-block-color-meta

Цвет метаданных, например аннотаций и директив препроцессора.

--jmix-ai-code-block-color-success

Цвет галочки, которая подтверждает копирование.

--jmix-ai-code-block-icon-copy

Значок действия копирования.

--jmix-ai-code-block-icon-check

Значок, который отображается, пока показано подтверждение копирования.

--jmix-ai-code-block-icon-wrap

Значок действия переноса строк, когда перенос выключен.

--jmix-ai-code-block-icon-no-wrap

Значок действия переноса строк, когда перенос включен.

Свойства значков содержат изображение, которое применяется как маска, поэтому переопределение такого свойства заменяет соответствующий значок.

Компоненты стилизованы для обеих тем Jmix, Aura и Lumo, и используют собственные токены темы для рамок фокуса, границ, радиусов скругления и отступов, поэтому у перечисленных выше свойств нет единого значения по умолчанию. Поддерживаются темный режим, режим высокой контрастности и режим уменьшения движения, а разметка задана через свойства, не зависящие от направления, поэтому компоненты следуют направлению текста документа.

Атрибуты

aiCodeBlock имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

code

Задает код в виде однострочного значения, напрямую или из пакета сообщений. Вложенный элемент code имеет приоритет. См. Код.

—

codeWrapped

Задает, переносятся ли строки кода вместо горизонтальной прокрутки. См. Действия копирования и переноса строк.

false

copyActionEnabled

Задает, есть ли у блока действие копирования.

true

highlight

Задает, применяется ли подсветка синтаксиса. Для подсветки также нужно задать language.

true

language

Задает язык кода, который отображается в виде метки и используется для подсветки. Допускается любая строка. См. Язык.

—

wrapActionEnabled

Задает, есть ли у блока действие переноса строк.

true

aiCodeBlock имеет следующие общие атрибуты:

id - alignSelf - classNames - colspan - css - height - justifySelf - maxHeight - maxWidth - minHeight - minWidth - visible - width

Обработчики

aiCodeBlock имеет следующие общие обработчики:

AttachEvent - DetachEvent

Элементы

Компонент aiCodeBlock может содержать вложенные элементы code и i18n.

code

Элемент code содержит исходный код блока. Его содержимое берется без изменений, поэтому оно может занимать несколько строк. См. Код.

i18n

Элемент i18n изменяет надписи действий этого блока. Он поддерживает атрибуты copy, copied, wrapOn и wrapOff, каждый из которых принимает ключ сообщения. Для не заданных атрибутов сохраняются значения из пакета сообщений. См. Локализация.