@ermis-network/ermis-chat-react 1.0.6 → 1.0.8

package/src/components/ChannelInfo/ChannelSettingsPanel.tsx

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { Panel } from '../Panel';
+import { useChatClient } from '../../hooks/useChatClient';
 import type { ChannelSettingsPanelProps } from '../../types';
+import { isGroupChannel } from '../../channelTypeUtils';
+import { CHANNEL_ROLES } from '../../channelRoleUtils';
 
 export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.memo(({
   isOpen,
@@ -16,9 +19,18 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
     { label: '15m', value: 900000 },
     { label: '1h', value: 3600000 },
   ],
+  workspaceTopicsTitle = 'Workspace Topics',
+  topicsFeatureName = 'Topics',
+  topicsFeatureDescription = 'Enable sub-channels and discussions',
 }) => {
   // Config state
+  const { client } = useChatClient();
+  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,
@@ -43,6 +55,7 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
       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({
@@ -86,6 +99,7 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
 
   // 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(',');
@@ -104,7 +118,7 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
   };
   const isCapabilitiesChanged = Object.keys(capabilities).some(k => capabilities[k] !== initialCapabilities[k]);
 
-  const isDirty = isSlowModeChanged || isKeywordsChanged || isCapabilitiesChanged;
+  const isDirty = isSlowModeChanged || isKeywordsChanged || isCapabilitiesChanged || isTopicsChanged;
 
   const handleAddNewKeyword = () => {
     if (newKeyword.trim()) {
@@ -176,6 +190,15 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
         // 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');
@@ -422,6 +445,72 @@ export const ChannelSettingsPanel: React.FC<ChannelSettingsPanelProps> = React.m
           </div>
         </section>
 
+        {/* Section 3: Features */}
+        {isGroupChannel(channel) && (
+          <section
+            className="ermis-settings-panel__section"
+            style={{
+              background: 'var(--ermis-bg-primary)',
+              padding: '16px',
+              borderRadius: '12px',
+              boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+              border: '1px solid var(--ermis-border-color)'
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', gap: '8px' }}>
+              <div style={{ background: 'rgba(168, 85, 247, 0.1)', padding: '4px', borderRadius: '8px', color: '#a855f7' }}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
+                  <polyline points="2 17 12 22 22 17"></polyline>
+                  <polyline points="2 12 12 17 22 12"></polyline>
+                </svg>
+              </div>
+              <h4 style={{ fontSize: '14px', color: 'var(--ermis-text-primary)', fontWeight: 600, margin: 0 }}>
+                {workspaceTopicsTitle}
+              </h4>
+            </div>
+
+            <div className="ermis-settings-panel__toggles" style={{ display: 'flex', flexDirection: 'column' }}>
+              <div style={{ background: 'var(--ermis-bg-secondary)', borderRadius: '8px', overflow: 'hidden', border: '1px solid var(--ermis-border-color)' }}>
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '10px 14px',
+                  }}
+                >
+                  <div style={{ display: 'flex', flexDirection: 'column' }}>
+                    <span style={{ fontSize: '14px', fontWeight: 500, color: 'var(--ermis-text-primary)' }}>
+                      {topicsFeatureName}
+                    </span>
+                    <span style={{ fontSize: '12px', color: 'var(--ermis-text-secondary)', marginTop: '2px' }}>
+                      {topicsFeatureDescription}
+                    </span>
+                    {!isOwner && (
+                      <span style={{ fontSize: '11px', color: 'var(--ermis-color-danger)', marginTop: '4px', fontWeight: 500 }}>
+                        Only channel owner can change this.
+                      </span>
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    role="switch"
+                    aria-checked={topicsEnabled}
+                    className={`ermis-channel-info__edit-toggle ${topicsEnabled ? 'ermis-channel-info__edit-toggle--on' : ''}`}
+                    onClick={() => isOwner && setTopicsEnabled(!topicsEnabled)}
+                    disabled={isSaving || !isOwner}
+                    style={{ transform: 'scale(0.85)', transformOrigin: 'right center', cursor: (!isOwner || isSaving) ? 'not-allowed' : 'pointer' }}
+                  >
+                    <span className="ermis-channel-info__edit-toggle-thumb" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </section>
+        )}
+
+
       </div>
 
       {/* Footer Area */}

package/src/components/ChannelInfo/EditChannelModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { Modal } from '../Modal';
 import type { EditChannelModalProps, EditChannelData } from '../../types';
+import { isGroupChannel } from '../../channelTypeUtils';
 
 const DEFAULT_MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5MB
 
@@ -28,7 +29,7 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
   const originalImage = (channel.data?.image as string) || '';
   const originalDescription = (channel.data?.description as string) || '';
   const originalPublic = Boolean(channel.data?.public);
-  const isTeamChannel = channel.type === 'team';
+  const isTeamOrMeetingChannel = isGroupChannel(channel);
 
   // Form state
   const [name, setName] = useState(originalName);
@@ -92,7 +93,7 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
       payload.description = description.trim();
       hasChanges = true;
     }
-    if (isTeamChannel && isPublic !== originalPublic) {
+    if (isTeamOrMeetingChannel && isPublic !== originalPublic) {
       payload.public = isPublic;
       hasChanges = true;
     }
@@ -102,7 +103,7 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
     }
 
     return hasChanges ? payload : null;
-  }, [name, description, isPublic, selectedFile, originalName, originalDescription, originalPublic, isTeamChannel]);
+  }, [name, description, isPublic, selectedFile, originalName, originalDescription, originalPublic, isTeamOrMeetingChannel]);
 
   const handleSave = useCallback(async () => {
     const payload = buildPayload();
@@ -237,7 +238,7 @@ export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
         </div>
 
         {/* Public toggle — only for team channels */}
-        {isTeamChannel && (
+        {isTeamOrMeetingChannel && (
           <div className="ermis-channel-info__edit-field ermis-channel-info__edit-field--toggle">
             <label className="ermis-channel-info__edit-label">{publicLabel}</label>
             <button

package/src/components/ChannelInfo/MemberListItem.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Dropdown } from '../Dropdown';
 import type { ChannelInfoMemberItemProps } from '../../types';
+import { CHANNEL_ROLES } from '../../channelRoleUtils';
 
 export const MemberListItem = React.memo(({
   member, AvatarComponent, 
@@ -14,7 +15,7 @@ export const MemberListItem = React.memo(({
   const isOpen = anchorRect !== null;
 
   if (!member) return null;
-  const role = member.channel_role || 'member';
+  const role = member.channel_role || CHANNEL_ROLES.MEMBER;
   const hasActions = canRemove || canBan || canUnban || canPromote || canDemote;
 
   return (