@ermis-network/ermis-chat-react 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(index_exports, {
   ChannelItem: () => ChannelItem,
   ChannelList: () => ChannelList,
   ChatProvider: () => ChatProvider,
+  CreateChannelModal: () => CreateChannelModal,
   DefaultChannelInfoActions: () => DefaultChannelInfoActions,
   DefaultChannelInfoCover: () => DefaultChannelInfoCover,
   DefaultChannelInfoHeader: () => DefaultChannelInfoHeader,
@@ -65,6 +66,7 @@ __export(index_exports, {
   SystemMessage: () => SystemMessage,
   SystemMessageItem: () => SystemMessageItem,
   TypingIndicator: () => TypingIndicator,
+  UserPicker: () => UserPicker,
   VirtualMessageList: () => VirtualMessageList,
   closeAllDropdowns: () => closeAllDropdowns,
   dedupMessages: () => dedupMessages,
@@ -744,6 +746,9 @@ function getLastMessagePreview(channel) {
     const userMap = buildUserMap(channel.state);
     return { text: (0, import_ermis_chat_sdk.parseSignalMessage)(rawText, userMap), user: "" };
   }
+  if (msgType === "sticker" || lastMsg.sticker_url) {
+    return { text: "Sticker", user: lastMsg.user?.name || lastMsg.user_id || "" };
+  }
   let displayText = rawText;
   if (!displayText && lastMsg.attachments && lastMsg.attachments.length > 0) {
     const att = lastMsg.attachments[0];
@@ -4481,7 +4486,7 @@ var MessageInput = import_react42.default.memo(({
 MessageInput.displayName = "MessageInput";
 
 // src/components/ChannelInfo/ChannelInfo.tsx
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 
 // src/components/ChannelInfo/ChannelInfoTabs.tsx
 var import_react48 = __toESM(require("react"));
@@ -5017,37 +5022,49 @@ var DefaultChannelInfoTabs = import_react48.default.memo(({
 });
 
 // src/components/ChannelInfo/AddMemberModal.tsx
+var import_react50 = require("react");
+
+// src/components/UserPicker.tsx
 var import_react49 = __toESM(require("react"));
 var import_virtua5 = require("virtua");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var LIST_CONTAINER_STYLE = { overflow: "hidden", height: "400px" };
-var VLIST_STYLE = { height: "100%" };
-var DISABLED_BTN_STYLE = { opacity: 0.5, cursor: "not-allowed" };
+var DEFAULT_PAGE_SIZE = 30;
+var SEARCH_DEBOUNCE_MS = 500;
+var LIST_STYLE = { height: "100%" };
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polyline", { points: "20 6 9 17 4 12" }) });
 var DefaultUserItem = import_react49.default.memo(({
   user,
-  isExisting,
-  isAdding,
-  onAdd,
-  AvatarComponent,
-  addedLabel = "Added",
-  addingLabel = "Adding...",
-  addLabel = "Add"
-}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ermis-modal-user-item", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AvatarComponent, { image: user.avatar, name: user.name || user.id, size: 36 }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ermis-modal-user-info", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ermis-modal-user-name", children: user.name || user.id }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    "button",
-    {
-      className: `ermis-modal-add-btn ${isExisting ? "ermis-modal-add-btn--disabled" : ""}`,
-      onClick: () => onAdd(user.id),
-      disabled: isAdding || isExisting,
-      style: isExisting ? DISABLED_BTN_STYLE : void 0,
-      children: isExisting ? addedLabel : isAdding ? addingLabel : addLabel
-    }
-  )
-] }));
+  selected,
+  disabled,
+  mode,
+  onToggle,
+  AvatarComponent
+}) => {
+  const handleClick = (0, import_react49.useCallback)(() => {
+    if (!disabled) onToggle(user);
+  }, [disabled, onToggle, user]);
+  const inputClass = [
+    "ermis-user-picker__input",
+    mode === "radio" ? "ermis-user-picker__input--radio" : "ermis-user-picker__input--checkbox",
+    selected ? "ermis-user-picker__input--checked" : ""
+  ].join(" ");
+  const itemClass = [
+    "ermis-user-picker__item",
+    selected ? "ermis-user-picker__item--selected" : "",
+    disabled ? "ermis-user-picker__item--disabled" : ""
+  ].join(" ");
+  const detail = user.email || user.phone || "";
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: itemClass, onClick: handleClick, role: "option", "aria-selected": selected, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: inputClass, children: selected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckIcon, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AvatarComponent, { image: user.avatar, name: user.name || user.id, size: 36 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ermis-user-picker__info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ermis-user-picker__name", children: user.name || user.id }),
+      detail && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ermis-user-picker__detail", children: detail })
+    ] })
+  ] });
+});
 DefaultUserItem.displayName = "DefaultUserItem";
-var DefaultSearchInput = ({ value, onChange, placeholder }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ermis-modal-search", children: [
+var DefaultSearchInput = ({ value, onChange, placeholder }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ermis-user-picker__search", children: [
   /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
@@ -5063,33 +5080,69 @@ var DefaultSearchInput = ({ value, onChange, placeholder }) => /* @__PURE__ */ (
     }
   )
 ] });
-var AddMemberModal = ({
-  channel,
-  currentMembers,
-  onClose,
+var DefaultSelectedBox = import_react49.default.memo(({
+  users,
+  onRemove,
   AvatarComponent,
-  title = "Add Member",
+  emptyLabel
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ermis-user-picker__selected-box", children: [
+  users.length === 0 && emptyLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ermis-user-picker__selected-empty", children: emptyLabel }),
+  users.map((u) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ermis-user-picker__chip", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AvatarComponent, { image: u.avatar, name: u.name || u.id, size: 20 }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ermis-user-picker__chip-name", children: u.name || u.id }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "button",
+      {
+        className: "ermis-user-picker__chip-remove",
+        onClick: () => onRemove(u.id),
+        "aria-label": `Remove ${u.name || u.id}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] })
+      }
+    )
+  ] }, u.id))
+] }));
+DefaultSelectedBox.displayName = "DefaultSelectedBox";
+var UserPicker = ({
+  mode,
+  onSelectionChange,
+  excludeUserIds,
+  initialSelectedUsers,
+  pageSize = DEFAULT_PAGE_SIZE,
+  AvatarComponent = Avatar,
+  UserItemComponent,
+  SelectedBoxComponent,
+  SearchInputComponent,
   searchPlaceholder = "Search by name, email or phone...",
   loadingText = "Loading users...",
   emptyText = "No users found.",
-  addLabel = "Add",
-  addingLabel = "Adding...",
-  addedLabel = "Added",
-  UserItemComponent,
-  SearchInputComponent
+  loadingMoreText = "Loading more...",
+  selectedEmptyLabel
 }) => {
   const { client } = useChatClient();
-  const [initialUsers, setInitialUsers] = (0, import_react49.useState)([]);
+  const currentUserId = client?.userID;
+  const [allUsers, setAllUsers] = (0, import_react49.useState)([]);
+  const [page, setPage] = (0, import_react49.useState)(1);
+  const [hasMore, setHasMore] = (0, import_react49.useState)(true);
+  const [loading, setLoading] = (0, import_react49.useState)(true);
+  const [loadingMore, setLoadingMore] = (0, import_react49.useState)(false);
   const [remoteUsers, setRemoteUsers] = (0, import_react49.useState)([]);
+  const [isSearching, setIsSearching] = (0, import_react49.useState)(false);
   const [searchInput, setSearchInput] = (0, import_react49.useState)("");
   const [search, setSearch] = (0, import_react49.useState)("");
   const [isPendingFilter, startTransition] = (0, import_react49.useTransition)();
-  const [loading, setLoading] = (0, import_react49.useState)(true);
-  const [isSearching, setIsSearching] = (0, import_react49.useState)(false);
-  const [addingUser, setAddingUser] = (0, import_react49.useState)(null);
-  const [justAdded, setJustAdded] = (0, import_react49.useState)(/* @__PURE__ */ new Set());
+  const [selectedMap, setSelectedMap] = (0, import_react49.useState)(() => {
+    const map = /* @__PURE__ */ new Map();
+    initialSelectedUsers?.forEach((u) => map.set(u.id, u));
+    return map;
+  });
+  const vlistRef = (0, import_react49.useRef)(null);
   const UserRow = UserItemComponent || DefaultUserItem;
   const SearchInput = SearchInputComponent || DefaultSearchInput;
+  const SelectedBox = SelectedBoxComponent || DefaultSelectedBox;
+  const excludeSet = (0, import_react49.useMemo)(() => new Set(excludeUserIds || []), [excludeUserIds]);
   const handleSearchChange = (0, import_react49.useCallback)((e) => {
     const val = e.target.value;
     setSearchInput(val);
@@ -5102,12 +5155,15 @@ var AddMemberModal = ({
     const fetchUsers = async () => {
       if (!client) return;
       try {
-        const response = await client.queryUsers("100", 1);
+        setLoading(true);
+        const response = await client.queryUsers(String(pageSize), 1);
         if (active && response.data) {
-          setInitialUsers(response.data);
+          setAllUsers(response.data);
+          setHasMore(response.data.length >= pageSize);
+          setPage(1);
         }
       } catch (err) {
-        console.error("Error fetching users:", err);
+        console.error("[UserPicker] Error fetching users:", err);
       } finally {
         if (active) setLoading(false);
       }
@@ -5116,17 +5172,38 @@ var AddMemberModal = ({
     return () => {
       active = false;
     };
-  }, [client]);
+  }, [client, pageSize]);
+  const loadMore = (0, import_react49.useCallback)(async () => {
+    if (!client || loadingMore || !hasMore || search.trim()) return;
+    const nextPage = page + 1;
+    setLoadingMore(true);
+    try {
+      const response = await client.queryUsers(String(pageSize), nextPage);
+      if (response.data) {
+        setAllUsers((prev) => {
+          const existingIds = new Set(prev.map((u) => u.id));
+          const newUsers = response.data.filter((u) => !existingIds.has(u.id));
+          return [...prev, ...newUsers];
+        });
+        setHasMore(response.data.length >= pageSize);
+        setPage(nextPage);
+      }
+    } catch (err) {
+      console.error("[UserPicker] Error loading more users:", err);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [client, loadingMore, hasMore, page, pageSize, search]);
   const localFilteredUsers = (0, import_react49.useMemo)(() => {
-    if (!search.trim()) return initialUsers;
     const term = search.toLowerCase().trim();
-    return initialUsers.filter((u) => {
+    if (!term) return allUsers;
+    return allUsers.filter((u) => {
+      const name = (u.name || "").toLowerCase();
       const email = (u.email || "").toLowerCase();
       const phone = (u.phone || "").toLowerCase();
-      const name = (u.name || "").toLowerCase();
-      return email.includes(term) || phone.includes(term) || name.includes(term);
+      return name.includes(term) || email.includes(term) || phone.includes(term);
     });
-  }, [search, initialUsers]);
+  }, [search, allUsers]);
   (0, import_react49.useEffect)(() => {
     if (!search.trim() || localFilteredUsers.length > 0) {
       setRemoteUsers([]);
@@ -5142,33 +5219,69 @@ var AddMemberModal = ({
           setRemoteUsers(response.data);
         }
       } catch (err) {
-        console.error("Error searching remote users:", err);
+        console.error("[UserPicker] Error searching remote users:", err);
       } finally {
         if (!cancelled) setIsSearching(false);
       }
-    }, 500);
+    }, SEARCH_DEBOUNCE_MS);
     return () => {
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [search, localFilteredUsers.length, client]);
+  }, [search, localFilteredUsers.length, client, excludeSet]);
   const usersToDisplay = search.trim() && localFilteredUsers.length === 0 ? remoteUsers : localFilteredUsers;
   const isListLoading = loading || isSearching || isPendingFilter;
-  const existingMemberIds = (0, import_react49.useMemo)(() => {
-    return new Set(currentMembers.map((m) => m.user_id));
-  }, [currentMembers]);
-  const handleAdd = (0, import_react49.useCallback)(async (userId) => {
-    try {
-      setAddingUser(userId);
-      await channel.addMembers([userId]);
-      setJustAdded((prev) => new Set(prev).add(userId));
-    } catch (err) {
-      console.error("Failed to add member:", err);
-    } finally {
-      setAddingUser(null);
+  const handleToggle = (0, import_react49.useCallback)((user) => {
+    if (user.id === currentUserId || excludeSet.has(user.id)) return;
+    setSelectedMap((prev) => {
+      const next = new Map(prev);
+      if (mode === "radio") {
+        if (next.has(user.id)) {
+          next.clear();
+        } else {
+          next.clear();
+          next.set(user.id, user);
+        }
+      } else {
+        if (next.has(user.id)) {
+          next.delete(user.id);
+        } else {
+          next.set(user.id, user);
+        }
+      }
+      return next;
+    });
+  }, [mode, currentUserId, excludeSet]);
+  (0, import_react49.useEffect)(() => {
+    onSelectionChange?.(Array.from(selectedMap.values()));
+  }, [selectedMap, onSelectionChange]);
+  const handleRemoveSelected = (0, import_react49.useCallback)((userId) => {
+    setSelectedMap((prev) => {
+      const next = new Map(prev);
+      next.delete(userId);
+      return next;
+    });
+  }, []);
+  const handleScroll = (0, import_react49.useCallback)((offset) => {
+    const el = vlistRef.current;
+    if (!el) return;
+    const scrollSize = el.scrollSize ?? 0;
+    const viewportSize = el.viewportSize ?? 0;
+    if (scrollSize > 0 && offset + viewportSize >= scrollSize - 50) {
+      loadMore();
     }
-  }, [channel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Modal, { isOpen: true, onClose, title, maxWidth: "480px", children: [
+  }, [loadMore]);
+  const selectedArr = (0, import_react49.useMemo)(() => Array.from(selectedMap.values()), [selectedMap]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ermis-user-picker", role: "listbox", "aria-multiselectable": mode === "checkbox", children: [
+    mode === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      SelectedBox,
+      {
+        users: selectedArr,
+        onRemove: handleRemoveSelected,
+        AvatarComponent,
+        emptyLabel: selectedEmptyLabel
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       SearchInput,
       {
@@ -5177,28 +5290,101 @@ var AddMemberModal = ({
         placeholder: searchPlaceholder
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ermis-modal-user-list", style: LIST_CONTAINER_STYLE, children: isListLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ermis-modal-loading", children: loadingText }) : usersToDisplay.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ermis-modal-empty", children: emptyText }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_virtua5.VList, { style: VLIST_STYLE, children: usersToDisplay.map((user) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      UserRow,
-      {
-        user,
-        isExisting: existingMemberIds.has(user.id) || justAdded.has(user.id),
-        isAdding: addingUser === user.id,
-        onAdd: handleAdd,
-        AvatarComponent,
-        addedLabel,
-        addingLabel,
-        addLabel
-      },
-      user.id
-    )) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ermis-user-picker__list", children: isListLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ermis-user-picker__loading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ermis-user-picker__spinner" }),
+      loadingText
+    ] }) : usersToDisplay.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ermis-user-picker__empty", children: emptyText }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_virtua5.VList, { ref: vlistRef, style: LIST_STYLE, onScroll: handleScroll, children: [
+      usersToDisplay.map((user) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        UserRow,
+        {
+          user,
+          selected: selectedMap.has(user.id),
+          disabled: user.id === currentUserId || excludeSet.has(user.id),
+          mode,
+          onToggle: handleToggle,
+          AvatarComponent
+        },
+        user.id
+      )),
+      loadingMore && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ermis-user-picker__load-more", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ermis-user-picker__spinner" }),
+        loadingMoreText
+      ] })
+    ] }) })
   ] });
 };
+UserPicker.displayName = "UserPicker";
 
-// src/components/ChannelInfo/EditChannelModal.tsx
-var import_react50 = __toESM(require("react"));
+// src/components/ChannelInfo/AddMemberModal.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
+var AddMemberModal = ({
+  channel,
+  currentMembers,
+  onClose,
+  AvatarComponent = Avatar,
+  title = "Add Member",
+  searchPlaceholder = "Search by name, email or phone...",
+  loadingText = "Loading users...",
+  emptyText = "No users found.",
+  addLabel = "Add",
+  addingLabel = "Adding...",
+  addedLabel = "Added",
+  UserItemComponent,
+  SearchInputComponent
+}) => {
+  const [selectedUsers, setSelectedUsers] = (0, import_react50.useState)([]);
+  const [isAdding, setIsAdding] = (0, import_react50.useState)(false);
+  const excludeUserIds = (0, import_react50.useMemo)(
+    () => currentMembers.map((m) => m.user_id),
+    [currentMembers]
+  );
+  const handleSelectionChange = (0, import_react50.useCallback)((users) => {
+    setSelectedUsers(users);
+  }, []);
+  const handleAdd = (0, import_react50.useCallback)(async () => {
+    if (selectedUsers.length === 0 || isAdding) return;
+    try {
+      setIsAdding(true);
+      await channel.addMembers(selectedUsers.map((u) => u.id));
+      onClose();
+    } catch (err) {
+      console.error("Failed to add members:", err);
+    } finally {
+      setIsAdding(false);
+    }
+  }, [selectedUsers, isAdding, channel, onClose]);
+  const footer = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "button",
+    {
+      className: "ermis-modal-add-btn",
+      onClick: handleAdd,
+      disabled: selectedUsers.length === 0 || isAdding,
+      children: isAdding ? addingLabel : `${addLabel} ${selectedUsers.length > 0 ? `(${selectedUsers.length})` : ""}`
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Modal, { isOpen: true, onClose, title, maxWidth: "480px", footer, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    UserPicker,
+    {
+      mode: "checkbox",
+      onSelectionChange: handleSelectionChange,
+      excludeUserIds,
+      pageSize: 30,
+      AvatarComponent,
+      UserItemComponent,
+      SearchInputComponent,
+      searchPlaceholder,
+      loadingText,
+      emptyText,
+      selectedEmptyLabel: "Select users to add..."
+    }
+  ) });
+};
+
+// src/components/ChannelInfo/EditChannelModal.tsx
+var import_react51 = __toESM(require("react"));
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var DEFAULT_MAX_IMAGE_SIZE = 5 * 1024 * 1024;
-var EditChannelModal = import_react50.default.memo(({
+var EditChannelModal = import_react51.default.memo(({
   channel,
   onClose,
   onSave,
@@ -5222,20 +5408,20 @@ var EditChannelModal = import_react50.default.memo(({
   const originalDescription = channel.data?.description || "";
   const originalPublic = Boolean(channel.data?.public);
   const isTeamChannel = channel.type === "team";
-  const [name, setName] = (0, import_react50.useState)(originalName);
-  const [description, setDescription] = (0, import_react50.useState)(originalDescription);
-  const [isPublic, setIsPublic] = (0, import_react50.useState)(originalPublic);
-  const [previewUrl, setPreviewUrl] = (0, import_react50.useState)(null);
-  const [selectedFile, setSelectedFile] = (0, import_react50.useState)(null);
-  const [isSaving, setIsSaving] = (0, import_react50.useState)(false);
-  const [error, setError] = (0, import_react50.useState)(null);
-  const fileInputRef = (0, import_react50.useRef)(null);
-  (0, import_react50.useEffect)(() => {
+  const [name, setName] = (0, import_react51.useState)(originalName);
+  const [description, setDescription] = (0, import_react51.useState)(originalDescription);
+  const [isPublic, setIsPublic] = (0, import_react51.useState)(originalPublic);
+  const [previewUrl, setPreviewUrl] = (0, import_react51.useState)(null);
+  const [selectedFile, setSelectedFile] = (0, import_react51.useState)(null);
+  const [isSaving, setIsSaving] = (0, import_react51.useState)(false);
+  const [error, setError] = (0, import_react51.useState)(null);
+  const fileInputRef = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => {
     return () => {
       if (previewUrl) URL.revokeObjectURL(previewUrl);
     };
   }, [previewUrl]);
-  const handleFileSelect = (0, import_react50.useCallback)((e) => {
+  const handleFileSelect = (0, import_react51.useCallback)((e) => {
     const file = e.target.files?.[0];
     if (!file) return;
     if (!file.type.startsWith("image/")) {
@@ -5253,10 +5439,10 @@ var EditChannelModal = import_react50.default.memo(({
     setSelectedFile(file);
     e.target.value = "";
   }, [maxImageSize, maxImageSizeError, previewUrl]);
-  const handleAvatarClick = (0, import_react50.useCallback)(() => {
+  const handleAvatarClick = (0, import_react51.useCallback)(() => {
     fileInputRef.current?.click();
   }, []);
-  const buildPayload = (0, import_react50.useCallback)(() => {
+  const buildPayload = (0, import_react51.useCallback)(() => {
     const payload = {};
     let hasChanges = false;
     if (name.trim() !== originalName) {
@@ -5276,7 +5462,7 @@ var EditChannelModal = import_react50.default.memo(({
     }
     return hasChanges ? payload : null;
   }, [name, description, isPublic, selectedFile, originalName, originalDescription, originalPublic, isTeamChannel]);
-  const handleSave = (0, import_react50.useCallback)(async () => {
+  const handleSave = (0, import_react51.useCallback)(async () => {
     const payload = buildPayload();
     if (!payload && !selectedFile) {
       onClose();
@@ -5310,8 +5496,8 @@ var EditChannelModal = import_react50.default.memo(({
     }
   }, [buildPayload, selectedFile, onSave, channel, onClose]);
   const displayImage = previewUrl || originalImage || void 0;
-  const footerContent = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ermis-channel-info__edit-footer-buttons", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  const footerContent = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ermis-channel-info__edit-footer-buttons", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
       {
         className: "ermis-channel-info__edit-btn ermis-channel-info__edit-btn--cancel",
@@ -5320,7 +5506,7 @@ var EditChannelModal = import_react50.default.memo(({
         children: cancelLabel
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
       {
         className: "ermis-channel-info__edit-btn ermis-channel-info__edit-btn--save",
@@ -5330,7 +5516,7 @@ var EditChannelModal = import_react50.default.memo(({
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Modal,
     {
       isOpen: true,
@@ -5339,16 +5525,16 @@ var EditChannelModal = import_react50.default.memo(({
       title,
       footer: footerContent,
       maxWidth: "420px",
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ermis-channel-info__edit-body", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ermis-channel-info__edit-avatar-section", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ermis-channel-info__edit-avatar-wrap", onClick: handleAvatarClick, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AvatarComponent, { image: displayImage, name: name || originalName, size: 80 }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ermis-channel-info__edit-avatar-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "12", cy: "13", r: "4" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ermis-channel-info__edit-body", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ermis-channel-info__edit-avatar-section", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ermis-channel-info__edit-avatar-wrap", onClick: handleAvatarClick, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AvatarComponent, { image: displayImage, name: name || originalName, size: 80 }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ermis-channel-info__edit-avatar-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "12", cy: "13", r: "4" })
             ] }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "button",
             {
               className: "ermis-channel-info__edit-avatar-btn",
@@ -5358,7 +5544,7 @@ var EditChannelModal = import_react50.default.memo(({
               children: changeAvatarLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -5370,9 +5556,9 @@ var EditChannelModal = import_react50.default.memo(({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ermis-channel-info__edit-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { className: "ermis-channel-info__edit-label", children: nameLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ermis-channel-info__edit-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "ermis-channel-info__edit-label", children: nameLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "input",
             {
               className: "ermis-channel-info__edit-input",
@@ -5385,9 +5571,9 @@ var EditChannelModal = import_react50.default.memo(({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ermis-channel-info__edit-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { className: "ermis-channel-info__edit-label", children: descriptionLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ermis-channel-info__edit-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "ermis-channel-info__edit-label", children: descriptionLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "textarea",
             {
               className: "ermis-channel-info__edit-textarea",
@@ -5400,9 +5586,9 @@ var EditChannelModal = import_react50.default.memo(({
             }
           )
         ] }),
-        isTeamChannel && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ermis-channel-info__edit-field ermis-channel-info__edit-field--toggle", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("label", { className: "ermis-channel-info__edit-label", children: publicLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        isTeamChannel && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ermis-channel-info__edit-field ermis-channel-info__edit-field--toggle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { className: "ermis-channel-info__edit-label", children: publicLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "button",
             {
               type: "button",
@@ -5411,15 +5597,15 @@ var EditChannelModal = import_react50.default.memo(({
               className: `ermis-channel-info__edit-toggle ${isPublic ? "ermis-channel-info__edit-toggle--on" : ""}`,
               onClick: () => setIsPublic((v) => !v),
               disabled: isSaving,
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ermis-channel-info__edit-toggle-thumb" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ermis-channel-info__edit-toggle-thumb" })
             }
           )
         ] }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ermis-channel-info__edit-error", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+        error && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ermis-channel-info__edit-error", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
           ] }),
           error
         ] })
@@ -5430,12 +5616,12 @@ var EditChannelModal = import_react50.default.memo(({
 EditChannelModal.displayName = "EditChannelModal";
 
 // src/components/ChannelInfo/MessageSearchPanel.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 
 // src/components/Panel.tsx
-var import_react51 = __toESM(require("react"));
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var Panel = import_react51.default.memo(({
+var import_react52 = __toESM(require("react"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var Panel = import_react52.default.memo(({
   isOpen,
   onClose,
   title,
@@ -5443,24 +5629,24 @@ var Panel = import_react51.default.memo(({
   headerContent,
   className
 }) => {
-  const panelRef = (0, import_react51.useRef)(null);
-  (0, import_react51.useEffect)(() => {
+  const panelRef = (0, import_react52.useRef)(null);
+  (0, import_react52.useEffect)(() => {
     if (isOpen && panelRef.current) {
       panelRef.current.focus();
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       ref: panelRef,
       className: `ermis-panel${isOpen ? " ermis-panel--open" : ""}${className ? ` ${className}` : ""}`,
       tabIndex: -1,
       children: [
-        headerContent ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ermis-panel__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "ermis-panel__back", onClick: onClose, "aria-label": "Back", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }),
-          title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "ermis-panel__title", children: title })
+        headerContent ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ermis-panel__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { className: "ermis-panel__back", onClick: onClose, "aria-label": "Back", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "ermis-panel__title", children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ermis-panel__body", children })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ermis-panel__body", children })
       ]
     }
   );
@@ -5468,12 +5654,12 @@ var Panel = import_react51.default.memo(({
 Panel.displayName = "Panel";
 
 // src/components/ChannelInfo/MessageSearchPanel.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var removeAccents = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-var HighlightedText = import_react52.default.memo(({ text, term }) => {
-  if (!term.trim()) return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: text });
+var HighlightedText = import_react53.default.memo(({ text, term }) => {
+  if (!term.trim()) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: text });
   const cleanTerm = removeAccents(term).toLowerCase();
-  if (!cleanTerm) return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: text });
+  if (!cleanTerm) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: text });
   const parts = [];
   let currentIndex = 0;
   const cleanText = removeAccents(text).toLowerCase();
@@ -5481,23 +5667,23 @@ var HighlightedText = import_react52.default.memo(({ text, term }) => {
     const startMatch = cleanText.indexOf(cleanTerm, currentIndex);
     if (startMatch === -1) {
       if (currentIndex < text.length) {
-        parts.push(/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: text.slice(currentIndex) }, currentIndex));
+        parts.push(/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: text.slice(currentIndex) }, currentIndex));
       }
       break;
     }
     if (startMatch > currentIndex) {
-      parts.push(/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: text.slice(currentIndex, startMatch) }, `text-${currentIndex}`));
+      parts.push(/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: text.slice(currentIndex, startMatch) }, `text-${currentIndex}`));
     }
     const endMatch = startMatch + cleanTerm.length;
     parts.push(
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("mark", { className: "ermis-search-panel__highlight", children: text.slice(startMatch, endMatch) }, `mark-${startMatch}`)
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("mark", { className: "ermis-search-panel__highlight", children: text.slice(startMatch, endMatch) }, `mark-${startMatch}`)
     );
     currentIndex = endMatch;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: parts.length > 0 ? parts : text });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: parts.length > 0 ? parts : text });
 });
 HighlightedText.displayName = "HighlightedText";
-var MessageSearchPanel = import_react52.default.memo(({
+var MessageSearchPanel = import_react53.default.memo(({
   isOpen,
   onClose,
   channel,
@@ -5509,17 +5695,17 @@ var MessageSearchPanel = import_react52.default.memo(({
   debounceMs = 500
 }) => {
   const { setJumpToMessageId } = useChatClient();
-  const [query, setQuery] = (0, import_react52.useState)("");
-  const [results, setResults] = (0, import_react52.useState)([]);
-  const [loading, setLoading] = (0, import_react52.useState)(false);
-  const [hasMore, setHasMore] = (0, import_react52.useState)(false);
-  const [loadingMore, setLoadingMore] = (0, import_react52.useState)(false);
-  const debounceRef = (0, import_react52.useRef)(null);
-  const scrollRef = (0, import_react52.useRef)(null);
-  const inputRef = (0, import_react52.useRef)(null);
-  const offsetRef = (0, import_react52.useRef)(0);
-  const queryRef = (0, import_react52.useRef)("");
-  (0, import_react52.useEffect)(() => {
+  const [query, setQuery] = (0, import_react53.useState)("");
+  const [results, setResults] = (0, import_react53.useState)([]);
+  const [loading, setLoading] = (0, import_react53.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react53.useState)(false);
+  const [loadingMore, setLoadingMore] = (0, import_react53.useState)(false);
+  const debounceRef = (0, import_react53.useRef)(null);
+  const scrollRef = (0, import_react53.useRef)(null);
+  const inputRef = (0, import_react53.useRef)(null);
+  const offsetRef = (0, import_react53.useRef)(0);
+  const queryRef = (0, import_react53.useRef)("");
+  (0, import_react53.useEffect)(() => {
     setQuery("");
     setResults([]);
     setLoading(false);
@@ -5528,12 +5714,12 @@ var MessageSearchPanel = import_react52.default.memo(({
     offsetRef.current = 0;
     queryRef.current = "";
   }, [channel?.cid, isOpen]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (isOpen) {
       setTimeout(() => inputRef.current?.focus(), 300);
     }
   }, [isOpen]);
-  const handleInputChange = (0, import_react52.useCallback)((e) => {
+  const handleInputChange = (0, import_react53.useCallback)((e) => {
     const value = e.target.value;
     setQuery(value);
     if (debounceRef.current) clearTimeout(debounceRef.current);
@@ -5568,7 +5754,7 @@ var MessageSearchPanel = import_react52.default.memo(({
       }
     }, debounceMs);
   }, [channel, debounceMs]);
-  const handleLoadMore = (0, import_react52.useCallback)(async () => {
+  const handleLoadMore = (0, import_react53.useCallback)(async () => {
     if (loadingMore || !hasMore || !queryRef.current) return;
     setLoadingMore(true);
     const nextOffset = offsetRef.current + 25;
@@ -5587,7 +5773,7 @@ var MessageSearchPanel = import_react52.default.memo(({
       setLoadingMore(false);
     }
   }, [channel, hasMore, loadingMore]);
-  const handleScroll = (0, import_react52.useCallback)(() => {
+  const handleScroll = (0, import_react53.useCallback)(() => {
     const el = scrollRef.current;
     if (!el) return;
     const threshold = 100;
@@ -5595,10 +5781,10 @@ var MessageSearchPanel = import_react52.default.memo(({
       handleLoadMore();
     }
   }, [handleLoadMore]);
-  const handleResultClick = (0, import_react52.useCallback)((messageId) => {
+  const handleResultClick = (0, import_react53.useCallback)((messageId) => {
     setJumpToMessageId(messageId);
   }, [setJumpToMessageId]);
-  const userMaps = (0, import_react52.useMemo)(() => {
+  const userMaps = (0, import_react53.useMemo)(() => {
     const original = buildUserMap(channel.state);
     const lower = {};
     for (const [id, name] of Object.entries(original)) {
@@ -5606,13 +5792,13 @@ var MessageSearchPanel = import_react52.default.memo(({
     }
     return { original, lower };
   }, [channel.state]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Panel, { isOpen, onClose, title, className: "ermis-search-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ermis-search-panel__search-box", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ermis-search-panel__input-wrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { className: "ermis-search-panel__input-icon", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Panel, { isOpen, onClose, title, className: "ermis-search-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ermis-search-panel__search-box", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ermis-search-panel__input-wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { className: "ermis-search-panel__input-icon", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "input",
         {
           ref: inputRef,
@@ -5623,7 +5809,7 @@ var MessageSearchPanel = import_react52.default.memo(({
           placeholder
         }
       ),
-      query && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      query && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         "button",
         {
           className: "ermis-search-panel__input-clear",
@@ -5636,32 +5822,32 @@ var MessageSearchPanel = import_react52.default.memo(({
             inputRef.current?.focus();
           },
           "aria-label": "Clear",
-          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
           ] })
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "div",
       {
         ref: scrollRef,
         className: "ermis-search-panel__results",
         onScroll: handleScroll,
         children: [
-          !query.trim() && !loading && results.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ermis-search-panel__idle", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+          !query.trim() && !loading && results.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ermis-search-panel__idle", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: placeholder })
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: placeholder })
           ] }),
-          loading && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ermis-search-panel__loading", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ermis-search-panel__spinner" }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: loadingText })
+          loading && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ermis-search-panel__loading", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ermis-search-panel__spinner" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: loadingText })
           ] }),
-          !loading && query.trim() && results.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ermis-search-panel__empty", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: emptyText }) }),
+          !loading && query.trim() && results.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ermis-search-panel__empty", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: emptyText }) }),
           !loading && results.map((msg) => {
             let parsedText = "";
             if (msg.text) {
@@ -5673,7 +5859,7 @@ var MessageSearchPanel = import_react52.default.memo(({
                 });
               }
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
               "div",
               {
                 role: "button",
@@ -5687,7 +5873,7 @@ var MessageSearchPanel = import_react52.default.memo(({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                     AvatarComponent,
                     {
                       image: msg.user?.avatar || msg.user?.image || msg.user?.avatar_url,
@@ -5695,20 +5881,20 @@ var MessageSearchPanel = import_react52.default.memo(({
                       size: 36
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ermis-search-panel__result-body", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ermis-search-panel__result-meta", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ermis-search-panel__result-name", children: msg.user?.name || msg.user_id || "Unknown" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ermis-search-panel__result-time", children: msg.created_at ? formatRelativeDate(msg.created_at) : "" })
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ermis-search-panel__result-body", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ermis-search-panel__result-meta", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ermis-search-panel__result-name", children: msg.user?.name || msg.user_id || "Unknown" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ermis-search-panel__result-time", children: msg.created_at ? formatRelativeDate(msg.created_at) : "" })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "ermis-search-panel__result-text", children: parsedText ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(HighlightedText, { text: parsedText, term: query }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("em", { children: "Attachment" }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "ermis-search-panel__result-text", children: parsedText ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(HighlightedText, { text: parsedText, term: query }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("em", { children: "Attachment" }) })
                   ] })
                 ]
               },
               msg.id
             );
           }),
-          !loading && !loadingMore && !hasMore && results.length > 0 && query.trim() && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ermis-search-panel__end-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: emptyText }) }),
-          loadingMore && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ermis-search-panel__loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ermis-search-panel__spinner ermis-search-panel__spinner--small" }) })
+          !loading && !loadingMore && !hasMore && results.length > 0 && query.trim() && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ermis-search-panel__end-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: emptyText }) }),
+          loadingMore && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ermis-search-panel__loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ermis-search-panel__spinner ermis-search-panel__spinner--small" }) })
         ]
       }
     )
@@ -5717,9 +5903,9 @@ var MessageSearchPanel = import_react52.default.memo(({
 MessageSearchPanel.displayName = "MessageSearchPanel";
 
 // src/components/ChannelInfo/ChannelSettingsPanel.tsx
-var import_react53 = __toESM(require("react"));
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var ChannelSettingsPanel = import_react53.default.memo(({
+var import_react54 = __toESM(require("react"));
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var ChannelSettingsPanel = import_react54.default.memo(({
   isOpen,
   onClose,
   channel,
@@ -5734,8 +5920,8 @@ var ChannelSettingsPanel = import_react53.default.memo(({
     { label: "1h", value: 36e5 }
   ]
 }) => {
-  const [slowMode, setSlowMode] = (0, import_react53.useState)(0);
-  const [capabilities, setCapabilities] = (0, import_react53.useState)({
+  const [slowMode, setSlowMode] = (0, import_react54.useState)(0);
+  const [capabilities, setCapabilities] = (0, import_react54.useState)({
     "send-message": true,
     "send-links": true,
     "update-own-message": true,
@@ -5745,11 +5931,11 @@ var ChannelSettingsPanel = import_react53.default.memo(({
     "create-poll": true,
     "vote-poll": true
   });
-  const [keywords, setKeywords] = (0, import_react53.useState)([]);
-  const [newKeyword, setNewKeyword] = (0, import_react53.useState)("");
-  const [isSaving, setIsSaving] = (0, import_react53.useState)(false);
-  const [error, setError] = (0, import_react53.useState)(null);
-  (0, import_react53.useEffect)(() => {
+  const [keywords, setKeywords] = (0, import_react54.useState)([]);
+  const [newKeyword, setNewKeyword] = (0, import_react54.useState)("");
+  const [isSaving, setIsSaving] = (0, import_react54.useState)(false);
+  const [error, setError] = (0, import_react54.useState)(null);
+  (0, import_react54.useEffect)(() => {
     if (!channel) return;
     const syncData = (dataToSync = channel.data) => {
       console.log("---syncData---", dataToSync);
@@ -5863,8 +6049,8 @@ var ChannelSettingsPanel = import_react53.default.memo(({
       setIsSaving(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Panel, { isOpen, onClose, title, className: "ermis-settings-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Panel, { isOpen, onClose, title, className: "ermis-settings-panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       {
         className: "ermis-settings-panel__body",
@@ -5879,7 +6065,7 @@ var ChannelSettingsPanel = import_react53.default.memo(({
           background: "var(--ermis-bg-secondary)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
             "section",
             {
               className: "ermis-settings-panel__section",
@@ -5891,14 +6077,14 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                 border: "1px solid var(--ermis-border-color)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", alignItems: "center", marginBottom: "16px", gap: "8px" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { background: "var(--ermis-color-primary-light)", padding: "4px", borderRadius: "8px", color: "var(--ermis-color-primary)" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { style: { fontSize: "14px", color: "var(--ermis-text-primary)", fontWeight: 600, margin: 0 }, children: "Member Permissions" })
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", alignItems: "center", marginBottom: "16px", gap: "8px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { background: "var(--ermis-color-primary-light)", padding: "4px", borderRadius: "8px", color: "var(--ermis-color-primary)" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h4", { style: { fontSize: "14px", color: "var(--ermis-text-primary)", fontWeight: 600, margin: 0 }, children: "Member Permissions" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ermis-settings-panel__field", style: { marginBottom: "16px" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Slow Mode" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { position: "relative" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ermis-settings-panel__field", style: { marginBottom: "16px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Slow Mode" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { position: "relative" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "select",
                       {
                         value: slowMode,
@@ -5918,15 +6104,15 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                           transition: "border-color 0.2s"
                         },
                         disabled: isSaving,
-                        children: slowModeOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                        children: slowModeOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { position: "absolute", right: "14px", top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--ermis-text-secondary)" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("polyline", { points: "6 9 12 15 18 9" }) }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { position: "absolute", right: "14px", top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--ermis-text-secondary)" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("polyline", { points: "6 9 12 15 18 9" }) }) })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ermis-settings-panel__toggles", style: { display: "flex", flexDirection: "column" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Capabilities" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { background: "var(--ermis-bg-secondary)", borderRadius: "8px", overflow: "hidden", border: "1px solid var(--ermis-border-color)" }, children: Object.entries(capabilities).map(([key, value], index, arr) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ermis-settings-panel__toggles", style: { display: "flex", flexDirection: "column" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Capabilities" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { background: "var(--ermis-bg-secondary)", borderRadius: "8px", overflow: "hidden", border: "1px solid var(--ermis-border-color)" }, children: Object.entries(capabilities).map(([key, value], index, arr) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
                     "div",
                     {
                       style: {
@@ -5937,8 +6123,8 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                         borderBottom: index < arr.length - 1 ? "1px solid var(--ermis-border-color)" : "none"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { fontSize: "14px", fontWeight: 500, color: "var(--ermis-text-primary)" }, children: key.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ") }),
-                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { fontSize: "14px", fontWeight: 500, color: "var(--ermis-text-primary)" }, children: key.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ") }),
+                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                           "button",
                           {
                             type: "button",
@@ -5948,7 +6134,7 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                             onClick: () => toggleCapability(key),
                             disabled: isSaving,
                             style: { transform: "scale(0.85)", transformOrigin: "right center" },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ermis-channel-info__edit-toggle-thumb" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ermis-channel-info__edit-toggle-thumb" })
                           }
                         )
                       ]
@@ -5959,7 +6145,7 @@ var ChannelSettingsPanel = import_react53.default.memo(({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
             "section",
             {
               className: "ermis-settings-panel__section",
@@ -5971,18 +6157,18 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                 border: "1px solid var(--ermis-border-color)"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", alignItems: "center", marginBottom: "16px", gap: "8px" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { background: "var(--ermis-color-danger-light)", padding: "4px", borderRadius: "8px", color: "var(--ermis-color-danger)" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", alignItems: "center", marginBottom: "16px", gap: "8px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { background: "var(--ermis-color-danger-light)", padding: "4px", borderRadius: "8px", color: "var(--ermis-color-danger)" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
                   ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { style: { fontSize: "14px", color: "var(--ermis-text-primary)", fontWeight: 600, margin: 0 }, children: "Content Moderation" })
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h4", { style: { fontSize: "14px", color: "var(--ermis-text-primary)", fontWeight: 600, margin: 0 }, children: "Content Moderation" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ermis-settings-panel__field", style: { marginBottom: "16px" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Keyword Filtering" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", gap: "8px", position: "relative" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ermis-settings-panel__field", style: { marginBottom: "16px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Keyword Filtering" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", gap: "8px", position: "relative" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "input",
                       {
                         type: "text",
@@ -6004,7 +6190,7 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                         disabled: isSaving
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "button",
                       {
                         type: "button",
@@ -6030,8 +6216,8 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", minHeight: "32px" }, children: [
-                  keywords.map((kw) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", minHeight: "32px" }, children: [
+                  keywords.map((kw) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
                     "span",
                     {
                       style: {
@@ -6048,7 +6234,7 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                       },
                       children: [
                         kw,
-                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                           "button",
                           {
                             onClick: () => handeRemoveKeyword(kw),
@@ -6065,9 +6251,9 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                             },
                             disabled: isSaving,
                             "aria-label": "Remove keyword",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                             ] })
                           }
                         )
@@ -6075,7 +6261,7 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                     },
                     kw
                   )),
-                  keywords.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { fontSize: "14px", color: "var(--ermis-text-secondary)", padding: "6px 0", fontStyle: "italic" }, children: "No blacklisted keywords added." })
+                  keywords.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { fontSize: "14px", color: "var(--ermis-text-secondary)", padding: "6px 0", fontStyle: "italic" }, children: "No blacklisted keywords added." })
                 ] })
               ]
             }
@@ -6083,7 +6269,7 @@ var ChannelSettingsPanel = import_react53.default.memo(({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       {
         className: "ermis-settings-panel__footer",
@@ -6097,15 +6283,15 @@ var ChannelSettingsPanel = import_react53.default.memo(({
           gap: "8px"
         },
         children: [
-          error && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { color: "var(--ermis-color-danger)", fontSize: "13px", display: "flex", alignItems: "center", gap: "6px", fontWeight: 500 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+          error && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { color: "var(--ermis-color-danger)", fontSize: "13px", display: "flex", alignItems: "center", gap: "6px", fontWeight: 500 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
             ] }),
             error
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "button",
             {
               onClick: handleSave,
@@ -6124,8 +6310,8 @@ var ChannelSettingsPanel = import_react53.default.memo(({
                 transition: "all 0.2s ease",
                 boxShadow: isSaving || !isDirty ? "none" : "0 4px 12px rgba(0, 110, 255, 0.2)"
               },
-              children: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { className: "ermis-spinner", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }),
+              children: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { className: "ermis-spinner", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }),
                 "Saving..."
               ] }) : "Save Updates"
             }
@@ -6138,40 +6324,40 @@ var ChannelSettingsPanel = import_react53.default.memo(({
 ChannelSettingsPanel.displayName = "ChannelSettingsPanel";
 
 // src/components/ChannelInfo/ChannelInfo.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var DefaultChannelInfoHeader = import_react54.default.memo(({ title, onClose }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ermis-channel-info__header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "ermis-channel-info__title", children: title }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { className: "ermis-channel-info__close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var DefaultChannelInfoHeader = import_react55.default.memo(({ title, onClose }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ermis-channel-info__header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "ermis-channel-info__title", children: title }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { className: "ermis-channel-info__close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
   ] });
 });
 DefaultChannelInfoHeader.displayName = "DefaultChannelInfoHeader";
-var DefaultChannelInfoCover = import_react54.default.memo(({ channelName, channelImage, channelDescription, AvatarComponent, canEdit, onEditClick, isPublic, isTeamChannel }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ermis-channel-info__cover", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AvatarComponent, { image: channelImage, name: channelName, size: 80, className: "ermis-channel-info__avatar" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ermis-channel-info__name-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h2", { className: "ermis-channel-info__name", children: channelName }),
-      canEdit && onEditClick && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { className: "ermis-channel-info__cover-edit-btn", onClick: onEditClick, "aria-label": "Edit channel", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+var DefaultChannelInfoCover = import_react55.default.memo(({ channelName, channelImage, channelDescription, AvatarComponent, canEdit, onEditClick, isPublic, isTeamChannel }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ermis-channel-info__cover", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AvatarComponent, { image: channelImage, name: channelName, size: 80, className: "ermis-channel-info__avatar" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ermis-channel-info__name-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "ermis-channel-info__name", children: channelName }),
+      canEdit && onEditClick && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { className: "ermis-channel-info__cover-edit-btn", onClick: onEditClick, "aria-label": "Edit channel", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
       ] }) })
     ] }),
-    isTeamChannel && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: `ermis-channel-info__type-badge ${isPublic ? "ermis-channel-info__type-badge--public" : "ermis-channel-info__type-badge--private"}`, children: [
-      isPublic ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+    isTeamChannel && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: `ermis-channel-info__type-badge ${isPublic ? "ermis-channel-info__type-badge--public" : "ermis-channel-info__type-badge--private"}`, children: [
+      isPublic ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
       ] }),
       isPublic ? "Public" : "Private"
     ] }),
-    channelDescription && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "ermis-channel-info__description", children: channelDescription })
+    channelDescription && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "ermis-channel-info__description", children: channelDescription })
   ] });
 });
 DefaultChannelInfoCover.displayName = "DefaultChannelInfoCover";
-var DefaultChannelInfoActions = import_react54.default.memo(({
+var DefaultChannelInfoActions = import_react55.default.memo(({
   onSearchClick,
   onSettingsClick,
   onLeaveChannel,
@@ -6188,52 +6374,52 @@ var DefaultChannelInfoActions = import_react54.default.memo(({
   blockLabel = "Block",
   unblockLabel = "Unblock"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ermis-channel-info__actions", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { className: "ermis-channel-info__action-btn", onClick: onSearchClick, disabled: isBlocked, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ermis-channel-info__actions", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("button", { className: "ermis-channel-info__action-btn", onClick: onSearchClick, disabled: isBlocked, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: searchLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: searchLabel })
     ] }),
-    isTeamChannel && (currentUserRole === "owner" || currentUserRole === "moder") && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { className: "ermis-channel-info__action-btn", onClick: onSettingsClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+    isTeamChannel && (currentUserRole === "owner" || currentUserRole === "moder") && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("button", { className: "ermis-channel-info__action-btn", onClick: onSettingsClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: settingsLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: settingsLabel })
     ] }),
-    isTeamChannel && (currentUserRole === "owner" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { className: "ermis-channel-info__action-btn ermis-channel-info__action-btn--danger", onClick: onDeleteChannel, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("polyline", { points: "3 6 5 6 21 6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M19 6V20a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+    isTeamChannel && (currentUserRole === "owner" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("button", { className: "ermis-channel-info__action-btn ermis-channel-info__action-btn--danger", onClick: onDeleteChannel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("polyline", { points: "3 6 5 6 21 6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M19 6V20a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: deleteLabel })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { className: "ermis-channel-info__action-btn ermis-channel-info__action-btn--danger", onClick: onLeaveChannel, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("polyline", { points: "16 17 21 12 16 7" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: deleteLabel })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("button", { className: "ermis-channel-info__action-btn ermis-channel-info__action-btn--danger", onClick: onLeaveChannel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("polyline", { points: "16 17 21 12 16 7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: leaveLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: leaveLabel })
     ] })),
-    !isTeamChannel && (isBlocked ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { className: "ermis-channel-info__action-btn", onClick: onUnblockUser, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+    !isTeamChannel && (isBlocked ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("button", { className: "ermis-channel-info__action-btn", onClick: onUnblockUser, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: unblockLabel })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { className: "ermis-channel-info__action-btn ermis-channel-info__action-btn--danger", onClick: onBlockUser, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: unblockLabel })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("button", { className: "ermis-channel-info__action-btn ermis-channel-info__action-btn--danger", onClick: onBlockUser, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: blockLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: blockLabel })
     ] }))
   ] });
 });
 DefaultChannelInfoActions.displayName = "DefaultChannelInfoActions";
-var ChannelInfo = import_react54.default.memo((props) => {
+var ChannelInfo = import_react55.default.memo((props) => {
   const {
     channel: channelProp,
     className = "",
@@ -6303,7 +6489,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
   const currentUserId = client?.userID;
   const currentUserRole = currentUserId ? channel?.state?.members?.[currentUserId]?.channel_role : void 0;
   const isTeamChannel = channel?.type === "team";
-  const handleDeleteChannel = (0, import_react54.useCallback)(async () => {
+  const handleDeleteChannel = (0, import_react55.useCallback)(async () => {
     if (onDeleteChannelProp) return onDeleteChannelProp();
     if (!channel) return;
     try {
@@ -6312,7 +6498,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       console.error("Error deleting channel", e);
     }
   }, [channel, onDeleteChannelProp]);
-  const handleLeaveChannel = (0, import_react54.useCallback)(async () => {
+  const handleLeaveChannel = (0, import_react55.useCallback)(async () => {
     if (onLeaveChannelProp) return onLeaveChannelProp();
     if (!channel || !currentUserId) return;
     try {
@@ -6321,7 +6507,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       console.error("Error leaving channel", e);
     }
   }, [channel, currentUserId, onLeaveChannelProp]);
-  const handleRemoveMember = (0, import_react54.useCallback)(async (memberId) => {
+  const handleRemoveMember = (0, import_react55.useCallback)(async (memberId) => {
     if (onRemoveMemberProp) return onRemoveMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6330,7 +6516,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       console.error("Error removing member", e);
     }
   }, [channel, onRemoveMemberProp]);
-  const handleBanMember = (0, import_react54.useCallback)(async (memberId) => {
+  const handleBanMember = (0, import_react55.useCallback)(async (memberId) => {
     if (onBanMemberProp) return onBanMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6339,7 +6525,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       console.error("Error banning member", e);
     }
   }, [channel, onBanMemberProp]);
-  const handleUnbanMember = (0, import_react54.useCallback)(async (memberId) => {
+  const handleUnbanMember = (0, import_react55.useCallback)(async (memberId) => {
     if (onUnbanMemberProp) return onUnbanMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6348,7 +6534,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       console.error("Error unbanning member", e);
     }
   }, [channel, onUnbanMemberProp]);
-  const handlePromoteMember = (0, import_react54.useCallback)(async (memberId) => {
+  const handlePromoteMember = (0, import_react55.useCallback)(async (memberId) => {
     if (onPromoteMemberProp) return onPromoteMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6357,7 +6543,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       console.error("Error promoting member", e);
     }
   }, [channel, onPromoteMemberProp]);
-  const handleDemoteMember = (0, import_react54.useCallback)(async (memberId) => {
+  const handleDemoteMember = (0, import_react55.useCallback)(async (memberId) => {
     if (onDemoteMemberProp) return onDemoteMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6366,7 +6552,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       console.error("Error demoting member", e);
     }
   }, [channel, onDemoteMemberProp]);
-  const handleBlockUser = (0, import_react54.useCallback)(async () => {
+  const handleBlockUser = (0, import_react55.useCallback)(async () => {
     if (onBlockUserProp) return onBlockUserProp();
     if (!channel) return;
     try {
@@ -6375,7 +6561,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       console.error("Error blocking user", e);
     }
   }, [channel, onBlockUserProp]);
-  const handleUnblockUser = (0, import_react54.useCallback)(async () => {
+  const handleUnblockUser = (0, import_react55.useCallback)(async () => {
     if (onUnblockUserProp) return onUnblockUserProp();
     if (!channel) return;
     try {
@@ -6386,22 +6572,22 @@ var ChannelInfo = import_react54.default.memo((props) => {
   }, [channel, onUnblockUserProp]);
   const { members } = useChannelMembers(channel);
   const { channelName, channelImage, channelDescription } = useChannelProfile(channel);
-  const [showAddMemberModal, setShowAddMemberModal] = (0, import_react54.useState)(false);
-  const [showEditChannelModal, setShowEditChannelModal] = (0, import_react54.useState)(false);
-  const [showSearchPanel, setShowSearchPanel] = (0, import_react54.useState)(false);
-  const [showSettingsPanel, setShowSettingsPanel] = (0, import_react54.useState)(false);
+  const [showAddMemberModal, setShowAddMemberModal] = (0, import_react55.useState)(false);
+  const [showEditChannelModal, setShowEditChannelModal] = (0, import_react55.useState)(false);
+  const [showSearchPanel, setShowSearchPanel] = (0, import_react55.useState)(false);
+  const [showSettingsPanel, setShowSettingsPanel] = (0, import_react55.useState)(false);
   const canEditChannel = isTeamChannel && !isBanned && (currentUserRole === "owner" || currentUserRole === "moder");
-  const handleEditChannelClick = (0, import_react54.useCallback)(() => {
+  const handleEditChannelClick = (0, import_react55.useCallback)(() => {
     setShowEditChannelModal(true);
   }, []);
-  const handleAddMemberClick = (0, import_react54.useCallback)(() => {
+  const handleAddMemberClick = (0, import_react55.useCallback)(() => {
     if (onAddMemberClick) return onAddMemberClick();
     setShowAddMemberModal(true);
   }, [onAddMemberClick]);
   if (!channel) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: `ermis-channel-info ${className}`.trim(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HeaderComponent, { title, onClose }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: `ermis-channel-info ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(HeaderComponent, { title, onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       CoverComponent,
       {
         channelName,
@@ -6414,14 +6600,14 @@ var ChannelInfo = import_react54.default.memo((props) => {
         isTeamChannel
       }
     ),
-    isBanned ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ermis-channel-info__banned-banner", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "ermis-channel-info__banned-banner-icon", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+    isBanned ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ermis-channel-info__banned-banner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "ermis-channel-info__banned-banner-icon", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ermis-channel-info__banned-banner-text", children: "You have been blocked from this channel" })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ermis-channel-info__banned-banner-text", children: "You have been blocked from this channel" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         ActionsComponent,
         {
           onSearchClick: () => setShowSearchPanel(true),
@@ -6441,7 +6627,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
           unblockLabel: actionsUnblockLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         TabsComponent,
         {
           channel,
@@ -6467,7 +6653,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       ),
       showAddMemberModal && /* @__PURE__ */ (() => {
         const ModalComp = AddMemberModalComponent || AddMemberModal;
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           ModalComp,
           {
             channel,
@@ -6486,7 +6672,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
       })(),
       showEditChannelModal && /* @__PURE__ */ (() => {
         const EditComp = EditChannelModalComponent || EditChannelModal;
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           EditComp,
           {
             channel,
@@ -6510,7 +6696,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
         );
       })()
     ] }),
-    channel && showSearchPanel && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    channel && showSearchPanel && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       MessageSearchPanel,
       {
         isOpen: showSearchPanel,
@@ -6519,7 +6705,7 @@ var ChannelInfo = import_react54.default.memo((props) => {
         AvatarComponent
       }
     ),
-    channel && showSettingsPanel && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    channel && showSettingsPanel && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       ChannelSettingsPanel,
       {
         isOpen: showSettingsPanel,
@@ -6530,6 +6716,237 @@ var ChannelInfo = import_react54.default.memo((props) => {
   ] });
 });
 ChannelInfo.displayName = "ChannelInfo";
+
+// src/components/CreateChannelModal.tsx
+var import_react56 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var CreateChannelModal = ({
+  isOpen,
+  onClose,
+  onSuccess,
+  AvatarComponent = Avatar,
+  UserItemComponent,
+  title = "New Message",
+  directTabLabel = "Direct",
+  groupTabLabel = "Group",
+  groupNameLabel = "Channel Name",
+  groupNamePlaceholder = "Enter channel name (required)",
+  groupDescriptionLabel = "Description",
+  groupDescriptionPlaceholder = "Optional description",
+  groupPublicLabel = "Public Channel",
+  userSearchPlaceholder = "Search users...",
+  cancelButtonLabel = "Cancel",
+  createButtonLabel = "Create",
+  creatingButtonLabel = "Creating..."
+}) => {
+  const { client } = useChatClient();
+  const currentUserId = client?.userID;
+  const [tab, setTab] = (0, import_react56.useState)("messaging");
+  const [step, setStep] = (0, import_react56.useState)(1);
+  const [name, setName] = (0, import_react56.useState)("");
+  const [description, setDescription] = (0, import_react56.useState)("");
+  const [isPublic, setIsPublic] = (0, import_react56.useState)(false);
+  const [selectedUsers, setSelectedUsers] = (0, import_react56.useState)([]);
+  const [isCreating, setIsCreating] = (0, import_react56.useState)(false);
+  const [error, setError] = (0, import_react56.useState)(null);
+  const existingDirectUserIds = (0, import_react56.useMemo)(() => {
+    if (!client || !currentUserId || tab !== "messaging") return [];
+    const ids = /* @__PURE__ */ new Set();
+    Object.values(client.activeChannels).forEach((channel) => {
+      if (channel.type === "messaging" && channel.state?.members) {
+        Object.keys(channel.state.members).forEach((uid) => {
+          if (uid !== currentUserId) ids.add(uid);
+        });
+      }
+    });
+    return Array.from(ids);
+  }, [client, currentUserId, tab]);
+  const handleCreate = (0, import_react56.useCallback)(async () => {
+    if (!client || !currentUserId || isCreating) return;
+    if (selectedUsers.length === 0) {
+      setError("Please select at least one user.");
+      return;
+    }
+    if (tab === "team" && !name.trim()) {
+      setError("Group name is required.");
+      return;
+    }
+    setIsCreating(true);
+    setError(null);
+    try {
+      let createdChannel;
+      if (tab === "messaging") {
+        const targetUserId = selectedUsers[0].id;
+        createdChannel = client.channel("messaging", {
+          members: [currentUserId, targetUserId]
+        });
+        await createdChannel.create();
+      } else {
+        const memberIds = selectedUsers.map((member) => member.id);
+        if (!memberIds.includes(currentUserId)) {
+          memberIds.push(currentUserId);
+        }
+        const payload = {
+          name: name.trim(),
+          members: memberIds,
+          public: isPublic
+        };
+        if (description.trim()) {
+          payload.description = description.trim();
+        }
+        createdChannel = client.channel("team", payload);
+        await createdChannel.create();
+      }
+      if (onSuccess) {
+        onSuccess(createdChannel);
+      } else {
+        onClose();
+      }
+    } catch (err) {
+      setError(err?.message || "Failed to create channel");
+    } finally {
+      setIsCreating(false);
+    }
+  }, [client, currentUserId, isCreating, selectedUsers, tab, name, isPublic, description, onSuccess, onClose]);
+  const isValid = (0, import_react56.useMemo)(() => {
+    if (tab === "messaging" && selectedUsers.length === 0) return false;
+    if (tab === "team" && step === 1 && !name.trim()) return false;
+    if (tab === "team" && step === 2 && selectedUsers.length === 0) return false;
+    return true;
+  }, [selectedUsers, tab, name, step]);
+  let footer;
+  if (tab === "messaging") {
+    footer = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--cancel", onClick: onClose, disabled: isCreating, children: cancelButtonLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--create", onClick: handleCreate, disabled: isCreating || !isValid, children: isCreating ? creatingButtonLabel : createButtonLabel })
+    ] });
+  } else if (tab === "team" && step === 1) {
+    footer = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--cancel", onClick: onClose, disabled: isCreating, children: cancelButtonLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--create", onClick: () => {
+        setError(null);
+        setStep(2);
+      }, disabled: isCreating || !isValid, children: "Next" })
+    ] });
+  } else if (tab === "team" && step === 2) {
+    footer = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--cancel", onClick: () => {
+        setError(null);
+        setStep(1);
+      }, disabled: isCreating, children: "Back" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--create", onClick: handleCreate, disabled: isCreating || !isValid, children: isCreating ? creatingButtonLabel : createButtonLabel })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Modal, { isOpen, onClose: isCreating ? () => {
+  } : onClose, title, maxWidth: "480px", footer, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__tabs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        "button",
+        {
+          className: `ermis-create-channel__tab ${tab === "messaging" ? "ermis-create-channel__tab--active" : ""}`,
+          onClick: () => {
+            setTab("messaging");
+            setStep(1);
+            setSelectedUsers([]);
+            setError(null);
+          },
+          disabled: isCreating,
+          children: directTabLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        "button",
+        {
+          className: `ermis-create-channel__tab ${tab === "team" ? "ermis-create-channel__tab--active" : ""}`,
+          onClick: () => {
+            setTab("team");
+            setStep(1);
+            setSelectedUsers([]);
+            setError(null);
+          },
+          disabled: isCreating,
+          children: groupTabLabel
+        }
+      )
+    ] }),
+    tab === "team" && step === 1 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { className: "ermis-create-channel__label", children: [
+          groupNameLabel,
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { color: "var(--ermis-error)" }, children: "*" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "input",
+          {
+            className: "ermis-create-channel__input",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            placeholder: groupNamePlaceholder,
+            disabled: isCreating,
+            maxLength: 100
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { className: "ermis-create-channel__label", children: groupDescriptionLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "textarea",
+          {
+            className: "ermis-create-channel__textarea",
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: groupDescriptionPlaceholder,
+            disabled: isCreating,
+            maxLength: 500,
+            rows: 2
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__field ermis-create-channel__field--toggle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { className: "ermis-create-channel__label", children: groupPublicLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": isPublic,
+            className: `ermis-create-channel__toggle ${isPublic ? "ermis-create-channel__toggle--on" : ""}`,
+            onClick: () => setIsPublic((v) => !v),
+            disabled: isCreating,
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ermis-create-channel__toggle-thumb" })
+          }
+        )
+      ] })
+    ] }),
+    (tab === "team" && step === 2 || tab === "messaging") && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__users", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__users-title", children: [
+        "Members ",
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { color: "var(--ermis-error)" }, children: "*" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { height: tab === "team" ? "280px" : "400px", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        UserPicker,
+        {
+          mode: tab === "messaging" ? "radio" : "checkbox",
+          onSelectionChange: setSelectedUsers,
+          excludeUserIds: tab === "messaging" ? existingDirectUserIds : [],
+          initialSelectedUsers: selectedUsers,
+          AvatarComponent,
+          UserItemComponent,
+          searchPlaceholder: userSearchPlaceholder
+        }
+      ) })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ermis-create-channel__error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ] }),
+      error
+    ] })
+  ] }) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AttachmentList,
@@ -6540,6 +6957,7 @@ ChannelInfo.displayName = "ChannelInfo";
   ChannelItem,
   ChannelList,
   ChatProvider,
+  CreateChannelModal,
   DefaultChannelInfoActions,
   DefaultChannelInfoCover,
   DefaultChannelInfoHeader,
@@ -6567,6 +6985,7 @@ ChannelInfo.displayName = "ChannelInfo";
   SystemMessage,
   SystemMessageItem,
   TypingIndicator,
+  UserPicker,
   VirtualMessageList,
   closeAllDropdowns,
   dedupMessages,