Chat

Compound chat interface with messages, streaming, input, and tool support.

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

---

Parts

Name	Element	Purpose
Chat.Root	div	Manages conversation state (uncontrolled) or accepts external state (controlled). Renders the outermost wrapper.
Chat.Header	div	Container for the chat header area (title, controls). Sets data-part="header".
Chat.Messages	render prop	Provides the message list via a render-prop child. Auto-scrolls with rAF pinning during streaming.
Chat.Message	div	Wraps a single message inside Messages. Accepts a TrackedChatMessage. Provides context to child parts.
Chat.Avatar	div	Avatar circle for a message. Accepts a role prop (“user” | “assistant”). Sets data-part="avatar".
Chat.Bubble	div	Message bubble container. Reads role from Message context. Sets data-part="bubble".
Chat.MessageContent	div	Renders the text content of the current Chat.Message.
Chat.MessageMeta	div	Slot for provider/model attribution below assistant messages. Sets data-part="message-meta".
Chat.ToolPills	div	Renders tool usage pills for assistant messages. Accepts formatToolName prop. Sets data-part="tool-pills".
Chat.Input	textarea	Auto-growing text input wired to Chat.Root state.
Chat.SendButton	button	Sends the current input. Disabled when empty or streaming.
Chat.StopButton	button	Aborts the active stream. Hidden when not streaming.
Chat.StreamingIndicator	span	Visible only while a response is being streamed.
Chat.TypingIndicator	div	Bouncing dots shown when streaming starts before any content arrives. Accepts dotCount prop (default 3).
Chat.StreamCursor	span	Pulsing cursor bar at the end of streaming content. Sets data-part="stream-cursor".
Chat.ToolActivity	div	Live tool execution phases (priming, matched, executing, result). Sets data-phase attribute.
Chat.EmptyState	div	Shown when the message list is empty.
Chat.ScrollFade	div	Gradient fade overlay at the top of the messages area. Controlled via visible prop.
Chat.Footer	div	Footer status bar container. Sets data-state to “streaming” or “idle”.
Chat.ContextBar	div	Context window usage indicator with usage levels (normal/warning/critical). Accepts formatTokens prop.

---

Uncontrolled usage

Wrap in a <ArlopassProvider> and Chat.Root manages all conversation state internally via useConversation.

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

function MyChat() {
  return (
    <ArlopassProvider>
      <Chat.Root systemPrompt="You are a helpful assistant.">
        <Chat.Header>
          <span>Documentation Assistant</span>
        </Chat.Header>

        <Chat.ScrollFade visible={hasScrolled} />
        <Chat.EmptyState>No messages yet — say hello!</Chat.EmptyState>
        <Chat.Messages>
          {(messages) => (
            <>
              {messages.map((msg) => (
                <Chat.Message key={msg.id} message={msg}>
                  <Chat.Avatar role={msg.role}>{/* icon */}</Chat.Avatar>
                  <div>
                    <Chat.Bubble>
                      <Chat.MessageContent />
                    </Chat.Bubble>
                    <Chat.MessageMeta>Claude 3.5 · Anthropic</Chat.MessageMeta>
                    <Chat.ToolPills />
                  </div>
                </Chat.Message>
              ))}
            </>
          )}
        </Chat.Messages>

        <Chat.TypingIndicator />
        <Chat.ToolActivity />

        <Chat.Input placeholder="Type a message…" />
        <Chat.SendButton>Send</Chat.SendButton>
        <Chat.StopButton>Stop</Chat.StopButton>

        <Chat.Footer>
          <Chat.ContextBar />
        </Chat.Footer>
      </Chat.Root>
    </ArlopassProvider>
  );
}

---

Controlled usage

Pass messages and callbacks to manage state yourself. Useful when you need access to the conversation outside the Chat tree.

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

function ControlledChat() {
  const conv = useConversation({ systemPrompt: "Be concise." });

  return (
    <Chat.Root
      messages={conv.messages}
      streamingContent={conv.streamingContent}
      streamingMessageId={conv.streamingMessageId}
      isStreaming={conv.isStreaming}
      isSending={conv.isSending}
      onSend={(text) => conv.stream(text)}
      onStop={conv.stop}
      error={conv.error}
      toolActivity={conv.toolActivity}
      contextInfo={conv.contextInfo}
    >
      <Chat.Header>AI Chat</Chat.Header>
      <Chat.Messages>
        {(messages) =>
          messages.map((msg) => (
            <Chat.Message key={msg.id} message={msg}>
              <Chat.Avatar role={msg.role} />
              <div>
                <Chat.Bubble>
                  <Chat.MessageContent />
                  {msg.role === "assistant" && conv.isStreaming && (
                    <Chat.StreamCursor />
                  )}
                </Chat.Bubble>
                <Chat.MessageMeta>Model info here</Chat.MessageMeta>
                <Chat.ToolPills formatToolName={(n) => n.replace(/_/g, " ")} />
              </div>
            </Chat.Message>
          ))
        }
      </Chat.Messages>
      <Chat.TypingIndicator dotCount={3} />
      <Chat.ToolActivity />
      <Chat.Input placeholder="Ask anything…" />
      <Chat.SendButton>Send</Chat.SendButton>
      <Chat.Footer>
        <Chat.ContextBar />
      </Chat.Footer>
    </Chat.Root>
  );
}

---

Chat.Root — uncontrolled props

Chat.Root — controlled props

---

Data attributes

Styling

All parts render plain HTML elements with data attributes. Use CSS attribute selectors to style each state:

/* Message bubbles by role */
[data-part="bubble"][data-role="user"] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
}

[data-part="bubble"][data-role="assistant"] {
  background: var(--surface-accent);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  padding: 6px 10px;
}

/* Avatars */
[data-part="avatar"] {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-part="avatar"][data-role="user"] {
  background: var(--surface);
  border: 1px solid var(--border);
}
[data-part="avatar"][data-role="assistant"] {
  background: var(--surface-accent);
}

/* Typing dots with bounce animation */
[data-part="typing-dot"] {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: bounce 0.8s ease-in-out infinite;
}

/* Streaming cursor */
[data-part="stream-cursor"] {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}

/* Context bar usage levels */
[data-part="context-bar"][data-usage="warning"] {
  color: var(--warning);
}
[data-part="context-bar"][data-usage="critical"] {
  color: var(--danger);
}

/* Tool activity phases */
[data-part="tool-activity"][data-phase="executing"] {
  opacity: 0.8;
}

/* Scroll fade gradient */
[data-part="scroll-fade"][data-state="visible"] {
  opacity: 1;
  background: linear-gradient(to bottom, var(--surface), transparent);
}
[data-part="scroll-fade"][data-state="hidden"] {
  opacity: 0;
}

/* Footer states */
[data-part="footer"][data-state="streaming"] {
  border-top-color: var(--accent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-part="typing-dot"],
  [data-part="stream-cursor"] {
    animation: none;
  }
}

---

Accessibility