Сообщение

отображает сообщение в беседе с необязательным аватаром, заголовком, нижним колонтитулом и выравниванием.

❯buridan add сообщение

Error: Reference Target 'сообщение' not found

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

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

Примеры

Аватар

Используйте message.avatar, чтобы отобразить аватар рядом с сообщением. Установите align="end" в сообщении, чтобы выровнять аватар по концу сообщения.

Использованный реквизит: align на message.root.

Error: Reference Target 'сообщение_с_аватаром' not found

выровнять	Описание
`start`	Выровняйте сообщение по началу разговора.
`end`	Выровняйте сообщение по концу разговора.

Группа

Используйте message.group для объединения последовательных сообщений от одного и того же отправителя. Отобразите пустой message.avatar в предыдущих сообщениях, чтобы они соответствовали аватару в последнем сообщении.

Использованный реквизит: ничего не требуется, кроме состава по умолчанию message.group.

Error: Reference Target 'сообщение_с_группой' not found

Верхний и нижний колонтитулы

Используйте message.header для имени отправителя и message.footer для метаданных, таких как статус доставки или чтения.

Использованный реквизит: ничего не требуется, кроме состава по умолчанию message.header/message.footer.

Olivia

I already checked the logs.

Send the report to the team. Ping @lineindent if you need help.

Read Yesterday

import reflex as rx

from components.ui.bubble import bubble
from components.ui.message import message


def message_header_footer():
    return rx.el.div(
        message.root(
            message.content(
                message.header("Olivia"),
                bubble.root(
                    bubble.content("I already checked the logs."),
                    variant="muted",
                ),
            ),
        ),
        message.root(
            message.content(
                bubble.root(
                    bubble.content(
                        "Send the report to the team. Ping @lineindent if you need help."
                    ),
                ),
                message.footer(
                    rx.el.div(
                        "Read ",
                        rx.el.span("Yesterday", class_name="font-normal"),
                    ),
                ),
            ),
            align="end",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

Действия

Поместите действия на уровне сообщения в message.footer, такие как кнопки копирования, повтора или обратной связи.

Использованный реквизит: не требуется — поместите button(...) внутри message.footer.

Error: Reference Target 'сообщение_с_действиями' not found

Вложение

Используйте §§IC_20§§ с сообщениями, чтобы отобразить вложенный файл или изображение с медиафайлами, метаданными, состоянием загрузки и действиями.

Используемый реквизит: реквизиты для конкретных вложений см. в документации Attachment.

Error: Reference Target 'сообщение_с_вложением' not found

Доступность

Message — это оболочка презентационного макета. Доступность зависит от контента, который вы размещаете внутри него.

Действия, предназначенные только для значков меток

Кнопки действий в message.footer обычно содержат только значки, поэтому присвойте каждой из них aria-label.

message.footer(
    button(
        hi("Refresh03Icon"),
        variant="ghost",
        size="sm",
        title="Retry",
        aria_label="Retry",
    ),
)

Обновления статуса

Для текущих сообщений используйте §§IC_24§§ с role="status", чтобы вспомогательные технологии объявляли об обновлении по мере его появления.

message.root(
    message.content(
        marker.root(
            marker.icon(spinner()),
            marker.content("Compacting conversation"),
            role="status",
        ),
    ),
)

Справочник по API

сообщение.корень

Оболочка строки сообщения.

Опора	Тип	По умолчанию	Описание
`align`	`Literal["start", "end"]`	`"start"`	Выравнивание сообщения в разговоре.
`class_name`	`str`	-	Дополнительные классы, которые можно применить к строке.

сообщение.группа

Группирует последовательные сообщения от одного и того же отправителя.

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	-	Дополнительные классы для применения к корню группы.

сообщение.аватар

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

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	-	Дополнительные классы для применения к слоту аватара.

сообщение.содержание

Обертывает заголовок, поверхность сообщения и нижний колонтитул.

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	-	Дополнительные классы для применения к слоту контента.

сообщение.заголовок

Отображает содержимое над сообщением, например имя отправителя. Остается выровненным по началу независимо от align.

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	-	Дополнительные классы для применения к заголовку.

сообщение.нижний колонтитул

Отображает содержимое под сообщением, например статус или действия. Выравнивается по стороне сообщения.

Опора	Тип	По умолчанию	Описание
`class_name`	`str`	-	Дополнительные классы для применения к нижнему колонтитулу.

External Tools

︲

On This Page