StreamingText

Streaming text renderer with typing cursor.

import { StreamingText } from "@arlopass/react-ui";

Props

Prop	Type	Default	Description
`content` required	`string`	—	The text content to display.
`isStreaming` required	`boolean`	—	Whether the text is currently being streamed.
`cursor`	`string`	`"▌"`	Cursor character shown while streaming.

Usage

import { StreamingText } from "@arlopass/react-ui";

function StreamingDemo({ content, isStreaming }) {
  return (
    <StreamingText content={content} isStreaming={isStreaming} cursor="▌" />
  );
}

With Chat

Commonly used inside Chat.Messages to render the in-progress assistant response.

import { Chat, StreamingText } from "@arlopass/react-ui";

<Chat.Root systemPrompt="You are helpful.">
  <Chat.Messages>
    {(messages, streamingContent, isStreaming) => (
      <>
        {messages.map((msg) => (
          <div key={msg.id}>{msg.content}</div>
        ))}
        {streamingContent && (
          <StreamingText content={streamingContent} isStreaming={isStreaming} />
        )}
      </>
    )}
  </Chat.Messages>
  <Chat.Input />
  <Chat.SendButton>Send</Chat.SendButton>
</Chat.Root>;

Data attributes

Prop	Type	Default	Description
`data-state`	` "streaming"	"idle"`	`"idle"`

Styling

The component renders a <span> element. The cursor character is appended as a text node while streaming.

/* Animate the cursor while streaming */
[data-state="streaming"] {
  /* Cursor blinks */
}

[data-state="streaming"]::after {
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

[data-state="idle"] {
  /* Final state — no cursor visible */
}

Streaming text renderer with typing cursor.

import { StreamingText } from "@arlopass/react-ui";