useAg2bHistory

Reactive view of the conversation. Re-renders on every history mutation and returns a stable ChatMessage[] reference between mutations.

function useAg2bHistory(): ChatMessage[]

SSR-safe

Backed by useSyncExternalStore with a server snapshot, so Next.js / Remix render the agent's current history server-side without a hydration mismatch.

Usage

Basic transcript

Render every message in the order it entered the loop.

function Transcript() {
  const messages = useAg2bHistory();
  return (
    <ul>
      {messages.map((m, i) => (
        <li key={i}>
          <strong>{m.role}</strong>: {m.content ?? '(no content)'}
        </li>
      ))}
    </ul>
  );
}

Why the ?? '(no content)': assistant turns that only call tools have no content. See AssistantMessage.

Handling roles

Each entry is a UserMessage, AssistantMessage, or ToolMessage. Discriminate on role to render each shape differently — styled bubbles, expandable tool results, reasoning traces:

function Transcript() {
  const messages = useAg2bHistory();
  return messages.map((m, i) => {
    switch (m.role) {
      case 'user':
        return <UserBubble key={i} text={m.content} />;
      case 'assistant':
        return (
          <AssistantBubble
            key={i}
            text={m.content}
            reasoning={m.reasoning}
            calls={m.calls}
          />
        );
      case 'tool':
        return <ToolResult key={i} id={m.id} payload={m.content} />;
    }
  });
}

Pairing with streaming

For streaming chats, splice pendingMessage from useAg2bChatStream onto messages to render the in-flight assistant turn alongside committed history.

Mutating history

The hook is read-only. To clear or replace the conversation, call methods on agent.history directly via useAg2bAgent:

function NewChatButton() {
  const agent = useAg2bAgent();
  return <button onClick={() => agent.history.reset()}>New chat</button>;
}

See History for reset, restore, and the message-type schemas.