@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha10

package/dist/Chatify-DGRV4QKP.js

@@ -0,0 +1,2203 @@
+import './Chatify.css';var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Button, Avatar as Avatar$1, List, Space, Tooltip, Input, Skeleton, Menu, Row, Col, Form, Checkbox } from "antd";
+import React, { useContext, useState, useMemo, forwardRef, useCallback, useRef, useEffect, memo, useLayoutEffect } from "react";
+import { DownloadOutlined, DeleteOutlined, EyeInvisibleOutlined, EyeOutlined, TeamOutlined, CloseOutlined, EditOutlined, UsergroupAddOutlined, UserAddOutlined, UsergroupDeleteOutlined, UserDeleteOutlined, SendOutlined, PaperClipOutlined } from "@ant-design/icons";
+import { createApi, fakeBaseQuery } from "@reduxjs/toolkit/query/react";
+import { useSelector } from "react-redux";
+import * as SignalR from "@microsoft/signalr";
+import { isHotkey } from "is-hotkey";
+import dayjs from "dayjs";
+const DEFAULT_COLOR_OPTIONS = {
+  saturation: 100,
+  lightness: 75
+};
+function color(value, options = {}) {
+  options = Object.assign({}, DEFAULT_COLOR_OPTIONS, options);
+  let hash = 0;
+  for (let i = 0; i < value.length; i++) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    hash = hash & hash;
+  }
+  return `hsl(${hash % 360}, ${options.saturation}%, ${options.lightness}%)`;
+}
+const CustomizeContext = React.createContext(null);
+function useCustomizeContext() {
+  return useContext(CustomizeContext);
+}
+function useCustom(key) {
+  const value = useContext(CustomizeContext);
+  return value ? value[key] : void 0;
+}
+function useCustomize(custom) {
+  const Custom = useCustom(custom.key);
+  if (Custom == null) {
+    return null;
+  }
+  return Custom ?? custom.Component;
+}
+function customize(key, Component) {
+  const Result = React.forwardRef((props, forwardRef2) => {
+    const Custom = useCustom(key);
+    if (Custom === null) {
+      return null;
+    }
+    if (Custom) {
+      return /* @__PURE__ */ jsx(Custom, { ...props, ref: forwardRef2 });
+    }
+    return /* @__PURE__ */ jsx(Component, { ...props, ref: forwardRef2 });
+  });
+  Component.displayName = Component.displayName || key;
+  Result.displayName = "Customizable." + Component.displayName;
+  return Object.assign(Result, { key, Component });
+}
+const ICONS = {
+  attach: PaperClipOutlined,
+  send: SendOutlined,
+  "remove-member": UserDeleteOutlined,
+  "remove-member-delete-history": UsergroupDeleteOutlined,
+  "add-member": UserAddOutlined,
+  "add-member-with-history": UsergroupAddOutlined,
+  members: TeamOutlined,
+  edit: EditOutlined,
+  close: CloseOutlined,
+  chat: TeamOutlined,
+  watch: EyeOutlined,
+  unwatch: EyeInvisibleOutlined,
+  "delete-file": DeleteOutlined,
+  "open-file": DownloadOutlined
+};
+const Icon = customize("Icon", (props) => {
+  const { type } = props;
+  const IconComponent = ICONS[type];
+  return IconComponent ? /* @__PURE__ */ jsx(IconComponent, {}) : null;
+});
+const ChatReactContext = React.createContext(null);
+function useChatContext() {
+  return useContext(ChatReactContext);
+}
+function ChatContext(props) {
+  const { id, children } = props;
+  const [showMembers, onShowMembers] = useState(false);
+  const value = useMemo(
+    () => ({
+      id,
+      showMembers,
+      onShowMembers
+    }),
+    [id, showMembers]
+  );
+  return /* @__PURE__ */ jsx(ChatReactContext.Provider, { value, children });
+}
+const ChatMembersButton = customize("ChatMembersButton", () => {
+  const { showMembers, onShowMembers } = useChatContext();
+  return /* @__PURE__ */ jsx(Button, { onClick: () => onShowMembers(!showMembers), type: "link", icon: /* @__PURE__ */ jsx(Icon, { type: "members" }) });
+});
+const SYSTEM_ID = "chatify::system";
+function chatId(messageId) {
+  return messageId.slice(0, 36);
+}
+function messageSequencePart(id) {
+  return id.slice(37);
+}
+function parseThreadMessageId(messageId) {
+  const [threadId, index] = messageId.split("::", 2);
+  return [threadId, parseInt(index, 10)];
+}
+function calcThreadUnreadCount(thread) {
+  var _a, _b;
+  const lastReadMessageIndex = thread.lastReadMessageId != null ? parseThreadMessageId(thread.lastReadMessageId)[1] : -1;
+  const lastThreadMessageIndex = ((_a = thread.lastMessage) == null ? void 0 : _a.id) != null ? parseThreadMessageId((_b = thread.lastMessage) == null ? void 0 : _b.id)[1] : -1;
+  return lastThreadMessageIndex - lastReadMessageIndex;
+}
+function calcThreadListUnreadCount(threads) {
+  return threads.reduce((prev, thread) => {
+    return prev + calcThreadUnreadCount(thread);
+  }, 0);
+}
+class Debounce {
+  constructor(config) {
+    __publicField(this, "_enqueued", []);
+    __publicField(this, "_processing", []);
+    __publicField(this, "_timeoutByGroup", {});
+    __publicField(this, "_subscribers", []);
+    __publicField(this, "subscribe", (callback) => {
+      this._subscribers.push(callback);
+      return () => {
+        this._subscribers = this._subscribers.filter((x) => x !== callback);
+      };
+    });
+    __publicField(this, "notify", () => {
+      this._subscribers.forEach((subscriber) => subscriber(this));
+    });
+    this.config = config;
+  }
+  get units() {
+    return [
+      ...this._enqueued.map((x) => ({ ...x, state: "enqueued" })),
+      ...this._processing.map((x) => ({ ...x, state: "processing" }))
+    ];
+  }
+  push(value) {
+    const group = this.config.groupBy(value);
+    const unit = this._enqueued.find((unit2) => this.config.groupBy(unit2.value) === group);
+    if (!unit) {
+      this._enqueued.push({ value, enqueueTime: Date.now() });
+    } else if (this.config.compare(unit.value, value) >= 0) {
+      unit.value = value;
+      unit.enqueueTime = Date.now();
+    }
+    this._process(group);
+  }
+  _process(group) {
+    if (!this._enqueued.some((unit) => this.config.groupBy(unit.value) === group)) {
+      return;
+    }
+    let timeout = this._timeoutByGroup[group];
+    timeout && clearTimeout(timeout);
+    if (this._processing.some((unit) => this.config.groupBy(unit.value) === group)) {
+      return;
+    }
+    timeout = setTimeout(() => {
+      const processing = this._enqueued.find((unit) => this.config.groupBy(unit.value) === group);
+      this._processing.push(processing);
+      this._enqueued.splice(this._enqueued.indexOf(processing), 1);
+      this.notify();
+      this.config.callback(processing.value).then(() => {
+        this._processing.splice(this._processing.indexOf(processing), 1);
+        this.notify();
+        this._process(group);
+      }).catch(() => {
+        this._processing.splice(this._processing.indexOf(processing), 1);
+        this.push(processing.value);
+      });
+    }, this.config.timeout);
+    this._timeoutByGroup[group] = timeout;
+  }
+}
+const DEFAULT_MESSAGE_LIST_TAKE = 20;
+const __settings = {
+  me: null,
+  client: null
+};
+const TAG_TYPES = ["chat", "account", "message", "thread", "thread-message"];
+const baseApi = createApi({
+  baseQuery: fakeBaseQuery(),
+  reducerPath: "chatify",
+  tagTypes: TAG_TYPES,
+  endpoints: (_) => ({})
+});
+const __baseApi = baseApi;
+const DEFAULT_SIGNALR_CONFIG = {
+  hubUri: "/api/chatify/hub",
+  headersFactory: () => Promise.resolve({})
+};
+const CHATIFY_SIGNALR_METHODS = [
+  "chatify://chat-new-message",
+  "chatify://chat-created",
+  "chatify://chat-message-read",
+  "chatify://chat-member-added",
+  "chatify://chat-member-removed",
+  "chatify://chat-name-changed",
+  "chatify://thread-created",
+  "chatify://thread-message-new",
+  "chatify://thread-message-read",
+  "chatify://thread-watch-added",
+  "chatify://thread-watch-removed",
+  "chatify://thread-updated"
+];
+class ChatifyClient {
+  constructor(config) {
+    __publicField(this, "_config");
+    __publicField(this, "_connection", null);
+    __publicField(this, "_connectionPromise", null);
+    __publicField(this, "_subscribers", {});
+    __publicField(this, "_reconnectSubscribers", []);
+    __publicField(this, "_threadConnectionByThreadId", /* @__PURE__ */ new Map());
+    __publicField(this, "connect", async () => {
+      if (this._connection) {
+        return;
+      }
+      if (this._connectionPromise) {
+        return await this._connectionPromise;
+      }
+      this._connectionPromise = this.createAndStartConnection();
+      this._connection = await this._connectionPromise;
+    });
+    __publicField(this, "createAndStartConnection", async () => {
+      const headers = await this._config.signalR.headersFactory();
+      const connection = new SignalR.HubConnectionBuilder().withUrl(this._config.signalR.hubUri, {
+        accessTokenFactory: this._config.signalR.accessTokenFactory ? this._config.signalR.accessTokenFactory : void 0,
+        headers
+      }).withAutomaticReconnect().build();
+      CHATIFY_SIGNALR_METHODS.forEach((x) => {
+        connection.on(x, (...args) => {
+          var _a;
+          (_a = this._subscribers[x]) == null ? void 0 : _a.forEach((s) => {
+            try {
+              s(args);
+            } catch (ex) {
+              console.error(`Failed to notify subscriber`, ex);
+            }
+          });
+        });
+      });
+      connection.onreconnected(() => this._reconnectSubscribers.forEach((subscriber) => subscriber()));
+      await connection.start();
+      return connection;
+    });
+    __publicField(this, "subscribe", (method, subscriber) => {
+      this.connect().then(() => {
+        this._subscribers[method] = this._subscribers[method] ?? [];
+        this._subscribers[method].push(subscriber);
+      });
+      return () => this._subscribers[method].filter((x) => x !== subscriber);
+    });
+    __publicField(this, "subscribeReconnect", (subscriber) => {
+      this._reconnectSubscribers.push(subscriber);
+      return () => this._reconnectSubscribers.filter((x) => x !== subscriber);
+    });
+    __publicField(this, "accounts", async () => {
+      const { data } = await this.axios.get("account");
+      return data;
+    });
+    __publicField(this, "updateAccount", async (request) => {
+      await this.axios.put(`account/${encodeURIComponent(request.id)}`, request);
+    });
+    __publicField(this, "chats", async () => {
+      const { data } = await this.axios.get("chat");
+      return data;
+    });
+    __publicField(this, "chat", async (id) => {
+      const { data } = await this.axios.get(`chat/${encodeURIComponent(id)}`);
+      return data;
+    });
+    __publicField(this, "addChat", async (args) => {
+      const { data } = await this.axios.post(`chat`, args);
+      return data;
+    });
+    __publicField(this, "chatMessages", async (args) => {
+      const { chatId: chatId2, skip = 0, take = 20 } = args;
+      const pagingRule = encodeURIComponent(JSON.stringify({ skip, take }));
+      const { data } = await this.axios.get(
+        `chat/${encodeURIComponent(chatId2)}/message?pagingRule=${pagingRule}`
+      );
+      return data;
+    });
+    __publicField(this, "sendChatMessage", async (request) => {
+      const { chatId: chatId2, ...rest } = request;
+      await this.axios.post(`chat/${encodeURIComponent(chatId2)}/message`, rest);
+    });
+    __publicField(this, "readChatMessage", async (request) => {
+      await this.axios.put(`chat/message/read`, request);
+    });
+    __publicField(this, "removeChatMember", async (request) => {
+      await this.axios.delete(`chat/${encodeURIComponent(request.chatId)}/member`, { data: request });
+    });
+    __publicField(this, "updateChatName", async (request) => {
+      await this.axios.put(`chat/${encodeURIComponent(request.id)}/name`, request);
+    });
+    __publicField(this, "addChatMember", async (request) => {
+      await this.axios.post(`chat/${encodeURIComponent(request.chatId)}/member`, request);
+    });
+    __publicField(this, "sendThreadMessage", async ({ body, threadId }) => {
+      const { data: id } = await this.axios.post(`thread/${encodeURIComponent(threadId)}/message`, {
+        body
+      });
+      return id;
+    });
+    __publicField(this, "readThreadMessage", async (id) => {
+      await this.axios.put(`thread/message/${encodeURIComponent(id)}/read`);
+    });
+    __publicField(this, "watchThreads", async () => {
+      const { data } = await this.axios.get(`thread/watch`);
+      return data;
+    });
+    __publicField(this, "thread", async (id) => {
+      const { data } = await this.axios.get(`thread/${encodeURIComponent(id)}`);
+      return data;
+    });
+    __publicField(this, "threadMessages", async ({
+      threadId,
+      skip,
+      take
+    }) => {
+      const searchParams = new URLSearchParams();
+      searchParams.append("skip", skip.toString());
+      searchParams.append("take", take.toString());
+      const { data } = await this.axios.get(
+        `thread/${encodeURIComponent(threadId)}/message?${searchParams.toString()}`
+      );
+      return data;
+    });
+    __publicField(this, "watchThread", async (id, watch) => {
+      await this.axios.put(`thread/${encodeURIComponent(id)}/watch`, { watch });
+    });
+    __publicField(this, "connectToThread", async (id) => {
+      const connectionCount = this._threadConnectionByThreadId.get(id) ?? 0;
+      this._threadConnectionByThreadId.set(id, connectionCount + 1);
+      if (connectionCount === 0) {
+        this.connect().then(() => this._connection.invoke("ConnectToThread", id));
+      }
+    });
+    __publicField(this, "disconnectFromThread", async (id) => {
+      const connectionCount = this._threadConnectionByThreadId.get(id) ?? 0;
+      this._threadConnectionByThreadId.set(id, Math.max(0, connectionCount - 1));
+      if (connectionCount === 1) {
+        this.connect().then(() => this._connection.invoke("DisconnectFromThread", id));
+      }
+    });
+    this._config = {
+      ...config,
+      signalR: {
+        ...DEFAULT_SIGNALR_CONFIG,
+        ...config.signalR
+      }
+    };
+  }
+  get axios() {
+    return this._config.axios;
+  }
+}
+function unsubscribe(...subscribers) {
+  const result = () => subscribers.forEach((x) => x());
+  result.when = (promise) => promise.then(result);
+  return result;
+}
+const THREAD_MESSAGE_READ_QUEUE = new Debounce({
+  callback: (id) => __settings.client.readThreadMessage(id),
+  compare: (a, b) => -a.localeCompare(b),
+  groupBy: (id) => parseThreadMessageId(id)[0],
+  timeout: 500
+});
+const CHAT_MESSAGE_READ_QUEUE = new Debounce({
+  callback: (id) => __settings.client.readChatMessage({ id }),
+  compare: (a, b) => -a.localeCompare(b),
+  groupBy: (id) => chatId(id),
+  timeout: 500
+});
+const __chatifyApi = __baseApi.injectEndpoints({
+  endpoints: (builder) => ({
+    // ====================================================
+    // ==============     ACCOUNT    ======================
+    // ====================================================
+    getAccountList: builder.query({
+      queryFn: async () => ({ data: await __settings.client.accounts() }),
+      providesTags: ["account"]
+    }),
+    // ====================================================
+    // ================     CHAT    =======================
+    // ====================================================
+    getChat: builder.query({
+      queryFn: async ({ id }) => ({ data: await __settings.client.chat(id) }),
+      providesTags: ["chat", "account"],
+      onCacheEntryAdded: async ({ id }, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+        unsubscribe(
+          __settings.client.subscribe(
+            "chatify://chat-member-added",
+            ([chatId2, _, account, message, , read]) => chatId2 === id && updateCachedData((chat) => {
+              chat.members.push(account);
+              chat.lastReadMessageId = read ? message.id : chat.lastReadMessageId;
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://chat-member-removed",
+            ([chatId2, accountId, , message, read]) => id === chatId2 && updateCachedData((chat) => {
+              chat.members = chat.members.filter((x) => x.id !== accountId);
+              chat.lastReadMessageId = read ? message.id : chat.lastReadMessageId;
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://chat-name-changed",
+            ([chatId2, newName, message, read]) => id === chatId2 && updateCachedData((chat) => {
+              chat.name = newName;
+              chat.lastReadMessageId = read ? message.id : chat.lastReadMessageId;
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://chat-new-message",
+            ([message]) => id === message.chatId && updateCachedData((chat) => {
+              chat.lastReadMessageId = message.sentBy.id === __settings.me() ? message.id : chat.lastReadMessageId;
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://chat-message-read",
+            ([events]) => events.find((x) => x.chatId === id) && updateCachedData((chat) => {
+              const event = events.find((x) => x.chatId === id);
+              chat.lastReadMessageId = event.newLastReadMessageId;
+            })
+          )
+        ).when(cacheEntryRemoved);
+      }
+    }),
+    addChat: builder.mutation({
+      queryFn: async ({ name, members }) => {
+        const chatId2 = await __settings.client.addChat({
+          name,
+          members
+        });
+        return { data: chatId2 };
+      }
+    }),
+    updateChatName: builder.mutation({
+      queryFn: async ({ id, name }) => {
+        await __settings.client.updateChatName({ id, name });
+        return { data: null };
+      }
+    }),
+    // ====================================================
+    // =============     CHAT LIST    =====================
+    // ====================================================
+    getChatList: builder.query({
+      queryFn: async () => ({ data: await __settings.client.chats() }),
+      providesTags: ["chat", "account"],
+      onCacheEntryAdded: async (_, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+        unsubscribe(
+          __settings.client.subscribe(
+            "chatify://chat-created",
+            ([chat]) => updateCachedData((chatList) => {
+              chatList.push(chat);
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://chat-new-message",
+            ([message]) => updateCachedData((chatList) => {
+              const chat = chatList.find((x) => x.id === message.chatId);
+              if (!chat) {
+                return;
+              }
+              chat.message = message;
+              if (message.sentBy.id === __settings.me()) {
+                chat.lastReadMessageId = message.id;
+                chat.totalUnreadCount = 0;
+              }
+              if (message.sentBy.id !== __settings.me()) {
+                chat.totalUnreadCount++;
+              }
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://chat-message-read",
+            ([events]) => updateCachedData((chatList) => {
+              for (const event of events) {
+                const chat = chatList.find((x) => x.id === event.chatId);
+                if (!chat) {
+                  return;
+                }
+                chat.lastReadMessageId = event.newLastReadMessageId;
+                chat.totalUnreadCount = chat.totalUnreadCount - event.readCount;
+              }
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://chat-member-added",
+            ([chatId2, chatName, account, message, , read]) => updateCachedData((chatList) => {
+              const chat = chatList.find((x) => x.id === chatId2);
+              if (account.id === __settings.me() && !chat) {
+                chatList.push({
+                  id: chatId2,
+                  name: chatName,
+                  message,
+                  totalUnreadCount: read ? 0 : 1,
+                  active: true,
+                  lastReadMessageId: read ? message.id : null
+                });
+              }
+              if (!chat) {
+                return;
+              }
+              chat.message = message;
+              chat.active = true;
+              if (read) {
+                chat.totalUnreadCount = 0;
+                chat.lastReadMessageId = message.id;
+              } else {
+                chat.totalUnreadCount++;
+              }
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://chat-member-removed",
+            ([chatId2, accountId, deleteHistory, message, read]) => updateCachedData((chatList) => {
+              if (accountId === __settings.me() && deleteHistory) {
+                return chatList.filter((x) => x.id !== chatId2);
+              }
+              const chat = chatList.find((x) => x.id === chatId2);
+              if (!chat) {
+                return;
+              }
+              chat.message = message;
+              if (accountId === __settings.me()) {
+                chat.active = false;
+              }
+              if (!read) {
+                chat.totalUnreadCount++;
+              } else {
+                chat.totalUnreadCount = 0;
+                chat.lastReadMessageId = message.id;
+              }
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://chat-name-changed",
+            ([chatId2, newName, message, read]) => updateCachedData((chatList) => {
+              const chat = chatList.find((x) => x.id === chatId2);
+              if (!chat) return;
+              chat.name = newName;
+              chat.message = message;
+              if (!read) {
+                chat.totalUnreadCount++;
+              } else {
+                chat.totalUnreadCount = 0;
+                chat.lastReadMessageId = message.id;
+              }
+            })
+          )
+        ).when(cacheEntryRemoved);
+      }
+    }),
+    // ====================================================
+    // ============     CHAT MEMBER    ====================
+    // ====================================================
+    removeChatMember: builder.mutation({
+      queryFn: async (args) => {
+        await __settings.client.removeChatMember(args);
+        return { data: null };
+      }
+    }),
+    addChatMember: builder.mutation({
+      queryFn: async (args) => {
+        await __settings.client.addChatMember(args);
+        return { data: null };
+      }
+    }),
+    // ====================================================
+    // ============     CHAT MESSAGE    ===================
+    // ====================================================
+    getChatMessageList: builder.query({
+      queryFn: async ({ chatId: chatId2 }) => {
+        const messages = await __settings.client.chatMessages({
+          chatId: chatId2,
+          skip: 0,
+          take: DEFAULT_MESSAGE_LIST_TAKE + 1
+        });
+        return {
+          data: {
+            messages: messages.slice(0, DEFAULT_MESSAGE_LIST_TAKE),
+            hasMore: messages.length === DEFAULT_MESSAGE_LIST_TAKE + 1
+          }
+        };
+      },
+      providesTags: ["message", "chat", "account"],
+      onCacheEntryAdded: async ({ chatId: chatId2 }, { dispatch, cacheEntryRemoved, cacheDataLoaded }) => {
+        await cacheDataLoaded;
+        unsubscribe(
+          __settings.client.subscribe("chatify://chat-new-message", ([message]) => {
+            message.chatId === chatId2 && dispatch(
+              chatifyApi.util.updateQueryData("getChatMessageList", { chatId: chatId2 }, (draft) => {
+                draft.messages.unshift(message);
+              })
+            );
+          }),
+          __settings.client.subscribe("chatify://chat-member-added", ([eventChatId, , , message]) => {
+            eventChatId === chatId2 && dispatch(
+              chatifyApi.util.updateQueryData("getChatMessageList", { chatId: chatId2 }, (draft) => {
+                draft.messages.unshift(message);
+              })
+            );
+          }),
+          __settings.client.subscribe("chatify://chat-member-removed", ([eventChatId, , , message]) => {
+            eventChatId === chatId2 && dispatch(
+              chatifyApi.util.updateQueryData("getChatMessageList", { chatId: chatId2 }, (draft) => {
+                draft.messages.unshift(message);
+              })
+            );
+          }),
+          __settings.client.subscribe("chatify://chat-name-changed", ([eventChatId, , message]) => {
+            eventChatId === chatId2 && dispatch(
+              chatifyApi.util.updateQueryData("getChatMessageList", { chatId: chatId2 }, (draft) => {
+                draft.messages.unshift(message);
+              })
+            );
+          })
+        ).when(cacheEntryRemoved);
+      }
+    }),
+    fetchNextChatMessageList: builder.mutation({
+      queryFn: async ({ chatId: chatId2 }, { getState }) => {
+        const current = chatifyApi.endpoints.getChatMessageList.select({ chatId: chatId2 })(getState());
+        const messages = await __settings.client.chatMessages({
+          chatId: chatId2,
+          skip: current.data.messages.length,
+          take: DEFAULT_MESSAGE_LIST_TAKE + 1
+        });
+        return {
+          data: null,
+          meta: {
+            messages: messages.slice(0, DEFAULT_MESSAGE_LIST_TAKE),
+            hasMore: messages.length === DEFAULT_MESSAGE_LIST_TAKE + 1
+          }
+        };
+      },
+      onQueryStarted: async ({ chatId: chatId2 }, { dispatch, queryFulfilled }) => {
+        const result = await queryFulfilled;
+        const meta = result.meta;
+        dispatch(
+          chatifyApi.util.updateQueryData("getChatMessageList", { chatId: chatId2 }, (draft) => {
+            draft.hasMore = meta.hasMore;
+            draft.messages.push(...meta.messages);
+          })
+        );
+      }
+    }),
+    sendChatMessage: builder.mutation({
+      queryFn: async ({ chatId: chatId2, text, files }) => {
+        await __settings.client.sendChatMessage({
+          chatId: chatId2,
+          text,
+          files
+        });
+        return { data: null };
+      }
+    }),
+    readChatMessage: builder.mutation({
+      queryFn: async () => {
+        return { data: null };
+      },
+      onQueryStarted: async ({ id }, { dispatch }) => {
+        CHAT_MESSAGE_READ_QUEUE.push(id);
+        dispatch(chatifyApi.endpoints.getChatMessageReadQueue.initiate(void 0, { forceRefetch: true }));
+      }
+    }),
+    getChatMessageReadQueue: builder.query({
+      queryFn: async () => ({ data: CHAT_MESSAGE_READ_QUEUE.units }),
+      onCacheEntryAdded: async (_, { dispatch, cacheEntryRemoved }) => {
+        unsubscribe(
+          CHAT_MESSAGE_READ_QUEUE.subscribe((value) => {
+            dispatch(
+              chatifyApi.util.updateQueryData("getChatMessageReadQueue", void 0, () => value.units)
+            );
+          })
+        ).when(cacheEntryRemoved);
+      }
+    }),
+    // ====================================================
+    // ===============     THREAD    ======================s
+    // ====================================================
+    getWatchThreadList: builder.query({
+      queryFn: async () => {
+        const threads = await __settings.client.watchThreads();
+        return { data: threads };
+      },
+      providesTags: ["account", "thread"],
+      onCacheEntryAdded: async (_, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+        unsubscribe(
+          __settings.client.subscribe(
+            "chatify://thread-created",
+            ([thread, watch]) => watch && updateCachedData((threads) => {
+              threads.push(thread);
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://thread-message-new",
+            ([threadId, message, readForId]) => updateCachedData((threads) => {
+              const thread = threads.find((x) => x.id === threadId);
+              if (!thread) return;
+              thread.lastMessage = message;
+              if (readForId === __settings.me()) {
+                thread.lastReadMessageId = message.id;
+              }
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://thread-message-read",
+            ([threadId, messageId]) => updateCachedData((threads) => {
+              const thread = threads.find((x) => x.id === threadId);
+              if (!thread) return;
+              thread.lastReadMessageId = messageId;
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://thread-watch-added",
+            ([thread]) => updateCachedData((threads) => {
+              threads.push(thread);
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://thread-watch-removed",
+            ([id]) => updateCachedData((threads) => {
+              const index = threads.findIndex((x) => x.id === id);
+              if (index !== -1) threads.splice(index, 1);
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://thread-updated",
+            ([threadId, threadName]) => updateCachedData((threads) => {
+              const thread = threads.find((x) => x.id === threadId);
+              if (!thread) return;
+              thread.name = threadName;
+            })
+          )
+        ).when(cacheEntryRemoved);
+      }
+    }),
+    getThread: builder.query({
+      queryFn: async ({ id }) => {
+        const threads = await __settings.client.thread(id);
+        return { data: threads };
+      },
+      providesTags: ["account", "thread"],
+      onCacheEntryAdded: async ({ id }, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+        unsubscribe(
+          __settings.client.subscribe(
+            "chatify://thread-message-read",
+            ([threadId, messageId]) => id === threadId && updateCachedData((t) => {
+              t.lastReadMessageId = messageId;
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://thread-message-new",
+            ([threadId, message, readForId]) => id === threadId && updateCachedData((thread) => {
+              thread.lastMessageId = message.id;
+              thread.lastReadMessageId = readForId === __settings.me() ? message.id : thread.lastReadMessageId;
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://thread-watch-added",
+            ([threadListItem]) => id === threadListItem.id && updateCachedData((thread) => {
+              var _a;
+              thread.watch = true;
+              thread.lastMessageId = ((_a = threadListItem.lastMessage) == null ? void 0 : _a.id) ?? null;
+              thread.lastReadMessageId = threadListItem.lastReadMessageId ?? null;
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://thread-watch-removed",
+            ([threadId]) => id === threadId && updateCachedData((thread) => {
+              thread.watch = false;
+            })
+          ),
+          __settings.client.subscribe(
+            "chatify://thread-updated",
+            ([threadId, threadName]) => id === threadId && updateCachedData((thread) => {
+              thread.name = threadName;
+            })
+          )
+        ).when(cacheEntryRemoved);
+      }
+    }),
+    watchThread: builder.mutation({
+      queryFn: async ({ id, watch }) => {
+        await __settings.client.watchThread(id, watch);
+        return { data: null };
+      }
+    }),
+    // ====================================================
+    // ============     THREAD MESSAGE    =================
+    // ====================================================
+    getThreadMessageList: builder.query({
+      queryFn: async (args) => {
+        const requestArgs = {
+          skip: 0,
+          take: DEFAULT_MESSAGE_LIST_TAKE + 1,
+          ...args
+        };
+        const messages = await __settings.client.threadMessages(requestArgs);
+        return {
+          data: {
+            messages: messages.slice(0, DEFAULT_MESSAGE_LIST_TAKE),
+            hasMore: messages.length === DEFAULT_MESSAGE_LIST_TAKE + 1
+          }
+        };
+      },
+      providesTags: ["account", "thread", "thread-message"],
+      onCacheEntryAdded: async ({ threadId }, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
+        await cacheDataLoaded;
+        unsubscribe(
+          __settings.client.subscribe("chatify://thread-message-new", ([_threadId, message]) => {
+            threadId === _threadId && updateCachedData((messageList) => {
+              !messageList.messages.some((x) => x.id === message.id) && messageList.messages.unshift(message);
+            });
+          })
+        ).when(cacheEntryRemoved);
+      }
+    }),
+    fetchNextThreadMessageList: builder.mutation({
+      queryFn: async ({ threadId }, { getState }) => {
+        const current = chatifyApi.endpoints.getThreadMessageList.select({ threadId })(getState());
+        const messages = await __settings.client.threadMessages({
+          threadId,
+          skip: current.data.messages.length,
+          take: DEFAULT_MESSAGE_LIST_TAKE + 1
+        });
+        return {
+          data: null,
+          meta: {
+            messages: messages.slice(0, DEFAULT_MESSAGE_LIST_TAKE),
+            hasMore: messages.length === DEFAULT_MESSAGE_LIST_TAKE + 1
+          }
+        };
+      },
+      onQueryStarted: async ({ threadId }, { dispatch, queryFulfilled }) => {
+        const result = await queryFulfilled;
+        const meta = result.meta;
+        dispatch(
+          chatifyApi.util.updateQueryData("getThreadMessageList", { threadId }, (draft) => {
+            draft.hasMore = meta.hasMore;
+            draft.messages.push(...meta.messages);
+          })
+        );
+      }
+    }),
+    sendThreadMessage: builder.mutation({
+      queryFn: async (args) => {
+        const id = await __settings.client.sendThreadMessage(args);
+        return { data: id };
+      }
+    }),
+    readThreadMessage: builder.mutation({
+      queryFn: async () => {
+        return { data: null };
+      },
+      onQueryStarted: async ({ id }, { dispatch }) => {
+        THREAD_MESSAGE_READ_QUEUE.push(id);
+        dispatch(chatifyApi.endpoints.getThreadMessageReadQueue.initiate(void 0, { forceRefetch: true }));
+      }
+    }),
+    getThreadMessageReadQueue: builder.query({
+      queryFn: async () => ({ data: THREAD_MESSAGE_READ_QUEUE.units }),
+      onCacheEntryAdded: async (_, { dispatch, cacheEntryRemoved }) => {
+        unsubscribe(
+          THREAD_MESSAGE_READ_QUEUE.subscribe((value) => {
+            dispatch(
+              chatifyApi.util.updateQueryData("getThreadMessageReadQueue", void 0, () => value.units)
+            );
+          })
+        ).when(cacheEntryRemoved);
+      }
+    })
+  })
+});
+function useChatListItem(id) {
+  return useSelector(
+    (state) => {
+      var _a;
+      return id != null ? (_a = __chatifyApi.endpoints.getChatList.select()(state).data) == null ? void 0 : _a.find((x) => x.id === id) : null;
+    }
+  );
+}
+function useUnreadThreadMessageCount() {
+  const { data: threads, ...state } = chatifyApi.useGetWatchThreadListQuery();
+  const count = useMemo(() => threads != null ? calcThreadListUnreadCount(threads) : null, [threads]);
+  return [count, state];
+}
+const chatifyApi = Object.assign(__chatifyApi, {
+  settings: __settings,
+  useChatListItem,
+  useUnreadThreadMessageCount
+});
+const _Avatar = forwardRef(
+  (props, forwardRef2) => {
+    const { account } = props;
+    return /* @__PURE__ */ jsx(Avatar$1, { ref: forwardRef2, src: account.avatar });
+  }
+);
+_Avatar.displayName = "Avatar";
+const Avatar = customize("Avatar", _Avatar);
+function useAdd(chatId2, accountId, withHistory) {
+  const [add, state] = chatifyApi.useAddChatMemberMutation();
+  const onAdd = useCallback(
+    () => add({ chatId: chatId2, accountId, withHistory }),
+    [add, chatId2, accountId, withHistory]
+  );
+  return [onAdd, state];
+}
+function useRemove(chatId2, accountId, deleteHistory) {
+  const [remove, state] = chatifyApi.useRemoveChatMemberMutation();
+  const onRemove = useCallback(
+    () => remove({ chatId: chatId2, accountId, deleteHistory }),
+    [remove, chatId2, accountId, deleteHistory]
+  );
+  return [onRemove, state];
+}
+const ChatMemberListItem = customize("ChatMemberListItem", (props) => {
+  const { chatId: chatId2 } = props;
+  const { data: chat } = chatifyApi.useGetChatQuery({ id: chatId2 });
+  const { data: accounts } = chatifyApi.useGetAccountListQuery();
+  const account = accounts.find((x) => x.id === props.id);
+  const isMember = chat.members.some((x) => x.id === account.id);
+  const [onAddWithoutHistory] = useAdd(chatId2, account.id, false);
+  const [onAddWithHistory] = useAdd(chatId2, account.id, true);
+  const [onRemoveKeepHistory] = useRemove(chatId2, account.id, false);
+  const [onRemoveDeleteHistory] = useRemove(chatId2, account.id, true);
+  return /* @__PURE__ */ jsx(
+    List.Item,
+    {
+      className: "wxchtf-chat-members-list-item",
+      actions: isMember ? [
+        /* @__PURE__ */ jsx(Tooltip, { title: "Remove (keep history)", children: /* @__PURE__ */ jsx(Button, { onClick: onRemoveKeepHistory, type: "link", icon: /* @__PURE__ */ jsx(Icon, { type: "remove-member" }) }) }, "remove"),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Remove (delete history)", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: onRemoveDeleteHistory,
+            type: "link",
+            icon: /* @__PURE__ */ jsx(Icon, { type: "remove-member-delete-history" })
+          }
+        ) }, "remove_delete_history")
+      ] : [
+        /* @__PURE__ */ jsx(Tooltip, { title: "Add (no history)", children: /* @__PURE__ */ jsx(Button, { onClick: onAddWithoutHistory, type: "link", icon: /* @__PURE__ */ jsx(Icon, { type: "add-member" }) }) }, "add_no_history"),
+        /* @__PURE__ */ jsx(Tooltip, { title: "Add (share history)", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: onAddWithHistory,
+            type: "link",
+            icon: /* @__PURE__ */ jsx(Icon, { type: "add-member-with-history" })
+          }
+        ) }, "add")
+      ],
+      children: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(Avatar, { account }),
+        /* @__PURE__ */ jsx("span", { children: account.name })
+      ] })
+    }
+  );
+});
+const ChatMembersPanel = customize("ChatMembersPanel", () => {
+  const { id } = useChatContext();
+  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+  const { data: accounts } = chatifyApi.useGetAccountListQuery();
+  const ordered = useMemo(
+    () => accounts == null ? void 0 : accounts.slice().sort(
+      (a, b) => ((chat == null ? void 0 : chat.members.some((m) => m.id === a.id)) ? -100 : 0) - ((chat == null ? void 0 : chat.members.some((m) => m.id === b.id)) ? -100 : 0) + a.name.localeCompare(b.name)
+    ),
+    [accounts, chat]
+  );
+  if (!(chat == null ? void 0 : chat.members) || !accounts) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-chat-members-panel", children: /* @__PURE__ */ jsx(
+    List,
+    {
+      className: "wxchtf-chat-members-list",
+      dataSource: ordered,
+      renderItem: (item) => /* @__PURE__ */ jsx(ChatMemberListItem, { id: item.id, chatId: id })
+    }
+  ) });
+});
+const ChatMembersPreview = customize("ChatMembersPreview", () => {
+  const { id } = useChatContext();
+  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+  if (!(chat == null ? void 0 : chat.members)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Avatar$1.Group, { max: { count: 5 }, children: chat.members.map((x) => /* @__PURE__ */ jsx(Tooltip, { title: x.name, children: /* @__PURE__ */ jsx(Avatar, { account: x }) }, x.id)) });
+});
+const InputFileButton = customize("InputFileButton", (props) => {
+  const { onUpload, onAddedClick, accept, loading, value, disabled } = props;
+  const inputRef = useRef(null);
+  const onClick = useCallback(() => {
+    var _a;
+    return (_a = inputRef.current) == null ? void 0 : _a.click();
+  }, []);
+  const countButtonRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    (_a = countButtonRef.current) == null ? void 0 : _a.classList.add("active");
+  }, [value]);
+  const onCountButtonAnimationEnd = useCallback(() => {
+    var _a;
+    (_a = countButtonRef.current) == null ? void 0 : _a.classList.remove("active");
+  }, []);
+  const onInputChange = useCallback(
+    (e) => {
+      const files = e.target.files;
+      files && files.length > 0 && onUpload(Array.from(files));
+    },
+    [onUpload]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        loading,
+        onClick,
+        type: "link",
+        disabled,
+        icon: /* @__PURE__ */ jsx(Icon, { type: "attach" }),
+        className: "wxchtf-add-files-btn"
+      }
+    ),
+    value.length > 0 && /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: countButtonRef,
+        className: "wxchtf-add-files-added-btn",
+        onAnimationIteration: onCountButtonAnimationEnd,
+        onClick: onAddedClick,
+        type: "link",
+        disabled,
+        icon: /* @__PURE__ */ jsxs(Fragment, { children: [
+          "+",
+          value.length
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        value: "",
+        accept,
+        onChange: onInputChange,
+        ref: inputRef,
+        type: "file",
+        multiple: true,
+        style: { display: "none" }
+      }
+    )
+  ] });
+});
+const InputFilesBox = customize("InputFilesBox", (props) => {
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-add-files-box", children: /* @__PURE__ */ jsx(InputFileButton, { ...props }) });
+});
+const LocalizerContext = React.createContext(null);
+function useLocalizer() {
+  return useContext(LocalizerContext);
+}
+const base = {
+  isToday: (value) => dayjs(value).isSame(dayjs(), "day"),
+  timestamp: (value) => dayjs(value).format("HH:mm"),
+  dateTime: (value) => dayjs(value).format("DD/MM/YYYY HH:mm"),
+  message: {
+    read: () => "Read",
+    reading: () => "Reading...",
+    sending: () => "Sending..."
+  },
+  addChat: {
+    title: () => "Add chat",
+    name: {
+      label: () => "Name",
+      required: () => `Name is required`,
+      max250: () => "Max 250 characters allowed"
+    },
+    members: {
+      label: () => "Members",
+      required: () => "Members is required"
+    },
+    submitBtn: () => "Submit"
+  },
+  system: {
+    "chatify://chat-created": () => "Chat created",
+    "chatify://member-added": () => "New member added",
+    "chatify://member-removed": () => "Member removed",
+    "chatify://chat-name-changed": (_, { newName }) => `Chat name changed to '${newName}'`
+  },
+  input: {
+    placeholder: () => "Start typing... (Press Enter to send, and Shift+Enter to start a new line)"
+  },
+  settings: {
+    members: () => "Members"
+  },
+  size: {
+    bytes: (value) => `${value.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} bytes`,
+    kb: (value) => `${value.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} KB`,
+    mb: (value) => `${value.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} MB`
+  },
+  chatList: {
+    topShown: (count) => `Latest active ${count} chat${count !== 1 ? "s" : ""} shown`
+  }
+};
+const defaultLocalizer = base;
+const isEnter$1 = isHotkey("enter");
+const isCtrlEnter = isHotkey("ctrl+enter");
+const AUTO_SIZE = { maxRows: 5, minRows: 1 };
+const InputTextBox = customize(
+  "InputTextBox",
+  memo((props) => {
+    const { value, onChange, onSend, disabled, inputRef } = props;
+    const localizer = useLocalizer();
+    const onInputChange = useCallback(
+      (e) => onChange(e.target.value),
+      [onChange]
+    );
+    const onKeyDown = useCallback(
+      (e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        if (isEnter$1(e) || isCtrlEnter(e)) {
+          e.preventDefault();
+          onSend(value);
+        }
+      },
+      [onSend, value, disabled]
+    );
+    return /* @__PURE__ */ jsx("div", { className: "wxchtf-text-input-box", children: /* @__PURE__ */ jsx(
+      Input.TextArea,
+      {
+        ref: inputRef,
+        value,
+        onChange: onInputChange,
+        autoSize: AUTO_SIZE,
+        className: "wxchtf-text-input-textarea",
+        placeholder: localizer.input.placeholder(),
+        onKeyDown
+      }
+    ) });
+  })
+);
+const InputSubmitButtonBox = customize("InputSubmitButtonBox", (props) => {
+  const { onSubmit, disabled, loading } = props;
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-submit-btn-box", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: onSubmit,
+      type: "link",
+      icon: /* @__PURE__ */ jsx(Icon, { type: "send" }),
+      className: "wxchtf-submit-btn",
+      disabled,
+      loading
+    }
+  ) });
+});
+const ConversationContext = React.createContext(void 0);
+function useConversation$1() {
+  return React.useContext(ConversationContext);
+}
+const MessageSkeleton = customize("MessageSkeleton", (props) => {
+  const { count = 1 } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from(Array(count)).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "wxchtf-message-skeleton", children: [
+    /* @__PURE__ */ jsx(Skeleton.Avatar, { className: "wxchtf-avatar", active: true }),
+    /* @__PURE__ */ jsx(Skeleton.Button, { active: true, className: "wxchtf-content" })
+  ] }, index)) });
+});
+const ChatListItemName = customize("ChatListItemName", (props) => {
+  const { chat } = props;
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-chat-name", children: chat.name });
+});
+const ChatListItemUnreadCount = customize("ChatListItemUnreadCount", (props) => {
+  const { totalUnreadCount: unreadCount } = props.chat;
+  if (unreadCount == null || unreadCount <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-unread-count", children: unreadCount });
+});
+function formatSystemMessage(localizer, text) {
+  const [key, payload] = text.split("::", 2);
+  const data = payload ? JSON.parse(payload) : null;
+  return localizer.system[key](key, data);
+}
+const SystemMessageRow = customize("SystemMessageRow", (props) => {
+  const { message, containerRef } = props;
+  const { text, sentAt } = message;
+  const localizer = useLocalizer();
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "wxchtf-system-message", children: [
+    /* @__PURE__ */ jsx("div", { className: "wxchtf-text", children: text && formatSystemMessage(localizer, text) }),
+    /* @__PURE__ */ jsx("div", { className: "wxchtf-timestamp", children: localizer.timestamp(sentAt) })
+  ] });
+});
+const Observer = (props) => {
+  const { message, messageRef } = props;
+  const { onRead, lastReadMessageId } = useConversation$1();
+  const isRead = lastReadMessageId != null && message.id.localeCompare(lastReadMessageId) <= 0;
+  const readRef = useRef(isRead);
+  useEffect(() => {
+    readRef.current = readRef.current || isRead;
+  }, [isRead]);
+  const observer = useMemo(
+    () => new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting && !readRef.current) {
+        readRef.current = true;
+        onRead == null ? void 0 : onRead(message.id);
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  useEffect(() => {
+    observer.observe(messageRef.current);
+    return () => observer.disconnect();
+  }, [observer]);
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+function MessageReadObserver(props) {
+  const { noReadTracking } = useConversation$1();
+  if (noReadTracking === true) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Observer, { ...props });
+}
+const SystemMessageBox = customize("SystemMessageBox", (props) => {
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MessageReadObserver, { messageRef: ref, ...props }),
+    /* @__PURE__ */ jsx(SystemMessageRow, { containerRef: ref, ...props })
+  ] });
+});
+const ChatListItemLastMessageContent = customize(
+  "ChatListItemLastMessageContent",
+  (props) => {
+    const { lastMessage } = props.chat;
+    const localizer = useLocalizer();
+    return /* @__PURE__ */ jsx("div", { className: "wxchtf-chat-last-message", children: lastMessage.sentBy.id === "chatify::system" ? lastMessage.text && formatSystemMessage(localizer, lastMessage.text) : lastMessage.text });
+  }
+);
+const ChatListItemLastMessageAuthor = customize(
+  "ChatListItemLastMessageAuthor",
+  (props) => {
+    const { lastMessage } = props.chat;
+    if (lastMessage.sentBy.id === "chatify::system") {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: "wxchtf-chat-last-author", children: lastMessage.sentBy.name });
+  }
+);
+const ChatListItemLastMessageSentAt = customize(
+  "ChatListItemLastMessageSentAt",
+  (props) => {
+    const {
+      chat: {
+        lastMessage: { sentAt }
+      }
+    } = props;
+    const localizer = useLocalizer();
+    return /* @__PURE__ */ jsx("div", { className: "wxchtf-chat-last-sent-at", children: localizer.isToday(sentAt) ? localizer.timestamp(sentAt) : localizer.dateTime(sentAt) });
+  }
+);
+const ChatListItemLastMessage = customize("ChatListItemLastMessage", (props) => {
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-chat-last", children: [
+    /* @__PURE__ */ jsx(ChatListItemLastMessageAuthor, { ...props }),
+    /* @__PURE__ */ jsx(ChatListItemLastMessageContent, { ...props }),
+    /* @__PURE__ */ jsx(ChatListItemLastMessageSentAt, { ...props })
+  ] });
+});
+const ChatListItemAvatar = customize("ChatListItemAvatar", (props) => {
+  const { id } = props.chat;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "wxchtf-chat-avatar",
+      style: {
+        "--background-color": color(id, { lightness: 90 }),
+        "--color": color(id, { saturation: 60, lightness: 65 })
+      },
+      children: /* @__PURE__ */ jsx(Icon, { type: "chat" })
+    }
+  );
+});
+const ChatListItemBox = customize("ChatListItemBox", (props) => {
+  const { noRead = false } = props;
+  const { lastMessage, lastReadMessageId } = props.chat;
+  const read = lastReadMessageId != null && lastReadMessageId.localeCompare(lastMessage.id) >= 0;
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-chat" + (!read && !noRead ? " --unread" : ""), children: [
+    /* @__PURE__ */ jsx(ChatListItemAvatar, { ...props }),
+    /* @__PURE__ */ jsxs("span", { className: "wxchtf-chat-info", children: [
+      /* @__PURE__ */ jsx(ChatListItemName, { ...props }),
+      /* @__PURE__ */ jsx(ChatListItemUnreadCount, { ...props }),
+      /* @__PURE__ */ jsx(ChatListItemLastMessage, { ...props })
+    ] })
+  ] });
+});
+function useOnSelect(props) {
+  const { onSelect } = props;
+  return useMemo(
+    () => onSelect ? (info) => onSelect(info.key) : void 0,
+    [onSelect]
+  );
+}
+function useMenuItems(props) {
+  const { items, noRead, top } = props;
+  const localizer = useLocalizer();
+  return useMemo(() => {
+    const result = items == null ? void 0 : items.slice().sort(
+      (a, b) => -messageSequencePart(a.lastMessage.id).localeCompare(messageSequencePart(b.lastMessage.id))
+    ).map((x) => ({ key: x.id, label: /* @__PURE__ */ jsx(ChatListItemBox, { chat: x, noRead }) }));
+    if (top != null) {
+      return [
+        ...result,
+        {
+          type: "item",
+          key: "top",
+          disabled: true,
+          label: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", cursor: "text", fontStyle: "italic" }, children: localizer.chatList.topShown(top) })
+        }
+      ];
+    }
+    return result;
+  }, [items, noRead, top, localizer]);
+}
+const ChatList = customize("ChatList", (props) => {
+  const { selected: selectedChatId } = props;
+  const selected = useMemo(() => selectedChatId ? [selectedChatId] : [], [selectedChatId]);
+  const onSelect = useOnSelect(props);
+  const items = useMenuItems(props);
+  return /* @__PURE__ */ jsx(Fragment, { children: items && /* @__PURE__ */ jsx(Menu, { className: "wxchtf-chat-list", selectedKeys: selected, onSelect, items }) });
+});
+function useFormatter() {
+  const localizer = useLocalizer();
+  return {
+    size: (value) => {
+      if (value < 1024) {
+        return localizer.size.bytes(value);
+      } else if (value < 1024 * 1024) {
+        return localizer.size.kb(value / 1024);
+      } else {
+        return localizer.size.mb(value / 1024 / 1024);
+      }
+    }
+  };
+}
+const InputBoxFile = customize("InputBoxFile", (props) => {
+  const { file, disabled, onDelete } = props;
+  const formatter = useFormatter();
+  const onDeleteClick = useCallback(() => onDelete(file), [file, onDelete]);
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-file", children: [
+    /* @__PURE__ */ jsxs("div", { className: "wxchtf-file-info", children: [
+      /* @__PURE__ */ jsx("div", { className: "wxchtf-file-name", title: file.name, children: file.name }),
+      /* @__PURE__ */ jsx("div", { className: "wxchtf-file-size", children: formatter.size(file.bytes) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "wxchtf-file-actions", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled,
+        className: "wxchtf-delete",
+        type: "link",
+        icon: /* @__PURE__ */ jsx(Icon, { type: "delete-file" }),
+        onClick: onDeleteClick
+      }
+    ) })
+  ] });
+});
+const InputBoxFileList = customize("InputBoxFileList", (props) => {
+  const { files, onDelete, disabled } = props;
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-file-list", children: files.map((file) => /* @__PURE__ */ jsx(InputBoxFile, { file, onDelete, disabled }, file.ref)) });
+});
+function useFormState() {
+  const { onSend } = useConversation$1();
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+  const { onUpload, files, loading, setFiles, showFileBox, onDeleteFile } = useFlippoInputFileBox();
+  const onSubmit = useCallback(() => {
+    if (!onSend) {
+      return;
+    }
+    const textValue = text.trim().length === 0 ? null : text.trim();
+    if (!textValue && files.length === 0 || loading) {
+      return;
+    }
+    setSending(true);
+    Promise.resolve(onSend({ text: textValue, files })).finally(() => setSending(false)).then(() => {
+      setFiles([]);
+      setText("");
+    });
+  }, [text, onSend, files, setFiles, loading]);
+  return [onSubmit, { text, setText, files, onUpload, loading, showFileBox, onDeleteFile, sending }];
+}
+function useFlippoInputFileBox() {
+  const [loading, setLoading] = useState(false);
+  const [files, setFiles] = useState([]);
+  const { flippo } = useCustomizeContext();
+  const onUpload = useCallback(
+    (files2) => {
+      if (!flippo) return;
+      setLoading(true);
+      Promise.all(files2.map((file) => flippo.store(file))).then(
+        (references) => setFiles((prev) => [
+          ...prev,
+          ...references.map((reference, index) => ({
+            name: files2[index].name,
+            ref: reference,
+            bytes: files2[index].size
+          }))
+        ])
+      ).finally(() => setLoading(false));
+    },
+    [flippo]
+  );
+  const onDeleteFile = useCallback((file) => {
+    setFiles((prev) => prev.filter((f) => f !== file));
+  }, []);
+  return { onUpload, files, loading, setFiles, showFileBox: !!flippo, onDeleteFile };
+}
+const InputBox = customize("InputBox", () => {
+  const [onSend, { text, setText, files, loading, onUpload, showFileBox, onDeleteFile, sending }] = useFormState();
+  const inputRef = useRef(null);
+  const [showFileList, setShowFileList] = useState(false);
+  const toggleShowFileList = useCallback(() => setShowFileList((prev) => !prev), []);
+  const prevFilesLength = useRef(files.length);
+  useLayoutEffect(() => {
+    var _a;
+    return (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  useEffect(() => {
+    if (prevFilesLength.current === 0 && files.length > 0 && !showFileList) {
+      setShowFileList(true);
+    }
+    prevFilesLength.current = files.length;
+    if (files.length === 0 && showFileList) {
+      setShowFileList(false);
+    }
+  }, [files, showFileList]);
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-input-form", children: /* @__PURE__ */ jsxs("div", { className: "wxchtf-input-box", children: [
+    showFileList && /* @__PURE__ */ jsx("div", { className: "wxchtf-file-list-box", children: /* @__PURE__ */ jsx(InputBoxFileList, { files, onDelete: onDeleteFile, disabled: sending }) }),
+    /* @__PURE__ */ jsxs("div", { className: "wxchtf-input-box-row", children: [
+      showFileBox && /* @__PURE__ */ jsx(
+        InputFilesBox,
+        {
+          onAddedClick: toggleShowFileList,
+          onUpload,
+          value: files,
+          loading,
+          disabled: sending
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputTextBox,
+        {
+          value: text,
+          onSend,
+          onChange: setText,
+          disabled: sending,
+          inputRef
+        }
+      ),
+      /* @__PURE__ */ jsx(InputSubmitButtonBox, { onSubmit: onSend, disabled: loading, loading: sending })
+    ] })
+  ] }) });
+});
+const MessageAuthor = customize("MessageAuthor", (props) => {
+  const { sentBy } = props.message;
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-message-author", children: /* @__PURE__ */ jsx(Avatar, { account: sentBy }) });
+});
+const MessageText = customize("MessageText", (props) => {
+  const { text } = props.message;
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-message-text", children: text });
+});
+function open(url) {
+  const w = window.open(url, "_blank");
+  w == null ? void 0 : w.focus();
+}
+function useOpen(props) {
+  const { file } = props;
+  const { flippo } = useCustomizeContext();
+  const [isOpenFetching, setIsOpenFetching] = useState(false);
+  const onOpen = useCallback(
+    () => flippo && Promise.resolve(setIsOpenFetching(true)).then(() => flippo.getSasUrl(file.ref)).then(open).finally(() => setIsOpenFetching(false)),
+    [flippo, file.ref]
+  );
+  return [onOpen, { isOpenFetching }];
+}
+const MessageFile = customize("MessageFile", (props) => {
+  const { file } = props;
+  const formatter = useFormatter();
+  const [onOpen, { isOpenFetching }] = useOpen(props);
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-file", children: [
+    /* @__PURE__ */ jsx("div", { className: "wxchtf-icon", children: /* @__PURE__ */ jsx(Button, { loading: isOpenFetching, onClick: onOpen, type: "link", icon: /* @__PURE__ */ jsx(Icon, { type: "open-file" }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "wxchtf-file-info", children: [
+      /* @__PURE__ */ jsx("div", { className: "wxchtf-name", title: file.name, children: file.name }),
+      /* @__PURE__ */ jsx("div", { className: "wxchtf-size", children: formatter.size(file.bytes) })
+    ] })
+  ] });
+});
+const MessageFileList = customize("MessageFileList", (props) => {
+  const { files } = props.message;
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-file-list", children: files.map((file) => /* @__PURE__ */ jsx(MessageFile, { file }, file.ref)) });
+});
+const MessageContent = customize("MessageContent", (props) => {
+  const { files, text } = props.message;
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-message-content", children: [
+    text && /* @__PURE__ */ jsx(MessageText, { ...props }),
+    files.length > 0 && /* @__PURE__ */ jsx(MessageFileList, { ...props })
+  ] });
+});
+const MessageInfoBox = customize("MessageInfoBox", (props) => {
+  const { message } = props;
+  const { id, sentBy, sentAt } = message;
+  const { lastReadMessageId, isReading, noReadTracking } = useConversation$1();
+  const me = chatifyApi.settings.me();
+  const my = sentBy.id === me;
+  const localizer = useLocalizer();
+  const isRead = lastReadMessageId != null && id.localeCompare(lastReadMessageId) <= 0;
+  const reading = !isRead && (isReading == null ? void 0 : isReading(id));
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-message-info-box", children: [
+    !my && /* @__PURE__ */ jsxs("div", { className: "wxchtf-message-author-name", children: [
+      sentBy.name,
+      ","
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "wxchtf-message-sent-at", children: localizer.timestamp(sentAt) }),
+    !my && !noReadTracking && /* @__PURE__ */ jsx("div", { className: "wxchtf-message-read-box", children: reading ? localizer.message.reading() : localizer.message.read() })
+  ] });
+});
+const MessageRow = customize("MessageRow", (props) => {
+  const { message, containerRef } = props;
+  const { sentBy } = message;
+  const me = chatifyApi.settings.me();
+  const my = sentBy.id === me;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "wxchtf-message" + (my ? " --my" : ""), children: [
+    /* @__PURE__ */ jsx(MessageAuthor, { ...props }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(MessageInfoBox, { ...props }),
+      /* @__PURE__ */ jsx(MessageContent, { ...props })
+    ] })
+  ] });
+});
+const MessageBox = customize("MessageBox", (props) => {
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MessageReadObserver, { messageRef: ref, ...props }),
+    /* @__PURE__ */ jsx(MessageRow, { containerRef: ref, ...props })
+  ] });
+});
+function NextMessagesObserver(props) {
+  const { onLoad, loading } = props;
+  const [intersecting, setIntersecting] = useState(false);
+  const ref = useRef(null);
+  const timerRef = useRef();
+  const observer = useMemo(
+    () => new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        timerRef.current = window.setTimeout(() => setIntersecting(true), 200);
+      } else {
+        clearTimeout(timerRef.current);
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [observer]);
+  useEffect(() => {
+    if (!intersecting) {
+      return;
+    }
+    onLoad();
+  }, [intersecting]);
+  if (loading || intersecting) {
+    return /* @__PURE__ */ jsx(MessageSkeleton, { count: 4 });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-next", ref });
+}
+const SendingMessageText = customize("SendingMessageText", (props) => {
+  const { text } = props;
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-sending-message-text", children: text });
+});
+const SendingMessageInfoBox = customize("SendingMessageInfoBox", (_) => {
+  const localizer = useLocalizer();
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-sending-message-info-box", children: /* @__PURE__ */ jsx("div", { className: "wxchtf-sending-message-sending-box", children: localizer.message.sending() }) });
+});
+const SendingMessageContent = customize("SendingMessageContent", (props) => {
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-sending-message-content", children: [
+    /* @__PURE__ */ jsx(SendingMessageText, { ...props }),
+    /* @__PURE__ */ jsx(SendingMessageInfoBox, { ...props })
+  ] });
+});
+const SendingMessageBox = customize("SendingMessageBox", (props) => {
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-sending-message", children: /* @__PURE__ */ jsx(SendingMessageContent, { ...props }) });
+});
+const ConversationActions = customize("ConversationActions", () => {
+  const { onClose } = useConversation$1();
+  if (!onClose) return null;
+  return /* @__PURE__ */ jsx(Button, { onClick: onClose, type: "link", icon: /* @__PURE__ */ jsx(Icon, { type: "close" }) });
+});
+const ConversationBody = customize("ConversationBody", () => {
+  const { id, messages = [], hasMore, onNext, nextLoading } = useConversation$1();
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-conversation-body", children: [
+    !messages && /* @__PURE__ */ jsx(MessageSkeleton, { count: 5 }),
+    messages == null ? void 0 : messages.map((x) => {
+      if (x.sentBy.id === SYSTEM_ID) {
+        return /* @__PURE__ */ jsx(SystemMessageBox, { message: x }, x.id);
+      }
+      return /* @__PURE__ */ jsx(MessageBox, { message: x }, x.id);
+    }),
+    hasMore && /* @__PURE__ */ jsx(NextMessagesObserver, { onLoad: onNext, loading: nextLoading }, messages.length + id)
+  ] });
+});
+const ConversationName = customize("ConversationName", () => {
+  const { name } = useConversation$1();
+  return /* @__PURE__ */ jsx("span", { className: "wxchtf-conversation-name", children: name });
+});
+const ConversationHeader = customize("ConversationHeader", () => {
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-conversation-header", children: /* @__PURE__ */ jsxs(Row, { justify: "space-between", align: "middle", children: [
+    /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(ConversationName, {}) }),
+    /* @__PURE__ */ jsx(Col, { className: "wxchtf-conversation-actions", children: /* @__PURE__ */ jsx(ConversationActions, {}) })
+  ] }) });
+});
+const Conversation = customize("Conversation", (props) => {
+  const {
+    value,
+    hasMore,
+    messages,
+    nextLoading,
+    onNext,
+    onRead,
+    onSend,
+    isReading,
+    noReadTracking,
+    onClose
+  } = props;
+  const { id, active, name, lastReadMessageId } = value;
+  const context = useMemo(
+    () => ({
+      id,
+      name,
+      active,
+      lastReadMessageId,
+      hasMore,
+      messages,
+      nextLoading,
+      onNext,
+      onRead,
+      onSend,
+      isReading,
+      noReadTracking,
+      onClose
+    }),
+    [
+      id,
+      name,
+      active,
+      onNext,
+      onRead,
+      onSend,
+      hasMore,
+      messages,
+      nextLoading,
+      lastReadMessageId,
+      isReading,
+      noReadTracking,
+      onClose
+    ]
+  );
+  return /* @__PURE__ */ jsx(ConversationContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { className: "wxchtf-conversation", children: /* @__PURE__ */ jsxs("div", { className: "wxchtf-conversation-main", children: [
+    /* @__PURE__ */ jsx(ConversationHeader, {}),
+    /* @__PURE__ */ jsx(ConversationBody, {}),
+    active && /* @__PURE__ */ jsx(InputBox, {})
+  ] }) }) });
+});
+const isEscape = isHotkey("escape");
+const isEnter = isHotkey("enter");
+function useUpdateChatName(id, value) {
+  const [updateChatName] = chatifyApi.useUpdateChatNameMutation();
+  return () => updateChatName({ id, name: value });
+}
+const ChatEditableHeaderName = customize("ChatEditableHeaderName", () => {
+  const { id, name, active } = useConversation$1();
+  const [editNameValue, setEditNameValue] = useState("");
+  const [edit, setEdit] = useState(false);
+  const updateChatName = useUpdateChatName(id, editNameValue);
+  useEffect(() => {
+    if (edit) {
+      setEditNameValue(name ?? "");
+    }
+  }, [edit, name]);
+  if (!active) {
+    return /* @__PURE__ */ jsx("span", { className: "wxchtf-conversation-name", children: name });
+  }
+  if (edit) {
+    return /* @__PURE__ */ jsx(Tooltip, { defaultOpen: true, title: "Press Enter to save new chat name or Escape to cancel editing", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: editNameValue,
+        onChange: (e) => setEditNameValue(e.target.value),
+        onBlur: () => setEdit(false),
+        onKeyDown: (e) => {
+          if (isEscape(e)) {
+            setEdit(false);
+          } else if (isEnter(e)) {
+            setEdit(false);
+            if (editNameValue !== name && editNameValue.trim() !== "") {
+              updateChatName();
+            }
+          }
+        },
+        autoFocus: true
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { title: "Click to edit name...", children: /* @__PURE__ */ jsx("span", { className: "wxchtf-conversation-name --editable", onClick: () => setEdit(true), children: name }) });
+});
+const ChatHeaderActions = customize("ChatHeaderActions", () => {
+  const { active } = useConversation$1();
+  if (!active) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-chat-members", children: [
+    /* @__PURE__ */ jsx(ChatMembersPreview, {}),
+    /* @__PURE__ */ jsx(ChatMembersButton, {})
+  ] });
+});
+const DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE = {
+  ConversationName: () => /* @__PURE__ */ jsx(ChatEditableHeaderName, {}),
+  ConversationActions: () => /* @__PURE__ */ jsx(ChatHeaderActions, {})
+};
+function useConversation(props) {
+  const { value: chat } = props;
+  const { id, name, active, lastReadMessageId } = chat;
+  const { data: messageList } = chatifyApi.useGetChatMessageListQuery({ chatId: id });
+  const { messages, hasMore } = messageList ?? {};
+  const [fetchNext, { isLoading: isFetchNextLoading }] = chatifyApi.useFetchNextChatMessageListMutation();
+  const onNext = useCallback(() => fetchNext({ chatId: id }), [fetchNext, id]);
+  const [read] = chatifyApi.useReadChatMessageMutation();
+  const onRead = useCallback((id2) => read({ id: id2 }), [read]);
+  const [send] = chatifyApi.useSendChatMessageMutation();
+  const onSend = useCallback((message) => send({ ...message, chatId: id }).unwrap(), [id, send]);
+  const { data: readQueue } = chatifyApi.useGetChatMessageReadQueueQuery();
+  const conversation = useMemo(() => {
+    if (!id) {
+      return null;
+    }
+    const result = {
+      value: { id, name, active, lastReadMessageId },
+      messages,
+      hasMore,
+      onNext,
+      nextLoading: isFetchNextLoading,
+      onRead,
+      onSend,
+      isReading: (id2) => readQueue.some((x) => chatId(x.value) === chatId(id2) && id2 <= x.value)
+    };
+    return result;
+  }, [
+    onNext,
+    onRead,
+    onSend,
+    isFetchNextLoading,
+    id,
+    name,
+    active,
+    messages,
+    hasMore,
+    lastReadMessageId,
+    readQueue
+  ]);
+  return conversation;
+}
+function Content$1(props) {
+  const conversation = useConversation(props);
+  const { showMembers } = useChatContext();
+  if (!conversation) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-chat", children: [
+    /* @__PURE__ */ jsx(Conversation, { ...conversation }),
+    showMembers && /* @__PURE__ */ jsx(ChatMembersPanel, {})
+  ] });
+}
+const ChatView = customize("ChatView", (props) => {
+  const { value } = props;
+  const customized = useCustomizeContext();
+  const customize2 = useMemo(
+    () => ({ ...customized ?? {}, ...DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE }),
+    [customized]
+  );
+  return /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customize2, children: /* @__PURE__ */ jsx(ChatContext, { id: value.id, children: /* @__PURE__ */ jsx(Content$1, { value }) }) });
+});
+function ChatPanel(props) {
+  const { id, className = "", customize: customize2, localizer = defaultLocalizer, style } = props;
+  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+  return /* @__PURE__ */ jsx("div", { className: `wxchtf-chatify wxchtf-chat-panel ${className}`, style, children: /* @__PURE__ */ jsx(LocalizerContext.Provider, { value: localizer, children: /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customize2, children: chat && /* @__PURE__ */ jsx(ChatView, { value: chat }, id) }) }) });
+}
+const CreateChatNameInput = customize("CreateChatNameInput", (props) => {
+  const { name } = props;
+  const localizer = useLocalizer();
+  return /* @__PURE__ */ jsx(
+    Form.Item,
+    {
+      name,
+      label: localizer.addChat.name.label(),
+      rules: [
+        { required: true, message: localizer.addChat.name.required() },
+        { max: 250, message: localizer.addChat.name.max250() }
+      ],
+      children: /* @__PURE__ */ jsx(Input, {})
+    }
+  );
+});
+function CheckboxList(props) {
+  const { value, onChange } = props;
+  const { data: accounts, isFetching } = chatifyApi.useGetAccountListQuery();
+  const me = chatifyApi.settings.me();
+  const dataSource = useMemo(() => (accounts == null ? void 0 : accounts.filter((x) => x.id !== me)) ?? [], [accounts, me]);
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      rowKey: "id",
+      className: "wxchtf-create-chat-member-input-list",
+      loading: isFetching,
+      dataSource,
+      renderItem: (x) => {
+        const checked = value.includes(x.id);
+        return /* @__PURE__ */ jsx(List.Item, { className: checked ? "--selected" : "", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked,
+            onChange: () => onChange(value.includes(x.id) ? value.filter((y) => y !== x.id) : [...value, x.id]),
+            children: /* @__PURE__ */ jsx(List.Item.Meta, { avatar: /* @__PURE__ */ jsx(Avatar, { account: x }), title: x.name })
+          }
+        ) });
+      }
+    }
+  );
+}
+const CreateChatMemberInput = customize(
+  "CreateChatMemberInput",
+  (props) => {
+    const { name } = props;
+    const localizer = useLocalizer();
+    return /* @__PURE__ */ jsx(
+      Form.Item,
+      {
+        label: localizer.addChat.members.label(),
+        rules: [{ required: true, message: localizer.addChat.members.required() }],
+        name,
+        children: /* @__PURE__ */ jsx(CheckboxList, {})
+      }
+    );
+  }
+);
+const INITIAL_VALUE = {
+  name: "",
+  members: []
+};
+const CreateChatForm = customize("CreateChatForm", (props) => {
+  const { value = INITIAL_VALUE, onSubmit, busy = false } = props;
+  const localizer = useLocalizer();
+  return /* @__PURE__ */ jsxs(Form, { onFinish: onSubmit, layout: "vertical", disabled: busy, initialValues: value, children: [
+    /* @__PURE__ */ jsx(CreateChatNameInput, { name: "name" }),
+    /* @__PURE__ */ jsx(CreateChatMemberInput, { name: "members" }),
+    /* @__PURE__ */ jsx(Button, { loading: busy, type: "primary", block: true, htmlType: "submit", children: localizer.addChat.submitBtn() })
+  ] });
+});
+const ChatGroupReactContext = React.createContext(null);
+function useChatGroupContext() {
+  return useContext(ChatGroupReactContext);
+}
+function ChatGroupContext(props) {
+  const { children } = props;
+  const [state, setState] = useState({
+    chatId: null,
+    view: null,
+    showMembers: false
+  });
+  const value = useMemo(
+    () => ({
+      ...state,
+      openChat: (chatId2) => setState((prev) => ({ ...prev, view: "chat", chatId: chatId2 })),
+      none: () => setState((prev) => ({ ...prev, view: null, chatId: null })),
+      toggleMembers: () => setState((prev) => ({ ...prev, showMembers: !prev.showMembers })),
+      toggleNewChat: () => setState((prev) => {
+        if (prev.view === "new-chat" && !prev.chatId) {
+          return { ...prev, view: null };
+        } else if (prev.view === "new-chat" && prev.chatId) {
+          return { ...prev, view: "chat" };
+        } else {
+          return { ...prev, view: "new-chat" };
+        }
+      })
+    }),
+    [state]
+  );
+  return /* @__PURE__ */ jsx(ChatGroupReactContext.Provider, { value, children });
+}
+function useSubmit() {
+  const [add, { isLoading }] = chatifyApi.useAddChatMutation();
+  const { openChat } = useChatGroupContext();
+  const onSubmit = useCallback(
+    (value) => add({
+      name: value.name,
+      members: value.members
+    }).unwrap().then((id) => openChat(id)),
+    [add, openChat]
+  );
+  return [onSubmit, isLoading];
+}
+const CreateChatPanel = customize("CreateChatPanel", () => {
+  const localizer = useLocalizer();
+  const [onSubmit, submitting] = useSubmit();
+  const { toggleNewChat } = useChatGroupContext();
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-create-chat-panel", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => toggleNewChat(),
+        className: "wxchtf-create-chat-panel-close",
+        type: "link",
+        icon: /* @__PURE__ */ jsx(Icon, { type: "close" })
+      }
+    ),
+    /* @__PURE__ */ jsx("h3", { children: localizer.addChat.title() }),
+    /* @__PURE__ */ jsx(CreateChatForm, { busy: submitting ?? false, onSubmit })
+  ] });
+});
+const CreateChatButton = customize("CreateChatButton", () => {
+  const { toggleNewChat } = useChatGroupContext();
+  return /* @__PURE__ */ jsx("span", { className: "wxchtf-add-btn-wrapper", children: /* @__PURE__ */ jsx(Button, { className: "wxchtf-add-btn", onClick: toggleNewChat, icon: "+", children: "Add chat" }) });
+});
+function useData() {
+  const { data: chats } = chatifyApi.useGetChatListQuery();
+  return useMemo(
+    () => (chats == null ? void 0 : chats.map(
+      (x) => ({
+        id: x.id,
+        name: x.name,
+        lastMessage: x.message,
+        lastReadMessageId: x.lastReadMessageId
+      })
+    )) ?? [],
+    [chats]
+  );
+}
+const ChatListPanel = customize("ChatListPanel", () => {
+  const { chatId: chatId2, openChat } = useChatGroupContext();
+  const data = useData();
+  return /* @__PURE__ */ jsx(ChatList, { items: data, selected: chatId2, onSelect: openChat });
+});
+const ChatGroupAside = customize("ChatGroupAside", () => {
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-aside", children: [
+    /* @__PURE__ */ jsx(CreateChatButton, {}),
+    /* @__PURE__ */ jsx(ChatListPanel, {})
+  ] });
+});
+const ChatGroupHeader = customize("ChatGroupHeader", () => {
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-header" });
+});
+const ChatGroupFooter = customize("ChatGroupFooter", () => /* @__PURE__ */ jsx("div", { className: "wxchtf-footer" }));
+const ChatGroupMain = customize("ChatGroupMain", () => {
+  const { chatId: chatId2, view } = useChatGroupContext();
+  const chat = chatifyApi.useChatListItem(chatId2);
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-main", children: [
+    view === "chat" && chat && /* @__PURE__ */ jsx(ChatView, { value: chat }, chatId2),
+    view === "new-chat" && /* @__PURE__ */ jsx(CreateChatPanel, {})
+  ] });
+});
+const ChatGroupBody = customize("ChatGroupBody", () => /* @__PURE__ */ jsxs("div", { className: "wxchtf-body", children: [
+  /* @__PURE__ */ jsx(ChatGroupAside, {}),
+  /* @__PURE__ */ jsx(ChatGroupMain, {})
+] }));
+function Content(props) {
+  const { className = "", style } = props;
+  const { data: chats } = chatifyApi.useGetChatListQuery();
+  const { openChat, none, chatId: chatId2 } = useChatGroupContext();
+  const openFirstChatRef = useRef(false);
+  useEffect(() => {
+    if (chats && !chats.some((x) => x.id === chatId2)) {
+      chats.length ? openChat(chats[0].id) : none();
+    }
+  }, [chats, chatId2]);
+  useEffect(() => {
+    if (chats && !openFirstChatRef.current) {
+      openFirstChatRef.current = true;
+      chats.length && openChat(chats[0].id);
+    }
+  }, [chats]);
+  return /* @__PURE__ */ jsxs("div", { className: className + " wxchtf-chatify wxchtf-chat-group", style, children: [
+    /* @__PURE__ */ jsx(ChatGroupHeader, {}),
+    /* @__PURE__ */ jsx(ChatGroupBody, {}),
+    /* @__PURE__ */ jsx(ChatGroupFooter, {})
+  ] });
+}
+const DEFAULT_CUSTOMIZE$1 = {
+  ChatGroupHeader: null,
+  ChatGroupFooter: null
+};
+const ChatGroupPanel = (props) => {
+  const { localizer = defaultLocalizer, customize: customize2 = DEFAULT_CUSTOMIZE$1 } = props;
+  const customizeValue = useMemo(() => Object.assign({}, DEFAULT_CUSTOMIZE$1, customize2), [customize2]);
+  return /* @__PURE__ */ jsx(LocalizerContext.Provider, { value: localizer, children: /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customizeValue, children: /* @__PURE__ */ jsx(ChatGroupContext, { children: /* @__PURE__ */ jsx(Content, { ...props }) }) }) });
+};
+const ThreadContext = React.createContext(null);
+function useThreadContext() {
+  return React.useContext(ThreadContext);
+}
+const ThreadActions = customize("ThreadActions", () => {
+  const { watch, onWatch } = useThreadContext();
+  if (!watch) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: "Watch thread", children: /* @__PURE__ */ jsx(Button, { type: "link", icon: /* @__PURE__ */ jsx(Icon, { type: "watch" }), onClick: () => onWatch(true) }) });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { title: "Unwatch thread", children: /* @__PURE__ */ jsx(Button, { type: "link", icon: /* @__PURE__ */ jsx(Icon, { type: "unwatch" }), onClick: () => onWatch(false) }) });
+});
+function usePanelState(props) {
+  const { threadId } = props;
+  const { data: thread } = chatifyApi.useGetThreadQuery({ id: threadId });
+  const { data: messageList } = chatifyApi.useGetThreadMessageListQuery({ threadId });
+  const { id, name, archive, lastReadMessageId, watch } = thread ?? {};
+  const { messages, hasMore } = messageList ?? {};
+  const [read] = chatifyApi.useReadThreadMessageMutation();
+  const onRead = useCallback((id2) => read({ id: id2 }), [read]);
+  const [fetchNext, { isLoading: isFetchNextLoading }] = chatifyApi.useFetchNextThreadMessageListMutation();
+  const onNext = useCallback(() => fetchNext({ threadId }), [fetchNext, threadId]);
+  const [send] = chatifyApi.useSendThreadMessageMutation();
+  const onSend = useCallback(
+    (message) => send({ body: message, threadId }).unwrap(),
+    [threadId, send]
+  );
+  const { data: readQueue } = chatifyApi.useGetThreadMessageReadQueueQuery();
+  const conversation = useMemo(() => {
+    if (!id) {
+      return null;
+    }
+    const result = {
+      value: { id, name, active: !archive, lastReadMessageId: lastReadMessageId ?? null },
+      messages,
+      hasMore,
+      onNext,
+      nextLoading: isFetchNextLoading,
+      onRead,
+      onSend,
+      noReadTracking: !watch,
+      isReading: (id2) => readQueue.some(
+        (unit) => parseThreadMessageId(unit.value)[0] === parseThreadMessageId(id2)[0] && id2 <= unit.value
+      )
+    };
+    return result;
+  }, [
+    onNext,
+    onRead,
+    onSend,
+    isFetchNextLoading,
+    id,
+    name,
+    archive,
+    messages,
+    hasMore,
+    lastReadMessageId,
+    readQueue,
+    watch
+  ]);
+  const [watchThread] = chatifyApi.useWatchThreadMutation();
+  const threadContext = useMemo(
+    () => thread ? {
+      id: thread.id,
+      watch: thread.watch,
+      onWatch: (value) => watchThread({ id: thread.id, watch: value }).unwrap()
+    } : null,
+    [thread, watchThread]
+  );
+  return [conversation, threadContext];
+}
+const DEFAULT_CUSTOMIZE = {
+  ConversationActions: () => /* @__PURE__ */ jsx(ThreadActions, {})
+};
+function ThreadPanel(props) {
+  const { threadId, customize: customize2, localizer = defaultLocalizer, className = "" } = props;
+  const [conversation, threadContext] = usePanelState(props);
+  const customizeMergeValue = useMemo(() => ({ ...DEFAULT_CUSTOMIZE, ...customize2 }), [customize2]);
+  useEffect(() => {
+    chatifyApi.settings.client.connectToThread(threadId);
+    return () => {
+      chatifyApi.settings.client.disconnectFromThread(threadId);
+    };
+  }, [threadId]);
+  if (!conversation || !threadContext) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(LocalizerContext.Provider, { value: localizer, children: /* @__PURE__ */ jsx(ThreadContext.Provider, { value: threadContext, children: /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customizeMergeValue, children: /* @__PURE__ */ jsx("div", { className: `wxchtf-chatify wxchtf-thread ${className}`, children: conversation && /* @__PURE__ */ jsx(Conversation, { ...conversation }) }) }) }) });
+}
+const Chatify = {
+  Thread: ThreadPanel,
+  ChatGroup: ChatGroupPanel,
+  Chat: ChatPanel
+};
+export {
+  SendingMessageText as $,
+  ChatListPanel as A,
+  useChatGroupContext as B,
+  CustomizeContext as C,
+  DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE as D,
+  ChatGroupContext as E,
+  ChatGroupPanel as F,
+  InputFileButton as G,
+  InputFilesBox as H,
+  InputBox as I,
+  InputSubmitButtonBox as J,
+  InputTextBox as K,
+  LocalizerContext as L,
+  InputBoxFileList as M,
+  InputBoxFile as N,
+  MessageAuthor as O,
+  MessageBox as P,
+  MessageContent as Q,
+  MessageInfoBox as R,
+  MessageRow as S,
+  MessageText as T,
+  MessageFileList as U,
+  MessageFile as V,
+  NextMessagesObserver as W,
+  MessageReadObserver as X,
+  SendingMessageBox as Y,
+  SendingMessageContent as Z,
+  SendingMessageInfoBox as _,
+  useCustomize as a,
+  SystemMessageBox as a0,
+  formatSystemMessage as a1,
+  SystemMessageRow as a2,
+  ConversationActions as a3,
+  ConversationBody as a4,
+  ConversationHeader as a5,
+  ConversationName as a6,
+  ConversationContext as a7,
+  useConversation$1 as a8,
+  Conversation as a9,
+  CHATIFY_SIGNALR_METHODS as aA,
+  ChatifyClient as aB,
+  unsubscribe as aC,
+  ThreadActions as aa,
+  ThreadPanel as ab,
+  ThreadContext as ac,
+  useThreadContext as ad,
+  Avatar as ae,
+  ICONS as af,
+  Icon as ag,
+  MessageSkeleton as ah,
+  ChatList as ai,
+  ChatListItemAvatar as aj,
+  ChatListItemBox as ak,
+  ChatListItemLastMessage as al,
+  ChatListItemLastMessageAuthor as am,
+  ChatListItemLastMessageContent as an,
+  ChatListItemLastMessageSentAt as ao,
+  ChatListItemName as ap,
+  ChatListItemUnreadCount as aq,
+  SYSTEM_ID as ar,
+  chatId as as,
+  messageSequencePart as at,
+  parseThreadMessageId as au,
+  calcThreadUnreadCount as av,
+  calcThreadListUnreadCount as aw,
+  useChatListItem as ax,
+  useUnreadThreadMessageCount as ay,
+  chatifyApi as az,
+  customize as b,
+  color as c,
+  Chatify as d,
+  useLocalizer as e,
+  defaultLocalizer as f,
+  ChatMembersButton as g,
+  ChatMembersPanel as h,
+  ChatMembersPreview as i,
+  ChatView as j,
+  useChatContext as k,
+  ChatContext as l,
+  ChatEditableHeaderName as m,
+  ChatHeaderActions as n,
+  ChatPanel as o,
+  CreateChatForm as p,
+  CreateChatMemberInput as q,
+  CreateChatNameInput as r,
+  CreateChatPanel as s,
+  CreateChatButton as t,
+  useCustomizeContext as u,
+  ChatGroupAside as v,
+  ChatGroupHeader as w,
+  ChatGroupFooter as x,
+  ChatGroupMain as y,
+  ChatGroupBody as z
+};
+//# sourceMappingURL=Chatify-DGRV4QKP.js.map