@staylift-tech/conv-widget 0.0.1

package/dist/cjs/staylift-widget.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-BDscJkkF.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.41.2 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('staylift-widget.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["staylift-orb.cjs",[[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.cjs",[[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);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "components/staylift-widget/staylift-widget.js",
+    "components/staylift-orb/staylift-orb.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.41.2",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/staylift-orb/staylift-orb.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+
+.orb-container {
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+  background: linear-gradient(145deg, #f8f9fa, #e9ecef);
+}
+
+canvas {
+  display: block;
+  border-radius: 50%;
+}

package/dist/collection/components/staylift-orb/staylift-orb.js

@@ -0,0 +1,229 @@
+import { h } from "@stencil/core";
+export class StayliftOrb {
+    constructor() {
+        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" })));
+    }
+    static get is() { return "staylift-orb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["staylift-orb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["staylift-orb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputVolume": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-volume",
+                "defaultValue": "0"
+            },
+            "outputVolume": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "output-volume",
+                "defaultValue": "0"
+            },
+            "isActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-active",
+                "defaultValue": "false"
+            },
+            "primaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-color",
+                "defaultValue": "'#6366f1'"
+            },
+            "size": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large' | number",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "animationFrame": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}