@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.iife.min.js
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;let o=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(s&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&n.set(e,t))}return t}toString(){return this.cssText}};const r=(t,...e)=>{const s=1===t.length?t[0]:e.reduce((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1],t[0]);return new o(s,t,i)},a=s?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:h,defineProperty:l,getOwnPropertyDescriptor:c,getOwnPropertyNames:d,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,m=globalThis,f=m.trustedTypes,g=f?f.emptyScript:"",b=m.reactiveElementPolyfillSupport,v=(t,e)=>t,y={toAttribute(t,e){switch(e){case Boolean:t=t?g:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},$=(t,e)=>!h(t,e),w={attribute:!0,type:String,converter:y,reflect:!1,useDefault:!1,hasChanged:$};Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;let x=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=w){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);void 0!==i&&l(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:n}=c(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:i,set(e){const o=i?.call(this);n?.call(this,e),this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??w}static _$Ei(){if(this.hasOwnProperty(v("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(v("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(v("properties"))){const t=this.properties,e=[...d(t),...p(t)];for(const s of e)this.createProperty(s,t[s])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,s]of e)this.elementProperties.set(t,s)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const s=this._$Eu(t,e);void 0!==s&&this._$Eh.set(s,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Eu(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{if(s)t.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const s of i){const i=document.createElement("style"),n=e.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=s.cssText,t.appendChild(i)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(void 0!==i&&!0===s.reflect){const n=(void 0!==s.converter?.toAttribute?s.converter:y).toAttribute(e,s.type);this._$Em=t,null==n?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(t,e){const s=this.constructor,i=s._$Eh.get(t);if(void 0!==i&&this._$Em!==i){const t=s.getPropertyOptions(i),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:y;this._$Em=i;const o=n.fromAttribute(e,t.type);this[i]=o??this._$Ej?.get(i)??o,this._$Em=null}}requestUpdate(t,e,s,i=!1,n){if(void 0!==t){const o=this.constructor;if(!1===i&&(n=this[t]),s??=o.getPropertyOptions(t),!((s.hasChanged??$)(n,e)||s.useDefault&&s.reflect&&n===this._$Ej?.get(t)&&!this.hasAttribute(o._$Eu(t,s))))return;this.C(t,e,s)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:n},o){s&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,o??e??this[t]),!0!==n||void 0!==o)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),!0===i&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,s]of t){const{wrapped:t}=s,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,s,i)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}};x.elementStyles=[],x.shadowRootOptions={mode:"open"},x[v("elementProperties")]=new Map,x[v("finalized")]=new Map,b?.({ReactiveElement:x}),(m.reactiveElementVersions??=[]).push("2.1.2");const _=globalThis,S=t=>t,A=_.trustedTypes,E=A?A.createPolicy("lit-html",{createHTML:t=>t}):void 0,C="$lit$",k=`lit$${Math.random().toFixed(9).slice(2)}$`,T="?"+k,O=`<${T}>`,U=document,P=()=>U.createComment(""),L=t=>null===t||"object"!=typeof t&&"function"!=typeof t,R=Array.isArray,z="[ \t\n\f\r]",M=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,N=/-->/g,H=/>/g,B=RegExp(`>|${z}(?:([^\\s"'>=/]+)(${z}*=${z}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),I=/'/g,j=/"/g,D=/^(?:script|style|textarea|title)$/i,q=t=>(e,...s)=>({_$litType$:t,strings:e,values:s}),F=q(1),W=q(2),K=Symbol.for("lit-noChange"),G=Symbol.for("lit-nothing"),J=new WeakMap,V=U.createTreeWalker(U,129);function Y(t,e){if(!R(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(e):e}class Z{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let n=0,o=0;const r=t.length-1,a=this.parts,[h,l]=((t,e)=>{const s=t.length-1,i=[];let n,o=2===e?"<svg>":3===e?"<math>":"",r=M;for(let e=0;e<s;e++){const s=t[e];let a,h,l=-1,c=0;for(;c<s.length&&(r.lastIndex=c,h=r.exec(s),null!==h);)c=r.lastIndex,r===M?"!--"===h[1]?r=N:void 0!==h[1]?r=H:void 0!==h[2]?(D.test(h[2])&&(n=RegExp("</"+h[2],"g")),r=B):void 0!==h[3]&&(r=B):r===B?">"===h[0]?(r=n??M,l=-1):void 0===h[1]?l=-2:(l=r.lastIndex-h[2].length,a=h[1],r=void 0===h[3]?B:'"'===h[3]?j:I):r===j||r===I?r=B:r===N||r===H?r=M:(r=B,n=void 0);const d=r===B&&t[e+1].startsWith("/>")?" ":"";o+=r===M?s+O:l>=0?(i.push(a),s.slice(0,l)+C+s.slice(l)+k+d):s+k+(-2===l?e:d)}return[Y(t,o+(t[s]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]})(t,e);if(this.el=Z.createElement(h,s),V.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=V.nextNode())&&a.length<r;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(C)){const e=l[o++],s=i.getAttribute(t).split(k),r=/([.?@])?(.*)/.exec(e);a.push({type:1,index:n,name:r[2],strings:s,ctor:"."===r[1]?st:"?"===r[1]?it:"@"===r[1]?nt:et}),i.removeAttribute(t)}else t.startsWith(k)&&(a.push({type:6,index:n}),i.removeAttribute(t));if(D.test(i.tagName)){const t=i.textContent.split(k),e=t.length-1;if(e>0){i.textContent=A?A.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],P()),V.nextNode(),a.push({type:2,index:++n});i.append(t[e],P())}}}else if(8===i.nodeType)if(i.data===T)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=i.data.indexOf(k,t+1));)a.push({type:7,index:n}),t+=k.length-1}n++}}static createElement(t,e){const s=U.createElement("template");return s.innerHTML=t,s}}function Q(t,e,s=t,i){if(e===K)return e;let n=void 0!==i?s._$Co?.[i]:s._$Cl;const o=L(e)?void 0:e._$litDirective$;return n?.constructor!==o&&(n?._$AO?.(!1),void 0===o?n=void 0:(n=new o(t),n._$AT(t,s,i)),void 0!==i?(s._$Co??=[])[i]=n:s._$Cl=n),void 0!==n&&(e=Q(t,n._$AS(t,e.values),n,i)),e}class X{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??U).importNode(e,!0);V.currentNode=i;let n=V.nextNode(),o=0,r=0,a=s[0];for(;void 0!==a;){if(o===a.index){let e;2===a.type?e=new tt(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new ot(n,this,t)),this._$AV.push(e),a=s[++r]}o!==a?.index&&(n=V.nextNode(),o++)}return V.currentNode=U,i}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class tt{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=G,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),L(t)?t===G||null==t||""===t?(this._$AH!==G&&this._$AR(),this._$AH=G):t!==this._$AH&&t!==K&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>R(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==G&&L(this._$AH)?this._$AA.nextSibling.data=t:this.T(U.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=Z.createElement(Y(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new X(i,this),s=t.u(this.options);t.p(e),this.T(s),this._$AH=t}}_$AC(t){let e=J.get(t.strings);return void 0===e&&J.set(t.strings,e=new Z(t)),e}k(t){R(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const n of t)i===e.length?e.push(s=new tt(this.O(P()),this.O(P()),this,this.options)):s=e[i],s._$AI(n),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=S(t).nextSibling;S(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class et{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,n){this.type=1,this._$AH=G,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=G}_$AI(t,e=this,s,i){const n=this.strings;let o=!1;if(void 0===n)t=Q(this,t,e,0),o=!L(t)||t!==this._$AH&&t!==K,o&&(this._$AH=t);else{const i=t;let r,a;for(t=n[0],r=0;r<n.length-1;r++)a=Q(this,i[s+r],e,r),a===K&&(a=this._$AH[r]),o||=!L(a)||a!==this._$AH[r],a===G?t=G:t!==G&&(t+=(a??"")+n[r+1]),this._$AH[r]=a}o&&!i&&this.j(t)}j(t){t===G?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class st extends et{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===G?void 0:t}}class it extends et{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==G)}}class nt extends et{constructor(t,e,s,i,n){super(t,e,s,i,n),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??G)===K)return;const s=this._$AH,i=t===G&&s!==G||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==G&&(s===G||i);i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class ot{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const rt={I:tt},at=_.litHtmlPolyfillSupport;at?.(Z,tt),(_.litHtmlVersions??=[]).push("3.3.3");const ht=(t,e,s)=>{const i=s?.renderBefore??e;let n=i._$litPart$;if(void 0===n){const t=s?.renderBefore??null;i._$litPart$=n=new tt(e.insertBefore(P(),t),t,void 0,s??{})}return n._$AI(t),n},lt=globalThis;let ct=class extends x{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=ht(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return K}};ct._$litElement$=!0,ct.finalized=!0,lt.litElementHydrateSupport?.({LitElement:ct});const dt=lt.litElementPolyfillSupport;dt?.({LitElement:ct}),(lt.litElementVersions??=[]).push("4.2.2");const pt=1,ut=2,mt=3,ft=4,gt=t=>(...e)=>({_$litDirective$:t,values:e});let bt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,s){this._$Ct=t,this._$AM=e,this._$Ci=s}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}},vt=class extends bt{constructor(t){if(super(t),this.it=G,t.type!==ut)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===G||null==t)return this._t=void 0,this.it=t;if(t===K)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};vt.directiveName="unsafeHTML",vt.resultType=1;const yt=gt(vt),$t=Object.freeze({SUBMIT:"chat-submit",BEFORE_OPEN:"chat-before-open",OPEN:"chat-open",BEFORE_CLOSE:"chat-before-close",CLOSE:"chat-close",HIDE:"chat-hide",SHOW:"chat-show",STATE_CHANGE:"chat-state-change",INPUT:"chat-input",MESSAGE_RENDER:"chat-message-render",MESSAGE_CLICK:"chat-message-click",SCROLL_TOP:"chat-scroll-top",BREAKPOINT_CHANGE:"chat-breakpoint-change"});function wt(t,e,s,{cancelable:i=!1}={}){return t.dispatchEvent(new CustomEvent(e,{detail:s,bubbles:!0,composed:!0,cancelable:i}))}const xt={closed:"launcher",open:"panel",hidden:null};class _t{#t;#e;#s;#i;#n="closed";#o="closed";#r=!1;#a=0;#h=null;#l=null;#c=!1;constructor(t,{animation:e,keepsLauncher:s,onOpened:i}){this.#t=t,this.#e=e,this.#s=s,this.#i=i,t.addController(this)}get renderedState(){return this.#o}get applying(){return this.#r}hostConnected(){this.#n=this.#t.state,this.#o=this.#t.state,this.#t.dataset.renderedState=this.#o}hostDisconnected(){this.#l?.(),this.#l=null,this.#h?.(!1),this.#h=null}hostUpdated(){this.#t.dataset.renderedState=this.#o}request(t,e){const s=this.#n;return t===s?Promise.resolve(!0):this.#d(s,t,e)?(this.#p(),this.#n=t,this.#u(t),wt(this.#t,$t.STATE_CHANGE,{from:s,to:t,trigger:e}),this.#m(s,t,e)):(this.#u(s),Promise.resolve(!1))}#d(t,e,s){return"open"===e?wt(this.#t,$t.BEFORE_OPEN,{from:t,trigger:s},{cancelable:!0}):"closed"!==e||"open"!==t||wt(this.#t,$t.BEFORE_CLOSE,{from:t,trigger:s},{cancelable:!0})}#p(){this.#a+=1,this.#l?.(),this.#l=null,this.#h?.(!1),this.#h=null,this.#o!==this.#n&&(this.#o=this.#n,this.#t.requestUpdate())}#m(t,e,s){const i=this.#a,n=new Promise(t=>{this.#h=t});return(async()=>{if(this.#c=this.#f(),await this.#t.updateComplete,i!==this.#a)return;const n=this.#g(t);if(n&&!this.#b(t,e)&&(await this.#v(n,"exit",this.#e(t,e,"exit")),i!==this.#a))return;if(this.#o=e,this.#t.requestUpdate(),await this.#t.updateComplete,i!==this.#a)return;const o=this.#g(e);o&&(await this.#v(o,"enter",this.#e(t,e,"enter")),i!==this.#a)||(this.#y(t,e,s),this.#$(e),this.#h?.(!0),this.#h=null)})(),n}#b(t,e){return"closed"===t&&"open"===e&&this.#s()}#y(t,e,s){"hidden"===t&&wt(this.#t,$t.SHOW,{from:t,to:e}),"hidden"!==e?"open"===e?wt(this.#t,$t.OPEN,{from:t,trigger:s}):"closed"===e&&"open"===t&&wt(this.#t,$t.CLOSE,{from:t,trigger:s}):wt(this.#t,$t.HIDE,{from:t,to:e})}#$(t){"open"!==t?("closed"===t&&this.#c&&this.#g("closed")?.focus(),this.#c=!1):this.#i()}#f(){const t=this.#t.renderRoot instanceof ShadowRoot?this.#t.renderRoot.activeElement:null,e=this.#g("open");return!(!t||!e||t!==e&&!e.contains(t))}#g(t){const e=xt[t];return e?this.#t.renderRoot.querySelector(`[part~="${e}"]`):null}#u(t){this.#t.state!==t&&(this.#r=!0,this.#t.state=t,this.#r=!1)}#v(t,e,s){const{effect:i,duration:n}=s;return"none"===i||n<=0||window.matchMedia("(prefers-reduced-motion: reduce)").matches?Promise.resolve():new Promise(s=>{let o=!1;const r=e=>{e&&e.target!==t||o||(o=!0,clearTimeout(a),t.removeEventListener("animationend",r),t.removeAttribute("data-anim"),t.style.removeProperty("--_chit-anim-duration"),this.#l===r&&(this.#l=null),s())};t.dataset.effect=i,t.dataset.anim=e,t.style.setProperty("--_chit-anim-duration",`${n}ms`),t.addEventListener("animationend",r);const a=setTimeout(r,n+50);this.#l=r})}}class St{#t;#w=null;#x=0;#_="pc";#S=!1;constructor(t){this.#t=t,t.addController(this)}get device(){return this.#_}hostDisconnected(){this.#w?.removeEventListener("change",this.#A),this.#w=null}observe(t){t===this.#x&&this.#w||(this.#x=t,this.#w?.removeEventListener("change",this.#A),this.#w=window.matchMedia(`(max-width: ${t-1}px)`),this.#w.addEventListener("change",this.#A),this.#E(this.#w.matches?"mobile":"pc"))}#A=t=>{this.#E(t.matches?"mobile":"pc")};#E(t){t===this.#_&&this.#t.dataset.device||(this.#_=t,this.#t.dataset.device=t,this.#t.requestUpdate(),this.#S&&wt(this.#t,$t.BREAKPOINT_CHANGE,{device:t}),this.#S=!0)}}const At="#2563eb",Et="#1f2328",Ct="#5c6370",kt="#ffffff",Tt="#f1f3f5",Ot="#e4e4e7",Ut="#ffffff",Pt={size:60,position:"bottom-right",offset:{x:24,y:24},radius:30,image:null,label:null,component:null,props:{},colors:{background:At,text:Ut,shadow:"0 4px 12px rgba(0, 0, 0, 0.2)"},animation:{enter:"scale",exit:"scale",duration:200,idle:"none"}},Lt={size:56,offset:{x:16,y:16},radius:28},Rt={breakpoint:768,zIndex:2147483e3,font:{family:"system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif",size:14},closed:{pc:Pt,mobile:{...Pt,...Lt}},open:{width:380,height:600,position:"bottom-right",offset:{x:24,y:24},radius:16,launcher:"hidden",header:{title:null,logo:null,avatar:null},background:{image:null},colors:{background:kt,text:Et,accent:At,border:Ot,shadow:"0 8px 32px rgba(0, 0, 0, 0.24)",headerBackground:kt,headerText:Et,userBubble:At,userText:Ut,assistantBubble:Tt,assistantText:Et,systemText:Ct,inputBackground:kt,inputText:Et,inputPlaceholder:Ct},animation:{enter:"scale",exit:"fade",duration:150,scroll:"smooth"},input:{maxRows:5,placeholder:null}},hidden:{animation:{exit:"fade",duration:150}}},zt=Lt;function Mt(t){return"object"==typeof t&&null!==t&&!Array.isArray(t)}function Nt(t,e){if(!Mt(e))return t;const s={...t};for(const[t,i]of Object.entries(e)){if(void 0===i)continue;const e=s[t];s[t]=Mt(i)&&Mt(e)?Nt(e,i):i}return s}function Ht(t,e){const s=t??{},i=function(t,e){const s=t??{};if(!("pc"in s)&&!("mobile"in s)){const s=t??{};return Nt(Rt.closed[e],s)}const i=Nt(Rt.closed.pc,s.pc);return"pc"===e?i:s.mobile?Nt(Rt.closed.mobile,s.mobile):Nt(i,zt)}(s.closed,e);return{breakpoint:s.breakpoint??Rt.breakpoint,zIndex:s.zIndex??Rt.zIndex,font:Nt(Rt.font,s.font),closed:Nt(Rt.closed[e],i),open:Nt(Rt.open,s.open),hidden:Nt(Rt.hidden,s.hidden),device:e}}const Bt=t=>`${t}px`;function It(t){return t?`url("${t.replace(/[\\"]/g,"\\$&")}")`:"none"}function jt(t){const e=Object.entries(function(t){const{closed:e,open:s}=t,i=s.colors;return{"--chit-z-index":String(t.zIndex),"--chit-font-family":t.font.family,"--chit-font-size":Bt(t.font.size),"--chit-launcher-size":"auto"===e.size?"auto":Bt(e.size),"--chit-launcher-offset-x":Bt(e.offset.x),"--chit-launcher-offset-y":Bt(e.offset.y),"--chit-launcher-radius":Bt(e.radius),"--chit-launcher-image":It(e.image),"--chit-launcher-bg":e.colors.background,"--chit-launcher-text":e.colors.text,"--chit-launcher-shadow":e.colors.shadow,"--chit-panel-width":Bt(s.width),"--chit-panel-height":Bt(s.height),"--chit-panel-offset-x":Bt(s.offset.x),"--chit-panel-offset-y":Bt(s.offset.y),"--chit-panel-radius":Bt(s.radius),"--chit-panel-bg-image":It(s.background.image),"--chit-panel-shadow":i.shadow,"--chit-color-bg":i.background,"--chit-color-text":i.text,"--chit-color-accent":i.accent,"--chit-color-border":i.border,"--chit-color-header-bg":i.headerBackground,"--chit-color-header-text":i.headerText,"--chit-color-user-bg":i.userBubble,"--chit-color-user-text":i.userText,"--chit-color-assistant-bg":i.assistantBubble,"--chit-color-assistant-text":i.assistantText,"--chit-color-system-text":i.systemText,"--chit-color-input-bg":i.inputBackground,"--chit-color-input-text":i.inputText,"--chit-color-input-placeholder":i.inputPlaceholder,"--_chit-input-max-rows":String(s.input.maxRows)}}(t)).map(([t,e])=>` ${t}: ${e};`).join("\n");return`:host {\n${e}\n}\n`}const Dt="undefined"!=typeof ShadowRoot&&"adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype;class qt{#C=null;#k=null;#T="";#O;constructor(t){this.#O=t}attach(t){if(t instanceof ShadowRoot){if(Dt)return this.#C||(this.#C=new CSSStyleSheet),void(t.adoptedStyleSheets.includes(this.#C)||(t.adoptedStyleSheets=[...t.adoptedStyleSheets,this.#C]));this.#k||(this.#k=document.createElement("style"),this.#k.setAttribute(this.#O,"")),this.#k.parentNode!==t&&t.append(this.#k)}}write(t,e){if(t!==this.#T){if(this.attach(e),this.#C)this.#C.replaceSync(t);else{if(!this.#k)return;this.#k.textContent=t}this.#T=t}}detach(){this.#k?.remove(),this.#k=null}}class Ft{#t;#C=new qt("data-chit-theme");#U;constructor(t,{device:e}){this.#t=t,this.#U=Ht(void 0,e())}get current(){return this.#U}hostConnected(){this.#P()}hostDisconnected(){this.#C.detach()}static breakpointOf(t){return function(t){return t?.breakpoint??Rt.breakpoint}(t)}apply(t,e){this.#U=Ht(t,e),this.#P()}#P(){this.#C.write(jt(this.#U),this.#t.renderRoot)}}class Wt{#t;#L;#R=null;#z=null;#M=!0;#N=!1;#H=!1;#B=!0;#I=!1;#j;#D=!0;#q;#F=0;constructor(t,{behavior:e}){this.#t=t,this.#L=e,t.addController(this)}get hasUnseen(){return this.#N}get atBottom(){return this.#M}hostDisconnected(){this.#W(),clearTimeout(this.#j)}hostUpdate(){const t=this.#t.messages,e=t[t.length-1],s=t.length>this.#F,i=e?.id!==this.#q;this.#q=e?.id,this.#F=t.length,(s||i)&&(this.#M||"user"===e?.role?this.#B=!0:this.#N=!0)}hostUpdated(){const t=this.#t.renderRoot.querySelector('[part~="messages"]');if(t!==this.#R&&(this.#W(),this.#R=t,this.#K(),t&&(this.#M=!0,this.#N=!1,this.#B=!0,this.#D=!0)),this.#B){const t=this.#G;this.#B=!1,this.#J({behavior:t})}}#K(){if(!this.#R)return;this.#R.addEventListener("scroll",this.#V,{passive:!0}),this.#R.addEventListener("scrollend",this.#Y);const t=this.#R.firstElementChild;t&&"undefined"!=typeof ResizeObserver&&(this.#z=new ResizeObserver(()=>{this.#M&&this.#J({behavior:this.#I?"smooth":"instant"})}),this.#z.observe(t))}#W(){this.#R?.removeEventListener("scroll",this.#V),this.#R?.removeEventListener("scrollend",this.#Y),this.#z?.disconnect(),this.#z=null,this.#R=null}#Y=()=>{this.#Z()};#V=()=>{const t=this.#R;if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight<=24;if(this.#I)return void(e&&this.#Z());e!==this.#M&&(this.#M=e,e&&this.#N&&(this.#N=!1,this.#t.requestUpdate()));const s=t.scrollTop<=0;s&&!this.#H&&wt(this.#t,$t.SCROLL_TOP,{}),this.#H=s};scrollToBottom({smooth:t}={}){const e=void 0===t?this.#G:t?"smooth":"instant";this.#J({behavior:e}),this.#N&&(this.#N=!1,this.#t.requestUpdate())}get#G(){return this.#D||window.matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":this.#L()}#J({behavior:t="instant"}={}){const e=this.#R;e&&(this.#D=!1,"smooth"===t&&this.#Q(),e.scrollTo({top:e.scrollHeight,behavior:t}),this.#M=!0,this.#H=!1,this.#N=!1)}#Q(){this.#I=!0,clearTimeout(this.#j),this.#j=setTimeout(()=>this.#Z(),700)}#Z(){if(!this.#I)return;this.#I=!1,clearTimeout(this.#j);const t=this.#R;if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight;this.#M=e<=24}}const Kt="undefined"!=typeof CSS&&CSS.supports?.("field-sizing","content");class Gt{#t;#X="";#tt=!1;#et=!1;#st;constructor(t){this.#t=t,t.addController(this)}get value(){return this.#X}set value(t){this.#X=t??"";const e=this.#it;e&&e.value!==this.#X&&(e.value=this.#X),this.#nt(),this.#ot()}get composing(){return this.#tt}get length(){return Array.from(this.#X).length}get canSend(){if(this.#t.busy||this.#t.inputDisabled)return!1;if(""===this.#X.trim())return!1;const t=this.#t.maxLength;return void 0===t||this.length<=t}hostDisconnected(){clearTimeout(this.#st)}hostUpdated(){const t=this.#it;t&&t.value!==this.#X&&(t.value=this.#X),this.#nt(),this.#ot()}get#it(){return this.#t.renderRoot.querySelector('[part~="input"]')}onInput(t){this.#X=t.target.value,this.#nt(),this.#ot(),wt(this.#t,$t.INPUT,{value:this.#X})}onCompositionStart(){this.#tt=!0}onCompositionEnd(){this.#tt=!1,this.#et=!0,clearTimeout(this.#st),this.#st=setTimeout(()=>{this.#et=!1},0)}onKeydown(t){"Enter"===t.key&&this.#t.sendOnEnter&&(t.shiftKey||t.altKey||t.ctrlKey||t.metaKey||t.isComposing||229===t.keyCode||this.#tt||this.#et||(t.preventDefault(),this.submit()))}submit(t){const e=t??this.#X;if(void 0===t&&!this.canSend)return!1;if(void 0!==t&&(this.#t.busy||this.#t.inputDisabled))return!1;if(""===e.trim())return!1;return!!wt(this.#t,$t.SUBMIT,{text:e},{cancelable:!0})&&(this.clear(),!0)}clear(){this.value="",this.focus()}focus(){this.#it?.focus()}#nt(){if(Kt)return;const t=this.#it;t&&(t.style.height="auto",t.style.height=`${t.scrollHeight}px`)}#ot(){const t=this.#t.renderRoot,e=t.querySelector('[part~="send-button"]');e&&(e.disabled=!this.canSend);const s=this.#it,i=t.querySelector('[part~="counter"]'),n=this.#t.maxLength;if(void 0===n)return;const o=n-this.length,r=o<0;if(s?.setAttribute("aria-invalid",r?"true":"false"),!i)return;i.textContent=String(o),i.toggleAttribute("data-over",r);const a=this.#t.currentLabels,h=r?a.overLimit:a.charactersLeft;i.setAttribute("aria-label",h.replace("{n}",String(Math.abs(o)))),i.hidden=this.length<=.8*n}}const Jt=new WeakMap,Vt=t=>`msg:${t}`,Yt=["text","html","template","element","component"];function Zt(t){const e=Yt.filter(e=>e in t);if(1===e.length)return e[0];if(0===e.length)throw new Error(`ChitUI: message "${t.id}" has no content. Give it one of html, template, element or component.`);throw new Error(`ChitUI: message "${t.id}" has ${e.join(" and ")}. Give it exactly one.`)}function Qt(t){return t[Zt(t)]}function Xt(t,e,s,i={}){let n=Jt.get(t);n||(n=new Map,Jt.set(t,n));const o=n.get(e);if(o&&o.source===s){for(const[t,e]of Object.entries(i))Object.is(o.props[t],e)||(o.element[t]=e);return o.props={...i},o.element}const r=document.createElement(function(t){if("string"==typeof t)return t;const e=customElements,s=e.getName?.(t);if(s)return s;const i=t.tagName;if("string"==typeof i&&i)return i;throw new Error("ChitUI: component is not registered in customElements. Call customElements.define() for it, or pass its tag name as a string.")}(s));for(const[t,e]of Object.entries(i))r[t]=e;return n.set(e,{source:s,element:r,props:{...i}}),r}function te(t,e){return Jt.get(t)?.get(Vt(e))?.element}function ee(t,e){switch(Zt(e)){case"text":return e.text;case"template":return e.template;case"element":return e.element;case"component":{const s=e;return Xt(t,Vt(e.id),s.component,s.props)}default:{const s=e.html;return yt(t.sanitize?t.sanitize(s):s)}}}function se(t){const e=t.currentTheme.closed,s=t.currentLabels,i=e.component?Xt(t,"launcher",e.component,e.props):null;return F`
|
|
1
|
+
var ChitUI=function(t){"use strict";const e=globalThis,i=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),n=new WeakMap;let o=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 e=this.t;if(i&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&n.set(e,t))}return t}toString(){return this.cssText}};const r=(t,...e)=>{const i=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 o(i,t,s)},a=i?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,s))(e)})(t):t,{is:h,defineProperty:l,getOwnPropertyDescriptor:c,getOwnPropertyNames:d,getOwnPropertySymbols:p,getPrototypeOf:u}=Object,m=globalThis,f=m.trustedTypes,g=f?f.emptyScript:"",b=m.reactiveElementPolyfillSupport,v=(t,e)=>t,y={toAttribute(t,e){switch(e){case Boolean:t=t?g:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let 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}},w=(t,e)=>!h(t,e),x={attribute:!0,type:String,converter:y,reflect:!1,useDefault:!1,hasChanged:w};Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;let $=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=x){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&&l(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){const{get:s,set:n}=c(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)??x}static _$Ei(){if(this.hasOwnProperty(v("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(v("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(v("properties"))){const t=this.properties,e=[...d(t),...p(t)];for(const 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(a(t))}else void 0!==t&&e.push(a(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 t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,s)=>{if(i)t.adoptedStyleSheets=s.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const i of s){const s=document.createElement("style"),n=e.litNonce;void 0!==n&&s.setAttribute("nonce",n),s.textContent=i.cssText,t.appendChild(s)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,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:y).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:y;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??w)(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){}};$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[v("elementProperties")]=new Map,$[v("finalized")]=new Map,b?.({ReactiveElement:$}),(m.reactiveElementVersions??=[]).push("2.1.2");const _=globalThis,A=t=>t,S=_.trustedTypes,E=S?S.createPolicy("lit-html",{createHTML:t=>t}):void 0,k="$lit$",T=`lit$${Math.random().toFixed(9).slice(2)}$`,C="?"+T,O=`<${C}>`,P=document,M=()=>P.createComment(""),L=t=>null===t||"object"!=typeof t&&"function"!=typeof t,U=Array.isArray,z="[ \t\n\f\r]",R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,B=/-->/g,D=/>/g,H=RegExp(`>|${z}(?:([^\\s"'>=/]+)(${z}*=${z}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),I=/'/g,N=/"/g,j=/^(?:script|style|textarea|title)$/i,q=t=>(e,...i)=>({_$litType$:t,strings:e,values:i}),W=q(1),F=q(2),K=Symbol.for("lit-noChange"),V=Symbol.for("lit-nothing"),Y=new WeakMap,G=P.createTreeWalker(P,129);function J(t,e){if(!U(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==E?E.createHTML(e):e}class Z{constructor({strings:t,_$litType$:e},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=R;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===R?"!--"===h[1]?r=B:void 0!==h[1]?r=D: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??R,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]?N:I):r===N||r===I?r=H:r===B||r===D?r=R:(r=H,n=void 0);const d=r===H&&t[e+1].startsWith("/>")?" ":"";o+=r===R?i+O:l>=0?(s.push(a),i.slice(0,l)+k+i.slice(l)+T+d):i+T+(-2===l?e:d)}return[J(t,o+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),s]})(t,e);if(this.el=Z.createElement(h,i),G.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(s=G.nextNode())&&a.length<r;){if(1===s.nodeType){if(s.hasAttributes())for(const t of s.getAttributeNames())if(t.endsWith(k)){const e=l[o++],i=s.getAttribute(t).split(T),r=/([.?@])?(.*)/.exec(e);a.push({type:1,index:n,name:r[2],strings:i,ctor:"."===r[1]?it:"?"===r[1]?st:"@"===r[1]?nt:et}),s.removeAttribute(t)}else t.startsWith(T)&&(a.push({type:6,index:n}),s.removeAttribute(t));if(j.test(s.tagName)){const t=s.textContent.split(T),e=t.length-1;if(e>0){s.textContent=S?S.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],M()),G.nextNode(),a.push({type:2,index:++n});s.append(t[e],M())}}}else if(8===s.nodeType)if(s.data===C)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(T,t+1));)a.push({type:7,index:n}),t+=T.length-1}n++}}static createElement(t,e){const i=P.createElement("template");return i.innerHTML=t,i}}function Q(t,e,i=t,s){if(e===K)return e;let n=void 0!==s?i._$Co?.[s]:i._$Cl;const o=L(e)?void 0:e._$litDirective$;return n?.constructor!==o&&(n?._$AO?.(!1),void 0===o?n=void 0:(n=new o(t),n._$AT(t,i,s)),void 0!==s?(i._$Co??=[])[s]=n:i._$Cl=n),void 0!==n&&(e=Q(t,n._$AS(t,e.values),n,s)),e}class X{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,s=(t?.creationScope??P).importNode(e,!0);G.currentNode=s;let n=G.nextNode(),o=0,r=0,a=i[0];for(;void 0!==a;){if(o===a.index){let e;2===a.type?e=new tt(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new ot(n,this,t)),this._$AV.push(e),a=i[++r]}o!==a?.index&&(n=G.nextNode(),o++)}return G.currentNode=P,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 tt{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,s){this.type=2,this._$AH=V,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=Q(this,t,e),L(t)?t===V||null==t||""===t?(this._$AH!==V&&this._$AR(),this._$AH=V):t!==this._$AH&&t!==K&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>U(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!==V&&L(this._$AH)?this._$AA.nextSibling.data=t:this.T(P.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=Z.createElement(J(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===s)this._$AH.p(e);else{const t=new X(s,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=Y.get(t.strings);return void 0===e&&Y.set(t.strings,e=new Z(t)),e}k(t){U(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 tt(this.O(M()),this.O(M()),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=A(t).nextSibling;A(t).remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class et{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,s,n){this.type=1,this._$AH=V,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=V}_$AI(t,e=this,i,s){const n=this.strings;let o=!1;if(void 0===n)t=Q(this,t,e,0),o=!L(t)||t!==this._$AH&&t!==K,o&&(this._$AH=t);else{const s=t;let r,a;for(t=n[0],r=0;r<n.length-1;r++)a=Q(this,s[i+r],e,r),a===K&&(a=this._$AH[r]),o||=!L(a)||a!==this._$AH[r],a===V?t=V:t!==V&&(t+=(a??"")+n[r+1]),this._$AH[r]=a}o&&!s&&this.j(t)}j(t){t===V?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class it extends et{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===V?void 0:t}}class st extends et{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==V)}}class nt extends et{constructor(t,e,i,s,n){super(t,e,i,s,n),this.type=5}_$AI(t,e=this){if((t=Q(this,t,e,0)??V)===K)return;const i=this._$AH,s=t===V&&i!==V||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,n=t!==V&&(i===V||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 ot{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){Q(this,t)}}const rt={I:tt},at=_.litHtmlPolyfillSupport;at?.(Z,tt),(_.litHtmlVersions??=[]).push("3.3.3");const ht=(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 tt(e.insertBefore(M(),t),t,void 0,i??{})}return n._$AI(t),n},lt=globalThis;let ct=class extends ${constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=ht(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return K}};ct._$litElement$=!0,ct.finalized=!0,lt.litElementHydrateSupport?.({LitElement:ct});const dt=lt.litElementPolyfillSupport;dt?.({LitElement:ct}),(lt.litElementVersions??=[]).push("4.2.2");const pt=1,ut=2,mt=3,ft=4,gt=t=>(...e)=>({_$litDirective$:t,values:e});let bt=class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,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)}},vt=class extends bt{constructor(t){if(super(t),this.it=V,t.type!==ut)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===V||null==t)return this._t=void 0,this.it=t;if(t===K)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};vt.directiveName="unsafeHTML",vt.resultType=1;const yt=gt(vt),wt=Object.freeze({SUBMIT:"chat-submit",BEFORE_OPEN:"chat-before-open",OPEN:"chat-open",BEFORE_CLOSE:"chat-before-close",CLOSE:"chat-close",HIDE:"chat-hide",SHOW:"chat-show",STATE_CHANGE:"chat-state-change",INPUT:"chat-input",MESSAGE_RENDER:"chat-message-render",MESSAGE_CLICK:"chat-message-click",SCROLL_TOP:"chat-scroll-top",BREAKPOINT_CHANGE:"chat-breakpoint-change",HOME:"chat-home",ATTACH:"chat-attach",MOVE:"chat-move"});function xt(t,e,i,{cancelable:s=!1}={}){return t.dispatchEvent(new CustomEvent(e,{detail:i,bubbles:!0,composed:!0,cancelable:s}))}const $t={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),xt(this.#t,wt.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?xt(this.#t,wt.BEFORE_OPEN,{from:t,trigger:i},{cancelable:!0}):"closed"!==e||"open"!==t||xt(this.#t,wt.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&&xt(this.#t,wt.SHOW,{from:t,to:e}),"hidden"!==e?"open"===e?xt(this.#t,wt.OPEN,{from:t,trigger:i}):"closed"===e&&"open"===t&&xt(this.#t,wt.CLOSE,{from:t,trigger:i}):xt(this.#t,wt.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=$t[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 At{#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&&xt(this.#t,wt.BREAKPOINT_CHANGE,{device:t}),this.#A=!0)}}const St="#2563eb",Et="#1f2328",kt="#5c6370",Tt="#ffffff",Ct="#f1f3f5",Ot="#e4e4e7",Pt="#ffffff",Mt={size:60,position:"bottom-right",offset:{x:24,y:24},radius:30,draggable:!1,image:null,label:null,component:null,props:{},colors:{background:St,text:Pt,shadow:"0 4px 12px rgba(0, 0, 0, 0.2)"},animation:{enter:"scale",exit:"scale",duration:200,idle:"none"}},Lt={size:56,offset:{x:16,y:16},radius:28},Ut={breakpoint:768,zIndex:2147483e3,font:{family:"system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif",size:14},closed:{pc:Mt,mobile:{...Mt,...Lt}},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:Tt,text:Et,accent:St,border:Ot,shadow:"0 8px 32px rgba(0, 0, 0, 0.24)",headerBackground:Tt,headerText:Et,userBubble:St,userText:Pt,assistantBubble:Ct,assistantText:Et,systemText:kt,inputBackground:Tt,inputText:Et,inputPlaceholder:kt},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}}},zt=Lt;function Rt(t){return"object"==typeof t&&null!==t&&!Array.isArray(t)}function Bt(t,e){if(!Rt(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]=Rt(s)&&Rt(e)?Bt(e,s):s}return i}function Dt(t,e){const i=t??{},s=function(t,e){const i=t??{};if(!("pc"in i)&&!("mobile"in i)){const i=t??{};return Bt(Ut.closed[e],i)}const s=Bt(Ut.closed.pc,i.pc);return"pc"===e?s:i.mobile?Bt(Ut.closed.mobile,i.mobile):Bt(s,zt)}(i.closed,e);return{breakpoint:i.breakpoint??Ut.breakpoint,zIndex:i.zIndex??Ut.zIndex,font:Bt(Ut.font,i.font),closed:Bt(Ut.closed[e],s),open:Bt(Ut.open,i.open),hidden:Bt(Ut.hidden,i.hidden),device:e}}const Ht=t=>`${t}px`;function It(t){return t?`url("${t.replace(/[\\"]/g,"\\$&")}")`:"none"}function Nt(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":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":It(e.image),"--chit-launcher-bg":e.colors.background,"--chit-launcher-text":e.colors.text,"--chit-launcher-shadow":e.colors.shadow,"--chit-panel-width":Ht(i.width),"--chit-panel-height":Ht(i.height),"--chit-panel-offset-x":Ht(i.offset.x),"--chit-panel-offset-y":Ht(i.offset.y),"--chit-panel-radius":Ht(i.radius),"--chit-panel-bg-image":It(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":Ht(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 jt="undefined"!=typeof ShadowRoot&&"adoptedStyleSheets"in Document.prototype&&"replaceSync"in CSSStyleSheet.prototype;class qt{#k=null;#T=null;#C="";#O;constructor(t){this.#O=t}attach(t){if(t instanceof ShadowRoot){if(jt)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 Wt{#t;#k=new qt("data-chit-theme");#P;constructor(t,{device:e}){this.#t=t,this.#P=Dt(void 0,e())}get current(){return this.#P}hostConnected(){this.#M()}hostDisconnected(){this.#k.detach()}static breakpointOf(t){return function(t){return t?.breakpoint??Ut.breakpoint}(t)}apply(t,e){this.#P=Dt(t,e),this.#M()}#M(){this.#k.write(Nt(this.#P),this.#t.renderRoot)}}class Ft{#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&&xt(this.#t,wt.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 Kt="undefined"!=typeof CSS&&CSS.supports?.("field-sizing","content");class Vt{#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(),xt(this.#t,wt.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!!xt(this.#t,wt.SUBMIT,{text:e},{cancelable:!0})&&(this.clear(),this.#t.handleSubmitted(),!0)}clear(){this.value="",this.focus()}focus(){this.#st?.focus()}#nt(){if(Kt)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 Yt{#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:Gt(t.x,window.innerWidth-e.width),y:Gt(t.y,window.innerHeight-e.height)}}}function Gt(t,e){return Math.round(Math.min(Math.max(t,8),Math.max(8,e-8)))}const Jt=new WeakMap,Zt=t=>`msg:${t}`,Qt=["text","html","template","element","component"];function Xt(t){const e=Qt.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 te(t){return t[Xt(t)]}function ee(t,e,i,s={}){let n=Jt.get(t);n||(n=new Map,Jt.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 ie(t,e){return Jt.get(t)?.get(Zt(e))?.element}function se(t,e){switch(Xt(e)){case"text":return e.text;case"template":return e.template;case"element":return e.element;case"component":{const i=e;return ee(t,Zt(e.id),i.component,i.props)}default:{const i=e.html;return yt(t.sanitize?t.sanitize(i):i)}}}function ne(t){const e=t.currentTheme.closed,i=t.currentLabels,s=e.component?ee(t,"launcher",e.component,e.props):null;return W`
|
|
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??W`<slot name="launcher">${function(t){return t.image?V:t.label?W`<span part="launcher-label">${t.label}</span>`:function(){return W`
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
17
20
|
</svg>
|
|
18
21
|
`}()}(e)}</slot>`}
|
|
19
22
|
</button>
|
|
20
|
-
`}const{I:
|
|
23
|
+
`}const{I:oe}=rt,re=t=>t,ae=()=>document.createComment(""),he=(t,e,i)=>{const s=t._$AA.parentNode,n=void 0===e?t._$AB:e._$AA;if(void 0===i){const e=s.insertBefore(ae(),n),o=s.insertBefore(ae(),n);i=new oe(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=re(t).nextSibling;re(s).insertBefore(t,n),t=e}}}return i},le=(t,e,i=t)=>(t._$AI(e,i),t),ce={},de=(t,e=ce)=>t._$AH=e,pe=t=>{t._$AR(),t._$AA.remove()},ue=(t,e,i)=>{const s=new Map;for(let n=e;n<=i;n++)s.set(t[n],n);return s},me=gt(class extends bt{constructor(t){if(super(t),t.type!==ut)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]=le(n[d],o[u]),d++,u++;else if(a[p]===r[m])h[m]=le(n[p],o[m]),p--,m--;else if(a[d]===r[m])h[m]=le(n[d],o[m]),he(t,h[m+1],n[d]),d++,m--;else if(a[p]===r[u])h[u]=le(n[p],o[u]),he(t,n[d],n[p]),p--,u++;else if(void 0===l&&(l=ue(r,u,m),c=ue(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=he(t,n[d]);le(e,o[u]),h[u]=e}else h[u]=le(i,o[u]),he(t,n[d],i),n[e]=null;u++}else pe(n[p]),p--;else pe(n[d]),d++;for(;u<=m;){const e=he(t,h[m+1]);le(e,o[u]),h[u++]=e}for(;d<=p;){const t=n[d++];null!==t&&pe(t)}return this.ut=r,de(t,h),K}});function fe(t,e){if("system"===e.role)return W`
|
|
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=${Xt(e)}>${se(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 W`
|
|
25
28
|
<article
|
|
26
29
|
part="message message-${e.role}"
|
|
27
30
|
data-role=${e.role}
|
|
@@ -29,61 +32,24 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
29
32
|
?data-streaming=${!!e.streaming}
|
|
30
33
|
aria-busy=${e.streaming?"true":"false"}
|
|
31
34
|
>
|
|
32
|
-
${
|
|
35
|
+
${n?W`<img part="avatar" src=${n} alt="" loading="lazy" />`:s.avatar?W`<span part="avatar" data-placeholder aria-hidden="true"></span>`:V}
|
|
33
36
|
<div class="body">
|
|
34
|
-
${
|
|
37
|
+
${o?W`<span part="name">${o}</span>`:V}
|
|
35
38
|
<div part="bubble">
|
|
36
|
-
<div part="message-content" data-content=${
|
|
37
|
-
${e.streaming?
|
|
39
|
+
<div part="message-content" data-content=${Xt(e)}>${se(t,e)}</div>
|
|
40
|
+
${e.streaming?W`<span part="cursor" aria-hidden="true"></span>`:V}
|
|
38
41
|
</div>
|
|
39
|
-
${
|
|
42
|
+
${i?W`
|
|
40
43
|
<div part="meta" class="meta">
|
|
41
|
-
${e.time?
|
|
42
|
-
${e.status?
|
|
44
|
+
${e.time?W`<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>`:V}
|
|
45
|
+
${e.status?W`<span part="status" data-status=${e.status}>
|
|
43
46
|
${t.currentLabels.status[e.status]}
|
|
44
|
-
</span>`:
|
|
47
|
+
</span>`:V}
|
|
45
48
|
</div>
|
|
46
|
-
`:
|
|
49
|
+
`:V}
|
|
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?F`<img part="header-logo" src=${e.header.logo} alt="" />`:G}
|
|
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 F`
|
|
52
|
+
`}function ge(t){const e=t.currentLabels,i=t.typing,s=0===t.messages.length&&!i&&!t.loading;return W`
|
|
87
53
|
<div
|
|
88
54
|
part="messages"
|
|
89
55
|
role="log"
|
|
@@ -93,17 +59,23 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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?W`<slot name="empty"></slot>`:V}
|
|
63
|
+
${me(t.messages,t=>t.id,e=>fe(t,e))}
|
|
64
|
+
${t.loading?function(t){const{style:e,text:i}=t.currentTheme.open.loading,s=i??t.currentLabels.loading;return W`
|
|
65
|
+
<div part="loading" data-style=${e} role="status" aria-label=${s}>
|
|
66
|
+
${"dots"===e?W`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`:V}
|
|
67
|
+
${"spinner"===e?W`<span part="spinner" aria-hidden="true"></span>`:V}
|
|
68
|
+
${"text"===e||i?W`<span part="loading-text">${s}</span>`:V}
|
|
69
|
+
</div>
|
|
70
|
+
`}(t):i?W`
|
|
71
|
+
<div part="typing" role="status" aria-label=${e.typing}>
|
|
72
|
+
${"object"==typeof i&&i.html?t.renderTypingHtml(i.html):W`<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>`}
|
|
73
|
+
</div>
|
|
74
|
+
`:V}
|
|
103
75
|
</div>
|
|
104
76
|
</div>
|
|
105
77
|
|
|
106
|
-
${t.hasUnseen?
|
|
78
|
+
${t.hasUnseen?W`
|
|
107
79
|
<button
|
|
108
80
|
part="to-latest"
|
|
109
81
|
type="button"
|
|
@@ -111,23 +83,54 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
111
83
|
>
|
|
112
84
|
${e.toLatest}
|
|
113
85
|
</button>
|
|
114
|
-
`:
|
|
115
|
-
`}(t)}
|
|
86
|
+
`:V}
|
|
87
|
+
`}const be=gt(class extends bt{constructor(t){if(super(t),t.type!==mt&&t.type!==pt&&t.type!==ft)throw Error("The `live` directive is not allowed on child or event bindings");if(!(t=>void 0===t.strings)(t))throw Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===K||e===V)return e;const i=t.element,s=t.name;if(t.type===mt){if(e===i[s])return K}else if(t.type===ft){if(!!e===i.hasAttribute(s))return K}else if(t.type===pt&&i.getAttribute(s)===e+"")return K;return de(t),e}});function ve(t){if(t.inputHidden)return V;const e=t.currentLabels,i=t.currentTheme.open,s=t.busy||t.inputDisabled,n=t.placeholder??i.input.placeholder??e.input;return W`
|
|
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 W`
|
|
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):V}
|
|
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=${be(t.value)}
|
|
127
130
|
placeholder=${n}
|
|
128
131
|
aria-label=${e.input}
|
|
129
|
-
?disabled=${
|
|
130
|
-
aria-describedby=${void 0===t.maxLength?
|
|
132
|
+
?disabled=${s}
|
|
133
|
+
aria-describedby=${void 0===t.maxLength?V:"chit-counter"}
|
|
131
134
|
@input=${e=>t.handleInput(e)}
|
|
132
135
|
@keydown=${e=>t.handleKeydown(e)}
|
|
133
136
|
@compositionstart=${()=>t.handleComposition(!0)}
|
|
@@ -136,7 +139,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
136
139
|
|
|
137
140
|
<slot name="input-after"></slot>
|
|
138
141
|
|
|
139
|
-
${void 0===t.maxLength?
|
|
142
|
+
${void 0===t.maxLength?V:W`<span part="counter" id="chit-counter" aria-live="polite" hidden></span>`}
|
|
140
143
|
|
|
141
144
|
<button
|
|
142
145
|
part="send-button"
|
|
@@ -144,17 +147,83 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
144
147
|
aria-label=${e.send}
|
|
145
148
|
?disabled=${!t.canSend}
|
|
146
149
|
>
|
|
147
|
-
${t.busy?
|
|
150
|
+
${t.busy?W`<span part="spinner" aria-hidden="true"></span>`:W`<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
148
151
|
<path fill="currentColor" d="M3.4 20.4 21 12 3.4 3.6 3.39 10.2 15.6 12 3.39 13.8z" />
|
|
149
152
|
</svg>`}
|
|
150
153
|
</button>
|
|
151
154
|
</slot>
|
|
152
155
|
</form>
|
|
153
|
-
`}(t)
|
|
156
|
+
`}function ye(t){const e=t.currentTheme.open,i=t.currentLabels,s=e.header.title??i.panel;return W`
|
|
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 W`
|
|
166
|
+
<header
|
|
167
|
+
part="header"
|
|
168
|
+
?data-draggable=${n}
|
|
169
|
+
tabindex=${n?"0":V}
|
|
170
|
+
aria-label=${n?s.move:V}
|
|
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?W`<img part="header-logo" src=${i.header.logo} alt="" />`:V}
|
|
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?W`<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>`:V}
|
|
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):V}
|
|
221
|
+
|
|
222
|
+
${ge(t)} ${ve(t)}
|
|
154
223
|
|
|
155
224
|
<slot name="footer"></slot>
|
|
156
225
|
</section>
|
|
157
|
-
`}const
|
|
226
|
+
`}const we={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 xe(t){return t||document.documentElement.lang||void 0}const $e=r`
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
302
373
|
animation: none !important;
|
|
303
374
|
}
|
|
304
375
|
}
|
|
305
|
-
`,
|
|
376
|
+
`,_e=r`
|
|
306
377
|
[part~='launcher'] {
|
|
307
378
|
position: absolute;
|
|
308
379
|
display: grid;
|
|
@@ -324,6 +395,19 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
437
521
|
animation: none;
|
|
438
522
|
}
|
|
439
523
|
}
|
|
440
|
-
|
|
524
|
+
`,Ae=r`
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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
|
+
`,Se=r`
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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
|
+
`,Ee=r`
|
|
751
1034
|
[part~='message-content'] {
|
|
752
1035
|
min-width: 0;
|
|
753
1036
|
max-width: 100%;
|
|
@@ -854,7 +1137,7 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
854
1137
|
border: 0;
|
|
855
1138
|
border-top: 1px solid var(--chit-color-border);
|
|
856
1139
|
}
|
|
857
|
-
`,
|
|
1140
|
+
`,ke=r`
|
|
858
1141
|
[part~='composer'] {
|
|
859
1142
|
display: flex;
|
|
860
1143
|
flex: none;
|
|
@@ -908,6 +1191,45 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
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 @@ var ChitUI=function(t){"use strict";const e=globalThis,s=e.ShadowRoot&&(void 0==
|
|
|
958
1280
|
animation-duration: 2s;
|
|
959
1281
|
}
|
|
960
1282
|
}
|
|
961
|
-
`;class
|
|
962
|
-
${e?
|
|
963
|
-
`}}customElements.get("chit-ui")||customElements.define("chit-ui",
|
|
1283
|
+
`;class Te extends ct{static styles=[$e,_e,Ae,Se,Ee,ke];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 qt("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 At(this),this.#wt=new Wt(this,{device:()=>this.#$.device}),this.addController(this.#wt),this.#xt=new Ft(this,{behavior:()=>this.currentTheme.open.animation.scroll}),this.#$t=new Vt(this),this.#Tt=new Yt(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 Yt(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;xt(this,wt.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=(xe(t)||"en").toLowerCase(),s=we[i]??we[i.split("-")[0]]??we.en;return e?{...s,...e}:s}(this.locale,this.labels)}get resolvedLocale(){return xe(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){xt(this,wt.ATTACH,{files:t})}openAttach(){const t=this.renderRoot.querySelector('[part~="attach-input"]');t?.click()}renderTypingHtml(t){return yt(this.sanitize?this.sanitize(t):t)}handleMessageClick(t){const e=t.composedPath(),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];xt(this,wt.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"){xt(this,wt.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(Wt.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=Jt.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=te(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&&xt(this,wt.MESSAGE_RENDER,{message:t,element:i,instance:ie(this,t.id)})}}render(){const t=this.renderedState,e="closed"===t||"open"===t&&"visible"===this.currentTheme.open.launcher,i="open"===t;return W`
|
|
1284
|
+
${e?ne(this):V} ${i?ye(this):V}
|
|
1285
|
+
`}}customElements.get("chit-ui")||customElements.define("chit-ui",Te);const Ce=gt(class extends bt{constructor(t){if(super(t),t.type!==pt||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter(e=>t[e]).join(" ")+" "}update(t,[e]){if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in e)e[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(e)}const 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 K}}),Oe="important",Pe=" !"+Oe,Me=gt(class extends bt{constructor(t){if(super(t),t.type!==pt||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,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 K}});return t.ChitUI=Te,t.Events=wt,t.LitElement=ct,t.classMap=Ce,t.css=r,t.greenTheme={closed:{colors:{background:"#0a6b36",text:"#ffffff",shadow:"0 4px 12px rgba(16, 42, 26, 0.32)"}},open:{radius:12,colors:{background:"#d3ddea",text:"#16212c",accent:"#0a6b36",border:"#b6c5d6",shadow:"0 8px 32px rgba(16, 32, 48, 0.28)",headerBackground:"#ffffff",headerText:"#16212c",userBubble:"#9ce26c",userText:"#14240c",assistantBubble:"#ffffff",assistantText:"#16212c",systemText:"#37475a",inputBackground:"#ffffff",inputText:"#16212c",inputPlaceholder:"#5c6370"},bubble:{radius:18,tail:"top"}}},t.html=W,t.live=be,t.nothing=V,t.render=ht,t.repeat=me,t.styleMap=Me,t.svg=F,t.unsafeHTML=yt,t}({});
|
|
964
1286
|
//# sourceMappingURL=chit-ui.iife.min.js.map
|