@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.
Files changed (9) hide show
  1. package/dist/chat-widget.global.js +42 -7
  2. package/dist/chat-widget.global.js.map +1 -1
  3. package/dist/index.d.ts +10 -0
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +42 -7
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/element.ts +24 -0
  9. package/src/styles.ts +26 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@smooai/chat-widget",
3
- "version": "0.10.0",
3
+ "version": "0.10.1",
4
4
  "description": "Embeddable AI chat as a framework-light web component — the Aurora Glass design, streaming replies, grounded sources, and per-brand theming. Speaks the smooth-operator WebSocket protocol.",
5
5
  "license": "MIT",
6
6
  "author": "SmooAI",
package/src/element.ts CHANGED
@@ -342,6 +342,7 @@ export class SmoothAgentChatElement extends HTMLElement {
342
342
  </div>`;
343
343
 
344
344
  const container = document.createElement('div');
345
+ container.className = 'wrap';
345
346
  container.innerHTML = `
346
347
  ${fullpage ? '' : `<button class="launcher" part="launcher" aria-label="Open chat">${ICON.spark}</button>`}
347
348
  <div class="panel${fullpage ? ' fullpage' : ' hidden'}" part="panel" role="${fullpage ? 'region' : 'dialog'}" aria-label="${escapeHtml(resolved.agentName)} chat">
@@ -407,6 +408,10 @@ export class SmoothAgentChatElement extends HTMLElement {
407
408
  })();
408
409
  });
409
410
 
411
+ // Full-page mode sizes to the host's box; fall back to the viewport only
412
+ // when the container gives the host no height.
413
+ if (fullpage) this.syncViewportFallback();
414
+
410
415
  // Full-page mode connects eagerly (there's no launcher click to trigger it) —
411
416
  // but only once any identity gate is cleared.
412
417
  if (fullpage && !gating) void this.controller?.connect().catch(() => {});
@@ -998,6 +1003,25 @@ export class SmoothAgentChatElement extends HTMLElement {
998
1003
  }
999
1004
  }
1000
1005
 
1006
+ /**
1007
+ * Full-page sizing probe: decide whether the host's container gives it a
1008
+ * real box. With the `.wrap` flex chain hidden, `height: 100%` of a SIZED
1009
+ * container still resolves (clientHeight > 0), while an auto-height parent
1010
+ * (e.g. mounted straight into `<body>`) collapses to ~0. Only the latter
1011
+ * gets `data-viewport-fallback`, whose CSS applies `min-height: 100dvh` —
1012
+ * so an embed inside a fixed-height box never overflows it (the composer
1013
+ * stays visible), and a bare full-page route still fills the viewport.
1014
+ */
1015
+ private syncViewportFallback(): void {
1016
+ const wrap = this.shadowRoot?.querySelector<HTMLElement>('.wrap');
1017
+ if (!wrap) return;
1018
+ const prev = wrap.style.display;
1019
+ wrap.style.display = 'none';
1020
+ const heightless = this.clientHeight < 8;
1021
+ wrap.style.display = prev;
1022
+ this.toggleAttribute('data-viewport-fallback', heightless);
1023
+ }
1024
+
1001
1025
  /** Cancel any in-flight reveal loop and clear its state (called on full rebuild). */
1002
1026
  private resetReveal(): void {
1003
1027
  if (this.rafId && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(this.rafId);
package/src/styles.ts CHANGED
@@ -44,11 +44,11 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
44
44
  ${
45
45
  mode === 'fullpage'
46
46
  ? `/* Full-page: fill the host's box (sized by its container, else the viewport). */
47
- display: block;
47
+ display: flex;
48
+ flex-direction: column;
48
49
  position: relative;
49
50
  width: 100%;
50
- height: 100%;
51
- min-height: 100vh;`
51
+ height: 100%;`
52
52
  : `/* Popover: float in the bottom-right corner. */
53
53
  position: fixed;
54
54
  bottom: 24px;
@@ -58,7 +58,24 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
58
58
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
59
59
  -webkit-font-smoothing: antialiased;
60
60
  }
61
-
61
+ ${
62
+ mode === 'fullpage'
63
+ ? `
64
+ /* Viewport fallback — the element sets this attribute only when the host's
65
+ container gives it no resolved height (e.g. mounted straight into an
66
+ auto-height <body>). A sized container always wins, so an embed inside a
67
+ fixed-height box never overflows it (composer stays visible). */
68
+ :host([data-viewport-fallback]) { min-height: 100dvh; }
69
+ /* The render wrapper passes the host's box down to the panel via flex. */
70
+ .wrap {
71
+ flex: 1;
72
+ display: flex;
73
+ flex-direction: column;
74
+ min-height: 0;
75
+ }
76
+ `
77
+ : ''
78
+ }
62
79
  * { box-sizing: border-box; }
63
80
 
64
81
  /* ───────────────────────────── Launcher ───────────────────────────── */
@@ -140,11 +157,13 @@ export function buildStyles(theme: ResolvedTheme, mode: ChatWidgetMode = 'popove
140
157
  pointer-events: none;
141
158
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--sac-primary) 22%, transparent), transparent 70%);
142
159
  }
143
- /* Full-page: the panel becomes the whole surface. */
160
+ /* Full-page: the panel becomes the whole surface — it follows the host's box
161
+ (via the .wrap flex chain), never a hardcoded viewport unit. */
144
162
  .panel.fullpage {
145
163
  width: 100%;
146
- height: 100%;
147
- min-height: 100vh;
164
+ flex: 1;
165
+ height: auto;
166
+ min-height: 0;
148
167
  max-width: none;
149
168
  max-height: none;
150
169
  border: none;