@agents24/chat-react 0.5.0 → 0.5.2

package/dist/styles.css

@@ -1,292 +1,64 @@
 :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;
+:root[data-agents24-color-mode="light"],
+[data-agents24-theme-root] {
+  --a24-background: var(--background, #fff);
+  --a24-surface: var(--muted, #f7f7f8);
+  --a24-surface-hover: var(--accent, #efeff1);
+  --a24-text: var(--foreground, #18181b);
+  --a24-muted: var(--muted-foreground, #71717a);
+  --a24-border: var(--border, rgb(24 24 27 / 12%));
+  --a24-accent: var(--primary, #18181b);
+  --a24-accent-text: var(--primary-foreground, #fff);
+  --a24-danger: var(--destructive, #b42318);
+  --a24-focus: var(--ring, #71717a);
+  --a24-composer-radius: var(--radius-xl, .875rem);
+  --a24-composer-expanded-radius: var(--radius-xl, .875rem);
+  --a24-composer-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 1px 3px rgb(0 0 0 / 4%);
+  --a24-composer-mobile-shadow: var(--a24-composer-shadow);
+  --a24-message-enter-animation: none;
+}
+
+:root[data-agents24-color-mode="dark"],
+[data-agents24-theme-root].dark {
+  --a24-background: var(--background, #111113);
+  --a24-surface: var(--muted, #19191c);
+  --a24-surface-hover: var(--accent, #232328);
+  --a24-text: var(--foreground, #f4f4f5);
+  --a24-muted: var(--muted-foreground, #a1a1aa);
+  --a24-border: var(--border, rgb(244 244 245 / 14%));
+  --a24-accent: var(--primary, #f4f4f5);
+  --a24-accent-text: var(--primary-foreground, #18181b);
+  --a24-focus: var(--ring, #a1a1aa);
 }
 
 @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;
+    --a24-background: var(--background, #111113);
+    --a24-surface: var(--muted, #19191c);
+    --a24-surface-hover: var(--accent, #232328);
+    --a24-text: var(--foreground, #f4f4f5);
+    --a24-muted: var(--muted-foreground, #a1a1aa);
+    --a24-border: var(--border, rgb(244 244 245 / 14%));
+    --a24-accent: var(--primary, #f4f4f5);
+    --a24-accent-text: var(--primary-foreground, #18181b);
+    --a24-focus: var(--ring, #a1a1aa);
   }
 }
 
-[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 {
+.a24-scroller {
   display: flex;
   flex: 1;
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  min-width: 0;
+  overflow: hidden;
   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__viewport { flex: 1; height: 100%; min-height: 0; min-width: 0; overscroll-behavior: contain; overflow-y: auto; scrollbar-width: none; width: 100%; }
+.a24-scroller__viewport::-webkit-scrollbar { display: none; }
 .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__item { animation: var(--a24-message-enter-animation); flex: 0 0 auto; min-width: 0; overflow: visible; }
 .a24-scroller__button {
   align-items: center;
   appearance: none;
@@ -294,7 +66,7 @@
   border: 1px solid var(--a24-border);
   border-radius: 999px;
   bottom: 1rem;
-  box-shadow: 0 6px 18px rgba(0,0,0,.12);
+  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
   color: var(--a24-text);
   display: flex;
   font: inherit;
@@ -314,7 +86,7 @@
 .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__preview { background: var(--a24-background); border: 1px solid var(--a24-border); border-radius: .75rem; box-shadow: 0 8px 28px rgb(0 0 0 / 14%); color: var(--a24-text); max-height: 8rem; opacity: 0; overflow: hidden; padding: .75rem; pointer-events: none; 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; }
@@ -323,54 +95,23 @@
 .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-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; }
 
 .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__surface { background: var(--a24-background); border: 1px solid var(--a24-border); border-radius: var(--a24-composer-radius); box-shadow: var(--a24-composer-shadow); padding: .3rem .45rem; position: relative; width: 100%; }
+.a24-composer__surface:focus-within { border-color: var(--a24-border); box-shadow: var(--a24-composer-shadow); outline: 0; }
+.a24-composer__surface[data-expanded] { border-radius: var(--a24-composer-expanded-radius); 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 { 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__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; }
@@ -390,54 +131,91 @@
 .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__comment:focus-visible { border-color: var(--a24-border); outline: 2px solid var(--a24-focus); outline-offset: 2px; }
 .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-context-status { flex: 0 0 auto; position: relative; }
+.a24-context-status__trigger { align-items: center; appearance: none; background: transparent; border: 0; border-radius: .5rem; color: var(--a24-muted); cursor: pointer; display: inline-flex; font: inherit; font-size: .6875rem; font-variant-numeric: tabular-nums; gap: .375rem; height: 1.5rem; padding: 0 .5rem; }
+.a24-context-status__trigger:hover { background: var(--a24-surface-hover); color: var(--a24-text); }
+.a24-context-status__trigger:focus-visible { outline: 2px solid var(--a24-focus); outline-offset: 2px; }
+.a24-context-status__trigger > span { font-weight: 600; }
+.a24-context-status__ring { height: .875rem; transform: rotate(-90deg); width: .875rem; }
+.a24-context-status__track, .a24-context-status__value { fill: none; stroke-width: 2; }
+.a24-context-status__track { opacity: .25; stroke: currentColor; }
+.a24-context-status__value { opacity: .75; stroke: currentColor; stroke-linecap: round; }
+.a24-context-status__popover { background: #fff; border: 1px solid #e5e5e5; border-radius: .75rem; bottom: calc(100% + .5rem); box-shadow: 0 .5rem 1.25rem rgb(0 0 0 / 16%); color: #262626; display: flex; flex-direction: column; font-size: .75rem; gap: .125rem; inset-inline-end: 0; padding: .75rem; position: absolute; white-space: nowrap; width: max-content; z-index: 80; }
+.a24-context-status__popover strong { font-size: .875rem; font-weight: 600; }
+.a24-context-status__popover > span:not(.a24-context-status__sr-only) { color: #737373; }
+.dark .a24-context-status__popover, :root[data-agents24-color-mode="dark"] .a24-context-status__popover { background: #171717; border-color: #262626; color: #e5e5e5; }
+.dark .a24-context-status__popover > span:not(.a24-context-status__sr-only), :root[data-agents24-color-mode="dark"] .a24-context-status__popover > span:not(.a24-context-status__sr-only) { color: #a3a3a3; }
+.a24-context-status__sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
+.a24-tool-disclosure { min-width: 0; width: 100%; }
+.a24-tool-trigger-row { align-items: center; display: flex; gap: .35rem; min-width: 0; }
+.a24-tool-trigger { align-items: center; appearance: none; background: transparent; border: 0; color: var(--a24-muted); display: flex; font: inherit; font-size: .875rem; gap: .35rem; line-height: 1.35; min-width: 0; padding: .125rem 0; text-align: start; }
+button.a24-tool-trigger { border-radius: .5rem; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
+button.a24-tool-trigger:hover { color: var(--a24-text); }
+.a24-tool-trigger--root { background: transparent; border: 1px solid color-mix(in srgb, var(--a24-border) 55%, var(--a24-background)); border-radius: 9999px; padding: .3rem .5rem; }
+button.a24-tool-trigger--root { border-radius: 9999px; }
+button.a24-tool-trigger--root:hover { background: transparent; }
+.a24-tool-trigger--without-orb { padding-inline-start: .625rem; }
+button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); outline-offset: 2px; }
+.a24-tool-trigger--error { color: var(--a24-danger); }
+.a24-tool-orb { align-items: center; display: inline-flex; flex: 0 0 auto; height: 1.25rem; justify-content: center; width: 1.25rem; }
+.a24-tool-orb canvas { display: block; }
+.a24-tool-trigger__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a24-tool-trigger__chevron { flex: 0 0 auto; height: .75rem; opacity: 0; transition: opacity 140ms ease; width: .75rem; }
+.a24-tool-trigger:hover .a24-tool-trigger__chevron,
+.a24-tool-trigger:focus-visible .a24-tool-trigger__chevron { opacity: .7; }
+.a24-tool-disclosure__content { color: var(--a24-muted); font-size: .875rem; margin-top: .25rem; padding-inline-start: 1rem; }
+.a24-tool-list-frame { min-width: 0; position: relative; }
+.a24-tool-list-frame::before,
+.a24-tool-list-frame::after { content: ""; height: 1.25rem; inset-inline: 0 .25rem; opacity: 0; pointer-events: none; position: absolute; transition: opacity 140ms ease; z-index: 1; }
+.a24-tool-list-frame::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--a24-background) 86%, transparent), transparent); top: 0; }
+.a24-tool-list-frame::after { background: linear-gradient(to top, color-mix(in srgb, var(--a24-background) 86%, transparent), transparent); bottom: 0; }
+.a24-tool-list-frame[data-scroll-fade-top]::before,
+.a24-tool-list-frame[data-scroll-fade-bottom]::after { opacity: 1; }
+.a24-tool-list { max-height: 16rem; overscroll-behavior: contain; overflow-y: auto; padding-inline-end: .25rem; }
+.a24-tool-list > [role="listitem"] + [role="listitem"] { margin-top: .25rem; }
+.a24-tool-detail { color: var(--a24-muted); font-size: .8125rem; overflow-wrap: anywhere; padding: .25rem 0; }
+.a24-tool-detail--error,
+.a24-child-tool--error { color: var(--a24-danger); }
+.a24-child-tool { color: var(--a24-muted); display: flex; flex-direction: column; font-size: .8125rem; gap: .1rem; padding: .15rem 0; }
+.a24-child-tool__detail { opacity: .76; overflow-wrap: anywhere; }
+.a24-tool-shimmer { animation: a24-tool-shimmer 1.35s ease-in-out infinite; }
+.a24-tool-reel { display: inline-grid; min-width: 0; overflow: hidden; position: relative; vertical-align: bottom; }
+.a24-tool-reel > span { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.a24-tool-reel__previous { animation: a24-tool-reel-out 200ms ease-out both; }
+.a24-tool-reel__current { animation: a24-tool-reel-in 200ms ease-out both; }
+
+@keyframes a24-tool-shimmer {
+  0%, 100% { opacity: .55; }
+  50% { opacity: 1; }
+}
+@keyframes a24-tool-reel-in {
+  from { opacity: 0; transform: translateY(75%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes a24-tool-reel-out {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-75%); }
+}
+
+.a24-message-response { box-sizing: border-box; max-width: 100%; min-width: 0; padding-inline: 3px; width: 100%; }
+.a24-timeline-error { padding-inline: 3px; }
+.a24-chat-message { display: flex; flex-direction: column; gap: .5rem; min-width: 0; width: 100%; }
+.a24-chat-message--user { margin-inline-start: auto; max-width: 80%; }
+.a24-chat-message--assistant { max-width: 100%; }
+.a24-chat-message-content { display: flex; flex-direction: column; max-width: 100%; min-width: 0; }
+.a24-chat-message-content--user { align-self: flex-end; overflow: visible; width: fit-content; }
+.a24-chat-message-content--assistant { overflow: visible; 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; }
@@ -454,32 +232,9 @@
 .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%; }
+  .a24-composer__surface { box-shadow: var(--a24-composer-mobile-shadow); }
 }
 
 @media (min-width: 960px) {
@@ -487,7 +242,11 @@
 }
 
 @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; }
+  :is(.a24-scroller, .a24-outline, .a24-composer, .a24-hitl, .a24-tool-disclosure) *,
+  :is(.a24-scroller, .a24-outline, .a24-composer, .a24-hitl, .a24-tool-disclosure) *::before,
+  :is(.a24-scroller, .a24-outline, .a24-composer, .a24-hitl, .a24-tool-disclosure) *::after {
+    animation-duration: .01ms !important;
+    scroll-behavior: auto !important;
+    transition-duration: .01ms !important;
+  }
 }

package/dist/types.d.ts

@@ -1,18 +1,8 @@
-import type { HitlAction } from "@agents24/client";
-import type { ChatMessage, ChatPart, ChatToolPart } from "@agents24/react";
-import type { ReactNode } from "react";
+import type { HitlAction, HitlResponse } from "@agents24/client";
 export type * from "@agents24/react";
-export type { ChatAttachment, ChatHitlPart, ChatMessage, ChatPart, ChatToolPart, } from "@agents24/react";
+export type { ChatAttachment, ChatHitlPart, ChatMessage, ChatModelTurnPart, ChatNodeActivityPart, ChatPart, ChatToolPart, } from "@agents24/react";
 export type ChatHitlAction = HitlAction;
-export type ToolRenderer = (props: {
-    part: ChatToolPart;
-    message: ChatMessage;
-}) => ReactNode;
-export type Agents24ChatRenderOptions = {
-    renderPart?: (part: ChatPart, message: ChatMessage) => ReactNode;
-    toolRenderers?: Partial<Record<`tool-${string}`, ToolRenderer>>;
-    fallbackToolRenderer?: ToolRenderer;
-};
+export type ChatHitlResponse = HitlResponse;
 export type ChatMcpOauthCompletion = {
     code: string;
     connectionId?: string;

package/dist/ui/adapters.d.ts

@@ -11,7 +11,7 @@ export declare function ChatMessage(input: ChatMessageProps): React.ReactElement
 export type ChatMessageContentProps = React.ComponentProps<"div"> & {
     from?: ChatMessageRole;
 };
-export declare function ChatMessageContent({ className, ...props }: ChatMessageContentProps): React.ReactElement;
+export declare function ChatMessageContent({ className, from, ...props }: ChatMessageContentProps): React.ReactElement;
 export type ChatMessageActionsProps = React.ComponentProps<"div">;
 export declare function ChatMessageActions({ className, ...props }: ChatMessageActionsProps): React.ReactElement;
 export type ChatMessageActionProps = React.ComponentProps<"button"> & {