Headless Primitives

import { Chat, useChatSuggestions, useChatRootContext } from "@hikari/chat-react";

function CustomChat() {
  return (
    <Chat.Root baseUrl="https://agent-api.zenku.dev" defaultOpen>
      <TerminalUI />
    </Chat.Root>
  );
}

function TerminalUI() {
  const { isOpen } = useChatRootContext();
  return (
    <>
      {!isOpen && (
        <Chat.Trigger className={styles.trigger}>
          &gt; open_chat
        </Chat.Trigger>
      )}
      <Chat.Panel className={styles.panel}>
        <header className={styles.header}>
          <span>terminal-chat v1.0</span>
          <Chat.CloseButton className={styles.close}>
            [x]
          </Chat.CloseButton>
        </header>
        <Chat.Messages className={styles.messages}>
          {(message, index) => (
            <Chat.Message key={message.id} message={message} index={index}>
              <Chat.MessageContent renderA2UI renderToolCalls />
              <Chat.Interrupt>
                {({ approval, onRespond, isResolved }) => (
                  <ApprovalUI approval={approval}
                    onRespond={onRespond} isResolved={isResolved} />
                )}
              </Chat.Interrupt>
            </Chat.Message>
          )}
        </Chat.Messages>
        <Chat.LoadingIndicator className={styles.loading}>
          <span className={styles.blink}>_</span>
        </Chat.LoadingIndicator>
        <SuggestionsBar />
        <Chat.InputArea className={styles.inputArea}>
          <span className={styles.prompt}>$</span>
          <Chat.Input className={styles.input}
            placeholder="Type a message..." />
          <Chat.SendButton className={styles.send}>
            Enter
          </Chat.SendButton>
        </Chat.InputArea>
      </Chat.Panel>
    </>
  );
}

Shared State (useChatReadable)

Registered Actions (useChatAction)

Custom Tool Renderer (useRenderToolCall)