@staylift-tech/conv-widget 0.0.1

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

@@ -0,0 +1,898 @@
+import { h } from "@stencil/core";
+import { Conversation } from "@elevenlabs/client";
+export class StayliftWidget {
+    constructor() {
+        this.positionX = 'right';
+        this.positionY = 'bottom';
+        this.variant = 'floating';
+        this.mode = 'dark';
+        this.primaryColor = '#6366f1';
+        this.brandName = 'Customer Support';
+        this.language = 'en';
+        this.autoExpand = false;
+        this.showBranding = true;
+        this.fabPrompt = 'Do you need help?';
+        this.fabButtonText = 'Start';
+        // ============ STATE ============
+        this.status = 'disconnected';
+        this.isExpanded = false;
+        this.termsAccepted = false;
+        this.errorMessage = null;
+        this.inputVolume = 0;
+        this.outputVolume = 0;
+        this.messages = [];
+        this.inputText = '';
+        this.copiedIndex = null;
+        // ============ PRIVATE ============
+        this.conversation = null;
+        this.volumeInterval = null;
+        this.messagesContainer = null;
+        this.mediaStream = null;
+        this.isTextOnlyMode = true;
+        this.pendingMessage = null;
+        this.handleInputKeyDown = (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.handleSendText();
+            }
+        };
+        this.handleInputChange = (e) => {
+            this.inputText = e.target.value;
+        };
+        this.handleToggleExpand = () => {
+            this.isExpanded = !this.isExpanded;
+        };
+        this.copyToClipboard = (text, index) => {
+            navigator.clipboard.writeText(text);
+            this.copiedIndex = index;
+            setTimeout(() => { this.copiedIndex = null; }, 2000);
+        };
+        this.handleAcceptTerms = () => {
+            this.termsAccepted = true;
+        };
+        this.handleDeclineTerms = () => {
+            this.isExpanded = false;
+        };
+    }
+    // ============ LIFECYCLE ============
+    componentWillLoad() {
+        if (this.autoExpand)
+            this.isExpanded = true;
+    }
+    disconnectedCallback() {
+        this.cleanup();
+    }
+    // ============ PUBLIC METHODS ============
+    async startConversation(textOnly = true) {
+        await this.handleStartConversation(textOnly);
+    }
+    async endConversation() {
+        await this.handleEndConversation();
+    }
+    async getStatus() {
+        return this.status;
+    }
+    async sendMessage(text) {
+        await this.handleSendText(text);
+    }
+    // ============ PRIVATE METHODS ============
+    scrollToBottom() {
+        if (this.messagesContainer) {
+            const container = this.messagesContainer;
+            setTimeout(() => {
+                container.scrollTop = container.scrollHeight;
+            }, 50);
+        }
+    }
+    async getMicStream() {
+        if (this.mediaStream)
+            return this.mediaStream;
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            this.mediaStream = stream;
+            this.errorMessage = null;
+            return stream;
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === 'NotAllowedError') {
+                this.errorMessage = this.t('microphoneError');
+            }
+            throw error;
+        }
+    }
+    async handleStartConversation(textOnly = true, skipClear = false) {
+        if (this.status === 'connecting' || this.status === 'connected')
+            return;
+        try {
+            this.errorMessage = null;
+            this.status = 'connecting';
+            this.isTextOnlyMode = textOnly;
+            this.statusChanged.emit(this.status);
+            if (!skipClear)
+                this.messages = [];
+            if (!textOnly)
+                await this.getMicStream();
+            // Store pending message to send after connection
+            const messageToSend = this.pendingMessage;
+            // Create a promise that resolves when we're connected or rejects on failure
+            let resolveConnected;
+            let rejectConnected;
+            const connectedPromise = new Promise((resolve, reject) => {
+                resolveConnected = resolve;
+                rejectConnected = reject;
+            });
+            // Add connection timeout
+            const CONNECTION_TIMEOUT = 15000;
+            const timeoutId = setTimeout(() => {
+                rejectConnected(new Error('Connection timeout'));
+            }, CONNECTION_TIMEOUT);
+            this.conversation = await Conversation.startSession({
+                agentId: this.agentId,
+                connectionType: textOnly ? 'websocket' : 'webrtc',
+                overrides: {
+                    conversation: { textOnly },
+                    agent: { firstMessage: textOnly ? '' : undefined },
+                },
+                onStatusChange: (statusEvent) => {
+                    const newStatus = statusEvent.status;
+                    const previousStatus = this.status;
+                    this.status = newStatus;
+                    this.statusChanged.emit(newStatus);
+                    // Handle connected state
+                    if (newStatus === 'connected' && previousStatus !== 'connected') {
+                        clearTimeout(timeoutId);
+                        this.conversationStarted.emit();
+                        if (!textOnly)
+                            this.startVolumeMonitoring();
+                        resolveConnected(); // Signal that we're connected
+                    }
+                    // Handle disconnected state
+                    if (newStatus === 'disconnected') {
+                        if (previousStatus === 'connected') {
+                            this.conversationEnded.emit();
+                            this.stopVolumeMonitoring();
+                        }
+                        else if (previousStatus === 'connecting') {
+                            // Connection failed before establishing
+                            clearTimeout(timeoutId);
+                            rejectConnected(new Error('Connection failed'));
+                        }
+                    }
+                },
+                onMessage: (message) => {
+                    if (message.message) {
+                        // Use 'role' if available, fallback to deprecated 'source'
+                        const messageRole = message.role || message.source;
+                        const chatMessage = {
+                            role: messageRole === 'user' ? 'user' : 'assistant',
+                            content: message.message,
+                        };
+                        this.messages = [...this.messages, chatMessage];
+                        this.messageReceived.emit(chatMessage);
+                        this.scrollToBottom();
+                    }
+                },
+                onError: (error) => {
+                    this.errorMessage = this.t('connectionError');
+                    this.status = 'disconnected';
+                    this.statusChanged.emit(this.status);
+                    this.widgetError.emit({ message: String(error) });
+                },
+            });
+            // Wait for connected status before sending message
+            await connectedPromise;
+            // Now send the pending message (status is guaranteed 'connected' after promise resolves)
+            if (messageToSend && this.conversation) {
+                this.conversation.sendUserMessage(messageToSend);
+                this.pendingMessage = null;
+            }
+        }
+        catch (error) {
+            this.status = 'disconnected';
+            this.statusChanged.emit(this.status);
+            // Don't clear messages - keep user's message visible
+            this.pendingMessage = null;
+            if (error instanceof DOMException && error.name === 'NotAllowedError') {
+                this.errorMessage = this.t('microphoneError');
+            }
+            else {
+                this.errorMessage = this.t('connectionError');
+            }
+            this.widgetError.emit({ message: this.errorMessage });
+        }
+    }
+    async handleEndConversation() {
+        if (!this.conversation)
+            return;
+        this.status = 'disconnecting';
+        this.statusChanged.emit(this.status);
+        await this.conversation.endSession();
+        this.conversation = null;
+        this.status = 'disconnected';
+        this.statusChanged.emit(this.status);
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(t => t.stop());
+            this.mediaStream = null;
+        }
+    }
+    async handleSendText(text) {
+        const msg = text || this.inputText.trim();
+        if (!msg)
+            return;
+        // If disconnected, start text-only session
+        if (this.status === 'disconnected') {
+            const userMessage = { role: 'user', content: msg };
+            this.inputText = '';
+            this.pendingMessage = msg; // Store message to send after connection
+            this.messages = [userMessage];
+            this.scrollToBottom();
+            try {
+                await this.handleStartConversation(true, true);
+                // Message will be sent in onConnect callback
+            }
+            catch {
+                this.pendingMessage = null;
+            }
+        }
+        else if (this.status === 'connected') {
+            const userMessage = { role: 'user', content: msg };
+            this.messages = [...this.messages, userMessage];
+            this.inputText = '';
+            if (this.conversation && typeof this.conversation.sendUserMessage === 'function') {
+                this.conversation.sendUserMessage(msg);
+            }
+            else {
+                console.error('[Staylift] Cannot send message: no active conversation');
+            }
+            this.scrollToBottom();
+        }
+    }
+    async handleVoiceButton() {
+        if (this.status === 'disconnected' || this.status === null) {
+            await this.handleStartConversation(false);
+        }
+        else if (this.status === 'connected') {
+            await this.handleEndConversation();
+        }
+    }
+    startVolumeMonitoring() {
+        this.volumeInterval = setInterval(() => {
+            if (this.conversation && this.status === 'connected') {
+                const input = this.conversation.getInputVolume?.() ?? 0;
+                const output = this.conversation.getOutputVolume?.() ?? 0;
+                this.inputVolume = Math.min(1.0, Math.pow(input, 0.5) * 2.5);
+                this.outputVolume = Math.min(1.0, Math.pow(output, 0.5) * 2.5);
+            }
+        }, 50);
+    }
+    stopVolumeMonitoring() {
+        if (this.volumeInterval) {
+            clearInterval(this.volumeInterval);
+            this.volumeInterval = null;
+        }
+        this.inputVolume = 0;
+        this.outputVolume = 0;
+    }
+    cleanup() {
+        this.stopVolumeMonitoring();
+        if (this.conversation) {
+            this.conversation.endSession();
+            this.conversation = null;
+        }
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(t => t.stop());
+            this.mediaStream = null;
+        }
+    }
+    t(key) {
+        const translations = {
+            en: {
+                microphoneError: 'Please enable microphone permissions in your browser.',
+                connectionError: 'Connection failed. Please try again.',
+                tapToStart: 'Tap to start voice chat',
+                connected: 'Connected',
+                placeholder: 'Type a message...',
+                emptyTitle: 'Start a conversation',
+                emptyDesc: 'Type a message or tap the voice button',
+                starting: 'Starting conversation',
+                connecting: 'Connecting...',
+                ready: 'Ready to chat',
+                talkOrType: 'Start talking or type',
+                poweredBy: 'Powered by Staylift',
+                termsTitle: 'Terms and Conditions',
+                termsText: 'By clicking "Agree," and each time I interact with this AI agent, I consent to the recording, storage, and sharing of my communications with third-party service providers, and as described in the Privacy Policy.',
+                termsWarning: 'If you do not wish to have your conversations recorded, please refrain from using this service.',
+                termsAgree: 'Agree',
+                termsDecline: 'Decline',
+            },
+            pl: {
+                microphoneError: 'Proszę włączyć uprawnienia mikrofonu.',
+                connectionError: 'Połączenie nieudane. Spróbuj ponownie.',
+                tapToStart: 'Dotknij, aby rozpocząć rozmowę',
+                connected: 'Połączono',
+                placeholder: 'Napisz wiadomość...',
+                emptyTitle: 'Rozpocznij rozmowę',
+                emptyDesc: 'Napisz wiadomość lub naciśnij przycisk głosowy',
+                starting: 'Rozpoczynanie rozmowy',
+                connecting: 'Łączenie...',
+                ready: 'Gotowe do czatu',
+                talkOrType: 'Mów lub pisz',
+                poweredBy: 'Powered by Staylift',
+                termsTitle: 'Regulamin',
+                termsText: 'Klikając „Zgadzam się" i za każdym razem, gdy wchodzę w interakcję z tym agentem AI, wyrażam zgodę na nagrywanie, przechowywanie i udostępnianie moich komunikatów zewnętrznym dostawcom usług, zgodnie z Polityką Prywatności.',
+                termsWarning: 'Jeśli nie chcesz, aby Twoje rozmowy były nagrywane, prosimy o nieużywanie tej usługi.',
+                termsAgree: 'Zgadzam się',
+                termsDecline: 'Odrzuć',
+            },
+            de: {
+                microphoneError: 'Bitte aktivieren Sie die Mikrofonberechtigung in Ihrem Browser.',
+                connectionError: 'Verbindung fehlgeschlagen. Bitte versuchen Sie es erneut.',
+                tapToStart: 'Tippen, um den Voice-Chat zu starten',
+                connected: 'Verbunden',
+                placeholder: 'Nachricht eingeben...',
+                emptyTitle: 'Gespräch starten',
+                emptyDesc: 'Nachricht eingeben oder Voice-Button drücken',
+                starting: 'Gespräch wird gestartet',
+                connecting: 'Verbindung wird hergestellt...',
+                ready: 'Bereit zum Chatten',
+                talkOrType: 'Sprechen oder tippen',
+                poweredBy: 'Powered by Staylift',
+                termsTitle: 'Nutzungsbedingungen',
+                termsText: 'Durch Klicken auf „Zustimmen" und bei jeder Interaktion mit diesem KI-Agenten stimme ich der Aufzeichnung, Speicherung und Weitergabe meiner Kommunikation an Drittanbieter zu, wie in der Datenschutzrichtlinie beschrieben.',
+                termsWarning: 'Wenn Sie nicht möchten, dass Ihre Gespräche aufgezeichnet werden, verwenden Sie diesen Dienst bitte nicht.',
+                termsAgree: 'Zustimmen',
+                termsDecline: 'Ablehnen',
+            },
+        };
+        return translations[this.language]?.[key] || translations['en'][key] || key;
+    }
+    getPositionClasses() {
+        return `sl-x-${this.positionX} sl-y-${this.positionY}`;
+    }
+    // ============ RENDER ============
+    getThemeColors() {
+        if (this.mode === 'light') {
+            return {
+                bg: '#ffffff',
+                text: '#18181b',
+                muted: '#71717a',
+                border: '#e4e4e7',
+                surface: '#f4f4f5',
+            };
+        }
+        return {
+            bg: '#18181b',
+            text: '#ffffff',
+            muted: '#a1a1aa',
+            border: '#27272a',
+            surface: '#27272a',
+        };
+    }
+    render() {
+        const isTransitioning = this.status === 'connecting' || this.status === 'disconnecting';
+        const isCallActive = this.status === 'connected' && !this.isTextOnlyMode;
+        const theme = this.getThemeColors();
+        const cssVars = {
+            '--sl-primary': this.primaryColor,
+            '--sl-bg': theme.bg,
+            '--sl-text': theme.text,
+            '--sl-muted': theme.muted,
+            '--sl-border': theme.border,
+            '--sl-surface': theme.surface,
+        };
+        if (this.variant === 'inline') {
+            return (h("div", { class: "sl-widget sl-inline", style: cssVars }, this.renderCard(isCallActive, isTransitioning)));
+        }
+        return (h("div", { class: `sl-widget sl-floating ${this.getPositionClasses()}`, style: cssVars }, this.isExpanded ? (h("div", { class: "sl-card" }, this.renderCard(isCallActive, isTransitioning))) : (h("div", { class: "sl-fab-pill" }, h("div", { class: "sl-fab-avatar" }, this.avatarUrl ? (h("img", { src: this.avatarUrl, alt: "", class: "sl-fab-avatar-img" })) : (h("staylift-orb", { size: 48, primaryColor: this.primaryColor, inputVolume: this.inputVolume, outputVolume: this.outputVolume, isActive: isCallActive }))), h("div", { class: "sl-fab-content" }, h("span", { class: "sl-fab-prompt" }, this.fabPrompt), h("button", { class: "sl-fab-btn", onClick: this.handleToggleExpand }, this.fabButtonText))))));
+    }
+    renderCard(isCallActive, isTransitioning) {
+        if (!this.termsAccepted) {
+            return this.renderTerms();
+        }
+        return [
+            this.renderHeader(isTransitioning),
+            this.renderContent(),
+            this.renderFooter(isCallActive, isTransitioning),
+        ];
+    }
+    renderTerms() {
+        return (h("div", { class: "sl-terms" }, h("div", { class: "sl-terms-content" }, h("h3", { class: "sl-terms-title" }, this.t('termsTitle')), h("p", { class: "sl-terms-text" }, this.t('termsText')), h("p", { class: "sl-terms-warning" }, this.t('termsWarning'))), h("div", { class: "sl-terms-actions" }, h("button", { class: "sl-terms-btn sl-terms-btn--decline", onClick: this.handleDeclineTerms }, this.t('termsDecline')), h("button", { class: "sl-terms-btn sl-terms-btn--agree", onClick: this.handleAcceptTerms }, this.t('termsAgree')))));
+    }
+    renderHeader(isTransitioning) {
+        return (h("div", { class: "sl-header" }, h("div", { class: "sl-header-left" }, h("div", { class: "sl-orb-ring" }, this.avatarUrl ? (h("img", { src: this.avatarUrl, alt: "", class: "sl-header-avatar-img" })) : (h("staylift-orb", { size: 40, primaryColor: this.primaryColor, inputVolume: this.inputVolume, outputVolume: this.outputVolume, isActive: this.status === 'connected' && !this.isTextOnlyMode }))), h("div", { class: "sl-header-text" }, h("span", { class: "sl-title" }, this.brandName), h("span", { class: "sl-subtitle" }, this.errorMessage ? (h("span", { class: "sl-error" }, this.errorMessage)) : this.status === 'disconnected' ? (this.t('tapToStart')) : this.status === 'connected' ? (h("span", { class: "sl-connected" }, this.t('connected'))) : isTransitioning ? (h("span", { class: "sl-shimmer" }, this.status)) : null))), h("div", { class: "sl-header-right" }, h("div", { class: `sl-dot ${this.status === 'connected' ? 'sl-dot--active' : ''} ${isTransitioning ? 'sl-dot--pulse' : ''}` }), this.variant === 'floating' && (h("button", { class: "sl-close", onClick: this.handleToggleExpand }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M18 6L6 18M6 6l12 12" })))))));
+    }
+    renderContent() {
+        const isConnecting = this.status === 'connecting';
+        const isConnected = this.status === 'connected';
+        return (h("div", { class: "sl-content", ref: (el) => this.messagesContainer = el ?? null }, this.messages.length === 0 ? (h("div", { class: "sl-empty" }, h("staylift-orb", { size: 48, primaryColor: this.primaryColor, isActive: false }), h("h3", { class: "sl-empty-title" }, isConnecting ? this.t('starting') : isConnected ? this.t('talkOrType') : this.t('emptyTitle')), h("p", { class: "sl-empty-desc" }, isConnecting ? this.t('connecting') : isConnected ? this.t('ready') : this.t('emptyDesc')))) : (this.messages.map((message, index) => (h("div", { class: `sl-msg sl-msg--${message.role}`, key: index }, h("div", { class: "sl-msg-row" }, h("div", { class: "sl-msg-bubble" }, message.content), message.role === 'assistant' && (h("div", { class: "sl-msg-orb" }, h("staylift-orb", { size: 24, primaryColor: this.primaryColor, isActive: false })))), message.role === 'assistant' && (h("div", { class: "sl-msg-actions" }, h("button", { class: "sl-action", onClick: () => this.copyToClipboard(message.content, index) }, this.copiedIndex === index ? (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { points: "20 6 9 17 4 12" }))) : (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), h("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))))))))))));
+    }
+    renderFooter(isCallActive, isTransitioning) {
+        return (h("div", { class: "sl-footer" }, this.showBranding && (h("div", { class: "sl-branding" }, h("a", { href: "https://staylift.com", target: "_blank", rel: "noopener noreferrer" }, this.t('poweredBy')))), h("div", { class: "sl-input-row" }, h("input", { type: "text", class: "sl-input", placeholder: this.t('placeholder'), value: this.inputText, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: isTransitioning }), h("button", { class: "sl-btn", onClick: () => this.handleSendText(), disabled: !this.inputText.trim() || isTransitioning }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), h("polygon", { points: "22 2 15 22 11 13 2 9 22 2" }))), !isCallActive ? (h("button", { class: "sl-btn", onClick: () => this.handleVoiceButton(), disabled: isTransitioning }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M2 10v3" }), h("path", { d: "M6 6v11" }), h("path", { d: "M10 3v18" }), h("path", { d: "M14 8v7" }), h("path", { d: "M18 5v13" }), h("path", { d: "M22 10v3" })))) : (h("button", { class: "sl-btn sl-btn--end", onClick: () => this.handleVoiceButton(), disabled: isTransitioning }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { d: "M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91" }), h("line", { x1: "22", y1: "2", x2: "2", y2: "22" })))))));
+    }
+    static get is() { return "staylift-widget"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["staylift-widget.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["staylift-widget.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "agentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "agent-id"
+            },
+            "positionX": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "WidgetPositionX",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {
+                        "WidgetPositionX": {
+                            "location": "local",
+                            "path": "/Users/maciejkonczal/Documents/Projects/staylift-widget/src/components/staylift-widget/staylift-widget.tsx",
+                            "id": "src/components/staylift-widget/staylift-widget.tsx::WidgetPositionX"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position-x",
+                "defaultValue": "'right'"
+            },
+            "positionY": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "WidgetPositionY",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {
+                        "WidgetPositionY": {
+                            "location": "local",
+                            "path": "/Users/maciejkonczal/Documents/Projects/staylift-widget/src/components/staylift-widget/staylift-widget.tsx",
+                            "id": "src/components/staylift-widget/staylift-widget.tsx::WidgetPositionY"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position-y",
+                "defaultValue": "'bottom'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "WidgetVariant",
+                    "resolved": "\"floating\" | \"inline\"",
+                    "references": {
+                        "WidgetVariant": {
+                            "location": "local",
+                            "path": "/Users/maciejkonczal/Documents/Projects/staylift-widget/src/components/staylift-widget/staylift-widget.tsx",
+                            "id": "src/components/staylift-widget/staylift-widget.tsx::WidgetVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'floating'"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "WidgetMode",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "WidgetMode": {
+                            "location": "local",
+                            "path": "/Users/maciejkonczal/Documents/Projects/staylift-widget/src/components/staylift-widget/staylift-widget.tsx",
+                            "id": "src/components/staylift-widget/staylift-widget.tsx::WidgetMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'dark'"
+            },
+            "primaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-color",
+                "defaultValue": "'#6366f1'"
+            },
+            "brandName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "brand-name",
+                "defaultValue": "'Customer Support'"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "'en'"
+            },
+            "autoExpand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-expand",
+                "defaultValue": "false"
+            },
+            "showBranding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-branding",
+                "defaultValue": "true"
+            },
+            "avatarUrl": {
+                "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": "avatar-url"
+            },
+            "fabPrompt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fab-prompt",
+                "defaultValue": "'Do you need help?'"
+            },
+            "fabButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fab-button-text",
+                "defaultValue": "'Start'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "status": {},
+            "isExpanded": {},
+            "termsAccepted": {},
+            "errorMessage": {},
+            "inputVolume": {},
+            "outputVolume": {},
+            "messages": {},
+            "inputText": {},
+            "copiedIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "conversationStarted",
+                "name": "conversationStarted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "conversationEnded",
+                "name": "conversationEnded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "widgetError",
+                "name": "widgetError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ message: string; code?: string }",
+                    "resolved": "{ message: string; code?: string | undefined; }",
+                    "references": {}
+                }
+            }, {
+                "method": "statusChanged",
+                "name": "statusChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "WidgetStatus",
+                    "resolved": "\"connected\" | \"connecting\" | \"disconnected\" | \"disconnecting\"",
+                    "references": {
+                        "WidgetStatus": {
+                            "location": "local",
+                            "path": "/Users/maciejkonczal/Documents/Projects/staylift-widget/src/components/staylift-widget/staylift-widget.tsx",
+                            "id": "src/components/staylift-widget/staylift-widget.tsx::WidgetStatus"
+                        }
+                    }
+                }
+            }, {
+                "method": "messageReceived",
+                "name": "messageReceived",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ChatMessage",
+                    "resolved": "ChatMessage",
+                    "references": {
+                        "ChatMessage": {
+                            "location": "global",
+                            "id": "global::ChatMessage"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "startConversation": {
+                "complexType": {
+                    "signature": "(textOnly?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "textOnly",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "endConversation": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getStatus": {
+                "complexType": {
+                    "signature": "() => Promise<WidgetStatus>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "WidgetStatus": {
+                            "location": "local",
+                            "path": "/Users/maciejkonczal/Documents/Projects/staylift-widget/src/components/staylift-widget/staylift-widget.tsx",
+                            "id": "src/components/staylift-widget/staylift-widget.tsx::WidgetStatus"
+                        }
+                    },
+                    "return": "Promise<WidgetStatus>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sendMessage": {
+                "complexType": {
+                    "signature": "(text: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "text",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}