@talkjs/react-components 0.0.12 → 0.0.14
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/base.css +1 -1
- package/default.css +1 -1
- package/default.d.ts +37 -15
- package/default.js +257 -152
- package/package.json +3 -2
- package/theming.d.ts +81 -15
- package/theming.js +1 -1
package/base.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://cdn.talkjs.com/fonts/Inter.css"
|
|
1
|
+
@import"https://cdn.talkjs.com/fonts/Inter.css";.t-chatbox *:where(:not(svg,svg *)){all:revert-layer}.t-chatbox{--default-chat-width: 420px;font-family:Twemoji Country Flags,Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.37;color:#111;letter-spacing:normal;margin:0;position:relative;width:100%;height:100%;overflow:hidden;background-color:#fff;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:none}.t-chatbox button{font-family:inherit;font-size:1em}.t-chatbox *,.t-chatbox *:before,.t-chatbox *:after{box-sizing:border-box}.t-chatbox svg{fill:currentColor}.t-chatbox em{font-style:italic}.t-chatbox strong{font-weight:700}.t-chatbox del{text-decoration:line-through}.t-chatbox code{font-family:Cascadia Code,Droid Sans Mono,Menlo,Consolas,Lucida Console,Monaco,monospace;font-variant-ligatures:none}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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}.t-chatbox .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}.t-chatbox .t-error-panel{background-color:#f7f7f7}:is(.t-chatbox .t-error-panel) .t-heading{font-size:2em}.t-loading-icon{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}:root{--reach-menu-button: 1}[data-reach-menu]{position:relative}[data-reach-menu-popover]{display:block;position:absolute}[data-reach-menu-popover][hidden]{display:none}[data-reach-menu-list],[data-reach-menu-items]{display:block;white-space:nowrap;border:solid 1px hsla(0,0%,0%,.25);background:#fffffffc;outline:none;padding:1rem 0;font-size:85%}[data-reach-menu-item]{display:block;user-select:none}[data-reach-menu-item]{cursor:pointer;display:block;color:inherit;font:inherit;text-decoration:initial;padding:5px 20px}[data-reach-menu-item][data-selected]{background:#1159a6;color:#fff;outline:none}[data-reach-menu-item][aria-disabled]{opacity:.5;cursor:not-allowed}.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}:is(.t-text-input .empty-node):before{position:absolute;color:currentColor;cursor:text;opacity:.5}: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:350px;overflow:hidden;flex-shrink:1}.t-emoji-picker emoji-picker{width:100%;border:0;height:349px;--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: #1e60e1;--button-hover-background: #d4d4d488;--input-border-radius: 4px;--emoji-font-family: "Twemoji Country Flags", "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", sans-serif}.t-emoji-picker[t-loading]{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#1e60e1}.t-emoji-picker[t-loading] .t-loading-icon{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}.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:#1e60e1}.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}
|
package/default.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://cdn.talkjs.com/fonts/Inter.css";:root{--reach-menu-button: 1}[data-reach-menu]{position:relative}[data-reach-menu-popover]{display:block;position:absolute}[data-reach-menu-popover][hidden]{display:none}[data-reach-menu-list],[data-reach-menu-items]{display:block;white-space:nowrap;border:solid 1px hsla(0,0%,0%,.25);background:#fffffffc;outline:none;padding:1rem 0;font-size:85%}[data-reach-menu-item]{display:block;user-select:none}[data-reach-menu-item]{cursor:pointer;display:block;color:inherit;font:inherit;text-decoration:initial;padding:5px 20px}[data-reach-menu-item][data-selected]{background:#1159a6;color:#fff;outline:none}[data-reach-menu-item][aria-disabled]{opacity:.5;cursor:not-allowed}.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}:is(.t-text-input .empty-node):before{position:absolute;color:currentColor;cursor:text;opacity:.5}: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-chatbox *:where(:not(svg,svg *)){all:revert-layer}.t-chatbox{--default-chat-width: 420px;font-family:Twemoji Country Flags,Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.37;color:#111;letter-spacing:normal;margin:0;position:relative;width:100%;height:100%;overflow:hidden;background-color:#fff;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:none}.t-chatbox button{font-family:inherit;font-size:1em}.t-chatbox *,.t-chatbox *:before,.t-chatbox *:after{box-sizing:border-box}.t-chatbox svg{fill:currentColor}.t-chatbox em{font-style:italic}.t-chatbox strong{font-weight:700}.t-chatbox del{text-decoration:line-through}.t-chatbox code{font-family:Cascadia Code,Droid Sans Mono,Menlo,Consolas,Lucida Console,Monaco,monospace;font-variant-ligatures:none}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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}.t-chatbox .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}.t-chatbox .t-error-panel{background-color:#f7f7f7}:is(.t-chatbox .t-error-panel) .t-heading{font-size:2em}.t-loading-icon{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}.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:#1e60e1}.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-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-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-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-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 hr{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-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-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-icon{display:inline-block;vertical-align:middle;overflow:hidden}.t-theme-image-block{display:contents;min-height:100px;max-height:500px}.t-theme-image-block .download-icon{width:1em;height:1em;margin-right:.2em}.t-theme-image-block .t-root{position:relative;display:flex;justify-content:center;align-items:center;min-height:inherit;max-height:inherit;height:100%;overflow:hidden;margin:0 -1em .5em}.t-theme-image-block .t-image{min-width:0;min-height:0;max-height:inherit;width:100%;height:auto}.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-message{display:block;margin-top:.35em}.t-theme-message:last-child{margin-top:1.35em}.t-theme-message[t-sender=currentUser]:not(:last-child){margin-right:3em}.t-theme-message[t-sender=other]:not(:last-child){margin-left:3em}.t-theme-message:not(:last-child) .t-theme-avatar{display:none}.t-theme-message:last-child .t-theme-avatar{display:block}.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}.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;margin-right:.5em}.t-theme-message[t-sender=other] .t-message-body{margin-left:.5em}.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-image-block,.t-theme-video-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-action-menu-trigger{border:none;color:inherit;cursor:pointer;position:absolute;top:.58em;right:.58em;margin:-.08em;z-index:1;font-size:120%;background:inherit;visibility:hidden}.t-theme-message .t-message-row:hover .t-message-action-menu-trigger{visibility:visible}.t-theme-message .t-action-menu-icon{width:1.143em;height:1.143em}.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:-.3rem;min-width:1em}.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-action]{padding:.45em .65em;cursor:pointer;background:none;border:none;border-radius:.5em;text-align:left}.t-theme-message-action-menu [t-action]:hover{background-color:#007df9;color:#fff}.t-theme-message-action-menu [t-action=delete]{color:#ef4444}.t-theme-message-action-menu [t-action=delete]:hover{background-color:#fec8c866;color:#ef4444}.t-theme-message-field .t-wrapper{flex-shrink:0;position:relative;order:2;padding:16px;color:#111;font-size:16px;background-color:#ececec;border-top:#d4d4d4 solid 1px;max-width:100%;width:100%;margin:0 auto}.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 ul{list-style:inside;margin:0;padding:0}.t-theme-referenced-message .t-content li{display:inline list-item;margin-right:1em}.t-theme-referenced-message .t-content li::marker{content:"• "}.t-theme-reply-bar{height:4.286em;display:flex;align-items:center;background-color:#ececec;padding:.714em;color:#262626;order:1;border-top:#d4d4d4 solid 1px}.t-theme-reply-bar .t-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.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-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-text-form{width:100%;max-width:100%;margin:0 auto;display:flex}.t-theme-text-form .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 1em;transition:box-shadow .15s ease-out}.t-theme-text-form .t-editor .t-text-input:focus-visible{border-color:#fff;outline:#a3a3a3 solid 1px}.t-theme-text-form .t-editor .t-text-input p{margin:.875em 0;padding:0;border:0;outline:0}@supports not selector(:focus-visible){.t-theme-text-form .t-editor .t-text-input:focus{border-color:#fff;outline:#a3a3a3 solid 1px}}.t-theme-text-form .t-send-column{flex-grow:0;flex-shrink:0;white-space:nowrap;align-self:center;display:flex}.t-theme-text-form .t-textbox-column{position:relative;flex-grow:1;margin-right:.28em}.t-theme-text-form .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-text-form .t-send-button:hover,.t-theme-text-form .t-send-button:focus{background-color:#2626260d}.t-theme-text-form .t-send-button:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(#007df9,50%)}.t-theme-text-form .t-send-button{display:flex}.t-theme-text-form .t-send-button[disabled]{color:currentColor}.t-theme-text-form .t-readonly{opacity:.5;user-select:none}.t-theme-text-form .t-button-overlay{position:absolute;right:0;top:0;bottom:0;margin-right:8px;display:flex;align-items:center}.t-theme-text-form [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-text-form [t-kind=icon-button]:hover,.t-theme-text-form [t-kind=icon-button]:focus{background-color:rgba(#262626,5%);opacity:1}.t-theme-text-form [t-kind=icon-button]:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(#007DF9,50%)}.t-theme-video-block{display:contents;min-height:100px;max-height:500px}.t-theme-video-block .download-icon{width:1em;height:1em;margin-right:.2em}.t-theme-video-block .t-root{position:relative;display:flex;justify-content:center;align-items:center;min-height:inherit;max-height:inherit;height:100%;overflow:hidden;margin:0 -1em .5em}.t-theme-video-block .t-video{min-width:0;min-height:0;max-height:inherit}.t-theme-video-block .t-filesize{font-size:.8em}.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}}
|
|
1
|
+
@import"https://cdn.talkjs.com/fonts/Inter.css";.t-chatbox *:where(:not(svg,svg *)){all:revert-layer}.t-chatbox{--default-chat-width: 420px;font-family:Twemoji Country Flags,Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.37;color:#111;letter-spacing:normal;margin:0;position:relative;width:100%;height:100%;overflow:hidden;background-color:#fff;border:1px solid #d4d4d4;border-radius:.75em;box-shadow:none}.t-chatbox button{font-family:inherit;font-size:1em}.t-chatbox *,.t-chatbox *:before,.t-chatbox *:after{box-sizing:border-box}.t-chatbox svg{fill:currentColor}.t-chatbox em{font-style:italic}.t-chatbox strong{font-weight:700}.t-chatbox del{text-decoration:line-through}.t-chatbox code{font-family:Cascadia Code,Droid Sans Mono,Menlo,Consolas,Lucida Console,Monaco,monospace;font-variant-ligatures:none}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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}.t-chatbox .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}.t-chatbox .t-error-panel{background-color:#f7f7f7}:is(.t-chatbox .t-error-panel) .t-heading{font-size:2em}.t-loading-icon{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}:root{--reach-menu-button: 1}[data-reach-menu]{position:relative}[data-reach-menu-popover]{display:block;position:absolute}[data-reach-menu-popover][hidden]{display:none}[data-reach-menu-list],[data-reach-menu-items]{display:block;white-space:nowrap;border:solid 1px hsla(0,0%,0%,.25);background:#fffffffc;outline:none;padding:1rem 0;font-size:85%}[data-reach-menu-item]{display:block;user-select:none}[data-reach-menu-item]{cursor:pointer;display:block;color:inherit;font:inherit;text-decoration:initial;padding:5px 20px}[data-reach-menu-item][data-selected]{background:#1159a6;color:#fff;outline:none}[data-reach-menu-item][aria-disabled]{opacity:.5;cursor:not-allowed}.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}:is(.t-text-input .empty-node):before{position:absolute;color:currentColor;cursor:text;opacity:.5}: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:350px;overflow:hidden;flex-shrink:1}.t-emoji-picker emoji-picker{width:100%;border:0;height:349px;--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: #1e60e1;--button-hover-background: #d4d4d488;--input-border-radius: 4px;--emoji-font-family: "Twemoji Country Flags", "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", sans-serif}.t-emoji-picker[t-loading]{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#1e60e1}.t-emoji-picker[t-loading] .t-loading-icon{animation:spin 1.2s cubic-bezier(.42,0,.58,1) infinite;display:block;margin:auto;width:4em;height:4em}.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:#1e60e1}.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-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-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-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-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-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-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-icon{display:inline-block;vertical-align:middle;overflow:hidden}.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-message{display:block;margin-top:.35em}.t-theme-message:last-child{margin-top:1.35em}.t-theme-message[t-sender=currentUser]:not(:last-child){margin-right:3em}.t-theme-message[t-sender=other]:not(:last-child){margin-left:3em}.t-theme-message:not(:last-child) .t-theme-avatar{display:none}.t-theme-message:last-child .t-theme-avatar{display:block}.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}.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;margin-right:.5em}.t-theme-message[t-sender=other] .t-message-body{margin-left:.5em}.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:-.3rem;min-width:1em}.t-theme-message .t-message-action-menu-button{border:none;color:inherit;cursor:pointer;position:absolute;top:.58em;right:.58em;margin:-.08em;z-index:1;font-size:120%;background:inherit;visibility:hidden}.t-theme-message .t-message-row:hover .t-message-action-menu-button,.t-theme-message .t-message-row:focus-within .t-message-action-menu-button{visibility:visible}.t-message-action-menu-button .t-action-menu-icon{width:1.143em;height:1.143em}.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;max-height:calc(100% - 100px)}.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}.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-referenced-message .t-content ul{list-style:inside;margin:0;padding:0}.t-theme-referenced-message .t-content li{display:inline list-item;margin-right:1em}.t-theme-referenced-message .t-content li::marker{content:"• "}.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}.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-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-text-form{width:100%;max-width:100%;margin:0 auto;display:flex}.t-theme-text-form .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 1em;transition:box-shadow .15s ease-out}.t-theme-text-form .t-editor .t-text-input:focus-visible{border-color:#fff;outline:#a3a3a3 solid 1px}.t-theme-text-form .t-editor .t-text-input p{margin:.875em 0;padding:0;border:0;outline:0}@supports not selector(:focus-visible){.t-theme-text-form .t-editor .t-text-input:focus{border-color:#fff;outline:#a3a3a3 solid 1px}}.t-theme-text-form .t-send-column{flex-grow:0;flex-shrink:0;white-space:nowrap;align-self:center;display:flex}.t-theme-text-form .t-textbox-column{position:relative;flex-grow:1;margin-right:.28em}.t-theme-text-form .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-text-form .t-send-button:hover,.t-theme-text-form .t-send-button:focus{background-color:#2626260d}.t-theme-text-form .t-send-button:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(#007df9,50%)}.t-theme-text-form .t-send-button{display:flex}.t-theme-text-form .t-send-button[disabled]{color:currentColor}.t-theme-text-form .t-readonly{opacity:.5;user-select:none}.t-theme-text-form .t-button-overlay{position:absolute;right:0;top:0;bottom:0;margin-right:8px;display:flex;align-items:center}.t-theme-text-form [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-text-form [t-kind=icon-button]:hover,.t-theme-text-form [t-kind=icon-button]:focus{background-color:rgba(#262626,5%);opacity:1}.t-theme-text-form [t-kind=icon-button]:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(#007DF9,50%)}.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-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}}
|
package/default.d.ts
CHANGED
|
@@ -145,8 +145,6 @@ export declare interface ChatboxRef {
|
|
|
145
145
|
custom?: Record<string, string>;
|
|
146
146
|
}): Promise<void>;
|
|
147
147
|
setReferencedMessage(messageId: string | null): void;
|
|
148
|
-
openMessageActionMenu(messageId: string): void;
|
|
149
|
-
closeMessageActionMenu(): void;
|
|
150
148
|
getMessageFieldText: () => string;
|
|
151
149
|
setMessageFieldText: (text: string) => void;
|
|
152
150
|
}
|
|
@@ -158,6 +156,11 @@ declare interface ChatHeaderProps {
|
|
|
158
156
|
t: Translation;
|
|
159
157
|
chatbox: ChatboxRef;
|
|
160
158
|
themeCustom?: any;
|
|
159
|
+
isUserConnected: {
|
|
160
|
+
[userId: string]: boolean;
|
|
161
|
+
};
|
|
162
|
+
permissions: UserPermissions;
|
|
163
|
+
device: DeviceFeatures;
|
|
161
164
|
}
|
|
162
165
|
|
|
163
166
|
declare interface ContentBlockProps {
|
|
@@ -178,11 +181,23 @@ declare interface DeleteMessageEvent {
|
|
|
178
181
|
conversation: ConversationSnapshot;
|
|
179
182
|
}
|
|
180
183
|
|
|
184
|
+
declare interface DeviceFeatures {
|
|
185
|
+
/**
|
|
186
|
+
* True if the browser supports IndexedDB, which the emoji picker depends on.
|
|
187
|
+
*/
|
|
188
|
+
supportsEmojiPicker: boolean;
|
|
189
|
+
/**
|
|
190
|
+
* True if the user agents reports this device as mobile (incl tablets).
|
|
191
|
+
*/
|
|
192
|
+
isMobile: boolean;
|
|
193
|
+
}
|
|
194
|
+
|
|
181
195
|
declare interface EditorState {
|
|
182
196
|
isTyping: boolean;
|
|
183
197
|
atTextLimit: boolean;
|
|
184
198
|
isEmpty: boolean;
|
|
185
199
|
characterCount: number;
|
|
200
|
+
showEmojiPicker: boolean;
|
|
186
201
|
}
|
|
187
202
|
|
|
188
203
|
declare interface FileBlockProps extends ContentBlockProps {
|
|
@@ -191,7 +206,7 @@ declare interface FileBlockProps extends ContentBlockProps {
|
|
|
191
206
|
}
|
|
192
207
|
|
|
193
208
|
declare interface IconProps {
|
|
194
|
-
type: "attach" | "chevronLeft" | "left" | "chevronUp" | "up" | "chevronDown" | "down" | "close" | "emoji" | "locationPin" | "more" | "plus" | "search" | "send" | "spinner" | "play" | "pause" | "updown" | "addEmoji" | "microphone" | "mic" | "stop" | "download" | "location" | "email" | "movie" | "image" | "attachment" | "horizontalDots" | "verticalDots" | "reply" | "back";
|
|
209
|
+
type: "attach" | "chevronLeft" | "left" | "chevronRight" | "right" | "chevronUp" | "up" | "chevronDown" | "down" | "close" | "emoji" | "locationPin" | "more" | "plus" | "search" | "send" | "spinner" | "play" | "pause" | "updown" | "addEmoji" | "microphone" | "mic" | "stop" | "download" | "location" | "email" | "movie" | "image" | "attachment" | "horizontalDots" | "verticalDots" | "reply" | "back";
|
|
195
210
|
className?: string;
|
|
196
211
|
themeCustom?: any;
|
|
197
212
|
}
|
|
@@ -200,6 +215,7 @@ declare interface IEditorController extends EditorState {
|
|
|
200
215
|
send(): void;
|
|
201
216
|
shareLocation(): void;
|
|
202
217
|
attachFile(): void;
|
|
218
|
+
toggleEmojiPicker(): void;
|
|
203
219
|
}
|
|
204
220
|
|
|
205
221
|
declare interface ImageBlockProps extends ContentBlockProps {
|
|
@@ -211,16 +227,6 @@ declare interface LocationBlockProps extends ContentBlockProps {
|
|
|
211
227
|
block: LocationBlock;
|
|
212
228
|
}
|
|
213
229
|
|
|
214
|
-
declare interface MessageActionMenuProps {
|
|
215
|
-
currentUser: UserSnapshot;
|
|
216
|
-
permissions: MessagePermissions;
|
|
217
|
-
conversation: ConversationSnapshot;
|
|
218
|
-
message: MessageSnapshot;
|
|
219
|
-
chatbox: ChatboxRef;
|
|
220
|
-
t: Translation;
|
|
221
|
-
themeCustom?: any;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
230
|
declare interface MessageDividerProps {
|
|
225
231
|
isReadMarker: boolean;
|
|
226
232
|
isDayMarker: boolean;
|
|
@@ -242,6 +248,7 @@ declare interface MessageFieldProps {
|
|
|
242
248
|
chatbox: ChatboxRef;
|
|
243
249
|
editor?: IEditorController;
|
|
244
250
|
themeCustom?: any;
|
|
251
|
+
device: DeviceFeatures;
|
|
245
252
|
}
|
|
246
253
|
|
|
247
254
|
declare interface MessageListFooterProps {
|
|
@@ -269,8 +276,8 @@ declare interface MessageProps {
|
|
|
269
276
|
permissions: MessagePermissions;
|
|
270
277
|
t: Translation;
|
|
271
278
|
chatbox: ChatboxRef;
|
|
272
|
-
messageActionMenuAnchorRef: React_2.RefObject<HTMLElement | undefined>;
|
|
273
279
|
themeCustom?: any;
|
|
280
|
+
device: DeviceFeatures;
|
|
274
281
|
}
|
|
275
282
|
|
|
276
283
|
declare type MessageStatus = "sending" | "sent" | "everyoneRead";
|
|
@@ -320,7 +327,6 @@ declare interface Theme {
|
|
|
320
327
|
ChatHeader: React_2.ComponentType<ChatHeaderProps>;
|
|
321
328
|
Message: React_2.ComponentType<MessageProps>;
|
|
322
329
|
MessageField: React_2.ComponentType<MessageFieldProps>;
|
|
323
|
-
MessageActionMenu: React_2.ComponentType<MessageActionMenuProps>;
|
|
324
330
|
Icon: React_2.ComponentType<IconProps>;
|
|
325
331
|
MessageDivider: React_2.ComponentType<MessageDividerProps>;
|
|
326
332
|
MessageListFooter: React_2.ComponentType<MessageListFooterProps>;
|
|
@@ -425,6 +431,22 @@ declare interface VoiceBlockProps extends ContentBlockProps {
|
|
|
425
431
|
export { }
|
|
426
432
|
|
|
427
433
|
|
|
434
|
+
declare global {
|
|
435
|
+
namespace JSX {
|
|
436
|
+
interface IntrinsicElements {
|
|
437
|
+
"emoji-picker": {
|
|
438
|
+
class?: string;
|
|
439
|
+
ref: React.Ref<HTMLElement>;
|
|
440
|
+
};
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
interface HTMLElementEventMap {
|
|
444
|
+
"emoji-click": EmojiClickEvent;
|
|
445
|
+
"skin-tone-change": SkinToneChangeEvent;
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
|
|
428
450
|
declare global {
|
|
429
451
|
interface HTMLElementTagNameMap {
|
|
430
452
|
"t-chatbox": ChatboxHTMLElement;
|