bettercx-widget
Version:
Professional AI-powered chat widget for BetterCX platform. Seamlessly integrate intelligent customer support into any website.
165 lines (164 loc) • 6.97 kB
JavaScript
import { h } from "@stencil/core";
export class BcxMessageComposer {
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 (h("form", { key: '531cc0588e0d38fa726518cfef2be015513f102c', class: "bcx-composer", onSubmit: this.handleSubmit }, h("div", { key: 'eeb99f7312bd44449fadde0ac34a67f769f589f7', class: "bcx-composer__input-container" }, 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 && h("div", { key: '7f55874355b21542646e4f9daeb8ea5fc13c801e', class: "bcx-composer__char-count" }, remainingChars)), h("button", { key: '58f0798bcc864324641bac32c283ef5bcbe8a386', type: "submit", class: "bcx-composer__submit", disabled: isSubmitDisabled, "aria-label": "Send message", "data-loading": this.loading ? 'true' : 'false' }, h("span", { key: 'd8ccd5fa58319fc602522abda1920cd45e11df8a', class: "bcx-composer__submit-icon" }, this.loading ? (h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "12", y1: "2", x2: "12", y2: "6" }), h("line", { x1: "12", y1: "18", x2: "12", y2: "22" }), h("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }), h("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }), h("line", { x1: "2", y1: "12", x2: "6", y2: "12" }), h("line", { x1: "18", y1: "12", x2: "22", y2: "12" }), h("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }), h("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" }))) : (h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), h("polygon", { points: "22,2 15,22 11,13 2,9 22,2" })))))));
}
static get is() { return "bcx-message-composer"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["bcx-message-composer.scss"]
};
}
static get styleUrls() {
return {
"$": ["bcx-message-composer.css"]
};
}
static get properties() {
return {
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"attribute": "loading",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"placeholder": {
"type": "string",
"attribute": "placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'Type your message...'"
},
"maxLength": {
"type": "number",
"attribute": "max-length",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "1000"
}
};
}
static get states() {
return {
"message": {}
};
}
static get events() {
return [{
"method": "messageSubmit",
"name": "messageSubmit",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
}
//# sourceMappingURL=bcx-message-composer.js.map