# StreamingText

Streaming text renderer with typing cursor.

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

---

### Props

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

---

### Usage

```tsx title="StreamingText"
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.

```tsx title="Inside Chat"
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"`           | Reflects whether text is currently being streamed. |

### Styling

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

```css title="CSS"
/* 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.

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