Всплывающее сообщение. Отображает диалоговое содержимое в виде всплывающего сообщения. Поддерживает варианты

выравнивание, группировку, реакции и сворачиваемое содержимое.

❯buridan add всплывающее сообщение. отображает диалоговое содержимое в виде всплывающего сообщения. поддерживает варианты

Error: Reference Target 'пузырь' not found

Отображает диалоговый контент в пузыре сообщений. Поддерживает варианты, выравнивание, группировку, реакции и сворачиваемый контент.

Компонент Bubble отображает диалоговый контент в рамке. Используйте его для текста чата, краткого структурированного вывода, цитируемых ответов, предложений и реакций.

Для полнофункциональных интерфейсов чата используйте компонент §§IC_5§§. Bubble намеренно ограничен поверхностью пузыря. Размещайте аватары, имена, временные метки, метаданные и действия на уровне сообщений в §§IC_7§§.

Особенности

Семь визуальных вариантов: от яркого основного пузырька до призрачного контента без рамки.
Выравнивание начала и конца пузырьков отправителя и получателя.
Реакции, которые привязываются к краю пузырька с настраиваемой стороной и выравниванием.
Размер пузырьков относительно их содержимого, до 80% ширины контейнера
Полиморфный контент через render для ссылок и кнопок.
Настраиваемый стиль с помощью реквизита class_name на каждой части.

Примеры

Варианты

Используйте variant, чтобы изменить внешний вид пузыря.

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

Error: Reference Target 'пузырь_с_вариантами' not found

Вариант	Описание
`default`	Сильный первичный пузырь, обычно для текущего пользователя.
`secondary`	Стандартный нейтральный пузырь для содержания разговора.
`muted`	Облако с меньшим акцентом для тихого вспомогательного контента.
`tinted`	Тонкий пузырь основного оттенка.
`outline`	Пузырь с рамкой для второстепенного или богатого контента.
`ghost`	Содержимое без рамки для текста помощника или расширенного контента.
`destructive`	Разрушительный пузырь за ошибку или неудачные действия.

Размер пузырька соответствует его содержимому, до 80 % ширины контейнера. Вариант ghost удаляет максимальную ширину, поэтому вспомогательный текст и расширенный контент могут охватывать всю строку.

Выравнивание

Используйте align на bubble.root, чтобы выровнять всплывающее окно по началу или концу разговора.

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

This bubble is aligned to the start. This is the default alignment.

This bubble is aligned to the end. Use this for user messages.

import reflex as rx

from components.ui.bubble import bubble


def bubble_alignment_demo():
    return rx.el.div(
        bubble.root(
            bubble.content(
                "This bubble is aligned to the start. This is the default alignment."
            ),
            variant="muted",
            align="start",
        ),
        bubble.root(
            bubble.content(
                "This bubble is aligned to the end. Use this for user messages."
            ),
            align="end",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

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

Примечание. При создании интерфейсов чата вы, вероятно, захотите использовать выравнивание самого компонента Message, а не компонента Bubble. Вы можете использовать параметр role в компоненте message.root, чтобы автоматически выравнивать пузырь по началу или концу разговора.

Пузырьковая группа

Используйте bubble.group, чтобы сгруппировать последовательные пузырьки от одного отправителя. Обратите внимание, что свойство align должно быть установлено в самом компоненте bubble.root, а не в компоненте bubble.group.

bubble.group
├── bubble.root
│   └── bubble.content
└── bubble.root
    └── bubble.content

Использованный реквизит: align на bubble.root (устанавливается для каждого пузыря, а не на bubble.group).

Can you tell me what's the issue?

You tell me!

It worked yesterday. You broke it!

Find the bug and fix it.

👀

Want me to diff yesterday's you against today's you? It's a bit embarrassing.

import reflex as rx

from components.ui.bubble import bubble


def bubble_group_demo():
    return rx.el.div(
        bubble.root(
            bubble.content("Can you tell me what's the issue?"),
            variant="muted",
        ),
        bubble.group(
            bubble.root(
                bubble.content("You tell me!"),
                align="end",
            ),
            bubble.root(
                bubble.content("It worked yesterday. You broke it!"),
                align="end",
            ),
            bubble.root(
                bubble.content("Find the bug and fix it."),
                bubble.reactions(
                    rx.el.span("👀"),
                    aria_label="Reactions: eyes",
                    align="start",
                ),
                align="end",
            ),
        ),
        bubble.root(
            bubble.content(
                "Want me to diff yesterday's you against today's you? "
                "It's a bit embarrassing."
            ),
            variant="muted",
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

Ссылки и кнопки

Вы можете превратить пузырь в ссылку или кнопку, передав интерактивные элементы непосредственно в слот bubble.content. bubble.content принимает *children, поэтому простое размещение кнопки или ссылки отобразит этот компонент.

Использованный реквизит: не требуется — передайте button/rx.el.a как дочерний элемент bubble.content.

How can I help you today?

import reflex as rx

from components.ui.bubble import bubble


def bubble_link_button_demo():
    return rx.el.div(
        bubble.root(
            bubble.content("How can I help you today?"),
            variant="muted",
        ),
        bubble.group(
            bubble.root(
                bubble.content(
                    rx.el.button(
                        "I forgot my password",
                        on_click=rx.toast("You clicked forgot password"),
                        class_name="w-full text-left",
                    )
                ),
                variant="tinted",
                align="end",
            ),
            bubble.root(
                bubble.content(
                    rx.el.button(
                        "I need help with my subscription",
                        on_click=rx.toast("You clicked help with subscription"),
                        class_name="w-full text-left",
                    )
                ),
                variant="tinted",
                align="end",
            ),
            bubble.root(
                bubble.content(
                    rx.el.button(
                        "Something else. Talk to a human.",
                        on_click=rx.toast(
                            "You clicked something else. Talk to a human."
                        ),
                        class_name="w-full text-left",
                    )
                ),
                variant="tinted",
                align="end",
            ),
        ),
        class_name="flex w-full max-w-sm flex-col gap-8 py-12",
    )

Реакции

Используйте bubble.reactions для реакций пузырьков. Вы можете использовать его для отображения реакций или кнопок быстрого действия. Используйте side и align для позиционирования строки — side="top" привязывает ее к верхнему краю. Реакции перекрывают край пузырька, поэтому оставляйте вертикальное пространство между строками — по этой причине в примерах ниже используется больший размер gap.

Использованный реквизит: side, align на bubble.reactions.

I don't need tests, I know my code works.

👍😮

Bold. Fine I'll add some tests. I'll let you know when they're done.

👀🚀+2

Tests passed on the first try. All 142 of them. Looking good!

🎉👏

Are you sure I can run this command?

import reflex as rx

from components.ui.bubble import bubble


def bubble_reactions_demo():
    return rx.el.div(
        bubble.root(
            bubble.content("I don't need tests, I know my code works."),
            bubble.reactions(
                rx.el.span("👍"),
                rx.el.span("😮"),
                align="start",
                role="img",
                aria_label="Reactions: thumbs up, surprised",
            ),
            variant="muted",
            align="end",
        ),
        bubble.root(
            bubble.content(
                "Bold. Fine I'll add some tests. I'll let you know when they're done."
            ),
            bubble.reactions(
                rx.el.span("👀"),
                rx.el.span("🚀"),
                rx.el.span("+2"),
                role="img",
                aria_label="Reactions: eyes, rocket, and 2 more",
            ),
            variant="muted",
        ),
        bubble.root(
            bubble.content(
                "Tests passed on the first try. All 142 of them. Looking good!"
            ),
            bubble.reactions(
                rx.el.span("🎉"),
                rx.el.span("👏"),
                side="top",
                align="start",
                role="img",
                aria_label="Reactions: party popper, clapping hands",
            ),
            variant="default",
            align="end",
        ),
        bubble.root(
            bubble.content("Are you sure I can run this command?"),
            bubble.reactions(
                rx.el.button(
                    "Yes, run it",
                    on_click=rx.toast.success("You clicked yes, running command..."),
                    class_name="px-2 py-0.5 text-xs hover:bg-accent rounded-md",
                ),
            ),
            variant="destructive",
        ),
        class_name="flex w-full max-w-sm flex-col gap-12 py-12",
    )

Доступность

bubble.root отображает презентационную поверхность сообщения. Сохраняйте семантику уровня диалога в окружающем контейнере и следуйте приведенным ниже рекомендациям.

Маркировка реакций

Реакции отображаются в виде ряда смайлов. Программа чтения с экрана считывает каждый глиф без контекста, а счетчики типа +8 объявляются как «плюс восемь». Сгруппируйте строку как одно изображение с описательным aria_label, чтобы она объявлялась один раз. role="img" также скрывает отдельные смайлы от вспомогательных технологий, поэтому aria_hidden не требуется.

bubble.reactions(
    rx.el.span("👍"),
    rx.el.span("🔥"),
    rx.el.span("+8"),
    role="img",
    aria_label="Reactions: thumbs up, fire, and 8 more"
)

Если реакции интерактивны, вместо этого визуализируйте кнопки и присваивайте кнопкам, состоящим только из значков, aria_label.

bubble.reactions(
    button(
        ...,
        aria_label="Thumbs up",
        variant="secondary",
        size="sm"
    )
)

Интерактивные пузыри

Когда пузырь доступен для клика, визуализируйте его как настоящий <button> или <a>. Содержимое bubble.-* принимает *children, поэтому простая передача интерактивного компонента будет отображена. bubble.content содержит видимое кольцо фокусировки для интерактивных элементов, а доступное имя получается из текста пузырька. Никакой дополнительной этикетки не требуется.

bubble.root(
    bubble.content(
        "I forgot my password",
        rx.el.button(type="button", on_click=on_reply)
    ),
    variant="muted",
    align="end"
)

Значение за пределами цвета

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

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

пузырь.корень

Корневая пузырчатая обертка.

Опора	Тип	По умолчанию	Описание
`variant`	`Literal["default", "secondary", "muted", "tinted", "outline", "ghost", "destructive"]`	`"default"`	Визуальная обработка пузырьков.
`align`	`Literal["start", "end"]`	`"start"`	Линейное выравнивание пузырька.
`class_name`	`str`	-	Дополнительные классы, применяемые к корневому элементу.

пузырь.контент

Обертка пузырькового содержимого.

Опора	Тип	По умолчанию	Описание
`*children`	`*rx.Component`	-	Отобразите контент как отдельный элемент, например ссылку.
`class_name`	`str`	-	Дополнительные классы, которые можно применить к элементу контента.

пузырь.реакции

Отображает перекрывающиеся реакции на пузырь.

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

пузырь.группа

Группирует последовательные пузырьки от одного отправителя.

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