bettercx-widget/dist/esm-es5/bcx-message-composer.entry.js

Professional AI-powered chat widget for BetterCX platform. Seamlessly integrate intelligent customer support into any website.

import{r as registerInstance,c as createEvent,h}from"./index-KfgIcFMr.js";var 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}}';var BcxMessageComposer=function(){function r(r){var a=this;this.disabled=false;this.loading=false;this.placeholder="Type your message...";this.maxLength=1e3;this.message="";this.handleInput=function(r){var t=r.target;a.message=t.value;a.adjustTextareaHeight()};this.handleKeyDown=function(r){if(r.key==="Enter"&&!r.shiftKey){r.preventDefault();a.submitMessage()}};this.handleSubmit=function(r){r.preventDefault();a.submitMessage()};registerInstance(this,r);this.messageSubmit=createEvent(this,"messageSubmit")}r.prototype.submitMessage=function(){if(this.message.trim()&&!this.disabled){this.messageSubmit.emit(this.message.trim());this.message="";this.adjustTextareaHeight()}};r.prototype.adjustTextareaHeight=function(){if(this.textareaRef){this.textareaRef.style.height="auto";this.textareaRef.style.height=Math.min(this.textareaRef.scrollHeight,120)+"px"}};r.prototype.render=function(){var r=this;var a=!this.message.trim()||this.disabled||this.loading;var t=this.maxLength-this.message.length;var e=t<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:function(a){return r.textareaRef=a},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"}),e&&h("div",{key:"7f55874355b21542646e4f9daeb8ea5fc13c801e",class:"bcx-composer__char-count"},t)),h("button",{key:"58f0798bcc864324641bac32c283ef5bcbe8a386",type:"submit",class:"bcx-composer__submit",disabled:a,"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"})))))};return r}();BcxMessageComposer.style=bcxMessageComposerCss;export{BcxMessageComposer as bcx_message_composer};
//# sourceMappingURL=bcx-message-composer.entry.js.map