[scottopolis]

Summary

• add controlled Chat.* compound components for root state, transcript scrolling/accessibility, standard messages/tools, safe composition, native textarea props, and send/stop behavior
• keep ChatSurface and ChatWidget as compatibility presets assembled from those same primitives
• add per-visible-assistant response composition with optional action rows and host-supplied suggestion chips; no LLM generation/provider contract
• keep custom tool rendering authoritative, including suppression of tool-only rows and their response footers
• document composition as the primary customization API

Public API

<Chat.Root messages={chat.messages} status={chat.status} actions={chat}>
  <Header />
  <Chat.Transcript>
    <Chat.Empty>How can we help?</Chat.Empty>
    <Chat.Messages renderTool={renderTool}>
      {(message) => suggestions[message.id]?.length ? (
        <Chat.ResponseFooter>
          <ResponseActions message={message} />
          <Chat.Suggestions>
            {suggestions[message.id].map(({ label, prompt }) => (
              <Chat.Suggestion key={prompt} prompt={prompt}>{label}</Chat.Suggestion>
            ))}
          </Chat.Suggestions>
        </Chat.ResponseFooter>
      ) : null}
    </Chat.Messages>
  </Chat.Transcript>
  <footer className="composer-wrap">
    <Chat.Composer>
      <Chat.Input ref={composerRef} />
      <ExtraControl />
      <Chat.Send />
    </Chat.Composer>
  </footer>
</Chat.Root>

Verification

• npm test — 52 tests pass
• npm run build — typecheck, library declarations/CSS/ESM, app, embed, and server builds pass
• npm pack --dry-run --json — prepare builds the Git-consumption package with ESM, CSS, and declarations
• rendered and inspected preset, composed desktop, and 390px narrow states at DPR 2
• narrow DOM check: 24px transparent/borderless action controls with 14px icons; suggestion chips wrap onto two rows without overflow