@talkjs/react-components 0.0.8

package/LICENSE.md

@@ -0,0 +1 @@
+This is proprietary software. See Terms & Conditions here: https://talkjs.com/terms

package/README.md

@@ -0,0 +1,42 @@
+# React Components for TalkJS
+
+The `@talkjs/react-components` library provides React chat UI components for [TalkJS](https://talkjs.com).
+
+## Prerequisites
+
+To use this package, you will need a [TalkJS account](https://talkjs.com/dashboard/login). TalkJS provides a ready-to-use chat client for your application. Your account gives you access to TalkJS's free development environment.
+
+## Examples
+
+Install [`@talkjs/react-components`](https://www.npmjs.com/package/@talkjs/react-components):
+
+```sh
+npm install @talkjs/react-components
+# or
+yarn add @talkjs/react-components
+```
+
+Import the `Chatbox` component and the related styling into the component where you want to have your chat UI:
+
+```js
+import { Chatbox } from "@talkjs/react-components";
+import "@talkjs/react-components/default.css";
+```
+
+Then add the `Chatbox` component:
+
+```js
+<Chatbox
+  appId="<APP_ID>"
+  userId="sample_user_alice"
+  conversationId="sample_conversation"
+/>
+```
+
+Replace the `<APP_ID>` with your TalkJS app ID, which you can find in the **Settings** tab of the TalkJS dashboard.
+
+For more details, see our [React getting started guide](https://talkjs.com/docs/Reference/Components/Guides/React/).
+
+## Support
+
+If you encounter any problems with `@talkjs/react-components`, please open a [chat with support](https://talkjs.com/?chat). TalkJS support is staffed by engineers.

package/base.css

@@ -0,0 +1 @@
+@import"https://cdn.talkjs.com/fonts/Inter.css";.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}: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{--default-chat-width: 420px;font-family:Twemoji Country Flags,Inter,sans-serif;cursor:initial;text-align:initial;text-transform:initial;text-indent:initial;visibility:initial;white-space:initial;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)}}

package/default.css

@@ -0,0 +1 @@
+@import"https://cdn.talkjs.com/fonts/Inter.css";.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}}.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}: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{--default-chat-width: 420px;font-family:Twemoji Country Flags,Inter,sans-serif;cursor:initial;text-align:initial;text-transform:initial;text-indent:initial;visibility:initial;white-space:initial;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)}}

package/default.d.ts

@@ -0,0 +1,442 @@
+import { AudioBlock } from '@talkjs/core';
+import { ConversationSnapshot } from '@talkjs/core';
+import { FileBlock } from '@talkjs/core';
+import { FileToken } from '@talkjs/core';
+import { ForwardRefExoticComponent } from 'react';
+import { ImageBlock } from '@talkjs/core';
+import { LocationBlock } from '@talkjs/core';
+import { MessageSnapshot } from '@talkjs/core';
+import { ParticipantSnapshot } from '@talkjs/core';
+import type * as React_2 from 'react';
+import { RefAttributes } from 'react';
+import { TextBlock } from '@talkjs/core';
+import { TypingSnapshot } from '@talkjs/core';
+import { UserSnapshot } from '@talkjs/core';
+import { VideoBlock } from '@talkjs/core';
+import { VoiceBlock } from '@talkjs/core';
+
+declare type AppId = Brand<string, "App ID">;
+
+declare interface AppMetadata {
+    id: AppId;
+    name: string;
+    defaultLocale: string;
+    custom: Record<string, string>;
+}
+
+declare interface AudioBlockProps extends ContentBlockProps {
+    block: AudioBlock;
+    downloadUrl?: string;
+}
+
+/**
+ * Brands a base type `T`.
+ *
+ * @example
+ * ```ts
+ * type UserId = Brand<string, "UserId">;
+ * type MessageId = Brand<string, "MessageId">;
+ *
+ * const a: UserId = "abc" as UserId;    // works
+ * const b: UserId = "abc";              // error
+ * const c: UserId = "abc" as MessageId; // error
+ * ```
+ */
+declare type Brand<T, B extends string> = T & Branding<B>;
+
+declare interface Branding<B extends string> {
+    __tag: Record<B, true>;
+}
+
+/**
+ * @public
+ *
+ * A string that is one of `"notifications" | "microphone" | "geolocation"`.
+ *
+ * @remarks
+ * Note that more possible values may be added in the future, so make sure your
+ * handler can deal with unknown permission types gracefully.
+ */
+declare type BrowserPermission = "notifications" | "microphone" | "geolocation";
+
+/**
+ * Passed to `chatbox.beforeBrowserPermissionPrompt` when a browser permission
+ * dialog needs to be shown to the user.
+ *
+ * @public
+ */
+declare interface BrowserPermissionRequest {
+    /**
+     * The type of permission requested.
+     *
+     * @remarks
+     * Note that more possible values may be added in the future, so make sure your
+     * handler can deal with unknown permission types gracefully.
+     */
+    type: BrowserPermission;
+    /**
+     * Cancel whatever user action caused the permission to be requested.
+     *
+     * @remarks
+     * For example, if a user wants to share their location for the first time so
+     * that this event is triggered, then if you call `cancel()`, no permission
+     * will be requested from the browser, the location sharing will be cancelled,
+     * and TalkJS will continue as if the location sharing button had not been
+     * clicked at all.
+     *
+     * This may be useful if you're using this event to show custom UI elements
+     * that nudge users towards granting permission, and this UI has a "cancel"
+     * button.
+     */
+    cancel(): void;
+    /**
+     * Show the browser permission prompt that lets the user allow or deny this
+     * permission.
+     *
+     * @remarks
+     * When the user clicks "Allow", then the user action that triggered the
+     * browser permission request will proceed and the return value resolves to
+     * `"granted"`.
+     *
+     * When the user clicks "Deny", then the user action is cancelled, the
+     * `onMissingBrowserPermission` event is triggered, and the return value
+     * resolves to `"denied"`.
+     */
+    showPrompt(): Promise<"granted" | "denied">;
+}
+
+export declare const Chatbox: typeof Chatbox_2;
+
+declare const Chatbox_2: ForwardRefExoticComponent<ChatboxProps & RefAttributes<ChatboxRef>>;
+
+export declare interface ChatboxProps {
+    appId: string;
+    userId: string;
+    conversationId: string;
+    token?: string;
+    tokenFetcher?: () => string | Promise<string>;
+    theme?: Theme;
+    enterSendsMessage?: boolean;
+    chatHeaderVisible?: boolean;
+    messageFieldVisible?: boolean;
+    messageFieldSpellcheck?: boolean;
+    messageFieldPlaceholder?: string;
+    onDeleteMessage?: (e: DeleteMessageEvent) => void;
+    onSendMessage?: (e: SendMessageEvent) => void;
+    beforeBrowserPermissionPrompt?: (request: BrowserPermissionRequest) => void;
+    onMissingBrowserPermission?: (e: MissingBrowserPermissionEvent) => void;
+    themeCustom?: any;
+}
+
+export declare interface ChatboxRef {
+    deleteMessage(messageId: string): Promise<void>;
+    editMessage(messageId: string, text: string): Promise<void>;
+    sendMessage(message: {
+        text: string;
+        custom?: Record<string, string>;
+        referencedMessageId?: string;
+    }): Promise<void>;
+    sendFileMessage(message: {
+        fileToken: FileToken;
+        custom?: Record<string, string>;
+    }): Promise<void>;
+    sendLocationMessage(message: {
+        location: Coordinates;
+        custom?: Record<string, string>;
+    }): Promise<void>;
+    setReferencedMessage(messageId: string | null): void;
+    openMessageActionMenu(messageId: string): void;
+    closeMessageActionMenu(): void;
+    getMessageFieldText: () => string;
+    setMessageFieldText: (text: string) => void;
+}
+
+declare interface ChatHeaderProps {
+    conversation: ConversationSnapshot;
+    participants: ParticipantSnapshot[];
+    currentUser: UserSnapshot;
+    t: Translation;
+    chatbox: ChatboxRef;
+    themeCustom: any;
+}
+
+declare interface ContentBlockProps {
+    message: MessageSnapshot;
+    currentUser: UserSnapshot;
+    t: Translation;
+    themeCustom: any;
+}
+
+declare interface Coordinates {
+    latitude: number;
+    longitude: number;
+}
+
+declare interface DeleteMessageEvent {
+    currentUser: UserSnapshot;
+    message: MessageSnapshot;
+    conversation: ConversationSnapshot;
+}
+
+declare interface EditorState {
+    isTyping: boolean;
+    atTextLimit: boolean;
+    isEmpty: boolean;
+    characterCount: number;
+}
+
+declare interface FileBlockProps extends ContentBlockProps {
+    block: FileBlock;
+    downloadUrl?: string;
+}
+
+declare interface IconProps {
+    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";
+    className?: string;
+    themeCustom: any;
+}
+
+declare interface IEditorController extends EditorState {
+    send(): void;
+    shareLocation(): void;
+    attachFile(): void;
+}
+
+declare interface ImageBlockProps extends ContentBlockProps {
+    block: ImageBlock;
+    downloadUrl?: string;
+}
+
+declare interface LocationBlockProps extends ContentBlockProps {
+    block: LocationBlock;
+}
+
+declare interface MessageActionMenuProps {
+    currentUser: UserSnapshot;
+    permissions: MessagePermissions;
+    conversation: ConversationSnapshot;
+    message: MessageSnapshot;
+    chatbox: ChatboxRef;
+    t: Translation;
+    themeCustom: any;
+}
+
+declare interface MessageDividerProps {
+    isReadMarker: boolean;
+    isDayMarker: boolean;
+    timestamp?: number;
+    currentUser: UserSnapshot;
+    conversation: ConversationSnapshot;
+    app: AppMetadata;
+    t: Translation;
+    themeCustom: any;
+}
+
+declare interface MessageFieldProps {
+    conversation: ConversationSnapshot;
+    participants: ParticipantSnapshot[];
+    referencedMessage: MessageSnapshot;
+    currentUser: UserSnapshot;
+    permissions: UserPermissions;
+    t: Translation;
+    chatbox: ChatboxRef;
+    editor?: IEditorController;
+    themeCustom: any;
+}
+
+declare interface MessageListFooterProps {
+    typing: TypingSnapshot;
+    conversation: ConversationSnapshot;
+    participants: ParticipantSnapshot[];
+    currentUser: UserSnapshot;
+    t: Translation;
+    chatbox: ChatboxRef;
+    themeCustom: any;
+}
+
+declare interface MessagePermissions extends UserPermissions {
+    canDeleteMessage: boolean;
+    canReplyToMessage: boolean;
+}
+
+declare interface MessageProps {
+    app: AppMetadata;
+    currentUser: UserSnapshot;
+    message: MessageSnapshot;
+    messageStatus: MessageStatus;
+    conversation: ConversationSnapshot;
+    participants: ParticipantSnapshot[];
+    permissions: MessagePermissions;
+    t: Translation;
+    chatbox: ChatboxRef;
+    messageActionMenuAnchorRef: React_2.RefObject<HTMLElement | undefined>;
+    themeCustom: any;
+}
+
+declare type MessageStatus = "sending" | "sent" | "everyoneRead";
+
+/**
+ * Sent by `onMissingBrowserPermission` when the user tried to do an action that
+ * require explicit browser permission, but that permission has been denied.
+ *
+ * @remarks
+ * This event is meant to let you show a message to the user if an action (eg
+ * sharing a location, or enabling notifications) can't proceed because the
+ * browser permission for that has been denied.
+ *
+ * If you want to control when to show the browser permissions prompt, use
+ * `beforeBrowserPermissionPrompt`.
+ *
+ * This event is emitted both when the user has denied this permission in the
+ * past, and when a user action just triggered a browser permissions prompt
+ * which the user then denied. If you need to differentiate between these two
+ * cases, use `beforeBrowserPermissionPrompt`, and inspect the return value of
+ * {@link BrowserPermissionRequest.showPrompt}.
+ *
+ * @public
+ */
+declare interface MissingBrowserPermissionEvent {
+    /**
+     * The type of permission that was denied.
+     *
+     * @remarks
+     * Note that more possible values may be added in the future, so make sure your
+     * handler can deal with unknown permission types gracefully.
+     */
+    type: BrowserPermission;
+}
+
+declare interface SendMessageEvent {
+    currentUser: UserSnapshot;
+    message: MessageSnapshot;
+    conversation: ConversationSnapshot;
+}
+
+declare interface TextBlockProps extends ContentBlockProps {
+    block: TextBlock;
+}
+
+declare interface Theme {
+    ChatHeader: React_2.ComponentType<ChatHeaderProps>;
+    Message: React_2.ComponentType<MessageProps>;
+    MessageField: React_2.ComponentType<MessageFieldProps>;
+    MessageActionMenu: React_2.ComponentType<MessageActionMenuProps>;
+    Icon: React_2.ComponentType<IconProps>;
+    MessageDivider: React_2.ComponentType<MessageDividerProps>;
+    MessageListFooter: React_2.ComponentType<MessageListFooterProps>;
+    TextBlock: React_2.ComponentType<TextBlockProps>;
+    FileBlock: React_2.ComponentType<FileBlockProps>;
+    LocationBlock: React_2.ComponentType<LocationBlockProps>;
+    ImageBlock: React_2.ComponentType<ImageBlockProps>;
+    AudioBlock: React_2.ComponentType<AudioBlockProps>;
+    VoiceBlock: React_2.ComponentType<VoiceBlockProps>;
+    VideoBlock: React_2.ComponentType<VideoBlockProps>;
+}
+
+export declare const theme: Theme;
+
+declare type Translation = TranslationData & TranslationStrings;
+
+declare interface TranslationData {
+    locale: string;
+}
+
+declare interface TranslationStrings {
+    YESTERDAY: string;
+    TODAY: string;
+    DAYS: string;
+    HOURS: string;
+    MINUTES: string;
+    JUST_NOW: string;
+    LOCATION: string;
+    CANCEL: string;
+    INBOX: string;
+    DESKTOP_NOTIFICATIONS: string;
+    DESKTOP_NOTIFICATIONS_ERROR: string;
+    DESKTOP_NOTIFICATIONS_DEMO_TITLE: (appName: string) => string;
+    DESKTOP_NOTIFICATIONS_DEMO_BODY: string;
+    SEND_BUTTON_TEXT: string;
+    ENTRYBOX_TEXT_LIMIT: string;
+    ENTRYBOX_PLACEHOLDER: string;
+    ENTRYBOX_PLACEHOLDER_CHAT_CLOSED: string;
+    ENTRYBOX_PLACEHOLDER_CHAT_READONLY: string;
+    MESSAGELIST_LOADING_OLDER: string;
+    MESSAGELIST_SHOW_OLDER: string;
+    MESSAGELIST_NEW_MARKER: string;
+    MESSAGE_SENT_VIA_EMAIL: string;
+    YOU_MARKER: string;
+    UPLOAD_IN_PROGRESS: string;
+    UPLOAD_SEND_FILE: string;
+    UPLOAD_SHARE_LOCATION: string;
+    UPLOAD_ERROR: string;
+    SHARE_LOCATION_ERROR: string;
+    LOADING: string;
+    HUB_EMPTY: string;
+    HUB_SHOW_EARLIER: string;
+    INBOX_NO_CHATS_TITLE: string;
+    INBOX_NO_CHATS_BODY: string;
+    ENABLE_TRANSLATION: string;
+    DISABLE_TRANSLATION: string;
+    SEARCH_PLACEHOLDER_TEXT: string;
+    SEARCH_SEARCHING: string;
+    SEARCH_NO_RESULTS: string;
+    SEARCH_NO_MORE_RESULTS: string;
+    CHAT_NOT_FOUND: string;
+    DELETE_MESSAGE: string;
+    DELETION_EXPLANATION: string;
+    EDIT_MESSAGE: string;
+    SAVE: string;
+    EDITED_INDICATOR: string;
+    REPLY_TO_MESSAGE: string;
+    REPLY_TO_ARIA_LABEL: (senderName: string, content: string) => string;
+    REPLY_MODE_LEAVE_ARIA_LABEL: string;
+    ADD_REACTION: string;
+    AUTH_EXPIRED_OVERLAY_TITLE: string;
+    AUTH_EXPIRED_OVERLAY_DESCRIPTION: string;
+    VOICE_MESSAGE: string;
+    LEAVE_CONVERSATION: string;
+    MARK_CONVERSATION_AS_UNREAD: string;
+    STATUS_INDICATOR_ONLINE: string;
+    STATUS_INDICATOR_OFFLINE: string;
+    CONTACT_INFORMATION_HIDDEN: string;
+}
+
+declare interface UserPermissions {
+    showTypingIndicator: boolean;
+    canShareFile: boolean;
+    canShareLocation: boolean;
+    canMention: boolean;
+    showOnlineStatus: boolean;
+    canSendVoiceMessage: boolean;
+    canLeaveConversation: boolean;
+    canMarkConversationAsUnread: boolean;
+}
+
+declare interface VideoBlockProps extends ContentBlockProps {
+    block: VideoBlock;
+    downloadUrl?: string;
+}
+
+declare interface VoiceBlockProps extends ContentBlockProps {
+    block: VoiceBlock;
+    downloadUrl?: string;
+}
+
+export { }
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "t-chatbox": ChatboxHTMLElement;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "t-chatbox": typeof Chatbox;
+        }
+    }
+}
+