@helpai/elements 0.20.0 → 0.21.1

package/web-component.mjs

@@ -447,7 +447,6 @@ var DEFAULT_ATTACHMENTS = {
   maxCount: 10,
   accept: "*/*"
 };
-var DEFAULT_WELCOME = { animation: "instant", speed: 60 };
 var DEFAULT_FEATURES = {
   files: true,
   voice: "local",
@@ -517,7 +516,6 @@ function resolveOptions(rawOpts) {
     showReasoning: behavior.showReasoning ?? false,
     showToolCalls: behavior.showToolCalls ?? false,
     popOutUrl: behavior.popOutUrl ?? BRAND.standaloneUrl,
-    welcome: { ...DEFAULT_WELCOME, ...opts.welcome },
     features: {
       files: opts.features?.files ?? DEFAULT_FEATURES.files,
       voice: opts.features?.voice ?? DEFAULT_FEATURES.voice,
@@ -719,7 +717,6 @@ var SECTION_KEYS = [
   "launcher",
   "header",
   "composer",
-  "welcome",
   "feedback",
   "i18n",
   "footer",
@@ -980,7 +977,7 @@ function bindHostCommands(host, handlers) {
 }
 
 // src/styles/tokens.css
-var tokens_default = ':host{--__P__-accent-user: __BRAND_ACCENT__;--__P__-accent: var(--__P__-accent-user);--__P__-accent-text: __BRAND_ACCENT_TEXT__;--__P__-radius: __BRAND_RADIUS__;--__P__-radius-sm: 8px;--__P__-radius-md: 10px;--__P__-radius-lg: 16px;--__P__-font: __BRAND_FONT__;--__P__-font-display: var(--__P__-font);--__P__-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--__P__-bg: oklch(1 0 0);--__P__-bg-elevated: oklch(.9789 .0029 278.3);--__P__-surface: var(--__P__-bg-elevated);--__P__-muted: var(--__P__-fg-muted);--__P__-hover: oklch(.1686 .011 278.3 / .06);--__P__-fg: oklch(.1686 .011 278.3);--__P__-fg-muted: oklch(.4932 .0301 278.3);--__P__-border: oklch(.9312 .0084 278.3);--__P__-border-strong: oklch(.8757 .0131 278.3);--__P__-bubble-user: var(--__P__-accent);--__P__-bubble-user-text: var(--__P__-accent-text);--__P__-bubble-assistant: oklch(.9638 .0058 278.3);--__P__-bubble-assistant-text: var(--__P__-fg);--__P__-on-accent: var(--__P__-accent-text);--__P__-success: oklch(.6456 .1654 151.53);--__P__-warning: oklch(.7135 .1494 74.05);--__P__-danger: oklch(.5966 .1818 24.51);--__P__-danger-text: oklch(.5054 .1905 27.52);--__P__-danger-bg: oklch(.5966 .1818 24.51 / .1);--__P__-neutral: oklch(.7137 .0192 278.3);--__P__-focus: var(--__P__-accent);--__P__-shadow-panel: 0 8px 24px -8px rgba(13, 15, 20, .18), 0 24px 64px -24px rgba(13, 15, 20, .24);--__P__-shadow-card: 0 1px 2px rgba(13, 15, 20, .06), 0 4px 12px -6px rgba(13, 15, 20, .12);--__P__-backdrop: oklch(.1686 .011 278.3 / .55);--__P__-shadow-fab: 0 6px 16px -4px color-mix(in oklch, var(--__P__-accent) 45%, transparent), 0 12px 32px -12px rgba(13, 15, 20, .25);--__P__-z-fab: 2147483600;--__P__-z-panel: 2147483601;--__P__-panel-w: 380px;--__P__-panel-h: 600px;--__P__-fab-size: 56px;--__P__-space-1: 4px;--__P__-space-2: 8px;--__P__-space-3: 12px;--__P__-space-4: 16px;--__P__-space-5: 20px;--__P__-space-6: 24px;--__P__-space-8: 32px;--__P__-text-scale: 1;--__P__-text-xs: calc(12px * var(--__P__-text-scale));--__P__-text-sm: calc(13px * var(--__P__-text-scale));--__P__-text-base: calc(15px * var(--__P__-text-scale));--__P__-text-md: calc(16px * var(--__P__-text-scale));--__P__-text-lg: calc(18px * var(--__P__-text-scale));--__P__-text-xl: calc(22px * var(--__P__-text-scale));--__P__-text-2xl: calc(30px * var(--__P__-text-scale))}:host([data-text-size="small"]){--__P__-text-scale: .9}:host([data-text-size="large"]){--__P__-text-scale: 1.15}:host{--__P__-ease: cubic-bezier(.2, .7, .2, 1);--__P__-ease-out: cubic-bezier(.2, .7, .2, 1);--__P__-ease-in: cubic-bezier(.4, 0, 1, 1);--__P__-ease-in-out: cubic-bezier(.65, 0, .35, 1);--__P__-dur-quick: .12s;--__P__-dur-base: .22s;--__P__-dur-slow: .32s;font-family:var(--__P__-font);color:var(--__P__-fg);color-scheme:light;--__P__-color-scheme: light}:host([data-theme="dark"]){--__P__-bg: oklch(.1783 .0128 278.3);--__P__-bg-elevated: oklch(.2232 .0182 278.3);--__P__-fg: oklch(.9368 .01 278.3);--__P__-fg-muted: oklch(.7048 .0296 278.3);--__P__-border: oklch(.2752 .0266 278.3);--__P__-border-strong: oklch(.335 .0291 278.3);--__P__-hover: oklch(.9368 .01 278.3 / .08);--__P__-bubble-assistant: oklch(.2474 .0311 278.3);--__P__-bubble-assistant-text: var(--__P__-fg);--__P__-danger-text: oklch(.8077 .1035 19.57);--__P__-danger-bg: oklch(.5966 .1818 24.51 / .18);--__P__-shadow-panel: 0 8px 24px -8px rgba(0, 0, 0, .6), 0 24px 64px -24px rgba(0, 0, 0, .7);--__P__-shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -6px rgba(0, 0, 0, .5);--__P__-backdrop: rgba(0, 0, 0, .65);color-scheme:dark;--__P__-color-scheme: dark}@media(prefers-color-scheme:dark){:host([data-theme="auto"]){--__P__-bg: oklch(.1783 .0128 278.3);--__P__-bg-elevated: oklch(.2232 .0182 278.3);--__P__-fg: oklch(.9368 .01 278.3);--__P__-fg-muted: oklch(.7048 .0296 278.3);--__P__-border: oklch(.2752 .0266 278.3);--__P__-border-strong: oklch(.335 .0291 278.3);--__P__-hover: oklch(.9368 .01 278.3 / .08);--__P__-bubble-assistant: oklch(.2474 .0311 278.3);--__P__-bubble-assistant-text: var(--__P__-fg);--__P__-shadow-panel: 0 8px 24px -8px rgba(0, 0, 0, .6), 0 24px 64px -24px rgba(0, 0, 0, .7);color-scheme:dark;--__P__-color-scheme: dark}}@supports (color: oklch(from red l c h)){:host{--__P__-accent: oklch(from var(--__P__-accent-user) clamp(.3, l, .62) c h);--__P__-accent-text: oklch(from var(--__P__-accent) clamp(0, (l / .623 - 1) * -infinity, 1) 0 h)}:host([data-theme="dark"]){--__P__-accent: oklch(from var(--__P__-accent-user) clamp(.65, l, .85) c h)}@media(prefers-color-scheme:dark){:host([data-theme="auto"]){--__P__-accent: oklch(from var(--__P__-accent-user) clamp(.65, l, .85) c h)}}}@media(prefers-reduced-motion:reduce){:host{--__P__-dur-quick: 1ms;--__P__-dur-base: 1ms;--__P__-dur-slow: 1ms}}\n';
+var tokens_default = ':host{--__P__-accent-user: __BRAND_ACCENT__;--__P__-accent: var(--__P__-accent-user);--__P__-accent-text-user: __BRAND_ACCENT_TEXT__;--__P__-accent-text: var(--__P__-accent-text-user);--__P__-radius: __BRAND_RADIUS__;--__P__-radius-sm: 8px;--__P__-radius-md: 10px;--__P__-radius-lg: 16px;--__P__-font: __BRAND_FONT__;--__P__-font-display: var(--__P__-font);--__P__-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--__P__-bg: oklch(1 0 0);--__P__-bg-elevated: oklch(.9789 .0029 278.3);--__P__-surface: var(--__P__-bg-elevated);--__P__-muted: var(--__P__-fg-muted);--__P__-hover: oklch(.1686 .011 278.3 / .06);--__P__-fg: oklch(.1686 .011 278.3);--__P__-fg-muted: oklch(.4932 .0301 278.3);--__P__-border: oklch(.9312 .0084 278.3);--__P__-border-strong: oklch(.8757 .0131 278.3);--__P__-bubble-user: var(--__P__-accent);--__P__-bubble-user-text: var(--__P__-accent-text);--__P__-bubble-assistant: oklch(.9638 .0058 278.3);--__P__-bubble-assistant-text: var(--__P__-fg);--__P__-on-accent: var(--__P__-accent-text);--__P__-success: oklch(.6456 .1654 151.53);--__P__-warning: oklch(.7135 .1494 74.05);--__P__-danger: oklch(.5966 .1818 24.51);--__P__-danger-text: oklch(.5054 .1905 27.52);--__P__-danger-bg: oklch(.5966 .1818 24.51 / .1);--__P__-neutral: oklch(.7137 .0192 278.3);--__P__-focus: var(--__P__-accent);--__P__-shadow-panel: 0 8px 24px -8px rgba(13, 15, 20, .18), 0 24px 64px -24px rgba(13, 15, 20, .24);--__P__-shadow-card: 0 1px 2px rgba(13, 15, 20, .06), 0 4px 12px -6px rgba(13, 15, 20, .12);--__P__-backdrop: oklch(.1686 .011 278.3 / .55);--__P__-shadow-fab: 0 6px 16px -4px color-mix(in oklch, var(--__P__-accent) 45%, transparent), 0 12px 32px -12px rgba(13, 15, 20, .25);--__P__-z-fab: 2147483600;--__P__-z-panel: 2147483601;--__P__-panel-w: 380px;--__P__-panel-h: 600px;--__P__-fab-size: 56px;--__P__-space-1: 4px;--__P__-space-2: 8px;--__P__-space-3: 12px;--__P__-space-4: 16px;--__P__-space-5: 20px;--__P__-space-6: 24px;--__P__-space-8: 32px;--__P__-text-scale: 1;--__P__-text-xs: calc(12px * var(--__P__-text-scale));--__P__-text-sm: calc(13px * var(--__P__-text-scale));--__P__-text-base: calc(15px * var(--__P__-text-scale));--__P__-text-md: calc(16px * var(--__P__-text-scale));--__P__-text-lg: calc(18px * var(--__P__-text-scale));--__P__-text-xl: calc(22px * var(--__P__-text-scale));--__P__-text-2xl: calc(30px * var(--__P__-text-scale))}:host([data-text-size="small"]){--__P__-text-scale: .9}:host([data-text-size="large"]){--__P__-text-scale: 1.15}:host{--__P__-ease: cubic-bezier(.2, .7, .2, 1);--__P__-ease-out: cubic-bezier(.2, .7, .2, 1);--__P__-ease-in: cubic-bezier(.4, 0, 1, 1);--__P__-ease-in-out: cubic-bezier(.65, 0, .35, 1);--__P__-dur-quick: .12s;--__P__-dur-base: .22s;--__P__-dur-slow: .32s;font-family:var(--__P__-font);color:var(--__P__-fg);color-scheme:light;--__P__-color-scheme: light}:host([data-theme="dark"]){--__P__-bg: oklch(.1783 .0128 278.3);--__P__-bg-elevated: oklch(.2232 .0182 278.3);--__P__-fg: oklch(.9368 .01 278.3);--__P__-fg-muted: oklch(.7048 .0296 278.3);--__P__-border: oklch(.2752 .0266 278.3);--__P__-border-strong: oklch(.335 .0291 278.3);--__P__-hover: oklch(.9368 .01 278.3 / .08);--__P__-bubble-assistant: oklch(.2474 .0311 278.3);--__P__-bubble-assistant-text: var(--__P__-fg);--__P__-danger-text: oklch(.8077 .1035 19.57);--__P__-danger-bg: oklch(.5966 .1818 24.51 / .18);--__P__-shadow-panel: 0 8px 24px -8px rgba(0, 0, 0, .6), 0 24px 64px -24px rgba(0, 0, 0, .7);--__P__-shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -6px rgba(0, 0, 0, .5);--__P__-backdrop: rgba(0, 0, 0, .65);color-scheme:dark;--__P__-color-scheme: dark}@media(prefers-color-scheme:dark){:host([data-theme="auto"]){--__P__-bg: oklch(.1783 .0128 278.3);--__P__-bg-elevated: oklch(.2232 .0182 278.3);--__P__-fg: oklch(.9368 .01 278.3);--__P__-fg-muted: oklch(.7048 .0296 278.3);--__P__-border: oklch(.2752 .0266 278.3);--__P__-border-strong: oklch(.335 .0291 278.3);--__P__-hover: oklch(.9368 .01 278.3 / .08);--__P__-bubble-assistant: oklch(.2474 .0311 278.3);--__P__-bubble-assistant-text: var(--__P__-fg);--__P__-shadow-panel: 0 8px 24px -8px rgba(0, 0, 0, .6), 0 24px 64px -24px rgba(0, 0, 0, .7);color-scheme:dark;--__P__-color-scheme: dark}}@supports (color: oklch(from red l c h)){:host{--__P__-accent: oklch(from var(--__P__-accent-user) clamp(.3, l, .62) c h);--__P__-accent-text: oklch(from var(--__P__-accent) clamp(0, (l / .623 - 1) * -infinity, 1) 0 h)}:host([data-theme="dark"]){--__P__-accent: oklch(from var(--__P__-accent-user) clamp(.65, l, .85) c h)}@media(prefers-color-scheme:dark){:host([data-theme="auto"]){--__P__-accent: oklch(from var(--__P__-accent-user) clamp(.65, l, .85) c h)}}}@media(prefers-reduced-motion:reduce){:host{--__P__-dur-quick: 1ms;--__P__-dur-base: 1ms;--__P__-dur-slow: 1ms}}\n';
 
 // src/styles/reset.css
 var reset_default = '*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;border:0}button{font:inherit;color:inherit;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;line-height:1}button:focus-visible,[tabindex]:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--__P__-accent);outline-offset:2px}textarea,input{font:inherit;color:inherit;background:none;border:0;outline:0;resize:none}a{color:var(--__P__-accent);text-decoration:underline;text-underline-offset:2px}img,svg{display:block;max-width:100%}ul,ol{list-style:none}.__P__-app{display:block;width:100%;height:100%;font-family:var(--__P__-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01","ss03"}.__P__-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n';
@@ -1076,7 +1073,7 @@ function attachAdoptedSheet(shadow, doc) {
 function applyThemeOverrides(host, overrides) {
   const p33 = BRAND.cssPrefix;
   if (overrides.accent) host.style.setProperty(`--${p33}-accent-user`, overrides.accent);
-  if (overrides.accentText) host.style.setProperty(`--${p33}-accent-text`, overrides.accentText);
+  if (overrides.accentText) host.style.setProperty(`--${p33}-accent-text-user`, overrides.accentText);
   if (overrides.radius) host.style.setProperty(`--${p33}-radius`, overrides.radius);
   if (overrides.fontFamily) host.style.setProperty(`--${p33}-font`, overrides.fontFamily);
 }
@@ -1915,15 +1912,6 @@ function makeAssistantMessage() {
     partsSig: signal([])
   };
 }
-function makeTypewriterMessage(m) {
-  return {
-    id: m.id,
-    role: m.role,
-    createdAt: Date.now(),
-    status: "streaming",
-    partsSig: signal([{ kind: "text", id: `${m.id}-t0`, textSig: signal(""), doneSig: signal(false) }])
-  };
-}
 function makeInstantWelcomeMessage(m) {
   return toReactive({
     id: m.id,
@@ -4817,6 +4805,7 @@ function LoadingSpinner({ label }) {
 import { jsx as jsx17, jsxs as jsxs14 } from "preact/jsx-runtime";
 var p15 = BRAND.cssPrefix;
 var STICK_THRESHOLD = 120;
+var INTERACTION_GRACE_MS = 350;
 var DIVIDER_IDLE_MS = 1200;
 function MessageList({
   messagesSig,
@@ -4837,6 +4826,8 @@ function MessageList({
   const hasHydratedRef = useRef5(false);
   const detachedRef = useRef5(false);
   const interactingRef = useRef5(false);
+  const interactionEndedAtRef = useRef5(0);
+  const inInteractionGrace = () => interactingRef.current || performance.now() - interactionEndedAtRef.current < INTERACTION_GRACE_MS;
   const autoPinAtRef = useRef5(0);
   const pinBottom = (el) => {
     autoPinAtRef.current = performance.now();
@@ -4877,7 +4868,7 @@ function MessageList({
       pinBottom(el);
       return;
     }
-    if (detachedRef.current || interactingRef.current) return;
+    if (detachedRef.current || inInteractionGrace()) return;
     const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
     if (distanceFromBottom < STICK_THRESHOLD) pinBottom(el);
   }, [messages.value.length]);
@@ -4887,7 +4878,7 @@ function MessageList({
     const last = messages.value.at(-1);
     if (!last) return;
     const pinIfNear = () => {
-      if (detachedRef.current || interactingRef.current) return;
+      if (detachedRef.current || inInteractionGrace()) return;
       const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
       if (distance < STICK_THRESHOLD * 2) pinBottom(el);
     };
@@ -4937,6 +4928,7 @@ function MessageList({
     };
     const endInteraction = () => {
       interactingRef.current = false;
+      interactionEndedAtRef.current = performance.now();
     };
     const onPointerDown = () => {
       interactingRef.current = true;
@@ -6309,55 +6301,6 @@ function ModulesEmpty({ strings, onClose }) {
   );
 }
 
-// src/ui/welcome-animator.ts
-async function animateWelcomeSequence(reactives, payloads, charsPerSecond, abort) {
-  for (let i = 0; i < reactives.length; i++) {
-    if (abort.aborted) return;
-    const msg = reactives[i];
-    const payload = payloads[i];
-    if (!msg || !payload) continue;
-    await animateTypewriter(msg, payload.text, charsPerSecond, abort);
-  }
-}
-function animateTypewriter(msg, text, charsPerSecond, abort) {
-  return new Promise((resolve) => {
-    const part = msg.partsSig.value[0];
-    if (!part || part.kind !== "text") {
-      resolve();
-      return;
-    }
-    const finish = () => {
-      part.textSig.value = text;
-      part.doneSig.value = true;
-      msg.status = "complete";
-      msg.partsSig.value = [...msg.partsSig.value];
-      resolve();
-    };
-    if (typeof requestAnimationFrame === "undefined") {
-      finish();
-      return;
-    }
-    const totalMs = text.length / Math.max(1, charsPerSecond) * 1e3;
-    const start = performance.now();
-    const tick = (now) => {
-      if (abort.aborted) return finish();
-      const progress = totalMs === 0 ? 1 : Math.min(1, (now - start) / totalMs);
-      part.textSig.value = text.slice(0, Math.floor(progress * text.length));
-      if (progress >= 1) return finish();
-      rafId = requestAnimationFrame(tick);
-    };
-    let rafId = requestAnimationFrame(tick);
-    abort.addEventListener(
-      "abort",
-      () => {
-        cancelAnimationFrame(rafId);
-        finish();
-      },
-      { once: true }
-    );
-  });
-}
-
 // src/ui/use-launcher-callout.ts
 import { useCallback as useCallback5, useEffect as useEffect16, useState as useState12 } from "preact/hooks";
 function useLauncherCallout({ callout, persistence }) {
@@ -6436,7 +6379,6 @@ function App({ options, hostElement, bus }) {
   const [agent, setAgent] = useState13(null);
   const [suggestions, setSuggestions] = useState13([]);
   const [activeCancel, setActiveCancel] = useState13(null);
-  const welcomeAbortRef = useRef9(null);
   const [parsedSite, setParsedSite] = useState13(void 0);
   const [parsedBlocks, setParsedBlocks] = useState13(void 0);
   const [sidebarCollapsed, setSidebarCollapsed] = useState13(() => persistence.loadSidebarCollapsed() ?? false);
@@ -6520,19 +6462,9 @@ function App({ options, hostElement, bus }) {
   const playWelcome = useCallback6(
     (welcomeMessages) => {
       if (!welcomeMessages || welcomeMessages.length === 0) return;
-      const { animation, speed } = options.welcome;
-      if (animation === "instant") {
-        messagesSig.value = welcomeMessages.map(makeInstantWelcomeMessage);
-        return;
-      }
-      welcomeAbortRef.current?.abort();
-      const ctrl = new AbortController();
-      welcomeAbortRef.current = ctrl;
-      const reactives = welcomeMessages.map(makeTypewriterMessage);
-      messagesSig.value = reactives;
-      void animateWelcomeSequence(reactives, welcomeMessages, speed, ctrl.signal);
+      messagesSig.value = welcomeMessages.map(makeInstantWelcomeMessage);
     },
-    [messagesSig, options.welcome]
+    [messagesSig]
   );
   const connectGenRef = useRef9(0);
   const runStartConversation = useCallback6(
@@ -6971,7 +6903,6 @@ function App({ options, hostElement, bus }) {
     log16.info("clear \u2192 new conversation", { wasStreaming: streaming });
     bus.emit("clear", void 0);
     if (streaming) activeCancel?.();
-    welcomeAbortRef.current?.abort();
     messagesSig.value = [];
     conversationIdSig.value = void 0;
     persistence.clearConversation();