@ermis-network/ermis-chat-react 1.0.9 → 2.0.1

package/src/components/ChannelInfo/ChannelInfoTabs.tsx

@@ -1,321 +1,83 @@
-import React, { useState, useEffect, useMemo, useCallback, useDeferredValue } from 'react';
-import { VList } from 'virtua';
-import { ROLE_WEIGHTS, MESSAGING_TABS, ALL_TABS, PENDING_STYLE, READY_STYLE } from './utils';
-import { useBannedState } from '../../hooks/useBannedState';
-import { useBlockedState } from '../../hooks/useBlockedState';
-import { MediaGridItem, MediaRow } from './MediaGridItem';
-import { LinkListItem } from './LinkListItem';
-import { FileListItem } from './FileListItem';
-import { MemberListItem } from './MemberListItem';
-import { TabEmptyState, TabLoadingState } from './States';
+import React from 'react';
+import { VList as _VList } from 'virtua';
+const VList = _VList as any;
+import { PENDING_STYLE, READY_STYLE } from './utils';
 import { MediaLightbox } from '../MediaLightbox';
-import type { ChannelInfoTabsProps, MediaTab, AttachmentItem, MediaLightboxItem } from '../../types';
-import { isDirectChannel } from '../../channelTypeUtils';
-import {
-  CHANNEL_ROLES,
-  canRemoveTargetMember,
-  canBanTargetMember,
-  canPromoteTargetMember,
-  canDemoteTargetMember
-} from '../../channelRoleUtils';
-
-export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo(({
-  channel,
-  members,
-  AvatarComponent,
-  currentUserId,
-  currentUserRole,
-  onAddMemberClick,
-  onRemoveMember,
-  onBanMember,
-  onUnbanMember,
-  onPromoteMember,
-  onDemoteMember,
-  addMemberButtonLabel = 'Add Member',
-  AddMemberButtonComponent,
-  MemberItemComponent,
-  MediaItemComponent,
-  LinkItemComponent,
-  FileItemComponent,
-  EmptyStateComponent,
-  LoadingComponent,
+import type { ChannelInfoTabsProps, ChannelInfoTabHeaderProps } from '../../types';
+import { useChannelInfoTabs } from './useChannelInfoTabs';
+
+/* =============================================
+   Component: DefaultChannelInfoTabHeader
+   Renders the tab buttons row.
+   ============================================= */
+
+export const DefaultChannelInfoTabHeader: React.FC<ChannelInfoTabHeaderProps> = React.memo(({
+  activeTab,
+  onTabChange,
+  availableTabs,
 }) => {
-  const isMessaging = isDirectChannel(channel);
-  const isTopic = Boolean(channel?.data?.parent_cid);
-  
-  const { isBanned } = useBannedState(channel, currentUserId);
-  const { isBlocked } = useBlockedState(channel, currentUserId);
-
-  const availableTabs: MediaTab[] = useMemo(() => {
-    let tabs = isMessaging ? MESSAGING_TABS : ALL_TABS;
-    if (isTopic) {
-      tabs = tabs.filter(t => t !== 'members');
-    }
-    return tabs;
-  }, [isMessaging, isTopic]);
-
-  const [activeTab, setActiveTab] = useState<MediaTab>(availableTabs[0]);
-  const contentTab = useDeferredValue(activeTab);
-  const isPending = activeTab !== contentTab;
-
-  // Always reset to the first available tab when the user switches channels
-  useEffect(() => {
-    setActiveTab(availableTabs[0]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channel?.cid, availableTabs]);
-
-  // Resolve sub-components with defaults
-  const MemberItem = MemberItemComponent || MemberListItem;
-  const MediaItem = MediaItemComponent || MediaGridItem;
-  const LinkItem = LinkItemComponent || LinkListItem;
-  const FileItem = FileItemComponent || FileListItem;
-  const EmptyState = EmptyStateComponent || TabEmptyState;
-  const Loading = LoadingComponent || TabLoadingState;
-
-  const [allAttachments, setAllAttachments] = useState<AttachmentItem[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  const sortedMembers = useMemo(() => {
-    return [...members].sort((a, b) => {
-      const aWeight = ROLE_WEIGHTS[a.channel_role || CHANNEL_ROLES.MEMBER] || 0;
-      const bWeight = ROLE_WEIGHTS[b.channel_role || CHANNEL_ROLES.MEMBER] || 0;
-      return bWeight - aWeight;
-    });
-  }, [members]);
-
-  // Categorize attachments by type
-  const mediaItems = useMemo(() =>
-    allAttachments.filter(a => a.attachment_type === 'image' || a.attachment_type === 'video'),
-    [allAttachments]
-  );
-
-  const linkItems = useMemo(() =>
-    allAttachments.filter(a => a.attachment_type === 'linkPreview'),
-    [allAttachments]
-  );
-
-  const fileItems = useMemo(() =>
-    allAttachments.filter(a => a.attachment_type === 'file' || a.attachment_type === 'voiceRecording'),
-    [allAttachments]
+  return (
+    <div className="ermis-channel-info__media-tabs">
+      {availableTabs.map(tab => (
+        <button
+          key={tab}
+          className={`ermis-channel-info__media-tab ${activeTab === tab ? 'ermis-channel-info__media-tab--active' : ''}`}
+          onClick={() => onTabChange(tab)}
+        >
+          <span className="ermis-channel-info__media-tab-label">
+            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+          </span>
+        </button>
+      ))}
+    </div>
   );
+});
+DefaultChannelInfoTabHeader.displayName = 'DefaultChannelInfoTabHeader';
 
-  useEffect(() => {
-    let active = true;
-
-    // Don't fetch media/files if user is banned or blocked
-    if (isBanned || isBlocked) {
-      setAllAttachments([]);
-      setLoading(false);
-      return;
-    }
-
-    const fetchMedia = async () => {
-      setLoading(true);
-      try {
-        const response: any = await channel.queryAttachmentMessages();
-
-        if (active) {
-          const items = response?.attachments || [];
-          setAllAttachments(items);
-        }
-      } catch (err) {
-        console.error("Failed to query media for channel info", err);
-        if (active) setAllAttachments([]);
-      } finally {
-        if (active) setLoading(false);
-      }
-    };
-
-    fetchMedia();
-
-    return () => { active = false; };
-  }, [channel, isBanned, isBlocked]);
-
-  const tabCounts = useMemo<Record<MediaTab, number>>(() => ({
-    members: members.length,
-    media: mediaItems.length,
-    links: linkItems.length,
-    files: fileItems.length,
-  }), [members.length, mediaItems.length, linkItems.length, fileItems.length]);
-
-  const handleOpenUrl = useCallback((url: string) => {
-    window.open(url, '_blank', 'noopener,noreferrer');
-  }, []);
-
-  // Lightbox state for media tab
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
-
-  const lightboxItems = useMemo<MediaLightboxItem[]>(() => {
-    return mediaItems.map(item => ({
-      type: (item.attachment_type === 'video' ? 'video' : 'image') as 'image' | 'video',
-      src: item.url,
-      alt: item.file_name,
-      posterSrc: item.thumb_url || undefined,
-    }));
-  }, [mediaItems]);
-
-  const handleMediaClick = useCallback((url: string) => {
-    const idx = mediaItems.findIndex(item => item.url === url);
-    if (idx >= 0) {
-      setLightboxIndex(idx);
-      setLightboxOpen(true);
-    }
-  }, [mediaItems]);
-
-  const closeLightbox = useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
-
-  // Group media into rows of 3 for grid layout inside VList
-  const mediaRows = useMemo(() => {
-    const rows: AttachmentItem[][] = [];
-    for (let i = 0; i < mediaItems.length; i += 3) {
-      rows.push(mediaItems.slice(i, i + 3));
-    }
-    return rows;
-  }, [mediaItems]);
-
-  // Build VList children based on contentTab (deferred)
-  const vlistChildren = useMemo(() => {
-    switch (contentTab) {
-      case 'members': {
-        const items: React.ReactNode[] = [];
-        if (onAddMemberClick) {
-          if (AddMemberButtonComponent) {
-            items.push(
-              <div key="__add-member__" className="ermis-channel-info__add-member-wrap">
-                <AddMemberButtonComponent onClick={onAddMemberClick} label={addMemberButtonLabel} />
-              </div>
-            );
-          } else {
-            items.push(
-              <div key="__add-member__" className="ermis-channel-info__add-member-wrap">
-                <button className="ermis-channel-info__add-member-btn" onClick={onAddMemberClick}>
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
-                    <circle cx="8.5" cy="7" r="4"></circle>
-                    <line x1="20" y1="8" x2="20" y2="14"></line>
-                    <line x1="23" y1="11" x2="17" y2="11"></line>
-                  </svg>
-                  {addMemberButtonLabel}
-                </button>
-              </div>
-            );
-          }
-        }
-        sortedMembers.forEach(member => {
-          const role = member.channel_role || CHANNEL_ROLES.MEMBER;
-          const isTargetRemovable = canRemoveTargetMember(currentUserRole, role);
-
-          const canRemove = Boolean(
-            isTargetRemovable &&
-            member.user_id !== currentUserId
-          );
-
-          const canBan = Boolean(
-            canBanTargetMember(currentUserRole, role) &&
-            member.user_id !== currentUserId &&
-            !member.banned
-          );
-
-          const canUnban = Boolean(
-            canBanTargetMember(currentUserRole, role) &&
-            member.user_id !== currentUserId &&
-            member.banned
-          );
-
-          const canPromote = canPromoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
-
-          const canDemote = canDemoteTargetMember(currentUserRole, role) && member.user_id !== currentUserId;
+/* =============================================
+   Component: DefaultChannelInfoTabs
+   Self-contained tabs component with internal VList.
+   Kept for backward compatibility.
+   ============================================= */
 
-          items.push(
-            <MemberItem
-              key={member?.user_id}
-              member={member}
-              AvatarComponent={AvatarComponent}
-              onRemove={onRemoveMember}
-              canRemove={canRemove}
-              onBan={onBanMember}
-              canBan={canBan}
-              onUnban={onUnbanMember}
-              canUnban={canUnban}
-              onPromote={onPromoteMember}
-              canPromote={canPromote}
-              onDemote={onDemoteMember}
-              canDemote={canDemote}
-            />
-          );
-        });
-        return items;
-      }
-      case 'media':
-        if (MediaItem === MediaGridItem) {
-          // Default: use grid rows
-          return mediaRows.map((row, rowIdx) => (
-            <MediaRow key={row[0]?.id || rowIdx} row={row} onClick={handleMediaClick} />
-          ));
-        }
-        // Custom: render each item individually
-        return mediaItems.map((item, idx) => (
-          <MediaItem key={item.id || idx} item={item} onClick={handleMediaClick} />
-        ));
-      case 'links':
-        return linkItems.map((item, idx) => (
-          <LinkItem key={item.id || idx} item={item} />
-        ));
-      case 'files':
-        return fileItems.map((item, idx) => (
-          <FileItem key={item.id || idx} item={item} onClick={handleOpenUrl} />
-        ));
-      default:
-        return [];
-    }
-  }, [contentTab, sortedMembers, mediaRows, mediaItems, linkItems, fileItems, onAddMemberClick, AvatarComponent, handleMediaClick, handleOpenUrl, MemberItem, MediaItem, LinkItem, FileItem]);
+export const DefaultChannelInfoTabs: React.FC<ChannelInfoTabsProps> = React.memo((props) => {
+  const {
+    TabHeaderComponent,
+  } = props;
 
-  // Check if content is empty for the content tab (deferred)
-  const isTabEmpty = vlistChildren.length === 0 && !(loading && contentTab !== 'members');
-  const emptyLabel = contentTab === 'members' ? 'members' : contentTab;
+  const tabs = useChannelInfoTabs(props);
+  const TabHeader = TabHeaderComponent || DefaultChannelInfoTabHeader;
 
   return (
     <div className="ermis-channel-info__section ermis-channel-info__media-section">
-      <div className="ermis-channel-info__media-tabs">
-        {availableTabs.map(tab => (
-          <button
-            key={tab}
-            className={`ermis-channel-info__media-tab ${activeTab === tab ? 'ermis-channel-info__media-tab--active' : ''}`}
-            onClick={() => setActiveTab(tab)}
-          >
-            <span className="ermis-channel-info__media-tab-label">
-              {tab.charAt(0).toUpperCase() + tab.slice(1)}
-            </span>
-            {tabCounts[tab] > 0 && (
-              <span className="ermis-channel-info__media-tab-count">{tabCounts[tab]}</span>
-            )}
-          </button>
-        ))}
-      </div>
+      <TabHeader
+        activeTab={tabs.activeTab}
+        onTabChange={tabs.handleTabChange}
+        availableTabs={tabs.availableTabs}
+        tabCounts={{} as any}
+      />
 
       <div
         className="ermis-channel-info__media-content"
-        style={isPending ? PENDING_STYLE : READY_STYLE}
+        style={tabs.isPending ? PENDING_STYLE : READY_STYLE}
       >
-        {loading && contentTab !== 'members' ? <Loading /> : isTabEmpty ? <EmptyState label={emptyLabel} /> : (
-          <VList style={{ height: '100%' }}>
-            {vlistChildren}
+        {tabs.isPending || (tabs.loading && tabs.contentTab !== 'members') ? <tabs.Loading /> : tabs.isTabEmpty ? <tabs.EmptyState label={tabs.emptyLabel} /> : (
+          <VList data={tabs.vlistData}>
+            {tabs.renderVlistItem}
           </VList>
         )}
       </div>
 
       {/* Media Lightbox */}
-      {lightboxItems.length > 0 && (
+      {tabs.lightboxItems.length > 0 && (
         <MediaLightbox
-          items={lightboxItems}
-          initialIndex={lightboxIndex}
-          isOpen={lightboxOpen}
-          onClose={closeLightbox}
+          items={tabs.lightboxItems}
+          initialIndex={tabs.lightboxIndex}
+          isOpen={tabs.lightboxOpen}
+          onClose={tabs.closeLightbox}
         />
       )}
     </div>
   );
 });
+DefaultChannelInfoTabs.displayName = 'DefaultChannelInfoTabs';

package/src/components/ChannelInfo/ChannelSettingsPanel.tsx

@@ -1,10 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { Panel } from '../Panel';
+import { Panel as DefaultPanel } from '../Panel';
+import { useChatComponents } from '../../context/ChatComponentsContext';
 import { useChatClient } from '../../hooks/useChatClient';
 import type { ChannelSettingsPanelProps } from '../../types';
 import { isGroupChannel } from '../../channelTypeUtils';
 import { CHANNEL_ROLES } from '../../channelRoleUtils';
 
+import { useChannelSettings } from './useChannelSettings';
+
 export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.memo(({
   isOpen,
   onClose,
@@ -21,115 +24,38 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
   ],
   workspaceTopicsTitle = 'Workspace Topics',
   topicsFeatureName = 'Topics',
-  topicsFeatureDescription = 'Enable sub-channels and discussions',
+  topicsFeatureDescription = 'Allow users to reply to messages with dedicated conversation threads. Disabling this hides the reply-in-topic button for everyone.',
 }) => {
-  // Config state
   const { client } = useChatClient();
+  const { PanelComponent } = useChatComponents();
+  const Panel = PanelComponent || DefaultPanel;
   const currentUserId = client?.userID;
   const currentUserRole = currentUserId ? channel?.state?.members?.[currentUserId]?.channel_role : undefined;
-  const isOwner = currentUserRole === CHANNEL_ROLES.OWNER;
 
-  const [slowMode, setSlowMode] = useState<number>(0);
-  const [topicsEnabled, setTopicsEnabled] = useState<boolean>(false);
-  const [capabilities, setCapabilities] = useState<Record<string, boolean>>({
-    'send-message': true,
-    'send-links': true,
-    'update-own-message': true,
-    'delete-own-message': true,
-    'send-reaction': true,
-    'pin-message': true,
-    'create-poll': true,
-    'vote-poll': true,
+  const {
+    slowMode,
+    setSlowMode,
+    topicsEnabled,
+    setTopicsEnabled,
+    capabilities,
+    toggleCapability,
+    keywords,
+    newKeyword,
+    setNewKeyword,
+    handleAddNewKeyword,
+    handleRemoveKeyword,
+    isSaving,
+    error,
+    isDirty,
+    isOwner,
+    handleSave,
+  } = useChannelSettings({
+    channel: channel as any,
+    isOpen,
+    onClose,
+    currentUserRole,
   });
 
-  const [keywords, setKeywords] = useState<string[]>([]);
-  const [newKeyword, setNewKeyword] = useState('');
-  const [isSaving, setIsSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Sync state when panel opens or channel updates
-  useEffect(() => {
-    if (!channel) return;
-
-    const syncData = (dataToSync = channel.data) => {
-      console.log('---syncData---', dataToSync);
-      setSlowMode((dataToSync?.member_message_cooldown as number) || 0);
-      setKeywords((dataToSync?.filter_words as string[]) || []);
-      setTopicsEnabled(dataToSync?.topics_enabled === true);
-
-      const caps = dataToSync?.member_capabilities as string[] || [];
-      setCapabilities({
-        'send-message': caps.includes('send-message'),
-        'send-links': caps.includes('send-links'),
-        'update-own-message': caps.includes('update-own-message'),
-        'delete-own-message': caps.includes('delete-own-message'),
-        'send-reaction': caps.includes('send-reaction'),
-        'pin-message': caps.includes('pin-message'),
-        'create-poll': caps.includes('create-poll'),
-        'vote-poll': caps.includes('vote-poll'),
-      });
-      setError(null);
-    };
-
-    if (isOpen) {
-      syncData();
-    }
-
-    // Listen to real-time changes
-    const subscription = channel.on('channel.updated', (event: any) => {
-      const latestData = event?.channel || channel.data;
-      // Force mutating local channel.data to ensure future syncData hits cache
-      if (event?.channel && channel.data) {
-        Object.assign(channel.data, event.channel);
-      }
-
-      if (isOpen) {
-        syncData(latestData);
-      }
-    });
-
-    return () => {
-      subscription?.unsubscribe();
-    };
-  }, [isOpen, channel]);
-
-  const toggleCapability = (key: string) => {
-    setCapabilities(prev => ({ ...prev, [key]: !prev[key] }));
-  };
-
-  // Compute dirty state
-  const isSlowModeChanged = slowMode !== ((channel?.data?.member_message_cooldown as number) || 0);
-  const isTopicsChanged = topicsEnabled !== (channel?.data?.topics_enabled === true);
-
-  const currentKeywordsSorted = [...keywords].sort().join(',');
-  const originalKeywordsSorted = [...((channel?.data?.filter_words as string[]) || [])].sort().join(',');
-  const isKeywordsChanged = currentKeywordsSorted !== originalKeywordsSorted;
-
-  const originalCapabilities = channel?.data?.member_capabilities as string[] || [];
-  const initialCapabilities: Record<string, boolean> = {
-    'send-message': originalCapabilities.includes('send-message'),
-    'send-links': originalCapabilities.includes('send-links'),
-    'update-own-message': originalCapabilities.includes('update-own-message'),
-    'delete-own-message': originalCapabilities.includes('delete-own-message'),
-    'send-reaction': originalCapabilities.includes('send-reaction'),
-    'pin-message': originalCapabilities.includes('pin-message'),
-    'create-poll': originalCapabilities.includes('create-poll'),
-    'vote-poll': originalCapabilities.includes('vote-poll'),
-  };
-  const isCapabilitiesChanged = Object.keys(capabilities).some(k => capabilities[k] !== initialCapabilities[k]);
-
-  const isDirty = isSlowModeChanged || isKeywordsChanged || isCapabilitiesChanged || isTopicsChanged;
-
-  const handleAddNewKeyword = () => {
-    if (newKeyword.trim()) {
-      const keyword = newKeyword.trim().toLowerCase();
-      if (!keywords.includes(keyword)) {
-        setKeywords(prev => [...prev, keyword]);
-      }
-      setNewKeyword('');
-    }
-  };
-
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -137,76 +63,6 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
     }
   };
 
-  const handeRemoveKeyword = (kw: string) => {
-    setKeywords(prev => prev.filter(k => k !== kw));
-  };
-
-  const handleSave = async () => {
-    if (!channel) return;
-    setIsSaving(true);
-    setError(null);
-    try {
-      const dataUpdates: any = {};
-      let capabilitiesArray: string[] | null = null;
-
-      if (isSlowModeChanged) {
-        dataUpdates.member_message_cooldown = slowMode;
-      }
-
-      if (isKeywordsChanged) {
-        dataUpdates.filter_words = keywords;
-      }
-
-      if (isCapabilitiesChanged) {
-        const controlledKeys = Object.keys(capabilities);
-        const originalCaps = (channel.data?.member_capabilities as string[]) || [];
-
-        // Preserve unmanaged original capabilities (e.g. create-call, join-call)
-        const unmanagedCaps = originalCaps.filter(c => !controlledKeys.includes(c));
-
-        // Extract managed capabilities that are currently enabled (true)
-        const managedEnabledCaps = controlledKeys.filter(k => capabilities[k as keyof typeof capabilities]);
-
-        // Merge into the final payload array
-        capabilitiesArray = [...unmanagedCaps, ...managedEnabledCaps];
-      }
-
-      if (Object.keys(dataUpdates).length > 0 || capabilitiesArray !== null) {
-        const payload: any = {};
-
-        if (Object.keys(dataUpdates).length > 0) {
-          payload.data = dataUpdates;
-          if (channel.data) Object.assign(channel.data, dataUpdates);
-        }
-
-        if (capabilitiesArray !== null) {
-          payload.capabilities = capabilitiesArray;
-          if (channel.data) {
-            // Local fallback naming to keep UI synchronous
-            channel.data.member_capabilities = capabilitiesArray;
-          }
-        }
-
-        // Use _update instead of update to safely construct root-level payloads
-        await (channel as any)._update(payload);
-      }
-
-      if (isTopicsChanged) {
-        if (topicsEnabled) {
-          await channel.enableTopics();
-        } else {
-          await channel.disableTopics();
-        }
-      }
-
-      onClose();
-    } catch (err: any) {
-      setError(err?.message || 'Failed to update settings');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
   // We do NOT return null based on !isOpen so the sliding CSS transition is preserved.
   return (
     <Panel isOpen={isOpen} onClose={onClose} title={title} className="ermis-settings-panel">
@@ -415,7 +271,7 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
               >
                 {kw}
                 <button
-                  onClick={() => handeRemoveKeyword(kw)}
+                  onClick={() => handleRemoveKeyword(kw)}
                   style={{
                     display: 'flex',
                     alignItems: 'center',

package/src/components/ChannelInfo/EditChannelModal.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
+import { useChatComponents } from '../../context/ChatComponentsContext';
 import type { EditChannelModalProps, EditChannelData } from '../../types';
 import { isGroupChannel } from '../../channelTypeUtils';
 
@@ -30,6 +31,8 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
   const originalDescription = (channel.data?.description as string) || '';
   const originalPublic = Boolean(channel.data?.public);
   const isTeamOrMeetingChannel = isGroupChannel(channel);
+  const { ModalComponent } = useChatComponents();
+  const Modal = ModalComponent || DefaultModal;
 
   // Form state
   const [name, setName] = useState(originalName);
@@ -119,7 +122,7 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
       // If consumer provides custom save handler, delegate entirely
       if (onSave) {
         if (selectedFile) {
-          const response = await channel.sendFile(selectedFile, selectedFile.name, selectedFile.type);
+          const response = await channel.uploadFilePresigned(selectedFile, selectedFile.name, selectedFile.type);
           (payload || {} as EditChannelData).image = response.file;
         }
         await onSave(payload || {});
@@ -132,7 +135,7 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
 
       // Upload image if changed
       if (selectedFile) {
-        const response = await channel.sendFile(selectedFile, selectedFile.name, selectedFile.type);
+        const response = await channel.uploadFilePresigned(selectedFile, selectedFile.name, selectedFile.type);
         finalPayload.image = response.file;
       }