bettercx-widget
Version:
Professional AI-powered chat widget for BetterCX platform. Seamlessly integrate intelligent customer support into any website.
59 lines (54 loc) • 13.5 kB
JavaScript
'use strict';
var index = require('./index-F8724PmO.js');
const bcxMessageComposerCss = ":host{display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.bcx-composer{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;gap:var(--bcx-space-3, 12px);width:100%;min-height:48px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;position:relative}.bcx-composer__input-container{-ms-flex:1 1 auto;flex:1 1 auto;position:relative;min-width:0;width:0;}.bcx-composer__input{width:100%;min-height:48px;max-height:120px;padding:var(--bcx-space-3, 12px) var(--bcx-space-4, 16px);border:1px solid var(--bcx-border-subtle, rgba(0, 0, 0, 0.1));border-radius:var(--bcx-radius-2xl, 24px);background:var(--bcx-bg-secondary, #f8f9fa);color:var(--bcx-text-primary, #1a1a1a);font-family:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;font-size:var(--bcx-text-base, 14px);line-height:1.5;resize:none;outline:none;-webkit-transition:all var(--bcx-transition-normal, 0.25s ease);transition:all var(--bcx-transition-normal, 0.25s ease);-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:top;font-weight:400;position:relative;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.bcx-composer__input::before{content:\"\";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg, color-mix(in srgb, var(--bcx-primary-500, #007bff) 3%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--bcx-primary-500, #007bff) 2%, transparent) 100%);opacity:0;-webkit-transition:opacity var(--bcx-transition-fast, 0.15s ease);transition:opacity var(--bcx-transition-fast, 0.15s ease);pointer-events:none}.bcx-composer__input:focus{border-color:var(--bcx-primary-400, #667eea);-webkit-box-shadow:0 0 0 3px var(--bcx-primary-100, rgba(102, 126, 234, 0.1)), 0 2px 8px color-mix(in srgb, var(--bcx-primary-500, #007bff) 8%, transparent);box-shadow:0 0 0 3px var(--bcx-primary-100, rgba(102, 126, 234, 0.1)), 0 2px 8px color-mix(in srgb, var(--bcx-primary-500, #007bff) 8%, transparent);background:var(--bcx-bg-primary, #ffffff)}.bcx-composer__input:focus::before{opacity:1}.bcx-composer__input:hover:not(:focus){border-color:var(--bcx-border-soft, rgba(0, 0, 0, 0.15));background:var(--bcx-bg-tertiary, #f5f5f5)}.bcx-composer__input:disabled{opacity:0.6;cursor:not-allowed;background:var(--bcx-bg-secondary, #f8f9fa)}.bcx-composer__input::-webkit-input-placeholder{color:var(--bcx-text-tertiary, color-mix(in srgb, var(--bcx-text-primary, #1a1a1a) 50%, transparent));font-weight:400}.bcx-composer__input::-moz-placeholder{color:var(--bcx-text-tertiary, color-mix(in srgb, var(--bcx-text-primary, #1a1a1a) 50%, transparent));font-weight:400}.bcx-composer__input:-ms-input-placeholder{color:var(--bcx-text-tertiary, color-mix(in srgb, var(--bcx-text-primary, #1a1a1a) 50%, transparent));font-weight:400}.bcx-composer__input::-ms-input-placeholder{color:var(--bcx-text-tertiary, color-mix(in srgb, var(--bcx-text-primary, #1a1a1a) 50%, transparent));font-weight:400}.bcx-composer__input::placeholder{color:var(--bcx-text-tertiary, color-mix(in srgb, var(--bcx-text-primary, #1a1a1a) 50%, transparent));font-weight:400}.bcx-composer__char-count{position:absolute;bottom:var(--bcx-space-1, 4px);right:var(--bcx-space-2, 8px);font-size:var(--bcx-text-xs, 11px);color:var(--bcx-primary-600, #f59e0b);background:var(--bcx-bg-elevated, #ffffff);padding:var(--bcx-space-1, 2px) var(--bcx-space-1, 6px);border-radius:var(--bcx-radius-sm, 4px);pointer-events:none;font-weight:600;-webkit-box-shadow:0 1px 3px color-mix(in srgb, var(--bcx-text-primary, #1a1a1a) 8%, transparent);box-shadow:0 1px 3px color-mix(in srgb, var(--bcx-text-primary, #1a1a1a) 8%, transparent);border:1px solid var(--bcx-border-subtle, rgba(0, 0, 0, 0.1));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.bcx-composer__submit{width:48px;height:48px;border:none;border-radius:var(--bcx-radius-full, 50%);background:var(--bcx-primary-500, #007bff);color:var(--bcx-bg-primary, white);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:18px;font-weight:500;-webkit-transition:all var(--bcx-transition-normal, 0.25s ease);transition:all var(--bcx-transition-normal, 0.25s ease);-ms-flex-negative:0;flex-shrink:0;-webkit-box-shadow:0 4px 12px color-mix(in srgb, var(--bcx-primary-500, #007bff) 25%, transparent), 0 1px 3px color-mix(in srgb, var(--bcx-primary-500, #007bff) 15%, transparent);box-shadow:0 4px 12px color-mix(in srgb, var(--bcx-primary-500, #007bff) 25%, transparent), 0 1px 3px color-mix(in srgb, var(--bcx-primary-500, #007bff) 15%, transparent);margin-bottom:0;position:relative;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.bcx-composer__submit::before{content:\"\";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg, color-mix(in srgb, var(--bcx-primary-500, #007bff) 20%, transparent) 0%, transparent 50%, color-mix(in srgb, var(--bcx-primary-500, #007bff) 10%, transparent) 100%);opacity:0;-webkit-transition:opacity var(--bcx-transition-fast, 0.15s ease);transition:opacity var(--bcx-transition-fast, 0.15s ease);pointer-events:none}.bcx-composer__submit:hover:not(:disabled){background:var(--bcx-primary-600, #0056b3);-webkit-transform:translateY(-2px) scale(1.05);transform:translateY(-2px) scale(1.05);-webkit-box-shadow:0 6px 20px color-mix(in srgb, var(--bcx-primary-500, #007bff) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--bcx-primary-500, #007bff) 20%, transparent);box-shadow:0 6px 20px color-mix(in srgb, var(--bcx-primary-500, #007bff) 35%, transparent), 0 2px 6px color-mix(in srgb, var(--bcx-primary-500, #007bff) 20%, transparent)}.bcx-composer__submit:hover:not(:disabled)::before{opacity:1}.bcx-composer__submit:active:not(:disabled){-webkit-transform:translateY(-1px) scale(1.02);transform:translateY(-1px) scale(1.02);background:var(--bcx-primary-700, #004085);-webkit-box-shadow:0 3px 10px color-mix(in srgb, var(--bcx-primary-500, #007bff) 30%, transparent);box-shadow:0 3px 10px color-mix(in srgb, var(--bcx-primary-500, #007bff) 30%, transparent)}.bcx-composer__submit:disabled{opacity:0.5;cursor:not-allowed;-webkit-transform:none;transform:none;background:var(--bcx-border-soft, #e2e8f0);-webkit-box-shadow:0 1px 3px color-mix(in srgb, var(--bcx-text-primary, #1a1a1a) 8%, transparent);box-shadow:0 1px 3px color-mix(in srgb, var(--bcx-text-primary, #1a1a1a) 8%, transparent);color:var(--bcx-text-tertiary, #8b8b8b)}.bcx-composer__submit:focus{outline:none;-webkit-box-shadow:0 0 0 3px var(--bcx-primary-100, rgba(0, 123, 255, 0.3)), 0 4px 12px color-mix(in srgb, var(--bcx-primary-500, #007bff) 25%, transparent);box-shadow:0 0 0 3px var(--bcx-primary-100, rgba(0, 123, 255, 0.3)), 0 4px 12px color-mix(in srgb, var(--bcx-primary-500, #007bff) 25%, transparent)}.bcx-composer__submit-icon{-webkit-transition:-webkit-transform var(--bcx-transition-normal, 0.25s ease);transition:-webkit-transform var(--bcx-transition-normal, 0.25s ease);transition:transform var(--bcx-transition-normal, 0.25s ease);transition:transform var(--bcx-transition-normal, 0.25s ease), -webkit-transform var(--bcx-transition-normal, 0.25s ease);-webkit-filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bcx-composer__submit-icon svg{width:18px;height:18px;stroke-width:2;-webkit-transition:all var(--bcx-transition-fast, 0.15s ease);transition:all var(--bcx-transition-fast, 0.15s ease);display:block;-ms-flex-negative:0;flex-shrink:0}.bcx-composer__submit:hover:not(:disabled) .bcx-composer__submit-icon{-webkit-transform:scale(1.1);transform:scale(1.1)}.bcx-composer__submit:hover:not(:disabled) .bcx-composer__submit-icon svg{stroke-width:2.2}.bcx-composer__submit:active:not(:disabled) .bcx-composer__submit-icon{-webkit-transform:scale(0.95);transform:scale(0.95)}.bcx-composer__submit:active:not(:disabled) .bcx-composer__submit-icon svg{stroke-width:1.8}.bcx-composer__submit[data-loading=true] .bcx-composer__submit-icon svg{-webkit-animation:bcx-spin 1s linear infinite;animation:bcx-spin 1s linear infinite}.bcx-composer__input:focus+.bcx-composer__char-count{opacity:1}@-webkit-keyframes bcx-input-focus{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.02);transform:scale(1.02)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bcx-input-focus{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.02);transform:scale(1.02)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes bcx-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes bcx-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.bcx-composer__input:focus{-webkit-animation:bcx-input-focus 0.3s cubic-bezier(0.16, 1, 0.3, 1);animation:bcx-input-focus 0.3s cubic-bezier(0.16, 1, 0.3, 1)}@media (prefers-contrast: high){.bcx-composer__input{border-width:2px;border-color:var(--bcx-text-primary, #000000)}.bcx-composer__submit{border:2px solid var(--bcx-text-primary, #000000)}}@media (prefers-reduced-motion: reduce){.bcx-composer__input,.bcx-composer__submit,.bcx-composer__submit-icon{-webkit-transition:none;transition:none}.bcx-composer__submit:hover:not(:disabled){-webkit-transform:none;transform:none}.bcx-composer__input:focus{-webkit-animation:none;animation:none}}";
const BcxMessageComposer = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.messageSubmit = index.createEvent(this, "messageSubmit");
}
disabled = false;
loading = false;
placeholder = 'Type your message...';
maxLength = 1000;
message = '';
messageSubmit;
textareaRef;
handleInput = (event) => {
const target = event.target;
this.message = target.value;
this.adjustTextareaHeight();
};
handleKeyDown = (event) => {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
this.submitMessage();
}
};
handleSubmit = (event) => {
event.preventDefault();
this.submitMessage();
};
submitMessage() {
if (this.message.trim() && !this.disabled) {
this.messageSubmit.emit(this.message.trim());
this.message = '';
this.adjustTextareaHeight();
}
}
adjustTextareaHeight() {
if (this.textareaRef) {
this.textareaRef.style.height = 'auto';
this.textareaRef.style.height = Math.min(this.textareaRef.scrollHeight, 120) + 'px';
}
}
render() {
const isSubmitDisabled = !this.message.trim() || this.disabled || this.loading;
const remainingChars = this.maxLength - this.message.length;
const isNearLimit = remainingChars < 50;
return (index.h("form", { key: '531cc0588e0d38fa726518cfef2be015513f102c', class: "bcx-composer", onSubmit: this.handleSubmit }, index.h("div", { key: 'eeb99f7312bd44449fadde0ac34a67f769f589f7', class: "bcx-composer__input-container" }, index.h("textarea", { key: '08f000146b987af7a1a2a4a1dd4b0c12e45610e5', ref: el => (this.textareaRef = el), class: "bcx-composer__input", value: this.message, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxLength, rows: 1, "aria-label": "Message input" }), isNearLimit && index.h("div", { key: '7f55874355b21542646e4f9daeb8ea5fc13c801e', class: "bcx-composer__char-count" }, remainingChars)), index.h("button", { key: '58f0798bcc864324641bac32c283ef5bcbe8a386', type: "submit", class: "bcx-composer__submit", disabled: isSubmitDisabled, "aria-label": "Send message", "data-loading": this.loading ? 'true' : 'false' }, index.h("span", { key: 'd8ccd5fa58319fc602522abda1920cd45e11df8a', class: "bcx-composer__submit-icon" }, this.loading ? (index.h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), index.h("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), index.h("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), index.h("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), index.h("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), index.h("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), index.h("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), index.h("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" }))) : (index.h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), index.h("polygon", { points: "22,2 15,22 11,13 2,9 22,2" })))))));
}
};
BcxMessageComposer.style = bcxMessageComposerCss;
exports.bcx_message_composer = BcxMessageComposer;
//# sourceMappingURL=bcx-message-composer.entry.cjs.js.map
//# sourceMappingURL=bcx-message-composer.cjs.entry.js.map