@talkjs/web-components 0.0.29 → 0.0.30

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/README.md CHANGED
@@ -35,7 +35,7 @@ Then add the `Chatbox` component:
35
35
 
36
36
  Replace the `<APP_ID>` with your TalkJS app ID, which you can find in the **Settings** tab of the TalkJS dashboard.
37
37
 
38
- For more details, see our framework-specific guides: [Vue](https://talkjs.com/docs/SDKs/Vue/), [Angular](https://talkjs.com/docs/SDKs/Angular/), [Svelte](https://talkjs.com/docs/SDKs/Svelte/).
38
+ For more details, see our framework-specific guides: [Vue](https://talkjs.com/docs/UI_Components/Vue/), [Angular](https://talkjs.com/docs/UI_Components/Angular/), [Svelte](https://talkjs.com/docs/UI_Components/Svelte/).
39
39
 
40
40
  ## Support
41
41
 
package/default.css CHANGED
@@ -1 +1 @@
1
- @import"https://cdn.talkjs.com/fonts/Inter.css";.t-audio-player{width:100%;height:auto;display:flex;flex-direction:row;align-items:center;column-gap:10px;padding:1.5em 1em 0}.t-audio-player .t-waveform{flex-grow:1;z-index:0}.t-audio-player button{background:transparent;border:none;color:inherit;padding:0;cursor:pointer}.t-audio-player .t-playback-speed{width:4em}.t-audio-player .t-play-pause-icon{width:30px;height:30px}.t-audio-player .t-up-down-icon{width:1em;height:1em}.t-audio-player .t-up-down svg{margin-top:-2px}.t-audio-player .t-playback-heading{opacity:.5;padding:.5em 1em}.t-audio-player .t-playback-checkmark{display:inline-block;width:1em;margin-right:.5em}.t-audio-player .t-playback-speed-menu{display:flex;flex-direction:column;background-color:#fff;color:#111;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:0 8px 24px #73737333;padding:.35em}.t-audio-player .t-playback-speed-menu .t-menu-item{padding:.45em .65em;cursor:pointer;background:none;border:none;border-radius:.5em;text-align:left}.t-audio-player .t-playback-speed-menu .t-menu-item:hover{background-color:#007df9;color:#fff}:is(.t-text-input .empty-node):before{position:absolute;color:currentColor;cursor:text;opacity:.6}:is(.t-text-input .empty-node):first-child:before{content:attr(data-placeholder)}.t-editor .ProseMirror{position:relative}.t-editor .ProseMirror{word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:"liga" 0}.t-editor .ProseMirror pre{white-space:pre-wrap}.t-editor .ProseMirror li{position:relative}.t-editor .ProseMirror-hideselection *::selection{background:transparent}.t-editor .ProseMirror-hideselection *::-moz-selection{background:transparent}.t-editor .ProseMirror-hideselection{caret-color:transparent}.t-editor .ProseMirror [draggable][contenteditable=false]{user-select:text}.t-editor .ProseMirror-selectednode{outline:2px solid #8cf}.t-editor li.ProseMirror-selectednode{outline:none}.t-editor li.ProseMirror-selectednode:after{content:"";position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none}.t-editor img.ProseMirror-separator{display:inline!important;border:none!important;margin:0!important}.t-emoji-picker{width:100%;height:100%;overflow:hidden;flex-shrink:1}.t-emoji-picker emoji-picker{width:100%;border:0;height:100%;--border-size: 0;--num-columns: 10;--emoji-size: 21px;--category-emoji-size: 14px;--indicator-height: 2px;--outline-color: rgba(30, 96, 225, .5);--input-padding: 7px 11.5px;--button-active-background: #d4d4d4;--input-border-color: #d4d4d4;--input-focused-border-color: #b0b0b0;--indicator-color: #007df9;--button-hover-background: #d4d4d488;--input-border-radius: 4px;--input-font-size: inherit;--emoji-font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "Twemoji Mozilla", sans-serif}.t-emoji-picker[t-loading]{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007df9}.t-emoji-picker[t-loading] .t-loading-icon,.t-loading-icon{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}.t-emoji-suggest-bar{will-change:transform;transform:translateY(100%);transition:transform .1s ease-out}.t-emoji-suggest-bar.slide-enter{transform:translateY(100%)}.t-emoji-suggest-bar.slide-enter-active,.t-emoji-suggest-bar.slide-enter-done,.t-emoji-suggest-bar.slide-exit{transform:translateY(0)}.t-emoji-suggest-bar.slide-exit-active,.t-emoji-suggest-bar.slide-exit-done{transform:translateY(100%)}.t-emoji-suggest-bar{scrollbar-color:rgba(0,0,0,.2) transparent;scrollbar-width:thin;overflow-y:hidden}.t-emoji-suggest-bar:hover{scrollbar-color:rgba(0,0,0,.4) transparent}.t-emoji-suggest-bar:active{scrollbar-color:rgba(0,0,0,.6) transparent}@media (prefers-reduced-motion: reduce){.t-emoji-suggest-bar{transition:none}}.t-message-list{width:100%;height:100%;display:flex;flex-direction:column-reverse;overflow-x:hidden;overflow-y:auto;padding:16px;scrollbar-color:rgba(0,0,0,.2) transparent}.t-message-list:hover{scrollbar-color:rgba(0,0,0,.4) transparent}.t-message-list:active{scrollbar-color:rgba(0,0,0,.6) transparent}.t-message-group{display:flex;flex-direction:column-reverse}:is(.t-chatbox,.t-conversation-list,t-chatbox,t-conversation-list) .t-panel{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;text-align:center;padding:25px;-webkit-font-smoothing:subpixel-antialiased;overflow-x:hidden;font-size:.95em;font-family:Open Sans,Helvetica,sans-serif}:is(.t-chatbox,.t-conversation-list,t-chatbox,t-conversation-list) .t-error-panel{background-color:#f7f7f7}:is(:is(.t-chatbox,.t-conversation-list,t-chatbox,t-conversation-list) .t-error-panel) .t-heading{font-size:2em}.t-attach-overlay{z-index:2;width:100%;height:100%;padding:16px;background-color:#64646480;display:flex;justify-content:center;align-items:center}.t-upload-preview .t-preview{position:relative;background-color:#fff;border-radius:1rem;max-width:750px;width:100%;display:inline-block;overflow:auto;padding:.5rem}@media screen and (max-width: 500px){.t-upload-preview .t-preview{width:85%}}:is(.t-upload-preview .t-preview) .t-img-container{text-align:center;background-color:#0000001a}:is(.t-upload-preview .t-preview) img{display:block;max-width:100%;max-height:400px;margin-left:auto;margin-right:auto}:is(.t-upload-preview .t-preview) video{width:100%;height:100%;object-fit:fill}:is(.t-upload-preview .t-preview) .t-location-upload-preview{width:100%;background-color:#0000001a;padding-bottom:calc((400 / 600) * 100%);display:block}.t-upload-preview .t-cancel-row{text-align:right;position:sticky;top:8px;padding-right:8px;z-index:2;margin-bottom:-38px}.t-upload-preview .t-filename-row{white-space:pre-wrap;word-break:break-all;padding:.5rem 1rem 0}.t-is-file:is(.t-upload-preview .t-filename-row){display:flex;justify-content:center;align-items:center;min-height:250px;padding-top:32px;padding-bottom:32px;text-align:center;background-color:#0000001a;border-radius:1rem;margin-bottom:1rem}:is(.t-upload-preview .t-filename-row) .t-file-block{background-color:#fff;padding:16px 32px;border-radius:8px;display:inline-block}.t-upload-preview .t-error-row{border-width:.125rem;border-radius:1rem;padding:1rem;background-color:#fec8c866;border-color:transparent;color:#ef4444;white-space:normal}.t-upload-preview .t-send-row{position:sticky;bottom:0;padding:1rem;display:flex;justify-content:space-between}.t-upload-preview .t-cancel{border:0;border-radius:.5rem;padding:.75rem 1rem;cursor:pointer;color:currentColor}.t-upload-preview .t-confirm-send{margin-left:auto;border:0;border-radius:.5rem;padding:.75rem 1rem;cursor:pointer}.t-upload-preview .t-loading{height:80px;width:100%;display:flex;align-items:center;justify-content:center;color:#007df9}.t-upload-preview .t-preview,.t-upload-preview .t-send-row{background:#fff}.t-upload-preview .t-confirm-send{background-color:#007df9;color:#fff}.t-chatbox-content{flex-direction:column;margin:0;position:relative;width:100%;height:100%;display:flex;overflow-y:hidden}.t-chatbox-content>.t-attach-overlay{position:absolute;width:100%;height:100%;top:0;left:0}.t-chatbox-content>.t-drop-overlay{pointer-events:none}:is(.t-chatbox-content>.t-drop-overlay) .t-theme-icon{color:#1e1e1e80;width:300px;height:300px}.t-conversation-list-scrollable{overflow-y:auto;height:100%}html:is(html):is(html):is(html):is(html):is(html) :where(.t-chatbox *:not(svg,svg *,.ProseMirror)){all:revert-layer}html:is(html):is(html):is(html):is(html):is(html) :where(.t-conversation-list *:not(svg,svg *)){all:revert-layer}html:is(html):is(html):is(html):is(html):is(html) :where(t-chatbox *:not(svg,svg *,.ProseMirror)){all:revert-layer}html:is(html):is(html):is(html):is(html):is(html) :where(t-conversation-list *:not(svg,svg *,.ProseMirror)){all:revert-layer}t-chatbox,t-conversation-list{display:block}t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list{font-family:Twemoji Country Flags,Inter,sans-serif;font-synthesis:initial;text-align:left;font-size:14px;font-weight:400;line-height:1.37;color:#111;letter-spacing:normal;margin:0;position:relative;background-color:#fff;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:none;box-sizing:border-box;overflow:hidden;max-height:100vh;max-height:100dvh;max-width:100vw;max-width:100dvw}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) button{font-family:inherit;font-size:1em}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) *,:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) *:before,:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) *:after{box-sizing:border-box}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) svg{fill:currentColor}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) em{font-style:italic}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) strong{font-weight:700}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) del{text-decoration:line-through}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) code{font-family:Cascadia Code,Droid Sans Mono,Menlo,Consolas,Lucida Console,Monaco,monospace;font-variant-ligatures:none}t-conversation-list,.t-conversation-list{width:300px;height:600px}t-chatbox,.t-chatbox{width:400px;height:600px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.t-theme-chat-header button[data-action]{border-radius:.375em;font-size:inherit;margin:1px;padding:.25em .325em;cursor:pointer;transition:color .2s ease-in-out,background-color .2s ease-in-out,border .2s ease-in-out;color:#111;background-color:transparent;border:1px solid #525252}.t-theme-chat-header button[data-action]:hover{color:#fff;background-color:#111;border:1px solid #111}.t-theme-chat-header button[data-action]:active{color:#fff;background-color:#404040;border:1px solid #404040}.t-theme-chat-header button[data-action]:focus-visible{outline:#525252 solid 2px;outline-offset:2px}.t-theme-chat-header{display:flex;align-items:center;height:4.5em;background-color:#ececec;border-bottom:1px solid #d4d4d4;flex-shrink:0}.t-theme-chat-header .t-inner{flex-grow:1;flex-basis:0;display:flex;align-items:center;padding-left:1em;padding-right:1em;min-width:0}.t-theme-chat-header .t-content{flex-grow:1;display:flex;align-items:center;min-width:0}.t-theme-chat-header .t-image{width:45px;text-align:center;margin-right:.75em;flex-shrink:0}.t-theme-chat-header .t-info{flex-grow:1;flex-basis:0;min-width:0}.t-theme-chat-header .t-title{font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:3px}.t-theme-chat-header .t-subtitle{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:85%;margin-left:4px}.t-theme-chat-header .t-user{display:inline-block;vertical-align:middle}.t-theme-chat-header .t-online-indicator{display:inline-block;width:.75em;height:.75em;border-radius:100%;margin:0 .75em -1px .275em}.t-theme-chat-header .t-online-indicator[t-status=online]{background-color:#22c55e}.t-theme-chat-header .t-online-indicator[t-status=offline]{background-color:#fff;-webkit-box-shadow:inset 0 0 0 1px rgba(50,50,50,.4);box-shadow:inset 0 0 0 1px #32323266}.t-theme-message{display:block;margin-top:.35em}.t-theme-message:last-child{margin-top:1.35em}.t-theme-message:not(:last-child) .t-message-sender-name{display:none}.t-theme-message:not(:last-child) .t-theme-avatar{visibility:hidden}.t-theme-message[t-sender=system]{margin-top:1.35em}.t-theme-message[t-sender=system]+.t-theme-message[t-sender=system]{margin-top:.5em}.t-theme-message:has(.t-reactions):has(+.t-theme-message){margin-bottom:.75em}.t-theme-message .t-message-row{display:flex;align-items:center;gap:.5em}.t-theme-message[t-sender=currentUser] .t-message-row{flex-direction:row-reverse}.t-theme-message .t-message-body{white-space:normal;overflow:hidden;border-radius:.75em;border-width:1px;border-style:solid;word-wrap:break-word;position:relative;display:inline-block;max-width:calc(100% - 6.5em);border-color:#ececec;background-color:#f7f7f7;color:#111;padding:.75em 1em}.t-theme-message .t-message-body .t-theme-referenced-message{border-left:solid 2px;margin-bottom:.4em;font-size:93%;padding:0 .55em}.t-theme-message[t-sender=currentUser] .t-message-body{border-color:#007df9;background-color:#007df9;color:#fff}.t-theme-message .t-message-body .t-message-content{display:contents;margin-top:.75em}.t-theme-message .t-message-body:has(.t-theme-audio-block,.t-theme-voice-block,.t-theme-location-block){width:100%}.t-theme-message .t-message-body:not(:has(.t-message-sender-name,.t-theme-referenced-message,.t-theme-text-block:first-child,.t-theme-file-block:first-child)){padding-top:0}.t-theme-message .t-message-body:not(:has(.t-theme-text-block:first-child,.t-theme-file-block:first-child)) .t-message-sender-name{margin-bottom:.75em}.t-theme-message button[data-action]{border-radius:.375em;font-size:inherit;margin:1px 0;padding:.25em .325em;cursor:pointer;transition:color .2s ease-in-out,background-color .2s ease-in-out,border .2s ease-in-out}.t-theme-message[t-sender=currentUser] button[data-action]{color:#0761d1;background-color:#fff;border:1px solid white}.t-theme-message[t-sender=currentUser]:enabled button[data-action]:hover,.t-theme-message[t-sender=currentUser]:enabled button[data-action]:active{color:inherit;background-color:transparent}.t-theme-message[t-sender=currentUser] button[data-action]:focus-visible{outline:white solid 2px;outline-offset:2px}.t-theme-message[t-sender=other] button[data-action]{color:#111;background-color:transparent;border:1px solid #525252}.t-theme-message[t-sender=other]:enabled button[data-action]:hover{color:#fff;background-color:#111;border:1px solid #111}.t-theme-message[t-sender=other]:enabled button[data-action]:active{color:#fff;background-color:#404040;border:1px solid #404040}.t-theme-message[t-sender=other] button[data-action]:focus-visible{outline:#525252 solid 2px;outline-offset:2px}.t-theme-message[t-sender=system] button[data-action]{color:#fff;background-color:#007df9;border:1px solid #007df9}.t-theme-message[t-sender=system]:enabled button[data-action]:hover{color:#fff;background-color:#0761d1;border:1px solid #0761d1}.t-theme-message[t-sender=system]:enabled button[data-action]:active{color:#fff;background-color:#3291ff;border:1px solid #3291ff}.t-theme-message[t-sender=system] button[data-action]:focus-visible{outline:#007df9 solid 2px;outline-offset:2px}.t-theme-message button[data-action]:disabled{background-color:gray;border-color:gray}.t-theme-message .t-message-sender-name{font-size:75%;font-weight:700}.t-theme-message .t-reactions{margin-top:.25em;display:flex;flex-wrap:wrap;gap:.25em}.t-theme-message[t-sender=currentUser] .t-reactions{justify-content:flex-end;margin-right:.75em}.t-theme-message[t-sender=other] .t-reactions{margin-left:3.75em}.t-theme-message[t-sender=system] .t-message-body{background:transparent;width:100%;max-width:none;border:none}.t-theme-message[t-sender=system] .t-message-row{white-space:normal;border-radius:.75em;overflow:hidden;white-space:pre-wrap;background-color:transparent;color:#111;border:1px solid #d4d4d4}.t-theme-message .t-message-content a{color:currentColor}.t-theme-message .t-message-status{display:inline-flex;font-size:75%;float:right;margin-left:2em;margin-top:.6em;opacity:75%;min-width:3.5ch;text-align:right}.t-theme-message .t-message-loading-spinner{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;width:1em;height:1em}.t-theme-message .t-status-icon{margin-left:.25em;letter-spacing:-.3em;min-width:1em}.t-theme-message .t-message-row>button{border:none;width:36px;height:36px;padding:8px;border-radius:9999px;border:0;color:inherit;opacity:.75;cursor:pointer;font-size:120%;background:inherit}.t-theme-message .t-message-row>button:hover,.t-theme-message .t-message-row>button:focus{color:#0761d1}.t-theme-message .t-message-row>button:focus-visible{outline:0;box-shadow:0 0 0 2px #007df97f}@media (hover: hover){.t-theme-message .t-message-row>button{visibility:hidden}.t-theme-message .t-message-row:hover>button,.t-theme-message .t-message-row:focus-within>button{visibility:visible}}@media (hover: none){.t-theme-message .t-message-row>button{opacity:.0001%}.t-theme-message .t-message-row:hover>button,.t-theme-message .t-message-row:focus-within>button{opacity:100%}}.t-message-action-menu-button .t-action-menu-icon{width:1.143em;height:1.143em}.t-theme-message .t-emoji-reactions{margin-top:.25em;margin-bottom:.5em;display:flex;flex-wrap:wrap;gap:.25em}.t-theme-message[t-sender=currentUser] .t-emoji-reactions{justify-content:flex-end;margin-right:3.5em}.t-theme-message[t-sender=other] .t-emoji-reactions{margin-left:3.5em}.t-theme-message .t-reaction-button{border:1px solid transparent;margin:0;padding:.2em .55em;border-radius:8em;background-color:#e8ecee}.t-theme-message .t-reaction-button[t-active]{background:#1e60e1;border:1px solid transparent;color:#fff}.t-theme-message .t-reaction-button[t-active]:hover{background:#1e60e1;border:1px solid transparent}.t-theme-message .t-reaction-button span{display:inline-block;vertical-align:middle}.t-theme-message .t-reaction-button .t-emoji{font-size:1.25eem}.t-theme-message .t-reaction-button .t-num-reactions{padding-left:.25em;font-size:.85em}.t-theme-message .t-reaction-picker{width:300px;height:200px;margin:0 10px;border-radius:.75em;border:1px solid #d4d4d4;overflow:hidden}.t-theme-message .t-mention{line-height:1.5;color:inherit;margin:0;border-radius:9999px;padding:.25rem .45rem}.t-theme-message .t-mention[t-is-current-user]{font-weight:700}.t-theme-message[t-sender=currentUser] .t-mention{background-color:#fff3}.t-theme-message[t-sender=currentUser] .t-mention[t-is-current-user]{background-color:#fff6}.t-theme-message[t-sender=other] .t-mention{background-color:#dcdcdc80}.t-theme-message[t-sender=other] .t-mention[t-is-current-user]{background-color:#dcdcdce6}.t-theme-message-action-menu{display:flex;flex-direction:column;background-color:#fff;color:#111;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:0 8px 24px #73737333;padding:.35em}.t-theme-message-action-menu .t-menu-item{padding:.45em .65em;cursor:pointer;background:none;border:none;border-radius:.5em;text-align:left}.t-theme-message-action-menu .t-menu-item:hover{background-color:#007df9;color:#fff}.t-theme-message-action-menu .t-menu-item.t-danger{color:#ef4444}.t-theme-message-action-menu .t-menu-item.t-danger:hover{background-color:#fec8c866;color:#ef4444}.t-theme-message-field{display:flex;flex-direction:column}.t-theme-message-field[t-mode=send]{max-height:calc(100% - 100px)}.t-theme-message-field[t-mode=edit]{margin:.75em 0}.t-theme-message-field .t-wrapper{flex-shrink:0;position:relative;padding:16px;color:#111;font-size:16px;background-color:#ececec;border-top:#d4d4d4 solid 1px;max-width:100%;width:100%;margin:0 auto;z-index:2}.t-theme-message-field[t-mode=edit] .t-wrapper{border:#d4d4d4 solid 1px;border-radius:.75em}.t-theme-message-field .t-emoji-suggest-bar{width:100%;padding:.5rem;display:flex;overflow:auto hidden;height:60px;margin-top:-60px;flex-shrink:0;align-items:center;background-color:#ececec;border-top:#d4d4d4 solid 1px;z-index:1}.t-theme-message-field .t-emoji-suggest-bar button{display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;font-size:1.375rem;width:2.375rem;height:2.375rem;padding:0 5px;border-radius:.5rem}.t-theme-message-field .t-emoji-suggest-bar button[t-focused]{background-color:#d4d4d4}.t-theme-message-field[t-mode=edit] .t-emoji-suggest-bar{border:#d4d4d4 solid 1px;border-radius:.75em .75em 0 0}.t-theme-message-field[t-mode=edit]:has(.t-emoji-suggest-bar) .t-wrapper{border-radius:0 0 .75em .75em;border-top:none}.t-theme-message-field .t-mention-suggest-list{width:auto;max-width:100%;max-height:150px;display:flex;flex-direction:column;overflow-x:auto;background-color:#fff;color:#111;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:0 8px 24px #73737333;padding:.5em}.t-theme-message-field .t-mention-suggest-list button{display:flex;align-items:center;border:none;background:none;cursor:pointer;border-radius:4px;white-space:nowrap;width:100%;height:2rem;min-height:2rem;padding:0 .25rem;color:#111}.t-theme-message-field .t-mention-suggest-list button:hover,.t-theme-message-field .t-mention-suggest-list button.focused{background-color:#007df9;color:#fff}.t-theme-message-field .t-edit-row{display:flex;gap:.5em;margin-left:auto}.t-theme-message-field .t-edit-row button{display:inline-block;padding:.5rem 1rem;border:0;border-radius:.5rem;cursor:pointer;background-color:#1111111a;color:#111}.t-theme-message-field .t-edit-row button[t-action=save]{background-color:#007df9;color:#fff}.t-theme-message-field .t-text-form{width:100%;max-width:100%;margin:0 auto;display:flex}.t-theme-message-field[t-mode=edit] .t-text-form{flex-direction:column;gap:.5em}.t-theme-message-field .t-editor .t-text-input{min-height:3.143em;max-height:9em;border-radius:.65em;border:1px solid white;background-color:#fff;display:block;resize:none;overflow-x:hidden;overflow-y:auto;word-break:break-word;white-space:pre-wrap;padding:0 44px 0 1em;transition:box-shadow .15s ease-out}.t-theme-message-field .t-editor .t-text-input:focus-visible{border-color:#fff;outline:#a3a3a3 solid 1px}.t-theme-message-field .t-editor .t-text-input p{margin:.875em 0;padding:0;border:0;outline:0}.t-theme-message-field .t-editor .t-mention{color:#007df9}.t-theme-message-field .t-send-column{flex-grow:0;flex-shrink:0;white-space:nowrap;align-self:center;display:flex}.t-theme-message-field .t-textbox-column{position:relative;flex-grow:1;margin-right:.28em}.t-theme-message-field .t-send-button{width:2.571em;height:2.571em;padding:.571em;border:0;border-radius:9999px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;background:transparent;color:currentColor;opacity:.75;transition:.15s ease-out}.t-theme-message-field .t-send-button:hover,.t-theme-message-field .t-send-button:focus{background-color:#2626260d}.t-theme-message-field .t-send-button:focus-visible{outline:0;box-shadow:0 0 0 2px #007df97f}.t-theme-message-field .t-send-button{display:flex}.t-theme-message-field .t-send-button[disabled]{color:currentColor}.t-theme-message-field .t-text-limit-indicator{opacity:.5;font-size:75%;margin:-.75em 0 .5em 2px}.t-theme-message-field .t-readonly{opacity:.5;user-select:none}.t-theme-message-field .t-button-overlay{position:absolute;right:0;top:0;bottom:0;margin-right:8px;display:flex;align-items:center}.t-theme-message-field [t-kind=icon-button]{width:36px;height:36px;padding:8px;border:0;border-radius:9999px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;background:transparent;color:currentColor;opacity:.75;transition:.15s ease-out}.t-theme-message-field [t-kind=icon-button]:hover,.t-theme-message-field [t-kind=icon-button]:focus{background-color:#2626260d;color:#007df9;opacity:1}.t-theme-message-field [t-kind=icon-button]:focus-visible{outline:0;box-shadow:0 0 0 2px #007df97f}.t-theme-message-field .t-edit-row button[t-action=save]:disabled{cursor:initial;background-color:#888;color:#fff}.t-theme-message-field .t-emoji-picker-wrapper{width:100%;height:350px;overflow:hidden;flex-shrink:1;border-top:1px solid #d4d4d4}.t-theme-icon{display:inline-block;vertical-align:middle;overflow:hidden}.t-message-divider{width:100%;margin:1.3em .5em 0;display:grid;grid-template-columns:1fr max-content 1fr;color:#95a7b1}.t-message-divider span{vertical-align:top;white-space:nowrap;height:1.3em;padding:0 20px}.t-message-divider .t-line[t-side=right]{display:grid;grid-template-columns:1fr max-content;gap:10px;grid-column:3}.t-message-divider .t-line .t-line-segment{height:0;width:100%;margin-top:10px;border:none;border-bottom:1px solid #95a7b1}.t-message-divider .t-line .t-unread-marker{position:relative;top:-4px;height:28px;padding:3px 10px;border-radius:100px;border:1px solid #95a7b1;vertical-align:middle}.t-theme-message-list-footer{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.5em;margin-top:1.35em}.t-theme-message-list-footer .t-typing-avatars{display:flex;flex-direction:row;align-items:left;justify-content:center;width:fit-content}.t-theme-message-list-footer .t-typing-avatars>.t-theme-avatar{width:2.6em;height:2.6em;display:flex;align-items:center;justify-content:center;color:#111;line-height:2.6em;vertical-align:text-top;font-size:.75em}.t-theme-message-list-footer .t-typing-avatars>.t-theme-avatar:not(:last-child){margin-right:-.66em}.t-theme-message-list-footer .t-typing-bubble{display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:1em;background-color:#f7f7f7;border:1px solid #ececec;color:#111;padding:0 1em;font-size:.75em}.t-theme-message-list-footer .t-typing-animation{display:flex;flex-direction:row;align-items:center;gap:4px;height:2.6em;line-height:2.6em}.t-theme-message-list-footer .t-typing-animation span{height:6px;width:6px;background-color:#737373;display:inline-block;border-radius:50%;opacity:.4}.t-theme-message-list-footer .t-typing-animation span:nth-of-type(1){animation:1s blink infinite .3333s}.t-theme-message-list-footer .t-typing-animation span:nth-of-type(2){animation:1s blink infinite .6666s}.t-theme-message-list-footer .t-typing-animation span:nth-of-type(3){animation:1s blink infinite .9999s}@keyframes blink{50%{opacity:1}}.t-theme-audio-block{display:contents;width:100%;min-width:25ch}.t-theme-audio-block .t-audio-player{margin-bottom:.5em}.t-theme-audio-block .t-attachment-icon{width:1em;height:1em;margin-right:.2em}.t-theme-audio-block .t-filesize{font-size:.8em}.t-theme-file-block{display:contents}.t-theme-file-block a{word-break:break-all;text-decoration:none}.t-theme-file-block .t-filename{text-decoration:underline}.t-theme-file-block .t-attachment-icon{width:1em;height:1em;margin-right:.2em}.t-theme-file-block .t-filesize{white-space:nowrap;font-size:75%}.t-theme-file-block .t-loading-spinner{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}.t-theme-image-block{display:contents}.t-theme-image-block .download-icon{width:1em;height:1em;margin-right:.2em}.t-image-wrapper{display:block;height:auto;min-height:40px;max-height:400px}.t-theme-image-block .t-root{display:flex;justify-content:center;align-items:center;min-height:inherit;max-height:inherit;height:auto;max-width:min(calc(100% + 2em),calc(var(--img-w) * 1px));width:calc(100% + 2em);transform:translate(-1em);aspect-ratio:var(--img-w) / var(--img-h);overflow:hidden;margin:0 auto .5em}.t-theme-image-block .t-image{width:100%;height:100%;max-width:calc(var(--img-w) * 1px);max-height:calc(var(--img-h) * 1px);object-fit:contain}.t-theme-image-block .t-filesize{font-size:.8em}.t-theme-location-block{display:contents;min-height:100px;max-height:500px}.t-theme-location-block .t-root{display:block;height:200px;margin:0 -1em .5em}.t-theme-text-block{display:contents}.t-theme-text-block .t-text .t-emoji{height:1.15em;width:1.15em;margin:0 .1em .1em;vertical-align:middle}.t-theme-text-block .t-text{white-space:pre-wrap}.t-theme-text-block ul{padding-left:0;margin:0}.t-theme-text-block ul li{margin-left:1em;margin-bottom:.5em}.t-theme-video-block{display:contents}.t-theme-video-block .download-icon{width:1em;height:1em;margin-right:.2em}.t-video-wrapper{display:block;height:auto;min-height:40px;max-height:400px}.t-theme-video-block .t-root{display:flex;justify-content:center;align-items:center;min-height:inherit;max-height:inherit;height:auto;max-width:min(calc(100% + 2em),calc(var(--video-w) * 1px));width:calc(100% + 2em);transform:translate(-1em);aspect-ratio:var(--video-w) / var(--video-h);overflow:hidden;margin:0 auto .5em}.t-theme-video-block .t-video{width:100%;height:100%;max-width:calc(var(--video-w) * 1px);max-height:calc(var(--video-h) * 1px);object-fit:contain;background-color:#000000d9}.t-theme-video-block .t-filesize{font-size:.8em}.t-theme-conversation-list-item{color:#525252;text-decoration:none;width:100%;padding:0;height:auto;padding:1rem;border:none;border-bottom:1px solid #d4d4d4;background-color:transparent;overflow:hidden;display:flex;align-items:center;gap:.5rem;word-wrap:break-word;transition:color .1s ease-in-out,background-color .1s ease-in-out;background-color:#fff;text-align:initial}.t-theme-conversation-list-item a{color:#525252}.t-theme-conversation-list-item[t-selected] a{color:#fff}.t-theme-conversation-list-item:last-child{margin-bottom:10px}.t-theme-conversation-list-item:hover{background-color:#f7f7f7;cursor:pointer}.t-theme-conversation-list-item[t-selected]{color:#fff;background-color:#007df9}.t-theme-conversation-list-item[t-selected]:focus-visible{outline:#fff 2px solid;outline-offset:-4px;border-bottom:0}.t-theme-conversation-list-item:focus-visible{outline:#3291ff 2px solid;outline-offset:-2px}.t-theme-conversation-list-item[t-unread]{background-color:#f7f7f7;color:#111}.t-theme-conversation-list-item[t-selected][t-unread]{color:#fff;background-color:#007df9}.t-theme-conversation-list-item .t-inner{margin-left:10px;flex-basis:0;flex-grow:1;min-width:0}.t-theme-conversation-list-item .t-header,.t-theme-conversation-list-item .t-body{display:flex;align-items:center;flex-grow:1;flex-shrink:0;min-width:0;overflow:hidden}.t-theme-conversation-list-item .t-message-sender{margin-right:.2rem}.t-theme-conversation-list-item .t-timestamp{font-size:85%;opacity:.75}.t-theme-conversation-list-item .t-timestamp,.t-theme-conversation-list-item .t-unread-dot{flex-shrink:0;margin-left:4px}.t-theme-conversation-list-item .t-conversation-name{font-weight:600}.t-theme-conversation-list-item .t-conversation-name,.t-theme-conversation-list-item .t-message{flex-grow:1;font-size:85%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-theme-conversation-list-item .t-message{opacity:.75;flex-basis:0}.t-theme-conversation-list-item .t-unread-dot{display:flex;align-items:center;justify-content:center;padding:0 .4rem;border-radius:9999px;height:20px;width:auto;min-width:20px;text-align:center;line-height:inherit;font-size:85%;color:#fff;background-color:#007df9}.t-theme-conversation-list-item .t-unread-generic-dot{padding:.6ex;transform:scale(.999);border-radius:999px;background-color:#007df9}.t-theme-conversation-list-item[t-selected] .t-unread-generic-dot{padding:.6ex;transform:scale(.999);border-radius:999px;background-color:#fff}.t-theme-conversation-list-item[t-selected] .t-unread-dot{color:#007df9;background-color:#fff}.t-theme-conversation-list-item .t-unread-dot:empty{padding:0;min-width:10px;min-height:10px}.t-theme-conversation-list-item .t-message li{display:inline list-item;margin-right:.25rem}.t-theme-conversation-list-item .t-message ul{list-style:inside}.t-theme-avatar{display:block;overflow:hidden;background-color:#ececec;background-size:cover;background-repeat:no-repeat;background-position:center center;border-style:solid;border-radius:50%;border-width:2px;border-color:#fff;flex-shrink:0;align-self:flex-start;width:3em;height:3em}.t-theme-group-chat-image{display:block;overflow:hidden;position:relative;width:44px;height:44px;flex-shrink:0}.t-theme-group-chat-image .t-mini-avatar{border-radius:50%;border-width:2px;border-color:#fff;border-style:solid;box-shadow:0 1px 1px #8899a626;width:30px;height:30px;position:absolute;background-color:#f7f7f7;background-position:center;background-size:cover}.t-theme-group-chat-image .t-mini-avatar:nth-child(1){right:0;top:14px}.t-theme-group-chat-image .t-mini-avatar:nth-child(2){left:0;top:0}.t-theme-group-chat-image .t-counter{border-radius:50%;border:2px solid #fff;font-weight:600;position:absolute;min-width:18px;min-height:18px;max-width:22px;max-height:22px;left:0;bottom:0;display:flex;justify-content:center;align-items:center;color:#111;padding:0}.t-theme-group-chat-image .t-group{border-style:none;color:#ececec}.t-theme-referenced-message{display:flex;flex-direction:column}.t-theme-referenced-message .t-sender-name{font-weight:600;margin-bottom:2px}.t-theme-referenced-message .t-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:.165em 0}.t-theme-referenced-message .t-content a{color:currentColor}.t-theme-reply-bar{height:4.286em;display:flex;align-items:center;background-color:#ececec;padding:.714em;color:#262626;border-top:#d4d4d4 solid 1px}.t-theme-reply-bar .t-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:.165rem 0px}.t-theme-reply-bar .t-close-button{width:2.571em;height:2.571em;padding:.571em;border:0;border-radius:9999px;cursor:pointer;display:inline-flex;align-items:center;background:transparent;opacity:.75;transition:.15s ease-out}.t-theme-reply-bar .t-close-button:hover{background-color:#2626260d;color:#007df9;opacity:1}.t-theme-reply-bar .t-body{flex-grow:1;padding:0 1em;overflow:hidden}.t-theme-reply-bar .t-close-icon,.t-theme-reply-bar .t-reply-icon{width:1.428em;height:1.428em;min-width:1.428em;min-height:1.428em}.t-theme-reply-bar .t-mention{line-height:1.5;background-color:#c8c8c880;color:inherit;margin:0;border-radius:9999px;padding:.25rem .45rem}.t-theme-reply-bar .t-mention[t-is-current-user]{font-weight:700;background-color:#c8c8c8e6}.t-theme-compact-message-content>.t-theme-icon{width:1.25em;height:1.25em;margin-right:.25em}.t-theme-compact-message-content .t-text ul{list-style:inside;margin:0 0 0 .5em;padding:0;display:inline}.t-theme-compact-message-content .t-text li{display:inline list-item;margin-right:1em}.t-theme-compact-message-content .t-text li::marker{content:"• "}
1
+ @import"https://cdn.talkjs.com/fonts/Inter.css";.t-audio-player{width:100%;height:auto;display:flex;flex-direction:row;align-items:center;column-gap:10px;padding:1.5em 1em 0}.t-audio-player .t-waveform{flex-grow:1;z-index:0}.t-audio-player button{background:transparent;border:none;color:inherit;padding:0;cursor:pointer}.t-audio-player .t-playback-speed{width:4em}.t-audio-player .t-play-pause-icon{width:30px;height:30px}.t-audio-player .t-up-down-icon{width:1em;height:1em}.t-audio-player .t-up-down svg{margin-top:-2px}.t-audio-player .t-playback-heading{opacity:.5;padding:.5em 1em}.t-audio-player .t-playback-checkmark{display:inline-block;width:1em;margin-right:.5em}.t-audio-player .t-playback-speed-menu{display:flex;flex-direction:column;background-color:#fff;color:#111;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:0 8px 24px #73737333;padding:.35em}.t-audio-player .t-playback-speed-menu .t-menu-item{padding:.45em .65em;cursor:pointer;background:none;border:none;border-radius:.5em;text-align:left}.t-audio-player .t-playback-speed-menu .t-menu-item:hover{background-color:#007df9;color:#fff}:is(.t-text-input .empty-node):before{position:absolute;color:currentColor;cursor:text;opacity:.6}:is(.t-text-input .empty-node):first-child:before{content:attr(data-placeholder)}.t-editor .ProseMirror{position:relative}.t-editor .ProseMirror{word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:"liga" 0}.t-editor .ProseMirror pre{white-space:pre-wrap}.t-editor .ProseMirror li{position:relative}.t-editor .ProseMirror-hideselection *::selection{background:transparent}.t-editor .ProseMirror-hideselection *::-moz-selection{background:transparent}.t-editor .ProseMirror-hideselection{caret-color:transparent}.t-editor .ProseMirror [draggable][contenteditable=false]{user-select:text}.t-editor .ProseMirror-selectednode{outline:2px solid #8cf}.t-editor li.ProseMirror-selectednode{outline:none}.t-editor li.ProseMirror-selectednode:after{content:"";position:absolute;inset:-2px -2px -2px -32px;border:2px solid #8cf;pointer-events:none}.t-editor img.ProseMirror-separator{display:inline!important;border:none!important;margin:0!important}.t-emoji-picker{width:100%;height:100%;overflow:hidden;flex-shrink:1}.t-emoji-picker emoji-picker{width:100%;border:0;height:100%;--border-size: 0;--num-columns: 10;--emoji-size: 21px;--category-emoji-size: 14px;--indicator-height: 2px;--outline-color: rgba(30, 96, 225, .5);--input-padding: 7px 11.5px;--button-active-background: #d4d4d4;--input-border-color: #d4d4d4;--input-focused-border-color: #b0b0b0;--indicator-color: #007df9;--button-hover-background: #d4d4d488;--input-border-radius: 4px;--input-font-size: inherit;--emoji-font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "Twemoji Mozilla", sans-serif}.t-emoji-picker[t-loading]{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#007df9}.t-emoji-picker[t-loading] .t-loading-icon,.t-loading-icon{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}.t-emoji-suggest-bar{will-change:transform;transform:translateY(100%);transition:transform .1s ease-out}.t-emoji-suggest-bar.slide-enter{transform:translateY(100%)}.t-emoji-suggest-bar.slide-enter-active,.t-emoji-suggest-bar.slide-enter-done,.t-emoji-suggest-bar.slide-exit{transform:translateY(0)}.t-emoji-suggest-bar.slide-exit-active,.t-emoji-suggest-bar.slide-exit-done{transform:translateY(100%)}.t-emoji-suggest-bar{scrollbar-color:rgba(0,0,0,.2) transparent;scrollbar-width:thin;overflow-y:hidden}.t-emoji-suggest-bar:hover{scrollbar-color:rgba(0,0,0,.4) transparent}.t-emoji-suggest-bar:active{scrollbar-color:rgba(0,0,0,.6) transparent}@media (prefers-reduced-motion: reduce){.t-emoji-suggest-bar{transition:none}}.t-message-list{width:100%;height:100%;display:flex;flex-direction:column-reverse;overflow-x:hidden;overflow-y:auto;padding:16px;scrollbar-color:rgba(0,0,0,.2) transparent}.t-message-list:hover{scrollbar-color:rgba(0,0,0,.4) transparent}.t-message-list:active{scrollbar-color:rgba(0,0,0,.6) transparent}.t-message-group{display:flex;flex-direction:column-reverse}:is(.t-chatbox,.t-conversation-list,t-chatbox,t-conversation-list) .t-panel{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;text-align:center;padding:25px;-webkit-font-smoothing:subpixel-antialiased;overflow-x:hidden;font-size:.95em;font-family:Open Sans,Helvetica,sans-serif}:is(.t-chatbox,.t-conversation-list,t-chatbox,t-conversation-list) .t-error-panel{background-color:#f7f7f7}:is(:is(.t-chatbox,.t-conversation-list,t-chatbox,t-conversation-list) .t-error-panel) .t-heading{font-size:2em}.t-attach-overlay{z-index:2;width:100%;height:100%;padding:16px;background-color:#64646480;display:flex;justify-content:center;align-items:center}.t-upload-preview .t-preview{position:relative;background-color:#fff;border-radius:1rem;max-width:750px;width:100%;display:inline-block;overflow:auto;padding:.5rem}@media screen and (max-width: 500px){.t-upload-preview .t-preview{width:85%}}:is(.t-upload-preview .t-preview) .t-img-container{text-align:center;background-color:#0000001a}:is(.t-upload-preview .t-preview) img{display:block;max-width:100%;max-height:400px;margin-left:auto;margin-right:auto}:is(.t-upload-preview .t-preview) video{width:100%;height:100%;object-fit:fill}:is(.t-upload-preview .t-preview) .t-location-upload-preview{width:100%;background-color:#0000001a;padding-bottom:calc((400 / 600) * 100%);display:block}.t-upload-preview .t-cancel-row{text-align:right;position:sticky;top:8px;padding-right:8px;z-index:2;margin-bottom:-38px}.t-upload-preview .t-filename-row{white-space:pre-wrap;word-break:break-all;padding:.5rem 1rem 0}.t-is-file:is(.t-upload-preview .t-filename-row){display:flex;justify-content:center;align-items:center;min-height:250px;padding-top:32px;padding-bottom:32px;text-align:center;background-color:#0000001a;border-radius:1rem;margin-bottom:1rem}:is(.t-upload-preview .t-filename-row) .t-file-block{background-color:#fff;padding:16px 32px;border-radius:8px;display:inline-block}.t-upload-preview .t-error-row{border-width:.125rem;border-radius:1rem;padding:1rem;background-color:#fec8c866;border-color:transparent;color:#ef4444;white-space:normal}.t-upload-preview .t-send-row{position:sticky;bottom:0;padding:1rem;display:flex;justify-content:space-between}.t-upload-preview .t-cancel{border:0;border-radius:.5rem;padding:.75rem 1rem;cursor:pointer;color:currentColor}.t-upload-preview .t-confirm-send{margin-left:auto;border:0;border-radius:.5rem;padding:.75rem 1rem;cursor:pointer}.t-upload-preview .t-loading{height:80px;width:100%;display:flex;align-items:center;justify-content:center;color:#007df9}.t-upload-preview .t-preview,.t-upload-preview .t-send-row{background:#fff}.t-upload-preview .t-confirm-send{background-color:#007df9;color:#fff}.t-chatbox-content{flex-direction:column;margin:0;position:relative;width:100%;height:100%;display:flex;overflow-y:hidden}.t-chatbox-content>.t-attach-overlay{position:absolute;width:100%;height:100%;top:0;left:0}.t-chatbox-content>.t-drop-overlay{pointer-events:none}:is(.t-chatbox-content>.t-drop-overlay) .t-theme-icon{color:#1e1e1e80;width:300px;height:300px}.t-conversation-list-scrollable{overflow-y:auto;height:100%}html:is(html):is(html):is(html):is(html):is(html) :where(.t-chatbox *:not(svg,svg *,.ProseMirror)){all:revert-layer}html:is(html):is(html):is(html):is(html):is(html) :where(.t-conversation-list *:not(svg,svg *)){all:revert-layer}html:is(html):is(html):is(html):is(html):is(html) :where(t-chatbox *:not(svg,svg *,.ProseMirror)){all:revert-layer}html:is(html):is(html):is(html):is(html):is(html) :where(t-conversation-list *:not(svg,svg *,.ProseMirror)){all:revert-layer}t-chatbox,t-conversation-list{display:block}t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list{font-family:Twemoji Country Flags,Inter,sans-serif;font-synthesis:initial;text-align:left;font-size:14px;font-weight:400;line-height:1.37;color:#111;letter-spacing:normal;margin:0;position:relative;background-color:#fff;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:none;box-sizing:border-box;overflow:hidden;max-height:100vh;max-height:100dvh;max-width:100vw;max-width:100dvw}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) button{font-family:inherit;font-size:1em}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) *,:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) *:before,:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) *:after{box-sizing:border-box}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) svg{fill:currentColor}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) em{font-style:italic}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) strong{font-weight:700}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) del{text-decoration:line-through}:is(t-chatbox,t-conversation-list,.t-chatbox,.t-conversation-list) code{font-family:Cascadia Code,Droid Sans Mono,Menlo,Consolas,Lucida Console,Monaco,monospace;font-variant-ligatures:none}t-conversation-list,.t-conversation-list{width:300px;height:600px}t-chatbox,.t-chatbox{width:400px;height:600px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.t-theme-chat-header{display:flex;align-items:center;height:4.5em;background-color:#ececec;border-bottom:1px solid #d4d4d4;flex-shrink:0}.t-theme-chat-header .t-inner{flex-grow:1;flex-basis:0;display:flex;align-items:center;padding-left:1em;padding-right:1em;min-width:0}.t-theme-chat-header .t-content{flex-grow:1;display:flex;align-items:center;min-width:0}.t-theme-chat-header .t-image{width:45px;text-align:center;margin-right:.75em;flex-shrink:0}.t-theme-chat-header .t-info{flex-grow:1;flex-basis:0;min-width:0}.t-theme-chat-header .t-title{font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:3px}.t-theme-chat-header .t-subtitle{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:85%;margin-left:4px}.t-theme-chat-header .t-user{display:inline-block;vertical-align:middle}.t-theme-chat-header .t-online-indicator{display:inline-block;width:.75em;height:.75em;border-radius:100%;margin:0 .75em -1px .275em}.t-theme-chat-header .t-online-indicator[t-status=online]{background-color:#22c55e}.t-theme-chat-header .t-online-indicator[t-status=offline]{background-color:#fff;-webkit-box-shadow:inset 0 0 0 1px rgba(50,50,50,.4);box-shadow:inset 0 0 0 1px #32323266}.t-theme-message{display:block;margin-top:.35em}.t-theme-message:last-child{margin-top:1.35em}.t-theme-message:not(:last-child) .t-message-sender-name{display:none}.t-theme-message:not(:last-child) .t-theme-avatar{visibility:hidden}.t-theme-message[t-sender=system]{margin-top:1.35em}.t-theme-message[t-sender=system]+.t-theme-message[t-sender=system]{margin-top:.5em}.t-theme-message:has(.t-reactions):has(+.t-theme-message){margin-bottom:.75em}.t-theme-message .t-message-row{display:flex;align-items:center;gap:.5em}.t-theme-message[t-sender=currentUser] .t-message-row{flex-direction:row-reverse}.t-theme-message .t-message-body{white-space:normal;overflow:hidden;border-radius:.75em;border-width:1px;border-style:solid;word-wrap:break-word;position:relative;display:inline-block;max-width:calc(100% - 6.5em);border-color:#ececec;background-color:#f7f7f7;color:#111;padding:.75em 1em}.t-theme-message .t-message-body .t-theme-referenced-message{border-left:solid 2px;margin-bottom:.4em;font-size:93%;padding:0 .55em}.t-theme-message[t-sender=currentUser] .t-message-body{border-color:#007df9;background-color:#007df9;color:#fff}.t-theme-message .t-message-body .t-message-content{display:contents;margin-top:.75em}.t-theme-message .t-message-body:has(.t-theme-audio-block,.t-theme-voice-block,.t-theme-location-block){width:100%}.t-theme-message .t-message-body:not(:has(.t-message-sender-name,.t-theme-referenced-message,.t-theme-text-block:first-child,.t-theme-file-block:first-child)){padding-top:0}.t-theme-message .t-message-body:not(:has(.t-theme-text-block:first-child,.t-theme-file-block:first-child)) .t-message-sender-name{margin-bottom:.75em}.t-theme-message button[t-action]{border-radius:.375em;font-size:inherit;margin:1px 0;padding:.25em .325em;cursor:pointer;transition:color .2s ease-in-out,background-color .2s ease-in-out,border .2s ease-in-out}.t-theme-message[t-sender=currentUser] button[t-action]{color:#0761d1;background-color:#fff;border:1px solid white}.t-theme-message[t-sender=currentUser] button[t-action]:hover,.t-theme-message[t-sender=currentUser] button[t-action]:active{color:inherit;background-color:transparent}.t-theme-message[t-sender=currentUser] button[t-action]:focus-visible{outline:white solid 2px;outline-offset:2px}.t-theme-message[t-sender=other] button[t-action]{color:#111;background-color:transparent;border:1px solid #525252}.t-theme-message[t-sender=other] button[t-action]:hover{color:#fff;background-color:#111;border:1px solid #111}.t-theme-message[t-sender=other] button[t-action]:active{color:#fff;background-color:#404040;border:1px solid #404040}.t-theme-message[t-sender=other] button[t-action]:focus-visible{outline:#525252 solid 2px;outline-offset:2px}.t-theme-message[t-sender=system] button[t-action]{color:#fff;background-color:#007df9;border:1px solid #007df9}.t-theme-message[t-sender=system] button[t-action]:hover{color:#fff;background-color:#0761d1;border:1px solid #0761d1}.t-theme-message[t-sender=system] button[t-action]:active{color:#fff;background-color:#3291ff;border:1px solid #3291ff}.t-theme-message[t-sender=system] button[t-action]:focus-visible{outline:#007df9 solid 2px;outline-offset:2px}.t-theme-message .t-message-sender-name{font-size:75%;font-weight:700}.t-theme-message .t-reactions{margin-top:.25em;display:flex;flex-wrap:wrap;gap:.25em}.t-theme-message[t-sender=currentUser] .t-reactions{justify-content:flex-end;margin-right:.75em}.t-theme-message[t-sender=other] .t-reactions{margin-left:3.75em}.t-theme-message[t-sender=system] .t-message-body{background:transparent;width:100%;max-width:none;border:none}.t-theme-message[t-sender=system] .t-message-row{white-space:normal;border-radius:.75em;overflow:hidden;white-space:pre-wrap;background-color:transparent;color:#111;border:1px solid #d4d4d4}.t-theme-message .t-message-content a{color:currentColor}.t-theme-message .t-message-status{display:inline-flex;font-size:75%;float:right;margin-left:2em;margin-top:.6em;opacity:75%;min-width:3.5ch;text-align:right}.t-theme-message .t-message-loading-spinner{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;width:1em;height:1em}.t-theme-message .t-status-icon{margin-left:.25em;letter-spacing:-.3em;min-width:1em}.t-theme-message .t-message-row>button{border:none;width:36px;height:36px;padding:8px;border-radius:9999px;border:0;color:inherit;opacity:.75;cursor:pointer;font-size:120%;background:inherit}.t-theme-message .t-message-row>button:hover,.t-theme-message .t-message-row>button:focus{color:#0761d1}.t-theme-message .t-message-row>button:focus-visible{outline:0;box-shadow:0 0 0 2px #007df97f}@media (hover: hover){.t-theme-message .t-message-row>button{visibility:hidden}.t-theme-message .t-message-row:hover>button,.t-theme-message .t-message-row:focus-within>button{visibility:visible}}@media (hover: none){.t-theme-message .t-message-row>button{opacity:.0001%}.t-theme-message .t-message-row:hover>button,.t-theme-message .t-message-row:focus-within>button{opacity:100%}}.t-message-action-menu-button .t-action-menu-icon{width:1.143em;height:1.143em}.t-theme-message .t-emoji-reactions{margin-top:.25em;margin-bottom:.5em;display:flex;flex-wrap:wrap;gap:.25em}.t-theme-message[t-sender=currentUser] .t-emoji-reactions{justify-content:flex-end;margin-right:3.5em}.t-theme-message[t-sender=other] .t-emoji-reactions{margin-left:3.5em}.t-theme-message .t-reaction-button{border:1px solid transparent;margin:0;padding:.2em .55em;border-radius:8em;background-color:#e8ecee}.t-theme-message .t-reaction-button[t-active]{background:#1e60e1;border:1px solid transparent;color:#fff}.t-theme-message .t-reaction-button[t-active]:hover{background:#1e60e1;border:1px solid transparent}.t-theme-message .t-reaction-button span{display:inline-block;vertical-align:middle}.t-theme-message .t-reaction-button .t-emoji{font-size:1.25eem}.t-theme-message .t-reaction-button .t-num-reactions{padding-left:.25em;font-size:.85em}.t-theme-message .t-reaction-picker{width:300px;height:200px;margin:0 10px;border-radius:.75em;border:1px solid #d4d4d4;overflow:hidden}.t-theme-message .t-mention{line-height:1.5;color:inherit;margin:0;border-radius:9999px;padding:.25rem .45rem}.t-theme-message .t-mention[t-is-current-user]{font-weight:700}.t-theme-message[t-sender=currentUser] .t-mention{background-color:#fff3}.t-theme-message[t-sender=currentUser] .t-mention[t-is-current-user]{background-color:#fff6}.t-theme-message[t-sender=other] .t-mention{background-color:#dcdcdc80}.t-theme-message[t-sender=other] .t-mention[t-is-current-user]{background-color:#dcdcdce6}.t-theme-message-action-menu{display:flex;flex-direction:column;background-color:#fff;color:#111;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:0 8px 24px #73737333;padding:.35em}.t-theme-message-action-menu .t-menu-item{padding:.45em .65em;cursor:pointer;background:none;border:none;border-radius:.5em;text-align:left}.t-theme-message-action-menu .t-menu-item:hover{background-color:#007df9;color:#fff}.t-theme-message-action-menu .t-menu-item.t-danger{color:#ef4444}.t-theme-message-action-menu .t-menu-item.t-danger:hover{background-color:#fec8c866;color:#ef4444}.t-theme-message-field{display:flex;flex-direction:column}.t-theme-message-field[t-mode=send]{max-height:calc(100% - 100px)}.t-theme-message-field[t-mode=edit]{margin:.75em 0}.t-theme-message-field .t-wrapper{flex-shrink:0;position:relative;padding:16px;color:#111;font-size:16px;background-color:#ececec;border-top:#d4d4d4 solid 1px;max-width:100%;width:100%;margin:0 auto;z-index:2}.t-theme-message-field[t-mode=edit] .t-wrapper{border:#d4d4d4 solid 1px;border-radius:.75em}.t-theme-message-field .t-emoji-suggest-bar{width:100%;padding:.5rem;display:flex;overflow:auto hidden;height:60px;margin-top:-60px;flex-shrink:0;align-items:center;background-color:#ececec;border-top:#d4d4d4 solid 1px;z-index:1}.t-theme-message-field .t-emoji-suggest-bar button{display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;font-size:1.375rem;width:2.375rem;height:2.375rem;padding:0 5px;border-radius:.5rem}.t-theme-message-field .t-emoji-suggest-bar button[t-focused]{background-color:#d4d4d4}.t-theme-message-field[t-mode=edit] .t-emoji-suggest-bar{border:#d4d4d4 solid 1px;border-radius:.75em .75em 0 0}.t-theme-message-field[t-mode=edit]:has(.t-emoji-suggest-bar) .t-wrapper{border-radius:0 0 .75em .75em;border-top:none}.t-theme-message-field .t-mention-suggest-list{width:auto;max-width:100%;max-height:150px;display:flex;flex-direction:column;overflow-x:auto;background-color:#fff;color:#111;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:0 8px 24px #73737333;padding:.5em}.t-theme-message-field .t-mention-suggest-list button{display:flex;align-items:center;border:none;background:none;cursor:pointer;border-radius:4px;white-space:nowrap;width:100%;height:2rem;min-height:2rem;padding:0 .25rem;color:#111}.t-theme-message-field .t-mention-suggest-list button:hover,.t-theme-message-field .t-mention-suggest-list button.focused{background-color:#007df9;color:#fff}.t-theme-message-field .t-edit-row{display:flex;gap:.5em;margin-left:auto}.t-theme-message-field .t-edit-row button{display:inline-block;padding:.5rem 1rem;border:0;border-radius:.5rem;cursor:pointer;background-color:#1111111a;color:#111}.t-theme-message-field .t-edit-row button[t-action=save]{background-color:#007df9;color:#fff}.t-theme-message-field .t-text-form{width:100%;max-width:100%;margin:0 auto;display:flex}.t-theme-message-field[t-mode=edit] .t-text-form{flex-direction:column;gap:.5em}.t-theme-message-field .t-editor .t-text-input{min-height:3.143em;max-height:9em;border-radius:.65em;border:1px solid white;background-color:#fff;display:block;resize:none;overflow-x:hidden;overflow-y:auto;word-break:break-word;white-space:pre-wrap;padding:0 44px 0 1em;transition:box-shadow .15s ease-out}.t-theme-message-field .t-editor .t-text-input:focus-visible{border-color:#fff;outline:#a3a3a3 solid 1px}.t-theme-message-field .t-editor .t-text-input p{margin:.875em 0;padding:0;border:0;outline:0}.t-theme-message-field .t-editor .t-mention{color:#007df9}.t-theme-message-field .t-send-column{flex-grow:0;flex-shrink:0;white-space:nowrap;align-self:center;display:flex}.t-theme-message-field .t-textbox-column{position:relative;flex-grow:1;margin-right:.28em}.t-theme-message-field .t-send-button{width:2.571em;height:2.571em;padding:.571em;border:0;border-radius:9999px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;background:transparent;color:currentColor;opacity:.75;transition:.15s ease-out}.t-theme-message-field .t-send-button:hover,.t-theme-message-field .t-send-button:focus{background-color:#2626260d}.t-theme-message-field .t-send-button:focus-visible{outline:0;box-shadow:0 0 0 2px #007df97f}.t-theme-message-field .t-send-button{display:flex}.t-theme-message-field .t-send-button[disabled]{color:currentColor}.t-theme-message-field .t-text-limit-indicator{opacity:.5;font-size:75%;margin:-.75em 0 .5em 2px}.t-theme-message-field .t-readonly{opacity:.5;user-select:none}.t-theme-message-field .t-button-overlay{position:absolute;right:0;top:0;bottom:0;margin-right:8px;display:flex;align-items:center}.t-theme-message-field [t-kind=icon-button]{width:36px;height:36px;padding:8px;border:0;border-radius:9999px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;background:transparent;color:currentColor;opacity:.75;transition:.15s ease-out}.t-theme-message-field [t-kind=icon-button]:hover,.t-theme-message-field [t-kind=icon-button]:focus{background-color:#2626260d;color:#007df9;opacity:1}.t-theme-message-field [t-kind=icon-button]:focus-visible{outline:0;box-shadow:0 0 0 2px #007df97f}.t-theme-message-field .t-edit-row button[t-action=save]:disabled{cursor:initial;background-color:#888;color:#fff}.t-theme-message-field .t-emoji-picker-wrapper{width:100%;height:350px;overflow:hidden;flex-shrink:1;border-top:1px solid #d4d4d4}.t-theme-icon{display:inline-block;vertical-align:middle;overflow:hidden}.t-message-divider{width:100%;margin:1.3em .5em 0;display:grid;grid-template-columns:1fr max-content 1fr;color:#95a7b1}.t-message-divider span{vertical-align:top;white-space:nowrap;height:1.3em;padding:0 20px}.t-message-divider .t-line[t-side=right]{display:grid;grid-template-columns:1fr max-content;gap:10px;grid-column:3}.t-message-divider .t-line .t-line-segment{height:0;width:100%;margin-top:10px;border:none;border-bottom:1px solid #95a7b1}.t-message-divider .t-line .t-unread-marker{position:relative;top:-4px;height:28px;padding:3px 10px;border-radius:100px;border:1px solid #95a7b1;vertical-align:middle}.t-theme-message-list-footer{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.5em;margin-top:1.35em}.t-theme-message-list-footer .t-typing-avatars{display:flex;flex-direction:row;align-items:left;justify-content:center;width:fit-content}.t-theme-message-list-footer .t-typing-avatars>.t-theme-avatar{width:2.6em;height:2.6em;display:flex;align-items:center;justify-content:center;color:#111;line-height:2.6em;vertical-align:text-top;font-size:.75em}.t-theme-message-list-footer .t-typing-avatars>.t-theme-avatar:not(:last-child){margin-right:-.66em}.t-theme-message-list-footer .t-typing-bubble{display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:1em;background-color:#f7f7f7;border:1px solid #ececec;color:#111;padding:0 1em;font-size:.75em}.t-theme-message-list-footer .t-typing-animation{display:flex;flex-direction:row;align-items:center;gap:4px;height:2.6em;line-height:2.6em}.t-theme-message-list-footer .t-typing-animation span{height:6px;width:6px;background-color:#737373;display:inline-block;border-radius:50%;opacity:.4}.t-theme-message-list-footer .t-typing-animation span:nth-of-type(1){animation:1s blink infinite .3333s}.t-theme-message-list-footer .t-typing-animation span:nth-of-type(2){animation:1s blink infinite .6666s}.t-theme-message-list-footer .t-typing-animation span:nth-of-type(3){animation:1s blink infinite .9999s}@keyframes blink{50%{opacity:1}}.t-theme-audio-block{display:contents;width:100%;min-width:25ch}.t-theme-audio-block .t-audio-player{margin-bottom:.5em}.t-theme-audio-block .t-attachment-icon{width:1em;height:1em;margin-right:.2em}.t-theme-audio-block .t-filesize{font-size:.8em}.t-theme-file-block{display:contents}.t-theme-file-block a{word-break:break-all;text-decoration:none}.t-theme-file-block .t-filename{text-decoration:underline}.t-theme-file-block .t-attachment-icon{width:1em;height:1em;margin-right:.2em}.t-theme-file-block .t-filesize{white-space:nowrap;font-size:75%}.t-theme-file-block .t-loading-spinner{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}.t-theme-image-block{display:contents}.t-theme-image-block .download-icon{width:1em;height:1em;margin-right:.2em}.t-image-wrapper{display:block;height:auto;min-height:40px;max-height:400px}.t-theme-image-block .t-root{display:flex;justify-content:center;align-items:center;min-height:inherit;max-height:inherit;height:auto;max-width:min(calc(100% + 2em),calc(var(--img-w) * 1px));width:calc(100% + 2em);transform:translate(-1em);aspect-ratio:var(--img-w) / var(--img-h);overflow:hidden;margin:0 auto .5em}.t-theme-image-block .t-image{width:100%;height:100%;max-width:calc(var(--img-w) * 1px);max-height:calc(var(--img-h) * 1px);object-fit:contain}.t-theme-image-block .t-filesize{font-size:.8em}.t-theme-location-block{display:contents;min-height:100px;max-height:500px}.t-theme-location-block .t-root{display:block;height:200px;margin:0 -1em .5em}.t-theme-text-block{display:contents}.t-theme-text-block .t-text .t-emoji{height:1.15em;width:1.15em;margin:0 .1em .1em;vertical-align:middle}.t-theme-text-block .t-text{white-space:pre-wrap}.t-theme-text-block ul{padding-left:0;margin:0}.t-theme-text-block ul li{margin-left:1em;margin-bottom:.5em}.t-theme-video-block{display:contents}.t-theme-video-block .download-icon{width:1em;height:1em;margin-right:.2em}.t-video-wrapper{display:block;height:auto;min-height:40px;max-height:400px}.t-theme-video-block .t-root{display:flex;justify-content:center;align-items:center;min-height:inherit;max-height:inherit;height:auto;max-width:min(calc(100% + 2em),calc(var(--video-w) * 1px));width:calc(100% + 2em);transform:translate(-1em);aspect-ratio:var(--video-w) / var(--video-h);overflow:hidden;margin:0 auto .5em}.t-theme-video-block .t-video{width:100%;height:100%;max-width:calc(var(--video-w) * 1px);max-height:calc(var(--video-h) * 1px);object-fit:contain;background-color:#000000d9}.t-theme-video-block .t-filesize{font-size:.8em}.t-theme-conversation-list-item{color:#525252;text-decoration:none;width:100%;padding:0;height:auto;padding:1rem;border:none;border-bottom:1px solid #d4d4d4;background-color:transparent;overflow:hidden;display:flex;align-items:center;gap:.5rem;word-wrap:break-word;transition:color .1s ease-in-out,background-color .1s ease-in-out;background-color:#fff;text-align:initial}.t-theme-conversation-list-item a{color:#525252}.t-theme-conversation-list-item[t-selected] a{color:#fff}.t-theme-conversation-list-item:last-child{margin-bottom:10px}.t-theme-conversation-list-item:hover{background-color:#f7f7f7;cursor:pointer}.t-theme-conversation-list-item[t-selected]{color:#fff;background-color:#007df9}.t-theme-conversation-list-item[t-selected]:focus-visible{outline:#fff 2px solid;outline-offset:-4px;border-bottom:0}.t-theme-conversation-list-item:focus-visible{outline:#3291ff 2px solid;outline-offset:-2px}.t-theme-conversation-list-item[t-unread]{background-color:#f7f7f7;color:#111}.t-theme-conversation-list-item[t-selected][t-unread]{color:#fff;background-color:#007df9}.t-theme-conversation-list-item .t-inner{margin-left:10px;flex-basis:0;flex-grow:1;min-width:0}.t-theme-conversation-list-item .t-header,.t-theme-conversation-list-item .t-body{display:flex;align-items:center;flex-grow:1;flex-shrink:0;min-width:0;overflow:hidden}.t-theme-conversation-list-item .t-message-sender{margin-right:.2rem}.t-theme-conversation-list-item .t-timestamp{font-size:85%;opacity:.75}.t-theme-conversation-list-item .t-timestamp,.t-theme-conversation-list-item .t-unread-dot{flex-shrink:0;margin-left:4px}.t-theme-conversation-list-item .t-conversation-name{font-weight:600}.t-theme-conversation-list-item .t-conversation-name,.t-theme-conversation-list-item .t-message{flex-grow:1;font-size:85%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-theme-conversation-list-item .t-message{opacity:.75;flex-basis:0}.t-theme-conversation-list-item .t-unread-dot{display:flex;align-items:center;justify-content:center;padding:0 .4rem;border-radius:9999px;height:20px;width:auto;min-width:20px;text-align:center;line-height:inherit;font-size:85%;color:#fff;background-color:#007df9}.t-theme-conversation-list-item .t-unread-generic-dot{padding:.6ex;transform:scale(.999);border-radius:999px;background-color:#007df9}.t-theme-conversation-list-item[t-selected] .t-unread-generic-dot{padding:.6ex;transform:scale(.999);border-radius:999px;background-color:#fff}.t-theme-conversation-list-item[t-selected] .t-unread-dot{color:#007df9;background-color:#fff}.t-theme-conversation-list-item .t-unread-dot:empty{padding:0;min-width:10px;min-height:10px}.t-theme-conversation-list-item .t-message li{display:inline list-item;margin-right:.25rem}.t-theme-conversation-list-item .t-message ul{list-style:inside}.t-theme-avatar{display:block;overflow:hidden;background-color:#ececec;background-size:cover;background-repeat:no-repeat;background-position:center center;border-style:solid;border-radius:50%;border-width:2px;border-color:#fff;flex-shrink:0;align-self:flex-start;width:3em;height:3em}.t-theme-group-chat-image{display:block;overflow:hidden;position:relative;width:44px;height:44px;flex-shrink:0}.t-theme-group-chat-image .t-mini-avatar{border-radius:50%;border-width:2px;border-color:#fff;border-style:solid;box-shadow:0 1px 1px #8899a626;width:30px;height:30px;position:absolute;background-color:#f7f7f7;background-position:center;background-size:cover}.t-theme-group-chat-image .t-mini-avatar:nth-child(1){right:0;top:14px}.t-theme-group-chat-image .t-mini-avatar:nth-child(2){left:0;top:0}.t-theme-group-chat-image .t-counter{border-radius:50%;border:2px solid #fff;font-weight:600;position:absolute;min-width:18px;min-height:18px;max-width:22px;max-height:22px;left:0;bottom:0;display:flex;justify-content:center;align-items:center;color:#111;padding:0}.t-theme-group-chat-image .t-group{border-style:none;color:#ececec}.t-theme-referenced-message{display:flex;flex-direction:column}.t-theme-referenced-message .t-sender-name{font-weight:600;margin-bottom:2px}.t-theme-referenced-message .t-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:.165em 0}.t-theme-referenced-message .t-content a{color:currentColor}.t-theme-reply-bar{height:4.286em;display:flex;align-items:center;background-color:#ececec;padding:.714em;color:#262626;border-top:#d4d4d4 solid 1px}.t-theme-reply-bar .t-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:.165rem 0px}.t-theme-reply-bar .t-close-button{width:2.571em;height:2.571em;padding:.571em;border:0;border-radius:9999px;cursor:pointer;display:inline-flex;align-items:center;background:transparent;opacity:.75;transition:.15s ease-out}.t-theme-reply-bar .t-close-button:hover{background-color:#2626260d;color:#007df9;opacity:1}.t-theme-reply-bar .t-body{flex-grow:1;padding:0 1em;overflow:hidden}.t-theme-reply-bar .t-close-icon,.t-theme-reply-bar .t-reply-icon{width:1.428em;height:1.428em;min-width:1.428em;min-height:1.428em}.t-theme-reply-bar .t-mention{line-height:1.5;background-color:#c8c8c880;color:inherit;margin:0;border-radius:9999px;padding:.25rem .45rem}.t-theme-reply-bar .t-mention[t-is-current-user]{font-weight:700;background-color:#c8c8c8e6}.t-theme-compact-message-content>.t-theme-icon{width:1.25em;height:1.25em;margin-right:.25em}.t-theme-compact-message-content .t-text ul{list-style:inside;margin:0 0 0 .5em;padding:0;display:inline}.t-theme-compact-message-content .t-text li{display:inline list-item;margin-right:1em}.t-theme-compact-message-content .t-text li::marker{content:"• "}
package/default.d.ts CHANGED
@@ -159,6 +159,90 @@ export declare interface BrowserPermissionRequest {
159
159
  showPrompt(): Promise<"granted" | "denied">;
160
160
  }
161
161
 
162
+ /**
163
+ * A collection of actions available on the Chatbox UI.
164
+ *
165
+ * @public
166
+ */
167
+ declare class ChatboxController {
168
+ #private;
169
+ /**
170
+ * Deletes the message with the given ID.
171
+ *
172
+ * @param messageId
173
+ */
174
+ deleteMessage(messageId: string): Promise<void>;
175
+ /**
176
+ * Enable/disable editing of a given message.
177
+ *
178
+ * @param messageId When `null` is provided, editing mode will be disabled
179
+ */
180
+ setEditing(messageId: string | null): void;
181
+ /**
182
+ * Edit the message with the given ID.
183
+ *
184
+ * @param messageId
185
+ * @param params
186
+ */
187
+ editMessage(messageId: string, params: EditTextMessageParams | EditMessageParams): Promise<void>;
188
+ /**
189
+ * Send a text message to the current conversation.
190
+ *
191
+ * @param params
192
+ */
193
+ sendMessage(params: SendTextMessageParams | SendMessageParams): Promise<void>;
194
+ /**
195
+ * Send a file message to the current conversation.
196
+ *
197
+ * @param message
198
+ */
199
+ sendFileMessage(params: {
200
+ fileToken: FileToken;
201
+ custom?: Record<string, string>;
202
+ }): Promise<void>;
203
+ /**
204
+ * Send a location message to the current conversation.
205
+ *
206
+ * @param message
207
+ */
208
+ sendLocationMessage(message: {
209
+ location: Coordinates;
210
+ custom?: Record<string, string>;
211
+ }): Promise<void>;
212
+ /**
213
+ * Set/unset the message that's currently being replied to.
214
+ *
215
+ * @param messageId - When `null` is provided, the "replying to" message is cleared
216
+ */
217
+ setReferencedMessage(messageId: string | null): void;
218
+ /**
219
+ * Toggle the given emoji reaction for the given message. If the current user
220
+ * already added this reaction, it's removed, and otherwise, it's added.
221
+ *
222
+ * Called from the theme's Message component when the user clicks on an
223
+ * existing emoji reaction.
224
+ *
225
+ * @param messageId - The ID of the message you want to toggle the reaction on. This message must exist in the current conversation.
226
+ * @param emoji - The emoji you want to toggle. Must be a string of a single unicode emoji glyph, eg `"🎉"`.
227
+ */
228
+ toggleReaction(messageId: string, emoji: string): Promise<void>;
229
+ /**
230
+ * Get the plaintext from the message field
231
+ *
232
+ * @returns The text
233
+ */
234
+ getMessageFieldText(): string;
235
+ /**
236
+ * Set the plaintext in the message field
237
+ * @param text
238
+ */
239
+ setMessageFieldText(text: string): void;
240
+ /**
241
+ * Focus the message field
242
+ */
243
+ focusMessageField(): void;
244
+ }
245
+
162
246
  /**
163
247
  * The
164
248
  * {@link https://talkjs.com/docs/Features/Chat_UIs/#chatbox | TalkJS Chatbox UI. }
@@ -166,15 +250,15 @@ export declare interface BrowserPermissionRequest {
166
250
  *
167
251
  * @public
168
252
  */
169
- export declare const ChatboxHTMLElement: new () => ChatboxHTMLElement_2;
253
+ export declare const ChatboxElement: new () => ChatboxElement_2;
170
254
 
171
- declare interface ChatboxHTMLElement_2 extends HTMLElement, NullishChatboxProps, ChatboxRef {
255
+ declare interface ChatboxElement_2 extends HTMLElement, NullishChatboxProps, ChatboxController {
172
256
  }
173
257
 
174
258
  /**
175
259
  * @public
176
260
  */
177
- export declare interface ChatboxProps {
261
+ declare interface ChatboxProps {
178
262
  /**
179
263
  * @hidden
180
264
  */
@@ -235,7 +319,7 @@ export declare interface ChatboxProps {
235
319
  *
236
320
  * @remarks
237
321
  * See
238
- * {@link https://talkjs.com/docs/SDKs/React/Customization/#custom-theme-components | Custom theme components }
322
+ * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
239
323
  * for more info.
240
324
  */
241
325
  theme?: Partial<Theme>;
@@ -306,6 +390,16 @@ export declare interface ChatboxProps {
306
390
  * @param event Event object describing the missing permission
307
391
  */
308
392
  onMissingBrowserPermission?: (event: MissingBrowserPermissionEvent) => void;
393
+ /**
394
+ * This event fires when the user clicks an action button or an action Link
395
+ * inside a message.
396
+ *
397
+ * The event's `action` and `params` fields specify the name of action and its
398
+ * parameters, if any.
399
+ *
400
+ * @see {@link https://talkjs.com/docs/Guides/Web_Components/Action_Buttons_Links/ | Action Buttons and Links}
401
+ */
402
+ onMessageAction?: (event: MessageActionEvent) => void;
309
403
  /**
310
404
  * Arbitrary custom data passed down to the theme.
311
405
  *
@@ -319,63 +413,6 @@ export declare interface ChatboxProps {
319
413
  themeCustom?: any;
320
414
  }
321
415
 
322
- /**
323
- * A collection of actions available on the Chatbox UI.
324
- *
325
- * @public
326
- */
327
- export declare interface ChatboxRef {
328
- /**
329
- * Deletes the message with the given ID.
330
- *
331
- * @param messageId
332
- */
333
- deleteMessage(messageId: string): Promise<void>;
334
- /**
335
- * Enable/disable editing of a given message.
336
- *
337
- * @param messageId When `null` is provided, editing mode will be disabled
338
- */
339
- setEditing(messageId: string | null): void;
340
- /**
341
- * Edit the message with the given ID.
342
- *
343
- * @param messageId
344
- * @param params
345
- */
346
- editMessage(messageId: string, params: EditTextMessageParams | EditMessageParams): Promise<void>;
347
- /**
348
- * Send a text message to the current conversation.
349
- *
350
- * @param params
351
- */
352
- sendMessage(params: SendTextMessageParams | SendMessageParams): Promise<void>;
353
- /**
354
- * Send a file message to the current conversation.
355
- *
356
- * @param message
357
- */
358
- sendFileMessage(params: {
359
- fileToken: FileToken;
360
- custom?: Record<string, string>;
361
- }): Promise<void>;
362
- /**
363
- * Send a location message to the current conversation.
364
- *
365
- * @param message
366
- */
367
- sendLocationMessage(message: {
368
- location: Coordinates;
369
- custom?: Record<string, string>;
370
- }): Promise<void>;
371
- /**
372
- * Set/unset the message that's currently being replied to.
373
- *
374
- * @param messageId When `null` is provided, the "replying to" message is cleared
375
- */
376
- setReferencedMessage(messageId: string | null): void;
377
- }
378
-
379
416
  /**
380
417
  * @public
381
418
  */
@@ -416,9 +453,9 @@ declare interface CommonChatboxProps {
416
453
  */
417
454
  t: Translation;
418
455
  /**
419
- * The chatbox instance itself.
456
+ * Public interface of the chatbox instance.
420
457
  */
421
- chatbox: ChatboxRef;
458
+ chatbox: ChatboxController;
422
459
  /**
423
460
  * Arbitrary custom data passed down to the theme.
424
461
  *
@@ -490,9 +527,9 @@ declare interface CommonConversationListProps {
490
527
  */
491
528
  theme: Theme;
492
529
  /**
493
- * The conversation list instance itself.
530
+ * Public interface of the conversation list instance.
494
531
  */
495
- conversationList: ConversationListRef;
532
+ conversationList: ConversationListController;
496
533
  /**
497
534
  * The underlying TalkJS session object that handles sending and receiving chat data.
498
535
  */
@@ -541,6 +578,32 @@ declare interface ConversationImageProps {
541
578
  participants: ParticipantSnapshot[];
542
579
  }
543
580
 
581
+ /**
582
+ * A collection of actions available on the ConversationList UI.
583
+ *
584
+ * @public
585
+ */
586
+ declare class ConversationListController {
587
+ #private;
588
+ /**
589
+ * Select a conversation.
590
+ *
591
+ * @remarks
592
+ * This method is called from the theme's ConversationListItem component when
593
+ * the user clicks on the given conversation. You can also call it
594
+ * programmatically from elsewhere to simulate a user click.
595
+ *
596
+ * This method will trigger the
597
+ * {@linkcode ConversationListProps.onSelectConversation} event. In most
598
+ * cases, if you want to change the selected conversation programmatically
599
+ * from outside the conversation list, it's better to pass a different value
600
+ * to the {@linkcode ConversationListProps.selectedConversationId} prop
601
+ * instead, as that lets you keep your local state in sync with the props
602
+ * passed to the conversation list.
603
+ */
604
+ selectConversation(conversationId: string): void;
605
+ }
606
+
544
607
  /**
545
608
  * The
546
609
  * {@link https://talkjs.com/docs/Features/Chat_UIs/#conversation-list | Conversation List UI. }
@@ -550,9 +613,9 @@ declare interface ConversationImageProps {
550
613
  *
551
614
  * @public
552
615
  */
553
- export declare const ConversationListHTMLElement: new () => ConversationListHTMLElement_2;
616
+ export declare const ConversationListElement: new () => ConversationListElement_2;
554
617
 
555
- declare interface ConversationListHTMLElement_2 extends HTMLElement, NullishConversationListProps, ConversationListRef {
618
+ declare interface ConversationListElement_2 extends HTMLElement, NullishConversationListProps, ConversationListController {
556
619
  }
557
620
 
558
621
  declare interface ConversationListItemProps {
@@ -578,7 +641,7 @@ declare interface ConversationListItemProps {
578
641
  /**
579
642
  * @public
580
643
  */
581
- export declare interface ConversationListProps {
644
+ declare interface ConversationListProps {
582
645
  /**
583
646
  * @hidden
584
647
  */
@@ -642,7 +705,7 @@ export declare interface ConversationListProps {
642
705
  *
643
706
  * @remarks
644
707
  * See
645
- * {@link https://talkjs.com/docs/SDKs/React/Customization/#custom-theme-components | Custom theme components }
708
+ * {@link https://talkjs.com/docs/UI_Components/React/Customization/#custom-theme-components | Custom theme components }
646
709
  * for more info.
647
710
  */
648
711
  theme?: Partial<Theme>;
@@ -657,7 +720,7 @@ export declare interface ConversationListProps {
657
720
  *
658
721
  * Use this callback to have an adjacent chatbox show the correct
659
722
  * conversation. See
660
- * {@link https://talkjs.com/docs/SDKs/React/ConversationList/#respond-to-a-select-conversation-event | Respond to a select conversation event.}
723
+ * {@link https://talkjs.com/docs/UI_Components/React/ConversationList/#respond-to-a-select-conversation-event | Respond to a select conversation event.}
661
724
  */
662
725
  onSelectConversation?: (event: SelectConversationEvent) => void;
663
726
  /**
@@ -673,24 +736,6 @@ export declare interface ConversationListProps {
673
736
  themeCustom?: any;
674
737
  }
675
738
 
676
- /**
677
- * A collection of actions available on the ConversationList UI.
678
- *
679
- * @public
680
- */
681
- export declare interface ConversationListRef {
682
- /**
683
- * Programatically select a conversation.
684
- *
685
- * @param conversationId
686
- *
687
- * @remarks
688
- * Note that this **will not** trigger the
689
- * {@linkcode ConversationListProps.onSelectConversation} callback.
690
- */
691
- selectConversation(conversationId: string): void;
692
- }
693
-
694
739
  /**
695
740
  * @public
696
741
  */
@@ -880,6 +925,30 @@ declare interface LocationBlockProps {
880
925
  block: LocationBlock;
881
926
  }
882
927
 
928
+ /**
929
+ * An event object dispatched by the {@link ChatboxProps.onMessageAction} event.
930
+ *
931
+ * @public
932
+ */
933
+ export declare interface MessageActionEvent {
934
+ /**
935
+ * The name of the action that was triggered.
936
+ */
937
+ action: string;
938
+ /**
939
+ * The parameters of the action that was triggered, if any.
940
+ */
941
+ params: Record<string, string>;
942
+ /**
943
+ * The message that contained the action link or action button.
944
+ */
945
+ message: MessageSnapshot;
946
+ /**
947
+ * The current conversation.
948
+ */
949
+ conversation: ConversationSnapshot;
950
+ }
951
+
883
952
  /**
884
953
  * @public
885
954
  */
@@ -1371,8 +1440,8 @@ export { }
1371
1440
 
1372
1441
  declare global {
1373
1442
  interface HTMLElementTagNameMap {
1374
- "t-chatbox": ChatboxHTMLElement;
1375
- "t-conversation-list": ConversationListHTMLElement;
1443
+ "t-chatbox": ChatboxElement;
1444
+ "t-conversation-list": ConversationListElement;
1376
1445
  }
1377
1446
  }
1378
1447