@hidemikimura/chit-ui 0.1.0 → 0.3.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 +91 -0
- package/README.md +314 -11
- package/dist/chit-ui.iife.min.js +416 -94
- package/dist/chit-ui.iife.min.js.map +1 -1
- package/dist/chit-ui.min.js +407 -85
- package/dist/chit-ui.min.js.map +1 -1
- package/dist/types/bundle.d.ts +1 -0
- package/dist/types/chit-ui.d.ts +89 -4
- package/dist/types/controllers/composer-controller.d.ts +4 -0
- package/dist/types/controllers/drag-controller.d.ts +118 -0
- package/dist/types/events.d.ts +3 -0
- package/dist/types/global.d.ts +9 -1
- package/dist/types/i18n/labels.d.ts +16 -0
- package/dist/types/render/composer.d.ts +0 -1
- package/dist/types/render/message-list.d.ts +0 -1
- package/dist/types/theme/default-theme.d.ts +30 -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 +105 -4
- package/package.json +6 -1
- package/src/bundle.js +1 -0
- package/src/chit-ui.js +292 -4
- package/src/controllers/composer-controller.js +2 -0
- package/src/controllers/drag-controller.js +319 -0
- package/src/events.js +3 -0
- package/src/global.d.ts +9 -1
- package/src/i18n/labels.js +12 -0
- package/src/render/composer.js +58 -0
- package/src/render/launcher.js +9 -1
- package/src/render/message-list.js +40 -10
- package/src/render/message.js +13 -4
- package/src/render/panel.js +73 -11
- package/src/styles/composer.css.js +39 -0
- package/src/styles/host.css.js +2 -0
- package/src/styles/launcher.css.js +13 -0
- package/src/styles/message.css.js +168 -9
- package/src/styles/panel.css.js +44 -4
- package/src/theme/default-theme.js +37 -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 +38 -6
package/dist/chit-ui.min.js
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),i=new WeakMap;let n=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const s=this.t;if(e&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=i.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&i.set(s,t))}return t}toString(){return this.cssText}};const o=(t,...e)=>{const i=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 n(i,t,s)},r=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new n("string"==typeof t?t:t+"",void 0,s))(e)})(t):t,{is:a,defineProperty:h,getOwnPropertyDescriptor:l,getOwnPropertyNames:c,getOwnPropertySymbols:d,getPrototypeOf:p}=Object,u=globalThis,m=u.trustedTypes,f=m?m.emptyScript:"",g=u.reactiveElementPolyfillSupport,b=(t,e)=>t,v={toAttribute(t,e){switch(e){case Boolean:t=t?f: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}},y=(t,e)=>!a(t,e),$={attribute:!0,type:String,converter:v,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),u.litPropertyMetadata??=new WeakMap;let w=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&&h(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:n}=l(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(b("elementProperties")))return;const t=p(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(b("properties"))){const t=this.properties,e=[...c(t),...d(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(r(t))}else void 0!==t&&e.push(r(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 s=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((s,i)=>{if(e)s.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of i){const i=document.createElement("style"),n=t.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=e.cssText,s.appendChild(i)}})(s,this.constructor.elementStyles),s}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:v).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:v;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??y)(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){}};w.elementStyles=[],w.shadowRootOptions={mode:"open"},w[b("elementProperties")]=new Map,w[b("finalized")]=new Map,g?.({ReactiveElement:w}),(u.reactiveElementVersions??=[]).push("2.1.2");const x=globalThis,_=t=>t,S=x.trustedTypes,A=S?S.createPolicy("lit-html",{createHTML:t=>t}):void 0,E="$lit$",C=`lit$${Math.random().toFixed(9).slice(2)}$`,k="?"+C,T=`<${k}>`,O=document,U=()=>O.createComment(""),P=t=>null===t||"object"!=typeof t&&"function"!=typeof t,L=Array.isArray,R="[ \t\n\f\r]",z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,N=/>/g,H=RegExp(`>|${R}(?:([^\\s"'>=/]+)(${R}*=${R}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),B=/'/g,I=/"/g,j=/^(?:script|style|textarea|title)$/i,D=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),q=D(1),F=D(2),W=Symbol.for("lit-noChange"),K=Symbol.for("lit-nothing"),G=new WeakMap,J=O.createTreeWalker(O,129);function V(t,e){if(!L(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(e):e}class Y{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=M:void 0!==h[1]?r=N:void 0!==h[2]?(j.test(h[2])&&(n=RegExp("</"+h[2],"g")),r=H):void 0!==h[3]&&(r=H):r===H?">"===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]?H:'"'===h[3]?I:B):r===I||r===B?r=H:r===M||r===N?r=z:(r=H,n=void 0);const d=r===H&&t[e+1].startsWith("/>")?" ":"";o+=r===z?s+T:l>=0?(i.push(a),s.slice(0,l)+E+s.slice(l)+C+d):s+C+(-2===l?e:d)}return[V(t,o+(t[s]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]})(t,e);if(this.el=Y.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(E)){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]?et:"?"===r[1]?st:"@"===r[1]?it:tt}),i.removeAttribute(t)}else t.startsWith(C)&&(a.push({type:6,index:n}),i.removeAttribute(t));if(j.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],U()),J.nextNode(),a.push({type:2,index:++n});i.append(t[e],U())}}}else if(8===i.nodeType)if(i.data===k)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=O.createElement("template");return s.innerHTML=t,s}}function Z(t,e,s=t,i){if(e===W)return e;let n=void 0!==i?s._$Co?.[i]:s._$Cl;const o=P(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=Z(t,n._$AS(t,e.values),n,i)),e}class Q{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??O).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 X(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new nt(n,this,t)),this._$AV.push(e),a=s[++r]}o!==a?.index&&(n=J.nextNode(),o++)}return J.currentNode=O,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 X{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=K,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=Z(this,t,e),P(t)?t===K||null==t||""===t?(this._$AH!==K&&this._$AR(),this._$AH=K):t!==this._$AH&&t!==W&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>L(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!==K&&P(this._$AH)?this._$AA.nextSibling.data=t:this.T(O.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=Y.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new Q(i,this),s=t.u(this.options);t.p(e),this.T(s),this._$AH=t}}_$AC(t){let e=G.get(t.strings);return void 0===e&&G.set(t.strings,e=new Y(t)),e}k(t){L(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 X(this.O(U()),this.O(U()),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=_(t).nextSibling;_(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class tt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,n){this.type=1,this._$AH=K,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=K}_$AI(t,e=this,s,i){const n=this.strings;let o=!1;if(void 0===n)t=Z(this,t,e,0),o=!P(t)||t!==this._$AH&&t!==W,o&&(this._$AH=t);else{const i=t;let r,a;for(t=n[0],r=0;r<n.length-1;r++)a=Z(this,i[s+r],e,r),a===W&&(a=this._$AH[r]),o||=!P(a)||a!==this._$AH[r],a===K?t=K:t!==K&&(t+=(a??"")+n[r+1]),this._$AH[r]=a}o&&!i&&this.j(t)}j(t){t===K?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class et extends tt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===K?void 0:t}}class st extends tt{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==K)}}class it extends tt{constructor(t,e,s,i,n){super(t,e,s,i,n),this.type=5}_$AI(t,e=this){if((t=Z(this,t,e,0)??K)===W)return;const s=this._$AH,i=t===K&&s!==K||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==K&&(s===K||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 nt{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){Z(this,t)}}const ot={I:X},rt=x.litHtmlPolyfillSupport;rt?.(Y,X),(x.litHtmlVersions??=[]).push("3.3.3");const at=(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 X(e.insertBefore(U(),t),t,void 0,s??{})}return n._$AI(t),n},ht=globalThis;let lt=class extends w{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=at(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return W}};lt._$litElement$=!0,lt.finalized=!0,ht.litElementHydrateSupport?.({LitElement:lt});const ct=ht.litElementPolyfillSupport;ct?.({LitElement:lt}),(ht.litElementVersions??=[]).push("4.2.2");const dt=1,pt=2,ut=3,mt=4,ft=t=>(...e)=>({_$litDirective$:t,values:e});let gt=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)}},bt=class extends gt{constructor(t){if(super(t),this.it=K,t.type!==pt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===K||null==t)return this._t=void 0,this.it=t;if(t===W)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:[]}}};bt.directiveName="unsafeHTML",bt.resultType=1;const vt=ft(bt),yt=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 $t(t,e,s,{cancelable:i=!1}={}){return t.dispatchEvent(new CustomEvent(e,{detail:s,bubbles:!0,composed:!0,cancelable:i}))}const wt={closed:"launcher",open:"panel",hidden:null};class xt{#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,yt.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,yt.BEFORE_OPEN,{from:t,trigger:s},{cancelable:!0}):"closed"!==e||"open"!==t||$t(this.#t,yt.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&&$t(this.#t,yt.SHOW,{from:t,to:e}),"hidden"!==e?"open"===e?$t(this.#t,yt.OPEN,{from:t,trigger:s}):"closed"===e&&"open"===t&&$t(this.#t,yt.CLOSE,{from:t,trigger:s}):$t(this.#t,yt.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=wt[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 _t{#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&&$t(this.#t,yt.BREAKPOINT_CHANGE,{device:t}),this.#S=!0)}}const St="#2563eb",At="#1f2328",Et="#5c6370",Ct="#ffffff",kt="#f1f3f5",Tt="#e4e4e7",Ot="#ffffff",Ut={size:60,position:"bottom-right",offset:{x:24,y:24},radius:30,image:null,label:null,component:null,props:{},colors:{background:St,text:Ot,shadow:"0 4px 12px rgba(0, 0, 0, 0.2)"},animation:{enter:"scale",exit:"scale",duration:200,idle:"none"}},Pt={size:56,offset:{x:16,y:16},radius:28},Lt={breakpoint:768,zIndex:2147483e3,font:{family:"system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif",size:14},closed:{pc:Ut,mobile:{...Ut,...Pt}},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:Ct,text:At,accent:St,border:Tt,shadow:"0 8px 32px rgba(0, 0, 0, 0.24)",headerBackground:Ct,headerText:At,userBubble:St,userText:Ot,assistantBubble:kt,assistantText:At,systemText:Et,inputBackground:Ct,inputText:At,inputPlaceholder:Et},animation:{enter:"scale",exit:"fade",duration:150,scroll:"smooth"},input:{maxRows:5,placeholder:null}},hidden:{animation:{exit:"fade",duration:150}}},Rt=Pt;function zt(t){return"object"==typeof t&&null!==t&&!Array.isArray(t)}function Mt(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)?Mt(e,i):i}return s}function Nt(t,e){const s=t??{},i=function(t,e){const s=t??{};if(!("pc"in s)&&!("mobile"in s)){const s=t??{};return Mt(Lt.closed[e],s)}const i=Mt(Lt.closed.pc,s.pc);return"pc"===e?i:s.mobile?Mt(Lt.closed.mobile,s.mobile):Mt(i,Rt)}(s.closed,e);return{breakpoint:s.breakpoint??Lt.breakpoint,zIndex:s.zIndex??Lt.zIndex,font:Mt(Lt.font,s.font),closed:Mt(Lt.closed[e],i),open:Mt(Lt.open,s.open),hidden:Mt(Lt.hidden,s.hidden),device:e}}const Ht=t=>`${t}px`;function Bt(t){return t?`url("${t.replace(/[\\"]/g,"\\$&")}")`:"none"}function It(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":Ht(t.font.size),"--chit-launcher-size":"auto"===e.size?"auto":Ht(e.size),"--chit-launcher-offset-x":Ht(e.offset.x),"--chit-launcher-offset-y":Ht(e.offset.y),"--chit-launcher-radius":Ht(e.radius),"--chit-launcher-image":Bt(e.image),"--chit-launcher-bg":e.colors.background,"--chit-launcher-text":e.colors.text,"--chit-launcher-shadow":e.colors.shadow,"--chit-panel-width":Ht(s.width),"--chit-panel-height":Ht(s.height),"--chit-panel-offset-x":Ht(s.offset.x),"--chit-panel-offset-y":Ht(s.offset.y),"--chit-panel-radius":Ht(s.radius),"--chit-panel-bg-image":Bt(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 jt="undefined"!=typeof ShadowRoot&&"adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype;class Dt{#C=null;#k=null;#T="";#O;constructor(t){this.#O=t}attach(t){if(t instanceof ShadowRoot){if(jt)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 qt{#t;#C=new Dt("data-chit-theme");#U;constructor(t,{device:e}){this.#t=t,this.#U=Nt(void 0,e())}get current(){return this.#U}hostConnected(){this.#P()}hostDisconnected(){this.#C.detach()}static breakpointOf(t){return function(t){return t?.breakpoint??Lt.breakpoint}(t)}apply(t,e){this.#U=Nt(t,e),this.#P()}#P(){this.#C.write(It(this.#U),this.#t.renderRoot)}}class Ft{#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&&$t(this.#t,yt.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 Wt="undefined"!=typeof CSS&&CSS.supports?.("field-sizing","content");class Kt{#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,yt.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,yt.SUBMIT,{text:e},{cancelable:!0})&&(this.clear(),!0)}clear(){this.value="",this.focus()}focus(){this.#it?.focus()}#nt(){if(Wt)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 Gt=new WeakMap,Jt=t=>`msg:${t}`,Vt=["text","html","template","element","component"];function Yt(t){const e=Vt.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 Zt(t){return t[Yt(t)]}function Qt(t,e,s,i={}){let n=Gt.get(t);n||(n=new Map,Gt.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 Xt(t,e){return Gt.get(t)?.get(Jt(e))?.element}function te(t,e){switch(Yt(e)){case"text":return e.text;case"template":return e.template;case"element":return e.element;case"component":{const s=e;return Qt(t,Jt(e.id),s.component,s.props)}default:{const s=e.html;return vt(t.sanitize?t.sanitize(s):s)}}}function ee(t){const e=t.currentTheme.closed,s=t.currentLabels,i=e.component?Qt(t,"launcher",e.component,e.props):null;return q`
|
|
1
|
+
const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),s=new WeakMap;let n=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 i=this.t;if(e&&void 0===t){const e=void 0!==i&&1===i.length;e&&(t=s.get(i)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&s.set(i,t))}return t}toString(){return this.cssText}};const o=(t,...e)=>{const s=1===t.length?t[0]:e.reduce((e,i,s)=>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.")})(i)+t[s+1],t[0]);return new n(s,t,i)},r=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new n("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:a,defineProperty:h,getOwnPropertyDescriptor:l,getOwnPropertyNames:c,getOwnPropertySymbols:d,getPrototypeOf:p}=Object,u=globalThis,m=u.trustedTypes,f=m?m.emptyScript:"",g=u.reactiveElementPolyfillSupport,b=(t,e)=>t,v={toAttribute(t,e){switch(e){case Boolean:t=t?f:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},y=(t,e)=>!a(t,e),w={attribute:!0,type:String,converter:v,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),u.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 i=Symbol(),s=this.getPropertyDescriptor(t,i,e);void 0!==s&&h(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){const{get:s,set:n}=l(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:s,set(e){const o=s?.call(this);n?.call(this,e),this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??w}static _$Ei(){if(this.hasOwnProperty(b("elementProperties")))return;const t=p(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(b("properties"))){const t=this.properties,e=[...c(t),...d(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(r(t))}else void 0!==t&&e.push(r(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"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 i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const i=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((i,s)=>{if(e)i.adoptedStyleSheets=s.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of s){const s=document.createElement("style"),n=t.litNonce;void 0!==n&&s.setAttribute("nonce",n),s.textContent=e.cssText,i.appendChild(s)}})(i,this.constructor.elementStyles),i}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,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,i);if(void 0!==s&&!0===i.reflect){const n=(void 0!==i.converter?.toAttribute?i.converter:v).toAttribute(e,i.type);this._$Em=t,null==n?this.removeAttribute(s):this.setAttribute(s,n),this._$Em=null}}_$AK(t,e){const i=this.constructor,s=i._$Eh.get(t);if(void 0!==s&&this._$Em!==s){const t=i.getPropertyOptions(s),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:v;this._$Em=s;const o=n.fromAttribute(e,t.type);this[s]=o??this._$Ej?.get(s)??o,this._$Em=null}}requestUpdate(t,e,i,s=!1,n){if(void 0!==t){const o=this.constructor;if(!1===s&&(n=this[t]),i??=o.getPropertyOptions(t),!((i.hasChanged??y)(n,e)||i.useDefault&&i.reflect&&n===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:s,wrapped:n},o){i&&!(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||i||(e=void 0),this._$AL.set(t,e)),!0===s&&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,i]of t){const{wrapped:t}=i,s=this[e];!0!==t||this._$AL.has(e)||void 0===s||this.C(e,void 0,i,s)}}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[b("elementProperties")]=new Map,x[b("finalized")]=new Map,g?.({ReactiveElement:x}),(u.reactiveElementVersions??=[]).push("2.1.2");const $=globalThis,_=t=>t,A=$.trustedTypes,S=A?A.createPolicy("lit-html",{createHTML:t=>t}):void 0,E="$lit$",k=`lit$${Math.random().toFixed(9).slice(2)}$`,T="?"+k,C=`<${T}>`,O=document,P=()=>O.createComment(""),M=t=>null===t||"object"!=typeof t&&"function"!=typeof t,L=Array.isArray,U="[ \t\n\f\r]",z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,R=/-->/g,B=/>/g,D=RegExp(`>|${U}(?:([^\\s"'>=/]+)(${U}*=${U}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),H=/'/g,I=/"/g,N=/^(?:script|style|textarea|title)$/i,j=t=>(e,...i)=>({_$litType$:t,strings:e,values:i}),q=j(1),W=j(2),F=Symbol.for("lit-noChange"),K=Symbol.for("lit-nothing"),V=new WeakMap,Y=O.createTreeWalker(O,129);function G(t,e){if(!L(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==S?S.createHTML(e):e}class J{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let n=0,o=0;const r=t.length-1,a=this.parts,[h,l]=((t,e)=>{const i=t.length-1,s=[];let n,o=2===e?"<svg>":3===e?"<math>":"",r=z;for(let e=0;e<i;e++){const i=t[e];let a,h,l=-1,c=0;for(;c<i.length&&(r.lastIndex=c,h=r.exec(i),null!==h);)c=r.lastIndex,r===z?"!--"===h[1]?r=R:void 0!==h[1]?r=B:void 0!==h[2]?(N.test(h[2])&&(n=RegExp("</"+h[2],"g")),r=D):void 0!==h[3]&&(r=D):r===D?">"===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]?D:'"'===h[3]?I:H):r===I||r===H?r=D:r===R||r===B?r=z:(r=D,n=void 0);const d=r===D&&t[e+1].startsWith("/>")?" ":"";o+=r===z?i+C:l>=0?(s.push(a),i.slice(0,l)+E+i.slice(l)+k+d):i+k+(-2===l?e:d)}return[G(t,o+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),s]})(t,e);if(this.el=J.createElement(h,i),Y.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(s=Y.nextNode())&&a.length<r;){if(1===s.nodeType){if(s.hasAttributes())for(const t of s.getAttributeNames())if(t.endsWith(E)){const e=l[o++],i=s.getAttribute(t).split(k),r=/([.?@])?(.*)/.exec(e);a.push({type:1,index:n,name:r[2],strings:i,ctor:"."===r[1]?et:"?"===r[1]?it:"@"===r[1]?st:tt}),s.removeAttribute(t)}else t.startsWith(k)&&(a.push({type:6,index:n}),s.removeAttribute(t));if(N.test(s.tagName)){const t=s.textContent.split(k),e=t.length-1;if(e>0){s.textContent=A?A.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],P()),Y.nextNode(),a.push({type:2,index:++n});s.append(t[e],P())}}}else if(8===s.nodeType)if(s.data===T)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(k,t+1));)a.push({type:7,index:n}),t+=k.length-1}n++}}static createElement(t,e){const i=O.createElement("template");return i.innerHTML=t,i}}function Z(t,e,i=t,s){if(e===F)return e;let n=void 0!==s?i._$Co?.[s]:i._$Cl;const o=M(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,i,s)),void 0!==s?(i._$Co??=[])[s]=n:i._$Cl=n),void 0!==n&&(e=Z(t,n._$AS(t,e.values),n,s)),e}class Q{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:i}=this._$AD,s=(t?.creationScope??O).importNode(e,!0);Y.currentNode=s;let n=Y.nextNode(),o=0,r=0,a=i[0];for(;void 0!==a;){if(o===a.index){let e;2===a.type?e=new X(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new nt(n,this,t)),this._$AV.push(e),a=i[++r]}o!==a?.index&&(n=Y.nextNode(),o++)}return Y.currentNode=O,s}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class X{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,s){this.type=2,this._$AH=K,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cv=s?.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=Z(this,t,e),M(t)?t===K||null==t||""===t?(this._$AH!==K&&this._$AR(),this._$AH=K):t!==this._$AH&&t!==F&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>L(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!==K&&M(this._$AH)?this._$AA.nextSibling.data=t:this.T(O.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,s="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=J.createElement(G(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(e);else{const t=new Q(s,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=V.get(t.strings);return void 0===e&&V.set(t.strings,e=new J(t)),e}k(t){L(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const n of t)s===e.length?e.push(i=new X(this.O(P()),this.O(P()),this,this.options)):i=e[s],i._$AI(n),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=_(t).nextSibling;_(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class tt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,s,n){this.type=1,this._$AH=K,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=K}_$AI(t,e=this,i,s){const n=this.strings;let o=!1;if(void 0===n)t=Z(this,t,e,0),o=!M(t)||t!==this._$AH&&t!==F,o&&(this._$AH=t);else{const s=t;let r,a;for(t=n[0],r=0;r<n.length-1;r++)a=Z(this,s[i+r],e,r),a===F&&(a=this._$AH[r]),o||=!M(a)||a!==this._$AH[r],a===K?t=K:t!==K&&(t+=(a??"")+n[r+1]),this._$AH[r]=a}o&&!s&&this.j(t)}j(t){t===K?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class et extends tt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===K?void 0:t}}class it extends tt{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==K)}}class st extends tt{constructor(t,e,i,s,n){super(t,e,i,s,n),this.type=5}_$AI(t,e=this){if((t=Z(this,t,e,0)??K)===F)return;const i=this._$AH,s=t===K&&i!==K||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,n=t!==K&&(i===K||s);s&&this.element.removeEventListener(this.name,this,i),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 nt{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){Z(this,t)}}const ot={I:X},rt=$.litHtmlPolyfillSupport;rt?.(J,X),($.litHtmlVersions??=[]).push("3.3.3");const at=(t,e,i)=>{const s=i?.renderBefore??e;let n=s._$litPart$;if(void 0===n){const t=i?.renderBefore??null;s._$litPart$=n=new X(e.insertBefore(P(),t),t,void 0,i??{})}return n._$AI(t),n},ht=globalThis;let lt=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=at(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return F}};lt._$litElement$=!0,lt.finalized=!0,ht.litElementHydrateSupport?.({LitElement:lt});const ct=ht.litElementPolyfillSupport;ct?.({LitElement:lt}),(ht.litElementVersions??=[]).push("4.2.2");const dt=1,pt=2,ut=3,mt=4,ft=t=>(...e)=>({_$litDirective$:t,values:e});let gt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}},bt=class extends gt{constructor(t){if(super(t),this.it=K,t.type!==pt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===K||null==t)return this._t=void 0,this.it=t;if(t===F)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:[]}}};bt.directiveName="unsafeHTML",bt.resultType=1;const vt=ft(bt),yt=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",MOVE:"chat-move"});function wt(t,e,i,{cancelable:s=!1}={}){return t.dispatchEvent(new CustomEvent(e,{detail:i,bubbles:!0,composed:!0,cancelable:s}))}const xt={closed:"launcher",open:"panel",hidden:null};class $t{#t;#e;#i;#s;#n="closed";#o="closed";#r=!1;#a=0;#h=null;#l=null;#c=!1;constructor(t,{animation:e,keepsLauncher:i,onOpened:s}){this.#t=t,this.#e=e,this.#i=i,this.#s=s,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 i=this.#n;return t===i?Promise.resolve(!0):this.#d(i,t,e)?(this.#p(),this.#n=t,this.#u(t),wt(this.#t,yt.STATE_CHANGE,{from:i,to:t,trigger:e}),this.#m(i,t,e)):(this.#u(i),Promise.resolve(!1))}#d(t,e,i){return"open"===e?wt(this.#t,yt.BEFORE_OPEN,{from:t,trigger:i},{cancelable:!0}):"closed"!==e||"open"!==t||wt(this.#t,yt.BEFORE_CLOSE,{from:t,trigger:i},{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,i){const s=this.#a,n=new Promise(t=>{this.#h=t});return(async()=>{if(this.#c=this.#f(),await this.#t.updateComplete,s!==this.#a)return;const n=this.#g(t);if(n&&!this.#b(t,e)&&(await this.#v(n,"exit",this.#e(t,e,"exit")),s!==this.#a))return;if(this.#o=e,this.#t.requestUpdate(),await this.#t.updateComplete,s!==this.#a)return;const o=this.#g(e);o&&(await this.#v(o,"enter",this.#e(t,e,"enter")),s!==this.#a)||(this.#y(t,e,i),this.#w(e),this.#h?.(!0),this.#h=null)})(),n}#b(t,e){return"closed"===t&&"open"===e&&this.#i()}#y(t,e,i){"hidden"===t&&wt(this.#t,yt.SHOW,{from:t,to:e}),"hidden"!==e?"open"===e?wt(this.#t,yt.OPEN,{from:t,trigger:i}):"closed"===e&&"open"===t&&wt(this.#t,yt.CLOSE,{from:t,trigger:i}):wt(this.#t,yt.HIDE,{from:t,to:e})}#w(t){"open"!==t?("closed"===t&&this.#c&&this.#g("closed")?.focus(),this.#c=!1):this.#s()}#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,i){const{effect:s,duration:n}=i;return"none"===s||n<=0||window.matchMedia("(prefers-reduced-motion: reduce)").matches?Promise.resolve():new Promise(i=>{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),i())};t.dataset.effect=s,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 _t{#t;#x=null;#$=0;#_="pc";#A=!1;constructor(t){this.#t=t,t.addController(this)}get device(){return this.#_}hostDisconnected(){this.#x?.removeEventListener("change",this.#S),this.#x=null}observe(t){t===this.#$&&this.#x||(this.#$=t,this.#x?.removeEventListener("change",this.#S),this.#x=window.matchMedia(`(max-width: ${t-1}px)`),this.#x.addEventListener("change",this.#S),this.#E(this.#x.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&&wt(this.#t,yt.BREAKPOINT_CHANGE,{device:t}),this.#A=!0)}}const At="#2563eb",St="#1f2328",Et="#5c6370",kt="#ffffff",Tt="#f1f3f5",Ct="#e4e4e7",Ot="#ffffff",Pt={size:60,position:"bottom-right",offset:{x:24,y:24},radius:30,draggable:!1,image:null,label:null,component:null,props:{},colors:{background:At,text:Ot,shadow:"0 4px 12px rgba(0, 0, 0, 0.2)"},animation:{enter:"scale",exit:"scale",duration:200,idle:"none"}},Mt={size:56,offset:{x:16,y:16},radius:28},Lt={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,...Mt}},open:{width:380,height:600,position:"bottom-right",offset:{x:24,y:24},radius:16,launcher:"hidden",draggable:!1,header:{visible:!0,title:null,logo:null,home:!1},background:{image:null},colors:{background:kt,text:St,accent:At,border:Ct,shadow:"0 8px 32px rgba(0, 0, 0, 0.24)",headerBackground:kt,headerText:St,userBubble:At,userText:Ot,assistantBubble:Tt,assistantText:St,systemText:Et,inputBackground:kt,inputText:St,inputPlaceholder:Et},bubble:{radius:14,tail:"none"},loading:{auto:!1,style:"spinner",text:null,timeout:0},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}}},Ut=Mt;function zt(t){return"object"==typeof t&&null!==t&&!Array.isArray(t)}function Rt(t,e){if(!zt(e))return t;const i={...t};for(const[t,s]of Object.entries(e)){if(void 0===s)continue;const e=i[t];i[t]=zt(s)&&zt(e)?Rt(e,s):s}return i}function Bt(t,e){const i=t??{},s=function(t,e){const i=t??{};if(!("pc"in i)&&!("mobile"in i)){const i=t??{};return Rt(Lt.closed[e],i)}const s=Rt(Lt.closed.pc,i.pc);return"pc"===e?s:i.mobile?Rt(Lt.closed.mobile,i.mobile):Rt(s,Ut)}(i.closed,e);return{breakpoint:i.breakpoint??Lt.breakpoint,zIndex:i.zIndex??Lt.zIndex,font:Rt(Lt.font,i.font),closed:Rt(Lt.closed[e],s),open:Rt(Lt.open,i.open),hidden:Rt(Lt.hidden,i.hidden),device:e}}const Dt=t=>`${t}px`;function Ht(t){return t?`url("${t.replace(/[\\"]/g,"\\$&")}")`:"none"}function It(t){const e=Object.entries(function(t){const{closed:e,open:i}=t,s=i.colors;return{"--chit-z-index":String(t.zIndex),"--chit-font-family":t.font.family,"--chit-font-size":Dt(t.font.size),"--chit-launcher-size":"auto"===e.size?"auto":Dt(e.size),"--chit-launcher-offset-x":Dt(e.offset.x),"--chit-launcher-offset-y":Dt(e.offset.y),"--chit-launcher-radius":Dt(e.radius),"--chit-launcher-image":Ht(e.image),"--chit-launcher-bg":e.colors.background,"--chit-launcher-text":e.colors.text,"--chit-launcher-shadow":e.colors.shadow,"--chit-panel-width":Dt(i.width),"--chit-panel-height":Dt(i.height),"--chit-panel-offset-x":Dt(i.offset.x),"--chit-panel-offset-y":Dt(i.offset.y),"--chit-panel-radius":Dt(i.radius),"--chit-panel-bg-image":Ht(i.background.image),"--chit-panel-shadow":s.shadow,"--chit-color-bg":s.background,"--chit-color-text":s.text,"--chit-color-accent":s.accent,"--chit-color-border":s.border,"--chit-color-header-bg":s.headerBackground,"--chit-color-header-text":s.headerText,"--chit-color-user-bg":s.userBubble,"--chit-color-user-text":s.userText,"--chit-color-assistant-bg":s.assistantBubble,"--chit-color-assistant-text":s.assistantText,"--chit-color-system-text":s.systemText,"--chit-color-input-bg":s.inputBackground,"--chit-color-input-text":s.inputText,"--chit-color-input-placeholder":s.inputPlaceholder,"--chit-bubble-radius":Dt(i.bubble.radius),"--_chit-input-max-rows":String(i.input.maxRows),"--_chit-speaker-gutter":i.speaker.assistant.avatar?"2.5em":"0px"}}(t)).map(([t,e])=>` ${t}: ${e};`).join("\n");return`:host {\n${e}\n}\n`}const Nt="undefined"!=typeof ShadowRoot&&"adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype;class jt{#k=null;#T=null;#C="";#O;constructor(t){this.#O=t}attach(t){if(t instanceof ShadowRoot){if(Nt)return this.#k||(this.#k=new CSSStyleSheet),void(t.adoptedStyleSheets.includes(this.#k)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,this.#k]));this.#T||(this.#T=document.createElement("style"),this.#T.setAttribute(this.#O,"")),this.#T.parentNode!==t&&t.append(this.#T)}}write(t,e){if(t!==this.#C){if(this.attach(e),this.#k)this.#k.replaceSync(t);else{if(!this.#T)return;this.#T.textContent=t}this.#C=t}}detach(){this.#T?.remove(),this.#T=null}}class qt{#t;#k=new jt("data-chit-theme");#P;constructor(t,{device:e}){this.#t=t,this.#P=Bt(void 0,e())}get current(){return this.#P}hostConnected(){this.#M()}hostDisconnected(){this.#k.detach()}static breakpointOf(t){return function(t){return t?.breakpoint??Lt.breakpoint}(t)}apply(t,e){this.#P=Bt(t,e),this.#M()}#M(){this.#k.write(It(this.#P),this.#t.renderRoot)}}class Wt{#t;#L;#U=null;#z=null;#R=!0;#B=!1;#D=!1;#H=!0;#I=!1;#N;#j=!0;#q;#W=0;constructor(t,{behavior:e}){this.#t=t,this.#L=e,t.addController(this)}get hasUnseen(){return this.#B}get atBottom(){return this.#R}hostDisconnected(){this.#F(),clearTimeout(this.#N)}hostUpdate(){const t=this.#t.messages,e=t[t.length-1],i=t.length>this.#W,s=e?.id!==this.#q;this.#q=e?.id,this.#W=t.length,(i||s)&&(this.#R||"user"===e?.role?this.#H=!0:this.#B=!0)}hostUpdated(){const t=this.#t.renderRoot.querySelector('[part~="messages"]');if(t!==this.#U&&(this.#F(),this.#U=t,this.#K(),t&&(this.#R=!0,this.#B=!1,this.#H=!0,this.#j=!0)),this.#H){const t=this.#V;this.#H=!1,this.#Y({behavior:t})}}#K(){if(!this.#U)return;this.#U.addEventListener("scroll",this.#G,{passive:!0}),this.#U.addEventListener("scrollend",this.#J);const t=this.#U.firstElementChild;t&&"undefined"!=typeof ResizeObserver&&(this.#z=new ResizeObserver(()=>{this.#R&&this.#Y({behavior:this.#I?"smooth":"instant"})}),this.#z.observe(t))}#F(){this.#U?.removeEventListener("scroll",this.#G),this.#U?.removeEventListener("scrollend",this.#J),this.#z?.disconnect(),this.#z=null,this.#U=null}#J=()=>{this.#Z()};#G=()=>{const t=this.#U;if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight<=24;if(this.#I)return void(e&&this.#Z());e!==this.#R&&(this.#R=e,e&&this.#B&&(this.#B=!1,this.#t.requestUpdate()));const i=t.scrollTop<=0;i&&!this.#D&&wt(this.#t,yt.SCROLL_TOP,{}),this.#D=i};scrollToBottom({smooth:t}={}){const e=void 0===t?this.#V:t?"smooth":"instant";this.#Y({behavior:e}),this.#B&&(this.#B=!1,this.#t.requestUpdate())}get#V(){return this.#j||window.matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":this.#L()}#Y({behavior:t="instant"}={}){const e=this.#U;e&&(this.#j=!1,"smooth"===t&&this.#Q(),e.scrollTo({top:e.scrollHeight,behavior:t}),this.#R=!0,this.#D=!1,this.#B=!1)}#Q(){this.#I=!0,clearTimeout(this.#N),this.#N=setTimeout(()=>this.#Z(),700)}#Z(){if(!this.#I)return;this.#I=!1,clearTimeout(this.#N);const t=this.#U;if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight;this.#R=e<=24}}const Ft="undefined"!=typeof CSS&&CSS.supports?.("field-sizing","content");class Kt{#t;#X="";#tt=!1;#et=!1;#it;constructor(t){this.#t=t,t.addController(this)}get value(){return this.#X}set value(t){this.#X=t??"";const e=this.#st;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.#it)}hostUpdated(){const t=this.#st;t&&t.value!==this.#X&&(t.value=this.#X),this.#nt(),this.#ot()}get#st(){return this.#t.renderRoot.querySelector('[part~="input"]')}onInput(t){this.#X=t.target.value,this.#nt(),this.#ot(),wt(this.#t,yt.INPUT,{value:this.#X})}onCompositionStart(){this.#tt=!0}onCompositionEnd(){this.#tt=!1,this.#et=!0,clearTimeout(this.#it),this.#it=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,yt.SUBMIT,{text:e},{cancelable:!0})&&(this.clear(),this.#t.handleSubmitted(),!0)}clear(){this.value="",this.focus()}focus(){this.#st?.focus()}#nt(){if(Ft)return;const t=this.#st;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 i=this.#st,s=t.querySelector('[part~="counter"]'),n=this.#t.maxLength;if(void 0===n)return;const o=n-this.length,r=o<0;if(i?.setAttribute("aria-invalid",r?"true":"false"),!s)return;s.textContent=String(o),s.toggleAttribute("data-over",r);const a=this.#t.currentLabels,h=r?a.overLimit:a.charactersLeft;s.setAttribute("aria-label",h.replace("{n}",String(Math.abs(o)))),s.hidden=this.length<=.8*n}}class Vt{#t;#rt;#at;#ht=!1;constructor(t,e){this.#t=t,this.#rt=e,t.addController(this)}hostConnected(){this.#lt=()=>{const t=this.#rt.current();t&&this.#rt.onMove(t)},window.addEventListener("resize",this.#lt)}hostDisconnected(){this.#lt&&window.removeEventListener("resize",this.#lt),this.#lt=void 0}#lt;consumeDrag(){const t=this.#ht;return this.#ht=!1,t}place(t){if(!t){for(const t of[this.#rt.vars.x,this.#rt.vars.y])this.#t.style.removeProperty(t);return}const e=this.#rt.element(),i=this.#ct(t),s=e?this.#dt(i,this.#rt.size()):i;return this.#t.style.setProperty(this.#rt.vars.x,`${s.x}px`),this.#t.style.setProperty(this.#rt.vars.y,`${s.y}px`),e?s:void 0}start(t){if(!this.#rt.enabled()||0!==t.button)return;if(this.#rt.element()){this.#at={pointer:{x:t.clientX,y:t.clientY},displacement:this.#rt.current()??{x:0,y:0},size:this.#rt.size(),corner:this.#rt.corner(),base:this.#rt.base(),moved:!1,pointerId:t.pointerId,target:t.currentTarget};try{this.#at.target.setPointerCapture(t.pointerId)}catch{}this.#at.target.addEventListener("pointermove",this.#pt),this.#at.target.addEventListener("pointerup",this.#ut),this.#at.target.addEventListener("pointercancel",this.#ut)}}#pt=t=>{const e=this.#at;if(!e||t.pointerId!==e.pointerId)return;const i=t.clientX-e.pointer.x,s=t.clientY-e.pointer.y;!e.moved&&Math.hypot(i,s)<4||(e.moved=!0,t.preventDefault(),this.#rt.onMove(this.#mt({x:e.displacement.x+i,y:e.displacement.y+s},e.base,e.corner,e.size)))};#ut=t=>{const e=this.#at;if(e&&t.pointerId===e.pointerId){e.target.removeEventListener("pointermove",this.#pt),e.target.removeEventListener("pointerup",this.#ut),e.target.removeEventListener("pointercancel",this.#ut);try{e.target.hasPointerCapture(t.pointerId)&&e.target.releasePointerCapture(t.pointerId)}catch{}this.#at=void 0,e.moved&&(this.#ht=!0,this.#rt.onSettle(this.#rt.name))}};nudge(t){if(!this.#rt.enabled())return!1;if(t.altKey||t.ctrlKey||t.metaKey)return!1;const e={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]}[t.key];if(!e)return!1;if(!this.#rt.element())return!1;const i=t.shiftKey?32:8,s=this.#rt.current()??{x:0,y:0};return t.preventDefault(),this.#rt.onMove(this.#mt({x:s.x+e[0]*i,y:s.y+e[1]*i},this.#rt.base(),this.#rt.corner(),this.#rt.size())),this.#rt.onSettle(this.#rt.name),!0}#ct(t,e=this.#rt.base(),i=this.#rt.corner()){return{x:e.x+(i.endsWith("right")?-t.x:t.x),y:e.y+(i.startsWith("bottom")?-t.y:t.y)}}#mt(t,e,i,s){const n=this.#dt(this.#ct(t,e,i),s);return{x:i.endsWith("right")?e.x-n.x:n.x-e.x,y:i.startsWith("bottom")?e.y-n.y:n.y-e.y}}#dt(t,e){return{x:Yt(t.x,window.innerWidth-e.width),y:Yt(t.y,window.innerHeight-e.height)}}}function Yt(t,e){return Math.round(Math.min(Math.max(t,8),Math.max(8,e-8)))}const Gt=new WeakMap,Jt=t=>`msg:${t}`,Zt=["text","html","template","element","component"];function Qt(t){const e=Zt.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 Xt(t){return t[Qt(t)]}function te(t,e,i,s={}){let n=Gt.get(t);n||(n=new Map,Gt.set(t,n));const o=n.get(e);if(o&&o.source===i){for(const[t,e]of Object.entries(s))Object.is(o.props[t],e)||(o.element[t]=e);return o.props={...s},o.element}const r=document.createElement(function(t){if("string"==typeof t)return t;const e=customElements,i=e.getName?.(t);if(i)return i;const s=t.tagName;if("string"==typeof s&&s)return s;throw new Error("ChitUI: component is not registered in customElements. Call customElements.define() for it, or pass its tag name as a string.")}(i));for(const[t,e]of Object.entries(s))r[t]=e;return n.set(e,{source:i,element:r,props:{...s}}),r}function ee(t,e){return Gt.get(t)?.get(Jt(e))?.element}function ie(t,e){switch(Qt(e)){case"text":return e.text;case"template":return e.template;case"element":return e.element;case"component":{const i=e;return te(t,Jt(e.id),i.component,i.props)}default:{const i=e.html;return vt(t.sanitize?t.sanitize(i):i)}}}function se(t){const e=t.currentTheme.closed,i=t.currentLabels,s=e.component?te(t,"launcher",e.component,e.props):null;return q`
|
|
2
2
|
<button
|
|
3
3
|
part="launcher"
|
|
4
4
|
type="button"
|
|
5
|
-
aria-label=${e.label||
|
|
5
|
+
aria-label=${e.label||i.launcher}
|
|
6
6
|
aria-expanded=${"open"===t.state}
|
|
7
|
-
?data-has-image=${!
|
|
8
|
-
?data-custom=${!!
|
|
9
|
-
|
|
7
|
+
?data-has-image=${!s&&!!e.image}
|
|
8
|
+
?data-custom=${!!s}
|
|
9
|
+
?data-draggable=${e.draggable}
|
|
10
|
+
@pointerdown=${e=>t.launcherDrag.start(e)}
|
|
11
|
+
@keydown=${e=>t.launcherDrag.nudge(e)}
|
|
12
|
+
@click=${()=>{t.launcherDrag.consumeDrag()||t.toggleFromUser()}}
|
|
10
13
|
>
|
|
11
|
-
${
|
|
14
|
+
${s??q`<slot name="launcher">${function(t){return t.image?K:t.label?q`<span part="launcher-label">${t.label}</span>`:function(){return q`
|
|
12
15
|
<svg part="launcher-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
13
16
|
<path
|
|
14
17
|
fill="currentColor"
|
|
@@ -17,11 +20,11 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
17
20
|
</svg>
|
|
18
21
|
`}()}(e)}</slot>`}
|
|
19
22
|
</button>
|
|
20
|
-
`}const{I:
|
|
23
|
+
`}const{I:ne}=ot,oe=t=>t,re=()=>document.createComment(""),ae=(t,e,i)=>{const s=t._$AA.parentNode,n=void 0===e?t._$AB:e._$AA;if(void 0===i){const e=s.insertBefore(re(),n),o=s.insertBefore(re(),n);i=new ne(e,o,t,t.options)}else{const e=i._$AB.nextSibling,o=i._$AM,r=o!==t;if(r){let e;i._$AQ?.(t),i._$AM=t,void 0!==i._$AP&&(e=t._$AU)!==o._$AU&&i._$AP(e)}if(e!==n||r){let t=i._$AA;for(;t!==e;){const e=oe(t).nextSibling;oe(s).insertBefore(t,n),t=e}}}return i},he=(t,e,i=t)=>(t._$AI(e,i),t),le={},ce=(t,e=le)=>t._$AH=e,de=t=>{t._$AR(),t._$AA.remove()},pe=(t,e,i)=>{const s=new Map;for(let n=e;n<=i;n++)s.set(t[n],n);return s},ue=ft(class extends gt{constructor(t){if(super(t),t.type!==pt)throw Error("repeat() can only be used in text expressions")}dt(t,e,i){let s;void 0===i?i=e:void 0!==e&&(s=e);const n=[],o=[];let r=0;for(const e of t)n[r]=s?s(e,r):r,o[r]=i(e,r),r++;return{values:o,keys:n}}render(t,e,i){return this.dt(t,e,i).values}update(t,[e,i,s]){const n=(t=>t._$AH)(t),{values:o,keys:r}=this.dt(e,i,s);if(!Array.isArray(n))return this.ut=r,o;const a=this.ut??=[],h=[];let l,c,d=0,p=n.length-1,u=0,m=o.length-1;for(;d<=p&&u<=m;)if(null===n[d])d++;else if(null===n[p])p--;else if(a[d]===r[u])h[u]=he(n[d],o[u]),d++,u++;else if(a[p]===r[m])h[m]=he(n[p],o[m]),p--,m--;else if(a[d]===r[m])h[m]=he(n[d],o[m]),ae(t,h[m+1],n[d]),d++,m--;else if(a[p]===r[u])h[u]=he(n[p],o[u]),ae(t,n[d],n[p]),p--,u++;else if(void 0===l&&(l=pe(r,u,m),c=pe(a,d,p)),l.has(a[d]))if(l.has(a[p])){const e=c.get(r[u]),i=void 0!==e?n[e]:null;if(null===i){const e=ae(t,n[d]);he(e,o[u]),h[u]=e}else h[u]=he(i,o[u]),ae(t,n[d],i),n[e]=null;u++}else de(n[p]),p--;else de(n[d]),d++;for(;u<=m;){const e=ae(t,h[m+1]);he(e,o[u]),h[u++]=e}for(;d<=p;){const t=n[d++];null!==t&&de(t)}return this.ut=r,ce(t,h),F}});function me(t,e){if("system"===e.role)return q`
|
|
21
24
|
<article part="message message-system" data-role="system" data-id=${e.id}>
|
|
22
|
-
<div part="message-content" data-content=${
|
|
25
|
+
<div part="message-content" data-content=${Qt(e)}>${ie(t,e)}</div>
|
|
23
26
|
</article>
|
|
24
|
-
`;const
|
|
27
|
+
`;const i=e.time||e.status,s=t.currentTheme.open.speaker[e.role],n=void 0===e.avatar?s.avatar:e.avatar,o=void 0===e.name?s.name:e.name;return q`
|
|
25
28
|
<article
|
|
26
29
|
part="message message-${e.role}"
|
|
27
30
|
data-role=${e.role}
|
|
@@ -29,16 +32,16 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
29
32
|
?data-streaming=${!!e.streaming}
|
|
30
33
|
aria-busy=${e.streaming?"true":"false"}
|
|
31
34
|
>
|
|
32
|
-
${
|
|
35
|
+
${n?q`<img part="avatar" src=${n} alt="" loading="lazy" />`:s.avatar?q`<span part="avatar" data-placeholder aria-hidden="true"></span>`:K}
|
|
33
36
|
<div class="body">
|
|
34
|
-
${
|
|
37
|
+
${o?q`<span part="name">${o}</span>`:K}
|
|
35
38
|
<div part="bubble">
|
|
36
|
-
<div part="message-content" data-content=${
|
|
39
|
+
<div part="message-content" data-content=${Qt(e)}>${ie(t,e)}</div>
|
|
37
40
|
${e.streaming?q`<span part="cursor" aria-hidden="true"></span>`:K}
|
|
38
41
|
</div>
|
|
39
|
-
${
|
|
42
|
+
${i?q`
|
|
40
43
|
<div part="meta" class="meta">
|
|
41
|
-
${e.time?q`<time part="time">${function(t,e){const
|
|
44
|
+
${e.time?q`<time part="time">${function(t,e){const i=e instanceof Date?e:new Date(e);return Number.isNaN(i.getTime())?"":t.formatTime?t.formatTime(i):new Intl.DateTimeFormat(t.resolvedLocale,{hour:"2-digit",minute:"2-digit"}).format(i)}(t,e.time)}</time>`:K}
|
|
42
45
|
${e.status?q`<span part="status" data-status=${e.status}>
|
|
43
46
|
${t.currentLabels.status[e.status]}
|
|
44
47
|
</span>`:K}
|
|
@@ -46,44 +49,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
46
49
|
`:K}
|
|
47
50
|
</div>
|
|
48
51
|
</article>
|
|
49
|
-
`}
|
|
50
|
-
<section
|
|
51
|
-
part="panel"
|
|
52
|
-
role="dialog"
|
|
53
|
-
aria-modal="false"
|
|
54
|
-
aria-label=${i}
|
|
55
|
-
tabindex="-1"
|
|
56
|
-
@keydown=${e=>function(t,e){if("Escape"!==e.key||e.defaultPrevented)return;e.preventDefault(),t.closeFromUser()}(t,e)}
|
|
57
|
-
>
|
|
58
|
-
<header part="header">
|
|
59
|
-
<slot name="header">
|
|
60
|
-
<slot name="header-title">
|
|
61
|
-
${e.header?.logo?q`<img part="header-logo" src=${e.header.logo} alt="" />`:K}
|
|
62
|
-
<span part="header-heading">${i}</span>
|
|
63
|
-
</slot>
|
|
64
|
-
<span part="header-actions">
|
|
65
|
-
<slot name="header-actions"></slot>
|
|
66
|
-
<button
|
|
67
|
-
part="close-button"
|
|
68
|
-
type="button"
|
|
69
|
-
aria-label=${s.close}
|
|
70
|
-
@click=${()=>t.closeFromUser()}
|
|
71
|
-
>
|
|
72
|
-
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
73
|
-
<path
|
|
74
|
-
fill="none"
|
|
75
|
-
stroke="currentColor"
|
|
76
|
-
stroke-width="2"
|
|
77
|
-
stroke-linecap="round"
|
|
78
|
-
d="M6 6l12 12M18 6L6 18"
|
|
79
|
-
/>
|
|
80
|
-
</svg>
|
|
81
|
-
</button>
|
|
82
|
-
</span>
|
|
83
|
-
</slot>
|
|
84
|
-
</header>
|
|
85
|
-
|
|
86
|
-
${function(t){const e=t.currentLabels,s=t.typing,i=0===t.messages.length&&!s;return q`
|
|
52
|
+
`}function fe(t){const e=t.currentLabels,i=t.typing,s=0===t.messages.length&&!i&&!t.loading;return q`
|
|
87
53
|
<div
|
|
88
54
|
part="messages"
|
|
89
55
|
role="log"
|
|
@@ -93,13 +59,19 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
93
59
|
@click=${e=>t.handleMessageClick(e)}
|
|
94
60
|
>
|
|
95
61
|
<div part="messages-inner" class="inner">
|
|
96
|
-
${
|
|
97
|
-
${
|
|
98
|
-
${s
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
62
|
+
${s?q`<slot name="empty"></slot>`:K}
|
|
63
|
+
${ue(t.messages,t=>t.id,e=>me(t,e))}
|
|
64
|
+
${t.loading?function(t){const{style:e,text:i}=t.currentTheme.open.loading,s=i??t.currentLabels.loading;return q`
|
|
65
|
+
<div part="loading" data-style=${e} role="status" aria-label=${s}>
|
|
66
|
+
${"dots"===e?q`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`:K}
|
|
67
|
+
${"spinner"===e?q`<span part="spinner" aria-hidden="true"></span>`:K}
|
|
68
|
+
${"text"===e||i?q`<span part="loading-text">${s}</span>`:K}
|
|
69
|
+
</div>
|
|
70
|
+
`}(t):i?q`
|
|
71
|
+
<div part="typing" role="status" aria-label=${e.typing}>
|
|
72
|
+
${"object"==typeof i&&i.html?t.renderTypingHtml(i.html):q`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`}
|
|
73
|
+
</div>
|
|
74
|
+
`:K}
|
|
103
75
|
</div>
|
|
104
76
|
</div>
|
|
105
77
|
|
|
@@ -112,21 +84,52 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
112
84
|
${e.toLatest}
|
|
113
85
|
</button>
|
|
114
86
|
`:K}
|
|
115
|
-
`}(t)}
|
|
87
|
+
`}const ge=ft(class extends gt{constructor(t){if(super(t),t.type!==ut&&t.type!==dt&&t.type!==mt)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===F||e===K)return e;const i=t.element,s=t.name;if(t.type===ut){if(e===i[s])return F}else if(t.type===mt){if(!!e===i.hasAttribute(s))return F}else if(t.type===dt&&i.getAttribute(s)===e+"")return F;return ce(t),e}});function be(t){if(t.inputHidden)return K;const e=t.currentLabels,i=t.currentTheme.open,s=t.busy||t.inputDisabled,n=t.placeholder??i.input.placeholder??e.input;return q`
|
|
116
88
|
<form
|
|
117
89
|
part="composer"
|
|
118
90
|
@submit=${e=>{e.preventDefault(),t.submit()}}
|
|
119
91
|
>
|
|
120
92
|
<slot name="composer">
|
|
93
|
+
${i.input.attach?function(t,e){const i=t.currentLabels,s=t.currentTheme.open.input;return q`
|
|
94
|
+
<button
|
|
95
|
+
part="attach-button"
|
|
96
|
+
type="button"
|
|
97
|
+
aria-label=${i.attach}
|
|
98
|
+
title=${i.attach}
|
|
99
|
+
?disabled=${e}
|
|
100
|
+
@click=${()=>t.openAttach()}
|
|
101
|
+
>
|
|
102
|
+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
103
|
+
<path
|
|
104
|
+
fill="none"
|
|
105
|
+
stroke="currentColor"
|
|
106
|
+
stroke-width="2"
|
|
107
|
+
stroke-linecap="round"
|
|
108
|
+
stroke-linejoin="round"
|
|
109
|
+
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"
|
|
110
|
+
/>
|
|
111
|
+
</svg>
|
|
112
|
+
</button>
|
|
113
|
+
<input
|
|
114
|
+
part="attach-input"
|
|
115
|
+
type="file"
|
|
116
|
+
tabindex="-1"
|
|
117
|
+
aria-hidden="true"
|
|
118
|
+
accept=${s.accept}
|
|
119
|
+
?multiple=${s.multiple}
|
|
120
|
+
@change=${e=>{const i=e.target,s=Array.from(i.files??[]);i.value="",s.length&&t.handleAttach(s)}}
|
|
121
|
+
/>
|
|
122
|
+
`}(t,s):K}
|
|
123
|
+
|
|
121
124
|
<slot name="input-before"></slot>
|
|
122
125
|
|
|
123
126
|
<textarea
|
|
124
127
|
part="input"
|
|
125
128
|
rows="1"
|
|
126
|
-
.value=${
|
|
129
|
+
.value=${ge(t.value)}
|
|
127
130
|
placeholder=${n}
|
|
128
131
|
aria-label=${e.input}
|
|
129
|
-
?disabled=${
|
|
132
|
+
?disabled=${s}
|
|
130
133
|
aria-describedby=${void 0===t.maxLength?K:"chit-counter"}
|
|
131
134
|
@input=${e=>t.handleInput(e)}
|
|
132
135
|
@keydown=${e=>t.handleKeydown(e)}
|
|
@@ -150,11 +153,77 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
150
153
|
</button>
|
|
151
154
|
</slot>
|
|
152
155
|
</form>
|
|
153
|
-
`}(t)
|
|
156
|
+
`}function ve(t){const e=t.currentTheme.open,i=t.currentLabels,s=e.header.title??i.panel;return q`
|
|
157
|
+
<section
|
|
158
|
+
part="panel"
|
|
159
|
+
role="dialog"
|
|
160
|
+
aria-modal="false"
|
|
161
|
+
aria-label=${s}
|
|
162
|
+
tabindex="-1"
|
|
163
|
+
@keydown=${e=>function(t,e){if("Escape"!==e.key||e.defaultPrevented)return;e.preventDefault(),t.closeFromUser()}(t,e)}
|
|
164
|
+
>
|
|
165
|
+
${e.header.visible?function(t,e){const i=t.currentTheme.open,s=t.currentLabels,n=i.draggable&&"pc"===t.device;return q`
|
|
166
|
+
<header
|
|
167
|
+
part="header"
|
|
168
|
+
?data-draggable=${n}
|
|
169
|
+
tabindex=${n?"0":K}
|
|
170
|
+
aria-label=${n?s.move:K}
|
|
171
|
+
@pointerdown=${e=>{e.target.closest("button")||t.panelDrag.start(e)}}
|
|
172
|
+
@keydown=${e=>{e.target===e.currentTarget&&t.panelDrag.nudge(e)}}
|
|
173
|
+
>
|
|
174
|
+
<slot name="header">
|
|
175
|
+
<slot name="header-title">
|
|
176
|
+
<span part="header-title">
|
|
177
|
+
${i.header.logo?q`<img part="header-logo" src=${i.header.logo} alt="" />`:K}
|
|
178
|
+
<span part="header-heading">${e}</span>
|
|
179
|
+
</span>
|
|
180
|
+
</slot>
|
|
181
|
+
<span part="header-actions">
|
|
182
|
+
<slot name="header-actions"></slot>
|
|
183
|
+
${i.header.home?q`<button
|
|
184
|
+
part="home-button"
|
|
185
|
+
type="button"
|
|
186
|
+
aria-label=${s.home}
|
|
187
|
+
title=${s.home}
|
|
188
|
+
@click=${()=>t.home("user")}
|
|
189
|
+
>
|
|
190
|
+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
191
|
+
<path
|
|
192
|
+
fill="none"
|
|
193
|
+
stroke="currentColor"
|
|
194
|
+
stroke-width="2"
|
|
195
|
+
stroke-linejoin="round"
|
|
196
|
+
stroke-linecap="round"
|
|
197
|
+
d="M4 11.2 12 4l8 7.2M6.5 9.8V19h11V9.8M10 19v-4.6h4V19"
|
|
198
|
+
/>
|
|
199
|
+
</svg>
|
|
200
|
+
</button>`:K}
|
|
201
|
+
<button
|
|
202
|
+
part="close-button"
|
|
203
|
+
type="button"
|
|
204
|
+
aria-label=${s.close}
|
|
205
|
+
@click=${()=>t.closeFromUser()}
|
|
206
|
+
>
|
|
207
|
+
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
208
|
+
<path
|
|
209
|
+
fill="none"
|
|
210
|
+
stroke="currentColor"
|
|
211
|
+
stroke-width="2"
|
|
212
|
+
stroke-linecap="round"
|
|
213
|
+
d="M6 6l12 12M18 6L6 18"
|
|
214
|
+
/>
|
|
215
|
+
</svg>
|
|
216
|
+
</button>
|
|
217
|
+
</span>
|
|
218
|
+
</slot>
|
|
219
|
+
</header>
|
|
220
|
+
`}(t,s):K}
|
|
221
|
+
|
|
222
|
+
${fe(t)} ${be(t)}
|
|
154
223
|
|
|
155
224
|
<slot name="footer"></slot>
|
|
156
225
|
</section>
|
|
157
|
-
`}const
|
|
226
|
+
`}const ye={ja:{launcher:"チャットを開く",panel:"チャット",conversation:"会話",close:"チャットを閉じる",home:"最初に戻る",send:"送信",attach:"画像や動画を添付",input:"メッセージを入力",typing:"入力中",loading:"応答を待っています",move:"チャットの位置を移動(矢印キー)",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",loading:"Waiting for a reply",move:"Move the chat (arrow keys)",toLatest:"Jump to latest",status:{sending:"Sending",sent:"Sent",error:"Not delivered"},charactersLeft:"{n} characters left",overLimit:"{n} characters over the limit"}};function we(t){return t||document.documentElement.lang||void 0}const xe=o`
|
|
158
227
|
:host {
|
|
159
228
|
--chit-z-index: 2147483000;
|
|
160
229
|
--chit-font-family: system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
|
|
@@ -182,6 +251,8 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
182
251
|
--chit-color-header-bg: #ffffff;
|
|
183
252
|
--chit-color-header-text: #1f1f1f;
|
|
184
253
|
|
|
254
|
+
--chit-bubble-radius: 14px;
|
|
255
|
+
|
|
185
256
|
position: fixed;
|
|
186
257
|
inset: 0;
|
|
187
258
|
z-index: var(--chit-z-index);
|
|
@@ -302,7 +373,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
302
373
|
animation: none !important;
|
|
303
374
|
}
|
|
304
375
|
}
|
|
305
|
-
|
|
376
|
+
`,$e=o`
|
|
306
377
|
[part~='launcher'] {
|
|
307
378
|
position: absolute;
|
|
308
379
|
display: grid;
|
|
@@ -324,6 +395,19 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
324
395
|
transition: filter 120ms ease;
|
|
325
396
|
}
|
|
326
397
|
|
|
398
|
+
/*
|
|
399
|
+
* A draggable launcher takes the touch gestures for itself, so a finger on
|
|
400
|
+
* it moves the button instead of scrolling the page behind it.
|
|
401
|
+
*/
|
|
402
|
+
[part~='launcher'][data-draggable] {
|
|
403
|
+
cursor: grab;
|
|
404
|
+
touch-action: none;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
[part~='launcher'][data-draggable]:active {
|
|
408
|
+
cursor: grabbing;
|
|
409
|
+
}
|
|
410
|
+
|
|
327
411
|
/* The image comes from the theme, so it is a background rather than an <img>. */
|
|
328
412
|
[part~='launcher'][data-has-image] {
|
|
329
413
|
background-image: var(--chit-launcher-image);
|
|
@@ -437,15 +521,21 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
437
521
|
animation: none;
|
|
438
522
|
}
|
|
439
523
|
}
|
|
440
|
-
`,
|
|
524
|
+
`,_e=o`
|
|
441
525
|
[part~='panel'] {
|
|
442
526
|
position: absolute;
|
|
443
527
|
display: flex;
|
|
444
528
|
flex-direction: column;
|
|
445
529
|
width: var(--chit-panel-width);
|
|
446
530
|
height: var(--chit-panel-height);
|
|
447
|
-
|
|
448
|
-
|
|
531
|
+
/*
|
|
532
|
+
* The room left between the panel's own corner and the far edge. Doubling
|
|
533
|
+
* the offset instead would assume the panel is centred between two equal
|
|
534
|
+
* gaps, which stops being true the moment it is dragged: moving it up
|
|
535
|
+
* would have made it shorter on the way.
|
|
536
|
+
*/
|
|
537
|
+
max-width: calc(100vw - var(--chit-panel-offset-x) - 8px);
|
|
538
|
+
max-height: calc(100vh - var(--chit-panel-offset-y) - 8px);
|
|
449
539
|
overflow: hidden;
|
|
450
540
|
border-radius: var(--chit-panel-radius);
|
|
451
541
|
background-color: var(--chit-color-bg);
|
|
@@ -512,18 +602,48 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
512
602
|
color: var(--chit-color-header-text);
|
|
513
603
|
}
|
|
514
604
|
|
|
605
|
+
/*
|
|
606
|
+
* The image and the title are one flex item. A slot is display: contents,
|
|
607
|
+
* so without this wrapper its children become items of the header itself
|
|
608
|
+
* and space-between pushes the image to one edge and the title to the
|
|
609
|
+
* middle, away from each other.
|
|
610
|
+
*/
|
|
611
|
+
[part~='header'][data-draggable] {
|
|
612
|
+
cursor: grab;
|
|
613
|
+
touch-action: none;
|
|
614
|
+
user-select: none;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
[part~='header'][data-draggable]:active {
|
|
618
|
+
cursor: grabbing;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
[part~='header'][data-draggable]:focus-visible {
|
|
622
|
+
outline: 2px solid var(--chit-color-accent);
|
|
623
|
+
outline-offset: -2px;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
[part~='header-title'] {
|
|
627
|
+
display: inline-flex;
|
|
628
|
+
min-width: 0;
|
|
629
|
+
align-items: center;
|
|
630
|
+
gap: 0.5em;
|
|
631
|
+
}
|
|
632
|
+
|
|
515
633
|
[part~='header-heading'] {
|
|
634
|
+
overflow: hidden;
|
|
516
635
|
font-size: 1.05em;
|
|
517
636
|
font-weight: 600;
|
|
637
|
+
text-overflow: ellipsis;
|
|
638
|
+
white-space: nowrap;
|
|
518
639
|
}
|
|
519
640
|
|
|
520
641
|
[part~='header-logo'] {
|
|
642
|
+
flex: none;
|
|
521
643
|
width: 1.75em;
|
|
522
644
|
height: 1.75em;
|
|
523
|
-
margin-inline-end: 0.5em;
|
|
524
645
|
border-radius: 50%;
|
|
525
646
|
object-fit: cover;
|
|
526
|
-
vertical-align: middle;
|
|
527
647
|
}
|
|
528
648
|
|
|
529
649
|
[part~='header-actions'] {
|
|
@@ -532,6 +652,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
532
652
|
gap: 0.25em;
|
|
533
653
|
}
|
|
534
654
|
|
|
655
|
+
[part~='home-button'],
|
|
535
656
|
[part~='close-button'] {
|
|
536
657
|
display: grid;
|
|
537
658
|
place-items: center;
|
|
@@ -545,21 +666,36 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
545
666
|
cursor: pointer;
|
|
546
667
|
}
|
|
547
668
|
|
|
669
|
+
[part~='home-button']:hover,
|
|
548
670
|
[part~='close-button']:hover {
|
|
549
671
|
background: color-mix(in srgb, currentColor 10%, transparent);
|
|
550
672
|
}
|
|
551
673
|
|
|
674
|
+
[part~='home-button']:focus-visible,
|
|
552
675
|
[part~='close-button']:focus-visible {
|
|
553
676
|
outline: 2px solid var(--chit-color-accent);
|
|
554
677
|
outline-offset: 1px;
|
|
555
678
|
}
|
|
556
679
|
|
|
680
|
+
[part~='home-button'] svg,
|
|
557
681
|
[part~='close-button'] svg {
|
|
558
682
|
width: 1.1em;
|
|
559
683
|
height: 1.1em;
|
|
560
684
|
}
|
|
561
685
|
|
|
562
|
-
|
|
686
|
+
`,Ae=o`
|
|
687
|
+
:host {
|
|
688
|
+
/* Internal: the box the tail's path is drawn in. The path is written in
|
|
689
|
+
these units, so the two move together. */
|
|
690
|
+
--_chit-tail-w: 18px;
|
|
691
|
+
--_chit-tail-h: 20px;
|
|
692
|
+
/* How deep the tail's root sits inside the bubble. Less than the
|
|
693
|
+
bubble's own padding, so it never reaches the text. */
|
|
694
|
+
--_chit-tail-root: 9px;
|
|
695
|
+
/* Far enough down that the bubble's edge has straightened out under it. */
|
|
696
|
+
--_chit-tail-offset: calc(var(--chit-bubble-radius) / 4 + 1px);
|
|
697
|
+
}
|
|
698
|
+
|
|
563
699
|
[part~='messages'] {
|
|
564
700
|
flex: 1 1 auto;
|
|
565
701
|
min-height: 0;
|
|
@@ -584,7 +720,13 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
584
720
|
*/
|
|
585
721
|
[part~='message'] {
|
|
586
722
|
display: flex;
|
|
587
|
-
|
|
723
|
+
/*
|
|
724
|
+
* The icon sits level with the top of the speaker's block — beside the
|
|
725
|
+
* name when there is one, beside the bubble's first line otherwise. At
|
|
726
|
+
* the bottom it would end up next to the timestamp, away from everything
|
|
727
|
+
* it identifies.
|
|
728
|
+
*/
|
|
729
|
+
align-items: flex-start;
|
|
588
730
|
gap: 0.5em;
|
|
589
731
|
width: 100%;
|
|
590
732
|
max-width: 100%;
|
|
@@ -610,7 +752,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
610
752
|
[part~='bubble'] {
|
|
611
753
|
position: relative;
|
|
612
754
|
padding: 0.6em 0.85em;
|
|
613
|
-
border-radius:
|
|
755
|
+
border-radius: var(--chit-bubble-radius);
|
|
614
756
|
background: var(--chit-color-assistant-bg);
|
|
615
757
|
color: var(--chit-color-assistant-text);
|
|
616
758
|
}
|
|
@@ -625,6 +767,99 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
625
767
|
border-bottom-left-radius: 4px;
|
|
626
768
|
}
|
|
627
769
|
|
|
770
|
+
/* --- tails -------------------------------------------------------------
|
|
771
|
+
*
|
|
772
|
+
* A tail is one pseudo-element: a box in the bubble's colour, clipped to a
|
|
773
|
+
* leaf whose point sits outside the bubble and whose root is buried inside
|
|
774
|
+
* it. Burying the root is what makes the join disappear — the bubble's own
|
|
775
|
+
* background covers the seam, so every corner keeps its radius and the two
|
|
776
|
+
* read as one shape at any radius.
|
|
777
|
+
*
|
|
778
|
+
* It hangs a little below the corner, where the bubble's edge has
|
|
779
|
+
* straightened out, so the root has something flat to sit against. The
|
|
780
|
+
* offset follows the radius for that reason.
|
|
781
|
+
*
|
|
782
|
+
* The other side and the downward version are the same path mirrored, so
|
|
783
|
+
* the curve is written once.
|
|
784
|
+
*/
|
|
785
|
+
|
|
786
|
+
[part~='bubble']::after,
|
|
787
|
+
[part~='typing']::after,
|
|
788
|
+
[part~='loading']::after {
|
|
789
|
+
content: '';
|
|
790
|
+
display: none;
|
|
791
|
+
position: absolute;
|
|
792
|
+
width: var(--_chit-tail-w);
|
|
793
|
+
height: var(--_chit-tail-h);
|
|
794
|
+
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');
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
/*
|
|
798
|
+
* Everything below needs clip-path: path() to draw the leaf. Where that is
|
|
799
|
+
* missing the tail stays hidden and the bubble keeps its default shape,
|
|
800
|
+
* rather than a bare rectangle poking out of its side.
|
|
801
|
+
*/
|
|
802
|
+
@supports (clip-path: path('M 0 0 Z')) {
|
|
803
|
+
:host([data-bubble-tail='top']) [part~='bubble']::after,
|
|
804
|
+
:host([data-bubble-tail='top']) [part~='typing']::after,
|
|
805
|
+
:host([data-bubble-tail='top']) [part~='loading']::after,
|
|
806
|
+
:host([data-bubble-tail='bottom']) [part~='bubble']::after,
|
|
807
|
+
:host([data-bubble-tail='bottom']) [part~='typing']::after,
|
|
808
|
+
:host([data-bubble-tail='bottom']) [part~='loading']::after {
|
|
809
|
+
display: block;
|
|
810
|
+
}
|
|
811
|
+
|
|
812
|
+
/*
|
|
813
|
+
* With a tail there is no need to clip the speaker's corner as well: one
|
|
814
|
+
* bubble carries one cue about who is talking, not two.
|
|
815
|
+
*/
|
|
816
|
+
:host([data-bubble-tail='top']) [part~='bubble'],
|
|
817
|
+
:host([data-bubble-tail='top']) [part~='typing'],
|
|
818
|
+
:host([data-bubble-tail='top']) [part~='loading'],
|
|
819
|
+
:host([data-bubble-tail='bottom']) [part~='bubble'],
|
|
820
|
+
:host([data-bubble-tail='bottom']) [part~='typing'],
|
|
821
|
+
:host([data-bubble-tail='bottom']) [part~='loading'] {
|
|
822
|
+
border-radius: var(--chit-bubble-radius);
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
/* Their side: the leaf points left, its root inside the bubble. */
|
|
826
|
+
:host([data-bubble-tail]) [part~='message-assistant'] [part~='bubble']::after,
|
|
827
|
+
:host([data-bubble-tail]) [part~='typing']::after,
|
|
828
|
+
:host([data-bubble-tail]) [part~='loading']::after {
|
|
829
|
+
right: calc(100% - var(--_chit-tail-root));
|
|
830
|
+
background: var(--chit-color-assistant-bg);
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
/* Your side: the same leaf, mirrored. */
|
|
834
|
+
:host([data-bubble-tail]) [part~='message-user'] [part~='bubble']::after {
|
|
835
|
+
left: calc(100% - var(--_chit-tail-root));
|
|
836
|
+
background: var(--chit-color-user-bg);
|
|
837
|
+
transform: scaleX(-1);
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
:host([data-bubble-tail='top']) [part~='bubble']::after,
|
|
841
|
+
:host([data-bubble-tail='top']) [part~='typing']::after,
|
|
842
|
+
:host([data-bubble-tail='top']) [part~='loading']::after {
|
|
843
|
+
top: var(--_chit-tail-offset);
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
:host([data-bubble-tail='bottom']) [part~='bubble']::after,
|
|
847
|
+
:host([data-bubble-tail='bottom']) [part~='typing']::after,
|
|
848
|
+
:host([data-bubble-tail='bottom']) [part~='loading']::after {
|
|
849
|
+
bottom: var(--_chit-tail-offset);
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
:host([data-bubble-tail='bottom']) [part~='message-assistant'] [part~='bubble']::after,
|
|
853
|
+
:host([data-bubble-tail='bottom']) [part~='typing']::after,
|
|
854
|
+
:host([data-bubble-tail='bottom']) [part~='loading']::after {
|
|
855
|
+
transform: scaleY(-1);
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
:host([data-bubble-tail='bottom']) [part~='message-user'] [part~='bubble']::after {
|
|
859
|
+
transform: scale(-1, -1);
|
|
860
|
+
}
|
|
861
|
+
}
|
|
862
|
+
|
|
628
863
|
[part~='avatar'] {
|
|
629
864
|
flex: none;
|
|
630
865
|
width: 2em;
|
|
@@ -633,6 +868,15 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
633
868
|
object-fit: cover;
|
|
634
869
|
}
|
|
635
870
|
|
|
871
|
+
/*
|
|
872
|
+
* A message that hides the theme's icon (avatar: null, for the second and
|
|
873
|
+
* later messages in a run) keeps its place in the row, so the bubbles below
|
|
874
|
+
* stay in line with the one that shows the face.
|
|
875
|
+
*/
|
|
876
|
+
[part~='avatar'][data-placeholder] {
|
|
877
|
+
visibility: hidden;
|
|
878
|
+
}
|
|
879
|
+
|
|
636
880
|
[part~='name'] {
|
|
637
881
|
font-size: 0.8em;
|
|
638
882
|
color: var(--chit-color-system-text);
|
|
@@ -675,21 +919,57 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
675
919
|
}
|
|
676
920
|
}
|
|
677
921
|
|
|
678
|
-
[part~='typing']
|
|
922
|
+
[part~='typing'],
|
|
923
|
+
[part~='loading'] {
|
|
924
|
+
position: relative;
|
|
679
925
|
align-self: flex-start;
|
|
926
|
+
/* Indented past the speaker's icon, when the theme gives them one. */
|
|
927
|
+
margin-inline-start: var(--_chit-speaker-gutter, 0px);
|
|
680
928
|
padding: 0.7em 0.9em;
|
|
681
|
-
|
|
929
|
+
/*
|
|
930
|
+
* Stated rather than left to the font's idea of "normal", so that both
|
|
931
|
+
* indicators are the same height whatever the page's typeface does, and
|
|
932
|
+
* so the spinner has a line box it is known to fit inside.
|
|
933
|
+
*/
|
|
934
|
+
line-height: 1.5;
|
|
935
|
+
border-radius: var(--chit-bubble-radius);
|
|
682
936
|
border-bottom-left-radius: 4px;
|
|
683
937
|
background: var(--chit-color-assistant-bg);
|
|
684
938
|
color: var(--chit-color-assistant-text);
|
|
685
939
|
}
|
|
686
940
|
|
|
687
|
-
|
|
941
|
+
/*
|
|
942
|
+
* The wait is laid out inline, like the typing bubble it stands in for. A
|
|
943
|
+
* flex box has no line box of its own, so dots or a spinner alone would sit
|
|
944
|
+
* in a noticeably shorter bubble than one holding a line of text.
|
|
945
|
+
*/
|
|
946
|
+
[part~='loading'] > * + * {
|
|
947
|
+
margin-inline-start: 0.5em;
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
[part~='loading'] [part~='spinner'] {
|
|
951
|
+
display: inline-block;
|
|
952
|
+
/*
|
|
953
|
+
* Centred on the line rather than sitting on the baseline: at 1.1em it
|
|
954
|
+
* then fits inside the line box the text would have made on its own, so
|
|
955
|
+
* a spinner bubble is exactly as tall as a typing bubble.
|
|
956
|
+
*/
|
|
957
|
+
vertical-align: middle;
|
|
958
|
+
color: var(--chit-color-system-text);
|
|
959
|
+
}
|
|
960
|
+
|
|
961
|
+
[part~='loading-text'] {
|
|
962
|
+
font-size: 0.9em;
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
[part~='typing'] .dots,
|
|
966
|
+
[part~='loading'] .dots {
|
|
688
967
|
display: inline-flex;
|
|
689
968
|
gap: 0.25em;
|
|
690
969
|
}
|
|
691
970
|
|
|
692
|
-
[part~='typing'] .dots i
|
|
971
|
+
[part~='typing'] .dots i,
|
|
972
|
+
[part~='loading'] .dots i {
|
|
693
973
|
width: 0.4em;
|
|
694
974
|
height: 0.4em;
|
|
695
975
|
border-radius: 50%;
|
|
@@ -698,10 +978,12 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
698
978
|
animation: chit-typing 1.2s ease-in-out infinite;
|
|
699
979
|
}
|
|
700
980
|
|
|
701
|
-
[part~='typing'] .dots i:nth-child(2)
|
|
981
|
+
[part~='typing'] .dots i:nth-child(2),
|
|
982
|
+
[part~='loading'] .dots i:nth-child(2) {
|
|
702
983
|
animation-delay: 0.15s;
|
|
703
984
|
}
|
|
704
|
-
[part~='typing'] .dots i:nth-child(3)
|
|
985
|
+
[part~='typing'] .dots i:nth-child(3),
|
|
986
|
+
[part~='loading'] .dots i:nth-child(3) {
|
|
705
987
|
animation-delay: 0.3s;
|
|
706
988
|
}
|
|
707
989
|
|
|
@@ -743,11 +1025,12 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
743
1025
|
|
|
744
1026
|
@media (prefers-reduced-motion: reduce) {
|
|
745
1027
|
[part~='cursor'],
|
|
746
|
-
[part~='typing'] .dots i
|
|
1028
|
+
[part~='typing'] .dots i,
|
|
1029
|
+
[part~='loading'] .dots i {
|
|
747
1030
|
animation: none;
|
|
748
1031
|
}
|
|
749
1032
|
}
|
|
750
|
-
`,
|
|
1033
|
+
`,Se=o`
|
|
751
1034
|
[part~='message-content'] {
|
|
752
1035
|
min-width: 0;
|
|
753
1036
|
max-width: 100%;
|
|
@@ -854,7 +1137,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
854
1137
|
border: 0;
|
|
855
1138
|
border-top: 1px solid var(--chit-color-border);
|
|
856
1139
|
}
|
|
857
|
-
`,
|
|
1140
|
+
`,Ee=o`
|
|
858
1141
|
[part~='composer'] {
|
|
859
1142
|
display: flex;
|
|
860
1143
|
flex: none;
|
|
@@ -908,6 +1191,45 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
908
1191
|
font-weight: 600;
|
|
909
1192
|
}
|
|
910
1193
|
|
|
1194
|
+
/* Out of sight, but still clickable from the button beside it. */
|
|
1195
|
+
[part~='attach-input'] {
|
|
1196
|
+
display: none;
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
[part~='attach-button'] {
|
|
1200
|
+
display: grid;
|
|
1201
|
+
flex: none;
|
|
1202
|
+
place-items: center;
|
|
1203
|
+
width: 2.4em;
|
|
1204
|
+
height: 2.4em;
|
|
1205
|
+
padding: 0;
|
|
1206
|
+
border: 0;
|
|
1207
|
+
border-radius: 50%;
|
|
1208
|
+
background: transparent;
|
|
1209
|
+
color: var(--chit-color-system-text);
|
|
1210
|
+
cursor: pointer;
|
|
1211
|
+
transition: opacity 120ms ease;
|
|
1212
|
+
}
|
|
1213
|
+
|
|
1214
|
+
[part~='attach-button'] svg {
|
|
1215
|
+
width: 1.3em;
|
|
1216
|
+
height: 1.3em;
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
[part~='attach-button']:hover:not(:disabled) {
|
|
1220
|
+
background: color-mix(in srgb, currentColor 10%, transparent);
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
[part~='attach-button']:focus-visible {
|
|
1224
|
+
outline: 2px solid var(--chit-color-accent);
|
|
1225
|
+
outline-offset: 2px;
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1228
|
+
[part~='attach-button']:disabled {
|
|
1229
|
+
opacity: 0.4;
|
|
1230
|
+
cursor: default;
|
|
1231
|
+
}
|
|
1232
|
+
|
|
911
1233
|
[part~='send-button'] {
|
|
912
1234
|
display: grid;
|
|
913
1235
|
flex: none;
|
|
@@ -958,7 +1280,7 @@ const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow
|
|
|
958
1280
|
animation-duration: 2s;
|
|
959
1281
|
}
|
|
960
1282
|
}
|
|
961
|
-
`;class
|
|
962
|
-
${e?
|
|
963
|
-
`}}customElements.get("chit-ui")||customElements.define("chit-ui",
|
|
1283
|
+
`;class ke extends lt{static styles=[xe,$e,_e,Ae,Se,Ee];static properties={state:{type:String,reflect:!0,noAccessor:!0},theme:{type:Object},messages:{type:Array},typing:{type:Object,noAccessor:!0},loading:{type:Boolean,reflect:!0,noAccessor:!0},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}};#ft="closed";#gt=!1;#bt=!1;#vt="api";#yt;#$;#wt;#xt;#$t;#_t=new jt("data-chit-message-styles");#At=new Map;#St=null;constructor(){super(),this.theme={},this.messages=[],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.#yt=new $t(this,{animation:(t,e,i)=>this.#Et(t,e,i),keepsLauncher:()=>"visible"===this.currentTheme.open.launcher,onOpened:()=>this.#kt()}),this.#$=new _t(this),this.#wt=new qt(this,{device:()=>this.#$.device}),this.addController(this.#wt),this.#xt=new Wt(this,{behavior:()=>this.currentTheme.open.animation.scroll}),this.#$t=new Kt(this),this.#Tt=new Vt(this,{name:"launcher",enabled:()=>this.currentTheme.closed.draggable,element:()=>this.#Ct("launcher"),size:()=>function(t){if(!t)return{width:0,height:0};const e=t.getBoundingClientRect();return{width:e.width,height:e.height}}(this.#Ct("launcher")),corner:()=>this.currentTheme.closed.position,base:()=>this.currentTheme.closed.offset,current:()=>this.#Ot,onMove:t=>this.#Pt(t),onSettle:t=>this.#Mt(t),vars:{x:"--chit-launcher-offset-x",y:"--chit-launcher-offset-y"}}),this.#Lt=new Vt(this,{name:"panel",enabled:()=>this.currentTheme.open.draggable&&"pc"===this.device,element:()=>this.#Ct("panel"),size:()=>{const t=this.currentTheme.open;return{width:Math.min(t.width,window.innerWidth-16),height:Math.min(t.height,window.innerHeight-16)}},corner:()=>this.currentTheme.open.position,base:()=>this.currentTheme.open.offset,current:()=>this.#Ot,onMove:t=>this.#Pt(t),onSettle:t=>this.#Mt(t),vars:{x:"--chit-panel-offset-x",y:"--chit-panel-offset-y"}})}#Tt;#Lt;#Ct(t){return this.renderRoot?.querySelector(`[part~="${t}"]`)??null}get launcherDrag(){return this.#Tt}get panelDrag(){return this.#Lt}get dragOffset(){return this.#Ot}set dragOffset(t){this.#Ot=t?{x:t.x,y:t.y}:null,this.#Ut()}resetPosition(){this.dragOffset=null}#Ot=null;#Pt(t){this.#Ot=t,this.#Ut()}#Ut(){this.#Tt.place(this.#Ot),this.#Lt.place(this.#Ot)}#Mt(t){if(!this.#Ot)return;const e=this.currentTheme,i="launcher"===t?e.closed:e.open,s="launcher"===t?this.#Tt:this.#Lt;wt(this,yt.MOVE,{target:t,position:i.position,offset:s.place(this.#Ot)??i.offset,displacement:{...this.#Ot}})}#zt;#Rt;handleSubmitted(){this.#Bt()}#Bt(){const t=this.currentTheme.open.loading;t.auto&&(this.#Rt=new Set(this.messages.map(t=>t.id)),this.loading=!0,this.#Dt(),t.timeout>0&&(this.#zt=setTimeout(()=>{this.#zt=void 0,this.#l()},t.timeout)))}#l(){this.#Dt(),this.#Rt=void 0,this.loading=!1}#Dt(){void 0!==this.#zt&&clearTimeout(this.#zt),this.#zt=void 0}get typing(){return this.#gt}set typing(t){const e=this.#gt;t!==e&&(this.#gt=t,this.requestUpdate("typing",e),t&&(this.loading=!1))}get loading(){return this.#bt}set loading(t){const e=this.#bt;t!==e&&(this.#bt=t,this.requestUpdate("loading",e),t&&(this.typing=!1))}get state(){return this.#ft}set state(t){const e=this.#ft;if(t===e)return;if(this.#ft=t,this.requestUpdate("state",e),!this.#yt||this.#yt.applying)return;const i=this.#vt;this.#vt="api";const s=this.#yt.request(t,i);this.#St=s,s.then(()=>{this.#St===s&&(this.#St=null)})}get device(){return this.#$.device}get currentTheme(){return this.#wt.current}get currentLabels(){return function(t,e){const i=(we(t)||"en").toLowerCase(),s=ye[i]??ye[i.split("-")[0]]??ye.en;return e?{...s,...e}:s}(this.locale,this.labels)}get resolvedLocale(){return we(this.locale)}get renderedState(){return this.#yt.renderedState}get hasUnseen(){return this.#xt.hasUnseen}get value(){return this.#$t.value}set value(t){this.#$t.value=t}get canSend(){return this.#$t.canSend}open(){return this.#Ht("open","api")}close(){return this.#Ht("closed","api")}hide(){return this.#Ht("hidden","api")}show(){return"hidden"===this.#ft?this.#Ht("closed","api"):Promise.resolve(!0)}toggle(){return this.#Ht("open"===this.state?"closed":"open","api")}submit(t){return this.#$t.submit(t)}clearInput(){this.#$t.clear()}scrollToBottom(t){this.#xt.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)}#kt(){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.#$t.onInput(t)}handleKeydown(t){this.#$t.onKeydown(t)}handleComposition(t){t?this.#$t.onCompositionStart():this.#$t.onCompositionEnd()}handleAttach(t){wt(this,yt.ATTACH,{files:t})}openAttach(){const t=this.renderRoot.querySelector('[part~="attach-input"]');t?.click()}renderTypingHtml(t){return vt(this.sanitize?this.sanitize(t):t)}handleMessageClick(t){const e=t.composedPath(),i=e.find(t=>t instanceof HTMLElement&&t.getAttribute("part")?.split(/\s+/).includes("message"));if(!i)return;const s=i.dataset.id,n=this.messages.find(t=>t.id===s);if(!n)return;const o=e[0];wt(this,yt.MESSAGE_CLICK,{message:n,target:o,originalEvent:t},{cancelable:!0})||t.preventDefault()}toggleFromUser(){return this.#Ht("open"===this.state?"closed":"open","user")}closeFromUser(){return this.#Ht("closed","user")}home(t="api"){wt(this,yt.HOME,{trigger:t})}#Ht(t,e){return t!==this.#ft&&(this.#vt=e,this.state=t),this.#St??Promise.resolve(!0)}#Et(t,e,i){const s=this.currentTheme;if("exit"===i&&"hidden"===e)return{effect:s.hidden.animation.exit,duration:s.hidden.animation.duration};const n="open"===("exit"===i?t:e)?s.open:s.closed;return{effect:"exit"===i?n.animation.exit:n.animation.enter,duration:n.animation.duration}}willUpdate(){this.#$.observe(qt.breakpointOf(this.theme)),this.#wt.apply(this.theme,this.#$.device),this.#_t.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));if(function(t,e){const i=Gt.get(t);if(i)for(const t of i.keys())t.startsWith("msg:")&&(e.has(t.slice(4))||i.delete(t))}(this,t),this.#It(t),this.#Ot&&this.#Ut(),this.#Rt){this.messages.some(t=>"user"!==t.role&&!this.#Rt.has(t.id))&&this.#l()}}disconnectedCallback(){super.disconnectedCallback(),this.#Dt()}#It(t){for(const e of this.#At.keys())t.has(e)||this.#At.delete(e);for(const t of this.messages){const e=Xt(t);if(this.#At.has(t.id)&&Object.is(this.#At.get(t.id),e))continue;this.#At.set(t.id,e);const i=this.getMessageElement(t.id);i&&wt(this,yt.MESSAGE_RENDER,{message:t,element:i,instance:ee(this,t.id)})}}render(){const t=this.renderedState,e="closed"===t||"open"===t&&"visible"===this.currentTheme.open.launcher,i="open"===t;return q`
|
|
1284
|
+
${e?se(this):K} ${i?ve(this):K}
|
|
1285
|
+
`}}customElements.get("chit-ui")||customElements.define("chit-ui",ke);const Te={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"}}},Ce=ft(class extends gt{constructor(t){if(super(t),t.type!==dt||"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 i=t.element.classList;for(const t of this.st)t in e||(i.remove(t),this.st.delete(t));for(const t in e){const s=!!e[t];s===this.st.has(t)||this.nt?.has(t)||(s?(i.add(t),this.st.add(t)):(i.remove(t),this.st.delete(t)))}return F}}),Oe="important",Pe=" !"+Oe,Me=ft(class extends gt{constructor(t){if(super(t),t.type!==dt||"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,i)=>{const s=t[i];return null==s?e:e+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`},"")}update(t,[e]){const{style:i}=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("-")?i.removeProperty(t):i[t]=null);for(const t in e){const s=e[t];if(null!=s){this.ft.add(t);const e="string"==typeof s&&s.endsWith(Pe);t.includes("-")||e?i.setProperty(t,e?s.slice(0,-11):s,e?Oe:""):i[t]=s}}return F}});export{ke as ChitUI,yt as Events,lt as LitElement,Ce as classMap,o as css,Te as greenTheme,q as html,ge as live,K as nothing,at as render,ue as repeat,Me as styleMap,W as svg,vt as unsafeHTML};
|
|
964
1286
|
//# sourceMappingURL=chit-ui.min.js.map
|