@staylift-tech/conv-widget 0.0.1

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export { staylift_widget as StayliftWidget } from './staylift-widget.entry.js';
+export { staylift_orb as StayliftOrb } from './staylift-orb.entry.js';
+import './index-DAtfDq5B.js';

package/dist/esm/loader.js

@@ -0,0 +1,11 @@
+import { b as bootstrapLazy } from './index-DAtfDq5B.js';
+export { s as setNonce } from './index-DAtfDq5B.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["staylift-orb",[[1,"staylift-orb",{"inputVolume":[2,"input-volume"],"outputVolume":[2,"output-volume"],"isActive":[4,"is-active"],"primaryColor":[1,"primary-color"],"size":[8],"animationFrame":[32]}]]],["staylift-widget",[[1,"staylift-widget",{"agentId":[1,"agent-id"],"positionX":[1,"position-x"],"positionY":[1,"position-y"],"variant":[1],"mode":[1],"primaryColor":[1,"primary-color"],"brandName":[1,"brand-name"],"language":[1],"autoExpand":[4,"auto-expand"],"showBranding":[4,"show-branding"],"avatarUrl":[1,"avatar-url"],"fabPrompt":[1,"fab-prompt"],"fabButtonText":[1,"fab-button-text"],"status":[32],"isExpanded":[32],"termsAccepted":[32],"errorMessage":[32],"inputVolume":[32],"outputVolume":[32],"messages":[32],"inputText":[32],"copiedIndex":[32],"startConversation":[64],"endConversation":[64],"getStatus":[64],"sendMessage":[64]}]]]], options);
+};
+
+export { defineCustomElements };

package/dist/esm/staylift-orb.entry.js

@@ -0,0 +1,115 @@
+import { r as registerInstance, h, g as getElement } from './index-DAtfDq5B.js';
+
+const stayliftOrbCss = () => `:host{display:block}.orb-container{position:relative;border-radius:50%;overflow:hidden;background:linear-gradient(145deg, #f8f9fa, #e9ecef)}canvas{display:block;border-radius:50%}`;
+
+const StayliftOrb = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inputVolume = 0;
+        this.outputVolume = 0;
+        this.isActive = false;
+        this.primaryColor = '#6366f1';
+        this.size = 'medium';
+        this.animationFrame = 0;
+        this.rafId = null;
+        this.ctx = null;
+    }
+    componentDidLoad() {
+        this.setupCanvas();
+        this.startAnimation();
+    }
+    disconnectedCallback() {
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+    }
+    setupCanvas() {
+        if (!this.canvasRef)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        const rect = this.canvasRef.getBoundingClientRect();
+        this.canvasRef.width = rect.width * dpr;
+        this.canvasRef.height = rect.height * dpr;
+        this.ctx = this.canvasRef.getContext('2d');
+        if (this.ctx)
+            this.ctx.scale(dpr, dpr);
+    }
+    startAnimation() {
+        const animate = () => {
+            this.drawOrb();
+            this.rafId = requestAnimationFrame(animate);
+        };
+        animate();
+    }
+    drawOrb() {
+        if (!this.ctx || !this.canvasRef)
+            return;
+        const width = this.canvasRef.clientWidth;
+        const height = this.canvasRef.clientHeight;
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const baseRadius = Math.min(width, height) / 2 - 4;
+        this.ctx.clearRect(0, 0, width, height);
+        const combinedVolume = Math.max(this.inputVolume, this.outputVolume);
+        const pulse = this.isActive ? 1 + combinedVolume * 0.15 : 1;
+        const radius = baseRadius * pulse;
+        const color = this.hexToRgb(this.primaryColor || '#10b981');
+        if (this.isActive && combinedVolume > 0.1) {
+            const glowRadius = radius + 10 + combinedVolume * 20;
+            const gradient = this.ctx.createRadialGradient(centerX, centerY, radius, centerX, centerY, glowRadius);
+            gradient.addColorStop(0, `rgba(${color.r}, ${color.g}, ${color.b}, ${0.3 * combinedVolume})`);
+            gradient.addColorStop(1, `rgba(${color.r}, ${color.g}, ${color.b}, 0)`);
+            this.ctx.beginPath();
+            this.ctx.arc(centerX, centerY, glowRadius, 0, Math.PI * 2);
+            this.ctx.fillStyle = gradient;
+            this.ctx.fill();
+        }
+        const orbGradient = this.ctx.createRadialGradient(centerX - radius * 0.3, centerY - radius * 0.3, 0, centerX, centerY, radius);
+        if (this.isActive) {
+            orbGradient.addColorStop(0, `rgba(${color.r + 40}, ${color.g + 40}, ${color.b + 40}, 1)`);
+            orbGradient.addColorStop(0.5, `rgba(${color.r}, ${color.g}, ${color.b}, 1)`);
+            orbGradient.addColorStop(1, `rgba(${Math.max(0, color.r - 30)}, ${Math.max(0, color.g - 30)}, ${Math.max(0, color.b - 30)}, 1)`);
+        }
+        else {
+            orbGradient.addColorStop(0, '#6b7280');
+            orbGradient.addColorStop(0.5, '#4b5563');
+            orbGradient.addColorStop(1, '#374151');
+        }
+        this.ctx.beginPath();
+        this.ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        this.ctx.fillStyle = orbGradient;
+        this.ctx.fill();
+        const highlightGradient = this.ctx.createRadialGradient(centerX - radius * 0.3, centerY - radius * 0.3, 0, centerX - radius * 0.3, centerY - radius * 0.3, radius * 0.6);
+        highlightGradient.addColorStop(0, 'rgba(255, 255, 255, 0.4)');
+        highlightGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+        this.ctx.beginPath();
+        this.ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        this.ctx.fillStyle = highlightGradient;
+        this.ctx.fill();
+        if (this.isActive) {
+            this.animationFrame++;
+            for (let i = 0; i < 3; i++) {
+                const phase = (this.animationFrame * 0.02 + i / 3) % 1;
+                const ringRadius = radius + phase * 30;
+                const alpha = (1 - phase) * 0.3 * combinedVolume;
+                this.ctx.beginPath();
+                this.ctx.arc(centerX, centerY, ringRadius, 0, Math.PI * 2);
+                this.ctx.strokeStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+                this.ctx.lineWidth = 2;
+                this.ctx.stroke();
+            }
+        }
+    }
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : { r: 16, g: 185, b: 129 };
+    }
+    render() {
+        const sizeClass = typeof this.size === 'number' ? '' : `orb--${this.size}`;
+        const customStyle = typeof this.size === 'number' ? { width: `${this.size}px`, height: `${this.size}px` } : {};
+        return (h("div", { key: '4ef2605968e04b6dc287db398f5ad730e63c08d3', class: `orb ${sizeClass} ${this.isActive ? 'orb--active' : ''}`, style: customStyle }, h("canvas", { key: '7875d17618d38a4ac0e693bb73d4502d6a66151b', ref: (el) => (this.canvasRef = el), class: "orb__canvas" })));
+    }
+    get el() { return getElement(this); }
+};
+StayliftOrb.style = stayliftOrbCss();
+
+export { StayliftOrb as staylift_orb };