@bcc-code/vue-bcc-chat-ui 6.5.0 → 7.0.2

package/dist/vue-bcc-chat-ui.css

@@ -1 +0,0 @@
-.cc__imageviewer__full-screen-viewer[data-v-1563719d]{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000e6;z-index:10000}.cc__imageviewer__zoom-container[data-v-1563719d]{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.cc__imageviewer__loading[data-v-1563719d]{position:absolute;z-index:-1}img[data-v-1563719d]{max-width:100%;max-height:100%}.cc__imageviewer-option[data-v-1563719d]{position:fixed;cursor:pointer;z-index:10001;padding:10px}.cc__imageviewer-option--close[data-v-1563719d]{top:0;right:0;margin-top:env(safe-area-inset-top)}.cc__imageviewer-option--download[data-v-1563719d]{top:0;left:0;margin-top:env(safe-area-inset-top)}.bcc-image_container[data-v-4640fa7a]{max-height:300px;justify-content:center;overflow:hidden;border-radius:10px;isolation:isolate;min-height:28px;min-width:84px}.bcc-image_container img[data-v-4640fa7a]{max-height:500px;max-width:400px;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;position:relative}.bcc-image_container .placeholder[data-v-4640fa7a]:before{content:"⌛"}.bcc__reply_preview__content_wrapper[data-v-47aca85f]{padding:0 12px;position:relative;display:grid;justify-content:start}.bcc__reply_preview__content_bar[data-v-47aca85f]{position:absolute;top:0;bottom:0;border-radius:25px}.bcc__reply_preview__content[data-v-47aca85f]{grid-column:2}.bcc__reply_preview__content>p[data-v-47aca85f]{margin:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;word-break:break-all}.bcc__reply_preview__content>.bcc__reply_preview__title[data-v-47aca85f]{margin-bottom:2px}.bcc__reply_preview__thumbnail[data-v-47aca85f]{grid-column:1;width:2rem;height:2rem;align-self:center;border-radius:3px;overflow:hidden;margin-right:5px}.bcc__reply_preview__thumbnail>img[data-v-47aca85f]{width:100%;height:100%}.bcc-chat-img-msg-bubble{display:block;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto;border-radius:8px;padding-bottom:8px;position:relative}.bcc-chat-img-msg-bubble:last-child{padding-bottom:0}.bcc-chat-msg-bubble{padding:0 12px 8px;width:auto;max-width:500px;line-height:1.2;font:400 14px Archivo,sans-serif,Inter;color:var(--cc__text-color)}.bcc-chat-msg-bubble:first-child{padding-top:8px}.bcc-chat-msg-bubble p{color:var(--cc__text-color);line-height:1.2;word-break:break-word;text-align:left;white-space:normal;margin:8px 0}.bcc-chat-msg-bubble p:first-child{margin-top:0}.bcc-chat-msg-bubble p:last-child{margin-bottom:0}.bcc-chat-msg-bubble h1{font-size:1.6em;font-weight:800}.bcc-chat-msg-bubble h2{font-size:1.4em;font-weight:700}.bcc-chat-msg-bubble h3{font-size:1.2em;font-weight:600}.bcc-chat-msg-bubble h4{font-size:1em;font-weight:500}.bcc-chat-msg-bubble a{color:var(--cc__link-color);text-decoration:underline;font-weight:500}.bcc-chat-msg-bubble ul{padding-left:16px;list-style:disc;margin:8px 0}.bcc-chat-msg-bubble ol{padding-left:16px;list-style:decimal;margin:8px 0}.bcc-chat-msg-bubble--translated{border-top:1px solid;opacity:.8}.bcc-chat-msg-bubble--translated:before{content:"original: ";opacity:.8;margin-bottom:8px;font-size:12px;display:block}.bcc-chat-msg-bubble--reply{position:relative;z-index:0;margin-top:3px;border-radius:6px;overflow:hidden}.bcc-chat-msg-bubble--reply:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.5;z-index:-1;background-color:var(--cc__background)}.bcc__reply_box[data-v-185d4e0a]{padding:8px;display:flex;flex-direction:row;justify-content:space-between;margin:0;min-height:30px}.bcc__reply_preview__close[data-v-185d4e0a]{width:14px;height:14px;display:inline-block}.cc-callscreen__view[data-v-c2b939da],.cc-outgoingcall__wrapper[data-v-f7ff9c81],.cc-call-buttons__wrapper[data-v-af549764]{height:100%;width:100%}.cc-callbuttons-buttons[data-v-af549764]{display:flex;gap:8px}.cc-incomingcall__wrapper[data-v-4528fb51]{position:absolute;left:8px;top:8px;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;min-height:104px;min-width:230px;z-index:100;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;align-items:flex-start}.cc-incomingcall-buttons[data-v-4528fb51]{display:flex;gap:8px}.cc-incomingcall__tailview[data-v-4528fb51]{position:relative}.cc-incomingcall__subtitleview[data-v-4528fb51]{display:flex;align-items:center;justify-content:flex-start;gap:6px}.cc-incomingcall__listitem[data-v-4528fb51]{width:100%;margin-left:-4px}*[data-v-baae0487]{box-sizing:border-box}.cc-list__section[data-v-baae0487]{margin-left:8px}.cc-list__list[data-v-baae0487]::-webkit-scrollbar{background:transparent;width:8px}.cc-list__list[data-v-baae0487]::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-users[data-v-5dfb076b]{overflow:hidden}.cc-users__menus[data-v-5dfb076b]{position:absolute;top:12px;right:12px;cursor:pointer}.cc-add-members__back-button[data-v-0d5d72e4]{position:absolute;left:8px;padding:12px 8px 8px}.cc-add-members__close-button[data-v-0d5d72e4]{position:absolute;right:8px;padding:12px 8px 8px}.cc-users[data-v-0d5d72e4]{height:90%}.cc-add-members__buttons[data-v-0d5d72e4]{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.cc-add-members__buttons-add[data-v-0d5d72e4]{height:42px;width:100%}.cc-banned-members__back[data-v-b1a66727]{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__close-button[data-v-b1a66727]{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view[data-v-b1a66727]{position:relative}.cc-banned-members__menus[data-v-b1a66727]{position:absolute;right:12px;cursor:pointer}.cc-banned-members__unban[data-v-b1a66727]{display:flex;align-items:center;justify-content:flex-end}.tail__view[data-v-aa2f984d]{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.cc-conversations__menus[data-v-aa2f984d]{position:absolute;right:12px;cursor:pointer}.cc-conversations__default-subtitle-view[data-v-aa2f984d]{display:flex;align-items:center;width:90%;flex-direction:column;justify-content:flex-start}.cc-conversations__subtitle[data-v-aa2f984d]{display:flex;justify-content:flex-start;width:100%;align-items:center;min-height:22px}.cc-conversations__thread-view[data-v-aa2f984d]{height:12px;display:flex;justify-content:flex-start;width:100%;align-items:center}.cc-conversations__subtitle-text[data-v-aa2f984d]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.cc-conversations__badge[data-v-aa2f984d]{display:flex}.cc-context-menu[data-v-f27fb8d8]{position:relative}.cc-context-menu__sub-menu[data-v-f27fb8d8]{list-style-type:none;display:flex;position:absolute;flex-direction:column;justify-content:flex-start;align-items:flex-start;border:1px solid #e8e8e8;z-index:3;padding:0;border-radius:8px;min-width:-moz-fit-content;min-width:fit-content;width:100%;max-width:200px}.cc-context-menu__submenu-wrapper[data-v-f27fb8d8]{position:absolute;right:0;width:100%;height:100%}.cc-submenu-bottom .cc-context-menu__sub-menu[data-v-f27fb8d8]{top:100%;margin-top:1px}.cc-submenu-top .cc-context-menu__sub-menu[data-v-f27fb8d8]{bottom:100%;margin-bottom:1px}.hidden[data-v-15dad0f0]{display:none!important}*[data-v-15dad0f0]{box-sizing:border-box}.cc-messagebubble-wrapper[data-v-15dad0f0]{position:relative;width:100%}.cc-messagebubble-wrapper__container[data-v-15dad0f0]{padding-right:8px;border-radius:inherit;display:flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;max-width:60%}.cc-messagebubble-wrapper__messagebubble[data-v-15dad0f0]{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;min-width:0;padding:8px 2px;border-radius:inherit}.cc-messagebubble-wrapper__avatar[data-v-15dad0f0]{position:relative;border-radius:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;padding:8px 4px;margin-top:5px}.cc-messagebubble-title[data-v-15dad0f0]:empty:before{display:none}.cc-messagebubble-title[data-v-15dad0f0]:empty:after{display:block;width:100%;height:20px;padding:0 8px}.cc-messagebubble-wrapper__content[data-v-15dad0f0]{display:flex;flex-direction:column;border-radius:8px}.cc__messagelist__threadreplies[data-v-15dad0f0]{min-width:-moz-fit-content;min-width:fit-content}.cc-messagebubble-wrapper__messageoptions[data-v-15dad0f0]{position:absolute;top:-4px;display:flex;align-items:center;justify-content:flex-end;z-index:1}.cc-message-information__close-button[data-v-1a622417]{position:absolute;right:15px}.cc-message-information__body[data-v-1a622417]{padding:20px 3%;box-sizing:border-box}.cc-message-information__default-subtitle-view[data-v-1a622417]{display:flex;align-items:self-end;width:90%;flex-direction:column;justify-content:flex-start}.cc-message_information__subtitle[data-v-1a622417]{display:flex;justify-content:space-between;width:100%;align-items:center;height:20px}.cc-conversations__date[data-v-1a622417]{display:flex;justify-content:flex-start;align-items:center;height:20px}.cc_message-information__body_message-bubble[data-v-1a622417]{display:flex}.cc-message_information__receipt-container[data-v-1a622417]{display:flex;align-items:center}.cc_message-information_empty-state-view[data-v-1a622417]{display:flex;align-items:flex-start;justify-content:center;margin-top:20px}.cc-messagelist[data-v-c0f584eb]{height:100%;width:100%;overflow-y:auto}.cc-messagelist__wrapper[data-v-c0f584eb]{height:100%;width:100%;padding:8px;overflow-y:hidden}.cc-messagelist__bubblefooter[data-v-c0f584eb]{display:flex;justify-content:center;align-items:center}.cc-messagelist__date__container[data-v-c0f584eb]{text-align:center;margin:8px}.cc-messagelist__date[data-v-c0f584eb]{border-radius:10px}.cc-messagelist__messageindicator[data-v-c0f584eb]{position:absolute;bottom:20px;left:50%;transform:translate(-50%);height:25px;width:150px;display:flex;justify-content:center;align-items:center;z-index:10}.cc-messagelist__footerview[data-v-c0f584eb]{z-index:10;position:relative;bottom:5%;display:flex;align-items:center;justify-content:center;width:100%}.cc-messagelist__decoratormessage[data-v-c0f584eb]{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-messagelist[data-v-c0f584eb]::-webkit-scrollbar{background:transparent;width:8px}.cc-messagelist[data-v-c0f584eb]::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-messagelist__message-information[data-v-c0f584eb]{height:620px;width:360px}.cc-group-members[data-v-baa35320]{overflow:hidden}.cc-group-members__back[data-v-baa35320]{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper[data-v-baa35320]{height:100%;padding:8px;width:100%}.cc-group-members__close[data-v-baa35320]{position:absolute;right:8px;padding:12px 8px 8px}.cc-group-members__tail-view[data-v-baa35320]{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus[data-v-baa35320]{position:absolute;right:12px;cursor:pointer}.cc-user-member-wrapper_component[data-v-14014a3f]{max-height:196px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px;margin-top:10px}.cc-messagecomposer-wrapper__sendbutton[data-v-0c2c15e3],.cc-messagecomposer-wrapper__livereaction[data-v-0c2c15e3]{margin:0 5px}.cc-messagecomposer-wrapper[data-v-0c2c15e3]{height:100%;width:100%;position:relative;text-align:left;padding:16px 14px;box-sizing:border-box}.cc-messagecomposer-wrapper__headerview[data-v-0c2c15e3]{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;position:relative;z-index:2;padding:0 0 1px}.cc-messagecomposer__mentions[data-v-0c2c15e3]{height:196px;max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;box-sizing:border-box;left:50%;transform:translate(-50%,-100%);display:flex!important;flex-direction:column!important;justify-content:flex-end!important;z-index:2;padding:3px 16px 1px 14px}.cc-messagecomposer__mentions[data-v-0c2c15e3]::-webkit-scrollbar{display:none}.cc-messagecomposer-mediainput[data-v-0c2c15e3]{display:none}.cc-messagecomposer-wrapper__auxilary[data-v-0c2c15e3]{display:flex;gap:8px}.cc-messagecomposer__mentions-limit-exceeded[data-v-0c2c15e3]{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*[data-v-8f8bcec3]{box-sizing:border-box;margin:0;padding:0}.cc-threadedmessages-wrapper[data-v-8f8bcec3]{display:flex;flex-direction:column;height:90%;overflow-y:hidden;scrollbar-width:none}.cc-threadedmessages-wrapper__header[data-v-8f8bcec3]{width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threadedmessages-wrapper__close[data-v-8f8bcec3]{display:flex;align-items:center}.cc-threadedmessages-wrapper__title[data-v-8f8bcec3]{display:flex;align-items:center;justify-content:center;width:100%}.cc-threadedmessages-wrapper__bubbleview[data-v-8f8bcec3]{width:100%;height:-moz-fit-content;height:fit-content;padding:8px 16px;box-sizing:border-box;max-height:20em;overflow:auto;min-height:100px}.cc-threadedmessages-wrapper__header[data-v-8f8bcec3]{flex:0 0 auto}.cc-threadedmessages-wrapper__list[data-v-8f8bcec3]{height:100%;overflow-y:auto;width:100%}.cc-threadedmessages-wrapper__composer[data-v-8f8bcec3]{position:absolute;flex:0 0 auto;min-height:80px;z-index:1;width:100%;bottom:5px}.cc-threaded_message_main_wrapper[data-v-8f8bcec3]{width:100%;height:calc(100% - 156px);display:flex;flex-direction:column}.cc__threadedmessages__actionview[data-v-8f8bcec3]{height:36px;padding:8px 16px;box-sizing:border-box;border:1px solid rgba(20,20,20,.08);border-left:none}.cc-messageheader__wrapper[data-v-9dff636e]{display:flex;align-items:center;justify-content:space-between;flex-direction:row;box-sizing:border-box}.cc-messageheader__backbutton[data-v-9dff636e]{margin-right:8px}.cc-messageheader[data-v-9dff636e]{display:flex;align-items:center;justify-content:flex-start;height:-moz-fit-content;height:fit-content;width:100%}.cc-messageheader__listitem[data-v-9dff636e]{height:100%;width:100%;align-items:center;justify-content:flex-start}.cc-messageheader__menu[data-v-9dff636e]{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:flex-end;padding:12px}.cc-transfer-ownership__members[data-v-dc105c9f]{width:100%;height:85%}.cc-transfer-ownership-buttons[data-v-dc105c9f]{width:100%;height:15%;display:flex;flex-direction:column;justify-content:flex-end;align-content:center;gap:10px;padding:12px 16px 28px;box-sizing:border-box}*[data-v-01b6d33d]{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper[data-v-01b6d33d]{padding:8px;border-radius:5px;height:100%;position:relative}.cc-details__profile[data-v-01b6d33d]{margin-bottom:50px;height:8%}.cc-details__section-list[data-v-01b6d33d]{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header[data-v-01b6d33d]{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button[data-v-01b6d33d]{position:absolute;right:20px}.cc-details__section[data-v-01b6d33d]{margin-bottom:32px}.cc-details__section-separator[data-v-01b6d33d]{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper[data-v-01b6d33d]{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option[data-v-01b6d33d]{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title[data-v-01b6d33d]{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view[data-v-01b6d33d]{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list[data-v-01b6d33d]::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list[data-v-01b6d33d]::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}*[data-v-5f4594b3]{box-sizing:border-box;margin:0;padding:0}.cc-messages-wrapper[data-v-5f4594b3]{display:flex;position:relative;height:100%;width:100%}.cc-messages-wrapper__messages[data-v-5f4594b3]{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages-wrapper__threadedmessages[data-v-5f4594b3],.cc-messages-wrapper__details[data-v-5f4594b3]{position:absolute;top:5;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages-wrapper__header[data-v-5f4594b3]{width:100%}.cc-messages-wrapper__messages-list[data-v-5f4594b3]{display:flex;flex-direction:column;overflow:hidden;height:calc(100% - 160px);width:100%;height:100%;position:relative}CometChatThreadedMessages[data-v-5f4594b3]{height:100%;display:flex}.cc-messages-wrapper__composer[data-v-5f4594b3]{width:100%;display:flex;flex-direction:column;justify-content:flex-end}.cc-groups__menus[data-v-6d8318f4]{position:absolute;right:12px;cursor:pointer;padding-right:12px}.cc-groups__subtitle-view[data-v-6d8318f4]{padding:0 0 5px}.cc-tabs-wrapper[data-v-82731b07]{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-end}.cc-tabs-wrapper_inner-div[data-v-82731b07]{height:100%;width:100%}.cc-tabs-wrapper-fixed_inner-div[data-v-82731b07]{margin-top:10px;height:80%;overflow:hidden}.cc-tabs-wrapper-fixed[data-v-82731b07]{height:100%;width:100%;display:flex;justify-content:center}.cc-tabs-wrapper-fixed-inner[data-v-82731b07]{height:100%;width:70%}.cc-tabs-fixed[data-v-82731b07]{top:0;left:0;width:100%}.cc-contacts__wrapper[data-v-48dc5692]{display:flex;flex-direction:column;height:100%;width:100%;position:relative}.cc-contacts__header[data-v-48dc5692]{display:flex;justify-content:center;align-items:center;height:50px;width:100%;box-sizing:border-box;padding:10px}.cc-contacts__close-button[data-v-48dc5692]{position:absolute;right:20px}.cc-contacts__content[data-v-48dc5692]{overflow-y:auto;padding:10px;box-sizing:border-box;width:100%}.cc-contacts__submit-button[data-v-48dc5692]{position:absolute;bottom:10px;width:100%;display:flex;justify-content:center;box-sizing:border-box;margin:10px}.cc-withmessages__wrapper[data-v-120f8cfb]{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-withmessages__sidebar[data-v-120f8cfb]{width:280px;height:100%;position:relative;display:flex}.cc-withmessages__main[data-v-120f8cfb]{width:calc(100% - 280px);height:100%;margin-left:2px}.mobile[data-v-120f8cfb]{width:100%!important;height:100%;position:relative}.cc-decorator__message-empty[data-v-120f8cfb]{display:flex;justify-content:center;align-items:center;width:calc(100% - 280px)}.cc-withmessages__menus[data-v-120f8cfb]{display:flex;justify-content:flex-end;position:absolute;top:1%;right:2%}.cc-withmessages-wrapper[data-v-84c0352a]{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-withmessages__sidebar[data-v-84c0352a]{width:280px;height:100%;position:relative}.cc-withmessages__main[data-v-84c0352a]{width:calc(100% - 280px);height:100%;margin-left:2px}.mobile[data-v-84c0352a]{width:100%!important;height:100%;position:relative}.cc__decorator__message--empty[data-v-84c0352a]{display:flex;justify-content:center;align-items:center;width:calc(100% - 280px)}.cc-withmessages__joingroup[data-v-84c0352a]{width:calc(100% - 280px);height:100vh}.cc-decorator-message-empty[data-v-84c0352a]{display:flex;justify-content:center;align-items:center;width:calc(100% - 280px)}.cc-withmessages-wrapper[data-v-198b5352]{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-withmessages__sidebar[data-v-198b5352]{width:280px;height:100%;position:relative}.cc-withmessages__main[data-v-198b5352]{width:calc(100% - 280px);height:100%;margin-left:2px}.mobile[data-v-198b5352]{width:100%!important;height:100%;position:relative}.cc-decorator-message-empty[data-v-198b5352]{display:flex;justify-content:center;align-items:center;width:calc(100% - 280px)}.update-icon-style[data-v-9e6b21b8]{height:24px;width:24px;border:none;border-radius:0;color:var(--cc__primary150, #3F4669);background:transparent;cursor:pointer;margin-right:-10px}.cc__file__bubble[data-v-8f569cc0]{background:transparent;display:flex;justify-content:space-between;overflow:hidden;width:100%;box-sizing:border-box;gap:8px}.message__block[data-v-8f569cc0]{word-wrap:break-word;text-align:left;overflow:hidden}.cc__file__title[data-v-8f569cc0]{overflow:hidden;overflow-wrap:anywhere}.cc__file__url[data-v-8f569cc0]{all:unset;color:var(--cc__text-color);cursor:pointer}.cc__file__subtitle[data-v-8f569cc0]{margin-top:4px}.cc__file__icon[data-v-8f569cc0]{display:flex;align-items:flex-start;justify-content:flex-end;width:-moz-fit-content;width:fit-content;line-height:36px}.cc__file__icon i[data-v-8f569cc0]{display:inline-block;width:24px;height:24px;cursor:pointer;background:var(--cc__accent)}.bcc__attachment_preview__content_wrapper[data-v-80e86d74]{padding:0 5px 0 20px;position:relative;width:100%}.bcc__attachment_preview__content[data-v-80e86d74]{width:100%;max-height:350px;height:100%;display:flex;justify-content:center;align-items:center}.bcc__attachment_preview__content>img[data-v-80e86d74]{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.cc-messagecomposer-wrapper__headerview{position:static!important}.bcc__attachment_box[data-v-cf116bcf]{padding:8px;display:flex;flex-direction:row;justify-content:space-between;margin:0;min-height:30px}.bcc__attachment_preview__close[data-v-cf116bcf]{width:14px;height:14px;display:inline-block}.cc-messagecomposer-wrapper__sendbutton[data-v-854aed21]{margin:0 5px}.title-bar[data-v-492158d0]{display:flex;align-items:center;justify-content:space-between;background:var(--cc__secondary, #111827);padding:.4rem .6rem}.title-bar .title[data-v-492158d0]{color:var(--cc__text-color)}.title-bar .closeIcon[data-v-492158d0]{width:1.2rem;cursor:pointer;color:var(--cc__text-color)}.scheduled-list[data-v-492158d0]{height:calc(100% - 45px)!important}.bcc-chat-message-list-wrapper{position:relative;height:100%}.bcc-chat-message-list{--cc__primary: #cfeac8;--cc__primary150: #004e48;--cc__background: #f3faf7;--cc__secondary: white;--cc__accent: #004e48;--cc__accent50: rgba(62, 142, 117, .04);--cc__accent100: #ffffff;--cc__accent200: rgba(62, 142, 117, .15);--cc__accent300: rgba(62, 142, 117, .24);--cc__accent400: rgba(62, 142, 117, .33);--cc__accent500: rgba(62, 142, 117, .46);--cc__accent600: #004e48;--cc__accent700: #254a40;--cc__accent800: rgba(62, 142, 117, .82);--cc__accent900: #f3faf7;--cc__text-color: #000;--cc__link-color: #57639e}:root.dark .bcc-chat-message-list{--cc__primary: #57639e;--cc__primary150: #57639e;--cc__background: hsl(230, 25%, 15%);--cc__secondary: #111827;--cc__accent: #758abc;--cc__accent50: rgba(98, 116, 174, .24);--cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);--cc__accent200: rgba(98, 116, 174, .35);--cc__accent300: rgba(98, 116, 174, .44);--cc__accent400: rgba(98, 116, 174, .53);--cc__accent500: rgba(98, 116, 174, .66);--cc__accent600: #758abc;--cc__accent700: #6274ae;--cc__accent800: rgba(98, 116, 174, .92);--cc__accent900: #090A0B;--cc__text-color: #fff;--cc__link-color: #cfeac8}.bcc-chat-message-list,.bcc-chat-message-list .cc-messages-wrapper .cc-messages-wrapper__messages .cc-messages-wrapper__messages-list{height:100%}.bcc-chat-message-list .cc-messages-wrapper .cc-messages-wrapper__messages .cc-messagecomposer-wrapper__headerview{max-height:100%;margin-bottom:5px}.bcc-chat-message-list .cc-messages-wrapper .cc-messagebubble-wrapper__content{max-width:100%}.bcc-chat-message-list .cc-messages-wrapper .cc-messagebubble-wrapper__content>div>.bcc-message-wrapper.has-text.has-image+div>div>div:not([class]){justify-content:flex-end!important;padding:0 8px 8px!important;margin-top:-5px!important;height:unset!important;border-radius:unset!important;line-height:unset!important;position:unset!important;margin-right:unset!important;background:unset!important}.bcc-chat-message-list .cc-messagebubble-wrapper__container{max-width:80%}.bcc-chat-message-list .cc-messagebubble-wrapper__messageoptions{border-radius:8px}.bcc-chat-message-list .cc-messagebubble-wrapper__messageoptions .cc-context-menu__top-menu{border:1px var(--cc__secondary) solid!important}.bcc-chat-message-list .bcc-chat-message-composer-offline{position:relative;bottom:38px;text-align:center;width:100%;font:500 11px sans-serif}.bcc-chat-message-list .bcc-chat-message-composer-offline span{width:150px;display:inline;padding:4px 6px;color:var(--cc__text-color);background:var(--cc__primary);border-radius:8px}.bcc-chat-message-list.offline .messageinput__primaryactions,.bcc-chat-message-list.offline .messageinput__auxiliaryactions,.bcc-chat-message-list.offline .messageinput__secondaryactions{opacity:.2}.bcc-chat-message-list-offline{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;font:700 22px sans-serif;color:#bcbcbc}.cc-messagecomposer__emojikeyboard{display:none}.cc-threadedmessages-wrapper__bubbleview::-webkit-scrollbar,.cc__message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-threadedmessages-wrapper__bubbleview::-webkit-scrollbar-thumb,.cc__message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}

package/src/components/BccAttachmentBox.vue

@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import { CloseIcon } from "@cometchat/chat-uikit-vue";
-import {
-  CometChatMessageEvents,
-  CometChatTheme,
-  MessageStatus,
-} from "@cometchat/uikit-resources";
-import {
-  getCurrentInstance,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  Ref,
-} from "vue";
-import { ChatInstance } from "../chat/types";
-import BccAttachmentPreview from "./BccAttachmentPreview.vue";
-
-const props = defineProps({
-  captionedAttachment: { type: Object },
-  closeButtonIconURL: { type: String, default: CloseIcon },
-  previewStyle: { type: Object, default: {} },
-});
-
-const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
-const vueInstance: any = getCurrentInstance();
-const msgComposerData =
-  vueInstance?.parent?.type?.name === "CometChatMessageComposer" &&
-  vueInstance?.parent?.setupState;
-
-const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
-
-function closePreview(_event?: MouseEvent) {
-  if (chatInstance) {
-    chatInstance.value.captionedAttachment = null;
-  }
-}
-
-const onMessageEditStart = CometChatMessageEvents.ccMessageEdited.subscribe(
-  ({ status }) => {
-    if (status === MessageStatus.inprogress) {
-      if (chatInstance) chatInstance.value.replyToMessage = null;
-      closePreview();
-    }
-  }
-);
-
-const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(
-  ({ status }) => {
-    if (status === MessageStatus.inprogress) {
-      closePreview();
-    }
-  }
-);
-
-onMounted(() => {
-  if (msgComposerData) {
-    msgComposerData.inputRef.querySelector(".messageinput-input").focus();
-    if (msgComposerData.messageToBeEdited) {
-      msgComposerData.showPreview = false; // This is only used for edit message preview
-      msgComposerData.messageToBeEdited = null;
-      msgComposerData.messageText = "";
-      msgComposerData.textRef = "";
-      msgComposerData.inputRef?.emptyInputField();
-    }
-  }
-});
-
-onBeforeUnmount(() => {
-  onMessageEditStart.unsubscribe();
-  onMessageSend.unsubscribe();
-});
-
-const closeBtnIconStyle = () => {
-  return {
-    buttonIconTint: theme.value.palette.getAccent500(),
-    height: "14px",
-    width: "14px",
-    border: "none",
-    borderRadius: "0",
-    background: "transparent",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  };
-};
-
-const wrapperStyle = () => {
-  return {
-    background: theme.value.palette.getBackground(),
-    border: `1px solid ${theme.value.palette.getAccent200()}`,
-    height: "100%",
-    width: "100%",
-    borderRadius: "12px",
-  };
-};
-</script>
-
-<template>
-  <div class="bcc__attachment_box" :style="wrapperStyle()">
-    <BccAttachmentPreview
-      :captionedAttachment="props.captionedAttachment"
-      :previewStyle="previewStyle"
-    />
-    <div class="bcc__attachment_preview__close" @click="closePreview">
-      <cometchat-button
-        :buttonStyle="closeBtnIconStyle()"
-        :iconURL="props.closeButtonIconURL"
-      ></cometchat-button>
-    </div>
-  </div>
-</template>
-
-<style>
-.cc-messagecomposer-wrapper__headerview {
-  position: static !important;
-}
-</style>
-<style scoped>
-.bcc__attachment_box {
-  padding: 8px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin: 0;
-  min-height: 30px;
-}
-.bcc__attachment_preview__close {
-  width: 14px;
-  height: 14px;
-  display: inline-block;
-}
-</style>

package/src/components/BccAttachmentPreview.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { PlaceholderImage } from '@cometchat/chat-uikit-vue';
-import { computed } from 'vue';
-
-const props = defineProps({
-  captionedAttachment: { type: Object, default: {} },
-  previewStyle: { type: Object, default: {} },
-});
-
-const previewUrl = computed(() => {
-  if (!props.captionedAttachment?.fileObject)
-    return PlaceholderImage;
-
-  const blob = new Blob([props.captionedAttachment.fileObject]);
-  return URL.createObjectURL(blob);
-});
-
-function imgLoaded(event: Event) {
-  if (props.captionedAttachment) {
-    props.captionedAttachment.dimensions = {
-      width: (event.target as HTMLImageElement)?.naturalWidth,
-      height: (event.target as HTMLImageElement)?.naturalHeight
-    };
-  }
-}
-</script>
-
-<template>
-  <div class="bcc__attachment_preview__content_wrapper">
-    <div class="bcc__attachment_preview__content">
-      <img :src="previewUrl" @load="imgLoaded" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.bcc__attachment_preview__content_wrapper {
-  padding: 0 5px 0 20px;
-  position: relative;
-  width: 100%;
-}
-
-.bcc__attachment_preview__content {
-  width: 100%;
-  max-height: 350px;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.bcc__attachment_preview__content>img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-</style>

package/src/components/BccChatMessageBubble.vue

@@ -1,219 +0,0 @@
-<script setup lang="ts">
-import { BaseMessage, CometChat, MediaMessage, User } from '@cometchat/chat-sdk-javascript';
-import { CometChatTheme, fontHelper } from '@cometchat/uikit-resources';
-import { inject, ref } from 'vue';
-import chat from "../chat";
-import { offlineStore } from '../offline';
-import BccImageBubble from './BccImageBubble.vue';
-import BccReplyPreview from "./BccReplyPreview.vue";
-
-const props = defineProps({
-	id: {
-		type: String,
-		required: false,
-		default: ""
-	},
-	text: {
-		type: String,
-		required: true
-	},
-	metadata: {
-		type: Object
-	},
-	guid: {
-		type: String,
-		default: ""
-	},
-	mentionedUsers: {
-    type: Array<User>
-  },
-	message: {
-    type: MediaMessage,
-    default: null
-  },
-	placeholderImage: {
-    type: String,
-    default: null
-  },
-	src: {
-    type: String,
-    default: null
-  }
-})
-
-let parentMsgRef = ref<BaseMessage>();
-if (props.metadata?.replyToMessageId) {
-	let guidString = props.guid?.toString()
-	let group = offlineStore.getGroup(guidString)
-
-	//for read only replies
-	if (group != null && group?.hasJoined == undefined) {
-		let message = offlineStore.getMessage(props.metadata.replyToMessageId).data
-		
-		if (message !== undefined) {
-			if (message.type == CometChat.MESSAGE_TYPE.TEXT) {
-				let text = new CometChat.TextMessage(message.receiver, message.data.text, message.receiverType)
-				text.setData(message.data)
-				parentMsgRef.value = text
-			} else {
-				let media = new CometChat.MediaMessage(message.receiver, {}, message.type, message.receiverType)
-				media.setData(message.data)
-				parentMsgRef.value = media
-			}
-		} else {
-			parentMsgRef.value = new CometChat.TextMessage("","Cannot load message","")
-		}
-	} else {
-		CometChat.getMessageDetails(props.metadata.replyToMessageId).then((msg: BaseMessage) => parentMsgRef.value = msg).catch(() => parentMsgRef.value = new CometChat.TextMessage("","Unknown message",""));
-	}
-};
-
-const { theme } = inject("theme", { theme: ref(new CometChatTheme({})) });
-const replyPreviewStyle = {
-	previewWrapperPadding: "6px 12px 6px 9px",
-	barLeftPosition: "0px",
-	titleColor: theme.value.palette.getAccent800(),
-	subtitleColor: theme.value.palette.getAccent800(),
-	titleFont: fontHelper(theme.value.typography.title2),
-};
-</script>
-
-<template>
-	<div class="bcc-message-wrapper" :class="{'has-text': text, 'has-image': src != null}" >
-		<div v-if="metadata?.replyToMessageId" class="bcc-chat-msg-bubble">
-			<div class="bcc-chat-msg-bubble--reply">
-				<BccReplyPreview
-					:replyToMessage="parentMsgRef"
-					:previewStyle="replyPreviewStyle"
-				/>
-			</div>
-		</div>
-		<div v-if="src != null" class="bcc-chat-img-msg-bubble">
-			<BccImageBubble
-				:message="message"
-				:placeholderImage="placeholderImage" 
-				:src="src"
-			/>
-		</div>
-		<div v-if="text && metadata && metadata.translated_message" v-html="chat.toMarkdownHtml(metadata.translated_message, mentionedUsers)"
-			class="bcc-chat-msg-bubble bcc-chat-msg-bubble--translation" />
-		<div v-if="text" v-html="chat.toMarkdownHtml(text, mentionedUsers)" class="bcc-chat-msg-bubble" :id="id"
-			:class="{ 'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message }" />
-	</div>
-</template>
-
-<style lang="scss">
-.bcc-chat-img-msg-bubble {
-	display: block;
-	width: max-content;
-	max-width: 100%;
-	margin: 0 auto;
-	border-radius: 8px;
-	padding-bottom: 8px;
-	position: relative;
-
-	&:last-child {
-		padding-bottom: 0;
-	}
-}
-.bcc-chat-msg-bubble {
-	padding: 0 12px 8px;
-	width: auto;
-	max-width: 500px;
-	line-height: 1.2;
-	font: 400 14px Archivo, sans-serif, Inter;
-	color: var(--cc__text-color);
-
-	&:first-child {
-		padding-top: 8px;
-	}
-
-	p {
-		color: var(--cc__text-color);
-		line-height: 1.2;
-		word-break: break-word;
-		text-align: left;
-		white-space: normal;
-		margin: 8px 0;
-	}
-
-	p:first-child {
-		margin-top: 0;
-	}
-
-	p:last-child {
-		margin-bottom: 0;
-	}
-
-	h1 {
-		font-size: 1.6em;
-		font-weight: 800;
-	}
-
-	h2 {
-		font-size: 1.4em;
-		font-weight: 700;
-	}
-
-	h3 {
-		font-size: 1.2em;
-		font-weight: 600;
-	}
-
-	h4 {
-		font-size: 1em;
-		font-weight: 500;
-	}
-
-	a {
-		color: var(--cc__link-color);
-		text-decoration: underline;
-		font-weight: 500;
-	}
-
-	ul {
-		padding-left: 16px;
-		list-style: disc;
-		margin: 8px 0;
-	}
-
-	ol {
-		padding-left: 16px;
-		list-style: decimal;
-		margin: 8px 0;
-	}
-
-	&--translated {
-		border-top: 1px solid;
-		opacity: 0.8;
-
-		&:before {
-			content: 'original: ';
-			opacity: 0.8;
-			margin-bottom: 8px;
-			font-size: 12px;
-			display: block;
-		}
-	}
-
-	&--reply {
-		position: relative;
-		z-index: 0;
-		margin-top: 3px;
-		border-radius: 6px;
-		overflow: hidden;
-	}
-
-	&--reply::before {
-		content: "";
-		position: absolute;
-		top: 0; 
-		left: 0;
-		width: 100%; 
-		height: 100%;  
-		opacity: .5; 
-		z-index: -1;
-		background-color: var(--cc__background);
-	}
-}
-</style>