@artooi/ag-ui-web-component 0.46.0 → 0.48.0

package/src/ui/history/conversation_history.ts

@@ -9,6 +9,7 @@ import type {
   ClientConversationStore,
   NavigationCheckpoint,
 } from "../../core/conversation_store.js";
+import type { ThreadDetail } from "../../core/events/thread_detail.js";
 import type { MessageRole } from "../../core/message_role.js";
 import { RunIndex } from "../../core/run_index.js";
 import { toolStatusFromOutcome } from "../../core/tool_outcome.js";
@@ -119,6 +120,11 @@ export interface ConversationHistoryHost {
   readonly resetState: () => void;
   /** Swap the composer between Send and Stop, which the composer owns. */
   readonly setRunning: (running: boolean) => void;
+  /**
+   * Say the conversation on screen changed, once its transcript is replaced.
+   * The element fills in the thread it replaced, which it last reported.
+   */
+  readonly threadChanged: (threadId: string, reason: ThreadDetail["reason"]) => void;
 }
 
 /**
@@ -210,6 +216,8 @@ export class ConversationHistory {
    * Also what tells a pick refused for a load from one refused for a run.
    */
   #loading: (() => void) | null = null;
+  /** The thread switch under way and the promise that settles it, or `null`. */
+  #switching: { readonly threadId: string; readonly done: Promise<void> } | null = null;
 
   constructor(host: ConversationHistoryHost) {
     this.#host = host;
@@ -325,17 +333,56 @@ export class ConversationHistory {
     this.#host.checkpoints.open();
   }
 
-  /** Switch the active conversation to an existing thread and replay it. */
-  async switchThread(threadId: string): Promise<void> {
+  /**
+   * Switch the active conversation to an existing thread and replay it.
+   *
+   * A call for the thread a switch is already loading is handed that switch's
+   * own promise, so it settles when the thread is drawn rather than at once,
+   * before the replay.
+   *
+   * A store that rejects the load leaves the element on the thread it was on:
+   * the switch has already cleared the transcript, so it points back at the
+   * old thread and draws it again, saying nothing, and then rejects with the
+   * store's error. Left as it was, the element named a thread it was not
+   * showing and never reported it.
+   */
+  switchThread(threadId: string): Promise<void> {
     if (threadId === this.#threadId) {
-      return;
+      return this.#switching?.threadId === threadId ? this.#switching.done : Promise.resolve();
     }
+    const previous = this.#threadId;
+    const done = this.#switchTo(threadId, previous).finally(() => {
+      if (this.#switching === entry) {
+        this.#switching = null;
+      }
+    });
+    const entry = { threadId, done };
+    this.#switching = entry;
+    return done;
+  }
+
+  async #switchTo(threadId: string, previous: string): Promise<void> {
     this.#host.cancelRun();
     this.#host.resetState();
     this.#host.conversationStore().setActiveThread(threadId);
     this.#threadId = threadId;
     this.#host.setRunning(false);
-    await this.rehydrate();
+    try {
+      await this.rehydrate("switch");
+    } catch (error) {
+      // Only while this switch is still the one on screen: a newer switch, a
+      // new chat or a delete has moved the thread on, and undoing that would
+      // put the old one back over it.
+      if (this.#threadId === threadId) {
+        this.#threadId = previous;
+        this.#host.conversationStore().setActiveThread(previous);
+        // Drawn again without a word: the thread on screen is the one the last
+        // event reported, so there is nothing to tell a host. A store that
+        // cannot answer for it either leaves the screen as it is.
+        await this.rehydrate(null).catch(() => undefined);
+      }
+      throw error;
+    }
   }
 
   /** Rename a thread, then reload the list that shows its title. */
@@ -355,6 +402,8 @@ export class ConversationHistory {
       this.#host.resetState();
       this.adoptActiveThread();
       this.#host.setRunning(false);
+      // No replay to wait for: the thread that took its place is a fresh one.
+      this.#host.threadChanged(this.#threadId, "delete");
     }
     void this.refreshDrawer();
   }
@@ -628,8 +677,12 @@ export class ConversationHistory {
    * for the run it would have resumed -- unless what replaced it is a restore
    * of the same conversation, still current, which answers for that run
    * instead; see `#forgetStopped`.
+   *
+   * `reason` is what the thread event this restore ends with reports as why
+   * the conversation changed. A restore that is stopped reports nothing, and
+   * neither does one given `null`, which draws the thread already reported.
    */
-  async rehydrate(): Promise<void> {
+  async rehydrate(reason: ThreadDetail["reason"] | null): Promise<void> {
     // Claimed before awaiting, and checked by `#restoring` wherever the restore
     // has waited or run host code. With a slow remote store, picking thread B
     // then C interleaved both replays into one transcript, and New chat drew
@@ -727,11 +780,26 @@ export class ConversationHistory {
           }
         }
       }
+      if (checkpoint === null) {
+        this.#noticeIfRunUnfinished(messages);
+      }
+      // Said once the transcript is the restored one, and only by a restore
+      // still current: one that was stopped returned above, so two quick
+      // switches report the second alone. Before a resume, because the resume
+      // is a run, and waiting for it reported the change a whole answer late.
+      if (reason !== null) {
+        this.#host.threadChanged(threadId, reason);
+      }
       if (checkpoint !== null) {
+        // A listener is host code, and can stop the restore as a replayed
+        // renderer can. Resuming then answered the call into the conversation
+        // that replaced it, and left the checkpoint for a later visit to resume.
+        if (!this.#restoring(generation)) {
+          this.#forgetStopped(store, threadId, checkpoint);
+          return;
+        }
         await this.#resumeFrom(checkpoint, generation);
-        return;
       }
-      this.#noticeIfRunUnfinished(messages);
     } finally {
       // The resumed run starting has let go of the hold already, as a send's
       // does, and a request that then fails still started one: the client

package/src/ui/placement/collapse_styles.ts

@@ -1,5 +1,6 @@
-// Collapsing and expanding: the animation toward the launcher, and the
-// in-flow and page placements that collapse differently or not at all.
+// Collapsing and expanding: the animation toward the launcher, the in-flow
+// and page placements that collapse differently or not at all, and the two
+// collapse-to targets: the bottom bar, and the host's own (hidden here).
 export const COLLAPSE_STYLES: string = `
 /* ── Collapse ───────────────────────────────────────────────────────────────
    Collapsing shrinks the widget to the round floating launcher: the panel
@@ -101,12 +102,18 @@ export const COLLAPSE_STYLES: string = `
 :host([collapsed][placement="embedded"]) .messages-wrap,
 :host([collapsed][placement="embedded"]) .messages,
 :host([collapsed][placement="embedded"]) .input-row,
+:host([collapsed][placement="embedded"]) slot[name="above-composer"],
 :host([collapsed][placement="embedded"]) .skill-chips,
 :host([collapsed][placement="embedded"]) .skill-palette,
 :host([collapsed][placement="embedded"]) .skill-hint {
   display: none;
 }
 
+/* The above-composer slot is in the list above because it is the host's content
+   against the composer: a bare slot has no box of its own, so hiding the input
+   row alone left the slotted row showing under the header bar. Its sibling slot
+   below the composer is a footer and is left to the host. */
+
 /* The page placement has no collapsed state, so it offers no control for one.
    A dedicated route has no "away" to go to: shrinking it left a strip of
    application chrome fixed over a route that no longer had an owner, and this
@@ -134,4 +141,243 @@ export const COLLAPSE_STYLES: string = `
   transform: none;
   visibility: visible;
 }
+
+/* ── Bottom bar (collapse-to="bar") ──────────────────────────────────────────
+   The round launcher drawn as a strip along the bottom edge: the title, the
+   unread badge and a running mark, with a history button beside it. The
+   wrapper draws no box anywhere else, so the launcher lays out against the
+   host as it always has; under the bar it is fixed to the bottom of the
+   viewport, outside the host's box, which sits where the panel opens.
+
+   Here rather than with the launcher because it restyles the launcher's
+   collapsed and pressed states, which this module follows in the cascade.
+   The strip stays drawn while the panel is open on a wide viewport, as the
+   way to minimise it; the phone block hides it then. */
+.dock-bar {
+  display: contents;
+}
+
+.bar-history {
+  display: none;
+}
+
+:host([data-collapsed-to="bar"]) .dock-bar {
+  position: fixed;
+  inset: auto var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: 4px 8px;
+  border-top: 1px solid var(--_border);
+  background: var(--_bg);
+  color: var(--_fg);
+  pointer-events: auto;
+}
+
+/* A left-hand chat keeps its side: its controls and its panel at the left end. */
+:host([data-collapsed-to="bar"][placement="bottom-left"]) .dock-bar {
+  justify-content: flex-start;
+}
+
+/* The launcher as the strip's title button. Its resting state hides it behind
+   an open panel; the bar keeps it on screen, so every part of that state is
+   restated, and the hover and press scales are cancelled at the weight of the
+   rules that set them. The title truncates rather than taking a fixed width,
+   leaving room beside it for whatever a later release adds to the row. */
+:host([data-collapsed-to="bar"]) .launcher {
+  position: static;
+  inset: auto;
+  flex: 0 1 auto;
+  justify-content: flex-start;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  height: auto;
+  min-height: 32px;
+  padding: 4px 10px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--_fg);
+  box-shadow: none;
+  touch-action: manipulation;
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+
+:host([data-collapsed-to="bar"]) .launcher:hover {
+  background: var(--_wash);
+}
+
+/* Bare at rest, like the history button beside it. The themes frame the
+   round launcher with a border or a shadow at the weight of the rule above
+   and later in the cascade, so the child combinator on the bar is there for
+   weight, not scope: the launcher is always the bar's direct child. */
+:host([data-collapsed-to="bar"]) .dock-bar > .launcher {
+  border: 0;
+  box-shadow: none;
+}
+
+:host([data-collapsed-to="bar"][collapsed]) .launcher:hover,
+:host([data-collapsed-to="bar"][collapsed]) .launcher:active {
+  transform: none;
+}
+
+:host([data-collapsed-to="bar"]) .launcher .icon-holder {
+  flex: none;
+  width: 18px;
+  height: 18px;
+}
+
+:host([data-collapsed-to="bar"]) .rail-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.9em;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:host([data-collapsed-to="bar"]) .launcher-badge {
+  position: static;
+  flex: none;
+  box-shadow: none;
+}
+
+/* The running mark: the element already reflects a run as data-running, so
+   the bar shows one without a state of its own. */
+:host([data-collapsed-to="bar"][data-running]) .launcher::after {
+  content: "";
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--_accent);
+  animation: ag-ui-dock-running 1.2s ease-in-out infinite;
+}
+
+@keyframes ag-ui-dock-running {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([data-collapsed-to="bar"][data-running]) .launcher::after {
+    animation: none;
+  }
+}
+
+:host([data-collapsed-to="bar"]) .bar-history {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--_muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+:host([data-collapsed-to="bar"]) .bar-history:hover {
+  background: var(--_wash);
+  color: var(--_fg);
+}
+
+/* Both declare a display of their own, so each needs its own hidden rule. */
+:host([data-collapsed-to]) .dock-bar[hidden],
+:host([data-collapsed-to]) .bar-history[hidden] {
+  display: none;
+}
+
+/* History from the bar: the panel's own drawer, moved beside the bar while
+   the panel is away, drawn as a popover standing on the bar's end. There is
+   no backdrop; a press outside the bar closes it, as Escape does.
+
+   Its outer edge keeps the panel's gutter, so the popover and the panel line
+   up on the side they share. The bar is already inset by the host's reserved
+   edges, so the gutter alone is the whole offset from it, and the width cap
+   leaves the gutter free on both sides. A phone keeps a narrow margin
+   instead, in the block below: the panel there is the whole screen, so there
+   is no edge to line up with. */
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer {
+  inset: auto var(--_edge-gutter) calc(100% + 8px) auto;
+  width: min(320px, calc(var(--_viewport-width) - 2 * var(--_edge-gutter)));
+  height: min(440px, calc(var(--_viewport-height) - var(--_dock-bottom, 0px) - 16px));
+  border-radius: var(--_panel-radius);
+  box-shadow: var(--_shadow);
+  overflow: hidden;
+}
+
+:host([data-collapsed-to="bar"][placement="bottom-left"]) .dock-bar > .drawer {
+  inset: auto auto calc(100% + 8px) var(--_edge-gutter);
+}
+
+@media (max-width: 600px) {
+  :host([data-collapsed-to="bar"]:not([data-small-viewport="off"])) .dock-bar > .drawer {
+    inset: auto 8px calc(100% + 8px) auto;
+    width: min(320px, calc(100vw - 16px));
+  }
+
+  :host([data-collapsed-to="bar"][placement="bottom-left"]:not([data-small-viewport="off"])) .dock-bar > .drawer {
+    inset: auto auto calc(100% + 8px) 8px;
+  }
+}
+
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer .drawer-backdrop {
+  display: none;
+}
+
+/* The popover closes in one step. The in-panel drawer slides its panel out
+   and holds the overlay's visibility until the slide ends; here the overlay
+   is the popover's own box, rounded and clipped, so the slide moved the list
+   inside a box that stayed put (read as a shrink) and the box went only once
+   the slide had finished. This outweighs the drawer's own hidden rule, so the
+   box hides at once, and whatever the list inside does is out of sight. The
+   way in needs no rule: the drawer is moved into the bar as it opens, and a
+   moved element starts no transition. Nothing is left for reduced motion. */
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer {
+  transition: none;
+}
+
+/* Border-box, so the list's own border sits inside the popover's clipped box
+   rather than 2px past its bottom edge. */
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer .drawer-panel {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--_border);
+  border-radius: inherit;
+  box-shadow: none;
+}
+
+/* ── The host's own bar (collapse-to="none") ─────────────────────────────────
+   Collapsed is hidden: no launcher, no rail, no header bar. The host's control
+   calls the public API, and the panel rises from its anchor (the dock module)
+   or from the placement's corner. Each placement's own collapsed rule is
+   overridden at its weight or above, later in the cascade. */
+:host([data-collapsed-to="none"][collapsed]) {
+  pointer-events: none;
+}
+
+:host([data-collapsed-to="none"][collapsed]) .launcher {
+  display: none;
+}
+
+:host([data-collapsed-to="none"][collapsed][placement="sidebar"]) {
+  width: 0;
+}
+
+:host([data-collapsed-to="none"][collapsed][placement="embedded"]) {
+  display: none;
+}
 `;

package/src/ui/placement/dock_styles.ts

@@ -0,0 +1,91 @@
+// Where a docked panel stands: above the bottom bar under collapse-to="bar",
+// above the host's anchor under collapse-to="none". Token restatements only;
+// the bar's own shape is in the collapse module, after the launcher it
+// restyles.
+export const DOCK_STYLES: string = `
+/* ── Dock ────────────────────────────────────────────────────────────────────
+   A docked panel rises from the bar along the bottom edge, or from the host's
+   own control, instead of resting in a corner of its own. The element stamps
+   what it collapses to as data-collapsed-to, and writes where the dock is as
+   two private properties: --_dock-bottom, the bar's height or the distance
+   from the layout viewport's bottom to the anchor's top, and --_dock-right,
+   the anchor's distance from the right edge. Both are read with a 0px
+   fallback, so a panel measured before the bar has laid out stands where a
+   bar of no height would put it.
+
+   The cap follows the token block's rule: what the host left free less the
+   one gutter the anchored edge spends, so a panel grown to the cap runs from
+   just above the bar to the far edge. A host therefore needs no inset to keep
+   the panel off its bar; --ag-ui-inset still wins when set.
+
+   These blocks restate tokens and nothing else, and sit ahead of the phone
+   block at no more weight than it has, so on a phone the panel is the screen
+   as every other placement is there. The bar measures 0 while it is not drawn
+   (a phone with the panel open), which is what lets the side and full shapes
+   below fall back to the whole height without a phone rule of their own.
+
+   Each placement keeps its own side and shape; only the bottom edge moves. */
+:host([data-collapsed-to="bar"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    auto calc(var(--_edge-gutter) + var(--_viewport-inset-right))
+      calc(
+        var(--_edge-gutter) + var(--_viewport-inset-bottom) +
+          max(var(--_dock-bottom, 0px), var(--_keyboard-inset))
+      )
+      auto
+  );
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px) - var(--_edge-gutter)));
+}
+
+:host([data-collapsed-to="bar"][placement="bottom-left"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    auto auto
+      calc(
+        var(--_edge-gutter) + var(--_viewport-inset-bottom) +
+          max(var(--_dock-bottom, 0px), var(--_keyboard-inset))
+      )
+      calc(var(--_edge-gutter) + var(--_viewport-inset-left))
+  );
+}
+
+/* The column and the full-screen panel stop at the bar rather than covering
+   it, so the bar stays where the user minimises from. */
+:host([data-collapsed-to="bar"][placement="side"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      calc(var(--_viewport-inset-bottom) + var(--_dock-bottom, 0px)) auto
+  );
+  --_height: var(--ag-ui-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+}
+
+:host([data-collapsed-to="bar"][placement="full"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      calc(var(--_viewport-inset-bottom) + var(--_dock-bottom, 0px)) var(--_viewport-inset-left)
+  );
+  --_height: var(--ag-ui-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+}
+
+/* The host's own bar: the panel stands the anchor gap (8px unless the host
+   says otherwise) above the anchor and lines up with its right edge. Only
+   once the element found the anchor; until then, and when it never does, the
+   placement's own corner stands.
+
+   The cap spends the larger of the gap and the gutter. The gutter alone is
+   what this always spent, so the default is unchanged; but a host that opens
+   the gap past the gutter to clear a tall toolbar would otherwise push a
+   panel grown to the cap off the top of the window by the difference. */
+:host([data-collapsed-to="none"][data-dock-anchored]) {
+  --_inset: var(--ag-ui-inset, auto var(--_dock-right, 0px) calc(var(--_dock-bottom, 0px) + var(--_anchor-gap)) auto);
+  --_max-height: var(
+    --ag-ui-max-height,
+    calc(var(--_viewport-height) - var(--_dock-bottom, 0px) - max(var(--_edge-gutter), var(--_anchor-gap)))
+  );
+}
+`;

package/src/ui/placement/embedded_styles.ts

@@ -4,8 +4,8 @@ export const EMBEDDED_STYLES: string = `
    the widget lives in the host's own layout (fixes overlay/z-index clashes). */
 :host([placement="embedded"]) {
   --_position: var(--ag-ui-position, static);
-  --_width: var(--ag-ui-width, 100%);
-  --_height: var(--ag-ui-height, 100%);
+  --_width: var(--_drag-width, var(--ag-ui-width, 100%));
+  --_height: var(--_drag-height, var(--ag-ui-height, 100%));
   --_max-width: var(--ag-ui-max-width, 100%);
   --_max-height: var(--ag-ui-max-height, 100%);
   --_shadow: var(--ag-ui-shadow, none);