Skip to content
Fabrials UI
Components / AI chat

Chat message

A user or assistant turn with copy, edit, retry and timestamp actions.

@fabrials/ai-ui
Loading state
How should hosts import the shared styles?

Import tokens, fonts and styles once, in that order1. Tailwind hosts add the bridge last2.

Installation

  1. Import the control from @fabrials/ai-ui, after setting the app up.

    TypeScript
    import { ChatMessage, MessageActions, MessageAction, CopyMessageAction, MessageTimestamp } from "@fabrials/ai-ui";import "@fabrials/ai-ui/styles.css";

API reference

Prop / exportTypeDescription
fromChatRoleuser, assistant or system. User turns sit in a bubble.
actionsReactNodeMessageActions for this turn.
pinActionsbooleanKeeps actions visible instead of revealing them on hover and focus.
textstringCopyMessageAction writes it to the clipboard. A function works too.
dateTimestringMessageTimestamp shows label with detail in a tooltip.

Behavior

Presentational. The host supplies the rendered content, including its markdown renderer, and decides what edit and retry do.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.