@lilaquadrat/chat 0.1.0 → 0.1.3

package/dist/wc/lilaquadrat-studio-chat.js

@@ -12124,6 +12124,7 @@ const en$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
 }, Symbol.toStringTag, { value: "Module" }));
 const DEFAULT_LOCALE = "en";
 const SUPPORTED_LOCALES = ["en", "de"];
+const localeModules = /* @__PURE__ */ Object.assign({ "../locales/de.ts": () => Promise.resolve().then(() => de$1), "../locales/en.ts": () => Promise.resolve().then(() => en$2) });
 function detectBrowserLocale() {
   if (typeof navigator === "undefined") return DEFAULT_LOCALE;
   const candidates = [
@@ -12152,10 +12153,9 @@ async function loadLocale(locale) {
   const global2 = i18n.global;
   if (!global2.availableLocales.includes(current)) {
     try {
-      const messages = (await import(
-        /* @vite-ignore */
-        `../locales/${current}.ts`
-      )).default;
+      const loader = localeModules[`../locales/${current}.ts`];
+      if (!loader) throw new Error(`No locale module for ${current}`);
+      const messages = (await loader()).default;
       global2.setLocaleMessage(current, messages);
     } catch (e) {
       if (current !== DEFAULT_LOCALE) {
@@ -14854,6 +14854,8 @@ const useMainStore = /* @__PURE__ */ defineStore("main", () => {
   const apiUrl = /* @__PURE__ */ ref("http://localhost:3000");
   const mediaUrl = /* @__PURE__ */ ref("http://localhost:3000");
   const authToken = /* @__PURE__ */ ref("devToken");
+  const unreadCallback = /* @__PURE__ */ ref();
+  const closeCallback = /* @__PURE__ */ ref();
   function setViewMode(newViewMode) {
     viewMode.value = newViewMode;
   }
@@ -14884,6 +14886,8 @@ const useMainStore = /* @__PURE__ */ defineStore("main", () => {
     apiUrl,
     mediaUrl,
     authToken,
+    unreadCallback,
+    closeCallback,
     showConversations,
     showNewChat,
     showEditChat,
@@ -14994,6 +14998,13 @@ const useUsersCacheStore = /* @__PURE__ */ defineStore("usersCache", () => {
 const useConversationsStore = /* @__PURE__ */ defineStore("conversations", () => {
   const conversations = /* @__PURE__ */ ref([]);
   const activeConversation = /* @__PURE__ */ ref();
+  const unreadConversations = computed(
+    () => conversations.value.filter((conversation) => conversation.unread)
+  );
+  const totalUnreadCount = computed(
+    () => unreadConversations.value.reduce((sum, conversation) => sum + (conversation.unreadCount || 0), 0)
+  );
+  const totalUnreadConversations = computed(() => unreadConversations.value.length);
   const typing = /* @__PURE__ */ ref({});
   const typingTimers = /* @__PURE__ */ new Map();
   function setTyping(conversation, user, isTyping) {
@@ -15055,16 +15066,35 @@ const useConversationsStore = /* @__PURE__ */ defineStore("conversations", () =>
     const response = await sdk.conversations.list();
     const newConversations = response.data || [];
     newConversations.forEach((newConv) => {
-      const exists = conversations.value.some(
+      const existing = conversations.value.find(
         (existingConv) => existingConv._id === newConv._id || existingConv.id === newConv.id && newConv.id
       );
-      if (!exists) {
+      if (existing) {
+        existing.unreadCount = newConv.unreadCount;
+        existing.unread = newConv.unread;
+        existing.lastMessage = newConv.lastMessage;
+        existing.messagesCount = newConv.messagesCount;
+        existing.participant = { ...existing.participant, ...newConv.participant };
+      } else {
         conversations.value.push(newConv);
       }
       useUsersCacheStore().ingest(newConv.participants);
     });
     updateAllUnread();
   }
+  function refreshConversations() {
+    StudioSDK.flushCache("conversations", "list");
+    StudioSDK.flushCache("messages", "list");
+    return getAllConversations();
+  }
+  async function handleReconnect() {
+    await refreshConversations();
+    const active = activeConversation.value;
+    if (active && !active.isNew && active._id) {
+      const messages = await getMessagesFromApi(active._id);
+      addMessagesToConversation(messages, active._id);
+    }
+  }
   async function getMessagesFromApi(conversation, beforeId) {
     const sdk = new StudioSDK("chat", sdkOptions2());
     const response = await sdk.messages.list(conversation, beforeId);
@@ -15280,7 +15310,12 @@ const useConversationsStore = /* @__PURE__ */ defineStore("conversations", () =>
   }
   return {
     getAllConversations,
+    refreshConversations,
+    handleReconnect,
     conversations,
+    unreadConversations,
+    totalUnreadCount,
+    totalUnreadConversations,
     typing,
     setTyping,
     loadParticipants,
@@ -15318,22 +15353,22 @@ const useConversationsStore = /* @__PURE__ */ defineStore("conversations", () =>
     leave
   };
 });
-const _hoisted_1$b = { class: "conversations-module" };
-const _hoisted_2$6 = ["onClick"];
-const _hoisted_3$4 = { class: "time" };
+const _hoisted_1$e = { class: "conversations-module" };
+const _hoisted_2$a = ["onClick"];
+const _hoisted_3$6 = { class: "time" };
 const _hoisted_4$3 = {
   key: 3,
   class: "lastMessage"
 };
-const _hoisted_5$2 = {
+const _hoisted_5$3 = {
   key: 4,
   class: "unread"
 };
-const _hoisted_6$1 = {
+const _hoisted_6$2 = {
   key: 5,
   class: "draft"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "conversations.module",
   setup(__props) {
     const conversationsStore = useConversationsStore();
@@ -15369,7 +15404,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_participants_partial = resolveComponent("participants-partial");
-      return openBlock(), createElementBlock("section", _hoisted_1$b, [
+      return openBlock(), createElementBlock("section", _hoisted_1$e, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(conversations.value, (conversation) => {
           return openBlock(), createElementBlock("article", {
             key: conversation._id,
@@ -15386,17 +15421,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               participants: conversation.participants,
               "remove-user": ""
             }, null, 8, ["participants"])),
-            createBaseVNode("span", _hoisted_3$4, toDisplayString$1(unref(dayjs)(conversation.lastMessage?.history.created).fromNow()), 1),
+            createBaseVNode("span", _hoisted_3$6, toDisplayString$1(unref(dayjs)(conversation.lastMessage?.history.created).fromNow()), 1),
             conversation.lastMessage ? (openBlock(), createElementBlock("p", _hoisted_4$3, toDisplayString$1(conversation.lastMessage.message), 1)) : createCommentVNode("", true),
-            conversation.unread ? (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString$1(conversation.unreadCount), 1)) : createCommentVNode("", true),
-            conversation.isNew ? (openBlock(), createElementBlock("span", _hoisted_6$1, "draft")) : createCommentVNode("", true)
-          ], 10, _hoisted_2$6);
+            conversation.unread ? (openBlock(), createElementBlock("span", _hoisted_5$3, toDisplayString$1(conversation.unreadCount), 1)) : createCommentVNode("", true),
+            conversation.isNew ? (openBlock(), createElementBlock("span", _hoisted_6$2, "draft")) : createCommentVNode("", true)
+          ], 10, _hoisted_2$a);
         }), 128))
       ]);
     };
   }
 });
-const _style_0$b = ".conversations-module[data-v-31a1e26e]{display:grid;grid-auto-rows:max-content}.conversations-module .single-conversation[data-v-31a1e26e]{padding:20px;gap:5px;cursor:pointer;display:grid;grid-template-columns:1fr 1fr}.conversations-module .single-conversation .time[data-v-31a1e26e]{justify-self:end}.conversations-module .single-conversation .lastMessage[data-v-31a1e26e]{grid-column:1 / 3;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.conversations-module .single-conversation[data-v-31a1e26e]:hover{background-color:var(--scm-color-surface)}.conversations-module .single-conversation.active[data-v-31a1e26e]{background-color:color-mix(in srgb,var(--scm-color-surface) 85%,var(--scm-color-muted))}.conversations-module .single-conversation.support[data-v-31a1e26e]{font-weight:600;border-left:3px solid var(--scm-color-primary)}";
+const _style_0$f = ".conversations-module[data-v-31a1e26e]{display:grid;grid-auto-rows:max-content}.conversations-module .single-conversation[data-v-31a1e26e]{padding:20px;gap:5px;cursor:pointer;display:grid;grid-template-columns:1fr 1fr}.conversations-module .single-conversation .time[data-v-31a1e26e]{justify-self:end}.conversations-module .single-conversation .lastMessage[data-v-31a1e26e]{grid-column:1 / 3;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.conversations-module .single-conversation[data-v-31a1e26e]:hover{background-color:var(--scm-color-surface)}.conversations-module .single-conversation.active[data-v-31a1e26e]{background-color:color-mix(in srgb,var(--scm-color-surface) 85%,var(--scm-color-muted))}.conversations-module .single-conversation.support[data-v-31a1e26e]{font-weight:600;border-left:3px solid var(--scm-color-primary)}";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -15404,8 +15439,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const ConversationsModule = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["styles", [_style_0$b]], ["__scopeId", "data-v-31a1e26e"]]);
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const ConversationsModule = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["styles", [_style_0$f]], ["__scopeId", "data-v-31a1e26e"]]);
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "chats.module",
   setup(__props) {
     const conversationsStore = useConversationsStore();
@@ -15952,16 +15987,16 @@ function requireLocalizedFormat() {
 }
 var localizedFormatExports = requireLocalizedFormat();
 const localizedFormat = /* @__PURE__ */ getDefaultExportFromCjs(localizedFormatExports);
-var de$1 = { exports: {} };
-var de = de$1.exports;
+var de$3 = { exports: {} };
+var de$2 = de$3.exports;
 var hasRequiredDe;
 function requireDe() {
-  if (hasRequiredDe) return de$1.exports;
+  if (hasRequiredDe) return de$3.exports;
   hasRequiredDe = 1;
   (function(module, exports) {
     !function(e, n) {
       module.exports = n(requireDayjs_min());
-    }(de, function(e) {
+    }(de$2, function(e) {
       function n(e2) {
         return e2 && "object" == typeof e2 && "default" in e2 ? e2 : { default: e2 };
       }
@@ -15975,8 +16010,8 @@ function requireDe() {
       }, weekStart: 1, yearStart: 4, formats: { LTS: "HH:mm:ss", LT: "HH:mm", L: "DD.MM.YYYY", LL: "D. MMMM YYYY", LLL: "D. MMMM YYYY HH:mm", LLLL: "dddd, D. MMMM YYYY HH:mm" }, relativeTime: { future: "in %s", past: "vor %s", s: i, m: i, mm: i, h: i, hh: i, d: i, dd: i, M: i, MM: i, y: i, yy: i } };
       return t.default.locale(r, null, true), r;
     });
-  })(de$1);
-  return de$1.exports;
+  })(de$3);
+  return de$3.exports;
 }
 requireDe();
 var en$1 = { exports: {} };
@@ -16042,17 +16077,17 @@ function groupMessages(messages, user) {
   });
   return Object.values(dateGroups);
 }
-const _hoisted_1$a = { class: "chat-messages" };
-const _hoisted_2$5 = { class: "date-separator" };
-const _hoisted_3$3 = { class: "message-content" };
+const _hoisted_1$d = { class: "chat-messages" };
+const _hoisted_2$9 = { class: "date-separator" };
+const _hoisted_3$5 = { class: "message-content" };
 const _hoisted_4$2 = ["id"];
-const _hoisted_5$1 = {
+const _hoisted_5$2 = {
   key: 2,
   class: "typing-indicator"
 };
 const SCROLL_DEBOUNCE_MS = 100;
 const SCROLL_EDGE_PERCENT = 10;
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "chat.module",
   props: {
     _id: { type: String },
@@ -16220,6 +16255,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     });
     const showInput = computed(() => conversation.value?.isNew || conversation.value?.participant?.state === "active" && conversation.value?.participant?.rights?.includes("write"));
     const typingUsers = computed(() => (conversationsStore.typing[props._id || ""] || []).filter((id) => id !== user));
+    const typingUserNames = computed(() => typingUsers.value.map((id) => usersCache.name(id)));
     onMounted(() => {
       updateScrollable();
       window.addEventListener("resize", onResize);
@@ -16234,7 +16270,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       const _component_button_partial = resolveComponent("button-partial");
       const _component_notice_partial = resolveComponent("notice-partial");
       const _component_contacts_module = resolveComponent("contacts-module");
-      const _component_user_name_partial = resolveComponent("user-name-partial");
+      const _component_user_avatar_partial = resolveComponent("user-avatar-partial");
       const _component_system_message_partial = resolveComponent("system-message-partial");
       const _component_chat_input_partial = resolveComponent("chat-input-partial");
       return openBlock(), createElementBlock("section", {
@@ -16280,26 +16316,26 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           class: "chat-messages-scroll-container",
           onScroll
         }, [
-          createBaseVNode("div", _hoisted_1$a, [
+          createBaseVNode("div", _hoisted_1$d, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(groupedMessages.value, (dateGroup) => {
               return openBlock(), createElementBlock("div", {
                 key: dateGroup.date,
                 class: "messages-group"
               }, [
-                createBaseVNode("div", _hoisted_2$5, toDisplayString$1(dateGroup.date), 1),
+                createBaseVNode("div", _hoisted_2$9, toDisplayString$1(dateGroup.date), 1),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(dateGroup.userTimeGroups, (group, index) => {
                   return openBlock(), createElementBlock("div", {
                     key: index,
                     class: normalizeClass([[{ isUser: group.isUser }, group.origin], "message"])
                   }, [
                     createBaseVNode("header", null, [
-                      !group.isUser && group.origin === "user" ? (openBlock(), createBlock(_component_user_name_partial, {
+                      !group.isUser && group.origin === "user" ? (openBlock(), createBlock(_component_user_avatar_partial, {
                         key: 0,
                         "user-id": group.user
                       }, null, 8, ["user-id"])) : createCommentVNode("", true),
                       createBaseVNode("time", null, toDisplayString$1(group.time), 1)
                     ]),
-                    createBaseVNode("div", _hoisted_3$3, [
+                    createBaseVNode("div", _hoisted_3$5, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(group.messages, (message) => {
                         return openBlock(), createElementBlock("p", {
                           id: `message-${message.id}`,
@@ -16321,13 +16357,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             }), 128))
           ])
         ], 544)) : createCommentVNode("", true),
-        typingUsers.value.length ? (openBlock(), createElementBlock("div", _hoisted_5$1, toDisplayString$1(typingUsers.value.join(", ")) + " " + toDisplayString$1(typingUsers.value.length > 1 ? "are" : "is") + " writing… ", 1)) : createCommentVNode("", true),
+        typingUsers.value.length ? (openBlock(), createElementBlock("div", _hoisted_5$2, toDisplayString$1(typingUserNames.value.join(", ")) + " " + toDisplayString$1(typingUsers.value.length > 1 ? "are" : "is") + " writing… ", 1)) : createCommentVNode("", true),
         showInput.value ? (openBlock(), createBlock(_component_chat_input_partial, {
           key: 3,
           modelValue: messageInput.value,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => messageInput.value = $event),
           disabled: !!newChatExists.value,
-          placeholder: "Type a message...",
+          placeholder: "Message",
           onSubmit: _cache[2] || (_cache[2] = ($event) => submit(messageInput.value)),
           onTyping: signalTyping
         }, null, 8, ["modelValue", "disabled"])) : createCommentVNode("", true)
@@ -16335,8 +16371,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$a = ".chat-module[data-v-44131188]{display:grid;height:100%;grid-template-rows:80px 1fr 80px;overflow:hidden}.chat-module.isNew[data-v-44131188]{grid-template-rows:80px 1fr 80px}.chat-module .notice-partial[data-v-44131188]{position:absolute;align-self:center;justify-self:center;z-index:100}.chat-module .chat-messages-scroll-container[data-v-44131188]{overflow-y:auto;position:relative;padding-bottom:50px;display:grid}.chat-module .chat-messages-scroll-container .chat-messages[data-v-44131188]{display:grid;grid-auto-rows:max-content;align-content:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group[data-v-44131188]{display:grid;gap:20px;margin:0 20px;grid-auto-rows:max-content;align-content:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message[data-v-44131188]{display:grid;grid-template-rows:auto auto;gap:5px;justify-self:start;width:max-content}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system[data-v-44131188]{width:100%;text-align:center;align-content:center;justify-content:center}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system header[data-v-44131188]{justify-content:center;grid-template-columns:1fr}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system header time[data-v-44131188]{text-align:center;color:var(--scm-color-muted);font-size:12px}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system .message-content p[data-v-44131188]{background-color:transparent;padding:0;color:var(--scm-color-muted);font-size:12px;white-space:pre-wrap}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message header[data-v-44131188]{display:grid;grid-template-columns:max-content max-content;gap:10px;width:100%;font-size:14px}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message header time[data-v-44131188]{text-align:right}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message .message-content[data-v-44131188]{display:grid;gap:4px}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message .message-content p[data-v-44131188]{padding:10px;border-radius:5px;background-color:var(--scm-color-primary);color:#fff;width:max-content;justify-self:start;white-space:pre-wrap;font-size:14px}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser[data-v-44131188]{justify-self:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser p[data-v-44131188]{justify-self:end;background-color:var(--scm-color-own);color:#fff}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser header[data-v-44131188]{grid-template-columns:1fr}.chat-module .typing-indicator[data-v-44131188]{padding:4px 20px;font-size:12px;color:var(--scm-color-muted);font-style:italic}.chat-module .date-separator[data-v-44131188]{text-align:center;padding:20px 0;font-size:.875rem;font-weight:700}";
-const ChatModule = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["styles", [_style_0$a]], ["__scopeId", "data-v-44131188"]]);
+const _style_0$e = ".chat-module[data-v-5c5c2e96]{display:grid;height:100%;grid-template-rows:max-content 1fr max-content;overflow:hidden}.chat-module.isNew[data-v-5c5c2e96]{grid-template-rows:max-content 1fr max-content}.chat-module .notice-partial[data-v-5c5c2e96]{position:absolute;align-self:center;justify-self:center;z-index:100}.chat-module .chat-messages-scroll-container[data-v-5c5c2e96]{overflow-y:auto;position:relative;padding-bottom:50px;display:grid}.chat-module .chat-messages-scroll-container .chat-messages[data-v-5c5c2e96]{display:grid;grid-auto-rows:max-content;align-content:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group[data-v-5c5c2e96]{display:grid;gap:20px;margin:0 20px;grid-auto-rows:max-content;align-content:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message[data-v-5c5c2e96]{display:grid;grid-template-rows:auto auto;gap:10px;justify-self:start}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system[data-v-5c5c2e96]{width:100%;text-align:center;align-content:center;justify-content:center}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system header[data-v-5c5c2e96]{justify-content:center;grid-template-columns:1fr}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system header time[data-v-5c5c2e96]{text-align:center;color:var(--scm-color-muted);font-size:.75em}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system .message-content p[data-v-5c5c2e96]{background-color:transparent;padding:0;color:var(--scm-color-muted);font-size:.75em;white-space:pre-wrap}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message header[data-v-5c5c2e96]{display:grid;grid-template-columns:max-content max-content;gap:10px;width:100%;font-size:.875em}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message header time[data-v-5c5c2e96]{text-align:right}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message .message-content[data-v-5c5c2e96]{display:grid;gap:4px}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message .message-content p[data-v-5c5c2e96]{padding:10px;border-radius:5px;background-color:var(--scm-color-primary);color:#fff;justify-self:start;white-space:pre-wrap;font-size:1em}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser[data-v-5c5c2e96]{justify-self:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser p[data-v-5c5c2e96]{justify-self:end;background-color:var(--scm-color-own);color:#fff}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser header[data-v-5c5c2e96]{grid-template-columns:1fr}.chat-module .typing-indicator[data-v-5c5c2e96]{padding:4px 20px;font-size:.75em;color:var(--scm-color-muted);font-style:italic}.chat-module .date-separator[data-v-5c5c2e96]{text-align:center;padding:20px 0;font-size:.875em;font-weight:700}";
+const ChatModule = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["styles", [_style_0$e]], ["__scopeId", "data-v-5c5c2e96"]]);
 function sdkOptions() {
   const mainStore = useMainStore();
   return {
@@ -16364,24 +16400,24 @@ const useContactsStore = /* @__PURE__ */ defineStore("contacts", () => {
     loadUsers
   };
 });
-const _hoisted_1$9 = { class: "contacts-module" };
-const _hoisted_2$4 = {
+const _hoisted_1$c = { class: "contacts-module" };
+const _hoisted_2$8 = {
   key: 0,
   class: "controls"
 };
-const _hoisted_3$2 = {
+const _hoisted_3$4 = {
   key: 1,
   class: "rights-panel"
 };
 const _hoisted_4$1 = { class: "who" };
-const _hoisted_5 = { class: "rights" };
-const _hoisted_6 = ["checked", "onChange"];
-const _hoisted_7 = ["onClick", "onKeydown"];
-const _hoisted_8 = {
+const _hoisted_5$1 = { class: "rights" };
+const _hoisted_6$1 = ["checked", "onChange"];
+const _hoisted_7$1 = ["onClick", "onKeydown"];
+const _hoisted_8$1 = {
   key: 0,
   class: "selected-indicator"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "contacts.module",
   setup(__props) {
     const mainStore = useMainStore();
@@ -16482,9 +16518,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       const _component_button_partial = resolveComponent("button-partial");
-      const _component_user_name_partial = resolveComponent("user-name-partial");
-      return openBlock(), createElementBlock("article", _hoisted_1$9, [
-        isEdit.value ? (openBlock(), createElementBlock("section", _hoisted_2$4, [
+      const _component_user_avatar_partial = resolveComponent("user-avatar-partial");
+      return openBlock(), createElementBlock("article", _hoisted_1$c, [
+        isEdit.value ? (openBlock(), createElementBlock("section", _hoisted_2$8, [
           createVNode(_component_button_partial, {
             variant: "primary",
             size: "sm",
@@ -16507,7 +16543,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             _: 1
           })
         ])) : createCommentVNode("", true),
-        isEdit.value ? (openBlock(), createElementBlock("section", _hoisted_3$2, [
+        isEdit.value ? (openBlock(), createElementBlock("section", _hoisted_3$4, [
           _cache[3] || (_cache[3] = createBaseVNode("h4", null, "participant rights", -1)),
           createBaseVNode("ul", null, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(participantDocs.value, (doc2) => {
@@ -16516,13 +16552,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                 class: "participant-rights"
               }, [
                 createBaseVNode("span", _hoisted_4$1, [
-                  createVNode(_component_user_name_partial, {
+                  createVNode(_component_user_avatar_partial, {
                     "user-id": doc2.user
                   }, null, 8, ["user-id"]),
                   _cache[2] || (_cache[2] = createTextVNode()),
                   createBaseVNode("em", null, "(" + toDisplayString$1(doc2.state) + ")", 1)
                 ]),
-                createBaseVNode("span", _hoisted_5, [
+                createBaseVNode("span", _hoisted_5$1, [
                   (openBlock(), createElementBlock(Fragment, null, renderList(RIGHTS, (right) => {
                     return createBaseVNode("label", {
                       key: right,
@@ -16532,7 +16568,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                         type: "checkbox",
                         checked: hasRight(doc2, right),
                         onChange: ($event) => toggleRight(doc2, right)
-                      }, null, 40, _hoisted_6),
+                      }, null, 40, _hoisted_6$1),
                       createTextVNode(" " + toDisplayString$1(right), 1)
                     ]);
                   }), 64))
@@ -16561,21 +16597,21 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               onClick: ($event) => toggleContact(contact),
               onKeydown: ($event) => handleKeydown($event, contact)
             }, [
-              createVNode(_component_user_name_partial, {
+              createVNode(_component_user_avatar_partial, {
                 "user-id": contact.id
               }, null, 8, ["user-id"]),
-              contact.inConversation ? (openBlock(), createElementBlock("span", _hoisted_8, "✓")) : createCommentVNode("", true)
-            ], 42, _hoisted_7);
+              contact.inConversation ? (openBlock(), createElementBlock("span", _hoisted_8$1, "✓")) : createCommentVNode("", true)
+            ], 42, _hoisted_7$1);
           }), 128))
         ])
       ]);
     };
   }
 });
-const _style_0$9 = ".contacts-module[data-v-f09a925f]{height:100%;overflow:scroll}.contacts-module .controls[data-v-f09a925f]{display:grid;grid-template-columns:1fr 1fr}.contacts-module .rights-panel[data-v-f09a925f]{padding:10px 20px;border-bottom:1px solid var(--scm-color-surface)}.contacts-module .rights-panel h4[data-v-f09a925f]{margin-bottom:10px}.contacts-module .rights-panel .participant-rights[data-v-f09a925f]{display:grid;gap:5px;padding:10px 0}.contacts-module .rights-panel .participant-rights .rights[data-v-f09a925f]{display:flex;flex-wrap:wrap;gap:10px}.contacts-module .rights-panel .participant-rights .rights .right-toggle[data-v-f09a925f]{cursor:pointer;font-size:13px}.contacts-module .rights-panel .participant-rights .who em[data-v-f09a925f]{color:var(--scm-color-muted)}.contacts-module .single-contact[data-v-f09a925f]{padding:20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.contacts-module .single-contact[data-v-f09a925f]:hover{background-color:var(--scm-color-surface)}.contacts-module .single-contact.selected[data-v-f09a925f]{background-color:color-mix(in srgb,var(--scm-color-primary) 15%,transparent)}.contacts-module .single-contact .selected-indicator[data-v-f09a925f]{color:var(--scm-color-primary);font-weight:700}";
-const ContactsModule = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["styles", [_style_0$9]], ["__scopeId", "data-v-f09a925f"]]);
-const _hoisted_1$8 = { class: "participants-partial" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _style_0$d = ".contacts-module[data-v-045be51e]{height:100%;overflow:scroll}.contacts-module .controls[data-v-045be51e]{display:grid;grid-template-columns:1fr 1fr}.contacts-module .rights-panel[data-v-045be51e]{padding:10px 20px;border-bottom:1px solid var(--scm-color-surface)}.contacts-module .rights-panel h4[data-v-045be51e]{margin-bottom:10px}.contacts-module .rights-panel .participant-rights[data-v-045be51e]{display:grid;gap:5px;padding:10px 0}.contacts-module .rights-panel .participant-rights .rights[data-v-045be51e]{display:flex;flex-wrap:wrap;gap:10px}.contacts-module .rights-panel .participant-rights .rights .right-toggle[data-v-045be51e]{cursor:pointer;font-size:.8125em}.contacts-module .rights-panel .participant-rights .who em[data-v-045be51e]{color:var(--scm-color-muted)}.contacts-module .single-contact[data-v-045be51e]{padding:20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.contacts-module .single-contact[data-v-045be51e]:hover{background-color:var(--scm-color-surface)}.contacts-module .single-contact.selected[data-v-045be51e]{background-color:color-mix(in srgb,var(--scm-color-primary) 15%,transparent)}.contacts-module .single-contact .selected-indicator[data-v-045be51e]{color:var(--scm-color-primary);font-weight:700}";
+const ContactsModule = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["styles", [_style_0$d]], ["__scopeId", "data-v-045be51e"]]);
+const _hoisted_1$b = { class: "participants-partial" };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "participants.partial",
   props: {
     participants: { type: Array },
@@ -16592,15 +16628,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return props.participants;
     });
     return (_ctx, _cache) => {
-      const _component_user_name_partial = resolveComponent("user-name-partial");
-      return openBlock(), createElementBlock("section", _hoisted_1$8, [
+      const _component_user_avatar_partial = resolveComponent("user-avatar-partial");
+      return openBlock(), createElementBlock("section", _hoisted_1$b, [
         __props.isNew && !filteredParticipants.value.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createTextVNode(toDisplayString$1(_ctx.$t("select contacts")), 1)
         ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(filteredParticipants.value, (participant, index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: unref(participantId)(participant)
           }, [
-            createVNode(_component_user_name_partial, {
+            createVNode(_component_user_avatar_partial, {
               "user-id": unref(participantId)(participant)
             }, null, 8, ["user-id"]),
             index < filteredParticipants.value.length - 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -16612,17 +16648,18 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$8 = "";
-const ParticipantsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["styles", [_style_0$8]], ["__scopeId", "data-v-50fd6d86"]]);
-const _hoisted_1$7 = { class: "actions" };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _style_0$c = "";
+const ParticipantsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["styles", [_style_0$c]], ["__scopeId", "data-v-f06a1cdf"]]);
+const _hoisted_1$a = { class: "actions" };
+const _hoisted_2$7 = { class: "left" };
+const _hoisted_3$3 = { class: "right" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "actions.partial",
   setup(__props) {
     const mainStore = useMainStore();
     const conversationsStore = useConversationsStore();
     const userStore = useUserStore();
     const hasChat = computed(() => mainStore.hasChat);
-    const hasSupport = computed(() => mainStore.hasSupport);
     const showConversationsButton = computed(
       () => hasChat.value || conversationsStore.conversations.length > 1
     );
@@ -16631,51 +16668,50 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       conversationsStore.activateConversation(tempId);
       mainStore.showNewChat();
     };
-    const startSupport = () => {
-      conversationsStore.startSupport();
-      mainStore.hideLeft();
-    };
     function showConversations() {
       mainStore.showConversations();
     }
+    function close() {
+      if (mainStore.leftTarget === "contacts-edit" || mainStore.leftTarget === "contacts-new") {
+        mainStore.showConversations();
+        return;
+      }
+      mainStore.closeCallback?.();
+    }
     return (_ctx, _cache) => {
       const _component_button_partial = resolveComponent("button-partial");
-      return openBlock(), createElementBlock("section", _hoisted_1$7, [
-        showConversationsButton.value ? (openBlock(), createBlock(_component_button_partial, {
-          key: 0,
-          variant: "secondary",
-          onClick: showConversations
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString$1(_ctx.$t("conversations")), 1)
-          ]),
-          _: 1
-        })) : createCommentVNode("", true),
-        hasChat.value ? (openBlock(), createBlock(_component_button_partial, {
-          key: 1,
-          onClick: createConversation
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString$1(_ctx.$t("new chat")), 1)
-          ]),
-          _: 1
-        })) : createCommentVNode("", true),
-        hasChat.value && hasSupport.value ? (openBlock(), createBlock(_component_button_partial, {
-          key: 2,
-          variant: "secondary",
-          onClick: startSupport
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString$1(_ctx.$t("contact support")), 1)
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
+      return openBlock(), createElementBlock("section", _hoisted_1$a, [
+        createBaseVNode("section", _hoisted_2$7, [
+          showConversationsButton.value ? (openBlock(), createBlock(_component_button_partial, {
+            key: 0,
+            icon: "chat",
+            variant: "secondary",
+            "aria-label": "Conversations",
+            onClick: showConversations
+          })) : createCommentVNode("", true),
+          hasChat.value ? (openBlock(), createBlock(_component_button_partial, {
+            key: 1,
+            icon: "add",
+            "aria-label": "New chat",
+            onClick: createConversation
+          })) : createCommentVNode("", true)
+        ]),
+        createBaseVNode("section", _hoisted_3$3, [
+          createVNode(_component_button_partial, {
+            icon: "close",
+            variant: "ghost",
+            onClick: close
+          })
+        ])
       ]);
     };
   }
 });
-const _hoisted_1$6 = { key: 0 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _style_0$b = ".actions[data-v-b803cf6d]{display:grid;grid-template-columns:max-content 1fr max-content;width:100%;grid-column:1/3}.actions .left[data-v-b803cf6d]{grid-column:1/2;display:flex}.actions .right[data-v-b803cf6d]{grid-column:3/4}";
+const ActionsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["styles", [_style_0$b]], ["__scopeId", "data-v-b803cf6d"]]);
+const _hoisted_1$9 = { class: "background-container" };
+const _hoisted_2$6 = { key: 0 };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "chat-header.partial",
   props: {
     conversation: { type: String }
@@ -16745,50 +16781,52 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("header", {
         class: normalizeClass(["chat-header", { isSupport: isSupport.value }])
       }, [
-        createBaseVNode("h3", null, [
-          !isSupport.value ? (openBlock(), createBlock(_component_name_edit_partial, {
-            key: 0,
+        createBaseVNode("section", _hoisted_1$9, [
+          createBaseVNode("h3", null, [
+            !isSupport.value ? (openBlock(), createBlock(_component_name_edit_partial, {
+              key: 0,
+              conversation: __props.conversation
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString$1(name.value), 1)
+              ]),
+              _: 1
+            }, 8, ["conversation"])) : createCommentVNode("", true),
+            isSupport.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(toDisplayString$1(_ctx.$t("support")), 1)
+            ], 64)) : createCommentVNode("", true)
+          ]),
+          !isSupport.value && conversationData.value ? (openBlock(), createElementBlock("h4", _hoisted_2$6, [
+            createVNode(_component_participants_partial, {
+              participants: conversationData.value.participants,
+              "remove-user": "",
+              "is-new": isNew.value
+            }, null, 8, ["participants", "is-new"]),
+            !isNew.value ? (openBlock(), createBlock(_component_button_partial, {
+              key: 0,
+              size: "sm",
+              variant: "ghost",
+              "aria-label": "Toggle edit mode",
+              onClick: _cache[0] || (_cache[0] = ($event) => toggleEdit())
+            }, {
+              default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                createTextVNode(" edit ", -1)
+              ])]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          !isSupport.value && !isNew.value ? (openBlock(), createBlock(_component_chat_actions_partial, {
+            key: 1,
             conversation: __props.conversation
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString$1(name.value), 1)
-            ]),
-            _: 1
-          }, 8, ["conversation"])) : createCommentVNode("", true),
-          isSupport.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            createTextVNode(toDisplayString$1(_ctx.$t("support")), 1)
-          ], 64)) : createCommentVNode("", true)
-        ]),
-        !isSupport.value && conversationData.value ? (openBlock(), createElementBlock("h4", _hoisted_1$6, [
-          createVNode(_component_participants_partial, {
-            participants: conversationData.value.participants,
-            "remove-user": "",
-            "is-new": isNew.value
-          }, null, 8, ["participants", "is-new"]),
-          !isNew.value ? (openBlock(), createBlock(_component_button_partial, {
-            key: 0,
-            size: "sm",
-            variant: "ghost",
-            "aria-label": "Toggle edit mode",
-            onClick: _cache[0] || (_cache[0] = ($event) => toggleEdit())
-          }, {
-            default: withCtx(() => [..._cache[1] || (_cache[1] = [
-              createTextVNode(" edit ", -1)
-            ])]),
-            _: 1
-          })) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true),
-        !isSupport.value && !isNew.value ? (openBlock(), createBlock(_component_chat_actions_partial, {
-          key: 1,
-          conversation: __props.conversation
-        }, null, 8, ["conversation"])) : createCommentVNode("", true)
+          }, null, 8, ["conversation"])) : createCommentVNode("", true)
+        ])
       ], 2);
     };
   }
 });
-const _style_0$7 = ".chat-header[data-v-722341c2]{display:grid;grid-template-columns:5fr 1fr;grid-template-rows:1fr 1fr;width:100%;padding:0 20px;align-items:center}.chat-header h3[data-v-722341c2],.chat-header h4[data-v-722341c2]{grid-column:1 / 2}.chat-header h3[data-v-722341c2]{grid-row:1}.chat-header h4[data-v-722341c2]{display:grid;grid-row:2}.chat-header .chat-actions-partial[data-v-722341c2]{justify-self:end;grid-row:1}";
-const ChatHeaderPartial = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["styles", [_style_0$7]], ["__scopeId", "data-v-722341c2"]]);
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _style_0$a = ".chat-header[data-v-beb2ed7a]{display:grid;padding:10px 20px}.chat-header .background-container[data-v-beb2ed7a]{display:grid;grid-template-columns:5fr 1fr;grid-template-rows:1fr 1fr;align-items:center;justify-items:start;padding:0 10px;background-color:var(--scm-color-surface);border-radius:5px}.chat-header .background-container h3[data-v-beb2ed7a],.chat-header .background-container h4[data-v-beb2ed7a]{grid-column:1 / 2}.chat-header .background-container h3[data-v-beb2ed7a]{grid-row:1}.chat-header .background-container h4[data-v-beb2ed7a]{display:grid;grid-row:2}.chat-header .background-container .chat-actions-partial[data-v-beb2ed7a]{justify-self:end;grid-row:1}";
+const ChatHeaderPartial = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["styles", [_style_0$a]], ["__scopeId", "data-v-beb2ed7a"]]);
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "name-edit.partial",
   props: {
     conversation: { type: String }
@@ -16882,23 +16920,23 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = { class: "notice-partial" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$8 = { class: "notice-partial" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "notice.partial",
   props: {
     type: { type: String }
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("section", _hoisted_1$5, [
+      return openBlock(), createElementBlock("section", _hoisted_1$8, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
     };
   }
 });
-const _style_0$6 = ".notice-partial[data-v-2ad9f6c8]{display:grid}";
-const NoticePartial = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["styles", [_style_0$6]], ["__scopeId", "data-v-2ad9f6c8"]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _style_0$9 = ".notice-partial[data-v-2ad9f6c8]{display:grid}";
+const NoticePartial = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["styles", [_style_0$9]], ["__scopeId", "data-v-2ad9f6c8"]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "system-message.partial",
   props: {
@@ -16941,9 +16979,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { class: "chat-actions-partial" };
-const _hoisted_2$3 = { class: "options-container" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "chat-actions-partial" };
+const _hoisted_2$5 = { class: "options-container" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "chat-actions.partial",
   props: {
     conversation: { type: String }
@@ -16973,7 +17011,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       const _component_button_partial = resolveComponent("button-partial");
       const _component_overlay_container_partial = resolveComponent("overlay-container-partial");
       const _component_dialog_partial = resolveComponent("dialog-partial");
-      return openBlock(), createElementBlock("section", _hoisted_1$4, [
+      return openBlock(), createElementBlock("section", _hoisted_1$7, [
         createVNode(_component_button_partial, {
           ref_key: "attachTo",
           ref: attachTo,
@@ -16993,7 +17031,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           onClose: toggle
         }, {
           default: withCtx(() => [
-            createBaseVNode("section", _hoisted_2$3, [
+            createBaseVNode("section", _hoisted_2$5, [
               createBaseVNode("ul", null, [
                 createBaseVNode("li", null, toDisplayString$1(_ctx.$t("mute")), 1),
                 createBaseVNode("li", null, toDisplayString$1(_ctx.$t("delete")), 1),
@@ -17034,9 +17072,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$5 = ".chat-actions-partial[data-v-871e6a65]{display:grid}.options-container[data-v-871e6a65]{width:max-content;min-width:200px;background-color:var(--scm-color-surface);box-shadow:0 0 5px var(--scm-color-muted)}";
-const ChatActionsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["styles", [_style_0$5]], ["__scopeId", "data-v-871e6a65"]]);
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _style_0$8 = ".chat-actions-partial[data-v-871e6a65]{display:grid}.options-container[data-v-871e6a65]{width:max-content;min-width:200px;background-color:var(--scm-color-surface);box-shadow:0 0 5px var(--scm-color-muted)}";
+const ChatActionsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["styles", [_style_0$8]], ["__scopeId", "data-v-871e6a65"]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "overlay-container.partial",
   props: {
     background: { type: String },
@@ -17170,16 +17208,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$4 = ".overlay-background{position:fixed;top:0;left:0;display:grid;width:100%;height:100%;background-color:#00000080;z-index:1000}.overlay-background.none,.overlay-background.tablet{background-color:transparent}@media only screen and (min-width: 600px) and (max-width: 1023px){.overlay-background.tablet{background-color:#00000080}}.overlay-background.desktop{background-color:transparent}@media only screen and (min-width: 600px) and (max-width: 1023px),only screen and (min-width: 1024px){.overlay-background.desktop{background-color:#00000080}}.overlay-background .content-container{z-index:1100;position:absolute}";
-const OverlayContainerPartial = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["styles", [_style_0$4]]]);
-const _hoisted_1$3 = ["type", "disabled", "aria-busy", "aria-label"];
-const _hoisted_2$2 = {
+const _style_0$7 = ".overlay-background{position:fixed;top:0;left:0;display:grid;width:100%;height:100%;background-color:#00000080;z-index:1000}.overlay-background.none,.overlay-background.tablet{background-color:transparent}@media only screen and (min-width: 600px) and (max-width: 1023px){.overlay-background.tablet{background-color:#00000080}}.overlay-background.desktop{background-color:transparent}@media only screen and (min-width: 600px) and (max-width: 1023px),only screen and (min-width: 1024px){.overlay-background.desktop{background-color:#00000080}}.overlay-background .content-container{z-index:1100;position:absolute}";
+const OverlayContainerPartial = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["styles", [_style_0$7]]]);
+const _hoisted_1$6 = ["type", "disabled", "aria-busy", "aria-label"];
+const _hoisted_2$4 = {
   key: 0,
   class: "scm-btn__spinner",
   "aria-hidden": "true"
 };
-const _hoisted_3$1 = { class: "scm-btn__content" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_3$2 = {
+  key: 2,
+  class: "scm-btn__content"
+};
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "button.partial",
   props: {
     variant: { type: String },
@@ -17188,7 +17229,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     loading: { type: Boolean },
     block: { type: Boolean },
     disabled: { type: Boolean },
-    ariaLabel: { type: String }
+    ariaLabel: { type: String },
+    icon: { type: String }
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
@@ -17202,7 +17244,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       const size = `${base}--${props.size || "md"}`;
       const block = props.block ? `${base}--block` : "";
       const loading = props.loading ? `${base}--loading` : "";
-      return [base, variant, size, block, loading].filter(Boolean).join(" ");
+      const icon = props.icon ? `${base}--icon` : "";
+      return [base, variant, size, block, loading, icon].filter(Boolean).join(" ");
     });
     function onClick(evt) {
       if (isDisabled.value) {
@@ -17212,6 +17255,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       emit2("click", evt);
     }
     return (_ctx, _cache) => {
+      const _component_icons_partial = resolveComponent("icons-partial");
       return openBlock(), createElementBlock("button", {
         type: buttonType.value,
         disabled: isDisabled.value,
@@ -17220,18 +17264,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         onClick
       }, [
-        props.loading ? (openBlock(), createElementBlock("span", _hoisted_2$2)) : createCommentVNode("", true),
-        createBaseVNode("span", _hoisted_3$1, [
+        props.loading ? (openBlock(), createElementBlock("span", _hoisted_2$4)) : props.icon ? (openBlock(), createBlock(_component_icons_partial, {
+          key: 1,
+          type: props.icon
+        }, null, 8, ["type"])) : (openBlock(), createElementBlock("span", _hoisted_3$2, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ])
-      ], 10, _hoisted_1$3);
+        ]))
+      ], 10, _hoisted_1$6);
     };
   }
 });
-const _style_0$3 = ".scm-btn[data-v-40db284f]{--scm-btn-bg: var(--scm-color-primary);--scm-btn-color: white;--scm-btn-radius: 0;--scm-btn-padding-y: 4px;--scm-btn-padding-x: 10px;--scm-btn-font-size: 14px;--scm-btn-height: 40px;--scm-btn-line-height: 42px;--scm-btn-transition: .12s ease-in-out;appearance:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;background-color:var(--scm-btn-bg);color:var(--scm-btn-color);font:inherit;padding:var(--scm-btn-padding-y) var(--scm-btn-padding-x);font-size:var(--scm-btn-font-size);border-radius:var(--scm-btn-radius);height:var(--scm-btn-height);line-height:var(--scm-btn-line-height);transition:background-color var(--scm-btn-transition),opacity var(--scm-btn-transition),box-shadow var(--scm-btn-transition);text-decoration:none;white-space:nowrap}.scm-btn[data-v-40db284f]:hover:not(:disabled){background-color:color-mix(in srgb,var(--scm-btn-bg) 85%,#000)}.scm-btn[data-v-40db284f]:active:not(:disabled){background-color:color-mix(in srgb,var(--scm-btn-bg) 70%,#000)}.scm-btn[data-v-40db284f]:focus-visible{outline:2px solid var(--scm-color-primary);outline-offset:2px}.scm-btn[data-v-40db284f]:disabled{opacity:.55;cursor:not-allowed}.scm-btn--secondary[data-v-40db284f]{--scm-btn-bg: var(--scm-color-surface);--scm-btn-color: var(--scm-color-muted)}.scm-btn--ghost[data-v-40db284f]{--scm-btn-bg: transparent;--scm-btn-color: var(--scm-color-primary)}.scm-btn--danger[data-v-40db284f]{--scm-btn-bg: var(--scm-color-danger);--scm-btn-color: white}.scm-btn--sm[data-v-40db284f]{--scm-btn-padding-y: 2px;--scm-btn-padding-x: 8px;--scm-btn-font-size: 12px}.scm-btn--lg[data-v-40db284f]{--scm-btn-padding-y: 8px;--scm-btn-padding-x: 16px;--scm-btn-font-size: 16px}.scm-btn--block[data-v-40db284f]{width:100%;display:inline-flex}.scm-btn__spinner[data-v-40db284f]{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:scm-spin-40db284f .6s linear infinite}@keyframes scm-spin-40db284f{to{transform:rotate(360deg)}}";
-const ButtonPartial = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["styles", [_style_0$3]], ["__scopeId", "data-v-40db284f"]]);
-const _hoisted_1$2 = { class: "dialog-partial" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _style_0$6 = ".scm-btn[data-v-a79bdb66]{--scm-btn-bg: var(--scm-color-primary);--scm-btn-color: white;--scm-btn-radius: 0;--scm-btn-padding-y: 4px;--scm-btn-padding-x: 10px;--scm-btn-font-size: .875em;--scm-btn-height: 40px;--scm-btn-line-height: 42px;--scm-btn-transition: .12s ease-in-out;appearance:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;background-color:var(--scm-btn-bg);color:var(--scm-btn-color);font:inherit;padding:var(--scm-btn-padding-y) var(--scm-btn-padding-x);font-size:var(--scm-btn-font-size);border-radius:var(--scm-btn-radius);height:var(--scm-btn-height);line-height:var(--scm-btn-line-height);transition:background-color var(--scm-btn-transition),opacity var(--scm-btn-transition),box-shadow var(--scm-btn-transition);text-decoration:none;white-space:nowrap}.scm-btn[data-v-a79bdb66]:hover:not(:disabled){background-color:color-mix(in srgb,var(--scm-btn-bg) 85%,#000)}.scm-btn[data-v-a79bdb66]:active:not(:disabled){background-color:color-mix(in srgb,var(--scm-btn-bg) 70%,#000)}.scm-btn[data-v-a79bdb66]:focus-visible{outline:2px solid var(--scm-color-primary);outline-offset:2px}.scm-btn[data-v-a79bdb66]:disabled{opacity:.55;cursor:not-allowed}.scm-btn--secondary[data-v-a79bdb66]{--scm-btn-bg: var(--scm-color-surface);--scm-btn-color: var(--scm-color-muted)}.scm-btn--ghost[data-v-a79bdb66]{--scm-btn-bg: transparent;--scm-btn-color: var(--scm-color-primary)}.scm-btn--danger[data-v-a79bdb66]{--scm-btn-bg: var(--scm-color-danger);--scm-btn-color: white}.scm-btn--sm[data-v-a79bdb66]{--scm-btn-padding-y: 2px;--scm-btn-padding-x: 8px;--scm-btn-font-size: .75em}.scm-btn--lg[data-v-a79bdb66]{--scm-btn-padding-y: 8px;--scm-btn-padding-x: 16px;--scm-btn-font-size: 1em}.scm-btn--block[data-v-a79bdb66]{width:100%;display:inline-flex}.scm-btn__spinner[data-v-a79bdb66]{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:scm-spin-a79bdb66 .6s linear infinite}.scm-btn--icon[data-v-a79bdb66]{--scm-btn-padding-x: 8px;width:var(--scm-btn-height)}.scm-btn--icon[data-v-a79bdb66] .icon-partial svg{stroke:currentColor}.scm-btn--icon[data-v-a79bdb66] .icon-partial svg.useFill{fill:currentColor}@keyframes scm-spin-a79bdb66{to{transform:rotate(360deg)}}";
+const ButtonPartial = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["styles", [_style_0$6]], ["__scopeId", "data-v-a79bdb66"]]);
+const _hoisted_1$5 = { class: "dialog-partial" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "dialog.partial",
   emits: ["accept", "decline"],
   setup(__props, { emit: __emit }) {
@@ -17244,7 +17290,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       const _component_button_partial = resolveComponent("button-partial");
-      return openBlock(), createElementBlock("section", _hoisted_1$2, [
+      return openBlock(), createElementBlock("section", _hoisted_1$5, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true),
         createVNode(_component_button_partial, { onClick: onAccept }, {
           default: withCtx(() => [..._cache[0] || (_cache[0] = [
@@ -17262,11 +17308,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$2 = ".dialog-partial[data-v-ae4dfdf7]{padding:20px;background-color:var(--scm-color-surface);box-shadow:0 0 5px var(--scm-color-muted)}";
-const DialogPartial = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["styles", [_style_0$2]], ["__scopeId", "data-v-ae4dfdf7"]]);
-const _hoisted_1$1 = { class: "chat-input" };
-const _hoisted_2$1 = ["value", "placeholder"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _style_0$5 = ".dialog-partial[data-v-ae4dfdf7]{padding:20px;background-color:var(--scm-color-surface);box-shadow:0 0 5px var(--scm-color-muted)}";
+const DialogPartial = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["styles", [_style_0$5]], ["__scopeId", "data-v-ae4dfdf7"]]);
+const _hoisted_1$4 = { class: "chat-input" };
+const _hoisted_2$3 = { class: "background-container" };
+const _hoisted_3$1 = ["value", "placeholder"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "chat-input.partial",
   props: {
     modelValue: { type: String },
@@ -17277,42 +17324,54 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit2 = __emit;
+    const textareaRef = /* @__PURE__ */ ref(null);
+    function resize2() {
+      const textarea = textareaRef.value;
+      if (!textarea) return;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+    function onInput(event) {
+      const target = event.target;
+      emit2("update:modelValue", target.value);
+      emit2("typing");
+      nextTick(resize2);
+    }
     function onKeydown(event) {
       if (event.key === "Enter" && !event.shiftKey && !props.disabled) {
         event.preventDefault();
         emit2("submit");
       }
     }
+    watch(() => props.modelValue, () => nextTick(resize2));
     return (_ctx, _cache) => {
       const _component_button_partial = resolveComponent("button-partial");
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        createBaseVNode("textarea", {
-          value: __props.modelValue,
-          placeholder: __props.placeholder,
-          rows: "1",
-          onInput: _cache[0] || (_cache[0] = ($event) => {
-            emit2("update:modelValue", $event.target.value);
-            emit2("typing");
-          }),
-          onKeydown
-        }, null, 40, _hoisted_2$1),
-        createVNode(_component_button_partial, {
-          disabled: __props.disabled,
-          "aria-label": "Send message",
-          onClick: _cache[1] || (_cache[1] = ($event) => emit2("submit"))
-        }, {
-          default: withCtx(() => [..._cache[2] || (_cache[2] = [
-            createTextVNode(" Send ", -1)
-          ])]),
-          _: 1
-        }, 8, ["disabled"])
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createBaseVNode("section", _hoisted_2$3, [
+          createBaseVNode("textarea", {
+            ref_key: "textareaRef",
+            ref: textareaRef,
+            value: __props.modelValue,
+            placeholder: __props.placeholder,
+            rows: "1",
+            onInput,
+            onKeydown
+          }, null, 40, _hoisted_3$1),
+          createVNode(_component_button_partial, {
+            icon: "send",
+            variant: "ghost",
+            disabled: __props.disabled,
+            "aria-label": "Send message",
+            onClick: _cache[0] || (_cache[0] = ($event) => emit2("submit"))
+          }, null, 8, ["disabled"])
+        ])
       ]);
     };
   }
 });
-const _style_0$1 = ".chat-input[data-v-3cd4c855]{display:grid;grid-template-columns:1fr max-content}.chat-input textarea[data-v-3cd4c855]{padding:10px;resize:none;font-size:14px}.chat-input button[data-v-3cd4c855]{padding:10px 15px;background-color:var(--scm-color-primary);color:#fff;border:none;cursor:pointer}.chat-input button [data-v-3cd4c855]:disabled{background-color:var(--scm-color-muted);cursor:not-allowed}";
-const ChatInputPartial = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["styles", [_style_0$1]], ["__scopeId", "data-v-3cd4c855"]]);
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _style_0$4 = ".chat-input[data-v-b6ae32fa]{padding:20px}.chat-input .background-container[data-v-b6ae32fa]{border-radius:5px;display:grid;grid-template-columns:1fr max-content;grid-template-rows:max-content;background-color:var(--scm-color-surface)}.chat-input .background-container textarea[data-v-b6ae32fa]{border:0;padding:10px;background-color:var(--scm-color-surface);outline:none;font-size:1em}.chat-input .background-container button[data-v-b6ae32fa]{align-self:end}";
+const ChatInputPartial = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["styles", [_style_0$4]], ["__scopeId", "data-v-b6ae32fa"]]);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "user-name.partial",
   props: {
     userId: { type: String }
@@ -17328,6 +17387,951 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$3 = { class: "user-avatar" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "user-avatar.partial",
+  props: {
+    userId: { type: String }
+  },
+  setup(__props) {
+    const props = __props;
+    const usersCache = useUsersCacheStore();
+    const name = computed(() => usersCache.name(props.userId));
+    const initials = computed(() => {
+      const parts = name.value.split(/\s+/).filter(Boolean);
+      if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+      return (parts[0]?.[0] || "?").toUpperCase();
+    });
+    const hue = computed(() => {
+      let hash = 0;
+      for (let index = 0; index < props.userId.length; index++) {
+        hash = props.userId.charCodeAt(index) + ((hash << 5) - hash);
+      }
+      return Math.abs(hash) % 360;
+    });
+    onMounted(() => {
+      usersCache.ensure([props.userId]);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", _hoisted_1$3, [
+        createBaseVNode("span", {
+          class: "user-avatar__circle",
+          style: normalizeStyle({ backgroundColor: `hsl(${hue.value}, 45%, 60%)` })
+        }, toDisplayString$1(initials.value), 5),
+        createVNode(_sfc_main$4, { "user-id": __props.userId }, null, 8, ["user-id"])
+      ]);
+    };
+  }
+});
+const _style_0$3 = ".user-avatar[data-v-1fc1d2df]{display:inline-flex;align-items:center;gap:6px}.user-avatar__circle[data-v-1fc1d2df]{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:.625em;font-weight:600;color:#fff;flex-shrink:0;line-height:1}";
+const UserAvatarPartial = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["styles", [_style_0$3]], ["__scopeId", "data-v-1fc1d2df"]]);
+const _hoisted_1$2 = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_2$2 = {
+  key: 1,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_3 = {
+  key: 2,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_4 = {
+  key: 3,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_5 = {
+  key: 4,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_6 = {
+  key: 5,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_7 = {
+  key: 6,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_8 = {
+  key: 7,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_9 = {
+  key: 8,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_10 = {
+  key: 9,
+  class: "useFill",
+  viewBox: "0 0 24 24",
+  style: { "isolation": "isolate" },
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_11 = {
+  key: 10,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6 useStroke",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_12 = {
+  key: 11,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6 useStroke",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_13 = {
+  key: 12,
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 500 500"
+};
+const _hoisted_14 = {
+  key: 13,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_15 = {
+  key: 14,
+  class: "upload",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_16 = {
+  key: 15,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_17 = {
+  key: 16,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_18 = {
+  key: 17,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_19 = {
+  key: 18,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_20 = {
+  key: 19,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_21 = {
+  key: 20,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_22 = {
+  key: 21,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_23 = {
+  key: 22,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_24 = {
+  key: 23,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_25 = {
+  key: 24,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_26 = {
+  key: 25,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_27 = {
+  key: 26,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6 useStroke",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_28 = {
+  key: 27,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_29 = {
+  key: 28,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_30 = {
+  key: 29,
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "h-6 w-6",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+};
+const _hoisted_31 = {
+  key: 30,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_32 = {
+  key: 31,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_33 = {
+  key: 32,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_34 = {
+  key: 33,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_35 = {
+  key: 34,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_36 = {
+  key: 35,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_37 = {
+  key: 36,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_38 = {
+  key: 37,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_39 = {
+  key: 38,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_40 = {
+  key: 39,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_41 = {
+  key: 40,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_42 = {
+  key: 41,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_43 = {
+  key: 42,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_44 = {
+  key: 43,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-6 h-6"
+};
+const _hoisted_45 = {
+  key: 44,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_46 = {
+  key: 45,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_47 = {
+  key: 46,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_48 = {
+  key: 47,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_49 = {
+  key: 48,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_50 = {
+  key: 49,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_51 = {
+  key: 50,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_52 = {
+  key: 51,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _hoisted_53 = {
+  key: 52,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "size-6"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "icons.partial",
+  props: {
+    type: { type: String },
+    colorScheme: { type: String },
+    size: { type: String },
+    rotate: { type: Number },
+    animate: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const rotateClass = computed(() => {
+      if (!props.rotate) return null;
+      return `rotate${props.rotate}`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(["icon-partial", [__props.type, __props.colorScheme || "colorScheme1", __props.size || "medium", rotateClass.value, { animate: __props.animate }]])
+      }, [
+        __props.type === "arrow-right" ? (openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M9 5l7 7-7 7"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "arrow-left" ? (openBlock(), createElementBlock("svg", _hoisted_2$2, [..._cache[1] || (_cache[1] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M15 19l-7-7 7-7"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "arrow-down" ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[2] || (_cache[2] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "notifications" ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[3] || (_cache[3] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "arrow-right-long" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[4] || (_cache[4] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "chevron-down" ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[5] || (_cache[5] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "chevron-up" ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[6] || (_cache[6] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "m4.5 15.75 7.5-7.5 7.5 7.5"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "chevron-right" ? (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[7] || (_cache[7] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "m8.25 4.5 7.5 7.5-7.5 7.5"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "chevron-left" ? (openBlock(), createElementBlock("svg", _hoisted_9, [..._cache[8] || (_cache[8] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M15.75 19.5 8.25 12l7.5-7.5"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "editor-add" ? (openBlock(), createElementBlock("svg", _hoisted_10, [..._cache[9] || (_cache[9] = [
+          createBaseVNode("g", {
+            width: "24",
+            height: "24",
+            transform: "matrix(0.92, 0, 0, 0.92, 0.480769, 0.352584)"
+          }, [
+            createBaseVNode("path", { d: " M 25 12.498 C 24.999 12.245 24.868 12.01 24.652 11.877 L 22.111 10.31 L 24.655 8.727 C 24.869 8.594 25 8.359 25 8.107 C 25 7.854 24.871 7.619 24.656 7.485 L 12.889 0.112 C 12.651 -0.037 12.349 -0.037 12.111 0.112 L 0.344 7.485 C 0.13 7.619 0 7.854 0 8.107 C 0 8.359 0.131 8.594 0.345 8.727 L 2.871 10.299 L 0.344 11.879 C 0.13 12.013 0 12.248 0 12.501 C 0 12.754 0.131 12.988 0.345 13.122 L 2.871 14.694 L 0.344 16.273 C 0.13 16.407 0 16.642 0 16.894 C 0 17.147 0.13 17.381 0.344 17.515 L 12.111 24.888 C 12.23 24.963 12.365 25 12.5 25 C 12.635 25 12.77 24.963 12.889 24.888 L 24.656 17.515 C 24.871 17.381 25.001 17.145 25 16.892 C 24.999 16.639 24.867 16.404 24.652 16.271 L 22.111 14.705 L 24.655 13.122 C 24.87 12.988 25.001 12.752 25 12.498 Z  M 2.115 8.103 L 12.5 1.597 L 22.885 8.103 C 22.785 8.166 12.798 14.382 12.5 14.567 L 2.115 8.103 Z  M 22.88 16.9 L 12.5 23.403 L 2.113 16.895 L 4.256 15.556 L 12.113 20.446 C 12.231 20.52 12.366 20.557 12.5 20.557 C 12.634 20.557 12.769 20.52 12.887 20.446 L 20.722 15.569 L 22.88 16.9 Z  M 12.5 18.962 L 2.116 12.499 L 4.256 11.161 L 12.113 16.052 C 12.231 16.125 12.366 16.162 12.5 16.162 C 12.634 16.162 12.769 16.125 12.887 16.052 L 20.722 11.175 L 22.877 12.503 C 22.817 12.54 12.775 18.79 12.5 18.962 Z " }),
+            createBaseVNode("path", { d: "M 12.099 3.875 L 12.901 3.875 C 13.025 3.875 13.125 3.975 13.125 4.099 L 13.125 10.813 C 13.125 10.936 13.025 11.036 12.901 11.036 L 12.099 11.036 C 11.975 11.036 11.875 10.936 11.875 10.813 L 11.875 4.099 C 11.875 3.975 11.975 3.875 12.099 3.875 Z" }),
+            createBaseVNode("path", { d: "M 8.919 7.857 L 8.919 7.054 C 8.919 6.931 9.019 6.831 9.143 6.831 L 15.857 6.831 C 15.981 6.831 16.081 6.931 16.081 7.054 L 16.081 7.857 C 16.081 7.981 15.981 8.081 15.857 8.081 L 9.143 8.081 C 9.019 8.081 8.919 7.981 8.919 7.857 Z" })
+          ], -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "settings" ? (openBlock(), createElementBlock("svg", _hoisted_11, [..._cache[10] || (_cache[10] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+          }, null, -1),
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "logout" ? (openBlock(), createElementBlock("svg", _hoisted_12, [..._cache[11] || (_cache[11] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "logo" ? (openBlock(), createElementBlock("svg", _hoisted_13, [..._cache[12] || (_cache[12] = [
+          createBaseVNode("path", {
+            style: { "fill": "#3f2d56" },
+            d: "M25,25V475H475V25ZM228.44,317.1q-17.94,13.42-47,13.42-39.6,0-66.66-21.78l18.7-26.18q20.46,16.06,47.74,16.06,13.63,0,21.67-4.62t8-12.54q0-7.47-7.48-11.66t-23.76-5.94q-31.47-3.51-46.09-14.74T119,217q0-21.33,17.49-34.43t45.65-13.09q33.87,0,58.3,17.6l-16.94,25.3a68.24,68.24,0,0,0-39.82-12.54q-13.42,0-21.45,4.4t-8,11.88q0,7.26,6.93,11.22t23.21,5.94q62,7.26,62,48.4Q246.37,303.69,228.44,317.1ZM385.19,204.46H338.11V327H302V204.46H255.17V173h130Z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_14, [..._cache[13] || (_cache[13] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "upload" ? (openBlock(), createElementBlock("svg", _hoisted_15, [..._cache[14] || (_cache[14] = [
+          createBaseVNode("path", {
+            class: "arrow-up",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M 7.5 7.5 L 12 3 M 12 3 L 16.5 7.5 M 12 3 L 12 16.5"
+          }, null, -1),
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M 3.064 16.521 L 3.064 18.771 C 3.064 20.013 4.072 21.021 5.314 21.021 L 18.814 21.021 C 20.057 21.021 21.064 20.013 21.064 18.771 L 21.064 16.521"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "download" ? (openBlock(), createElementBlock("svg", _hoisted_16, [..._cache[15] || (_cache[15] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "checked" ? (openBlock(), createElementBlock("svg", _hoisted_17, [..._cache[16] || (_cache[16] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M5 13l4 4L19 7"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "link" ? (openBlock(), createElementBlock("svg", _hoisted_18, [..._cache[17] || (_cache[17] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "folder" ? (openBlock(), createElementBlock("svg", _hoisted_19, [..._cache[18] || (_cache[18] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "close" ? (openBlock(), createElementBlock("svg", _hoisted_20, [..._cache[19] || (_cache[19] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M6 18L18 6M6 6l12 12"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "add" ? (openBlock(), createElementBlock("svg", _hoisted_21, [..._cache[20] || (_cache[20] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M12 4v16m8-8H4"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "info" ? (openBlock(), createElementBlock("svg", _hoisted_22, [..._cache[21] || (_cache[21] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "history" ? (openBlock(), createElementBlock("svg", _hoisted_23, [..._cache[22] || (_cache[22] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "partner" ? (openBlock(), createElementBlock("svg", _hoisted_24, [..._cache[23] || (_cache[23] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "file" ? (openBlock(), createElementBlock("svg", _hoisted_25, [..._cache[24] || (_cache[24] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "publish" ? (openBlock(), createElementBlock("svg", _hoisted_26, [..._cache[25] || (_cache[25] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "menu" ? (openBlock(), createElementBlock("svg", _hoisted_27, [..._cache[26] || (_cache[26] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M4 6h16M4 12h8m-8 6h16"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "endpoints" ? (openBlock(), createElementBlock("svg", _hoisted_28, [..._cache[27] || (_cache[27] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "arrow-up" ? (openBlock(), createElementBlock("svg", _hoisted_29, [..._cache[28] || (_cache[28] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M4.5 15.75l7.5-7.5 7.5 7.5"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "lightbulb" ? (openBlock(), createElementBlock("svg", _hoisted_30, [..._cache[29] || (_cache[29] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "computer" ? (openBlock(), createElementBlock("svg", _hoisted_31, [..._cache[30] || (_cache[30] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "tags" ? (openBlock(), createElementBlock("svg", _hoisted_32, [..._cache[31] || (_cache[31] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"
+          }, null, -1),
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M6 6h.008v.008H6V6z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "home" ? (openBlock(), createElementBlock("svg", _hoisted_33, [..._cache[32] || (_cache[32] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "server" ? (openBlock(), createElementBlock("svg", _hoisted_34, [..._cache[33] || (_cache[33] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "play" ? (openBlock(), createElementBlock("svg", _hoisted_35, [..._cache[34] || (_cache[34] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "pause" ? (openBlock(), createElementBlock("svg", _hoisted_36, [..._cache[35] || (_cache[35] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M15.75 5.25v13.5m-7.5-13.5v13.5"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "stop" ? (openBlock(), createElementBlock("svg", _hoisted_37, [..._cache[36] || (_cache[36] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "replay" ? (openBlock(), createElementBlock("svg", _hoisted_38, [..._cache[37] || (_cache[37] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "statistics" ? (openBlock(), createElementBlock("svg", _hoisted_39, [..._cache[38] || (_cache[38] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "edit" ? (openBlock(), createElementBlock("svg", _hoisted_40, [..._cache[39] || (_cache[39] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "clock" ? (openBlock(), createElementBlock("svg", _hoisted_41, [..._cache[40] || (_cache[40] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "filter" ? (openBlock(), createElementBlock("svg", _hoisted_42, [..._cache[41] || (_cache[41] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "star" ? (openBlock(), createElementBlock("svg", _hoisted_43, [..._cache[42] || (_cache[42] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "hide" ? (openBlock(), createElementBlock("svg", _hoisted_44, [..._cache[43] || (_cache[43] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "test" ? (openBlock(), createElementBlock("svg", _hoisted_45, [..._cache[44] || (_cache[44] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "clipboard" ? (openBlock(), createElementBlock("svg", _hoisted_46, [..._cache[45] || (_cache[45] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "structure" ? (openBlock(), createElementBlock("svg", _hoisted_47, [..._cache[46] || (_cache[46] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "qrcode" ? (openBlock(), createElementBlock("svg", _hoisted_48, [..._cache[47] || (_cache[47] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
+          }, null, -1),
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "magic" ? (openBlock(), createElementBlock("svg", _hoisted_49, [..._cache[48] || (_cache[48] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "fastforward" ? (openBlock(), createElementBlock("svg", _hoisted_50, [..._cache[49] || (_cache[49] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M3 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061A1.125 1.125 0 0 1 3 16.811V8.69ZM12.75 8.689c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 0 1 0 1.954l-7.108 4.061a1.125 1.125 0 0 1-1.683-.977V8.69Z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "archive" ? (openBlock(), createElementBlock("svg", _hoisted_51, [..._cache[50] || (_cache[50] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "send" ? (openBlock(), createElementBlock("svg", _hoisted_52, [..._cache[51] || (_cache[51] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
+          }, null, -1)
+        ])])) : createCommentVNode("", true),
+        __props.type === "chat" ? (openBlock(), createElementBlock("svg", _hoisted_53, [..._cache[52] || (_cache[52] = [
+          createBaseVNode("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+          }, null, -1)
+        ])])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const _style_0$2 = ".icon-partial[data-v-4a547a78]{display:grid;align-self:center;justify-content:center}.icon-partial svg[data-v-4a547a78]{align-self:center;justify-self:center;stroke-width:1.5}.icon-partial.rotate90 svg[data-v-4a547a78]{transform:rotate(90deg)}.icon-partial.rotate180 svg[data-v-4a547a78]{transform:rotate(180deg)}.icon-partial.animate svg[data-v-4a547a78]{transition:transform .2s ease,fill .2s ease,stroke .2s ease}@keyframes upAndDown-4a547a78{0%{transform:translateY(0)}to{transform:translateY(-20px)}}.icon-partial.animate .upload .arrow-up[data-v-4a547a78]{animation:upAndDown-4a547a78 1s infinite ease-in-out}.icon-partial.big[data-v-4a547a78]{width:30px;height:30px}.icon-partial.big svg[data-v-4a547a78]{width:30px;height:30px}.icon-partial.larger[data-v-4a547a78]{width:26px;height:26px}.icon-partial.larger svg[data-v-4a547a78]{width:26px;height:26px}.icon-partial.large[data-v-4a547a78]{width:24px;height:24px}.icon-partial.large svg[data-v-4a547a78]{width:24px;height:24px}.icon-partial.xl[data-v-4a547a78]{width:60px;height:60px}.icon-partial.xl svg[data-v-4a547a78]{width:60px;height:60px}.icon-partial.medium[data-v-4a547a78]{width:20px;height:20px}.icon-partial.medium svg[data-v-4a547a78]{width:20px;height:20px}.icon-partial.small[data-v-4a547a78]{width:16px;height:16px}.icon-partial.small svg[data-v-4a547a78]{width:16px;height:16px}.icon-partial.smaller[data-v-4a547a78]{width:10px;height:10px}.icon-partial.smaller svg[data-v-4a547a78]{width:10px;height:10px}.icon-partial.colorScheme1 svg[data-v-4a547a78]{stroke:var(--scm-icon-color-1, #333)}.icon-partial.colorScheme1 svg.useFill[data-v-4a547a78]{fill:var(--scm-icon-color-1, #333);stroke-width:0}.icon-partial.colorScheme2 svg[data-v-4a547a78]{stroke:var(--scm-icon-color-2, #666)}.icon-partial.colorScheme2 svg.useFill[data-v-4a547a78]{fill:var(--scm-icon-color-2, #666);stroke-width:0}.icon-partial.colorScheme4 svg[data-v-4a547a78]{stroke:var(--scm-icon-color-1, #333)}.icon-partial.colorScheme4 svg.useFill[data-v-4a547a78]{fill:var(--scm-icon-color-1, #333);stroke-width:0}.icon-partial.white svg[data-v-4a547a78]{stroke:#fff}.icon-partial.white svg.useFill[data-v-4a547a78]{fill:#fff;stroke-width:0}.icon-partial.grey svg[data-v-4a547a78]{stroke:var(--scm-color-muted, #999)}.icon-partial.grey svg.useFill[data-v-4a547a78]{fill:var(--scm-color-muted, #999);stroke-width:0}.icon-partial.aiColor svg[data-v-4a547a78]{stroke:var(--scm-icon-ai-color, #8b5cf6)}.icon-partial.aiColor svg.useFill[data-v-4a547a78]{fill:var(--scm-icon-ai-color, #8b5cf6);stroke-width:0}.icon-partial.red svg[data-v-4a547a78]{stroke:var(--scm-color-danger, #e53935)}.icon-partial.red svg.useFill[data-v-4a547a78]{fill:var(--scm-color-danger, #e53935);stroke-width:0}.icon-partial.green svg[data-v-4a547a78]{stroke:#43a047}.icon-partial.green svg.useFill[data-v-4a547a78]{fill:#43a047;stroke-width:0}";
+const IconsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["styles", [_style_0$2]], ["__scopeId", "data-v-4a547a78"]]);
+const _hoisted_1$1 = { class: "connection-status" };
+const _hoisted_2$1 = { class: "status" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "connection-status.partial",
+  setup(__props) {
+    const mainStore = useMainStore();
+    const connection = computed(() => mainStore.state);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", _hoisted_1$1, [
+        createBaseVNode("div", _hoisted_2$1, toDisplayString$1(_ctx.$t(`status.${connection.value}`)), 1)
+      ]);
+    };
+  }
+});
+const _style_0$1 = ".connection-status[data-v-a483f86f]{position:absolute;top:10px;right:10px;pointer-events:none}";
+const ConnectionStatusPartial = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["styles", [_style_0$1]], ["__scopeId", "data-v-a483f86f"]]);
 function resolveFeatures(config) {
   if (config.features?.length) return [...new Set(config.features)];
   switch (config.mode) {
@@ -17349,6 +18353,8 @@ function applyConfig(config, pinia) {
   if (config.apiUrl) mainStore.apiUrl = config.apiUrl;
   if (config.mediaUrl) mainStore.mediaUrl = config.mediaUrl;
   if (config.token) mainStore.authToken = config.token;
+  if (config.unread) mainStore.unreadCallback = config.unread;
+  if (config.close) mainStore.closeCallback = config.close;
   if (config.userId) useUserStore(pinia).user = config.userId;
   if (config.user) {
     const id = config.user.id || config.userId;
@@ -17358,22 +18364,25 @@ function applyConfig(config, pinia) {
 const MODULES = [
   { name: "chat", component: ChatModule },
   { name: "conversations", component: ConversationsModule },
-  { name: "chats", component: _sfc_main$f },
+  { name: "chats", component: _sfc_main$i },
   { name: "contacts", component: ContactsModule }
 ];
 const PARTIALS = [
   { name: "participants", component: ParticipantsPartial },
-  { name: "actions", component: _sfc_main$b },
+  { name: "actions", component: ActionsPartial },
   { name: "chat-header", component: ChatHeaderPartial },
   { name: "chat-actions", component: ChatActionsPartial },
-  { name: "name-edit", component: _sfc_main$9 },
+  { name: "name-edit", component: _sfc_main$c },
   { name: "notice", component: NoticePartial },
-  { name: "system-message", component: _sfc_main$7 },
+  { name: "system-message", component: _sfc_main$a },
   { name: "overlay-container", component: OverlayContainerPartial },
   { name: "button", component: ButtonPartial },
   { name: "dialog", component: DialogPartial },
   { name: "chat-input", component: ChatInputPartial },
-  { name: "user-name", component: _sfc_main$1 }
+  { name: "user-avatar", component: UserAvatarPartial },
+  { name: "user-name", component: _sfc_main$4 },
+  { name: "icons", component: IconsPartial },
+  { name: "connection-status", component: ConnectionStatusPartial }
 ];
 function registerComponents(app) {
   loadViaDeclarationSync(MODULES, void 0, "module", app);
@@ -17494,11 +18503,9 @@ function useResize() {
   return { realHeight: resize.realHeight, realWidth: resize.realWidth, media: resize.media, resized: resize.resized, widthChanged: resize.widthChanged, plugin: resize };
 }
 const _hoisted_1 = { class: "header" };
-const _hoisted_2 = { class: "connection-status" };
-const _hoisted_3 = { class: "status" };
-const _hoisted_4 = {
+const _hoisted_2 = {
   key: 0,
-  class: "left"
+  class: "main-left-target"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "App",
@@ -17514,7 +18521,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       connect,
       authenticate
     } = useWebSocket();
-    const connection = computed(() => mainStore.state);
     const realWidth = useResize().realWidth;
     const viewMode = computed(() => mainStore.viewMode);
     const leftTarget = computed(() => mainStore.leftTarget);
@@ -17524,6 +18530,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         mainStore.setViewMode("compact");
       }
     }, { immediate: true });
+    watch([() => conversationsStore.totalUnreadCount, () => conversationsStore.totalUnreadConversations], () => {
+      mainStore.unreadCallback?.({
+        unreadMessages: conversationsStore.totalUnreadCount,
+        unreadConversations: conversationsStore.totalUnreadConversations
+      });
+    });
+    let wasDisconnected = false;
+    watch(() => mainStore.state, (state) => {
+      if (state === "connected" && wasDisconnected) {
+        conversationsStore.handleReconnect().catch((_error) => {
+        });
+      }
+      wasDisconnected = state === "disconnected";
+    });
     function decodeSub(token) {
       if (!token) return void 0;
       try {
@@ -17581,23 +18601,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["studio-chat-root", [viewMode.value, leftTarget.value]])
       }, [
         createBaseVNode("section", _hoisted_1, [
-          createVNode(_component_actions_partial),
-          createBaseVNode("section", _hoisted_2, [
-            createBaseVNode("div", _hoisted_3, toDisplayString$1(_ctx.$t(`status.${connection.value}`)), 1)
-          ])
+          createVNode(_component_actions_partial)
         ]),
-        unref(mainStore).leftTarget ? (openBlock(), createElementBlock("section", _hoisted_4, [
+        unref(mainStore).leftTarget ? (openBlock(), createElementBlock("section", _hoisted_2, [
           unref(mainStore).leftTarget === "conversations" ? (openBlock(), createBlock(ConversationsModule, { key: 0 })) : createCommentVNode("", true),
           unref(mainStore).leftTarget === "contacts-new" || unref(mainStore).leftTarget === "contacts-edit" ? (openBlock(), createBlock(_component_contacts_module, { key: 1 })) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        unref(mainStore).mainTarget === "chat" ? (openBlock(), createBlock(_sfc_main$f, { key: 1 })) : createCommentVNode("", true),
+        unref(mainStore).mainTarget === "chat" ? (openBlock(), createBlock(_sfc_main$i, { key: 1 })) : createCommentVNode("", true),
         _cache[0] || (_cache[0] = createBaseVNode("div", { class: "util" }, null, -1))
       ], 2);
     };
   }
 });
-const _style_0 = ":host{display:block;height:100%}:host,.studio-chat-root{--scm-color-primary: #008cff;--scm-color-own: #ff009d;--scm-color-surface: #f6f6f6;--scm-color-muted: #757474;--scm-color-danger: #e53935}#app{height:100vh}.studio-chat-root{display:grid;grid-template-rows:40px 1fr;grid-template-columns:minmax(200px,400px) 1fr;height:100%}.studio-chat-root .header{display:grid;background-color:var(--scm-color-surface);grid-template-columns:max-content 1fr;padding:0 20px;align-content:center}.studio-chat-root .header .connection-status{justify-self:end}.studio-chat-root .conversations-module{grid-column:1}.studio-chat-root .chats-module{grid-column:2}.studio-chat-root.support-no-sidebar{grid-template-columns:1fr}.studio-chat-root.support-no-sidebar .chats-module{grid-column:1}.studio-chat-root.compact{grid-template-columns:1fr}.studio-chat-root.compact .chats-module{grid-column:1}.studio-chat-root.compact .left{width:100%;position:absolute;top:40px;left:0;transform:translate(-100%);transition:transform .3s ease-in-out;background-color:#fff;z-index:100;height:calc(100% - 40px)}.studio-chat-root.compact.conversations .left,.studio-chat-root.compact.contacts-new .left,.studio-chat-root.compact.contacts-edit .left{transform:translate(0)}*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;background-repeat:no-repeat;list-style-type:none;text-decoration:none}";
-const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
+const _style_0 = "[data-v-1bdc8ab0]:host{display:block;height:100%}[data-v-1bdc8ab0]:host,.studio-chat-root[data-v-1bdc8ab0]{--scm-font-size: 16px;--scm-color-primary: #008cff;--scm-color-own: #ff009d;--scm-color-surface: #f6f6f6;--scm-color-muted: #757474;--scm-color-danger: #e53935;font-size:var(--scm-font-size)}#app[data-v-1bdc8ab0]{height:100vh}.studio-chat-root[data-v-1bdc8ab0]{display:grid;grid-template-rows:40px 1fr;grid-template-columns:minmax(200px,400px) 1fr;height:100%}.studio-chat-root .header[data-v-1bdc8ab0]{display:grid;background-color:var(--scm-color-surface);grid-template-columns:max-content 1fr;padding:0 20px;align-content:center}.studio-chat-root .conversations-module[data-v-1bdc8ab0]{grid-column:1}.studio-chat-root .chats-module[data-v-1bdc8ab0]{grid-column:2}.studio-chat-root.support-no-sidebar[data-v-1bdc8ab0]{grid-template-columns:1fr}.studio-chat-root.support-no-sidebar .chats-module[data-v-1bdc8ab0]{grid-column:1}.studio-chat-root.compact[data-v-1bdc8ab0]{grid-template-columns:1fr}.studio-chat-root.compact .chats-module[data-v-1bdc8ab0]{grid-column:1}.studio-chat-root.compact .main-left-target[data-v-1bdc8ab0]{width:100%;position:absolute;top:40px;left:0;transform:translate(-100%);transition:transform .3s ease-in-out;background-color:#fff;z-index:100;height:calc(100% - 40px)}.studio-chat-root.compact.conversations .main-left-target[data-v-1bdc8ab0],.studio-chat-root.compact.contacts-new .main-left-target[data-v-1bdc8ab0],.studio-chat-root.compact.contacts-edit .main-left-target[data-v-1bdc8ab0]{transform:translate(0)}[data-v-1bdc8ab0]{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;background-repeat:no-repeat;list-style-type:none;text-decoration:none}";
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]], ["__scopeId", "data-v-1bdc8ab0"]]);
 dayjs.extend(relativeTime);
 const LilaquadratStudioChat = /* @__PURE__ */ defineCustomElement(App, {
   shadowRoot: true,
@@ -17617,6 +18634,40 @@ const LilaquadratStudioChat = /* @__PURE__ */ defineCustomElement(App, {
 if (!customElements.get("lilaquadrat-studio-chat")) {
   customElements.define("lilaquadrat-studio-chat", LilaquadratStudioChat);
 }
+const de = {
+  status: {
+    connected: "Verbunden",
+    disconnected: "Getrennt"
+  },
+  actions: {
+    retry: "Wiederholen"
+  },
+  "new chat": "Neuer Chat",
+  "conversations": "Unterhaltungen",
+  "contact support": "Support kontaktieren",
+  "support": "Support",
+  "options": "Optionen",
+  "mute": "Stumm schalten",
+  "delete": "Löschen",
+  "leave": "Verlassen",
+  "leave now": "Jetzt verlassen?",
+  "select contacts": "Kontakte auswählen",
+  "conversation options": "Konversationsoptionen",
+  system: {
+    renamed: '{user} hat "{from}" in "{to}" umbenannt',
+    created: "{user} hat diese Unterhaltung erstellt",
+    left: "{user} hat die Unterhaltung verlassen",
+    participants: {
+      addedAndRemoved: "{user} hat {added} hinzugefügt und {removed} entfernt",
+      added: "{user} hat {added} hinzugefügt",
+      removed: "{user} hat {removed} entfernt"
+    }
+  }
+};
+const de$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: de
+}, Symbol.toStringTag, { value: "Module" }));
 export {
   LilaquadratStudioChat
 };