@smooai/chat-widget 0.10.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chat-widget.global.js +42 -7
- package/dist/chat-widget.global.js.map +1 -1
- package/dist/index.d.ts +10 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +42 -7
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/element.ts +24 -0
- package/src/styles.ts +26 -7
|
@@ -13518,11 +13518,11 @@ var SmoothAgentChat = (function(exports) {
|
|
|
13518
13518
|
--sac-ease: cubic-bezier(.16, 1, .3, 1);
|
|
13519
13519
|
|
|
13520
13520
|
${mode === "fullpage" ? `/* Full-page: fill the host's box (sized by its container, else the viewport). */
|
|
13521
|
-
display:
|
|
13521
|
+
display: flex;
|
|
13522
|
+
flex-direction: column;
|
|
13522
13523
|
position: relative;
|
|
13523
13524
|
width: 100%;
|
|
13524
|
-
height: 100
|
|
13525
|
-
min-height: 100vh;` : `/* Popover: float in the bottom-right corner. */
|
|
13525
|
+
height: 100%;` : `/* Popover: float in the bottom-right corner. */
|
|
13526
13526
|
position: fixed;
|
|
13527
13527
|
bottom: 24px;
|
|
13528
13528
|
right: 24px;
|
|
@@ -13530,7 +13530,20 @@ var SmoothAgentChat = (function(exports) {
|
|
|
13530
13530
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
13531
13531
|
-webkit-font-smoothing: antialiased;
|
|
13532
13532
|
}
|
|
13533
|
-
|
|
13533
|
+
${mode === "fullpage" ? `
|
|
13534
|
+
/* Viewport fallback — the element sets this attribute only when the host's
|
|
13535
|
+
container gives it no resolved height (e.g. mounted straight into an
|
|
13536
|
+
auto-height <body>). A sized container always wins, so an embed inside a
|
|
13537
|
+
fixed-height box never overflows it (composer stays visible). */
|
|
13538
|
+
:host([data-viewport-fallback]) { min-height: 100dvh; }
|
|
13539
|
+
/* The render wrapper passes the host's box down to the panel via flex. */
|
|
13540
|
+
.wrap {
|
|
13541
|
+
flex: 1;
|
|
13542
|
+
display: flex;
|
|
13543
|
+
flex-direction: column;
|
|
13544
|
+
min-height: 0;
|
|
13545
|
+
}
|
|
13546
|
+
` : ""}
|
|
13534
13547
|
* { box-sizing: border-box; }
|
|
13535
13548
|
|
|
13536
13549
|
/* ───────────────────────────── Launcher ───────────────────────────── */
|
|
@@ -13612,11 +13625,13 @@ var SmoothAgentChat = (function(exports) {
|
|
|
13612
13625
|
pointer-events: none;
|
|
13613
13626
|
background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--sac-primary) 22%, transparent), transparent 70%);
|
|
13614
13627
|
}
|
|
13615
|
-
/* Full-page: the panel becomes the whole surface
|
|
13628
|
+
/* Full-page: the panel becomes the whole surface — it follows the host's box
|
|
13629
|
+
(via the .wrap flex chain), never a hardcoded viewport unit. */
|
|
13616
13630
|
.panel.fullpage {
|
|
13617
13631
|
width: 100%;
|
|
13618
|
-
|
|
13619
|
-
|
|
13632
|
+
flex: 1;
|
|
13633
|
+
height: auto;
|
|
13634
|
+
min-height: 0;
|
|
13620
13635
|
max-width: none;
|
|
13621
13636
|
max-height: none;
|
|
13622
13637
|
border: none;
|
|
@@ -14441,6 +14456,7 @@ var SmoothAgentChat = (function(exports) {
|
|
|
14441
14456
|
<div class="footer">powered by <b>smooth‑operator</b>${restoreLink}</div>
|
|
14442
14457
|
</div>`;
|
|
14443
14458
|
const container = document.createElement("div");
|
|
14459
|
+
container.className = "wrap";
|
|
14444
14460
|
container.innerHTML = `
|
|
14445
14461
|
${fullpage ? "" : `<button class="launcher" part="launcher" aria-label="Open chat">${ICON.spark}</button>`}
|
|
14446
14462
|
<div class="panel${fullpage ? " fullpage" : " hidden"}" part="panel" role="${fullpage ? "region" : "dialog"}" aria-label="${escapeHtml(resolved.agentName)} chat">
|
|
@@ -14484,6 +14500,7 @@ var SmoothAgentChat = (function(exports) {
|
|
|
14484
14500
|
await this.controller?.connect().catch(() => {});
|
|
14485
14501
|
})();
|
|
14486
14502
|
});
|
|
14503
|
+
if (fullpage) this.syncViewportFallback();
|
|
14487
14504
|
if (fullpage && !gating) this.controller?.connect().catch(() => {});
|
|
14488
14505
|
this.syncOpenState();
|
|
14489
14506
|
if (!gating) this.renderMessages();
|
|
@@ -14973,6 +14990,24 @@ var SmoothAgentChat = (function(exports) {
|
|
|
14973
14990
|
this.streamBubbleEl.textContent = this.streamTarget;
|
|
14974
14991
|
}
|
|
14975
14992
|
}
|
|
14993
|
+
/**
|
|
14994
|
+
* Full-page sizing probe: decide whether the host's container gives it a
|
|
14995
|
+
* real box. With the `.wrap` flex chain hidden, `height: 100%` of a SIZED
|
|
14996
|
+
* container still resolves (clientHeight > 0), while an auto-height parent
|
|
14997
|
+
* (e.g. mounted straight into `<body>`) collapses to ~0. Only the latter
|
|
14998
|
+
* gets `data-viewport-fallback`, whose CSS applies `min-height: 100dvh` —
|
|
14999
|
+
* so an embed inside a fixed-height box never overflows it (the composer
|
|
15000
|
+
* stays visible), and a bare full-page route still fills the viewport.
|
|
15001
|
+
*/
|
|
15002
|
+
syncViewportFallback() {
|
|
15003
|
+
const wrap = this.shadowRoot?.querySelector(".wrap");
|
|
15004
|
+
if (!wrap) return;
|
|
15005
|
+
const prev = wrap.style.display;
|
|
15006
|
+
wrap.style.display = "none";
|
|
15007
|
+
const heightless = this.clientHeight < 8;
|
|
15008
|
+
wrap.style.display = prev;
|
|
15009
|
+
this.toggleAttribute("data-viewport-fallback", heightless);
|
|
15010
|
+
}
|
|
14976
15011
|
/** Cancel any in-flight reveal loop and clear its state (called on full rebuild). */
|
|
14977
15012
|
resetReveal() {
|
|
14978
15013
|
if (this.rafId && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.rafId);
|