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

package/dist/index.mjs

@@ -652,6 +652,9 @@ function getLastMessagePreview(channel) {
     const userMap = buildUserMap(channel.state);
     return { text: 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];
@@ -4389,7 +4392,7 @@ var MessageInput = React24.memo(({
 MessageInput.displayName = "MessageInput";
 
 // src/components/ChannelInfo/ChannelInfo.tsx
-import React36, { useState as useState32, useCallback as useCallback22 } from "react";
+import React37, { useState as useState33, useCallback as useCallback23 } from "react";
 
 // src/components/ChannelInfo/ChannelInfoTabs.tsx
 import React30, { useState as useState27, useEffect as useEffect23, useMemo as useMemo18, useCallback as useCallback18, useDeferredValue as useDeferredValue2 } from "react";
@@ -4925,37 +4928,49 @@ var DefaultChannelInfoTabs = React30.memo(({
 });
 
 // src/components/ChannelInfo/AddMemberModal.tsx
-import React31, { useState as useState28, useEffect as useEffect24, useMemo as useMemo19, useCallback as useCallback19, useTransition } from "react";
+import { useState as useState29, useMemo as useMemo20, useCallback as useCallback20 } from "react";
+
+// src/components/UserPicker.tsx
+import React31, { useState as useState28, useEffect as useEffect24, useMemo as useMemo19, useCallback as useCallback19, useRef as useRef14, useTransition } from "react";
 import { VList as VList5 } from "virtua";
 import { jsx as jsx32, jsxs as jsxs28 } from "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__ */ jsx32("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx32("polyline", { points: "20 6 9 17 4 12" }) });
 var DefaultUserItem = React31.memo(({
   user,
-  isExisting,
-  isAdding,
-  onAdd,
-  AvatarComponent,
-  addedLabel = "Added",
-  addingLabel = "Adding...",
-  addLabel = "Add"
-}) => /* @__PURE__ */ jsxs28("div", { className: "ermis-modal-user-item", children: [
-  /* @__PURE__ */ jsx32(AvatarComponent, { image: user.avatar, name: user.name || user.id, size: 36 }),
-  /* @__PURE__ */ jsx32("div", { className: "ermis-modal-user-info", children: /* @__PURE__ */ jsx32("span", { className: "ermis-modal-user-name", children: user.name || user.id }) }),
-  /* @__PURE__ */ jsx32(
-    "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 = useCallback19(() => {
+    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__ */ jsxs28("div", { className: itemClass, onClick: handleClick, role: "option", "aria-selected": selected, children: [
+    /* @__PURE__ */ jsx32("div", { className: inputClass, children: selected && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
+    /* @__PURE__ */ jsx32(AvatarComponent, { image: user.avatar, name: user.name || user.id, size: 36 }),
+    /* @__PURE__ */ jsxs28("div", { className: "ermis-user-picker__info", children: [
+      /* @__PURE__ */ jsx32("span", { className: "ermis-user-picker__name", children: user.name || user.id }),
+      detail && /* @__PURE__ */ jsx32("span", { className: "ermis-user-picker__detail", children: detail })
+    ] })
+  ] });
+});
 DefaultUserItem.displayName = "DefaultUserItem";
-var DefaultSearchInput = ({ value, onChange, placeholder }) => /* @__PURE__ */ jsxs28("div", { className: "ermis-modal-search", children: [
+var DefaultSearchInput = ({ value, onChange, placeholder }) => /* @__PURE__ */ jsxs28("div", { className: "ermis-user-picker__search", children: [
   /* @__PURE__ */ jsxs28("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx32("circle", { cx: "11", cy: "11", r: "8" }),
     /* @__PURE__ */ jsx32("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
@@ -4971,33 +4986,69 @@ var DefaultSearchInput = ({ value, onChange, placeholder }) => /* @__PURE__ */ j
     }
   )
 ] });
-var AddMemberModal = ({
-  channel,
-  currentMembers,
-  onClose,
+var DefaultSelectedBox = React31.memo(({
+  users,
+  onRemove,
   AvatarComponent,
-  title = "Add Member",
+  emptyLabel
+}) => /* @__PURE__ */ jsxs28("div", { className: "ermis-user-picker__selected-box", children: [
+  users.length === 0 && emptyLabel && /* @__PURE__ */ jsx32("span", { className: "ermis-user-picker__selected-empty", children: emptyLabel }),
+  users.map((u) => /* @__PURE__ */ jsxs28("div", { className: "ermis-user-picker__chip", children: [
+    /* @__PURE__ */ jsx32(AvatarComponent, { image: u.avatar, name: u.name || u.id, size: 20 }),
+    /* @__PURE__ */ jsx32("span", { className: "ermis-user-picker__chip-name", children: u.name || u.id }),
+    /* @__PURE__ */ jsx32(
+      "button",
+      {
+        className: "ermis-user-picker__chip-remove",
+        onClick: () => onRemove(u.id),
+        "aria-label": `Remove ${u.name || u.id}`,
+        children: /* @__PURE__ */ jsxs28("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx32("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsx32("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] = useState28([]);
+  const currentUserId = client?.userID;
+  const [allUsers, setAllUsers] = useState28([]);
+  const [page, setPage] = useState28(1);
+  const [hasMore, setHasMore] = useState28(true);
+  const [loading, setLoading] = useState28(true);
+  const [loadingMore, setLoadingMore] = useState28(false);
   const [remoteUsers, setRemoteUsers] = useState28([]);
+  const [isSearching, setIsSearching] = useState28(false);
   const [searchInput, setSearchInput] = useState28("");
   const [search, setSearch] = useState28("");
   const [isPendingFilter, startTransition] = useTransition();
-  const [loading, setLoading] = useState28(true);
-  const [isSearching, setIsSearching] = useState28(false);
-  const [addingUser, setAddingUser] = useState28(null);
-  const [justAdded, setJustAdded] = useState28(/* @__PURE__ */ new Set());
+  const [selectedMap, setSelectedMap] = useState28(() => {
+    const map = /* @__PURE__ */ new Map();
+    initialSelectedUsers?.forEach((u) => map.set(u.id, u));
+    return map;
+  });
+  const vlistRef = useRef14(null);
   const UserRow = UserItemComponent || DefaultUserItem;
   const SearchInput = SearchInputComponent || DefaultSearchInput;
+  const SelectedBox = SelectedBoxComponent || DefaultSelectedBox;
+  const excludeSet = useMemo19(() => new Set(excludeUserIds || []), [excludeUserIds]);
   const handleSearchChange = useCallback19((e) => {
     const val = e.target.value;
     setSearchInput(val);
@@ -5010,12 +5061,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);
       }
@@ -5024,17 +5078,38 @@ var AddMemberModal = ({
     return () => {
       active = false;
     };
-  }, [client]);
+  }, [client, pageSize]);
+  const loadMore = useCallback19(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 = useMemo19(() => {
-    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]);
   useEffect24(() => {
     if (!search.trim() || localFilteredUsers.length > 0) {
       setRemoteUsers([]);
@@ -5050,33 +5125,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 = useMemo19(() => {
-    return new Set(currentMembers.map((m) => m.user_id));
-  }, [currentMembers]);
-  const handleAdd = useCallback19(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 = useCallback19((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]);
+  useEffect24(() => {
+    onSelectionChange?.(Array.from(selectedMap.values()));
+  }, [selectedMap, onSelectionChange]);
+  const handleRemoveSelected = useCallback19((userId) => {
+    setSelectedMap((prev) => {
+      const next = new Map(prev);
+      next.delete(userId);
+      return next;
+    });
+  }, []);
+  const handleScroll = useCallback19((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__ */ jsxs28(Modal, { isOpen: true, onClose, title, maxWidth: "480px", children: [
+  }, [loadMore]);
+  const selectedArr = useMemo19(() => Array.from(selectedMap.values()), [selectedMap]);
+  return /* @__PURE__ */ jsxs28("div", { className: "ermis-user-picker", role: "listbox", "aria-multiselectable": mode === "checkbox", children: [
+    mode === "checkbox" && /* @__PURE__ */ jsx32(
+      SelectedBox,
+      {
+        users: selectedArr,
+        onRemove: handleRemoveSelected,
+        AvatarComponent,
+        emptyLabel: selectedEmptyLabel
+      }
+    ),
     /* @__PURE__ */ jsx32(
       SearchInput,
       {
@@ -5085,28 +5196,101 @@ var AddMemberModal = ({
         placeholder: searchPlaceholder
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: "ermis-modal-user-list", style: LIST_CONTAINER_STYLE, children: isListLoading ? /* @__PURE__ */ jsx32("div", { className: "ermis-modal-loading", children: loadingText }) : usersToDisplay.length === 0 ? /* @__PURE__ */ jsx32("div", { className: "ermis-modal-empty", children: emptyText }) : /* @__PURE__ */ jsx32(VList5, { style: VLIST_STYLE, children: usersToDisplay.map((user) => /* @__PURE__ */ jsx32(
-      UserRow,
-      {
-        user,
-        isExisting: existingMemberIds.has(user.id) || justAdded.has(user.id),
-        isAdding: addingUser === user.id,
-        onAdd: handleAdd,
-        AvatarComponent,
-        addedLabel,
-        addingLabel,
-        addLabel
-      },
-      user.id
-    )) }) })
+    /* @__PURE__ */ jsx32("div", { className: "ermis-user-picker__list", children: isListLoading ? /* @__PURE__ */ jsxs28("div", { className: "ermis-user-picker__loading", children: [
+      /* @__PURE__ */ jsx32("span", { className: "ermis-user-picker__spinner" }),
+      loadingText
+    ] }) : usersToDisplay.length === 0 ? /* @__PURE__ */ jsx32("div", { className: "ermis-user-picker__empty", children: emptyText }) : /* @__PURE__ */ jsxs28(VList5, { ref: vlistRef, style: LIST_STYLE, onScroll: handleScroll, children: [
+      usersToDisplay.map((user) => /* @__PURE__ */ jsx32(
+        UserRow,
+        {
+          user,
+          selected: selectedMap.has(user.id),
+          disabled: user.id === currentUserId || excludeSet.has(user.id),
+          mode,
+          onToggle: handleToggle,
+          AvatarComponent
+        },
+        user.id
+      )),
+      loadingMore && /* @__PURE__ */ jsxs28("div", { className: "ermis-user-picker__load-more", children: [
+        /* @__PURE__ */ jsx32("span", { className: "ermis-user-picker__spinner" }),
+        loadingMoreText
+      ] })
+    ] }) })
   ] });
 };
+UserPicker.displayName = "UserPicker";
+
+// src/components/ChannelInfo/AddMemberModal.tsx
+import { jsx as jsx33 } from "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] = useState29([]);
+  const [isAdding, setIsAdding] = useState29(false);
+  const excludeUserIds = useMemo20(
+    () => currentMembers.map((m) => m.user_id),
+    [currentMembers]
+  );
+  const handleSelectionChange = useCallback20((users) => {
+    setSelectedUsers(users);
+  }, []);
+  const handleAdd = useCallback20(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__ */ jsx33(
+    "button",
+    {
+      className: "ermis-modal-add-btn",
+      onClick: handleAdd,
+      disabled: selectedUsers.length === 0 || isAdding,
+      children: isAdding ? addingLabel : `${addLabel} ${selectedUsers.length > 0 ? `(${selectedUsers.length})` : ""}`
+    }
+  );
+  return /* @__PURE__ */ jsx33(Modal, { isOpen: true, onClose, title, maxWidth: "480px", footer, children: /* @__PURE__ */ jsx33(
+    UserPicker,
+    {
+      mode: "checkbox",
+      onSelectionChange: handleSelectionChange,
+      excludeUserIds,
+      pageSize: 30,
+      AvatarComponent,
+      UserItemComponent,
+      SearchInputComponent,
+      searchPlaceholder,
+      loadingText,
+      emptyText,
+      selectedEmptyLabel: "Select users to add..."
+    }
+  ) });
+};
 
 // src/components/ChannelInfo/EditChannelModal.tsx
-import React32, { useState as useState29, useRef as useRef14, useCallback as useCallback20, useEffect as useEffect25 } from "react";
-import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+import React33, { useState as useState30, useRef as useRef15, useCallback as useCallback21, useEffect as useEffect25 } from "react";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_MAX_IMAGE_SIZE = 5 * 1024 * 1024;
-var EditChannelModal = React32.memo(({
+var EditChannelModal = React33.memo(({
   channel,
   onClose,
   onSave,
@@ -5130,20 +5314,20 @@ var EditChannelModal = React32.memo(({
   const originalDescription = channel.data?.description || "";
   const originalPublic = Boolean(channel.data?.public);
   const isTeamChannel = channel.type === "team";
-  const [name, setName] = useState29(originalName);
-  const [description, setDescription] = useState29(originalDescription);
-  const [isPublic, setIsPublic] = useState29(originalPublic);
-  const [previewUrl, setPreviewUrl] = useState29(null);
-  const [selectedFile, setSelectedFile] = useState29(null);
-  const [isSaving, setIsSaving] = useState29(false);
-  const [error, setError] = useState29(null);
-  const fileInputRef = useRef14(null);
+  const [name, setName] = useState30(originalName);
+  const [description, setDescription] = useState30(originalDescription);
+  const [isPublic, setIsPublic] = useState30(originalPublic);
+  const [previewUrl, setPreviewUrl] = useState30(null);
+  const [selectedFile, setSelectedFile] = useState30(null);
+  const [isSaving, setIsSaving] = useState30(false);
+  const [error, setError] = useState30(null);
+  const fileInputRef = useRef15(null);
   useEffect25(() => {
     return () => {
       if (previewUrl) URL.revokeObjectURL(previewUrl);
     };
   }, [previewUrl]);
-  const handleFileSelect = useCallback20((e) => {
+  const handleFileSelect = useCallback21((e) => {
     const file = e.target.files?.[0];
     if (!file) return;
     if (!file.type.startsWith("image/")) {
@@ -5161,10 +5345,10 @@ var EditChannelModal = React32.memo(({
     setSelectedFile(file);
     e.target.value = "";
   }, [maxImageSize, maxImageSizeError, previewUrl]);
-  const handleAvatarClick = useCallback20(() => {
+  const handleAvatarClick = useCallback21(() => {
     fileInputRef.current?.click();
   }, []);
-  const buildPayload = useCallback20(() => {
+  const buildPayload = useCallback21(() => {
     const payload = {};
     let hasChanges = false;
     if (name.trim() !== originalName) {
@@ -5184,7 +5368,7 @@ var EditChannelModal = React32.memo(({
     }
     return hasChanges ? payload : null;
   }, [name, description, isPublic, selectedFile, originalName, originalDescription, originalPublic, isTeamChannel]);
-  const handleSave = useCallback20(async () => {
+  const handleSave = useCallback21(async () => {
     const payload = buildPayload();
     if (!payload && !selectedFile) {
       onClose();
@@ -5219,7 +5403,7 @@ var EditChannelModal = React32.memo(({
   }, [buildPayload, selectedFile, onSave, channel, onClose]);
   const displayImage = previewUrl || originalImage || void 0;
   const footerContent = /* @__PURE__ */ jsxs29("div", { className: "ermis-channel-info__edit-footer-buttons", children: [
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(
       "button",
       {
         className: "ermis-channel-info__edit-btn ermis-channel-info__edit-btn--cancel",
@@ -5228,7 +5412,7 @@ var EditChannelModal = React32.memo(({
         children: cancelLabel
       }
     ),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(
       "button",
       {
         className: "ermis-channel-info__edit-btn ermis-channel-info__edit-btn--save",
@@ -5238,7 +5422,7 @@ var EditChannelModal = React32.memo(({
       }
     )
   ] });
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     Modal,
     {
       isOpen: true,
@@ -5250,13 +5434,13 @@ var EditChannelModal = React32.memo(({
       children: /* @__PURE__ */ jsxs29("div", { className: "ermis-channel-info__edit-body", children: [
         /* @__PURE__ */ jsxs29("div", { className: "ermis-channel-info__edit-avatar-section", children: [
           /* @__PURE__ */ jsxs29("div", { className: "ermis-channel-info__edit-avatar-wrap", onClick: handleAvatarClick, children: [
-            /* @__PURE__ */ jsx33(AvatarComponent, { image: displayImage, name: name || originalName, size: 80 }),
-            /* @__PURE__ */ jsx33("div", { className: "ermis-channel-info__edit-avatar-overlay", children: /* @__PURE__ */ jsxs29("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx33("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__ */ jsx33("circle", { cx: "12", cy: "13", r: "4" })
+            /* @__PURE__ */ jsx34(AvatarComponent, { image: displayImage, name: name || originalName, size: 80 }),
+            /* @__PURE__ */ jsx34("div", { className: "ermis-channel-info__edit-avatar-overlay", children: /* @__PURE__ */ jsxs29("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx34("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__ */ jsx34("circle", { cx: "12", cy: "13", r: "4" })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "button",
             {
               className: "ermis-channel-info__edit-avatar-btn",
@@ -5266,7 +5450,7 @@ var EditChannelModal = React32.memo(({
               children: changeAvatarLabel
             }
           ),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "input",
             {
               ref: fileInputRef,
@@ -5279,8 +5463,8 @@ var EditChannelModal = React32.memo(({
           )
         ] }),
         /* @__PURE__ */ jsxs29("div", { className: "ermis-channel-info__edit-field", children: [
-          /* @__PURE__ */ jsx33("label", { className: "ermis-channel-info__edit-label", children: nameLabel }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34("label", { className: "ermis-channel-info__edit-label", children: nameLabel }),
+          /* @__PURE__ */ jsx34(
             "input",
             {
               className: "ermis-channel-info__edit-input",
@@ -5294,8 +5478,8 @@ var EditChannelModal = React32.memo(({
           )
         ] }),
         /* @__PURE__ */ jsxs29("div", { className: "ermis-channel-info__edit-field", children: [
-          /* @__PURE__ */ jsx33("label", { className: "ermis-channel-info__edit-label", children: descriptionLabel }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34("label", { className: "ermis-channel-info__edit-label", children: descriptionLabel }),
+          /* @__PURE__ */ jsx34(
             "textarea",
             {
               className: "ermis-channel-info__edit-textarea",
@@ -5309,8 +5493,8 @@ var EditChannelModal = React32.memo(({
           )
         ] }),
         isTeamChannel && /* @__PURE__ */ jsxs29("div", { className: "ermis-channel-info__edit-field ermis-channel-info__edit-field--toggle", children: [
-          /* @__PURE__ */ jsx33("label", { className: "ermis-channel-info__edit-label", children: publicLabel }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34("label", { className: "ermis-channel-info__edit-label", children: publicLabel }),
+          /* @__PURE__ */ jsx34(
             "button",
             {
               type: "button",
@@ -5319,15 +5503,15 @@ var EditChannelModal = React32.memo(({
               className: `ermis-channel-info__edit-toggle ${isPublic ? "ermis-channel-info__edit-toggle--on" : ""}`,
               onClick: () => setIsPublic((v) => !v),
               disabled: isSaving,
-              children: /* @__PURE__ */ jsx33("span", { className: "ermis-channel-info__edit-toggle-thumb" })
+              children: /* @__PURE__ */ jsx34("span", { className: "ermis-channel-info__edit-toggle-thumb" })
             }
           )
         ] }),
         error && /* @__PURE__ */ jsxs29("div", { className: "ermis-channel-info__edit-error", children: [
           /* @__PURE__ */ jsxs29("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx33("circle", { cx: "12", cy: "12", r: "10" }),
-            /* @__PURE__ */ jsx33("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-            /* @__PURE__ */ jsx33("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+            /* @__PURE__ */ jsx34("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx34("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsx34("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
           ] }),
           error
         ] })
@@ -5338,12 +5522,12 @@ var EditChannelModal = React32.memo(({
 EditChannelModal.displayName = "EditChannelModal";
 
 // src/components/ChannelInfo/MessageSearchPanel.tsx
-import React34, { useState as useState30, useEffect as useEffect27, useRef as useRef16, useCallback as useCallback21, useMemo as useMemo20 } from "react";
+import React35, { useState as useState31, useEffect as useEffect27, useRef as useRef17, useCallback as useCallback22, useMemo as useMemo21 } from "react";
 
 // src/components/Panel.tsx
-import React33, { useEffect as useEffect26, useRef as useRef15 } from "react";
-import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
-var Panel = React33.memo(({
+import React34, { useEffect as useEffect26, useRef as useRef16 } from "react";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+var Panel = React34.memo(({
   isOpen,
   onClose,
   title,
@@ -5351,7 +5535,7 @@ var Panel = React33.memo(({
   headerContent,
   className
 }) => {
-  const panelRef = useRef15(null);
+  const panelRef = useRef16(null);
   useEffect26(() => {
     if (isOpen && panelRef.current) {
       panelRef.current.focus();
@@ -5365,10 +5549,10 @@ var Panel = React33.memo(({
       tabIndex: -1,
       children: [
         headerContent ? headerContent : /* @__PURE__ */ jsxs30("div", { className: "ermis-panel__header", children: [
-          /* @__PURE__ */ jsx34("button", { className: "ermis-panel__back", onClick: onClose, "aria-label": "Back", children: /* @__PURE__ */ jsx34("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx34("polyline", { points: "15 18 9 12 15 6" }) }) }),
-          title && /* @__PURE__ */ jsx34("h3", { className: "ermis-panel__title", children: title })
+          /* @__PURE__ */ jsx35("button", { className: "ermis-panel__back", onClick: onClose, "aria-label": "Back", children: /* @__PURE__ */ jsx35("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx35("polyline", { points: "15 18 9 12 15 6" }) }) }),
+          title && /* @__PURE__ */ jsx35("h3", { className: "ermis-panel__title", children: title })
         ] }),
-        /* @__PURE__ */ jsx34("div", { className: "ermis-panel__body", children })
+        /* @__PURE__ */ jsx35("div", { className: "ermis-panel__body", children })
       ]
     }
   );
@@ -5376,12 +5560,12 @@ var Panel = React33.memo(({
 Panel.displayName = "Panel";
 
 // src/components/ChannelInfo/MessageSearchPanel.tsx
-import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 var removeAccents = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-var HighlightedText = React34.memo(({ text, term }) => {
-  if (!term.trim()) return /* @__PURE__ */ jsx35(Fragment7, { children: text });
+var HighlightedText = React35.memo(({ text, term }) => {
+  if (!term.trim()) return /* @__PURE__ */ jsx36(Fragment7, { children: text });
   const cleanTerm = removeAccents(term).toLowerCase();
-  if (!cleanTerm) return /* @__PURE__ */ jsx35(Fragment7, { children: text });
+  if (!cleanTerm) return /* @__PURE__ */ jsx36(Fragment7, { children: text });
   const parts = [];
   let currentIndex = 0;
   const cleanText = removeAccents(text).toLowerCase();
@@ -5389,23 +5573,23 @@ var HighlightedText = React34.memo(({ text, term }) => {
     const startMatch = cleanText.indexOf(cleanTerm, currentIndex);
     if (startMatch === -1) {
       if (currentIndex < text.length) {
-        parts.push(/* @__PURE__ */ jsx35("span", { children: text.slice(currentIndex) }, currentIndex));
+        parts.push(/* @__PURE__ */ jsx36("span", { children: text.slice(currentIndex) }, currentIndex));
       }
       break;
     }
     if (startMatch > currentIndex) {
-      parts.push(/* @__PURE__ */ jsx35("span", { children: text.slice(currentIndex, startMatch) }, `text-${currentIndex}`));
+      parts.push(/* @__PURE__ */ jsx36("span", { children: text.slice(currentIndex, startMatch) }, `text-${currentIndex}`));
     }
     const endMatch = startMatch + cleanTerm.length;
     parts.push(
-      /* @__PURE__ */ jsx35("mark", { className: "ermis-search-panel__highlight", children: text.slice(startMatch, endMatch) }, `mark-${startMatch}`)
+      /* @__PURE__ */ jsx36("mark", { className: "ermis-search-panel__highlight", children: text.slice(startMatch, endMatch) }, `mark-${startMatch}`)
     );
     currentIndex = endMatch;
   }
-  return /* @__PURE__ */ jsx35(Fragment7, { children: parts.length > 0 ? parts : text });
+  return /* @__PURE__ */ jsx36(Fragment7, { children: parts.length > 0 ? parts : text });
 });
 HighlightedText.displayName = "HighlightedText";
-var MessageSearchPanel = React34.memo(({
+var MessageSearchPanel = React35.memo(({
   isOpen,
   onClose,
   channel,
@@ -5417,16 +5601,16 @@ var MessageSearchPanel = React34.memo(({
   debounceMs = 500
 }) => {
   const { setJumpToMessageId } = useChatClient();
-  const [query, setQuery] = useState30("");
-  const [results, setResults] = useState30([]);
-  const [loading, setLoading] = useState30(false);
-  const [hasMore, setHasMore] = useState30(false);
-  const [loadingMore, setLoadingMore] = useState30(false);
-  const debounceRef = useRef16(null);
-  const scrollRef = useRef16(null);
-  const inputRef = useRef16(null);
-  const offsetRef = useRef16(0);
-  const queryRef = useRef16("");
+  const [query, setQuery] = useState31("");
+  const [results, setResults] = useState31([]);
+  const [loading, setLoading] = useState31(false);
+  const [hasMore, setHasMore] = useState31(false);
+  const [loadingMore, setLoadingMore] = useState31(false);
+  const debounceRef = useRef17(null);
+  const scrollRef = useRef17(null);
+  const inputRef = useRef17(null);
+  const offsetRef = useRef17(0);
+  const queryRef = useRef17("");
   useEffect27(() => {
     setQuery("");
     setResults([]);
@@ -5441,7 +5625,7 @@ var MessageSearchPanel = React34.memo(({
       setTimeout(() => inputRef.current?.focus(), 300);
     }
   }, [isOpen]);
-  const handleInputChange = useCallback21((e) => {
+  const handleInputChange = useCallback22((e) => {
     const value = e.target.value;
     setQuery(value);
     if (debounceRef.current) clearTimeout(debounceRef.current);
@@ -5476,7 +5660,7 @@ var MessageSearchPanel = React34.memo(({
       }
     }, debounceMs);
   }, [channel, debounceMs]);
-  const handleLoadMore = useCallback21(async () => {
+  const handleLoadMore = useCallback22(async () => {
     if (loadingMore || !hasMore || !queryRef.current) return;
     setLoadingMore(true);
     const nextOffset = offsetRef.current + 25;
@@ -5495,7 +5679,7 @@ var MessageSearchPanel = React34.memo(({
       setLoadingMore(false);
     }
   }, [channel, hasMore, loadingMore]);
-  const handleScroll = useCallback21(() => {
+  const handleScroll = useCallback22(() => {
     const el = scrollRef.current;
     if (!el) return;
     const threshold = 100;
@@ -5503,10 +5687,10 @@ var MessageSearchPanel = React34.memo(({
       handleLoadMore();
     }
   }, [handleLoadMore]);
-  const handleResultClick = useCallback21((messageId) => {
+  const handleResultClick = useCallback22((messageId) => {
     setJumpToMessageId(messageId);
   }, [setJumpToMessageId]);
-  const userMaps = useMemo20(() => {
+  const userMaps = useMemo21(() => {
     const original = buildUserMap(channel.state);
     const lower = {};
     for (const [id, name] of Object.entries(original)) {
@@ -5515,12 +5699,12 @@ var MessageSearchPanel = React34.memo(({
     return { original, lower };
   }, [channel.state]);
   return /* @__PURE__ */ jsxs31(Panel, { isOpen, onClose, title, className: "ermis-search-panel", children: [
-    /* @__PURE__ */ jsx35("div", { className: "ermis-search-panel__search-box", children: /* @__PURE__ */ jsxs31("div", { className: "ermis-search-panel__input-wrap", children: [
+    /* @__PURE__ */ jsx36("div", { className: "ermis-search-panel__search-box", children: /* @__PURE__ */ jsxs31("div", { className: "ermis-search-panel__input-wrap", children: [
       /* @__PURE__ */ jsxs31("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__ */ jsx35("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx35("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+        /* @__PURE__ */ jsx36("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx36("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
       ] }),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         "input",
         {
           ref: inputRef,
@@ -5531,7 +5715,7 @@ var MessageSearchPanel = React34.memo(({
           placeholder
         }
       ),
-      query && /* @__PURE__ */ jsx35(
+      query && /* @__PURE__ */ jsx36(
         "button",
         {
           className: "ermis-search-panel__input-clear",
@@ -5545,8 +5729,8 @@ var MessageSearchPanel = React34.memo(({
           },
           "aria-label": "Clear",
           children: /* @__PURE__ */ jsxs31("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx35("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-            /* @__PURE__ */ jsx35("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            /* @__PURE__ */ jsx36("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsx36("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
           ] })
         }
       )
@@ -5560,16 +5744,16 @@ var MessageSearchPanel = React34.memo(({
         children: [
           !query.trim() && !loading && results.length === 0 && /* @__PURE__ */ jsxs31("div", { className: "ermis-search-panel__idle", children: [
             /* @__PURE__ */ jsxs31("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx35("circle", { cx: "11", cy: "11", r: "8" }),
-              /* @__PURE__ */ jsx35("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+              /* @__PURE__ */ jsx36("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ jsx36("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
             ] }),
-            /* @__PURE__ */ jsx35("span", { children: placeholder })
+            /* @__PURE__ */ jsx36("span", { children: placeholder })
           ] }),
           loading && /* @__PURE__ */ jsxs31("div", { className: "ermis-search-panel__loading", children: [
-            /* @__PURE__ */ jsx35("div", { className: "ermis-search-panel__spinner" }),
-            /* @__PURE__ */ jsx35("span", { children: loadingText })
+            /* @__PURE__ */ jsx36("div", { className: "ermis-search-panel__spinner" }),
+            /* @__PURE__ */ jsx36("span", { children: loadingText })
           ] }),
-          !loading && query.trim() && results.length === 0 && /* @__PURE__ */ jsx35("div", { className: "ermis-search-panel__empty", children: /* @__PURE__ */ jsx35("span", { children: emptyText }) }),
+          !loading && query.trim() && results.length === 0 && /* @__PURE__ */ jsx36("div", { className: "ermis-search-panel__empty", children: /* @__PURE__ */ jsx36("span", { children: emptyText }) }),
           !loading && results.map((msg) => {
             let parsedText = "";
             if (msg.text) {
@@ -5595,7 +5779,7 @@ var MessageSearchPanel = React34.memo(({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx35(
+                  /* @__PURE__ */ jsx36(
                     AvatarComponent,
                     {
                       image: msg.user?.avatar || msg.user?.image || msg.user?.avatar_url,
@@ -5605,18 +5789,18 @@ var MessageSearchPanel = React34.memo(({
                   ),
                   /* @__PURE__ */ jsxs31("div", { className: "ermis-search-panel__result-body", children: [
                     /* @__PURE__ */ jsxs31("div", { className: "ermis-search-panel__result-meta", children: [
-                      /* @__PURE__ */ jsx35("span", { className: "ermis-search-panel__result-name", children: msg.user?.name || msg.user_id || "Unknown" }),
-                      /* @__PURE__ */ jsx35("span", { className: "ermis-search-panel__result-time", children: msg.created_at ? formatRelativeDate(msg.created_at) : "" })
+                      /* @__PURE__ */ jsx36("span", { className: "ermis-search-panel__result-name", children: msg.user?.name || msg.user_id || "Unknown" }),
+                      /* @__PURE__ */ jsx36("span", { className: "ermis-search-panel__result-time", children: msg.created_at ? formatRelativeDate(msg.created_at) : "" })
                     ] }),
-                    /* @__PURE__ */ jsx35("p", { className: "ermis-search-panel__result-text", children: parsedText ? /* @__PURE__ */ jsx35(HighlightedText, { text: parsedText, term: query }) : /* @__PURE__ */ jsx35("em", { children: "Attachment" }) })
+                    /* @__PURE__ */ jsx36("p", { className: "ermis-search-panel__result-text", children: parsedText ? /* @__PURE__ */ jsx36(HighlightedText, { text: parsedText, term: query }) : /* @__PURE__ */ jsx36("em", { children: "Attachment" }) })
                   ] })
                 ]
               },
               msg.id
             );
           }),
-          !loading && !loadingMore && !hasMore && results.length > 0 && query.trim() && /* @__PURE__ */ jsx35("div", { className: "ermis-search-panel__end-indicator", children: /* @__PURE__ */ jsx35("span", { children: emptyText }) }),
-          loadingMore && /* @__PURE__ */ jsx35("div", { className: "ermis-search-panel__loading-more", children: /* @__PURE__ */ jsx35("div", { className: "ermis-search-panel__spinner ermis-search-panel__spinner--small" }) })
+          !loading && !loadingMore && !hasMore && results.length > 0 && query.trim() && /* @__PURE__ */ jsx36("div", { className: "ermis-search-panel__end-indicator", children: /* @__PURE__ */ jsx36("span", { children: emptyText }) }),
+          loadingMore && /* @__PURE__ */ jsx36("div", { className: "ermis-search-panel__loading-more", children: /* @__PURE__ */ jsx36("div", { className: "ermis-search-panel__spinner ermis-search-panel__spinner--small" }) })
         ]
       }
     )
@@ -5625,9 +5809,9 @@ var MessageSearchPanel = React34.memo(({
 MessageSearchPanel.displayName = "MessageSearchPanel";
 
 // src/components/ChannelInfo/ChannelSettingsPanel.tsx
-import React35, { useState as useState31, useEffect as useEffect28 } from "react";
-import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
-var ChannelSettingsPanel = React35.memo(({
+import React36, { useState as useState32, useEffect as useEffect28 } from "react";
+import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+var ChannelSettingsPanel = React36.memo(({
   isOpen,
   onClose,
   channel,
@@ -5642,8 +5826,8 @@ var ChannelSettingsPanel = React35.memo(({
     { label: "1h", value: 36e5 }
   ]
 }) => {
-  const [slowMode, setSlowMode] = useState31(0);
-  const [capabilities, setCapabilities] = useState31({
+  const [slowMode, setSlowMode] = useState32(0);
+  const [capabilities, setCapabilities] = useState32({
     "send-message": true,
     "send-links": true,
     "update-own-message": true,
@@ -5653,10 +5837,10 @@ var ChannelSettingsPanel = React35.memo(({
     "create-poll": true,
     "vote-poll": true
   });
-  const [keywords, setKeywords] = useState31([]);
-  const [newKeyword, setNewKeyword] = useState31("");
-  const [isSaving, setIsSaving] = useState31(false);
-  const [error, setError] = useState31(null);
+  const [keywords, setKeywords] = useState32([]);
+  const [newKeyword, setNewKeyword] = useState32("");
+  const [isSaving, setIsSaving] = useState32(false);
+  const [error, setError] = useState32(null);
   useEffect28(() => {
     if (!channel) return;
     const syncData = (dataToSync = channel.data) => {
@@ -5800,13 +5984,13 @@ var ChannelSettingsPanel = React35.memo(({
               },
               children: [
                 /* @__PURE__ */ jsxs32("div", { style: { display: "flex", alignItems: "center", marginBottom: "16px", gap: "8px" }, children: [
-                  /* @__PURE__ */ jsx36("div", { style: { background: "var(--ermis-color-primary-light)", padding: "4px", borderRadius: "8px", color: "var(--ermis-color-primary)" }, children: /* @__PURE__ */ jsx36("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx36("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }) }),
-                  /* @__PURE__ */ jsx36("h4", { style: { fontSize: "14px", color: "var(--ermis-text-primary)", fontWeight: 600, margin: 0 }, children: "Member Permissions" })
+                  /* @__PURE__ */ jsx37("div", { style: { background: "var(--ermis-color-primary-light)", padding: "4px", borderRadius: "8px", color: "var(--ermis-color-primary)" }, children: /* @__PURE__ */ jsx37("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx37("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }) }),
+                  /* @__PURE__ */ jsx37("h4", { style: { fontSize: "14px", color: "var(--ermis-text-primary)", fontWeight: 600, margin: 0 }, children: "Member Permissions" })
                 ] }),
                 /* @__PURE__ */ jsxs32("div", { className: "ermis-settings-panel__field", style: { marginBottom: "16px" }, children: [
-                  /* @__PURE__ */ jsx36("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Slow Mode" }),
+                  /* @__PURE__ */ jsx37("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Slow Mode" }),
                   /* @__PURE__ */ jsxs32("div", { style: { position: "relative" }, children: [
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       "select",
                       {
                         value: slowMode,
@@ -5826,15 +6010,15 @@ var ChannelSettingsPanel = React35.memo(({
                           transition: "border-color 0.2s"
                         },
                         disabled: isSaving,
-                        children: slowModeOptions.map((opt) => /* @__PURE__ */ jsx36("option", { value: opt.value, children: opt.label }, opt.value))
+                        children: slowModeOptions.map((opt) => /* @__PURE__ */ jsx37("option", { value: opt.value, children: opt.label }, opt.value))
                       }
                     ),
-                    /* @__PURE__ */ jsx36("div", { style: { position: "absolute", right: "14px", top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--ermis-text-secondary)" }, children: /* @__PURE__ */ jsx36("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx36("polyline", { points: "6 9 12 15 18 9" }) }) })
+                    /* @__PURE__ */ jsx37("div", { style: { position: "absolute", right: "14px", top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--ermis-text-secondary)" }, children: /* @__PURE__ */ jsx37("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx37("polyline", { points: "6 9 12 15 18 9" }) }) })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs32("div", { className: "ermis-settings-panel__toggles", style: { display: "flex", flexDirection: "column" }, children: [
-                  /* @__PURE__ */ jsx36("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Capabilities" }),
-                  /* @__PURE__ */ jsx36("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__ */ jsxs32(
+                  /* @__PURE__ */ jsx37("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Capabilities" }),
+                  /* @__PURE__ */ jsx37("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__ */ jsxs32(
                     "div",
                     {
                       style: {
@@ -5845,8 +6029,8 @@ var ChannelSettingsPanel = React35.memo(({
                         borderBottom: index < arr.length - 1 ? "1px solid var(--ermis-border-color)" : "none"
                       },
                       children: [
-                        /* @__PURE__ */ jsx36("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__ */ jsx36(
+                        /* @__PURE__ */ jsx37("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__ */ jsx37(
                           "button",
                           {
                             type: "button",
@@ -5856,7 +6040,7 @@ var ChannelSettingsPanel = React35.memo(({
                             onClick: () => toggleCapability(key),
                             disabled: isSaving,
                             style: { transform: "scale(0.85)", transformOrigin: "right center" },
-                            children: /* @__PURE__ */ jsx36("span", { className: "ermis-channel-info__edit-toggle-thumb" })
+                            children: /* @__PURE__ */ jsx37("span", { className: "ermis-channel-info__edit-toggle-thumb" })
                           }
                         )
                       ]
@@ -5880,17 +6064,17 @@ var ChannelSettingsPanel = React35.memo(({
               },
               children: [
                 /* @__PURE__ */ jsxs32("div", { style: { display: "flex", alignItems: "center", marginBottom: "16px", gap: "8px" }, children: [
-                  /* @__PURE__ */ jsx36("div", { style: { background: "var(--ermis-color-danger-light)", padding: "4px", borderRadius: "8px", color: "var(--ermis-color-danger)" }, children: /* @__PURE__ */ jsxs32("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx36("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__ */ jsx36("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-                    /* @__PURE__ */ jsx36("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                  /* @__PURE__ */ jsx37("div", { style: { background: "var(--ermis-color-danger-light)", padding: "4px", borderRadius: "8px", color: "var(--ermis-color-danger)" }, children: /* @__PURE__ */ jsxs32("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx37("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__ */ jsx37("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                    /* @__PURE__ */ jsx37("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
                   ] }) }),
-                  /* @__PURE__ */ jsx36("h4", { style: { fontSize: "14px", color: "var(--ermis-text-primary)", fontWeight: 600, margin: 0 }, children: "Content Moderation" })
+                  /* @__PURE__ */ jsx37("h4", { style: { fontSize: "14px", color: "var(--ermis-text-primary)", fontWeight: 600, margin: 0 }, children: "Content Moderation" })
                 ] }),
                 /* @__PURE__ */ jsxs32("div", { className: "ermis-settings-panel__field", style: { marginBottom: "16px" }, children: [
-                  /* @__PURE__ */ jsx36("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Keyword Filtering" }),
+                  /* @__PURE__ */ jsx37("label", { style: { display: "block", marginBottom: "6px", fontWeight: 500, fontSize: "12px", color: "var(--ermis-text-secondary)", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Keyword Filtering" }),
                   /* @__PURE__ */ jsxs32("div", { style: { display: "flex", gap: "8px", position: "relative" }, children: [
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       "input",
                       {
                         type: "text",
@@ -5912,7 +6096,7 @@ var ChannelSettingsPanel = React35.memo(({
                         disabled: isSaving
                       }
                     ),
-                    /* @__PURE__ */ jsx36(
+                    /* @__PURE__ */ jsx37(
                       "button",
                       {
                         type: "button",
@@ -5956,7 +6140,7 @@ var ChannelSettingsPanel = React35.memo(({
                       },
                       children: [
                         kw,
-                        /* @__PURE__ */ jsx36(
+                        /* @__PURE__ */ jsx37(
                           "button",
                           {
                             onClick: () => handeRemoveKeyword(kw),
@@ -5974,8 +6158,8 @@ var ChannelSettingsPanel = React35.memo(({
                             disabled: isSaving,
                             "aria-label": "Remove keyword",
                             children: /* @__PURE__ */ jsxs32("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                              /* @__PURE__ */ jsx36("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                              /* @__PURE__ */ jsx36("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                              /* @__PURE__ */ jsx37("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                              /* @__PURE__ */ jsx37("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                             ] })
                           }
                         )
@@ -5983,7 +6167,7 @@ var ChannelSettingsPanel = React35.memo(({
                     },
                     kw
                   )),
-                  keywords.length === 0 && /* @__PURE__ */ jsx36("span", { style: { fontSize: "14px", color: "var(--ermis-text-secondary)", padding: "6px 0", fontStyle: "italic" }, children: "No blacklisted keywords added." })
+                  keywords.length === 0 && /* @__PURE__ */ jsx37("span", { style: { fontSize: "14px", color: "var(--ermis-text-secondary)", padding: "6px 0", fontStyle: "italic" }, children: "No blacklisted keywords added." })
                 ] })
               ]
             }
@@ -6007,13 +6191,13 @@ var ChannelSettingsPanel = React35.memo(({
         children: [
           error && /* @__PURE__ */ jsxs32("div", { style: { color: "var(--ermis-color-danger)", fontSize: "13px", display: "flex", alignItems: "center", gap: "6px", fontWeight: 500 }, children: [
             /* @__PURE__ */ jsxs32("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
-              /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ jsx36("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-              /* @__PURE__ */ jsx36("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+              /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx37("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+              /* @__PURE__ */ jsx37("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
             ] }),
             error
           ] }),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx37(
             "button",
             {
               onClick: handleSave,
@@ -6033,7 +6217,7 @@ var ChannelSettingsPanel = React35.memo(({
                 boxShadow: isSaving || !isDirty ? "none" : "0 4px 12px rgba(0, 110, 255, 0.2)"
               },
               children: isSaving ? /* @__PURE__ */ jsxs32("span", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" }, children: [
-                /* @__PURE__ */ jsx36("svg", { className: "ermis-spinner", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", children: /* @__PURE__ */ jsx36("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }),
+                /* @__PURE__ */ jsx37("svg", { className: "ermis-spinner", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", children: /* @__PURE__ */ jsx37("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }),
                 "Saving..."
               ] }) : "Save Updates"
             }
@@ -6046,40 +6230,40 @@ var ChannelSettingsPanel = React35.memo(({
 ChannelSettingsPanel.displayName = "ChannelSettingsPanel";
 
 // src/components/ChannelInfo/ChannelInfo.tsx
-import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
-var DefaultChannelInfoHeader = React36.memo(({ title, onClose }) => {
+import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+var DefaultChannelInfoHeader = React37.memo(({ title, onClose }) => {
   return /* @__PURE__ */ jsxs33("div", { className: "ermis-channel-info__header", children: [
-    /* @__PURE__ */ jsx37("h3", { className: "ermis-channel-info__title", children: title }),
-    onClose && /* @__PURE__ */ jsx37("button", { className: "ermis-channel-info__close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx37("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx37("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    /* @__PURE__ */ jsx38("h3", { className: "ermis-channel-info__title", children: title }),
+    onClose && /* @__PURE__ */ jsx38("button", { className: "ermis-channel-info__close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx38("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx38("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
   ] });
 });
 DefaultChannelInfoHeader.displayName = "DefaultChannelInfoHeader";
-var DefaultChannelInfoCover = React36.memo(({ channelName, channelImage, channelDescription, AvatarComponent, canEdit, onEditClick, isPublic, isTeamChannel }) => {
+var DefaultChannelInfoCover = React37.memo(({ channelName, channelImage, channelDescription, AvatarComponent, canEdit, onEditClick, isPublic, isTeamChannel }) => {
   return /* @__PURE__ */ jsxs33("div", { className: "ermis-channel-info__cover", children: [
-    /* @__PURE__ */ jsx37(AvatarComponent, { image: channelImage, name: channelName, size: 80, className: "ermis-channel-info__avatar" }),
+    /* @__PURE__ */ jsx38(AvatarComponent, { image: channelImage, name: channelName, size: 80, className: "ermis-channel-info__avatar" }),
     /* @__PURE__ */ jsxs33("div", { className: "ermis-channel-info__name-row", children: [
-      /* @__PURE__ */ jsx37("h2", { className: "ermis-channel-info__name", children: channelName }),
-      canEdit && onEditClick && /* @__PURE__ */ jsx37("button", { className: "ermis-channel-info__cover-edit-btn", onClick: onEditClick, "aria-label": "Edit channel", children: /* @__PURE__ */ jsxs33("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-        /* @__PURE__ */ jsx37("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+      /* @__PURE__ */ jsx38("h2", { className: "ermis-channel-info__name", children: channelName }),
+      canEdit && onEditClick && /* @__PURE__ */ jsx38("button", { className: "ermis-channel-info__cover-edit-btn", onClick: onEditClick, "aria-label": "Edit channel", children: /* @__PURE__ */ jsxs33("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx38("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+        /* @__PURE__ */ jsx38("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__ */ jsxs33("span", { className: `ermis-channel-info__type-badge ${isPublic ? "ermis-channel-info__type-badge--public" : "ermis-channel-info__type-badge--private"}`, children: [
       isPublic ? /* @__PURE__ */ jsxs33("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx37("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
-        /* @__PURE__ */ jsx37("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__ */ jsx38("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx38("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+        /* @__PURE__ */ jsx38("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__ */ jsxs33("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx37("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+        /* @__PURE__ */ jsx38("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx38("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
       ] }),
       isPublic ? "Public" : "Private"
     ] }),
-    channelDescription && /* @__PURE__ */ jsx37("p", { className: "ermis-channel-info__description", children: channelDescription })
+    channelDescription && /* @__PURE__ */ jsx38("p", { className: "ermis-channel-info__description", children: channelDescription })
   ] });
 });
 DefaultChannelInfoCover.displayName = "DefaultChannelInfoCover";
-var DefaultChannelInfoActions = React36.memo(({
+var DefaultChannelInfoActions = React37.memo(({
   onSearchClick,
   onSettingsClick,
   onLeaveChannel,
@@ -6098,50 +6282,50 @@ var DefaultChannelInfoActions = React36.memo(({
 }) => {
   return /* @__PURE__ */ jsxs33("div", { className: "ermis-channel-info__actions", children: [
     /* @__PURE__ */ jsxs33("button", { className: "ermis-channel-info__action-btn", onClick: onSearchClick, disabled: isBlocked, children: [
-      /* @__PURE__ */ jsx37("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx37("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      /* @__PURE__ */ jsx38("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx38("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx38("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
       ] }) }),
-      /* @__PURE__ */ jsx37("span", { children: searchLabel })
+      /* @__PURE__ */ jsx38("span", { children: searchLabel })
     ] }),
     isTeamChannel && (currentUserRole === "owner" || currentUserRole === "moder") && /* @__PURE__ */ jsxs33("button", { className: "ermis-channel-info__action-btn", onClick: onSettingsClick, children: [
-      /* @__PURE__ */ jsx37("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "3" }),
-        /* @__PURE__ */ jsx37("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__ */ jsx38("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx38("circle", { cx: "12", cy: "12", r: "3" }),
+        /* @__PURE__ */ jsx38("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__ */ jsx37("span", { children: settingsLabel })
+      /* @__PURE__ */ jsx38("span", { children: settingsLabel })
     ] }),
     isTeamChannel && (currentUserRole === "owner" ? /* @__PURE__ */ jsxs33("button", { className: "ermis-channel-info__action-btn ermis-channel-info__action-btn--danger", onClick: onDeleteChannel, children: [
-      /* @__PURE__ */ jsx37("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("polyline", { points: "3 6 5 6 21 6" }),
-        /* @__PURE__ */ jsx37("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__ */ jsx38("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx38("polyline", { points: "3 6 5 6 21 6" }),
+        /* @__PURE__ */ jsx38("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__ */ jsx37("span", { children: deleteLabel })
+      /* @__PURE__ */ jsx38("span", { children: deleteLabel })
     ] }) : /* @__PURE__ */ jsxs33("button", { className: "ermis-channel-info__action-btn ermis-channel-info__action-btn--danger", onClick: onLeaveChannel, children: [
-      /* @__PURE__ */ jsx37("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-        /* @__PURE__ */ jsx37("polyline", { points: "16 17 21 12 16 7" }),
-        /* @__PURE__ */ jsx37("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+      /* @__PURE__ */ jsx38("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx38("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+        /* @__PURE__ */ jsx38("polyline", { points: "16 17 21 12 16 7" }),
+        /* @__PURE__ */ jsx38("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
       ] }) }),
-      /* @__PURE__ */ jsx37("span", { children: leaveLabel })
+      /* @__PURE__ */ jsx38("span", { children: leaveLabel })
     ] })),
     !isTeamChannel && (isBlocked ? /* @__PURE__ */ jsxs33("button", { className: "ermis-channel-info__action-btn", onClick: onUnblockUser, children: [
-      /* @__PURE__ */ jsx37("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx37("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+      /* @__PURE__ */ jsx38("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx38("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx38("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
       ] }) }),
-      /* @__PURE__ */ jsx37("span", { children: unblockLabel })
+      /* @__PURE__ */ jsx38("span", { children: unblockLabel })
     ] }) : /* @__PURE__ */ jsxs33("button", { className: "ermis-channel-info__action-btn ermis-channel-info__action-btn--danger", onClick: onBlockUser, children: [
-      /* @__PURE__ */ jsx37("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx37("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+      /* @__PURE__ */ jsx38("div", { className: "ermis-channel-info__action-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx38("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx38("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
       ] }) }),
-      /* @__PURE__ */ jsx37("span", { children: blockLabel })
+      /* @__PURE__ */ jsx38("span", { children: blockLabel })
     ] }))
   ] });
 });
 DefaultChannelInfoActions.displayName = "DefaultChannelInfoActions";
-var ChannelInfo = React36.memo((props) => {
+var ChannelInfo = React37.memo((props) => {
   const {
     channel: channelProp,
     className = "",
@@ -6211,7 +6395,7 @@ var ChannelInfo = React36.memo((props) => {
   const currentUserId = client?.userID;
   const currentUserRole = currentUserId ? channel?.state?.members?.[currentUserId]?.channel_role : void 0;
   const isTeamChannel = channel?.type === "team";
-  const handleDeleteChannel = useCallback22(async () => {
+  const handleDeleteChannel = useCallback23(async () => {
     if (onDeleteChannelProp) return onDeleteChannelProp();
     if (!channel) return;
     try {
@@ -6220,7 +6404,7 @@ var ChannelInfo = React36.memo((props) => {
       console.error("Error deleting channel", e);
     }
   }, [channel, onDeleteChannelProp]);
-  const handleLeaveChannel = useCallback22(async () => {
+  const handleLeaveChannel = useCallback23(async () => {
     if (onLeaveChannelProp) return onLeaveChannelProp();
     if (!channel || !currentUserId) return;
     try {
@@ -6229,7 +6413,7 @@ var ChannelInfo = React36.memo((props) => {
       console.error("Error leaving channel", e);
     }
   }, [channel, currentUserId, onLeaveChannelProp]);
-  const handleRemoveMember = useCallback22(async (memberId) => {
+  const handleRemoveMember = useCallback23(async (memberId) => {
     if (onRemoveMemberProp) return onRemoveMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6238,7 +6422,7 @@ var ChannelInfo = React36.memo((props) => {
       console.error("Error removing member", e);
     }
   }, [channel, onRemoveMemberProp]);
-  const handleBanMember = useCallback22(async (memberId) => {
+  const handleBanMember = useCallback23(async (memberId) => {
     if (onBanMemberProp) return onBanMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6247,7 +6431,7 @@ var ChannelInfo = React36.memo((props) => {
       console.error("Error banning member", e);
     }
   }, [channel, onBanMemberProp]);
-  const handleUnbanMember = useCallback22(async (memberId) => {
+  const handleUnbanMember = useCallback23(async (memberId) => {
     if (onUnbanMemberProp) return onUnbanMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6256,7 +6440,7 @@ var ChannelInfo = React36.memo((props) => {
       console.error("Error unbanning member", e);
     }
   }, [channel, onUnbanMemberProp]);
-  const handlePromoteMember = useCallback22(async (memberId) => {
+  const handlePromoteMember = useCallback23(async (memberId) => {
     if (onPromoteMemberProp) return onPromoteMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6265,7 +6449,7 @@ var ChannelInfo = React36.memo((props) => {
       console.error("Error promoting member", e);
     }
   }, [channel, onPromoteMemberProp]);
-  const handleDemoteMember = useCallback22(async (memberId) => {
+  const handleDemoteMember = useCallback23(async (memberId) => {
     if (onDemoteMemberProp) return onDemoteMemberProp(memberId);
     if (!channel) return;
     try {
@@ -6274,7 +6458,7 @@ var ChannelInfo = React36.memo((props) => {
       console.error("Error demoting member", e);
     }
   }, [channel, onDemoteMemberProp]);
-  const handleBlockUser = useCallback22(async () => {
+  const handleBlockUser = useCallback23(async () => {
     if (onBlockUserProp) return onBlockUserProp();
     if (!channel) return;
     try {
@@ -6283,7 +6467,7 @@ var ChannelInfo = React36.memo((props) => {
       console.error("Error blocking user", e);
     }
   }, [channel, onBlockUserProp]);
-  const handleUnblockUser = useCallback22(async () => {
+  const handleUnblockUser = useCallback23(async () => {
     if (onUnblockUserProp) return onUnblockUserProp();
     if (!channel) return;
     try {
@@ -6294,22 +6478,22 @@ var ChannelInfo = React36.memo((props) => {
   }, [channel, onUnblockUserProp]);
   const { members } = useChannelMembers(channel);
   const { channelName, channelImage, channelDescription } = useChannelProfile(channel);
-  const [showAddMemberModal, setShowAddMemberModal] = useState32(false);
-  const [showEditChannelModal, setShowEditChannelModal] = useState32(false);
-  const [showSearchPanel, setShowSearchPanel] = useState32(false);
-  const [showSettingsPanel, setShowSettingsPanel] = useState32(false);
+  const [showAddMemberModal, setShowAddMemberModal] = useState33(false);
+  const [showEditChannelModal, setShowEditChannelModal] = useState33(false);
+  const [showSearchPanel, setShowSearchPanel] = useState33(false);
+  const [showSettingsPanel, setShowSettingsPanel] = useState33(false);
   const canEditChannel = isTeamChannel && !isBanned && (currentUserRole === "owner" || currentUserRole === "moder");
-  const handleEditChannelClick = useCallback22(() => {
+  const handleEditChannelClick = useCallback23(() => {
     setShowEditChannelModal(true);
   }, []);
-  const handleAddMemberClick = useCallback22(() => {
+  const handleAddMemberClick = useCallback23(() => {
     if (onAddMemberClick) return onAddMemberClick();
     setShowAddMemberModal(true);
   }, [onAddMemberClick]);
   if (!channel) return null;
   return /* @__PURE__ */ jsxs33("div", { className: `ermis-channel-info ${className}`.trim(), children: [
-    /* @__PURE__ */ jsx37(HeaderComponent, { title, onClose }),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(HeaderComponent, { title, onClose }),
+    /* @__PURE__ */ jsx38(
       CoverComponent,
       {
         channelName,
@@ -6323,13 +6507,13 @@ var ChannelInfo = React36.memo((props) => {
       }
     ),
     isBanned ? /* @__PURE__ */ jsxs33("div", { className: "ermis-channel-info__banned-banner", children: [
-      /* @__PURE__ */ jsx37("div", { className: "ermis-channel-info__banned-banner-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx37("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx37("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+      /* @__PURE__ */ jsx38("div", { className: "ermis-channel-info__banned-banner-icon", children: /* @__PURE__ */ jsxs33("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx38("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx38("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
       ] }) }),
-      /* @__PURE__ */ jsx37("span", { className: "ermis-channel-info__banned-banner-text", children: "You have been blocked from this channel" })
+      /* @__PURE__ */ jsx38("span", { className: "ermis-channel-info__banned-banner-text", children: "You have been blocked from this channel" })
     ] }) : /* @__PURE__ */ jsxs33(Fragment8, { children: [
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         ActionsComponent,
         {
           onSearchClick: () => setShowSearchPanel(true),
@@ -6349,7 +6533,7 @@ var ChannelInfo = React36.memo((props) => {
           unblockLabel: actionsUnblockLabel
         }
       ),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         TabsComponent,
         {
           channel,
@@ -6375,7 +6559,7 @@ var ChannelInfo = React36.memo((props) => {
       ),
       showAddMemberModal && /* @__PURE__ */ (() => {
         const ModalComp = AddMemberModalComponent || AddMemberModal;
-        return /* @__PURE__ */ jsx37(
+        return /* @__PURE__ */ jsx38(
           ModalComp,
           {
             channel,
@@ -6394,7 +6578,7 @@ var ChannelInfo = React36.memo((props) => {
       })(),
       showEditChannelModal && /* @__PURE__ */ (() => {
         const EditComp = EditChannelModalComponent || EditChannelModal;
-        return /* @__PURE__ */ jsx37(
+        return /* @__PURE__ */ jsx38(
           EditComp,
           {
             channel,
@@ -6418,7 +6602,7 @@ var ChannelInfo = React36.memo((props) => {
         );
       })()
     ] }),
-    channel && showSearchPanel && /* @__PURE__ */ jsx37(
+    channel && showSearchPanel && /* @__PURE__ */ jsx38(
       MessageSearchPanel,
       {
         isOpen: showSearchPanel,
@@ -6427,7 +6611,7 @@ var ChannelInfo = React36.memo((props) => {
         AvatarComponent
       }
     ),
-    channel && showSettingsPanel && /* @__PURE__ */ jsx37(
+    channel && showSettingsPanel && /* @__PURE__ */ jsx38(
       ChannelSettingsPanel,
       {
         isOpen: showSettingsPanel,
@@ -6438,6 +6622,237 @@ var ChannelInfo = React36.memo((props) => {
   ] });
 });
 ChannelInfo.displayName = "ChannelInfo";
+
+// src/components/CreateChannelModal.tsx
+import { useState as useState34, useMemo as useMemo23, useCallback as useCallback24 } from "react";
+import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs34 } from "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] = useState34("messaging");
+  const [step, setStep] = useState34(1);
+  const [name, setName] = useState34("");
+  const [description, setDescription] = useState34("");
+  const [isPublic, setIsPublic] = useState34(false);
+  const [selectedUsers, setSelectedUsers] = useState34([]);
+  const [isCreating, setIsCreating] = useState34(false);
+  const [error, setError] = useState34(null);
+  const existingDirectUserIds = useMemo23(() => {
+    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 = useCallback24(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 = useMemo23(() => {
+    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__ */ jsxs34("div", { className: "ermis-create-channel__footer", children: [
+      /* @__PURE__ */ jsx39("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--cancel", onClick: onClose, disabled: isCreating, children: cancelButtonLabel }),
+      /* @__PURE__ */ jsx39("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__ */ jsxs34("div", { className: "ermis-create-channel__footer", children: [
+      /* @__PURE__ */ jsx39("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--cancel", onClick: onClose, disabled: isCreating, children: cancelButtonLabel }),
+      /* @__PURE__ */ jsx39("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__ */ jsxs34("div", { className: "ermis-create-channel__footer", children: [
+      /* @__PURE__ */ jsx39("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--cancel", onClick: () => {
+        setError(null);
+        setStep(1);
+      }, disabled: isCreating, children: "Back" }),
+      /* @__PURE__ */ jsx39("button", { className: "ermis-create-channel__btn ermis-create-channel__btn--create", onClick: handleCreate, disabled: isCreating || !isValid, children: isCreating ? creatingButtonLabel : createButtonLabel })
+    ] });
+  }
+  return /* @__PURE__ */ jsx39(Modal, { isOpen, onClose: isCreating ? () => {
+  } : onClose, title, maxWidth: "480px", footer, children: /* @__PURE__ */ jsxs34("div", { className: "ermis-create-channel__body", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "ermis-create-channel__tabs", children: [
+      /* @__PURE__ */ jsx39(
+        "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__ */ jsx39(
+        "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__ */ jsxs34(Fragment9, { children: [
+      /* @__PURE__ */ jsxs34("div", { className: "ermis-create-channel__field", children: [
+        /* @__PURE__ */ jsxs34("label", { className: "ermis-create-channel__label", children: [
+          groupNameLabel,
+          " ",
+          /* @__PURE__ */ jsx39("span", { style: { color: "var(--ermis-error)" }, children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx39(
+          "input",
+          {
+            className: "ermis-create-channel__input",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            placeholder: groupNamePlaceholder,
+            disabled: isCreating,
+            maxLength: 100
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs34("div", { className: "ermis-create-channel__field", children: [
+        /* @__PURE__ */ jsx39("label", { className: "ermis-create-channel__label", children: groupDescriptionLabel }),
+        /* @__PURE__ */ jsx39(
+          "textarea",
+          {
+            className: "ermis-create-channel__textarea",
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: groupDescriptionPlaceholder,
+            disabled: isCreating,
+            maxLength: 500,
+            rows: 2
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs34("div", { className: "ermis-create-channel__field ermis-create-channel__field--toggle", children: [
+        /* @__PURE__ */ jsx39("label", { className: "ermis-create-channel__label", children: groupPublicLabel }),
+        /* @__PURE__ */ jsx39(
+          "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__ */ jsx39("span", { className: "ermis-create-channel__toggle-thumb" })
+          }
+        )
+      ] })
+    ] }),
+    (tab === "team" && step === 2 || tab === "messaging") && /* @__PURE__ */ jsxs34("div", { className: "ermis-create-channel__users", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "ermis-create-channel__users-title", children: [
+        "Members ",
+        /* @__PURE__ */ jsx39("span", { style: { color: "var(--ermis-error)" }, children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx39("div", { style: { height: tab === "team" ? "280px" : "400px", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx39(
+        UserPicker,
+        {
+          mode: tab === "messaging" ? "radio" : "checkbox",
+          onSelectionChange: setSelectedUsers,
+          excludeUserIds: tab === "messaging" ? existingDirectUserIds : [],
+          initialSelectedUsers: selectedUsers,
+          AvatarComponent,
+          UserItemComponent,
+          searchPlaceholder: userSearchPlaceholder
+        }
+      ) })
+    ] }),
+    error && /* @__PURE__ */ jsxs34("div", { className: "ermis-create-channel__error", children: [
+      /* @__PURE__ */ jsxs34("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx39("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx39("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx39("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ] }),
+      error
+    ] })
+  ] }) });
+};
 export {
   AttachmentList,
   Avatar,
@@ -6447,6 +6862,7 @@ export {
   ChannelItem,
   ChannelList,
   ChatProvider,
+  CreateChannelModal,
   DefaultChannelInfoActions,
   DefaultChannelInfoCover,
   DefaultChannelInfoHeader,
@@ -6474,6 +6890,7 @@ export {
   SystemMessage,
   SystemMessageItem,
   TypingIndicator,
+  UserPicker,
   VirtualMessageList,
   closeAllDropdowns,
   dedupMessages,