@agents24/chat-react 0.3.2 → 0.5.0

package/dist/styles.css

@@ -0,0 +1,493 @@
+:root,
+:root[data-agents24-color-mode="light"] {
+  --a24-background: #ffffff;
+  --a24-surface: #f7f7f8;
+  --a24-surface-hover: #efeff1;
+  --a24-text: #18181b;
+  --a24-muted: #71717a;
+  --a24-border: rgba(24, 24, 27, 0.12);
+  --a24-accent: #18181b;
+  --a24-accent-text: #ffffff;
+  --a24-danger: #b42318;
+  --a24-focus: #71717a;
+  --a24-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color-scheme: light;
+}
+
+:root[data-agents24-color-mode="dark"] {
+  --a24-background: #111113;
+  --a24-surface: #19191c;
+  --a24-surface-hover: #232328;
+  --a24-text: #f4f4f5;
+  --a24-muted: #a1a1aa;
+  --a24-border: rgba(244, 244, 245, 0.14);
+  --a24-accent: #f4f4f5;
+  --a24-accent-text: #18181b;
+  --a24-focus: #a1a1aa;
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-agents24-color-mode="light"]) {
+    --a24-background: #111113;
+    --a24-surface: #19191c;
+    --a24-surface-hover: #232328;
+    --a24-text: #f4f4f5;
+    --a24-muted: #a1a1aa;
+    --a24-border: rgba(244, 244, 245, 0.14);
+    --a24-accent: #f4f4f5;
+    --a24-accent-text: #18181b;
+    --a24-focus: #a1a1aa;
+    color-scheme: dark;
+  }
+}
+
+[data-agents24-chat-layout] *,
+[data-agents24-chat-layout] *::before,
+[data-agents24-chat-layout] *::after { box-sizing: border-box; }
+
+.a24-chat {
+  background: var(--a24-background);
+  color: var(--a24-text);
+  display: grid;
+  font-family: var(--a24-font-family);
+  grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
+  height: 100%;
+  min-height: 32rem;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.a24-sr-only {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.a24-skip-link {
+  background: var(--a24-accent);
+  border-radius: .5rem;
+  color: var(--a24-accent-text);
+  left: .75rem;
+  padding: .6rem .8rem;
+  position: absolute;
+  top: .75rem;
+  transform: translateY(-200%);
+  z-index: 80;
+}
+.a24-skip-link:focus { transform: translateY(0); }
+
+.a24-button,
+.a24-icon-button,
+.a24-thread__open {
+  appearance: none;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+}
+.a24-chat button { touch-action: manipulation; }
+.a24-button:focus-visible,
+.a24-icon-button:focus-visible,
+.a24-thread__open:focus-visible,
+.a24-chat button:focus-visible,
+.a24-chat input:focus-visible,
+.a24-chat select:focus-visible,
+.a24-chat textarea:focus-visible {
+  outline: 2px solid var(--a24-focus);
+  outline-offset: 2px;
+}
+.a24-button:disabled,
+.a24-icon-button:disabled { cursor: not-allowed; opacity: .5; }
+.a24-button {
+  align-items: center;
+  border-radius: .5rem;
+  display: inline-flex;
+  font-size: .875rem;
+  font-weight: 600;
+  gap: .5rem;
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: .55rem .8rem;
+}
+.a24-button svg,
+.a24-icon-button svg { height: 1rem; width: 1rem; }
+.a24-button--primary { background: var(--a24-accent); color: var(--a24-accent-text); }
+.a24-button--quiet { background: transparent; color: var(--a24-muted); }
+.a24-button--quiet:hover { background: var(--a24-surface-hover); color: var(--a24-text); }
+.a24-icon-button {
+  align-items: center;
+  background: transparent;
+  border-radius: .5rem;
+  color: var(--a24-muted);
+  display: inline-flex;
+  height: 2.25rem;
+  justify-content: center;
+  width: 2.25rem;
+}
+.a24-icon-button:hover { background: var(--a24-surface-hover); color: var(--a24-text); }
+
+.a24-sidebar {
+  background: var(--a24-surface);
+  border-inline-end: 1px solid var(--a24-border);
+  min-height: 0;
+  position: relative;
+  z-index: 40;
+}
+.a24-sidebar__inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
+}
+.a24-target-selector { margin-bottom: .65rem; min-width: 0; position: relative; }
+.a24-target-selector__trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: .5rem;
+  color: var(--a24-text);
+  cursor: pointer;
+  display: flex;
+  gap: .55rem;
+  min-height: 2.75rem;
+  padding: .35rem;
+  text-align: start;
+  width: 100%;
+}
+.a24-target-selector__trigger:hover { background: var(--a24-background); }
+.a24-target-selector__trigger:focus-visible { box-shadow: 0 0 0 1px var(--a24-border); outline: none; }
+.a24-target-selector__trigger > svg { color: var(--a24-muted); flex: 0 0 auto; height: .9rem; transition: transform 160ms ease; width: .9rem; }
+.a24-target-selector[data-open] .a24-target-selector__trigger > svg { transform: rotate(180deg); }
+.a24-target-selector__copy { display: flex; flex: 1; flex-direction: column; line-height: 1.25; min-width: 0; }
+.a24-target-selector__copy strong,
+.a24-target-selector__copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a24-target-selector__copy strong { font-size: .875rem; font-weight: 650; }
+.a24-target-selector__copy span { color: var(--a24-muted); font-size: .72rem; }
+.a24-target-selector__panel {
+  background: var(--a24-background);
+  border: 1px solid var(--a24-border);
+  border-radius: .65rem;
+  box-shadow: 0 10px 28px rgba(0,0,0,.12);
+  display: flex;
+  flex-direction: column;
+  gap: .45rem;
+  left: 0;
+  padding: .7rem;
+  position: absolute;
+  right: 0;
+  top: calc(100% + .2rem);
+  z-index: 60;
+}
+.a24-target-selector__panel label { font-size: .75rem; font-weight: 650; }
+.a24-target-selector__panel input { background: var(--a24-background); border: 1px solid var(--a24-border); border-radius: .45rem; color: var(--a24-text); font: inherit; font-size: .75rem; min-height: 2.15rem; outline: none; padding: .4rem .5rem; width: 100%; }
+.a24-target-selector__panel input:focus-visible { border-color: var(--a24-text); }
+.a24-target-selector__panel p { color: var(--a24-muted); font-size: .7rem; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
+.a24-target-selector__panel .a24-target-selector__error { color: var(--a24-danger); }
+.a24-target-selector__apply { align-self: flex-end; background: var(--a24-accent); color: var(--a24-accent-text); min-height: 2rem; padding: .35rem .65rem; }
+.a24-sidebar__top { align-items: center; display: flex; gap: .5rem; }
+.a24-sidebar__new { flex: 1; }
+.a24-sidebar__mobile-close { display: none; }
+.a24-search {
+  align-items: center;
+  background: var(--a24-background);
+  border: 1px solid var(--a24-border);
+  border-radius: .5rem;
+  color: var(--a24-muted);
+  display: flex;
+  gap: .5rem;
+  margin: .75rem 0;
+  min-height: 2.25rem;
+  padding: 0 .65rem;
+}
+.a24-search svg { height: .95rem; width: .95rem; }
+.a24-search input { background: transparent; border: 0; color: var(--a24-text); min-width: 0; outline: none; width: 100%; }
+.a24-thread-list { display: flex; flex: 1; flex-direction: column; gap: .25rem; min-height: 0; overflow-y: auto; }
+.a24-thread { align-items: center; border-radius: .5rem; display: flex; min-width: 0; position: relative; }
+.a24-thread:hover,
+.a24-thread[data-selected] { background: var(--a24-background); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
+.a24-thread__open { background: transparent; color: var(--a24-text); min-width: 0; padding: .6rem .5rem; text-align: start; width: 100%; }
+.a24-thread__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a24-thread__status { color: var(--a24-muted); display: block; font-size: .75rem; margin-top: .15rem; }
+.a24-thread__delete { flex: 0 0 auto; height: 2rem; opacity: 0; width: 2rem; }
+.a24-thread:hover .a24-thread__delete,
+.a24-thread:focus-within .a24-thread__delete { opacity: 1; }
+.a24-sidebar__hint { color: var(--a24-muted); font-size: .875rem; margin: .75rem .5rem; }
+.a24-sidebar__more { margin-top: .5rem; width: 100%; }
+
+.a24-chat__body { display: flex; min-height: 0; min-width: 0; flex-direction: column; }
+.a24-header {
+  align-items: center;
+  border-bottom: 1px solid var(--a24-border);
+  display: flex;
+  flex: 0 0 auto;
+  gap: .65rem;
+  min-height: 4rem;
+  padding: max(.55rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .55rem max(1rem, env(safe-area-inset-left));
+}
+.a24-header__menu { display: none; }
+.a24-avatar { border-radius: .6rem; height: 2.25rem; object-fit: cover; width: 2.25rem; }
+.a24-avatar--fallback { align-items: center; background: var(--a24-accent); color: var(--a24-accent-text); display: inline-flex; font-weight: 700; justify-content: center; }
+.a24-header__identity { min-width: 0; }
+.a24-header h1 { font-size: .95rem; line-height: 1.25rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a24-connection { align-items: center; color: var(--a24-muted); display: flex; font-size: .72rem; gap: .25rem; }
+.a24-connection svg { height: .75rem; width: .75rem; }
+.a24-connection[data-state="connected"] { color: #17803d; }
+.a24-connection[data-state="offline"],
+.a24-connection[data-state="expired"] { color: var(--a24-danger); }
+.a24-header__actions { align-items: center; display: flex; gap: .4rem; margin-inline-start: auto; }
+.a24-appearance { flex: 0 0 auto; }
+
+.a24-main { flex: 1; min-height: 0; overflow: hidden; position: relative; }
+.a24-state { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; margin: auto; max-width: 28rem; padding: 2rem; text-align: center; }
+.a24-state__icon { align-items: center; background: var(--a24-surface); border-radius: .75rem; color: var(--a24-muted); display: flex; height: 3rem; justify-content: center; width: 3rem; }
+.a24-state__icon svg { height: 1.25rem; width: 1.25rem; }
+.a24-state h2 { font-size: 1.1rem; margin: 1rem 0 .25rem; }
+.a24-state p { color: var(--a24-muted); font-size: .9rem; line-height: 1.5; margin: 0 0 1rem; }
+
+/* Shell and transcript primitives are deliberately self-contained. Customer
+   apps must not need Tailwind or source scanning to render the default UI. */
+.a24-shell {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  position: relative;
+  width: 100%;
+}
+.a24-shell--empty { overflow: visible; padding: 0 1rem; }
+.a24-shell__empty { display: flex; flex: 1; flex-direction: column; height: 100%; justify-content: center; position: relative; z-index: 10; }
+.a24-shell__empty-content { align-items: center; display: flex; flex-direction: column; padding: 2rem 0 7rem; text-align: center; width: 100%; }
+.a24-shell__empty-title { font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 650; letter-spacing: -.025em; margin: 0; padding: 0 0 1.5rem; }
+.a24-shell__empty-composer,
+.a24-shell__composer-inner { margin: 0 auto; max-width: 48rem; padding: 0 1rem; width: 100%; }
+.a24-shell__content { display: flex; flex-direction: column; gap: 2rem; margin: 0 auto; max-width: 48rem; min-height: 100%; padding: 3rem 1rem 8rem; width: 100%; }
+.a24-shell__composer-overlay {
+  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--a24-background) 85%, transparent) 42%, var(--a24-background) 68%);
+  bottom: 0;
+  left: 0;
+  overflow: visible;
+  padding: 2.5rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  z-index: 20;
+}
+.a24-shell__scroll-button { display: flex; justify-content: center; left: 0; padding-bottom: .75rem; pointer-events: auto; position: absolute; right: 0; top: 0; transform: translateY(-100%); }
+.a24-shell__composer-inner { pointer-events: auto; }
+
+.a24-scroller { display: flex; flex: 1; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; position: relative; width: 100%; }
+.a24-scroller__viewport { flex: 1; height: 100%; min-height: 0; min-width: 0; overscroll-behavior: contain; overflow-y: auto; scrollbar-gutter: stable; width: 100%; }
+.a24-scroller__content { display: flex; flex-direction: column; gap: 2rem; min-height: 100%; }
+.a24-scroller__item { flex: 0 0 auto; min-width: 0; overflow: visible; }
+.a24-scroller__button {
+  align-items: center;
+  appearance: none;
+  background: var(--a24-background);
+  border: 1px solid var(--a24-border);
+  border-radius: 999px;
+  bottom: 1rem;
+  box-shadow: 0 6px 18px rgba(0,0,0,.12);
+  color: var(--a24-text);
+  display: flex;
+  font: inherit;
+  height: 2.25rem;
+  justify-content: center;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+  transition: opacity 160ms ease, transform 160ms ease;
+  width: 2.25rem;
+  z-index: 50;
+}
+.a24-scroller__button[data-active="false"] { opacity: 0; pointer-events: none; transform: translate(-50%, .5rem); }
+.a24-scroller__button[data-active="true"] { opacity: 1; }
+
+.a24-outline { display: none; pointer-events: none; position: absolute; top: 46%; transform: translateY(-50%); width: 4rem; z-index: 10; }
+.a24-outline__rail { display: flex; flex-direction: column; pointer-events: auto; }
+.a24-outline__button { align-items: center; appearance: none; background: transparent; border: 0; display: flex; height: .55rem; padding: 0; position: relative; width: 4rem; }
+.a24-outline__bar { background: var(--a24-muted); border-radius: 999px; display: block; height: 2px; }
+.a24-outline__preview { background: var(--a24-background); border: 1px solid var(--a24-border); border-radius: .75rem; box-shadow: 0 8px 28px rgba(0,0,0,.14); color: var(--a24-text); opacity: 0; padding: .75rem; position: absolute; text-align: start; width: 16rem; }
+.a24-outline[data-side="left"] { left: .25rem; }
+.a24-outline[data-side="right"] { right: .25rem; }
+.a24-outline[data-side="left"] .a24-outline__button { justify-content: flex-start; }
+.a24-outline[data-side="right"] .a24-outline__button { justify-content: flex-end; }
+.a24-outline[data-side="left"] .a24-outline__preview { left: 100%; margin-left: .5rem; }
+.a24-outline[data-side="right"] .a24-outline__preview { margin-right: .5rem; right: 100%; }
+.a24-outline__button:hover .a24-outline__preview,
+.a24-outline__button:focus-visible .a24-outline__preview { opacity: 1; }
+
+.a24-composer { margin: 0 auto; max-width: 48rem; overflow: visible; position: relative; width: 100%; }
+.a24-composer__surface {
+  background: var(--a24-background);
+  border: 1px solid var(--a24-border);
+  border-radius: 999px;
+  box-shadow: 0 6px 24px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.08);
+  padding: .3rem .45rem;
+  position: relative;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+  width: 100%;
+}
+.a24-composer__surface:focus-within { border-color: var(--a24-border); box-shadow: 0 6px 24px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.08); }
+.a24-composer__surface[data-expanded] { border-radius: 1.1rem; padding: .5rem; }
+.a24-composer__grid { align-items: center; display: grid; width: 100%; }
+.a24-composer__attach-slot,
+.a24-composer__submit-slot { align-items: center; display: flex; justify-content: center; }
+.a24-composer__textarea-slot { min-width: 0; width: 100%; }
+.a24-composer__textarea {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: var(--a24-text);
+  display: block;
+  font: inherit;
+  font-size: .94rem;
+  line-height: 1.45;
+  margin: 0;
+  min-height: 2.25rem;
+  outline: 0;
+  padding: .48rem .25rem;
+  resize: none;
+  width: 100%;
+}
+.a24-composer__textarea::placeholder { color: var(--a24-muted); opacity: .78; }
+.a24-composer__attach,
+.a24-composer__submit,
+.a24-composer__attachment-remove {
+  align-items: center;
+  appearance: none;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font: inherit;
+  justify-content: center;
+}
+.a24-composer__attach { background: var(--a24-surface); color: var(--a24-muted); height: 2rem; width: 2rem; }
+.a24-composer__attach:hover { background: var(--a24-surface-hover); color: var(--a24-text); }
+.a24-composer__submit { background: var(--a24-accent); color: var(--a24-accent-text); height: 2.25rem; transition: opacity 160ms ease, transform 160ms ease; width: 2.25rem; }
+.a24-composer__submit:not(:disabled):hover { transform: scale(1.04); }
+.a24-composer__attach:disabled,
+.a24-composer__submit:disabled { cursor: not-allowed; opacity: .42; }
+.a24-composer__attach svg,
+.a24-composer__submit svg { height: 1rem; width: 1rem; }
+.a24-composer__attachments { display: flex; gap: .5rem; min-width: 0; padding: .25rem; }
+.a24-composer__attachments[data-layout="overlay"] { bottom: 100%; left: 0; margin-bottom: .4rem; overflow-x: auto; position: absolute; right: 0; }
+.a24-composer__attachment { align-items: center; background: var(--a24-background); border: 1px solid var(--a24-border); border-radius: .55rem; color: var(--a24-text); display: flex; font-size: .82rem; gap: .4rem; max-width: min(20rem, calc(100vw - 2rem)); min-height: 2rem; padding: .25rem .4rem; }
+.a24-composer__attachment-remove { background: transparent; color: var(--a24-muted); height: 1.25rem; width: 1.25rem; }
+.a24-composer__toolbar { align-items: center; display: flex; gap: .4rem; min-width: 0; }
+.a24-composer__toolbar--external { margin-top: .5rem; padding: 0 .25rem; }
+
+.a24-hitl { background: transparent; border: 0; display: flex; flex-direction: column; gap: .55rem; padding: .25rem 0; }
+.a24-hitl--resolved { color: var(--a24-muted); font-size: .85rem; }
+.a24-hitl__title { color: var(--a24-text); font-size: .9rem; font-weight: 650; line-height: 1.45; }
+.a24-hitl__comment { background: var(--a24-background); border: 1px solid var(--a24-border); border-radius: .55rem; color: var(--a24-text); font: inherit; min-height: 5rem; padding: .65rem .75rem; resize: vertical; width: 100%; }
+.a24-hitl__error { color: var(--a24-danger); font-size: .85rem; }
+.a24-hitl__actions { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; }
+.a24-hitl__action { appearance: none; background: transparent; border: 1px solid var(--a24-border); border-radius: .5rem; color: var(--a24-text); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; min-height: 2.25rem; padding: .4rem .7rem; }
+.a24-hitl__action[data-primary] { background: var(--a24-accent); border-color: var(--a24-accent); color: var(--a24-accent-text); }
+.a24-hitl__action:disabled { cursor: not-allowed; opacity: .55; }
+
+.a24-chat [data-slot="message"] { display: flex; font-size: .9rem; gap: .5rem; max-width: 80%; min-width: 0; width: 100%; }
+.a24-chat [data-slot="message"].is-user { justify-content: flex-end; margin-inline-start: auto; }
+.a24-chat [data-slot="message"].is-assistant { max-width: 100%; }
+.a24-chat [data-slot="message-group"] { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
+.a24-chat :is([data-slot="message-content"], [data-slot="bubble-content"]) { display: flex; flex-direction: column; gap: .5rem; line-height: 1.55; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
+.a24-chat :is([data-slot="message-content"], [data-slot="bubble-content"]) > :first-child { margin-top: 0; }
+.a24-chat :is([data-slot="message-content"], [data-slot="bubble-content"]) > :last-child { margin-bottom: 0; }
+.a24-chat .is-user > :is([data-slot="message-content"], [data-slot="bubble-content"]) { align-self: flex-end; background: var(--a24-surface); border-radius: .65rem; padding: .7rem 1rem; width: fit-content; }
+.a24-chat [data-slot="message-actions"] { align-items: center; display: flex; gap: .2rem; }
+.a24-chat [data-slot="message-actions"] button,
+.a24-chat [data-slot="attachment-action"] { align-items: center; appearance: none; background: transparent; border: 0; border-radius: .4rem; color: var(--a24-muted); display: inline-flex; height: 2rem; justify-content: center; padding: 0; width: 2rem; }
+.a24-chat [data-slot="message-actions"] button:hover,
+.a24-chat [data-slot="attachment-action"]:hover { background: var(--a24-surface-hover); color: var(--a24-text); }
+.a24-chat [data-slot="message-actions"] button svg { height: 1rem; width: 1rem; }
+.a24-chat [data-slot="attachment-group"] { display: flex; flex-wrap: wrap; gap: .5rem; }
+.a24-chat [data-slot="attachment"] { align-items: center; border: 1px solid var(--a24-border); border-radius: .6rem; display: flex; gap: .5rem; max-width: 100%; min-width: 10rem; padding: .45rem; }
+.a24-chat [data-slot="attachment-media"] { align-items: center; background: var(--a24-surface); border-radius: .4rem; display: flex; height: 2.25rem; justify-content: center; overflow: hidden; width: 2.25rem; }
+.a24-chat [data-slot="attachment-content"] { min-width: 0; }
+.a24-chat [data-slot="attachment-title"],
+.a24-chat [data-slot="attachment-description"] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a24-chat [data-slot="attachment-description"] { color: var(--a24-muted); font-size: .72rem; }
+.a24-chat [data-slot="attachment-media"] img { height: 100%; object-fit: cover; width: 100%; }
+.a24-chat [data-slot="bubble"] { display: flex; flex-direction: column; gap: .25rem; max-width: 80%; min-width: 0; position: relative; width: fit-content; }
+.a24-chat [data-slot="bubble"][data-variant="ghost"] { max-width: 100%; width: 100%; }
+.a24-chat [data-slot="bubble-content"] { border: 1px solid transparent; }
+.a24-chat [data-slot="bubble"][data-variant="default"] [data-slot="bubble-content"] { background: var(--a24-accent); color: var(--a24-accent-text); }
+.a24-chat [data-slot="bubble"][data-variant="secondary"] [data-slot="bubble-content"],
+.a24-chat [data-slot="bubble"][data-variant="muted"] [data-slot="bubble-content"],
+.a24-chat [data-slot="bubble"][data-variant="tinted"] [data-slot="bubble-content"] { background: var(--a24-surface); color: var(--a24-text); }
+.a24-chat [data-slot="bubble"][data-variant="ghost"] [data-slot="bubble-content"] { background: transparent; border: 0; border-radius: 0; padding: 0; width: 100%; }
+.a24-message-response { max-width: 100%; min-width: 0; width: 100%; }
+.a24-message-response > :first-child { margin-top: 0; }
+.a24-message-response > :last-child { margin-bottom: 0; }
+.a24-message-response :is(pre, table) { max-width: 100%; overflow-x: auto; }
+.a24-message-response :is(p, li, blockquote, code) { overflow-wrap: anywhere; }
+
+.a24-chat textarea { color: var(--a24-text); font: inherit; }
+.a24-chat input[type="file"].hidden { display: none; }
+.a24-chat button { font-family: inherit; }
+.a24-model-select { align-items: center; color: var(--a24-muted); display: inline-flex; font-size: .8rem; gap: .2rem; position: relative; }
+.a24-model-select select { appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; padding: .25rem 1.2rem .25rem .25rem; }
+.a24-model-select svg { pointer-events: none; position: absolute; right: .1rem; width: .8rem; }
+.a24-source-link,
+.a24-citation { color: #075f9a; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
+.a24-output-attachment { background: var(--a24-surface); border: 1px solid var(--a24-border); border-radius: .5rem; display: inline-flex; font-size: .8rem; padding: .45rem .65rem; }
+.a24-ui-blocks { border: 1px solid var(--a24-border); border-radius: .65rem; padding: .75rem; }
+.a24-ui-blocks h3,
+.a24-ui-blocks h4,
+.a24-ui-blocks p { margin: 0; }
+.a24-ui-blocks h3 { font-size: .9rem; margin-bottom: .65rem; }
+.a24-ui-blocks__row { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
+.a24-ui-block { background: var(--a24-surface); border-radius: .5rem; min-width: 0; padding: .65rem; }
+.a24-ui-block h4 { color: var(--a24-muted); font-size: .72rem; font-weight: 600; }
+.a24-ui-block p { font-size: 1rem; font-weight: 600; margin-top: .25rem; overflow-wrap: anywhere; }
+.a24-ui-table-scroll { max-width: 100%; overflow-x: auto; }
+.a24-ui-block table { border-collapse: collapse; font-size: .75rem; width: 100%; }
+.a24-ui-block th,
+.a24-ui-block td { border-bottom: 1px solid var(--a24-border); padding: .35rem; text-align: start; }
+.a24-sidebar-backdrop { display: none; }
+
+.a24-outline__preview { max-height: 8rem; overflow: hidden; pointer-events: none; }
+.a24-outline__preview > span { display: -webkit-box; line-height: 1.25rem; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; }
+.a24-outline__preview > span:first-child { -webkit-line-clamp: 4; }
+.a24-outline__preview > span + span { color: var(--a24-muted); margin-top: .25rem; -webkit-line-clamp: 2; }
+
+@media (max-width: 720px) {
+  .a24-chat { grid-template-columns: minmax(0, 1fr); min-height: 26rem; }
+  .a24-sidebar { bottom: 0; box-shadow: 8px 0 28px rgba(0,0,0,.16); left: 0; max-width: min(88vw, 19rem); position: absolute; top: 0; transform: translateX(-105%); transition: transform 180ms ease; width: 100%; }
+  [dir="rtl"] .a24-sidebar { left: auto; right: 0; transform: translateX(105%); }
+  .a24-sidebar[data-open] { transform: translateX(0); }
+  .a24-sidebar__mobile-close { display: inline-flex; }
+  .a24-sidebar-backdrop { background: rgba(0,0,0,.36); border: 0; display: block; inset: 0; position: absolute; z-index: 30; }
+  .a24-header__menu { display: inline-flex; }
+  .a24-header__collapse { display: none; }
+  .a24-thread__delete { opacity: 1; }
+  .a24-shell__content { gap: 1.5rem; padding: 2rem 1rem 7.5rem; }
+  .a24-shell__composer-overlay {
+    padding: 2rem max(.5rem, env(safe-area-inset-right)) max(.65rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
+  }
+  .a24-shell__composer-inner { padding: 0 .25rem; }
+  .a24-shell__empty-content { padding-bottom: 5.5rem; }
+  .a24-shell__empty-composer { padding: 0; }
+  .a24-composer__surface { box-shadow: 0 4px 18px rgba(0,0,0,.1); }
+  .a24-chat [data-slot="message"] { max-width: 92%; }
+}
+
+@media (min-width: 960px) {
+  .a24-outline[data-visible] { display: block; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .a24-chat *,
+  .a24-chat *::before,
+  .a24-chat *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
+}

package/dist/templates/agent-chat-app.d.ts

@@ -0,0 +1,18 @@
+import type { AgentClient } from "@agents24/client";
+import { type Agents24ProviderProps } from "@agents24/react";
+import type { ChatMcpOauthCompletion } from "../types";
+import { type AgentChatLayoutAgent, type AgentChatLayoutProps } from "./agent-chat-layout";
+export type AgentChatAppProps = Omit<AgentChatLayoutProps, "activeThreadId" | "agent" | "connectionState" | "isLoadingOlder" | "isLoadingThreads" | "isRunning" | "messages" | "onDeleteThread" | "onHitlAction" | "onLoadOlder" | "onNewThread" | "onOpenThread" | "onRetryConnection" | "onStop" | "onSubmit" | "state" | "streamingMessageId" | "threads"> & {
+    agent?: AgentChatLayoutAgent;
+    client: AgentClient;
+    createAbortController?: Agents24ProviderProps["createAbortController"];
+    createId?: Agents24ProviderProps["createId"];
+    completeMcpAuthorization?: (input: {
+        completion: ChatMcpOauthCompletion;
+        codeVerifier: string;
+        serverId: string;
+    }) => Promise<void>;
+    mcpRedirectUri?: string;
+    storage?: Agents24ProviderProps["storage"];
+};
+export declare function AgentChatApp({ client, createAbortController, createId, storage, ...props }: AgentChatAppProps): import("react/jsx-runtime").JSX.Element;

package/dist/templates/agent-chat-layout.d.ts

@@ -0,0 +1,77 @@
+import * as React from "react";
+import type { ChatHitlPart, ChatMessage } from "../types";
+import { type AgentChatComposerSubmit } from "../ui/agent-chat-composer";
+export type AgentChatConnectionState = "connected" | "connecting" | "reconnecting" | "offline" | "expired";
+export type AgentChatViewState = "ready" | "loading" | "streaming" | "reconnecting" | "paused" | "offline" | "denied" | "quota" | "failed" | "expired";
+export type AgentChatLayoutThread = {
+    id: string;
+    title?: string | null;
+    updatedAt?: string | null;
+    status?: string | null;
+};
+export type AgentChatLayoutModel = {
+    id: string;
+    label: string;
+};
+export type AgentChatLayoutAgent = {
+    name: string;
+    description?: string | null;
+    avatarUrl?: string | null;
+};
+export type AgentChatTargetSelector = {
+    helperText?: string;
+    label: string;
+    onApply: (value: string) => Promise<void> | void;
+    placeholder?: string;
+    value: string;
+};
+export type AgentChatLayoutSlots = {
+    assistantBody?: (input: {
+        isStreaming: boolean;
+        message: ChatMessage;
+    }) => React.ReactNode;
+    empty?: React.ReactNode;
+    headerActions?: React.ReactNode;
+    messageActions?: (message: ChatMessage) => React.ReactNode;
+    threadActions?: (thread: AgentChatLayoutThread) => React.ReactNode;
+};
+export type AgentChatLayoutProps = {
+    activeThreadId?: string | null;
+    agent: AgentChatLayoutAgent;
+    allowAttachments?: boolean;
+    className?: string;
+    connectionState?: AgentChatConnectionState;
+    dir?: "ltr" | "rtl";
+    errorMessage?: string | null;
+    hasMoreThreads?: boolean;
+    isDeletingThread?: boolean;
+    isLoadingOlder?: boolean;
+    isLoadingThreads?: boolean;
+    isRunning?: boolean;
+    messages: ChatMessage[];
+    modelId?: string | null;
+    models?: AgentChatLayoutModel[];
+    onDeleteThread?: (threadId: string) => Promise<void> | void;
+    onHitlAction?: (part: ChatHitlPart, action: string, comment?: string) => Promise<void> | void;
+    onLoadMoreThreads?: () => Promise<void> | void;
+    onLoadOlder?: () => Promise<void> | void;
+    onModelChange?: (modelId: string) => void;
+    onNewThread: () => void;
+    onOpenThread: (threadId: string) => Promise<void> | void;
+    onRetryConnection?: () => Promise<void> | void;
+    onStop?: () => void;
+    onSubmit: (message: AgentChatComposerSubmit) => Promise<void> | void;
+    placeholder?: string;
+    slots?: AgentChatLayoutSlots;
+    state?: AgentChatViewState;
+    streamingMessageId?: string | null;
+    targetSelector?: AgentChatTargetSelector;
+    threads: AgentChatLayoutThread[];
+    title?: string;
+};
+export declare function AgentChatStatePanel({ errorMessage, onRetry, state, }: {
+    errorMessage?: string | null;
+    onRetry?: () => Promise<void> | void;
+    state: Exclude<AgentChatViewState, "ready" | "streaming" | "paused">;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AgentChatLayout({ activeThreadId, agent, allowAttachments, className, connectionState, dir, errorMessage, hasMoreThreads, isDeletingThread, isLoadingOlder, isLoadingThreads, isRunning, messages, modelId, models, onDeleteThread, onHitlAction, onLoadMoreThreads, onLoadOlder, onModelChange, onNewThread, onOpenThread, onRetryConnection, onStop, onSubmit, placeholder, slots, state, streamingMessageId, targetSelector, threads, title, }: AgentChatLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/templates/agent-chat-shell.d.ts

@@ -34,4 +34,4 @@ export type AgentChatShellProps<TMessage extends AgentChatShellMessage> = {
 };
 export declare function getAgentChatShellScrollState(viewport: Pick<HTMLElement, "clientHeight" | "scrollHeight" | "scrollTop">): AgentChatShellScrollState;
 export declare function buildAgentChatOutlineItems<TMessage extends AgentChatShellMessage>(messages: TMessage[], getLabel?: (message: TMessage, index: number) => string, getResponsePreview?: (message: TMessage) => string): LatestThreadScrollerOutlineItem[];
-export declare function AgentChatShell<TMessage extends AgentChatShellMessage>({ className, composer, composerOverlayClassName, composerOverlayHeight, contentClassName, defaultComposerOverlayHeight, dir, emptyInputAttachmentCount, emptyTitle, hideComposer, isLoadingOlder, messages, onLoadOlder, onScrollStateChange, outlineItems, outlineSide, renderEmptyState, renderMessage, renderOlderLoader, }: AgentChatShellProps<TMessage>): React.JSX.Element;
+export declare function AgentChatShell<TMessage extends AgentChatShellMessage>({ className, composer, composerOverlayClassName, composerOverlayHeight, contentClassName, defaultComposerOverlayHeight, dir, emptyInputAttachmentCount, emptyTitle, hideComposer, isLoadingOlder, messages, onLoadOlder, onScrollStateChange, outlineItems, outlineSide, renderEmptyState, renderMessage, renderOlderLoader, }: AgentChatShellProps<TMessage>): import("react/jsx-runtime").JSX.Element;

package/dist/templates/appearance-control.d.ts

@@ -0,0 +1,5 @@
+export type AgentChatColorMode = "system" | "light" | "dark";
+export type AgentChatAppearanceControlProps = {
+    storageKey?: string;
+};
+export declare function AgentChatAppearanceControl({ storageKey, }: AgentChatAppearanceControlProps): import("react/jsx-runtime").JSX.Element;