Chat·component·@astryxdesign/core

Chat Tokenized Text

Renders a text string with token patterns replaced by inline token content. Wrap any message body inside ChatMessageBubble to turn raw @mentions, #tags, or /commands into styled content. When no non-empty token matches or none are provided, the text renders as-is, so you can use ChatTokenizedText unconditionally on every message.

Open in Playground @astryxdesign/core/Chat

Showcases and examples

3 documented examples

Chat Tokenized Text

ChatTokenizedText API entry

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · chat-tokenized-text-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {
  ChatTokenizedText,
  ChatMessage,
  ChatMessageBubble,
  ChatMessageList,
} from '@astryxdesign/core/Chat';

const mixedTokens = [
  {value: '@cindy', label: '@Cindy', variant: 'blue' as const},
  {value: '#bug', label: '#bug', variant: 'red' as const},
  {value: '#feat', label: '#feature', variant: 'green' as const},
];

export default function ChatTokenizedTextShowcase() {
  return (
    <ChatMessageList>
      <ChatMessage sender="system">
        <ChatMessageBubble>
          <ChatTokenizedText tokens={mixedTokens}>
            @cindy filed #bug and #feat for the sprint
          </ChatTokenizedText>
        </ChatMessageBubble>
      </ChatMessage>
    </ChatMessageList>
  );
}

Usage

Use ChatTokenizedText inside a chat message when stored plain text contains serialized token values that should be projected as inline badges or caller-rendered token content. Unmatched text is preserved exactly and empty token values are ignored so rendering always finishes.

Reuse the same token definitions for composer insertion and message rendering so serialized values and visible labels stay aligned.
Use non-empty, stable serialized values so every definition identifies real message text.
Use token labels as a substitute for the surrounding message text; the complete message must remain understandable in reading order.
Put component-owned interaction or accessibility behavior inside a custom token renderer; custom token content remains caller owned.

Typed props

Prop	Type and behavior
`children`	`string` · required The plain text message containing serialized token values. Patterns matching a token's value are replaced with inline token content.
`tokens`	`ChatComposerToken[]` Token definitions using the same type as composer input. Each non-empty value is matched literally. Empty values are ignored. Structured tokens render a Badge, while custom tokens render caller content.
`xstyle`	`StyleXStyles` StyleX styles for the root text wrapper. Must be a stylex.create() value: not an inline style object like style={{}}.

Anatomy

Tokenized text · required

The inline root that preserves unmatched text and carries the chat-tokenized-text theme target.

Rendered token · optional

Inline token content rendered by Badge for structured tokens or by the caller for custom tokens.

Theming

Targets

astryx-chat-tokenized-text