@hidemikimura/chit-ui 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +58 -0
- package/README.md +206 -9
- package/dist/chit-ui.iife.min.js +287 -60
- package/dist/chit-ui.iife.min.js.map +1 -1
- package/dist/chit-ui.min.js +287 -60
- package/dist/chit-ui.min.js.map +1 -1
- package/dist/types/bundle.d.ts +1 -0
- package/dist/types/chit-ui.d.ts +25 -0
- package/dist/types/events.d.ts +2 -0
- package/dist/types/global.d.ts +2 -0
- package/dist/types/i18n/labels.d.ts +8 -0
- package/dist/types/render/composer.d.ts +0 -1
- package/dist/types/theme/default-theme.d.ts +22 -1
- package/dist/types/themes/green.d.ts +16 -0
- package/dist/types/themes/index.d.ts +1 -0
- package/dist/types/types.d.ts +65 -4
- package/package.json +6 -1
- package/src/bundle.js +1 -0
- package/src/chit-ui.js +37 -0
- package/src/events.js +2 -0
- package/src/global.d.ts +2 -0
- package/src/i18n/labels.js +6 -0
- package/src/render/composer.js +58 -0
- package/src/render/message.js +13 -4
- package/src/render/panel.js +56 -10
- package/src/styles/composer.css.js +39 -0
- package/src/styles/host.css.js +2 -0
- package/src/styles/message.css.js +117 -3
- package/src/styles/panel.css.js +21 -2
- package/src/theme/default-theme.js +21 -2
- package/src/theme/theme-to-css.js +5 -0
- package/src/themes/green.js +47 -0
- package/src/themes/index.js +15 -0
- package/src/types.js +20 -6
package/dist/chit-ui.iife.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;let o=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(s&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&n.set(e,t))}return t}toString(){return this.cssText}};const r=(t,...e)=>{const s=1===t.length?t[0]:e.reduce((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1],t[0]);return new o(s,t,i)},a=s?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:h,defineProperty:l,getOwnPropertyDescriptor:c,getOwnPropertyNames:d,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,m=globalThis,f=m.trustedTypes,g=f?f.emptyScript:"",b=m.reactiveElementPolyfillSupport,v=(t,e)=>t,y={toAttribute(t,e){switch(e){case Boolean:t=t?g:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},$=(t,e)=>!h(t,e),w={attribute:!0,type:String,converter:y,reflect:!1,useDefault:!1,hasChanged:$};Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;let x=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=w){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);void 0!==i&&l(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:n}=c(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:i,set(e){const o=i?.call(this);n?.call(this,e),this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??w}static _$Ei(){if(this.hasOwnProperty(v("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(v("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(v("properties"))){const t=this.properties,e=[...d(t),...p(t)];for(const s of e)this.createProperty(s,t[s])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,s]of e)this.elementProperties.set(t,s)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const s=this._$Eu(t,e);void 0!==s&&this._$Eh.set(s,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Eu(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{if(s)t.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const s of i){const i=document.createElement("style"),n=e.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=s.cssText,t.appendChild(i)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(void 0!==i&&!0===s.reflect){const n=(void 0!==s.converter?.toAttribute?s.converter:y).toAttribute(e,s.type);this._$Em=t,null==n?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(t,e){const s=this.constructor,i=s._$Eh.get(t);if(void 0!==i&&this._$Em!==i){const t=s.getPropertyOptions(i),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:y;this._$Em=i;const o=n.fromAttribute(e,t.type);this[i]=o??this._$Ej?.get(i)??o,this._$Em=null}}requestUpdate(t,e,s,i=!1,n){if(void 0!==t){const o=this.constructor;if(!1===i&&(n=this[t]),s??=o.getPropertyOptions(t),!((s.hasChanged??$)(n,e)||s.useDefault&&s.reflect&&n===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,s))))return;this.C(t,e,s)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:n},o){s&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,o??e??this[t]),!0!==n||void 0!==o)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),!0===i&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,s]of t){const{wrapped:t}=s,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,s,i)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}};x.elementStyles=[],x.shadowRootOptions={mode:"open"},x[v("elementProperties")]=new Map,x[v("finalized")]=new Map,b?.({ReactiveElement:x}),(m.reactiveElementVersions??=[]).push("2.1.2");const _=globalThis,S=t=>t,A=_.trustedTypes,E=A?A.createPolicy("lit-html",{createHTML:t=>t}):void 0,C="$lit$",k=`lit$${Math.random().toFixed(9).slice(2)}$`,T="?"+k,O=`<${T}>`,U=document,P=()=>U.createComment(""),L=t=>null===t||"object"!=typeof t&&"function"!=typeof t,R=Array.isArray,z="[ \t\n\f\r]",M=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,N=/-->/g,H=/>/g,B=RegExp(`>|${z}(?:([^\\s"'>=/]+)(${z}*=${z}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),I=/'/g,j=/"/g,D=/^(?:script|style|textarea|title)$/i,q=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),F=q(1),W=q(2),K=Symbol.for("lit-noChange"),G=Symbol.for("lit-nothing"),J=new WeakMap,V=U.createTreeWalker(U,129);function Y(t,e){if(!R(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(e):e}class Z{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let n=0,o=0;const r=t.length-1,a=this.parts,[h,l]=((t,e)=>{const s=t.length-1,i=[];let n,o=2===e?"<svg>":3===e?"<math>":"",r=M;for(let e=0;e<s;e++){const s=t[e];let a,h,l=-1,c=0;for(;c<s.length&&(r.lastIndex=c,h=r.exec(s),null!==h);)c=r.lastIndex,r===M?"!--"===h[1]?r=N:void 0!==h[1]?r=H:void 0!==h[2]?(D.test(h[2])&&(n=RegExp("</"+h[2],"g")),r=B):void 0!==h[3]&&(r=B):r===B?">"===h[0]?(r=n??M,l=-1):void 0===h[1]?l=-2:(l=r.lastIndex-h[2].length,a=h[1],r=void 0===h[3]?B:'"'===h[3]?j:I):r===j||r===I?r=B:r===N||r===H?r=M:(r=B,n=void 0);const d=r===B&&t[e+1].startsWith("/>")?" ":"";o+=r===M?s+O:l>=0?(i.push(a),s.slice(0,l)+C+s.slice(l)+k+d):s+k+(-2===l?e:d)}return[Y(t,o+(t[s]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]})(t,e);if(this.el=Z.createElement(h,s),V.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=V.nextNode())&&a.length<r;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(C)){const e=l[o++],s=i.getAttribute(t).split(k),r=/([.?@])?(.*)/.exec(e);a.push({type:1,index:n,name:r[2],strings:s,ctor:"."===r[1]?st:"?"===r[1]?it:"@"===r[1]?nt:et}),i.removeAttribute(t)}else t.startsWith(k)&&(a.push({type:6,index:n}),i.removeAttribute(t));if(D.test(i.tagName)){const t=i.textContent.split(k),e=t.length-1;if(e>0){i.textContent=A?A.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],P()),V.nextNode(),a.push({type:2,index:++n});i.append(t[e],P())}}}else if(8===i.nodeType)if(i.data===T)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=i.data.indexOf(k,t+1));)a.push({type:7,index:n}),t+=k.length-1}n++}}static createElement(t,e){const s=U.createElement("template");return s.innerHTML=t,s}}function Q(t,e,s=t,i){if(e===K)return e;let n=void 0!==i?s._$Co?.[i]:s._$Cl;const o=L(e)?void 0:e._$litDirective$;return n?.constructor!==o&&(n?._$AO?.(!1),void 0===o?n=void 0:(n=new o(t),n._$AT(t,s,i)),void 0!==i?(s._$Co??=[])[i]=n:s._$Cl=n),void 0!==n&&(e=Q(t,n._$AS(t,e.values),n,i)),e}class X{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??U).importNode(e,!0);V.currentNode=i;let n=V.nextNode(),o=0,r=0,a=s[0];for(;void 0!==a;){if(o===a.index){let e;2===a.type?e=new tt(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new ot(n,this,t)),this._$AV.push(e),a=s[++r]}o!==a?.index&&(n=V.nextNode(),o++)}return V.currentNode=U,i}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class tt{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=G,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),L(t)?t===G||null==t||""===t?(this._$AH!==G&&this._$AR(),this._$AH=G):t!==this._$AH&&t!==K&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>R(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==G&&L(this._$AH)?this._$AA.nextSibling.data=t:this.T(U.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=Z.createElement(Y(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new X(i,this),s=t.u(this.options);t.p(e),this.T(s),this._$AH=t}}_$AC(t){let e=J.get(t.strings);return void 0===e&&J.set(t.strings,e=new Z(t)),e}k(t){R(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const n of t)i===e.length?e.push(s=new tt(this.O(P()),this.O(P()),this,this.options)):s=e[i],s._$AI(n),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=S(t).nextSibling;S(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class et{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,n){this.type=1,this._$AH=G,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=G}_$AI(t,e=this,s,i){const n=this.strings;let o=!1;if(void 0===n)t=Q(this,t,e,0),o=!L(t)||t!==this._$AH&&t!==K,o&&(this._$AH=t);else{const i=t;let r,a;for(t=n[0],r=0;r<n.length-1;r++)a=Q(this,i[s+r],e,r),a===K&&(a=this._$AH[r]),o||=!L(a)||a!==this._$AH[r],a===G?t=G:t!==G&&(t+=(a??"")+n[r+1]),this._$AH[r]=a}o&&!i&&this.j(t)}j(t){t===G?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class st extends et{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===G?void 0:t}}class it extends et{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==G)}}class nt extends et{constructor(t,e,s,i,n){super(t,e,s,i,n),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??G)===K)return;const s=this._$AH,i=t===G&&s!==G||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==G&&(s===G||i);i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class ot{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const rt={I:tt},at=_.litHtmlPolyfillSupport;at?.(Z,tt),(_.litHtmlVersions??=[]).push("3.3.3");const ht=(t,e,s)=>{const i=s?.renderBefore??e;let n=i._$litPart$;if(void 0===n){const t=s?.renderBefore??null;i._$litPart$=n=new tt(e.insertBefore(P(),t),t,void 0,s??{})}return n._$AI(t),n},lt=globalThis;let ct=class extends x{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=ht(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return K}};ct._$litElement$=!0,ct.finalized=!0,lt.litElementHydrateSupport?.({LitElement:ct});const dt=lt.litElementPolyfillSupport;dt?.({LitElement:ct}),(lt.litElementVersions??=[]).push("4.2.2");const pt=1,ut=2,mt=3,ft=4,gt=t=>(...e)=>({_$litDirective$:t,values:e});let bt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}},vt=class extends bt{constructor(t){if(super(t),this.it=G,t.type!==ut)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===G||null==t)return this._t=void 0,this.it=t;if(t===K)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};vt.directiveName="unsafeHTML",vt.resultType=1;const yt=gt(vt),$t=Object.freeze({SUBMIT:"chat-submit",BEFORE_OPEN:"chat-before-open",OPEN:"chat-open",BEFORE_CLOSE:"chat-before-close",CLOSE:"chat-close",HIDE:"chat-hide",SHOW:"chat-show",STATE_CHANGE:"chat-state-change",INPUT:"chat-input",MESSAGE_RENDER:"chat-message-render",MESSAGE_CLICK:"chat-message-click",SCROLL_TOP:"chat-scroll-top",BREAKPOINT_CHANGE:"chat-breakpoint-change"});function wt(t,e,s,{cancelable:i=!1}={}){return t.dispatchEvent(new CustomEvent(e,{detail:s,bubbles:!0,composed:!0,cancelable:i}))}const xt={closed:"launcher",open:"panel",hidden:null};class _t{#t;#e;#s;#i;#n="closed";#o="closed";#r=!1;#a=0;#h=null;#l=null;#c=!1;constructor(t,{animation:e,keepsLauncher:s,onOpened:i}){this.#t=t,this.#e=e,this.#s=s,this.#i=i,t.addController(this)}get renderedState(){return this.#o}get applying(){return this.#r}hostConnected(){this.#n=this.#t.state,this.#o=this.#t.state,this.#t.dataset.renderedState=this.#o}hostDisconnected(){this.#l?.(),this.#l=null,this.#h?.(!1),this.#h=null}hostUpdated(){this.#t.dataset.renderedState=this.#o}request(t,e){const s=this.#n;return t===s?Promise.resolve(!0):this.#d(s,t,e)?(this.#p(),this.#n=t,this.#u(t),wt(this.#t,$t.STATE_CHANGE,{from:s,to:t,trigger:e}),this.#m(s,t,e)):(this.#u(s),Promise.resolve(!1))}#d(t,e,s){return"open"===e?wt(this.#t,$t.BEFORE_OPEN,{from:t,trigger:s},{cancelable:!0}):"closed"!==e||"open"!==t||wt(this.#t,$t.BEFORE_CLOSE,{from:t,trigger:s},{cancelable:!0})}#p(){this.#a+=1,this.#l?.(),this.#l=null,this.#h?.(!1),this.#h=null,this.#o!==this.#n&&(this.#o=this.#n,this.#t.requestUpdate())}#m(t,e,s){const i=this.#a,n=new Promise(t=>{this.#h=t});return(async()=>{if(this.#c=this.#f(),await this.#t.updateComplete,i!==this.#a)return;const n=this.#g(t);if(n&&!this.#b(t,e)&&(await this.#v(n,"exit",this.#e(t,e,"exit")),i!==this.#a))return;if(this.#o=e,this.#t.requestUpdate(),await this.#t.updateComplete,i!==this.#a)return;const o=this.#g(e);o&&(await this.#v(o,"enter",this.#e(t,e,"enter")),i!==this.#a)||(this.#y(t,e,s),this.#$(e),this.#h?.(!0),this.#h=null)})(),n}#b(t,e){return"closed"===t&&"open"===e&&this.#s()}#y(t,e,s){"hidden"===t&&wt(this.#t,$t.SHOW,{from:t,to:e}),"hidden"!==e?"open"===e?wt(this.#t,$t.OPEN,{from:t,trigger:s}):"closed"===e&&"open"===t&&wt(this.#t,$t.CLOSE,{from:t,trigger:s}):wt(this.#t,$t.HIDE,{from:t,to:e})}#$(t){"open"!==t?("closed"===t&&this.#c&&this.#g("closed")?.focus(),this.#c=!1):this.#i()}#f(){const t=this.#t.renderRoot instanceof ShadowRoot?this.#t.renderRoot.activeElement:null,e=this.#g("open");return!(!t||!e||t!==e&&!e.contains(t))}#g(t){const e=xt[t];return e?this.#t.renderRoot.querySelector(`[part~="${e}"]`):null}#u(t){this.#t.state!==t&&(this.#r=!0,this.#t.state=t,this.#r=!1)}#v(t,e,s){const{effect:i,duration:n}=s;return"none"===i||n<=0||window.matchMedia("(prefers-reduced-motion: reduce)").matches?Promise.resolve():new Promise(s=>{let o=!1;const r=e=>{e&&e.target!==t||o||(o=!0,clearTimeout(a),t.removeEventListener("animationend",r),t.removeAttribute("data-anim"),t.style.removeProperty("--_chit-anim-duration"),this.#l===r&&(this.#l=null),s())};t.dataset.effect=i,t.dataset.anim=e,t.style.setProperty("--_chit-anim-duration",`${n}ms`),t.addEventListener("animationend",r);const a=setTimeout(r,n+50);this.#l=r})}}class St{#t;#w=null;#x=0;#_="pc";#S=!1;constructor(t){this.#t=t,t.addController(this)}get device(){return this.#_}hostDisconnected(){this.#w?.removeEventListener("change",this.#A),this.#w=null}observe(t){t===this.#x&&this.#w||(this.#x=t,this.#w?.removeEventListener("change",this.#A),this.#w=window.matchMedia(`(max-width: ${t-1}px)`),this.#w.addEventListener("change",this.#A),this.#E(this.#w.matches?"mobile":"pc"))}#A=t=>{this.#E(t.matches?"mobile":"pc")};#E(t){t===this.#_&&this.#t.dataset.device||(this.#_=t,this.#t.dataset.device=t,this.#t.requestUpdate(),this.#S&&wt(this.#t,$t.BREAKPOINT_CHANGE,{device:t}),this.#S=!0)}}const At="#2563eb",Et="#1f2328",Ct="#5c6370",kt="#ffffff",Tt="#f1f3f5",Ot="#e4e4e7",Ut="#ffffff",Pt={size:60,position:"bottom-right",offset:{x:24,y:24},radius:30,image:null,label:null,component:null,props:{},colors:{background:At,text:Ut,shadow:"0 4px 12px rgba(0, 0, 0, 0.2)"},animation:{enter:"scale",exit:"scale",duration:200,idle:"none"}},Lt={size:56,offset:{x:16,y:16},radius:28},Rt={breakpoint:768,zIndex:2147483e3,font:{family:"system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif",size:14},closed:{pc:Pt,mobile:{...Pt,...Lt}},open:{width:380,height:600,position:"bottom-right",offset:{x:24,y:24},radius:16,launcher:"hidden",header:{title:null,logo:null,avatar:null},background:{image:null},colors:{background:kt,text:Et,accent:At,border:Ot,shadow:"0 8px 32px rgba(0, 0, 0, 0.24)",headerBackground:kt,headerText:Et,userBubble:At,userText:Ut,assistantBubble:Tt,assistantText:Et,systemText:Ct,inputBackground:kt,inputText:Et,inputPlaceholder:Ct},animation:{enter:"scale",exit:"fade",duration:150,scroll:"smooth"},input:{maxRows:5,placeholder:null}},hidden:{animation:{exit:"fade",duration:150}}},zt=Lt;function Mt(t){return"object"==typeof t&&null!==t&&!Array.isArray(t)}function Nt(t,e){if(!Mt(e))return t;const s={...t};for(const[t,i]of Object.entries(e)){if(void 0===i)continue;const e=s[t];s[t]=Mt(i)&&Mt(e)?Nt(e,i):i}return s}function Ht(t,e){const s=t??{},i=function(t,e){const s=t??{};if(!("pc"in s)&&!("mobile"in s)){const s=t??{};return Nt(Rt.closed[e],s)}const i=Nt(Rt.closed.pc,s.pc);return"pc"===e?i:s.mobile?Nt(Rt.closed.mobile,s.mobile):Nt(i,zt)}(s.closed,e);return{breakpoint:s.breakpoint??Rt.breakpoint,zIndex:s.zIndex??Rt.zIndex,font:Nt(Rt.font,s.font),closed:Nt(Rt.closed[e],i),open:Nt(Rt.open,s.open),hidden:Nt(Rt.hidden,s.hidden),device:e}}const Bt=t=>`${t}px`;function It(t){return t?`url("${t.replace(/[\\"]/g,"\\$&")}")`:"none"}function jt(t){const e=Object.entries(function(t){const{closed:e,open:s}=t,i=s.colors;return{"--chit-z-index":String(t.zIndex),"--chit-font-family":t.font.family,"--chit-font-size":Bt(t.font.size),"--chit-launcher-size":"auto"===e.size?"auto":Bt(e.size),"--chit-launcher-offset-x":Bt(e.offset.x),"--chit-launcher-offset-y":Bt(e.offset.y),"--chit-launcher-radius":Bt(e.radius),"--chit-launcher-image":It(e.image),"--chit-launcher-bg":e.colors.background,"--chit-launcher-text":e.colors.text,"--chit-launcher-shadow":e.colors.shadow,"--chit-panel-width":Bt(s.width),"--chit-panel-height":Bt(s.height),"--chit-panel-offset-x":Bt(s.offset.x),"--chit-panel-offset-y":Bt(s.offset.y),"--chit-panel-radius":Bt(s.radius),"--chit-panel-bg-image":It(s.background.image),"--chit-panel-shadow":i.shadow,"--chit-color-bg":i.background,"--chit-color-text":i.text,"--chit-color-accent":i.accent,"--chit-color-border":i.border,"--chit-color-header-bg":i.headerBackground,"--chit-color-header-text":i.headerText,"--chit-color-user-bg":i.userBubble,"--chit-color-user-text":i.userText,"--chit-color-assistant-bg":i.assistantBubble,"--chit-color-assistant-text":i.assistantText,"--chit-color-system-text":i.systemText,"--chit-color-input-bg":i.inputBackground,"--chit-color-input-text":i.inputText,"--chit-color-input-placeholder":i.inputPlaceholder,"--_chit-input-max-rows":String(s.input.maxRows)}}(t)).map(([t,e])=>` ${t}: ${e};`).join("\n");return`:host {\n${e}\n}\n`}const Dt="undefined"!=typeof ShadowRoot&&"adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype;class qt{#C=null;#k=null;#T="";#O;constructor(t){this.#O=t}attach(t){if(t instanceof ShadowRoot){if(Dt)return this.#C||(this.#C=new CSSStyleSheet),void(t.adoptedStyleSheets.includes(this.#C)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,this.#C]));this.#k||(this.#k=document.createElement("style"),this.#k.setAttribute(this.#O,"")),this.#k.parentNode!==t&&t.append(this.#k)}}write(t,e){if(t!==this.#T){if(this.attach(e),this.#C)this.#C.replaceSync(t);else{if(!this.#k)return;this.#k.textContent=t}this.#T=t}}detach(){this.#k?.remove(),this.#k=null}}class Ft{#t;#C=new qt("data-chit-theme");#U;constructor(t,{device:e}){this.#t=t,this.#U=Ht(void 0,e())}get current(){return this.#U}hostConnected(){this.#P()}hostDisconnected(){this.#C.detach()}static breakpointOf(t){return function(t){return t?.breakpoint??Rt.breakpoint}(t)}apply(t,e){this.#U=Ht(t,e),this.#P()}#P(){this.#C.write(jt(this.#U),this.#t.renderRoot)}}class Wt{#t;#L;#R=null;#z=null;#M=!0;#N=!1;#H=!1;#B=!0;#I=!1;#j;#D=!0;#q;#F=0;constructor(t,{behavior:e}){this.#t=t,this.#L=e,t.addController(this)}get hasUnseen(){return this.#N}get atBottom(){return this.#M}hostDisconnected(){this.#W(),clearTimeout(this.#j)}hostUpdate(){const t=this.#t.messages,e=t[t.length-1],s=t.length>this.#F,i=e?.id!==this.#q;this.#q=e?.id,this.#F=t.length,(s||i)&&(this.#M||"user"===e?.role?this.#B=!0:this.#N=!0)}hostUpdated(){const t=this.#t.renderRoot.querySelector('[part~="messages"]');if(t!==this.#R&&(this.#W(),this.#R=t,this.#K(),t&&(this.#M=!0,this.#N=!1,this.#B=!0,this.#D=!0)),this.#B){const t=this.#G;this.#B=!1,this.#J({behavior:t})}}#K(){if(!this.#R)return;this.#R.addEventListener("scroll",this.#V,{passive:!0}),this.#R.addEventListener("scrollend",this.#Y);const t=this.#R.firstElementChild;t&&"undefined"!=typeof ResizeObserver&&(this.#z=new ResizeObserver(()=>{this.#M&&this.#J({behavior:this.#I?"smooth":"instant"})}),this.#z.observe(t))}#W(){this.#R?.removeEventListener("scroll",this.#V),this.#R?.removeEventListener("scrollend",this.#Y),this.#z?.disconnect(),this.#z=null,this.#R=null}#Y=()=>{this.#Z()};#V=()=>{const t=this.#R;if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight<=24;if(this.#I)return void(e&&this.#Z());e!==this.#M&&(this.#M=e,e&&this.#N&&(this.#N=!1,this.#t.requestUpdate()));const s=t.scrollTop<=0;s&&!this.#H&&wt(this.#t,$t.SCROLL_TOP,{}),this.#H=s};scrollToBottom({smooth:t}={}){const e=void 0===t?this.#G:t?"smooth":"instant";this.#J({behavior:e}),this.#N&&(this.#N=!1,this.#t.requestUpdate())}get#G(){return this.#D||window.matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":this.#L()}#J({behavior:t="instant"}={}){const e=this.#R;e&&(this.#D=!1,"smooth"===t&&this.#Q(),e.scrollTo({top:e.scrollHeight,behavior:t}),this.#M=!0,this.#H=!1,this.#N=!1)}#Q(){this.#I=!0,clearTimeout(this.#j),this.#j=setTimeout(()=>this.#Z(),700)}#Z(){if(!this.#I)return;this.#I=!1,clearTimeout(this.#j);const t=this.#R;if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight;this.#M=e<=24}}const Kt="undefined"!=typeof CSS&&CSS.supports?.("field-sizing","content");class Gt{#t;#X="";#tt=!1;#et=!1;#st;constructor(t){this.#t=t,t.addController(this)}get value(){return this.#X}set value(t){this.#X=t??"";const e=this.#it;e&&e.value!==this.#X&&(e.value=this.#X),this.#nt(),this.#ot()}get composing(){return this.#tt}get length(){return Array.from(this.#X).length}get canSend(){if(this.#t.busy||this.#t.inputDisabled)return!1;if(""===this.#X.trim())return!1;const t=this.#t.maxLength;return void 0===t||this.length<=t}hostDisconnected(){clearTimeout(this.#st)}hostUpdated(){const t=this.#it;t&&t.value!==this.#X&&(t.value=this.#X),this.#nt(),this.#ot()}get#it(){return this.#t.renderRoot.querySelector('[part~="input"]')}onInput(t){this.#X=t.target.value,this.#nt(),this.#ot(),wt(this.#t,$t.INPUT,{value:this.#X})}onCompositionStart(){this.#tt=!0}onCompositionEnd(){this.#tt=!1,this.#et=!0,clearTimeout(this.#st),this.#st=setTimeout(()=>{this.#et=!1},0)}onKeydown(t){"Enter"===t.key&&this.#t.sendOnEnter&&(t.shiftKey||t.altKey||t.ctrlKey||t.metaKey||t.isComposing||229===t.keyCode||this.#tt||this.#et||(t.preventDefault(),this.submit()))}submit(t){const e=t??this.#X;if(void 0===t&&!this.canSend)return!1;if(void 0!==t&&(this.#t.busy||this.#t.inputDisabled))return!1;if(""===e.trim())return!1;return!!wt(this.#t,$t.SUBMIT,{text:e},{cancelable:!0})&&(this.clear(),!0)}clear(){this.value="",this.focus()}focus(){this.#it?.focus()}#nt(){if(Kt)return;const t=this.#it;t&&(t.style.height="auto",t.style.height=`${t.scrollHeight}px`)}#ot(){const t=this.#t.renderRoot,e=t.querySelector('[part~="send-button"]');e&&(e.disabled=!this.canSend);const s=this.#it,i=t.querySelector('[part~="counter"]'),n=this.#t.maxLength;if(void 0===n)return;const o=n-this.length,r=o<0;if(s?.setAttribute("aria-invalid",r?"true":"false"),!i)return;i.textContent=String(o),i.toggleAttribute("data-over",r);const a=this.#t.currentLabels,h=r?a.overLimit:a.charactersLeft;i.setAttribute("aria-label",h.replace("{n}",String(Math.abs(o)))),i.hidden=this.length<=.8*n}}const Jt=new WeakMap,Vt=t=>`msg:${t}`,Yt=["text","html","template","element","component"];function Zt(t){const e=Yt.filter(e=>e in t);if(1===e.length)return e[0];if(0===e.length)throw new Error(`ChitUI: message "${t.id}" has no content. Give it one of html, template, element or component.`);throw new Error(`ChitUI: message "${t.id}" has ${e.join(" and ")}. Give it exactly one.`)}function Qt(t){return t[Zt(t)]}function Xt(t,e,s,i={}){let n=Jt.get(t);n||(n=new Map,Jt.set(t,n));const o=n.get(e);if(o&&o.source===s){for(const[t,e]of Object.entries(i))Object.is(o.props[t],e)||(o.element[t]=e);return o.props={...i},o.element}const r=document.createElement(function(t){if("string"==typeof t)return t;const e=customElements,s=e.getName?.(t);if(s)return s;const i=t.tagName;if("string"==typeof i&&i)return i;throw new Error("ChitUI: component is not registered in customElements. Call customElements.define() for it, or pass its tag name as a string.")}(s));for(const[t,e]of Object.entries(i))r[t]=e;return n.set(e,{source:s,element:r,props:{...i}}),r}function te(t,e){return Jt.get(t)?.get(Vt(e))?.element}function ee(t,e){switch(Zt(e)){case"text":return e.text;case"template":return e.template;case"element":return e.element;case"component":{const s=e;return Xt(t,Vt(e.id),s.component,s.props)}default:{const s=e.html;return yt(t.sanitize?t.sanitize(s):s)}}}function se(t){const e=t.currentTheme.closed,s=t.currentLabels,i=e.component?Xt(t,"launcher",e.component,e.props):null;return F`
|
|
1
|
+
var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;let o=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(s&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&n.set(e,t))}return t}toString(){return this.cssText}};const r=(t,...e)=>{const s=1===t.length?t[0]:e.reduce((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1],t[0]);return new o(s,t,i)},a=s?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:h,defineProperty:l,getOwnPropertyDescriptor:c,getOwnPropertyNames:d,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,m=globalThis,f=m.trustedTypes,g=f?f.emptyScript:"",b=m.reactiveElementPolyfillSupport,v=(t,e)=>t,y={toAttribute(t,e){switch(e){case Boolean:t=t?g:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},w=(t,e)=>!h(t,e),$={attribute:!0,type:String,converter:y,reflect:!1,useDefault:!1,hasChanged:w};Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;let x=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=$){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);void 0!==i&&l(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:n}=c(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:i,set(e){const o=i?.call(this);n?.call(this,e),this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??$}static _$Ei(){if(this.hasOwnProperty(v("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(v("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(v("properties"))){const t=this.properties,e=[...d(t),...p(t)];for(const s of e)this.createProperty(s,t[s])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,s]of e)this.elementProperties.set(t,s)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const s=this._$Eu(t,e);void 0!==s&&this._$Eh.set(s,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Eu(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{if(s)t.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const s of i){const i=document.createElement("style"),n=e.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=s.cssText,t.appendChild(i)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(void 0!==i&&!0===s.reflect){const n=(void 0!==s.converter?.toAttribute?s.converter:y).toAttribute(e,s.type);this._$Em=t,null==n?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(t,e){const s=this.constructor,i=s._$Eh.get(t);if(void 0!==i&&this._$Em!==i){const t=s.getPropertyOptions(i),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:y;this._$Em=i;const o=n.fromAttribute(e,t.type);this[i]=o??this._$Ej?.get(i)??o,this._$Em=null}}requestUpdate(t,e,s,i=!1,n){if(void 0!==t){const o=this.constructor;if(!1===i&&(n=this[t]),s??=o.getPropertyOptions(t),!((s.hasChanged??w)(n,e)||s.useDefault&&s.reflect&&n===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,s))))return;this.C(t,e,s)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:n},o){s&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,o??e??this[t]),!0!==n||void 0!==o)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),!0===i&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,s]of t){const{wrapped:t}=s,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,s,i)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}};x.elementStyles=[],x.shadowRootOptions={mode:"open"},x[v("elementProperties")]=new Map,x[v("finalized")]=new Map,b?.({ReactiveElement:x}),(m.reactiveElementVersions??=[]).push("2.1.2");const _=globalThis,A=t=>t,S=_.trustedTypes,E=S?S.createPolicy("lit-html",{createHTML:t=>t}):void 0,k="$lit$",C=`lit$${Math.random().toFixed(9).slice(2)}$`,T="?"+C,O=`<${T}>`,U=document,P=()=>U.createComment(""),L=t=>null===t||"object"!=typeof t&&"function"!=typeof t,M=Array.isArray,R="[ \t\n\f\r]",z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,B=/-->/g,H=/>/g,N=RegExp(`>|${R}(?:([^\\s"'>=/]+)(${R}*=${R}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),I=/'/g,j=/"/g,D=/^(?:script|style|textarea|title)$/i,q=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),F=q(1),W=q(2),K=Symbol.for("lit-noChange"),G=Symbol.for("lit-nothing"),V=new WeakMap,J=U.createTreeWalker(U,129);function Y(t,e){if(!M(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(e):e}class Z{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let n=0,o=0;const r=t.length-1,a=this.parts,[h,l]=((t,e)=>{const s=t.length-1,i=[];let n,o=2===e?"<svg>":3===e?"<math>":"",r=z;for(let e=0;e<s;e++){const s=t[e];let a,h,l=-1,c=0;for(;c<s.length&&(r.lastIndex=c,h=r.exec(s),null!==h);)c=r.lastIndex,r===z?"!--"===h[1]?r=B:void 0!==h[1]?r=H:void 0!==h[2]?(D.test(h[2])&&(n=RegExp("</"+h[2],"g")),r=N):void 0!==h[3]&&(r=N):r===N?">"===h[0]?(r=n??z,l=-1):void 0===h[1]?l=-2:(l=r.lastIndex-h[2].length,a=h[1],r=void 0===h[3]?N:'"'===h[3]?j:I):r===j||r===I?r=N:r===B||r===H?r=z:(r=N,n=void 0);const d=r===N&&t[e+1].startsWith("/>")?" ":"";o+=r===z?s+O:l>=0?(i.push(a),s.slice(0,l)+k+s.slice(l)+C+d):s+C+(-2===l?e:d)}return[Y(t,o+(t[s]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]})(t,e);if(this.el=Z.createElement(h,s),J.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=J.nextNode())&&a.length<r;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(k)){const e=l[o++],s=i.getAttribute(t).split(C),r=/([.?@])?(.*)/.exec(e);a.push({type:1,index:n,name:r[2],strings:s,ctor:"."===r[1]?st:"?"===r[1]?it:"@"===r[1]?nt:et}),i.removeAttribute(t)}else t.startsWith(C)&&(a.push({type:6,index:n}),i.removeAttribute(t));if(D.test(i.tagName)){const t=i.textContent.split(C),e=t.length-1;if(e>0){i.textContent=S?S.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],P()),J.nextNode(),a.push({type:2,index:++n});i.append(t[e],P())}}}else if(8===i.nodeType)if(i.data===T)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=i.data.indexOf(C,t+1));)a.push({type:7,index:n}),t+=C.length-1}n++}}static createElement(t,e){const s=U.createElement("template");return s.innerHTML=t,s}}function Q(t,e,s=t,i){if(e===K)return e;let n=void 0!==i?s._$Co?.[i]:s._$Cl;const o=L(e)?void 0:e._$litDirective$;return n?.constructor!==o&&(n?._$AO?.(!1),void 0===o?n=void 0:(n=new o(t),n._$AT(t,s,i)),void 0!==i?(s._$Co??=[])[i]=n:s._$Cl=n),void 0!==n&&(e=Q(t,n._$AS(t,e.values),n,i)),e}class X{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??U).importNode(e,!0);J.currentNode=i;let n=J.nextNode(),o=0,r=0,a=s[0];for(;void 0!==a;){if(o===a.index){let e;2===a.type?e=new tt(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new ot(n,this,t)),this._$AV.push(e),a=s[++r]}o!==a?.index&&(n=J.nextNode(),o++)}return J.currentNode=U,i}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class tt{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=G,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),L(t)?t===G||null==t||""===t?(this._$AH!==G&&this._$AR(),this._$AH=G):t!==this._$AH&&t!==K&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>M(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==G&&L(this._$AH)?this._$AA.nextSibling.data=t:this.T(U.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=Z.createElement(Y(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new X(i,this),s=t.u(this.options);t.p(e),this.T(s),this._$AH=t}}_$AC(t){let e=V.get(t.strings);return void 0===e&&V.set(t.strings,e=new Z(t)),e}k(t){M(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const n of t)i===e.length?e.push(s=new tt(this.O(P()),this.O(P()),this,this.options)):s=e[i],s._$AI(n),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=A(t).nextSibling;A(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class et{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,n){this.type=1,this._$AH=G,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=G}_$AI(t,e=this,s,i){const n=this.strings;let o=!1;if(void 0===n)t=Q(this,t,e,0),o=!L(t)||t!==this._$AH&&t!==K,o&&(this._$AH=t);else{const i=t;let r,a;for(t=n[0],r=0;r<n.length-1;r++)a=Q(this,i[s+r],e,r),a===K&&(a=this._$AH[r]),o||=!L(a)||a!==this._$AH[r],a===G?t=G:t!==G&&(t+=(a??"")+n[r+1]),this._$AH[r]=a}o&&!i&&this.j(t)}j(t){t===G?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class st extends et{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===G?void 0:t}}class it extends et{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==G)}}class nt extends et{constructor(t,e,s,i,n){super(t,e,s,i,n),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??G)===K)return;const s=this._$AH,i=t===G&&s!==G||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==G&&(s===G||i);i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class ot{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const rt={I:tt},at=_.litHtmlPolyfillSupport;at?.(Z,tt),(_.litHtmlVersions??=[]).push("3.3.3");const ht=(t,e,s)=>{const i=s?.renderBefore??e;let n=i._$litPart$;if(void 0===n){const t=s?.renderBefore??null;i._$litPart$=n=new tt(e.insertBefore(P(),t),t,void 0,s??{})}return n._$AI(t),n},lt=globalThis;let ct=class extends x{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=ht(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return K}};ct._$litElement$=!0,ct.finalized=!0,lt.litElementHydrateSupport?.({LitElement:ct});const dt=lt.litElementPolyfillSupport;dt?.({LitElement:ct}),(lt.litElementVersions??=[]).push("4.2.2");const pt=1,ut=2,mt=3,ft=4,gt=t=>(...e)=>({_$litDirective$:t,values:e});let bt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}},vt=class extends bt{constructor(t){if(super(t),this.it=G,t.type!==ut)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===G||null==t)return this._t=void 0,this.it=t;if(t===K)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};vt.directiveName="unsafeHTML",vt.resultType=1;const yt=gt(vt),wt=Object.freeze({SUBMIT:"chat-submit",BEFORE_OPEN:"chat-before-open",OPEN:"chat-open",BEFORE_CLOSE:"chat-before-close",CLOSE:"chat-close",HIDE:"chat-hide",SHOW:"chat-show",STATE_CHANGE:"chat-state-change",INPUT:"chat-input",MESSAGE_RENDER:"chat-message-render",MESSAGE_CLICK:"chat-message-click",SCROLL_TOP:"chat-scroll-top",BREAKPOINT_CHANGE:"chat-breakpoint-change",HOME:"chat-home",ATTACH:"chat-attach"});function $t(t,e,s,{cancelable:i=!1}={}){return t.dispatchEvent(new CustomEvent(e,{detail:s,bubbles:!0,composed:!0,cancelable:i}))}const xt={closed:"launcher",open:"panel",hidden:null};class _t{#t;#e;#s;#i;#n="closed";#o="closed";#r=!1;#a=0;#h=null;#l=null;#c=!1;constructor(t,{animation:e,keepsLauncher:s,onOpened:i}){this.#t=t,this.#e=e,this.#s=s,this.#i=i,t.addController(this)}get renderedState(){return this.#o}get applying(){return this.#r}hostConnected(){this.#n=this.#t.state,this.#o=this.#t.state,this.#t.dataset.renderedState=this.#o}hostDisconnected(){this.#l?.(),this.#l=null,this.#h?.(!1),this.#h=null}hostUpdated(){this.#t.dataset.renderedState=this.#o}request(t,e){const s=this.#n;return t===s?Promise.resolve(!0):this.#d(s,t,e)?(this.#p(),this.#n=t,this.#u(t),$t(this.#t,wt.STATE_CHANGE,{from:s,to:t,trigger:e}),this.#m(s,t,e)):(this.#u(s),Promise.resolve(!1))}#d(t,e,s){return"open"===e?$t(this.#t,wt.BEFORE_OPEN,{from:t,trigger:s},{cancelable:!0}):"closed"!==e||"open"!==t||$t(this.#t,wt.BEFORE_CLOSE,{from:t,trigger:s},{cancelable:!0})}#p(){this.#a+=1,this.#l?.(),this.#l=null,this.#h?.(!1),this.#h=null,this.#o!==this.#n&&(this.#o=this.#n,this.#t.requestUpdate())}#m(t,e,s){const i=this.#a,n=new Promise(t=>{this.#h=t});return(async()=>{if(this.#c=this.#f(),await this.#t.updateComplete,i!==this.#a)return;const n=this.#g(t);if(n&&!this.#b(t,e)&&(await this.#v(n,"exit",this.#e(t,e,"exit")),i!==this.#a))return;if(this.#o=e,this.#t.requestUpdate(),await this.#t.updateComplete,i!==this.#a)return;const o=this.#g(e);o&&(await this.#v(o,"enter",this.#e(t,e,"enter")),i!==this.#a)||(this.#y(t,e,s),this.#w(e),this.#h?.(!0),this.#h=null)})(),n}#b(t,e){return"closed"===t&&"open"===e&&this.#s()}#y(t,e,s){"hidden"===t&&$t(this.#t,wt.SHOW,{from:t,to:e}),"hidden"!==e?"open"===e?$t(this.#t,wt.OPEN,{from:t,trigger:s}):"closed"===e&&"open"===t&&$t(this.#t,wt.CLOSE,{from:t,trigger:s}):$t(this.#t,wt.HIDE,{from:t,to:e})}#w(t){"open"!==t?("closed"===t&&this.#c&&this.#g("closed")?.focus(),this.#c=!1):this.#i()}#f(){const t=this.#t.renderRoot instanceof ShadowRoot?this.#t.renderRoot.activeElement:null,e=this.#g("open");return!(!t||!e||t!==e&&!e.contains(t))}#g(t){const e=xt[t];return e?this.#t.renderRoot.querySelector(`[part~="${e}"]`):null}#u(t){this.#t.state!==t&&(this.#r=!0,this.#t.state=t,this.#r=!1)}#v(t,e,s){const{effect:i,duration:n}=s;return"none"===i||n<=0||window.matchMedia("(prefers-reduced-motion: reduce)").matches?Promise.resolve():new Promise(s=>{let o=!1;const r=e=>{e&&e.target!==t||o||(o=!0,clearTimeout(a),t.removeEventListener("animationend",r),t.removeAttribute("data-anim"),t.style.removeProperty("--_chit-anim-duration"),this.#l===r&&(this.#l=null),s())};t.dataset.effect=i,t.dataset.anim=e,t.style.setProperty("--_chit-anim-duration",`${n}ms`),t.addEventListener("animationend",r);const a=setTimeout(r,n+50);this.#l=r})}}class At{#t;#$=null;#x=0;#_="pc";#A=!1;constructor(t){this.#t=t,t.addController(this)}get device(){return this.#_}hostDisconnected(){this.#$?.removeEventListener("change",this.#S),this.#$=null}observe(t){t===this.#x&&this.#$||(this.#x=t,this.#$?.removeEventListener("change",this.#S),this.#$=window.matchMedia(`(max-width: ${t-1}px)`),this.#$.addEventListener("change",this.#S),this.#E(this.#$.matches?"mobile":"pc"))}#S=t=>{this.#E(t.matches?"mobile":"pc")};#E(t){t===this.#_&&this.#t.dataset.device||(this.#_=t,this.#t.dataset.device=t,this.#t.requestUpdate(),this.#A&&$t(this.#t,wt.BREAKPOINT_CHANGE,{device:t}),this.#A=!0)}}const St="#2563eb",Et="#1f2328",kt="#5c6370",Ct="#ffffff",Tt="#f1f3f5",Ot="#e4e4e7",Ut="#ffffff",Pt={size:60,position:"bottom-right",offset:{x:24,y:24},radius:30,image:null,label:null,component:null,props:{},colors:{background:St,text:Ut,shadow:"0 4px 12px rgba(0, 0, 0, 0.2)"},animation:{enter:"scale",exit:"scale",duration:200,idle:"none"}},Lt={size:56,offset:{x:16,y:16},radius:28},Mt={breakpoint:768,zIndex:2147483e3,font:{family:"system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif",size:14},closed:{pc:Pt,mobile:{...Pt,...Lt}},open:{width:380,height:600,position:"bottom-right",offset:{x:24,y:24},radius:16,launcher:"hidden",header:{visible:!0,title:null,logo:null,home:!1},background:{image:null},colors:{background:Ct,text:Et,accent:St,border:Ot,shadow:"0 8px 32px rgba(0, 0, 0, 0.24)",headerBackground:Ct,headerText:Et,userBubble:St,userText:Ut,assistantBubble:Tt,assistantText:Et,systemText:kt,inputBackground:Ct,inputText:Et,inputPlaceholder:kt},bubble:{radius:14,tail:"none"},speaker:{assistant:{name:null,avatar:null},user:{name:null,avatar:null}},animation:{enter:"scale",exit:"fade",duration:150,scroll:"smooth"},input:{maxRows:5,placeholder:null,attach:!1,accept:"image/*,video/*",multiple:!1}},hidden:{animation:{exit:"fade",duration:150}}},Rt=Lt;function zt(t){return"object"==typeof t&&null!==t&&!Array.isArray(t)}function Bt(t,e){if(!zt(e))return t;const s={...t};for(const[t,i]of Object.entries(e)){if(void 0===i)continue;const e=s[t];s[t]=zt(i)&&zt(e)?Bt(e,i):i}return s}function Ht(t,e){const s=t??{},i=function(t,e){const s=t??{};if(!("pc"in s)&&!("mobile"in s)){const s=t??{};return Bt(Mt.closed[e],s)}const i=Bt(Mt.closed.pc,s.pc);return"pc"===e?i:s.mobile?Bt(Mt.closed.mobile,s.mobile):Bt(i,Rt)}(s.closed,e);return{breakpoint:s.breakpoint??Mt.breakpoint,zIndex:s.zIndex??Mt.zIndex,font:Bt(Mt.font,s.font),closed:Bt(Mt.closed[e],i),open:Bt(Mt.open,s.open),hidden:Bt(Mt.hidden,s.hidden),device:e}}const Nt=t=>`${t}px`;function It(t){return t?`url("${t.replace(/[\\"]/g,"\\$&")}")`:"none"}function jt(t){const e=Object.entries(function(t){const{closed:e,open:s}=t,i=s.colors;return{"--chit-z-index":String(t.zIndex),"--chit-font-family":t.font.family,"--chit-font-size":Nt(t.font.size),"--chit-launcher-size":"auto"===e.size?"auto":Nt(e.size),"--chit-launcher-offset-x":Nt(e.offset.x),"--chit-launcher-offset-y":Nt(e.offset.y),"--chit-launcher-radius":Nt(e.radius),"--chit-launcher-image":It(e.image),"--chit-launcher-bg":e.colors.background,"--chit-launcher-text":e.colors.text,"--chit-launcher-shadow":e.colors.shadow,"--chit-panel-width":Nt(s.width),"--chit-panel-height":Nt(s.height),"--chit-panel-offset-x":Nt(s.offset.x),"--chit-panel-offset-y":Nt(s.offset.y),"--chit-panel-radius":Nt(s.radius),"--chit-panel-bg-image":It(s.background.image),"--chit-panel-shadow":i.shadow,"--chit-color-bg":i.background,"--chit-color-text":i.text,"--chit-color-accent":i.accent,"--chit-color-border":i.border,"--chit-color-header-bg":i.headerBackground,"--chit-color-header-text":i.headerText,"--chit-color-user-bg":i.userBubble,"--chit-color-user-text":i.userText,"--chit-color-assistant-bg":i.assistantBubble,"--chit-color-assistant-text":i.assistantText,"--chit-color-system-text":i.systemText,"--chit-color-input-bg":i.inputBackground,"--chit-color-input-text":i.inputText,"--chit-color-input-placeholder":i.inputPlaceholder,"--chit-bubble-radius":Nt(s.bubble.radius),"--_chit-input-max-rows":String(s.input.maxRows),"--_chit-speaker-gutter":s.speaker.assistant.avatar?"2.5em":"0px"}}(t)).map(([t,e])=>` ${t}: ${e};`).join("\n");return`:host {\n${e}\n}\n`}const Dt="undefined"!=typeof ShadowRoot&&"adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype;class qt{#k=null;#C=null;#T="";#O;constructor(t){this.#O=t}attach(t){if(t instanceof ShadowRoot){if(Dt)return this.#k||(this.#k=new CSSStyleSheet),void(t.adoptedStyleSheets.includes(this.#k)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,this.#k]));this.#C||(this.#C=document.createElement("style"),this.#C.setAttribute(this.#O,"")),this.#C.parentNode!==t&&t.append(this.#C)}}write(t,e){if(t!==this.#T){if(this.attach(e),this.#k)this.#k.replaceSync(t);else{if(!this.#C)return;this.#C.textContent=t}this.#T=t}}detach(){this.#C?.remove(),this.#C=null}}class Ft{#t;#k=new qt("data-chit-theme");#U;constructor(t,{device:e}){this.#t=t,this.#U=Ht(void 0,e())}get current(){return this.#U}hostConnected(){this.#P()}hostDisconnected(){this.#k.detach()}static breakpointOf(t){return function(t){return t?.breakpoint??Mt.breakpoint}(t)}apply(t,e){this.#U=Ht(t,e),this.#P()}#P(){this.#k.write(jt(this.#U),this.#t.renderRoot)}}class Wt{#t;#L;#M=null;#R=null;#z=!0;#B=!1;#H=!1;#N=!0;#I=!1;#j;#D=!0;#q;#F=0;constructor(t,{behavior:e}){this.#t=t,this.#L=e,t.addController(this)}get hasUnseen(){return this.#B}get atBottom(){return this.#z}hostDisconnected(){this.#W(),clearTimeout(this.#j)}hostUpdate(){const t=this.#t.messages,e=t[t.length-1],s=t.length>this.#F,i=e?.id!==this.#q;this.#q=e?.id,this.#F=t.length,(s||i)&&(this.#z||"user"===e?.role?this.#N=!0:this.#B=!0)}hostUpdated(){const t=this.#t.renderRoot.querySelector('[part~="messages"]');if(t!==this.#M&&(this.#W(),this.#M=t,this.#K(),t&&(this.#z=!0,this.#B=!1,this.#N=!0,this.#D=!0)),this.#N){const t=this.#G;this.#N=!1,this.#V({behavior:t})}}#K(){if(!this.#M)return;this.#M.addEventListener("scroll",this.#J,{passive:!0}),this.#M.addEventListener("scrollend",this.#Y);const t=this.#M.firstElementChild;t&&"undefined"!=typeof ResizeObserver&&(this.#R=new ResizeObserver(()=>{this.#z&&this.#V({behavior:this.#I?"smooth":"instant"})}),this.#R.observe(t))}#W(){this.#M?.removeEventListener("scroll",this.#J),this.#M?.removeEventListener("scrollend",this.#Y),this.#R?.disconnect(),this.#R=null,this.#M=null}#Y=()=>{this.#Z()};#J=()=>{const t=this.#M;if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight<=24;if(this.#I)return void(e&&this.#Z());e!==this.#z&&(this.#z=e,e&&this.#B&&(this.#B=!1,this.#t.requestUpdate()));const s=t.scrollTop<=0;s&&!this.#H&&$t(this.#t,wt.SCROLL_TOP,{}),this.#H=s};scrollToBottom({smooth:t}={}){const e=void 0===t?this.#G:t?"smooth":"instant";this.#V({behavior:e}),this.#B&&(this.#B=!1,this.#t.requestUpdate())}get#G(){return this.#D||window.matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":this.#L()}#V({behavior:t="instant"}={}){const e=this.#M;e&&(this.#D=!1,"smooth"===t&&this.#Q(),e.scrollTo({top:e.scrollHeight,behavior:t}),this.#z=!0,this.#H=!1,this.#B=!1)}#Q(){this.#I=!0,clearTimeout(this.#j),this.#j=setTimeout(()=>this.#Z(),700)}#Z(){if(!this.#I)return;this.#I=!1,clearTimeout(this.#j);const t=this.#M;if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight;this.#z=e<=24}}const Kt="undefined"!=typeof CSS&&CSS.supports?.("field-sizing","content");class Gt{#t;#X="";#tt=!1;#et=!1;#st;constructor(t){this.#t=t,t.addController(this)}get value(){return this.#X}set value(t){this.#X=t??"";const e=this.#it;e&&e.value!==this.#X&&(e.value=this.#X),this.#nt(),this.#ot()}get composing(){return this.#tt}get length(){return Array.from(this.#X).length}get canSend(){if(this.#t.busy||this.#t.inputDisabled)return!1;if(""===this.#X.trim())return!1;const t=this.#t.maxLength;return void 0===t||this.length<=t}hostDisconnected(){clearTimeout(this.#st)}hostUpdated(){const t=this.#it;t&&t.value!==this.#X&&(t.value=this.#X),this.#nt(),this.#ot()}get#it(){return this.#t.renderRoot.querySelector('[part~="input"]')}onInput(t){this.#X=t.target.value,this.#nt(),this.#ot(),$t(this.#t,wt.INPUT,{value:this.#X})}onCompositionStart(){this.#tt=!0}onCompositionEnd(){this.#tt=!1,this.#et=!0,clearTimeout(this.#st),this.#st=setTimeout(()=>{this.#et=!1},0)}onKeydown(t){"Enter"===t.key&&this.#t.sendOnEnter&&(t.shiftKey||t.altKey||t.ctrlKey||t.metaKey||t.isComposing||229===t.keyCode||this.#tt||this.#et||(t.preventDefault(),this.submit()))}submit(t){const e=t??this.#X;if(void 0===t&&!this.canSend)return!1;if(void 0!==t&&(this.#t.busy||this.#t.inputDisabled))return!1;if(""===e.trim())return!1;return!!$t(this.#t,wt.SUBMIT,{text:e},{cancelable:!0})&&(this.clear(),!0)}clear(){this.value="",this.focus()}focus(){this.#it?.focus()}#nt(){if(Kt)return;const t=this.#it;t&&(t.style.height="auto",t.style.height=`${t.scrollHeight}px`)}#ot(){const t=this.#t.renderRoot,e=t.querySelector('[part~="send-button"]');e&&(e.disabled=!this.canSend);const s=this.#it,i=t.querySelector('[part~="counter"]'),n=this.#t.maxLength;if(void 0===n)return;const o=n-this.length,r=o<0;if(s?.setAttribute("aria-invalid",r?"true":"false"),!i)return;i.textContent=String(o),i.toggleAttribute("data-over",r);const a=this.#t.currentLabels,h=r?a.overLimit:a.charactersLeft;i.setAttribute("aria-label",h.replace("{n}",String(Math.abs(o)))),i.hidden=this.length<=.8*n}}const Vt=new WeakMap,Jt=t=>`msg:${t}`,Yt=["text","html","template","element","component"];function Zt(t){const e=Yt.filter(e=>e in t);if(1===e.length)return e[0];if(0===e.length)throw new Error(`ChitUI: message "${t.id}" has no content. Give it one of html, template, element or component.`);throw new Error(`ChitUI: message "${t.id}" has ${e.join(" and ")}. Give it exactly one.`)}function Qt(t){return t[Zt(t)]}function Xt(t,e,s,i={}){let n=Vt.get(t);n||(n=new Map,Vt.set(t,n));const o=n.get(e);if(o&&o.source===s){for(const[t,e]of Object.entries(i))Object.is(o.props[t],e)||(o.element[t]=e);return o.props={...i},o.element}const r=document.createElement(function(t){if("string"==typeof t)return t;const e=customElements,s=e.getName?.(t);if(s)return s;const i=t.tagName;if("string"==typeof i&&i)return i;throw new Error("ChitUI: component is not registered in customElements. Call customElements.define() for it, or pass its tag name as a string.")}(s));for(const[t,e]of Object.entries(i))r[t]=e;return n.set(e,{source:s,element:r,props:{...i}}),r}function te(t,e){return Vt.get(t)?.get(Jt(e))?.element}function ee(t,e){switch(Zt(e)){case"text":return e.text;case"template":return e.template;case"element":return e.element;case"component":{const s=e;return Xt(t,Jt(e.id),s.component,s.props)}default:{const s=e.html;return yt(t.sanitize?t.sanitize(s):s)}}}function se(t){const e=t.currentTheme.closed,s=t.currentLabels,i=e.component?Xt(t,"launcher",e.component,e.props):null;return F`
|
|
2
2
|
<button
|
|
3
3
|
part="launcher"
|
|
4
4
|
type="button"
|
|
@@ -21,7 +21,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
21
21
|
<article part="message message-system" data-role="system" data-id=${e.id}>
|
|
22
22
|
<div part="message-content" data-content=${Zt(e)}>${ee(t,e)}</div>
|
|
23
23
|
</article>
|
|
24
|
-
`;const s=e.time||e.status;return F`
|
|
24
|
+
`;const s=e.time||e.status,i=t.currentTheme.open.speaker[e.role],n=void 0===e.avatar?i.avatar:e.avatar,o=void 0===e.name?i.name:e.name;return F`
|
|
25
25
|
<article
|
|
26
26
|
part="message message-${e.role}"
|
|
27
27
|
data-role=${e.role}
|
|
@@ -29,9 +29,9 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
29
29
|
?data-streaming=${!!e.streaming}
|
|
30
30
|
aria-busy=${e.streaming?"true":"false"}
|
|
31
31
|
>
|
|
32
|
-
${
|
|
32
|
+
${n?F`<img part="avatar" src=${n} alt="" loading="lazy" />`:i.avatar?F`<span part="avatar" data-placeholder aria-hidden="true"></span>`:G}
|
|
33
33
|
<div class="body">
|
|
34
|
-
${
|
|
34
|
+
${o?F`<span part="name">${o}</span>`:G}
|
|
35
35
|
<div part="bubble">
|
|
36
36
|
<div part="message-content" data-content=${Zt(e)}>${ee(t,e)}</div>
|
|
37
37
|
${e.streaming?F`<span part="cursor" aria-hidden="true"></span>`:G}
|
|
@@ -46,7 +46,76 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
46
46
|
`:G}
|
|
47
47
|
</div>
|
|
48
48
|
</article>
|
|
49
|
-
`}const me=gt(class extends bt{constructor(t){if(super(t),t.type!==mt&&t.type!==pt&&t.type!==ft)throw Error("The `live` directive is not allowed on child or event bindings");if(!(t=>void 0===t.strings)(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===K||e===G)return e;const s=t.element,i=t.name;if(t.type===mt){if(e===s[i])return K}else if(t.type===ft){if(!!e===s.hasAttribute(i))return K}else if(t.type===pt&&s.getAttribute(i)===e+"")return K;return le(t),e}});function fe(t){const e=t.currentTheme.open,
|
|
49
|
+
`}const me=gt(class extends bt{constructor(t){if(super(t),t.type!==mt&&t.type!==pt&&t.type!==ft)throw Error("The `live` directive is not allowed on child or event bindings");if(!(t=>void 0===t.strings)(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===K||e===G)return e;const s=t.element,i=t.name;if(t.type===mt){if(e===s[i])return K}else if(t.type===ft){if(!!e===s.hasAttribute(i))return K}else if(t.type===pt&&s.getAttribute(i)===e+"")return K;return le(t),e}});function fe(t){if(t.inputHidden)return G;const e=t.currentLabels,s=t.currentTheme.open,i=t.busy||t.inputDisabled,n=t.placeholder??s.input.placeholder??e.input;return F`
|
|
50
|
+
<form
|
|
51
|
+
part="composer"
|
|
52
|
+
@submit=${e=>{e.preventDefault(),t.submit()}}
|
|
53
|
+
>
|
|
54
|
+
<slot name="composer">
|
|
55
|
+
${s.input.attach?function(t,e){const s=t.currentLabels,i=t.currentTheme.open.input;return F`
|
|
56
|
+
<button
|
|
57
|
+
part="attach-button"
|
|
58
|
+
type="button"
|
|
59
|
+
aria-label=${s.attach}
|
|
60
|
+
title=${s.attach}
|
|
61
|
+
?disabled=${e}
|
|
62
|
+
@click=${()=>t.openAttach()}
|
|
63
|
+
>
|
|
64
|
+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
65
|
+
<path
|
|
66
|
+
fill="none"
|
|
67
|
+
stroke="currentColor"
|
|
68
|
+
stroke-width="2"
|
|
69
|
+
stroke-linecap="round"
|
|
70
|
+
stroke-linejoin="round"
|
|
71
|
+
d="M20 11.5 12.2 19.3a4.6 4.6 0 0 1-6.5-6.5l7.8-7.8a3 3 0 0 1 4.3 4.3l-7.8 7.8a1.5 1.5 0 0 1-2.1-2.1l7.1-7.1"
|
|
72
|
+
/>
|
|
73
|
+
</svg>
|
|
74
|
+
</button>
|
|
75
|
+
<input
|
|
76
|
+
part="attach-input"
|
|
77
|
+
type="file"
|
|
78
|
+
tabindex="-1"
|
|
79
|
+
aria-hidden="true"
|
|
80
|
+
accept=${i.accept}
|
|
81
|
+
?multiple=${i.multiple}
|
|
82
|
+
@change=${e=>{const s=e.target,i=Array.from(s.files??[]);s.value="",i.length&&t.handleAttach(i)}}
|
|
83
|
+
/>
|
|
84
|
+
`}(t,i):G}
|
|
85
|
+
|
|
86
|
+
<slot name="input-before"></slot>
|
|
87
|
+
|
|
88
|
+
<textarea
|
|
89
|
+
part="input"
|
|
90
|
+
rows="1"
|
|
91
|
+
.value=${me(t.value)}
|
|
92
|
+
placeholder=${n}
|
|
93
|
+
aria-label=${e.input}
|
|
94
|
+
?disabled=${i}
|
|
95
|
+
aria-describedby=${void 0===t.maxLength?G:"chit-counter"}
|
|
96
|
+
@input=${e=>t.handleInput(e)}
|
|
97
|
+
@keydown=${e=>t.handleKeydown(e)}
|
|
98
|
+
@compositionstart=${()=>t.handleComposition(!0)}
|
|
99
|
+
@compositionend=${()=>t.handleComposition(!1)}
|
|
100
|
+
></textarea>
|
|
101
|
+
|
|
102
|
+
<slot name="input-after"></slot>
|
|
103
|
+
|
|
104
|
+
${void 0===t.maxLength?G:F`<span part="counter" id="chit-counter" aria-live="polite" hidden></span>`}
|
|
105
|
+
|
|
106
|
+
<button
|
|
107
|
+
part="send-button"
|
|
108
|
+
type="submit"
|
|
109
|
+
aria-label=${e.send}
|
|
110
|
+
?disabled=${!t.canSend}
|
|
111
|
+
>
|
|
112
|
+
${t.busy?F`<span part="spinner" aria-hidden="true"></span>`:F`<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
113
|
+
<path fill="currentColor" d="M3.4 20.4 21 12 3.4 3.6 3.39 10.2 15.6 12 3.39 13.8z" />
|
|
114
|
+
</svg>`}
|
|
115
|
+
</button>
|
|
116
|
+
</slot>
|
|
117
|
+
</form>
|
|
118
|
+
`}function ge(t){const e=t.currentTheme.open,s=t.currentLabels,i=e.header.title??s.panel;return F`
|
|
50
119
|
<section
|
|
51
120
|
part="panel"
|
|
52
121
|
role="dialog"
|
|
@@ -55,18 +124,39 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
55
124
|
tabindex="-1"
|
|
56
125
|
@keydown=${e=>function(t,e){if("Escape"!==e.key||e.defaultPrevented)return;e.preventDefault(),t.closeFromUser()}(t,e)}
|
|
57
126
|
>
|
|
127
|
+
${e.header.visible?function(t,e){const s=t.currentTheme.open,i=t.currentLabels;return F`
|
|
58
128
|
<header part="header">
|
|
59
129
|
<slot name="header">
|
|
60
130
|
<slot name="header-title">
|
|
61
|
-
|
|
62
|
-
|
|
131
|
+
<span part="header-title">
|
|
132
|
+
${s.header.logo?F`<img part="header-logo" src=${s.header.logo} alt="" />`:G}
|
|
133
|
+
<span part="header-heading">${e}</span>
|
|
134
|
+
</span>
|
|
63
135
|
</slot>
|
|
64
136
|
<span part="header-actions">
|
|
65
137
|
<slot name="header-actions"></slot>
|
|
138
|
+
${s.header.home?F`<button
|
|
139
|
+
part="home-button"
|
|
140
|
+
type="button"
|
|
141
|
+
aria-label=${i.home}
|
|
142
|
+
title=${i.home}
|
|
143
|
+
@click=${()=>t.home("user")}
|
|
144
|
+
>
|
|
145
|
+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
146
|
+
<path
|
|
147
|
+
fill="none"
|
|
148
|
+
stroke="currentColor"
|
|
149
|
+
stroke-width="2"
|
|
150
|
+
stroke-linejoin="round"
|
|
151
|
+
stroke-linecap="round"
|
|
152
|
+
d="M4 11.2 12 4l8 7.2M6.5 9.8V19h11V9.8M10 19v-4.6h4V19"
|
|
153
|
+
/>
|
|
154
|
+
</svg>
|
|
155
|
+
</button>`:G}
|
|
66
156
|
<button
|
|
67
157
|
part="close-button"
|
|
68
158
|
type="button"
|
|
69
|
-
aria-label=${
|
|
159
|
+
aria-label=${i.close}
|
|
70
160
|
@click=${()=>t.closeFromUser()}
|
|
71
161
|
>
|
|
72
162
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
@@ -82,6 +172,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
82
172
|
</span>
|
|
83
173
|
</slot>
|
|
84
174
|
</header>
|
|
175
|
+
`}(t,i):G}
|
|
85
176
|
|
|
86
177
|
${function(t){const e=t.currentLabels,s=t.typing,i=0===t.messages.length&&!s;return F`
|
|
87
178
|
<div
|
|
@@ -112,49 +203,11 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
112
203
|
${e.toLatest}
|
|
113
204
|
</button>
|
|
114
205
|
`:G}
|
|
115
|
-
`}(t)} ${
|
|
116
|
-
<form
|
|
117
|
-
part="composer"
|
|
118
|
-
@submit=${e=>{e.preventDefault(),t.submit()}}
|
|
119
|
-
>
|
|
120
|
-
<slot name="composer">
|
|
121
|
-
<slot name="input-before"></slot>
|
|
122
|
-
|
|
123
|
-
<textarea
|
|
124
|
-
part="input"
|
|
125
|
-
rows="1"
|
|
126
|
-
.value=${me(t.value)}
|
|
127
|
-
placeholder=${n}
|
|
128
|
-
aria-label=${e.input}
|
|
129
|
-
?disabled=${i}
|
|
130
|
-
aria-describedby=${void 0===t.maxLength?G:"chit-counter"}
|
|
131
|
-
@input=${e=>t.handleInput(e)}
|
|
132
|
-
@keydown=${e=>t.handleKeydown(e)}
|
|
133
|
-
@compositionstart=${()=>t.handleComposition(!0)}
|
|
134
|
-
@compositionend=${()=>t.handleComposition(!1)}
|
|
135
|
-
></textarea>
|
|
136
|
-
|
|
137
|
-
<slot name="input-after"></slot>
|
|
138
|
-
|
|
139
|
-
${void 0===t.maxLength?G:F`<span part="counter" id="chit-counter" aria-live="polite" hidden></span>`}
|
|
140
|
-
|
|
141
|
-
<button
|
|
142
|
-
part="send-button"
|
|
143
|
-
type="submit"
|
|
144
|
-
aria-label=${e.send}
|
|
145
|
-
?disabled=${!t.canSend}
|
|
146
|
-
>
|
|
147
|
-
${t.busy?F`<span part="spinner" aria-hidden="true"></span>`:F`<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
148
|
-
<path fill="currentColor" d="M3.4 20.4 21 12 3.4 3.6 3.39 10.2 15.6 12 3.39 13.8z" />
|
|
149
|
-
</svg>`}
|
|
150
|
-
</button>
|
|
151
|
-
</slot>
|
|
152
|
-
</form>
|
|
153
|
-
`}(t)}
|
|
206
|
+
`}(t)} ${fe(t)}
|
|
154
207
|
|
|
155
208
|
<slot name="footer"></slot>
|
|
156
209
|
</section>
|
|
157
|
-
`}const
|
|
210
|
+
`}const be={ja:{launcher:"チャットを開く",panel:"チャット",conversation:"会話",close:"チャットを閉じる",home:"最初に戻る",send:"送信",attach:"画像や動画を添付",input:"メッセージを入力",typing:"入力中",toLatest:"最新へ",status:{sending:"送信中",sent:"送信済み",error:"送信できませんでした"},charactersLeft:"残り {n} 文字",overLimit:"{n} 文字超過しています"},en:{launcher:"Open chat",panel:"Chat",conversation:"Conversation",close:"Close chat",home:"Back to the start",send:"Send",attach:"Attach an image or video",input:"Type a message",typing:"Typing",toLatest:"Jump to latest",status:{sending:"Sending",sent:"Sent",error:"Not delivered"},charactersLeft:"{n} characters left",overLimit:"{n} characters over the limit"}};function ve(t){return t||document.documentElement.lang||void 0}const ye=r`
|
|
158
211
|
:host {
|
|
159
212
|
--chit-z-index: 2147483000;
|
|
160
213
|
--chit-font-family: system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
|
|
@@ -182,6 +235,8 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
182
235
|
--chit-color-header-bg: #ffffff;
|
|
183
236
|
--chit-color-header-text: #1f1f1f;
|
|
184
237
|
|
|
238
|
+
--chit-bubble-radius: 14px;
|
|
239
|
+
|
|
185
240
|
position: fixed;
|
|
186
241
|
inset: 0;
|
|
187
242
|
z-index: var(--chit-z-index);
|
|
@@ -302,7 +357,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
302
357
|
animation: none !important;
|
|
303
358
|
}
|
|
304
359
|
}
|
|
305
|
-
`,
|
|
360
|
+
`,we=r`
|
|
306
361
|
[part~='launcher'] {
|
|
307
362
|
position: absolute;
|
|
308
363
|
display: grid;
|
|
@@ -512,18 +567,33 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
512
567
|
color: var(--chit-color-header-text);
|
|
513
568
|
}
|
|
514
569
|
|
|
570
|
+
/*
|
|
571
|
+
* The image and the title are one flex item. A slot is display: contents,
|
|
572
|
+
* so without this wrapper its children become items of the header itself
|
|
573
|
+
* and space-between pushes the image to one edge and the title to the
|
|
574
|
+
* middle, away from each other.
|
|
575
|
+
*/
|
|
576
|
+
[part~='header-title'] {
|
|
577
|
+
display: inline-flex;
|
|
578
|
+
min-width: 0;
|
|
579
|
+
align-items: center;
|
|
580
|
+
gap: 0.5em;
|
|
581
|
+
}
|
|
582
|
+
|
|
515
583
|
[part~='header-heading'] {
|
|
584
|
+
overflow: hidden;
|
|
516
585
|
font-size: 1.05em;
|
|
517
586
|
font-weight: 600;
|
|
587
|
+
text-overflow: ellipsis;
|
|
588
|
+
white-space: nowrap;
|
|
518
589
|
}
|
|
519
590
|
|
|
520
591
|
[part~='header-logo'] {
|
|
592
|
+
flex: none;
|
|
521
593
|
width: 1.75em;
|
|
522
594
|
height: 1.75em;
|
|
523
|
-
margin-inline-end: 0.5em;
|
|
524
595
|
border-radius: 50%;
|
|
525
596
|
object-fit: cover;
|
|
526
|
-
vertical-align: middle;
|
|
527
597
|
}
|
|
528
598
|
|
|
529
599
|
[part~='header-actions'] {
|
|
@@ -532,6 +602,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
532
602
|
gap: 0.25em;
|
|
533
603
|
}
|
|
534
604
|
|
|
605
|
+
[part~='home-button'],
|
|
535
606
|
[part~='close-button'] {
|
|
536
607
|
display: grid;
|
|
537
608
|
place-items: center;
|
|
@@ -545,21 +616,36 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
545
616
|
cursor: pointer;
|
|
546
617
|
}
|
|
547
618
|
|
|
619
|
+
[part~='home-button']:hover,
|
|
548
620
|
[part~='close-button']:hover {
|
|
549
621
|
background: color-mix(in srgb, currentColor 10%, transparent);
|
|
550
622
|
}
|
|
551
623
|
|
|
624
|
+
[part~='home-button']:focus-visible,
|
|
552
625
|
[part~='close-button']:focus-visible {
|
|
553
626
|
outline: 2px solid var(--chit-color-accent);
|
|
554
627
|
outline-offset: 1px;
|
|
555
628
|
}
|
|
556
629
|
|
|
630
|
+
[part~='home-button'] svg,
|
|
557
631
|
[part~='close-button'] svg {
|
|
558
632
|
width: 1.1em;
|
|
559
633
|
height: 1.1em;
|
|
560
634
|
}
|
|
561
635
|
|
|
562
|
-
`,
|
|
636
|
+
`,xe=r`
|
|
637
|
+
:host {
|
|
638
|
+
/* Internal: the box the tail's path is drawn in. The path is written in
|
|
639
|
+
these units, so the two move together. */
|
|
640
|
+
--_chit-tail-w: 18px;
|
|
641
|
+
--_chit-tail-h: 20px;
|
|
642
|
+
/* How deep the tail's root sits inside the bubble. Less than the
|
|
643
|
+
bubble's own padding, so it never reaches the text. */
|
|
644
|
+
--_chit-tail-root: 9px;
|
|
645
|
+
/* Far enough down that the bubble's edge has straightened out under it. */
|
|
646
|
+
--_chit-tail-offset: calc(var(--chit-bubble-radius) / 4 + 1px);
|
|
647
|
+
}
|
|
648
|
+
|
|
563
649
|
[part~='messages'] {
|
|
564
650
|
flex: 1 1 auto;
|
|
565
651
|
min-height: 0;
|
|
@@ -584,7 +670,13 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
584
670
|
*/
|
|
585
671
|
[part~='message'] {
|
|
586
672
|
display: flex;
|
|
587
|
-
|
|
673
|
+
/*
|
|
674
|
+
* The icon sits level with the top of the speaker's block — beside the
|
|
675
|
+
* name when there is one, beside the bubble's first line otherwise. At
|
|
676
|
+
* the bottom it would end up next to the timestamp, away from everything
|
|
677
|
+
* it identifies.
|
|
678
|
+
*/
|
|
679
|
+
align-items: flex-start;
|
|
588
680
|
gap: 0.5em;
|
|
589
681
|
width: 100%;
|
|
590
682
|
max-width: 100%;
|
|
@@ -610,7 +702,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
610
702
|
[part~='bubble'] {
|
|
611
703
|
position: relative;
|
|
612
704
|
padding: 0.6em 0.85em;
|
|
613
|
-
border-radius:
|
|
705
|
+
border-radius: var(--chit-bubble-radius);
|
|
614
706
|
background: var(--chit-color-assistant-bg);
|
|
615
707
|
color: var(--chit-color-assistant-text);
|
|
616
708
|
}
|
|
@@ -625,6 +717,90 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
625
717
|
border-bottom-left-radius: 4px;
|
|
626
718
|
}
|
|
627
719
|
|
|
720
|
+
/* --- tails -------------------------------------------------------------
|
|
721
|
+
*
|
|
722
|
+
* A tail is one pseudo-element: a box in the bubble's colour, clipped to a
|
|
723
|
+
* leaf whose point sits outside the bubble and whose root is buried inside
|
|
724
|
+
* it. Burying the root is what makes the join disappear — the bubble's own
|
|
725
|
+
* background covers the seam, so every corner keeps its radius and the two
|
|
726
|
+
* read as one shape at any radius.
|
|
727
|
+
*
|
|
728
|
+
* It hangs a little below the corner, where the bubble's edge has
|
|
729
|
+
* straightened out, so the root has something flat to sit against. The
|
|
730
|
+
* offset follows the radius for that reason.
|
|
731
|
+
*
|
|
732
|
+
* The other side and the downward version are the same path mirrored, so
|
|
733
|
+
* the curve is written once.
|
|
734
|
+
*/
|
|
735
|
+
|
|
736
|
+
[part~='bubble']::after,
|
|
737
|
+
[part~='typing']::after {
|
|
738
|
+
content: '';
|
|
739
|
+
display: none;
|
|
740
|
+
position: absolute;
|
|
741
|
+
width: var(--_chit-tail-w);
|
|
742
|
+
height: var(--_chit-tail-h);
|
|
743
|
+
clip-path: path('M 18 0.5 Q 8 0.8 0.5 3.5 Q 0 5.2 2 7 Q 10 9.5 18 19 Z');
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
/*
|
|
747
|
+
* Everything below needs clip-path: path() to draw the leaf. Where that is
|
|
748
|
+
* missing the tail stays hidden and the bubble keeps its default shape,
|
|
749
|
+
* rather than a bare rectangle poking out of its side.
|
|
750
|
+
*/
|
|
751
|
+
@supports (clip-path: path('M 0 0 Z')) {
|
|
752
|
+
:host([data-bubble-tail='top']) [part~='bubble']::after,
|
|
753
|
+
:host([data-bubble-tail='bottom']) [part~='bubble']::after,
|
|
754
|
+
:host([data-bubble-tail='top']) [part~='typing']::after,
|
|
755
|
+
:host([data-bubble-tail='bottom']) [part~='typing']::after {
|
|
756
|
+
display: block;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
/*
|
|
760
|
+
* With a tail there is no need to clip the speaker's corner as well: one
|
|
761
|
+
* bubble carries one cue about who is talking, not two.
|
|
762
|
+
*/
|
|
763
|
+
:host([data-bubble-tail='top']) [part~='bubble'],
|
|
764
|
+
:host([data-bubble-tail='bottom']) [part~='bubble'],
|
|
765
|
+
:host([data-bubble-tail='top']) [part~='typing'],
|
|
766
|
+
:host([data-bubble-tail='bottom']) [part~='typing'] {
|
|
767
|
+
border-radius: var(--chit-bubble-radius);
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
/* Their side: the leaf points left, its root inside the bubble. */
|
|
771
|
+
:host([data-bubble-tail]) [part~='message-assistant'] [part~='bubble']::after,
|
|
772
|
+
:host([data-bubble-tail]) [part~='typing']::after {
|
|
773
|
+
right: calc(100% - var(--_chit-tail-root));
|
|
774
|
+
background: var(--chit-color-assistant-bg);
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
/* Your side: the same leaf, mirrored. */
|
|
778
|
+
:host([data-bubble-tail]) [part~='message-user'] [part~='bubble']::after {
|
|
779
|
+
left: calc(100% - var(--_chit-tail-root));
|
|
780
|
+
background: var(--chit-color-user-bg);
|
|
781
|
+
transform: scaleX(-1);
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
:host([data-bubble-tail='top']) [part~='bubble']::after,
|
|
785
|
+
:host([data-bubble-tail='top']) [part~='typing']::after {
|
|
786
|
+
top: var(--_chit-tail-offset);
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
:host([data-bubble-tail='bottom']) [part~='bubble']::after,
|
|
790
|
+
:host([data-bubble-tail='bottom']) [part~='typing']::after {
|
|
791
|
+
bottom: var(--_chit-tail-offset);
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
:host([data-bubble-tail='bottom']) [part~='message-assistant'] [part~='bubble']::after,
|
|
795
|
+
:host([data-bubble-tail='bottom']) [part~='typing']::after {
|
|
796
|
+
transform: scaleY(-1);
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
:host([data-bubble-tail='bottom']) [part~='message-user'] [part~='bubble']::after {
|
|
800
|
+
transform: scale(-1, -1);
|
|
801
|
+
}
|
|
802
|
+
}
|
|
803
|
+
|
|
628
804
|
[part~='avatar'] {
|
|
629
805
|
flex: none;
|
|
630
806
|
width: 2em;
|
|
@@ -633,6 +809,15 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
633
809
|
object-fit: cover;
|
|
634
810
|
}
|
|
635
811
|
|
|
812
|
+
/*
|
|
813
|
+
* A message that hides the theme's icon (avatar: null, for the second and
|
|
814
|
+
* later messages in a run) keeps its place in the row, so the bubbles below
|
|
815
|
+
* stay in line with the one that shows the face.
|
|
816
|
+
*/
|
|
817
|
+
[part~='avatar'][data-placeholder] {
|
|
818
|
+
visibility: hidden;
|
|
819
|
+
}
|
|
820
|
+
|
|
636
821
|
[part~='name'] {
|
|
637
822
|
font-size: 0.8em;
|
|
638
823
|
color: var(--chit-color-system-text);
|
|
@@ -676,9 +861,12 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
676
861
|
}
|
|
677
862
|
|
|
678
863
|
[part~='typing'] {
|
|
864
|
+
position: relative;
|
|
679
865
|
align-self: flex-start;
|
|
866
|
+
/* Indented past the speaker's icon, when the theme gives them one. */
|
|
867
|
+
margin-inline-start: var(--_chit-speaker-gutter, 0px);
|
|
680
868
|
padding: 0.7em 0.9em;
|
|
681
|
-
border-radius:
|
|
869
|
+
border-radius: var(--chit-bubble-radius);
|
|
682
870
|
border-bottom-left-radius: 4px;
|
|
683
871
|
background: var(--chit-color-assistant-bg);
|
|
684
872
|
color: var(--chit-color-assistant-text);
|
|
@@ -747,7 +935,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
747
935
|
animation: none;
|
|
748
936
|
}
|
|
749
937
|
}
|
|
750
|
-
`,
|
|
938
|
+
`,_e=r`
|
|
751
939
|
[part~='message-content'] {
|
|
752
940
|
min-width: 0;
|
|
753
941
|
max-width: 100%;
|
|
@@ -854,7 +1042,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
854
1042
|
border: 0;
|
|
855
1043
|
border-top: 1px solid var(--chit-color-border);
|
|
856
1044
|
}
|
|
857
|
-
`,
|
|
1045
|
+
`,Ae=r`
|
|
858
1046
|
[part~='composer'] {
|
|
859
1047
|
display: flex;
|
|
860
1048
|
flex: none;
|
|
@@ -908,6 +1096,45 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
908
1096
|
font-weight: 600;
|
|
909
1097
|
}
|
|
910
1098
|
|
|
1099
|
+
/* Out of sight, but still clickable from the button beside it. */
|
|
1100
|
+
[part~='attach-input'] {
|
|
1101
|
+
display: none;
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
[part~='attach-button'] {
|
|
1105
|
+
display: grid;
|
|
1106
|
+
flex: none;
|
|
1107
|
+
place-items: center;
|
|
1108
|
+
width: 2.4em;
|
|
1109
|
+
height: 2.4em;
|
|
1110
|
+
padding: 0;
|
|
1111
|
+
border: 0;
|
|
1112
|
+
border-radius: 50%;
|
|
1113
|
+
background: transparent;
|
|
1114
|
+
color: var(--chit-color-system-text);
|
|
1115
|
+
cursor: pointer;
|
|
1116
|
+
transition: opacity 120ms ease;
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
[part~='attach-button'] svg {
|
|
1120
|
+
width: 1.3em;
|
|
1121
|
+
height: 1.3em;
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1124
|
+
[part~='attach-button']:hover:not(:disabled) {
|
|
1125
|
+
background: color-mix(in srgb, currentColor 10%, transparent);
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
[part~='attach-button']:focus-visible {
|
|
1129
|
+
outline: 2px solid var(--chit-color-accent);
|
|
1130
|
+
outline-offset: 2px;
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
[part~='attach-button']:disabled {
|
|
1134
|
+
opacity: 0.4;
|
|
1135
|
+
cursor: default;
|
|
1136
|
+
}
|
|
1137
|
+
|
|
911
1138
|
[part~='send-button'] {
|
|
912
1139
|
display: grid;
|
|
913
1140
|
flex: none;
|
|
@@ -958,7 +1185,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
958
1185
|
animation-duration: 2s;
|
|
959
1186
|
}
|
|
960
1187
|
}
|
|
961
|
-
`;class Se extends ct{static styles=[
|
|
962
|
-
${e?se(this):G} ${s?
|
|
963
|
-
`}}customElements.get("chit-ui")||customElements.define("chit-ui",Se);const
|
|
1188
|
+
`;class Se extends ct{static styles=[ye,we,$e,xe,_e,Ae];static properties={state:{type:String,reflect:!0,noAccessor:!0},theme:{type:Object},messages:{type:Array},typing:{type:Object},busy:{type:Boolean,reflect:!0},inputDisabled:{type:Boolean,reflect:!0,attribute:"input-disabled"},inputHidden:{type:Boolean,reflect:!0,attribute:"input-hidden"},placeholder:{type:String,reflect:!0},sendOnEnter:{type:Boolean,reflect:!0,attribute:"send-on-enter"},maxLength:{type:Number,reflect:!0,attribute:"max-length"},focusOnOpen:{type:String,reflect:!0,attribute:"focus-on-open"},locale:{type:String,reflect:!0},labels:{type:Object},messageStyles:{type:String}};#rt="closed";#at="api";#ht;#x;#lt;#ct;#dt;#pt=new qt("data-chit-message-styles");#ut=new Map;#mt=null;constructor(){super(),this.theme={},this.messages=[],this.typing=!1,this.busy=!1,this.inputDisabled=!1,this.inputHidden=!1,this.placeholder=void 0,this.sendOnEnter=!0,this.maxLength=void 0,this.focusOnOpen="auto",this.locale=void 0,this.labels=void 0,this.messageStyles="",this.sanitize=void 0,this.formatTime=void 0,this.#ht=new _t(this,{animation:(t,e,s)=>this.#ft(t,e,s),keepsLauncher:()=>"visible"===this.currentTheme.open.launcher,onOpened:()=>this.#gt()}),this.#x=new At(this),this.#lt=new Ft(this,{device:()=>this.#x.device}),this.addController(this.#lt),this.#ct=new Wt(this,{behavior:()=>this.currentTheme.open.animation.scroll}),this.#dt=new Gt(this)}get state(){return this.#rt}set state(t){const e=this.#rt;if(t===e)return;if(this.#rt=t,this.requestUpdate("state",e),!this.#ht||this.#ht.applying)return;const s=this.#at;this.#at="api";const i=this.#ht.request(t,s);this.#mt=i,i.then(()=>{this.#mt===i&&(this.#mt=null)})}get device(){return this.#x.device}get currentTheme(){return this.#lt.current}get currentLabels(){return function(t,e){const s=(ve(t)||"en").toLowerCase(),i=be[s]??be[s.split("-")[0]]??be.en;return e?{...i,...e}:i}(this.locale,this.labels)}get resolvedLocale(){return ve(this.locale)}get renderedState(){return this.#ht.renderedState}get hasUnseen(){return this.#ct.hasUnseen}get value(){return this.#dt.value}set value(t){this.#dt.value=t}get canSend(){return this.#dt.canSend}open(){return this.#bt("open","api")}close(){return this.#bt("closed","api")}hide(){return this.#bt("hidden","api")}show(){return"hidden"===this.#rt?this.#bt("closed","api"):Promise.resolve(!0)}toggle(){return this.#bt("open"===this.state?"closed":"open","api")}submit(t){return this.#dt.submit(t)}clearInput(){this.#dt.clear()}scrollToBottom(t){this.#ct.scrollToBottom(t)}getMessageElement(t){return this.renderRoot.querySelector(`[part~="message"][data-id="${CSS.escape(t)}"] [part~="message-content"]`)}focusInput(){const t=this.renderRoot.querySelector('[part~="input"]');return!!t&&(t.focus(),!0)}#gt(){if("never"===this.focusOnOpen)return;if("auto"===this.focusOnOpen&&"mobile"===this.device)return;if(this.focusInput())return;const t=this.renderRoot.querySelector('[part~="panel"]');t?.focus()}handleInput(t){this.#dt.onInput(t)}handleKeydown(t){this.#dt.onKeydown(t)}handleComposition(t){t?this.#dt.onCompositionStart():this.#dt.onCompositionEnd()}handleAttach(t){$t(this,wt.ATTACH,{files:t})}openAttach(){const t=this.renderRoot.querySelector('[part~="attach-input"]');t?.click()}renderTypingHtml(t){return yt(this.sanitize?this.sanitize(t):t)}handleMessageClick(t){const e=t.composedPath(),s=e.find(t=>t instanceof HTMLElement&&t.getAttribute("part")?.split(/\s+/).includes("message"));if(!s)return;const i=s.dataset.id,n=this.messages.find(t=>t.id===i);if(!n)return;const o=e[0];$t(this,wt.MESSAGE_CLICK,{message:n,target:o,originalEvent:t},{cancelable:!0})||t.preventDefault()}toggleFromUser(){return this.#bt("open"===this.state?"closed":"open","user")}closeFromUser(){return this.#bt("closed","user")}home(t="api"){$t(this,wt.HOME,{trigger:t})}#bt(t,e){return t!==this.#rt&&(this.#at=e,this.state=t),this.#mt??Promise.resolve(!0)}#ft(t,e,s){const i=this.currentTheme;if("exit"===s&&"hidden"===e)return{effect:i.hidden.animation.exit,duration:i.hidden.animation.duration};const n="open"===("exit"===s?t:e)?i.open:i.closed;return{effect:"exit"===s?n.animation.exit:n.animation.enter,duration:n.animation.duration}}willUpdate(){this.#x.observe(Ft.breakpointOf(this.theme)),this.#lt.apply(this.theme,this.#x.device),this.#pt.write(this.messageStyles??"",this.renderRoot);const t=this.currentTheme;this.dataset.launcherPosition=t.closed.position,this.dataset.panelPosition=t.open.position,this.dataset.idle=t.closed.animation.idle,this.dataset.bubbleTail=t.open.bubble.tail}updated(){const t=new Set(this.messages.map(t=>t.id));!function(t,e){const s=Vt.get(t);if(s)for(const t of s.keys())t.startsWith("msg:")&&(e.has(t.slice(4))||s.delete(t))}(this,t),this.#vt(t)}#vt(t){for(const e of this.#ut.keys())t.has(e)||this.#ut.delete(e);for(const t of this.messages){const e=Qt(t);if(this.#ut.has(t.id)&&Object.is(this.#ut.get(t.id),e))continue;this.#ut.set(t.id,e);const s=this.getMessageElement(t.id);s&&$t(this,wt.MESSAGE_RENDER,{message:t,element:s,instance:te(this,t.id)})}}render(){const t=this.renderedState,e="closed"===t||"open"===t&&"visible"===this.currentTheme.open.launcher,s="open"===t;return F`
|
|
1189
|
+
${e?se(this):G} ${s?ge(this):G}
|
|
1190
|
+
`}}customElements.get("chit-ui")||customElements.define("chit-ui",Se);const Ee=gt(class extends bt{constructor(t){if(super(t),t.type!==pt||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter(e=>t[e]).join(" ")+" "}update(t,[e]){if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in e)e[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(e)}const s=t.element.classList;for(const t of this.st)t in e||(s.remove(t),this.st.delete(t));for(const t in e){const i=!!e[t];i===this.st.has(t)||this.nt?.has(t)||(i?(s.add(t),this.st.add(t)):(s.remove(t),this.st.delete(t)))}return K}}),ke="important",Ce=" !"+ke,Te=gt(class extends bt{constructor(t){if(super(t),t.type!==pt||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,s)=>{const i=t[s];return null==i?e:e+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${i};`},"")}update(t,[e]){const{style:s}=t.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(e)),this.render(e);for(const t of this.ft)null==e[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in e){const i=e[t];if(null!=i){this.ft.add(t);const e="string"==typeof i&&i.endsWith(Ce);t.includes("-")||e?s.setProperty(t,e?i.slice(0,-11):i,e?ke:""):s[t]=i}}return K}});return t.ChitUI=Se,t.Events=wt,t.LitElement=ct,t.classMap=Ee,t.css=r,t.greenTheme={closed:{colors:{background:"#0a6b36",text:"#ffffff",shadow:"0 4px 12px rgba(16, 42, 26, 0.32)"}},open:{radius:12,colors:{background:"#d3ddea",text:"#16212c",accent:"#0a6b36",border:"#b6c5d6",shadow:"0 8px 32px rgba(16, 32, 48, 0.28)",headerBackground:"#ffffff",headerText:"#16212c",userBubble:"#9ce26c",userText:"#14240c",assistantBubble:"#ffffff",assistantText:"#16212c",systemText:"#37475a",inputBackground:"#ffffff",inputText:"#16212c",inputPlaceholder:"#5c6370"},bubble:{radius:18,tail:"top"}}},t.html=F,t.live=me,t.nothing=G,t.render=ht,t.repeat=pe,t.styleMap=Te,t.svg=W,t.unsafeHTML=yt,t}({});
|
|
964
1191
|
//# sourceMappingURL=chit-ui.iife.min.js.map
|