snice 5.2.0 → 5.2.1

package/dist/cdn/chat/snice-chat.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v5.2.0
+ * snice v5.2.1
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
@@ -35,9 +35,9 @@ void 0===globalThis.Snice&&console.warn("[snice] snice-runtime.min.js must be lo
             </when>
           </case>
         </if>
-        <slot></slot>
+        <div class="empty-state__extra"><slot></slot></div>
       </div>
-    `}styles(){return t.css`${":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem);color:var(--snice-color-text-secondary,rgb(82 82 82));animation:snice-empty-in 360ms var(--snice-ease-out,ease) backwards}@keyframes snice-empty-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-state--small{padding:var(--snice-spacing-xl,2rem) var(--snice-spacing-lg,1.5rem)}.empty-state--medium{padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem)}.empty-state--large{padding:var(--snice-spacing-3xl,4rem) var(--snice-spacing-2xl,2.5rem)}.empty-state__icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--snice-spacing-lg,1.5rem);position:relative;width:calc(var(--snice-font-size-4xl,4rem) * 1.8);height:calc(var(--snice-font-size-4xl,4rem) * 1.8)}.empty-state__icon-wrapper::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--snice-color-border,#ddd) 70%,transparent);animation:18s linear infinite snice-empty-halo}@keyframes snice-empty-halo{to{transform:rotate(360deg)}}.empty-state__icon{font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem)}.empty-state__icon-wrapper ::slotted(img){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem);object-fit:contain}.empty-state--small .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-md,1rem);width:calc(var(--snice-font-size-3xl,3rem) * 1.8);height:calc(var(--snice-font-size-3xl,3rem) * 1.8)}.empty-state--small .empty-state__icon{font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(img),.empty-state--small .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-3xl,3rem);height:var(--snice-font-size-3xl,3rem)}.empty-state--large .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-xl,2rem);width:calc(var(--snice-font-size-5xl,5rem) * 1.8);height:calc(var(--snice-font-size-5xl,5rem) * 1.8)}.empty-state--large .empty-state__icon{font-size:var(--snice-font-size-5xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-5xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(img),.empty-state--large .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-5xl,5rem);height:var(--snice-font-size-5xl,5rem)}.empty-state__title{font-family:var(--snice-font-family-display);font-size:var(--snice-heading-lg, 1.25rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin:0 0 var(--snice-spacing-xs,.5rem) 0}.empty-state--small .empty-state__title{font-family:var(--snice-font-family-display);font-size:var(--snice-heading-md, 1.125rem);margin-bottom:var(--snice-spacing-2xs,.375rem)}.empty-state--large .empty-state__title{font-family:var(--snice-font-family-display);font-size:var(--snice-heading-xl, 1.5rem);margin-bottom:var(--snice-spacing-sm,.75rem)}.empty-state__description{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));margin:0 0 var(--snice-spacing-lg,1.5rem) 0;max-width:32rem;line-height:var(--snice-line-height-normal, 1.5)}.empty-state--small .empty-state__description{font-size:var(--snice-font-size-xs, .8125rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__description{font-size:var(--snice-font-size-md, 1rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__action{display:inline-flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235));border:none;border-radius:var(--snice-border-radius-md,.375rem);text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.empty-state__action:hover{background:var(--snice-color-primary-hover,rgb(29 78 216))}.empty-state--small .empty-state__action{padding:var(--snice-spacing-2xs,.375rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .8125rem)}.empty-state--large .empty-state__action{padding:var(--snice-spacing-sm,.625rem) var(--snice-spacing-lg,1.25rem);font-size:var(--snice-font-size-md, 1rem)}::slotted(*){margin-top:var(--snice-spacing-md,1rem)}"}`}handleActionClick(e){this.actionHref||e.preventDefault(),this.dispatchActionEvent()}dispatchActionEvent(){return{emptyState:this}}constructor(){super(...arguments),this.size=(i(this,f),i(this,y,"medium")),this.icon=(i(this,b),i(this,x,"📭")),this.title=(i(this,w),i(this,k,"No data")),this.description=(i(this,z),i(this,$,"")),this.actionText=(i(this,T),i(this,_,"")),this.actionHref=(i(this,M),i(this,S,"")),i(this,A)}})})();let a=(()=>{let e,a,n,r,o,c,l,m,d,p,h,g,u,v,f,y,b,x,w,k,z,$,T,_,M=[t.element("snice-chat")],S=[],A=HTMLElement,j=[],I=[],E=[],F=[],C=[],H=[],B=[],D=[],R=[],U=[],O=[],L=[],V=[],K=[],Y=[],P=[],q=[],N=[],W=[],G=[],J=[];return class extends A{static{a=this}constructor(){super(...arguments),this.messages=(i(this,j),i(this,I,[])),this.currentUser=(i(this,E),i(this,F,"You")),this.currentAvatar=(i(this,C),i(this,H,"")),this.placeholder=(i(this,B),i(this,D,"Type a message...")),this.allowFiles=(i(this,R),i(this,U,!0)),this.showTyping=(i(this,O),i(this,L,!0)),this.showAvatars=(i(this,V),i(this,K,!0)),this.showTimestamps=(i(this,Y),i(this,P,!0)),this.messagesArea=(i(this,q),i(this,N,void 0)),this.inputField=(i(this,W),i(this,G,void 0)),this.typingIndicators=(i(this,J),new Map),this.typingTimeout=null,this.fileInput=null,this.handleKeyDown=e=>{e.target===this.inputField&&("Enter"!==e.key||e.shiftKey||(e.preventDefault(),this.sendMessage()))}}static{const Q="function"==typeof Symbol&&Symbol.metadata?Object.create(A[Symbol.metadata]??null):void 0;n=[t.property({type:Array,attribute:!1})],r=[t.property({type:String,attribute:"current-user"})],o=[t.property({type:String,attribute:"current-avatar"})],c=[t.property({type:String})],l=[t.property({type:Boolean,attribute:"allow-files"})],m=[t.property({type:Boolean,attribute:"show-typing"})],d=[t.property({type:Boolean,attribute:"show-avatars"})],p=[t.property({type:Boolean,attribute:"show-timestamps"})],h=[t.query(".messages-area")],g=[t.query(".input-field")],u=[t.styles()],v=[t.ready()],f=[t.dispose()],y=[t.watch("messages")],b=[t.dispatch("message-send",{bubbles:!0,composed:!0})],x=[t.dispatch("message-edit",{bubbles:!0,composed:!0})],w=[t.dispatch("message-delete",{bubbles:!0,composed:!0})],k=[t.dispatch("message-react",{bubbles:!0,composed:!0})],z=[t.dispatch("message-thread",{bubbles:!0,composed:!0})],$=[t.dispatch("typing-start",{bubbles:!0,composed:!0})],T=[t.dispatch("typing-stop",{bubbles:!0,composed:!0})],_=[t.render()],s(this,null,u,{kind:"method",name:"styles",static:!1,private:!1,access:{has:e=>"styles"in e,get:e=>e.styles},metadata:Q},null,j),s(this,null,v,{kind:"method",name:"init",static:!1,private:!1,access:{has:e=>"init"in e,get:e=>e.init},metadata:Q},null,j),s(this,null,f,{kind:"method",name:"cleanup",static:!1,private:!1,access:{has:e=>"cleanup"in e,get:e=>e.cleanup},metadata:Q},null,j),s(this,null,y,{kind:"method",name:"messagesChanged",static:!1,private:!1,access:{has:e=>"messagesChanged"in e,get:e=>e.messagesChanged},metadata:Q},null,j),s(this,null,b,{kind:"method",name:"emitMessageSend",static:!1,private:!1,access:{has:e=>"emitMessageSend"in e,get:e=>e.emitMessageSend},metadata:Q},null,j),s(this,null,x,{kind:"method",name:"emitMessageEdit",static:!1,private:!1,access:{has:e=>"emitMessageEdit"in e,get:e=>e.emitMessageEdit},metadata:Q},null,j),s(this,null,w,{kind:"method",name:"emitMessageDelete",static:!1,private:!1,access:{has:e=>"emitMessageDelete"in e,get:e=>e.emitMessageDelete},metadata:Q},null,j),s(this,null,k,{kind:"method",name:"emitMessageReact",static:!1,private:!1,access:{has:e=>"emitMessageReact"in e,get:e=>e.emitMessageReact},metadata:Q},null,j),s(this,null,z,{kind:"method",name:"emitMessageThread",static:!1,private:!1,access:{has:e=>"emitMessageThread"in e,get:e=>e.emitMessageThread},metadata:Q},null,j),s(this,null,$,{kind:"method",name:"emitTypingStart",static:!1,private:!1,access:{has:e=>"emitTypingStart"in e,get:e=>e.emitTypingStart},metadata:Q},null,j),s(this,null,T,{kind:"method",name:"emitTypingStop",static:!1,private:!1,access:{has:e=>"emitTypingStop"in e,get:e=>e.emitTypingStop},metadata:Q},null,j),s(this,null,_,{kind:"method",name:"render",static:!1,private:!1,access:{has:e=>"render"in e,get:e=>e.render},metadata:Q},null,j),s(null,null,n,{kind:"field",name:"messages",static:!1,private:!1,access:{has:e=>"messages"in e,get:e=>e.messages,set:(e,t)=>{e.messages=t}},metadata:Q},I,E),s(null,null,r,{kind:"field",name:"currentUser",static:!1,private:!1,access:{has:e=>"currentUser"in e,get:e=>e.currentUser,set:(e,t)=>{e.currentUser=t}},metadata:Q},F,C),s(null,null,o,{kind:"field",name:"currentAvatar",static:!1,private:!1,access:{has:e=>"currentAvatar"in e,get:e=>e.currentAvatar,set:(e,t)=>{e.currentAvatar=t}},metadata:Q},H,B),s(null,null,c,{kind:"field",name:"placeholder",static:!1,private:!1,access:{has:e=>"placeholder"in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:Q},D,R),s(null,null,l,{kind:"field",name:"allowFiles",static:!1,private:!1,access:{has:e=>"allowFiles"in e,get:e=>e.allowFiles,set:(e,t)=>{e.allowFiles=t}},metadata:Q},U,O),s(null,null,m,{kind:"field",name:"showTyping",static:!1,private:!1,access:{has:e=>"showTyping"in e,get:e=>e.showTyping,set:(e,t)=>{e.showTyping=t}},metadata:Q},L,V),s(null,null,d,{kind:"field",name:"showAvatars",static:!1,private:!1,access:{has:e=>"showAvatars"in e,get:e=>e.showAvatars,set:(e,t)=>{e.showAvatars=t}},metadata:Q},K,Y),s(null,null,p,{kind:"field",name:"showTimestamps",static:!1,private:!1,access:{has:e=>"showTimestamps"in e,get:e=>e.showTimestamps,set:(e,t)=>{e.showTimestamps=t}},metadata:Q},P,q),s(null,null,h,{kind:"field",name:"messagesArea",static:!1,private:!1,access:{has:e=>"messagesArea"in e,get:e=>e.messagesArea,set:(e,t)=>{e.messagesArea=t}},metadata:Q},N,W),s(null,null,g,{kind:"field",name:"inputField",static:!1,private:!1,access:{has:e=>"inputField"in e,get:e=>e.inputField,set:(e,t)=>{e.inputField=t}},metadata:Q},G,J),s(null,e={value:a},M,{kind:"class",name:a.name,metadata:Q},null,S),a=e.value,Q&&Object.defineProperty(a,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:Q}),i(a,S)}styles(){return t.css`${":host{display:flex;flex-direction:column;height:var(--snice-chat-height,37.5rem);font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-font-size-md, 1rem);line-height:1.5;color:var(--snice-color-text,rgb(23 23 23));background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);overflow:hidden;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1))}.chat-container{display:flex;flex-direction:column;height:100%}.messages-area{flex:1;overflow-y:auto;padding:var(--snice-spacing-md,1rem);display:flex;flex-direction:column;gap:var(--snice-spacing-sm,.75rem)}.messages-area::-webkit-scrollbar{width:8px}.messages-area::-webkit-scrollbar-track{background:0 0}.messages-area::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem)}.messages-area::-webkit-scrollbar-thumb:hover{background:var(--snice-color-text-secondary,rgb(82 82 82))}.message{display:flex;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-2xs,.25rem) 0;position:relative}.message:hover .message-actions{opacity:1}.message-avatar{width:2.25rem;height:2.25rem;border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-weight:var(--snice-font-weight-semibold,600);font-size:var(--snice-font-size-sm, .875rem);flex-shrink:0}.message-avatar img{width:100%;height:100%;border-radius:var(--snice-border-radius-md,.25rem);object-fit:cover}.message-content{flex:1;min-width:0}.message-header{font-family:var(--snice-font-family-display);display:flex;align-items:baseline;gap:var(--snice-spacing-xs,.5rem);margin-bottom:var(--snice-spacing-3xs,.125rem)}.message-author{font-weight:var(--snice-font-weight-bold,700);color:var(--snice-color-text,rgb(23 23 23))}.message-timestamp{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.message-edited{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.message-text{word-wrap:break-word;white-space:pre-wrap;color:var(--snice-color-text,rgb(23 23 23))}.message.system{justify-content:center}.message.system .message-text{text-align:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem);font-style:italic}.message-attachment{margin-top:var(--snice-spacing-xs,.5rem);border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);overflow:hidden;max-width:25rem}.message-attachment img{max-width:100%;display:block}.attachment-file{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-sm,.75rem);background:var(--snice-color-surface-container-low,rgb(250 250 250))}.attachment-icon{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--snice-color-surface,rgb(255 255 255));border-radius:var(--snice-border-radius-md,.25rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.attachment-info{flex:1;min-width:0}.attachment-name{font-weight:var(--snice-font-weight-medium,500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-size{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.message-reactions{display:flex;gap:var(--snice-spacing-2xs,.25rem);margin-top:var(--snice-spacing-2xs,.25rem);flex-wrap:wrap}.reaction{display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:12px;font-size:var(--snice-font-size-sm, .875rem);cursor:pointer;transition:all var(--snice-transition-fast, 150ms)}.reaction:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.reaction.active{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.reaction-emoji{font-size:var(--snice-font-size-sm, .875rem)}.reaction-count{font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-medium,500)}.message-actions{position:absolute;top:-.75rem;right:var(--snice-spacing-md,1rem);background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1));display:flex;gap:var(--snice-spacing-3xs,.125rem);opacity:0;transition:opacity var(--snice-transition-fast, 150ms);padding:var(--snice-spacing-3xs,.125rem)}.action-button{width:1.75rem;height:1.75rem;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));transition:background var(--snice-transition-fast, 150ms)}.action-button:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.action-button svg{width:1rem;height:1rem}.typing-indicators{padding:0 var(--snice-spacing-md,1rem) var(--snice-spacing-xs,.5rem);min-height:1.5rem}.typing-indicator{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.typing-dots{display:flex;gap:.1875rem}.typing-dot{width:6px;height:6px;background:var(--snice-color-text-secondary,rgb(82 82 82));border-radius:50%;animation:1.4s ease-in-out infinite typing-bounce}.typing-dot:first-child{animation-delay:0s}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,100%,60%{transform:translateY(0)}30%{transform:translateY(-4px)}}.input-area{border-top:1px solid var(--snice-color-border,rgb(226 226 226));padding:var(--snice-spacing-md,1rem);background:var(--snice-color-surface-container-high,rgb(252 251 249))}.input-container{display:flex;align-items:flex-end;gap:var(--snice-spacing-xs,.5rem);background:var(--snice-color-surface-container-lowest,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);padding:var(--snice-spacing-xs,.5rem);transition:border-color var(--snice-transition-fast, 150ms)}.input-container:focus-within{border-color:var(--snice-color-primary,rgb(37 99 235))}.input-field{flex:1;border:none;outline:0;resize:none;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);line-height:1.5;min-height:1.375rem;max-height:9.375rem;overflow-y:auto;background:0 0;color:var(--snice-color-text,rgb(23 23 23))}.input-field::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82))}.input-field::-webkit-scrollbar{width:4px}.input-field::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-sm,.125rem)}.input-buttons{display:flex;gap:var(--snice-spacing-2xs,.25rem)}.input-button{width:2rem;height:2rem;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));transition:background var(--snice-transition-fast, 150ms)}.input-button:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.input-button:disabled{opacity:.5;cursor:not-allowed}.input-button.send{color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235))}.input-button.send:hover:not(:disabled){background:var(--snice-color-primary-hover,rgb(29 78 216))}.input-button svg{width:1.125rem;height:1.125rem}input[type=file]{display:none}"}`}init(){this.addEventListener("keydown",this.handleKeyDown)}cleanup(){this.removeEventListener("keydown",this.handleKeyDown),this.typingTimeout&&clearTimeout(this.typingTimeout)}messagesChanged(){setTimeout(()=>this.scrollToBottom(),0)}emitMessageSend(e,t){return{message:e,attachments:t}}emitMessageEdit(e,t){return{messageId:e,newContent:t}}emitMessageDelete(e){return{messageId:e}}emitMessageReact(e,t){return{messageId:e,emoji:t}}emitMessageThread(e){return{messageId:e}}emitTypingStart(){return{}}emitTypingStop(){return{}}addMessage(e){const t={...e,id:`msg_${Date.now()}_${Math.random().toString(36).substring(2,9)}`};this.messages=[...this.messages,t]}updateMessage(e,t){this.messages=this.messages.map(s=>s.id===e?{...s,...t}:s)}deleteMessage(e){this.messages=this.messages.filter(t=>t.id!==e)}addTypingIndicator(e){this.typingIndicators.set(e,{user:e,timestamp:new Date})}removeTypingIndicator(e){this.typingIndicators.delete(e)}clear(){this.messages=[]}scrollToBottom(){this.messagesArea&&(this.messagesArea.scrollTop=this.messagesArea.scrollHeight)}scrollToMessage(e){const t=this.shadowRoot?.querySelector(`[data-message-id="${e}"]`);t&&t.scrollIntoView({behavior:"smooth",block:"center"})}handleInput(){this.typingTimeout||this.emitTypingStart(),this.typingTimeout&&clearTimeout(this.typingTimeout),this.typingTimeout=window.setTimeout(()=>{this.emitTypingStop(),this.typingTimeout=null},1e3)}sendMessage(){const e=this.inputField.value.trim();e&&(this.emitMessageSend(e),this.inputField.value="",this.adjustTextareaHeight(),this.typingTimeout&&(clearTimeout(this.typingTimeout),this.typingTimeout=null),this.emitTypingStop())}handleFileClick(){this.fileInput||(this.fileInput=document.createElement("input"),this.fileInput.type="file",this.fileInput.multiple=!0,this.fileInput.addEventListener("change",()=>this.handleFileSelect())),this.fileInput.click()}handleFileSelect(){if(!this.fileInput?.files||0===this.fileInput.files.length)return;const e=Array.from(this.fileInput.files);this.emitMessageSend("",e),this.fileInput.value=""}adjustTextareaHeight(){this.inputField&&(this.inputField.style.height="auto",this.inputField.style.height=`${Math.min(this.inputField.scrollHeight,150)}px`)}handleReaction(e,t){this.emitMessageReact(e,t)}handleEdit(e){const t=this.messages.find(t=>t.id===e);if(!t)return;const s=prompt("Edit message:",t.content);s&&s!==t.content&&this.emitMessageEdit(e,s)}handleDelete(e){confirm("Delete this message?")&&this.emitMessageDelete(e)}handleThread(e){this.emitMessageThread(e)}render(){return t.html`
+    `}styles(){return t.css`${":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem);color:var(--snice-color-text-secondary,rgb(82 82 82));animation:snice-empty-in 360ms var(--snice-ease-out,ease) backwards}@keyframes snice-empty-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.empty-state--small{padding:var(--snice-spacing-xl,2rem) var(--snice-spacing-lg,1.5rem)}.empty-state--medium{padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem)}.empty-state--large{padding:var(--snice-spacing-3xl,4rem) var(--snice-spacing-2xl,2.5rem)}.empty-state__icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--snice-spacing-lg,1.5rem);position:relative;width:calc(var(--snice-font-size-4xl,4rem) * 1.8);height:calc(var(--snice-font-size-4xl,4rem) * 1.8)}.empty-state__icon-wrapper::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px dashed color-mix(in srgb,var(--snice-color-border,#ddd) 70%,transparent);animation:18s linear infinite snice-empty-halo}@keyframes snice-empty-halo{to{transform:rotate(360deg)}}.empty-state__icon{font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem)}.empty-state__icon-wrapper ::slotted(img){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem);object-fit:contain}.empty-state--small .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-md,1rem);width:calc(var(--snice-font-size-3xl,3rem) * 1.8);height:calc(var(--snice-font-size-3xl,3rem) * 1.8)}.empty-state--small .empty-state__icon{font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(img),.empty-state--small .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-3xl,3rem);height:var(--snice-font-size-3xl,3rem)}.empty-state--large .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-xl,2rem);width:calc(var(--snice-font-size-5xl,5rem) * 1.8);height:calc(var(--snice-font-size-5xl,5rem) * 1.8)}.empty-state--large .empty-state__icon{font-size:var(--snice-font-size-5xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-5xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(img),.empty-state--large .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-5xl,5rem);height:var(--snice-font-size-5xl,5rem)}.empty-state__title{font-family:var(--snice-font-family-display);font-size:var(--snice-heading-lg, 1.25rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin:0 0 var(--snice-spacing-xs,.5rem) 0}.empty-state--small .empty-state__title{font-family:var(--snice-font-family-display);font-size:var(--snice-heading-md, 1.125rem);margin-bottom:var(--snice-spacing-2xs,.375rem)}.empty-state--large .empty-state__title{font-family:var(--snice-font-family-display);font-size:var(--snice-heading-xl, 1.5rem);margin-bottom:var(--snice-spacing-sm,.75rem)}.empty-state__description{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));margin:0 0 var(--snice-spacing-lg,1.5rem) 0;max-width:32rem;line-height:var(--snice-line-height-normal, 1.5)}.empty-state--small .empty-state__description{font-size:var(--snice-font-size-xs, .8125rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__description{font-size:var(--snice-font-size-md, 1rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__action{display:inline-flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235));border:none;border-radius:var(--snice-border-radius-md,.375rem);text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.empty-state__action:hover{background:var(--snice-color-primary-hover,rgb(29 78 216))}.empty-state--small .empty-state__action{padding:var(--snice-spacing-2xs,.375rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .8125rem)}.empty-state--large .empty-state__action{padding:var(--snice-spacing-sm,.625rem) var(--snice-spacing-lg,1.25rem);font-size:var(--snice-font-size-md, 1rem)}.empty-state__extra ::slotted(*){margin-top:var(--snice-spacing-md,1rem)}"}`}handleActionClick(e){this.actionHref||e.preventDefault(),this.dispatchActionEvent()}dispatchActionEvent(){return{emptyState:this}}constructor(){super(...arguments),this.size=(i(this,f),i(this,y,"medium")),this.icon=(i(this,b),i(this,x,"📭")),this.title=(i(this,w),i(this,k,"No data")),this.description=(i(this,z),i(this,$,"")),this.actionText=(i(this,T),i(this,_,"")),this.actionHref=(i(this,M),i(this,S,"")),i(this,A)}})})();let a=(()=>{let e,a,n,r,o,c,l,m,d,p,h,g,u,v,f,y,b,x,w,k,z,$,T,_,M=[t.element("snice-chat")],S=[],A=HTMLElement,j=[],I=[],E=[],F=[],C=[],H=[],B=[],D=[],R=[],U=[],O=[],L=[],V=[],K=[],Y=[],P=[],q=[],N=[],W=[],G=[],J=[];return class extends A{static{a=this}constructor(){super(...arguments),this.messages=(i(this,j),i(this,I,[])),this.currentUser=(i(this,E),i(this,F,"You")),this.currentAvatar=(i(this,C),i(this,H,"")),this.placeholder=(i(this,B),i(this,D,"Type a message...")),this.allowFiles=(i(this,R),i(this,U,!0)),this.showTyping=(i(this,O),i(this,L,!0)),this.showAvatars=(i(this,V),i(this,K,!0)),this.showTimestamps=(i(this,Y),i(this,P,!0)),this.messagesArea=(i(this,q),i(this,N,void 0)),this.inputField=(i(this,W),i(this,G,void 0)),this.typingIndicators=(i(this,J),new Map),this.typingTimeout=null,this.fileInput=null,this.handleKeyDown=e=>{e.target===this.inputField&&("Enter"!==e.key||e.shiftKey||(e.preventDefault(),this.sendMessage()))}}static{const Q="function"==typeof Symbol&&Symbol.metadata?Object.create(A[Symbol.metadata]??null):void 0;n=[t.property({type:Array,attribute:!1})],r=[t.property({type:String,attribute:"current-user"})],o=[t.property({type:String,attribute:"current-avatar"})],c=[t.property({type:String})],l=[t.property({type:Boolean,attribute:"allow-files"})],m=[t.property({type:Boolean,attribute:"show-typing"})],d=[t.property({type:Boolean,attribute:"show-avatars"})],p=[t.property({type:Boolean,attribute:"show-timestamps"})],h=[t.query(".messages-area")],g=[t.query(".input-field")],u=[t.styles()],v=[t.ready()],f=[t.dispose()],y=[t.watch("messages")],b=[t.dispatch("message-send",{bubbles:!0,composed:!0})],x=[t.dispatch("message-edit",{bubbles:!0,composed:!0})],w=[t.dispatch("message-delete",{bubbles:!0,composed:!0})],k=[t.dispatch("message-react",{bubbles:!0,composed:!0})],z=[t.dispatch("message-thread",{bubbles:!0,composed:!0})],$=[t.dispatch("typing-start",{bubbles:!0,composed:!0})],T=[t.dispatch("typing-stop",{bubbles:!0,composed:!0})],_=[t.render()],s(this,null,u,{kind:"method",name:"styles",static:!1,private:!1,access:{has:e=>"styles"in e,get:e=>e.styles},metadata:Q},null,j),s(this,null,v,{kind:"method",name:"init",static:!1,private:!1,access:{has:e=>"init"in e,get:e=>e.init},metadata:Q},null,j),s(this,null,f,{kind:"method",name:"cleanup",static:!1,private:!1,access:{has:e=>"cleanup"in e,get:e=>e.cleanup},metadata:Q},null,j),s(this,null,y,{kind:"method",name:"messagesChanged",static:!1,private:!1,access:{has:e=>"messagesChanged"in e,get:e=>e.messagesChanged},metadata:Q},null,j),s(this,null,b,{kind:"method",name:"emitMessageSend",static:!1,private:!1,access:{has:e=>"emitMessageSend"in e,get:e=>e.emitMessageSend},metadata:Q},null,j),s(this,null,x,{kind:"method",name:"emitMessageEdit",static:!1,private:!1,access:{has:e=>"emitMessageEdit"in e,get:e=>e.emitMessageEdit},metadata:Q},null,j),s(this,null,w,{kind:"method",name:"emitMessageDelete",static:!1,private:!1,access:{has:e=>"emitMessageDelete"in e,get:e=>e.emitMessageDelete},metadata:Q},null,j),s(this,null,k,{kind:"method",name:"emitMessageReact",static:!1,private:!1,access:{has:e=>"emitMessageReact"in e,get:e=>e.emitMessageReact},metadata:Q},null,j),s(this,null,z,{kind:"method",name:"emitMessageThread",static:!1,private:!1,access:{has:e=>"emitMessageThread"in e,get:e=>e.emitMessageThread},metadata:Q},null,j),s(this,null,$,{kind:"method",name:"emitTypingStart",static:!1,private:!1,access:{has:e=>"emitTypingStart"in e,get:e=>e.emitTypingStart},metadata:Q},null,j),s(this,null,T,{kind:"method",name:"emitTypingStop",static:!1,private:!1,access:{has:e=>"emitTypingStop"in e,get:e=>e.emitTypingStop},metadata:Q},null,j),s(this,null,_,{kind:"method",name:"render",static:!1,private:!1,access:{has:e=>"render"in e,get:e=>e.render},metadata:Q},null,j),s(null,null,n,{kind:"field",name:"messages",static:!1,private:!1,access:{has:e=>"messages"in e,get:e=>e.messages,set:(e,t)=>{e.messages=t}},metadata:Q},I,E),s(null,null,r,{kind:"field",name:"currentUser",static:!1,private:!1,access:{has:e=>"currentUser"in e,get:e=>e.currentUser,set:(e,t)=>{e.currentUser=t}},metadata:Q},F,C),s(null,null,o,{kind:"field",name:"currentAvatar",static:!1,private:!1,access:{has:e=>"currentAvatar"in e,get:e=>e.currentAvatar,set:(e,t)=>{e.currentAvatar=t}},metadata:Q},H,B),s(null,null,c,{kind:"field",name:"placeholder",static:!1,private:!1,access:{has:e=>"placeholder"in e,get:e=>e.placeholder,set:(e,t)=>{e.placeholder=t}},metadata:Q},D,R),s(null,null,l,{kind:"field",name:"allowFiles",static:!1,private:!1,access:{has:e=>"allowFiles"in e,get:e=>e.allowFiles,set:(e,t)=>{e.allowFiles=t}},metadata:Q},U,O),s(null,null,m,{kind:"field",name:"showTyping",static:!1,private:!1,access:{has:e=>"showTyping"in e,get:e=>e.showTyping,set:(e,t)=>{e.showTyping=t}},metadata:Q},L,V),s(null,null,d,{kind:"field",name:"showAvatars",static:!1,private:!1,access:{has:e=>"showAvatars"in e,get:e=>e.showAvatars,set:(e,t)=>{e.showAvatars=t}},metadata:Q},K,Y),s(null,null,p,{kind:"field",name:"showTimestamps",static:!1,private:!1,access:{has:e=>"showTimestamps"in e,get:e=>e.showTimestamps,set:(e,t)=>{e.showTimestamps=t}},metadata:Q},P,q),s(null,null,h,{kind:"field",name:"messagesArea",static:!1,private:!1,access:{has:e=>"messagesArea"in e,get:e=>e.messagesArea,set:(e,t)=>{e.messagesArea=t}},metadata:Q},N,W),s(null,null,g,{kind:"field",name:"inputField",static:!1,private:!1,access:{has:e=>"inputField"in e,get:e=>e.inputField,set:(e,t)=>{e.inputField=t}},metadata:Q},G,J),s(null,e={value:a},M,{kind:"class",name:a.name,metadata:Q},null,S),a=e.value,Q&&Object.defineProperty(a,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:Q}),i(a,S)}styles(){return t.css`${":host{display:flex;flex-direction:column;height:var(--snice-chat-height,37.5rem);font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-font-size-md, 1rem);line-height:1.5;color:var(--snice-color-text,rgb(23 23 23));background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);overflow:hidden;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1))}.chat-container{display:flex;flex-direction:column;height:100%}.messages-area{flex:1;overflow-y:auto;padding:var(--snice-spacing-md,1rem);display:flex;flex-direction:column;gap:var(--snice-spacing-sm,.75rem)}.messages-area::-webkit-scrollbar{width:8px}.messages-area::-webkit-scrollbar-track{background:0 0}.messages-area::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem)}.messages-area::-webkit-scrollbar-thumb:hover{background:var(--snice-color-text-secondary,rgb(82 82 82))}.message{display:flex;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-2xs,.25rem) 0;position:relative}.message:hover .message-actions{opacity:1}.message-avatar{width:2.25rem;height:2.25rem;border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-weight:var(--snice-font-weight-semibold,600);font-size:var(--snice-font-size-sm, .875rem);flex-shrink:0}.message-avatar img{width:100%;height:100%;border-radius:var(--snice-border-radius-md,.25rem);object-fit:cover}.message-content{flex:1;min-width:0}.message-header{font-family:var(--snice-font-family-display);display:flex;align-items:baseline;gap:var(--snice-spacing-xs,.5rem);margin-bottom:var(--snice-spacing-3xs,.125rem)}.message-author{font-weight:var(--snice-font-weight-bold,700);color:var(--snice-color-text,rgb(23 23 23))}.message-timestamp{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.message-edited{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.message-text{word-wrap:break-word;white-space:pre-wrap;color:var(--snice-color-text,rgb(23 23 23))}.message.system{justify-content:center}.message.system .message-text{text-align:center;color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem);font-style:italic}.message-attachment{margin-top:var(--snice-spacing-xs,.5rem);border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);overflow:hidden;max-width:25rem}.message-attachment img{max-width:100%;display:block}.attachment-file{display:flex;align-items:center;gap:var(--snice-spacing-sm,.75rem);padding:var(--snice-spacing-sm,.75rem);background:var(--snice-color-surface-container-low,rgb(250 250 250))}.attachment-icon{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--snice-color-surface,rgb(255 255 255));border-radius:var(--snice-border-radius-md,.25rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.attachment-info{flex:1;min-width:0}.attachment-name{font-weight:var(--snice-font-weight-medium,500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-size{font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.message-reactions{display:flex;gap:var(--snice-spacing-2xs,.25rem);margin-top:var(--snice-spacing-2xs,.25rem);flex-wrap:wrap}.reaction{display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);background:var(--snice-color-surface-container-low,rgb(250 250 250));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:12px;font-size:var(--snice-font-size-sm, .875rem);cursor:pointer;transition:all var(--snice-transition-fast, 150ms)}.reaction:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.reaction.active{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.reaction-emoji{font-size:var(--snice-font-size-sm, .875rem)}.reaction-count{font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-medium,500)}.message-actions{position:absolute;top:-.75rem;right:var(--snice-spacing-md,1rem);background:var(--snice-color-surface-container-high,rgb(252 251 249));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1));display:flex;gap:var(--snice-spacing-3xs,.125rem);opacity:0;transition:opacity var(--snice-transition-fast, 150ms);padding:var(--snice-spacing-3xs,.125rem)}.action-button{width:1.75rem;height:1.75rem;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));transition:background var(--snice-transition-fast, 150ms)}.action-button:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.action-button svg{width:1rem;height:1rem}.typing-indicators{padding:0 var(--snice-spacing-md,1rem) var(--snice-spacing-xs,.5rem);min-height:1.5rem}.typing-indicator{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));font-style:italic}.typing-dots{display:flex;gap:.1875rem}.typing-dot{width:6px;height:6px;background:var(--snice-color-text-secondary,rgb(82 82 82));border-radius:50%;animation:1.4s ease-in-out infinite typing-bounce}.typing-dot:first-child{animation-delay:0s}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,100%,60%{transform:translateY(0)}30%{transform:translateY(-4px)}}.input-area{border-top:1px solid var(--snice-color-border,rgb(226 226 226));padding:var(--snice-spacing-md,1rem);background:var(--snice-color-surface-container-high,rgb(252 251 249))}.input-container{display:flex;align-items:flex-end;gap:var(--snice-spacing-xs,.5rem);background:var(--snice-color-surface-container-lowest,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);padding:var(--snice-spacing-xs,.5rem);transition:border-color var(--snice-transition-fast, 150ms)}.input-container:focus-within{border-color:var(--snice-color-primary,rgb(37 99 235))}.input-field{flex:1;border:none;outline:0;resize:none;font-family:inherit;font-size:var(--snice-font-size-md, 1rem);line-height:1.5;min-height:1.375rem;max-height:9.375rem;overflow-y:auto;background:0 0;color:var(--snice-color-text,rgb(23 23 23))}.input-field::placeholder{color:var(--snice-color-text-secondary,rgb(82 82 82))}.input-field::-webkit-scrollbar{width:4px}.input-field::-webkit-scrollbar-thumb{background:var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-sm,.125rem)}.input-buttons{display:flex;gap:var(--snice-spacing-2xs,.25rem)}.input-button{width:2rem;height:2rem;border:none;background:0 0;cursor:pointer;border-radius:var(--snice-border-radius-md,.25rem);display:flex;align-items:center;justify-content:center;color:var(--snice-color-text-secondary,rgb(82 82 82));transition:background var(--snice-transition-fast, 150ms)}.input-button:hover{background:var(--snice-color-surface-hover,rgb(242 242 242))}.input-button:disabled{opacity:.5;cursor:not-allowed}.input-button.send{color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235))}.input-button.send:hover:not(:disabled){background:var(--snice-color-primary-hover,rgb(29 78 216))}.input-button svg{width:1.125rem;height:1.125rem}input[type=file]{display:none}"}`}init(){this.addEventListener("keydown",this.handleKeyDown)}cleanup(){this.removeEventListener("keydown",this.handleKeyDown),this.typingTimeout&&clearTimeout(this.typingTimeout)}messagesChanged(){setTimeout(()=>this.scrollToBottom(),0)}emitMessageSend(e,t){return{message:e,attachments:t}}emitMessageEdit(e,t){return{messageId:e,newContent:t}}emitMessageDelete(e){return{messageId:e}}emitMessageReact(e,t){return{messageId:e,emoji:t}}emitMessageThread(e){return{messageId:e}}emitTypingStart(){return{}}emitTypingStop(){return{}}addMessage(e){const t={...e,id:`msg_${Date.now()}_${Math.random().toString(36).substring(2,9)}`};this.messages=[...this.messages,t]}updateMessage(e,t){this.messages=this.messages.map(s=>s.id===e?{...s,...t}:s)}deleteMessage(e){this.messages=this.messages.filter(t=>t.id!==e)}addTypingIndicator(e){this.typingIndicators.set(e,{user:e,timestamp:new Date})}removeTypingIndicator(e){this.typingIndicators.delete(e)}clear(){this.messages=[]}scrollToBottom(){this.messagesArea&&(this.messagesArea.scrollTop=this.messagesArea.scrollHeight)}scrollToMessage(e){const t=this.shadowRoot?.querySelector(`[data-message-id="${e}"]`);t&&t.scrollIntoView({behavior:"smooth",block:"center"})}handleInput(){this.typingTimeout||this.emitTypingStart(),this.typingTimeout&&clearTimeout(this.typingTimeout),this.typingTimeout=window.setTimeout(()=>{this.emitTypingStop(),this.typingTimeout=null},1e3)}sendMessage(){const e=this.inputField.value.trim();e&&(this.emitMessageSend(e),this.inputField.value="",this.adjustTextareaHeight(),this.typingTimeout&&(clearTimeout(this.typingTimeout),this.typingTimeout=null),this.emitTypingStop())}handleFileClick(){this.fileInput||(this.fileInput=document.createElement("input"),this.fileInput.type="file",this.fileInput.multiple=!0,this.fileInput.addEventListener("change",()=>this.handleFileSelect())),this.fileInput.click()}handleFileSelect(){if(!this.fileInput?.files||0===this.fileInput.files.length)return;const e=Array.from(this.fileInput.files);this.emitMessageSend("",e),this.fileInput.value=""}adjustTextareaHeight(){this.inputField&&(this.inputField.style.height="auto",this.inputField.style.height=`${Math.min(this.inputField.scrollHeight,150)}px`)}handleReaction(e,t){this.emitMessageReact(e,t)}handleEdit(e){const t=this.messages.find(t=>t.id===e);if(!t)return;const s=prompt("Edit message:",t.content);s&&s!==t.content&&this.emitMessageEdit(e,s)}handleDelete(e){confirm("Delete this message?")&&this.emitMessageDelete(e)}handleThread(e){this.emitMessageThread(e)}render(){return t.html`
       <div part="base" class="chat-container">
         <div part="messages" class="messages-area">
           ${0===this.messages.length?this.renderEmptyState():this.messages.map(e=>this.renderMessage(e))}