@syntrologie/adapt-chatbot 2.28.0 → 2.29.0

package/dist/chunk-FXHYE6FY.js

@@ -0,0 +1,632 @@
+import {
+  getElementInstanceStore
+} from "./chunk-EWPPVPJ4.js";
+import {
+  createDictation,
+  isDictationSupported
+} from "./chunk-VZIUXXAM.js";
+
+// src/AdaptiveChatBar.ts
+import { html, LitElement, nothing, svg } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/personas.ts
+var STORAGE_KEY = "syntro:persona";
+function pickPersona(roster) {
+  if (!Array.isArray(roster) || roster.length === 0) return null;
+  let storedId = null;
+  try {
+    storedId = localStorage.getItem(STORAGE_KEY);
+  } catch {
+  }
+  const stored = storedId ? roster.find((p) => p.id === storedId) : void 0;
+  if (stored) return stored;
+  const pick = roster[Math.floor(Math.random() * roster.length)];
+  try {
+    localStorage.setItem(STORAGE_KEY, pick.id);
+  } catch {
+  }
+  return pick;
+}
+
+// src/AdaptiveChatBar.ts
+var DEFAULT_PLACEHOLDER = "Ask, find, or navigate\u2026";
+var DEFAULT_ASSISTANT_NAME = "Assistant";
+var AdaptiveChatBar = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.messages = [];
+    this.maximized = false;
+    this.tileReceipts = [];
+    /** Widgets rendered inline in the trail (reco carousel), sourced from
+     *  the store's `chat-inline` slot mounts. Forwarded to the trail. */
+    this.inlineWidgets = [];
+    /** Registry-backed mounter for inline widgets whose id is not their
+     *  custom-element tag (product card, comparison, FAQ). Set by the
+     *  mountable from `runtime.widgets`; forwarded to the trail. */
+    this.mountInlineWidget = void 0;
+    /**
+     * Live reasoning narration from the model — streamed in via
+     * AG-UI THINKING_TEXT_MESSAGE_CONTENT events and forwarded by
+     * the ChatSession subscription on the host (mountable).
+     * Forwarded verbatim to the trail, which renders it in place of
+     * the silent loading dots between turns. Empty string when no
+     * thinking turn is active.
+     */
+    this.thinkingText = "";
+    /**
+     * Pre-conversation suggestion button — forwarded to the trail's
+     * empty-state pane. When the visitor clicks it the trail emits
+     * `trail-intro-suggestion`; we catch that here and submit the
+     * configured prompt through the normal send path.
+     */
+    this.introSuggestion = void 0;
+    /** Pass-through to {@link AdaptiveChatTrail}'s ``forceExpanded`` prop.
+     *  Hosts that mount the chat-bar in a full-screen surface (mobile
+     *  panel, agent app, etc.) set this to skip the collapse affordance
+     *  — there is no smaller state to fall back to. */
+    this.forceExpanded = false;
+    this.placeholder = DEFAULT_PLACEHOLDER;
+    /**
+     * Name shown in the (forceExpanded) header. Defaults to a generic
+     * "Assistant". Hosts can override per-workspace (e.g. Vela sets
+     * "Vela Concierge") without inventing new SDK surface — it threads
+     * through the same mount config the placeholder does.
+     */
+    this.assistantName = DEFAULT_ASSISTANT_NAME;
+    /** Persona roster from config (FEAT-1784917430); one is sticky-assigned. */
+    this.personas = null;
+    /** @internal — the visitor's sticky persona, resolved from the roster. */
+    this._persona = null;
+    /**
+     * Initial assistant message shown before any real conversation
+     * starts. Renders inside the trail as a phantom assistant chip
+     * when messages.length === 0; auto-disappears as soon as the
+     * first user message lands. Mirrors ChatAssistantLit's greeting.
+     */
+    this.greeting = void 0;
+    /**
+     * Whether a chat round-trip is in flight (request sent, awaiting
+     * reply). The single send/stop button morphs accordingly: ↑ when
+     * ready, ⏹ when in-flight. Parent owns this state — set true after
+     * `chat-message-sent` fires, false when the reply lands or the
+     * request is aborted. Enter is inert while in-flight.
+     */
+    this.inFlight = false;
+    /** Show a dictation mic when the Web Speech API is available. Config-gated, default off. */
+    this.voiceInput = false;
+    this._input = "";
+    this._micListening = false;
+    this._micDisabled = false;
+    this._micBase = "";
+    this._micNetworkErrors = 0;
+    this._dictation = null;
+    /** True while focus is inside the composer row — drives the accent
+     *  focus ring so the active text-entry surface is unmistakable on any
+     *  theme (the idle pill is deliberately subtle). */
+    this._composerFocused = false;
+    // Host-level styling (display, width, height, flex, etc.) is owned
+    // by the container — SDK shadow root provides default rules, panel
+    // overrides via design tokens (--sc-chat-bar-host-*). This adaptive
+    // never sets inline styles on itself. See SmartCanvasElementLit's
+    // static styles for the rule.
+    this._onInput = (e) => {
+      if (this._micListening) this._dictation?.stop();
+      this._input = e.target.value;
+    };
+    this._onMicClick = () => {
+      if (this._micListening) {
+        this._dictation?.stop();
+        return;
+      }
+      this._micBase = this._input;
+      this._dictation = createDictation({
+        onTranscript: (text) => {
+          this._micNetworkErrors = 0;
+          this._input = this._micBase + (this._micBase ? " " : "") + text;
+        },
+        onEnd: () => {
+          this._micListening = false;
+        },
+        onError: (code) => {
+          this._micListening = false;
+          if (code === "not-allowed") this._micDisabled = true;
+          if (code === "network" && ++this._micNetworkErrors >= 2) this._micDisabled = true;
+        }
+      });
+      this._dictation.start();
+      this._micListening = this._dictation.listening;
+    };
+    this._onKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        if (this.inFlight) return;
+        this._send();
+      }
+    };
+    // Single button. Click delegates to send-or-interrupt based on
+    // current state. Same DOM node, different behavior — discoverability
+    // wins from the user not having to scan for which control is active.
+    this._onSendOrInterrupt = () => {
+      if (this.inFlight) {
+        this._queuedSuggestedReply = null;
+        this.dispatchEvent(new CustomEvent("chat-interrupt", { bubbles: true, composed: true }));
+        return;
+      }
+      this._send();
+    };
+    this._onTileReceiptActivate = (e) => {
+      const { instanceId } = e.detail;
+      getElementInstanceStore()?.recreate(instanceId);
+      this.dispatchEvent(
+        new CustomEvent("tile-recall", { detail: { instanceId }, bubbles: true, composed: true })
+      );
+    };
+    this._onAlertReceiptActivate = (e) => {
+      const { instanceId } = e.detail;
+      this.dispatchEvent(
+        new CustomEvent("alert-recall", { detail: { instanceId }, bubbles: true, composed: true })
+      );
+    };
+    this._onComposerFocusIn = () => {
+      this._composerFocused = true;
+    };
+    this._onComposerFocusOut = () => {
+      this._composerFocused = false;
+    };
+    this._onMaximizeToggle = () => {
+      this.dispatchEvent(new CustomEvent("chat-maximize-toggle", { bubbles: true, composed: true }));
+    };
+    /**
+     * Visitor tapped the intro suggestion button in the empty-state
+     * trail. Submit the configured prompt through the same channel as
+     * a typed message so listeners (mountable → chatSession.send) see
+     * a uniform shape — no need for a parallel "suggestion-sent" path.
+     * The trail's intro pane auto-disappears the moment the first
+     * message lands, so this also closes the empty state in one go.
+     */
+    this._onIntroSuggestion = (e) => {
+      const detail = e.detail;
+      if (!detail?.prompt) return;
+      e.stopPropagation();
+      if (this.inFlight) return;
+      this.inFlight = true;
+      this.dispatchEvent(
+        new CustomEvent("chat-message-sent", {
+          detail: { text: detail.prompt },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    /**
+     * Reply-chip tap that arrived during the run TAIL. Chips render the
+     * moment the reply text lands, but `inFlight` (which includes
+     * `runActive` — typing events, tool tail, RUN_FINISHED) can lag for
+     * seconds. The old `if (this.inFlight) return;` guard silently ATE
+     * those taps — the visitor's chosen reply never appeared as their
+     * message (live repro, deployed vela 2026-07-08). Now the tap queues
+     * (latest wins) and dispatches when `inFlight` clears.
+     */
+    this._queuedSuggestedReply = null;
+    /**
+     * Visitor tapped an inline `suggest_replies` chip in the trail. Submit
+     * the chip text through the SAME `chat-message-sent` channel a typed
+     * message uses, so the reply rides the existing send path (mountable →
+     * chatSession.send → transport) — no fabricated AG-UI events. The
+     * trail clears the chips on its own once the reply lands and a newer
+     * assistant turn becomes the latest.
+     *
+     * A tap while the previous run is still closing is QUEUED, never
+     * dropped — see `_queuedSuggestedReply`.
+     */
+    this._onSuggestedReply = (e) => {
+      const detail = e.detail;
+      if (!detail?.text) return;
+      e.stopPropagation();
+      if (this.inFlight) {
+        this._queuedSuggestedReply = detail.text;
+        return;
+      }
+      this.inFlight = true;
+      this.dispatchEvent(
+        new CustomEvent("chat-message-sent", {
+          detail: { text: detail.text },
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("tile-receipt-activate", this._onTileReceiptActivate);
+    this.addEventListener("alert-receipt-activate", this._onAlertReceiptActivate);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("tile-receipt-activate", this._onTileReceiptActivate);
+    this.removeEventListener("alert-receipt-activate", this._onAlertReceiptActivate);
+  }
+  _send() {
+    if (this._micListening) this._dictation?.stop();
+    const text = this._input.trim();
+    if (!text) return;
+    this._queuedSuggestedReply = null;
+    this.dispatchEvent(
+      new CustomEvent("chat-message-sent", {
+        detail: { text },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this._input = "";
+    const input = this.querySelector("input[data-chat-input]");
+    if (input) input.value = "";
+  }
+  willUpdate(changed) {
+    super.willUpdate?.(changed);
+    if (changed.has("personas")) {
+      this._persona = pickPersona(this.personas);
+    }
+    if (changed.has("inFlight") && changed.get("inFlight") === true && !this.inFlight && this._queuedSuggestedReply) {
+      const text = this._queuedSuggestedReply;
+      this._queuedSuggestedReply = null;
+      this.inFlight = true;
+      this.dispatchEvent(
+        new CustomEvent("chat-message-sent", {
+          detail: { text },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  render() {
+    return html`
+      <div style=${styleMap(rootStyles(this.forceExpanded))}>
+        ${this.forceExpanded ? renderHeader(this.assistantName, this._persona) : nothing}
+        <adaptive-chat-trail
+          .messages=${this.messages}
+          .greeting=${this._persona?.intro_line ?? this.greeting}
+          .forceExpanded=${this.forceExpanded}
+          .inFlight=${this.inFlight}
+          .thinkingText=${this.thinkingText}
+          .personaName=${this._persona?.name ?? ""}
+          .personaAvatarSm=${this._persona?.avatar?.sm ?? ""}
+          .introSuggestion=${this.introSuggestion}
+          .tileReceipts=${this.tileReceipts}
+          .inlineWidgets=${this.inlineWidgets}
+          .mountInlineWidget=${this.mountInlineWidget}
+          @trail-intro-suggestion=${this._onIntroSuggestion}
+          @trail-suggested-reply=${this._onSuggestedReply}
+        ></adaptive-chat-trail>
+        <div
+          style=${styleMap(rowStyles(this.forceExpanded, this._composerFocused))}
+          data-chat-row
+          @focusin=${this._onComposerFocusIn}
+          @focusout=${this._onComposerFocusOut}
+        >
+          <button
+            type="button"
+            data-chat-maximize
+            @click=${this._onMaximizeToggle}
+            aria-label=${this.maximized ? "Exit full screen" : "Maximize chat"}
+            title=${this.maximized ? "Exit full screen" : "Maximize"}
+            aria-pressed=${this.maximized ? "true" : "false"}
+            style=${styleMap(maximizeStyles(this.maximized))}
+          >${this.maximized ? MINIMIZE_ICON : MAXIMIZE_ICON}</button>
+          <input
+            data-chat-input
+            type="text"
+            placeholder=${this._micListening ? "Listening \u2014 tap the mic to stop" : this.placeholder}
+            .value=${this._input}
+            @input=${this._onInput}
+            @keydown=${this._onKeyDown}
+            style=${styleMap(inputStyles())}
+            aria-label="Chat input"
+          />
+          ${this.voiceInput && isDictationSupported() ? html`${MIC_RING_STYLES}<button
+                  type="button"
+                  data-chat-mic
+                  data-listening=${this._micListening ? "true" : "false"}
+                  ?disabled=${this._micDisabled}
+                  @click=${this._onMicClick}
+                  aria-pressed=${this._micListening ? "true" : "false"}
+                  aria-label=${this._micListening ? "Stop dictation" : "Start dictation"}
+                  title=${this._micDisabled ? "Microphone blocked" : this._micListening ? "Stop dictation" : "Dictate"}
+                  style=${styleMap(micStyles(this._micListening, this._micDisabled))}
+                >${MIC_ICON}</button>` : nothing}
+          <button
+            type="button"
+            data-chat-send
+            data-state=${this.inFlight ? "in-flight" : "ready"}
+            @click=${this._onSendOrInterrupt}
+            aria-label=${this.inFlight ? "Stop" : "Send message"}
+            title=${this.inFlight ? "Interrupt" : "Send"}
+            style=${styleMap(sendStyles(this.inFlight))}
+          >${this.inFlight ? "\u25A0" : "\u2191"}</button>
+        </div>
+      </div>
+    `;
+  }
+};
+AdaptiveChatBar.properties = {
+  personas: { attribute: false },
+  _persona: { state: true },
+  messages: { attribute: false },
+  placeholder: { type: String },
+  assistantName: { type: String },
+  greeting: { type: String },
+  inFlight: { type: Boolean, reflect: true },
+  thinkingText: { attribute: false },
+  introSuggestion: { attribute: false },
+  forceExpanded: { type: Boolean, reflect: true },
+  maximized: { type: Boolean },
+  tileReceipts: { attribute: false },
+  inlineWidgets: { attribute: false },
+  mountInlineWidget: { attribute: false },
+  voiceInput: { type: Boolean },
+  _input: { state: true },
+  _composerFocused: { state: true },
+  _micListening: { state: true },
+  _micDisabled: { state: true }
+};
+function rootStyles(forceExpanded) {
+  if (!forceExpanded) {
+    return {
+      display: "flex",
+      flexDirection: "column",
+      gap: "6px",
+      width: "100%",
+      pointerEvents: "auto"
+    };
+  }
+  return {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    width: "100%",
+    height: "100%",
+    boxSizing: "border-box",
+    flex: "1 1 auto",
+    minHeight: "0",
+    overflow: "hidden",
+    pointerEvents: "auto",
+    background: "var(--sc-tile-background, rgba(255, 255, 255, 0.92))",
+    border: "var(--sc-tile-border, 1px solid rgba(0, 0, 0, 0.06))",
+    borderRadius: "var(--sc-tile-border-radius, 14px)",
+    boxShadow: "var(--sc-tile-shadow, 0 12px 32px -16px rgba(0, 0, 0, 0.18))",
+    // Reserves room for the absolute-positioned input pill (36px high
+    // + 12px from bottom) plus a 16px visual gap above the input.
+    padding: "0.75rem 0.75rem calc(36px + 1.75rem)",
+    color: "var(--sc-tile-title-color, inherit)",
+    fontFamily: "var(--sc-font-family, inherit)",
+    // Override the trail's host-layout tokens so the trail (a flex item
+    // of this column) fills a definite-height parent AND contributes its
+    // content height in an indefinite one. basis AUTO (not 0) is
+    // load-bearing: grow:1 still fills a full-screen panel, but basis auto
+    // also lets the trail's content height propagate up the fill chain so a
+    // SHRINK-WRAP host (velvet's bottom sheet) hugs the content with no void.
+    // A basis-0 layer anywhere in the chain reports 0 min-content and
+    // collapses the sheet to header+input. shrink:1 + min-height:0 still lets
+    // the trail yield first when space is tight (input is absolute-pinned).
+    // The SDK-level rule in SmartCanvasElementLit consumes these tokens on
+    // adaptive-chat-trail's host element. Containers OWN host styling
+    // via tokens; the adaptive never sets inline styles on its host.
+    ["--sc-chat-trail-host-display"]: "flex",
+    ["--sc-chat-trail-host-flex-direction"]: "column",
+    ["--sc-chat-trail-host-flex"]: "1 1 auto",
+    ["--sc-chat-trail-host-min-height"]: "0",
+    ["--sc-chat-trail-host-overflow"]: "hidden"
+  };
+}
+var COMPOSER_FOCUS_BORDER = "1px solid hsl(var(--sc-accent-color) / 0.6)";
+function rowStyles(forceExpanded, focused) {
+  if (forceExpanded) {
+    return {
+      position: "absolute",
+      left: "0.75rem",
+      right: "0.75rem",
+      bottom: "0.75rem",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "6px 14px",
+      borderRadius: "9999px",
+      background: "var(--sc-chat-composer-background, color-mix(in srgb, currentColor 8%, transparent))",
+      border: focused ? COMPOSER_FOCUS_BORDER : "1px solid var(--sc-chat-composer-border, color-mix(in srgb, currentColor 22%, transparent))",
+      color: "var(--sc-content-text-color, inherit)",
+      fontFamily: "var(--sc-font-family, inherit)",
+      minHeight: "36px"
+    };
+  }
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "10px 12px",
+    borderRadius: "var(--sc-tile-border-radius, 14px)",
+    background: "var(--sc-tile-background, rgba(15, 19, 24, 0.6))",
+    backdropFilter: "var(--sc-chat-bar-blur, blur(24px) saturate(140%))",
+    WebkitBackdropFilter: "var(--sc-chat-bar-blur, blur(24px) saturate(140%))",
+    border: focused ? COMPOSER_FOCUS_BORDER : "var(--sc-tile-border, 1px solid rgba(255, 255, 255, 0.08))",
+    boxShadow: "var(--sc-tile-shadow, 0 2px 12px rgba(0, 0, 0, 0.3))",
+    color: "var(--sc-tile-title-color, #fafafa)",
+    fontFamily: "var(--sc-font-family, inherit)"
+  };
+}
+var MIC_ICON = svg`<svg viewBox="0 0 16 16" width="16" height="16" fill="none" aria-hidden="true"><rect x="6" y="1.5" width="4" height="8" rx="2" stroke="currentColor" stroke-width="1.6"></rect><path d="M3.5 7.5a4.5 4.5 0 0 0 9 0M8 12v2.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"></path></svg>`;
+function micStyles(listening, disabled) {
+  return {
+    display: "inline-flex",
+    "align-items": "center",
+    "justify-content": "center",
+    width: "32px",
+    height: "32px",
+    border: "none",
+    "border-radius": "50%",
+    // Listening is a MODE: the mic flips to a filled primary chip with a
+    // ripple ring (MIC_RING_STYLES) so recording is unmissable, and the
+    // input placeholder says how to end it.
+    background: listening ? "var(--sc-color-primary, #6a59ce)" : "transparent",
+    color: listening ? "var(--sc-color-primary-text, #ffffff)" : "currentColor",
+    opacity: disabled ? "0.3" : listening ? "1" : "0.65",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "color 150ms ease, background 150ms ease, opacity 150ms ease",
+    "flex-shrink": "0"
+  };
+}
+var MIC_RING_STYLES = html`<style>
+  [data-chat-mic][data-listening='true'] {
+    animation: sc-chatbar-mic-ring 1.5s ease-out infinite;
+  }
+  @keyframes sc-chatbar-mic-ring {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-color-primary, #6a59ce) 45%, transparent);
+      transform: scale(1);
+    }
+    50% { transform: scale(1.08); }
+    70% { box-shadow: 0 0 0 12px transparent; }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+      transform: scale(1);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-chat-mic][data-listening='true'] {
+      animation: none;
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-color-primary, #6a59ce) 35%, transparent);
+    }
+  }
+</style>`;
+var MAXIMIZE_ICON = svg`<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`;
+var MINIMIZE_ICON = svg`<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`;
+function maximizeStyles(maximized) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "32px",
+    height: "32px",
+    borderRadius: "9999px",
+    // Active (maximized): filled accent chip. Idle: subtle accent chip with a
+    // visible ring. Colour is full-opacity in both states (no 0.95 ghosting).
+    background: maximized ? "hsl(var(--sc-accent-color) / 0.85)" : "hsl(var(--sc-accent-color) / 0.15)",
+    border: maximized ? "none" : "1px solid hsl(var(--sc-accent-color) / 0.45)",
+    color: maximized ? "var(--sc-accent-foreground, #fff)" : "hsl(var(--sc-accent-color))",
+    flexShrink: "0",
+    lineHeight: "1",
+    padding: "0",
+    cursor: "pointer",
+    transition: "background 150ms ease, color 150ms ease, border-color 150ms ease"
+  };
+}
+function inputStyles() {
+  return {
+    flex: "1",
+    minWidth: "0",
+    background: "transparent",
+    border: "none",
+    outline: "none",
+    color: "inherit",
+    // MUST be >= 16px. iOS Safari auto-zooms the page when a focused input has a
+    // font-size below 16px, then does NOT zoom back out on blur — so the composer
+    // zoomed in, the input ended up behind the keyboard (the zoom breaks the
+    // visualViewport keyboard-lift math), and tapping "Done" left the whole site
+    // stuck zoomed in. 16px is the standard, accessibility-safe fix (no
+    // user-scalable=no / maximum-scale hacks that would kill pinch-zoom).
+    fontSize: "16px"
+  };
+}
+function sendStyles(inFlight) {
+  return {
+    width: "28px",
+    height: "28px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "9999px",
+    // Ready: filled accent (send is the affordance). In-flight: hollow
+    // ring + accent ring (stop is a one-of-a-kind disruptive action,
+    // styled differently so the user reads "this isn't just send").
+    background: inFlight ? "transparent" : "hsl(var(--sc-accent-color) / 0.85)",
+    color: inFlight ? "hsl(var(--sc-accent-color) / 0.95)" : "var(--sc-accent-foreground, #fff)",
+    border: inFlight ? "1px solid hsl(var(--sc-accent-color) / 0.55)" : "none",
+    cursor: "pointer",
+    flexShrink: "0",
+    transition: "background 150ms ease, color 150ms ease, border-color 150ms ease"
+  };
+}
+function renderHeader(assistantName, persona) {
+  const headerStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "7px",
+    // Halved vertical footprint: 6px total block padding vs the old 16px
+    // (4px top + 12px bottom). Horizontal padding unchanged.
+    padding: "3px 4px",
+    borderBottom: "1px solid var(--sc-content-divider-color, rgba(0, 0, 0, 0.08))",
+    flex: "0 0 auto"
+  };
+  const avatar = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    borderRadius: "9999px",
+    background: "var(--sc-tile-icon-background, linear-gradient(135deg, var(--sc-color-primary, #5faf7d) 0%, var(--sc-color-primary-hover, #3d8a5e) 100%))",
+    color: "#fff",
+    flexShrink: "0",
+    fontSize: "9px",
+    lineHeight: "1"
+  };
+  const name = {
+    fontSize: "0.8rem",
+    fontWeight: "600",
+    color: "var(--sc-content-text-color, inherit)",
+    lineHeight: "1.2",
+    flexShrink: "0"
+  };
+  const personaImg = {
+    width: "22px",
+    height: "22px",
+    borderRadius: "9999px",
+    objectFit: "cover",
+    flexShrink: "0"
+  };
+  const disclosure = {
+    fontSize: "0.62rem",
+    fontWeight: "500",
+    color: "var(--sc-content-text-color, inherit)",
+    opacity: "0.55",
+    lineHeight: "1.2",
+    flexShrink: "0"
+  };
+  return html`
+    <div style=${styleMap(headerStyles)} data-chat-header>
+      ${persona?.avatar?.md || persona?.avatar?.sm ? html`<img
+              style=${styleMap(personaImg)}
+              src=${persona.avatar.md ?? persona.avatar.sm ?? ""}
+              alt=""
+              data-persona-avatar
+            />` : html`<span style=${styleMap(avatar)} aria-hidden="true">✦</span>`}
+      <span style=${styleMap(name)} data-persona-name>${persona?.name ?? assistantName}</span>
+      ${persona ? html`<span style=${styleMap(disclosure)} data-persona-disclosure>· AI concierge</span>` : nothing}
+    </div>
+  `;
+}
+if (!customElements.get("adaptive-chat-bar")) {
+  customElements.define("adaptive-chat-bar", AdaptiveChatBar);
+}
+
+export {
+  pickPersona,
+  AdaptiveChatBar
+};
+//# sourceMappingURL=chunk-FXHYE6FY.js.map