Astryx Chat Tokenized Text

Text

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Chat Tokenized Text to your project and fits it to your theme.

Code

How Astryx Chat Tokenized Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

'use client';

import {
  ChatTokenizedText,
  ChatMessage,
  ChatMessageBubble,
  ChatMessageList,
} from '@/components/ui/astryx-chat-tokenized-text';

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},
];

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

export default function ChatTokenizedTextShowcaseDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <ChatTokenizedTextShowcase />
    </div>
  );
}