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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ermis-network/ermis-chat-react",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "React UI components for Ermis Chat",
   "author": "Ermis",
   "homepage": "https://ermis.network/",
@@ -20,7 +20,7 @@
     "/src"
   ],
   "dependencies": {
-    "@ermis-network/ermis-chat-sdk": "1.0.6",
+    "@ermis-network/ermis-chat-sdk": "1.0.8",
     "virtua": "^0.48.8"
   },
   "peerDependencies": {

package/src/channelRoleUtils.ts

@@ -0,0 +1,73 @@
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { isDirectChannel } from './channelTypeUtils';
+
+export const CHANNEL_ROLES = {
+  OWNER: 'owner',
+  MODERATOR: 'moder',
+  MEMBER: 'member',
+  PENDING: 'pending',
+  SKIPPED: 'skipped',
+} as const;
+
+export type ChannelRole = typeof CHANNEL_ROLES[keyof typeof CHANNEL_ROLES] | string;
+
+/** Checks if the user is in a pending state */
+export function isPendingMember(role?: string): boolean {
+  return role === CHANNEL_ROLES.PENDING;
+}
+
+/** Checks if the user is in a skipped state (skipped a direct message invite) */
+export function isSkippedMember(role?: string): boolean {
+  return role === CHANNEL_ROLES.SKIPPED;
+}
+
+/** Checks if the user has management permissions (owner or moderator) */
+export function canManageChannel(role?: string): boolean {
+  return role === CHANNEL_ROLES.OWNER || role === CHANNEL_ROLES.MODERATOR;
+}
+
+/** Determines if the current user has the permission to remove a specific target member */
+export function canRemoveTargetMember(currentUserRole?: string, targetRole?: string): boolean {
+  const isTargetRemovable =
+    targetRole === CHANNEL_ROLES.MEMBER ||
+    targetRole === CHANNEL_ROLES.PENDING ||
+    (currentUserRole === CHANNEL_ROLES.OWNER && targetRole === CHANNEL_ROLES.MODERATOR);
+  
+  return canManageChannel(currentUserRole) && isTargetRemovable;
+}
+
+/** Determines if the current user has the permission to ban a specific target member */
+export function canBanTargetMember(currentUserRole?: string, targetRole?: string): boolean {
+  return canRemoveTargetMember(currentUserRole, targetRole) && targetRole !== CHANNEL_ROLES.PENDING;
+}
+
+/** Determines if the current user has the permission to promote a member to moderator */
+export function canPromoteTargetMember(currentUserRole?: string, targetRole?: string): boolean {
+  return currentUserRole === CHANNEL_ROLES.OWNER && targetRole === CHANNEL_ROLES.MEMBER;
+}
+
+/** Determines if the current user has the permission to demote a moderator to simple member */
+export function canDemoteTargetMember(currentUserRole?: string, targetRole?: string): boolean {
+  return currentUserRole === CHANNEL_ROLES.OWNER && targetRole === CHANNEL_ROLES.MODERATOR;
+}
+
+/** Checks if the user is an owner of the channel */
+export function isOwnerMember(role?: string): boolean {
+  return role === CHANNEL_ROLES.OWNER;
+}
+
+/**
+ * Checks if a direct channel represents a "friend" relationship:
+ * both members must have the 'owner' channel_role.
+ */
+export function isFriendChannel(
+  channel: Channel | null | undefined,
+  targetUserId: string,
+  currentUserId: string,
+): boolean {
+  if (!channel || !isDirectChannel(channel)) return false;
+  const targetMember = channel.state?.members?.[targetUserId];
+  const currentMember = channel.state?.members?.[currentUserId];
+  return isOwnerMember(targetMember?.channel_role as string)
+      && isOwnerMember(currentMember?.channel_role as string);
+}

package/src/channelTypeUtils.ts

@@ -0,0 +1,46 @@
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+
+// ─── Group Channel Types ───────────────────────────
+// Types that behave like group/team channels (roles, capabilities, settings, topics)
+const GROUP_CHANNEL_TYPES = new Set(['team', 'meeting']);
+
+// ─── Direct Channel Types ──────────────────────────
+// Types that behave like 1-on-1 direct messaging (block/unblock)
+const DIRECT_CHANNEL_TYPES = new Set(['messaging']);
+
+// ─── Semantic Helpers ──────────────────────────────
+
+/** Channel supports group features: roles, capabilities, settings, topics, edit, delete */
+export function isGroupChannel(channel: Channel | null | undefined): boolean {
+  return channel ? GROUP_CHANNEL_TYPES.has(channel.type) : false;
+}
+
+/** Channel is a direct (1-on-1) conversation: block/unblock, no roles */
+export function isDirectChannel(channel: Channel | null | undefined): boolean {
+  return channel ? DIRECT_CHANNEL_TYPES.has(channel.type) : false;
+}
+
+/** Channel is a topic (sub-channel of a group channel) */
+export function isTopicChannel(channel: Channel | null | undefined): boolean {
+  return channel ? (channel.type === 'topic' || Boolean(channel.data?.parent_cid)) : false;
+}
+
+/** Channel is a public group that users can join without invite */
+export function isPublicGroupChannel(channel: Channel | null | undefined): boolean {
+  return isGroupChannel(channel) && Boolean(channel?.data?.public);
+}
+
+/** The proxy "general" channel of a topics-enabled group */
+export function isGeneralProxy(channel: Channel | null | undefined): boolean {
+  return isGroupChannel(channel) && channel?.data?.name === 'general';
+}
+
+/** Channel has topics feature enabled */
+export function hasTopicsEnabled(channel: Channel | null | undefined): boolean {
+  return isGroupChannel(channel) && Boolean(channel?.data?.topics_enabled);
+}
+
+/** Whether blocked state is relevant for this channel type */
+export function supportsBlocking(channel: Channel | null | undefined): boolean {
+  return isDirectChannel(channel);
+}

package/src/components/Avatar.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
+import { MediaLightbox } from './MediaLightbox';
 import type { AvatarProps } from '../types';
 
 export type { AvatarProps } from '../types';
@@ -24,9 +25,11 @@ export const Avatar: React.FC<AvatarProps> = React.memo(({
   name,
   size = 36,
   className,
+  disableLightbox,
 }) => {
-  const [isLoaded, setIsLoaded] = React.useState(false);
-  const [hasError, setHasError] = React.useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
   const imgRef = React.useRef<HTMLImageElement>(null);
 
   // Reset state if image URL changes
@@ -54,7 +57,8 @@ export const Avatar: React.FC<AvatarProps> = React.memo(({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-  }), [size]);
+    cursor: image && !hasError && !disableLightbox ? 'pointer' : undefined,
+  }), [size, image, hasError, disableLightbox]);
 
   const contentStyle = useMemo<React.CSSProperties>(() => ({
     width: '100%',
@@ -63,39 +67,61 @@ export const Avatar: React.FC<AvatarProps> = React.memo(({
     lineHeight: 1,
   }), [size]);
 
+  const handleAvatarClick = React.useCallback((e: React.MouseEvent) => {
+    if (image && !hasError && !disableLightbox) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsLightboxOpen(true);
+    }
+  }, [image, hasError, disableLightbox]);
+
   return (
-    <div className={`ermis-avatar-wrapper${className ? ` ${className}` : ''}`} style={wrapperStyle}>
-      {/* 1. Underlying Fallback (Placeholder) */}
-      <div
-        className="ermis-avatar ermis-avatar--fallback"
-        style={contentStyle}
-        title={name}
+    <>
+      <div 
+        className={`ermis-avatar-wrapper${className ? ` ${className}` : ''}`} 
+        style={wrapperStyle}
+        onClick={handleAvatarClick}
       >
-        {initials}
+        {/* 1. Underlying Fallback (Placeholder) */}
+        <div
+          className="ermis-avatar ermis-avatar--fallback"
+          style={contentStyle}
+          title={name}
+        >
+          {initials}
+        </div>
+
+        {/* 2. Actual Image (Lazy, Fades in natively using CSS opacity) */}
+        {image && !hasError && (
+          <img
+            ref={imgRef}
+            className="ermis-avatar__img"
+            src={image}
+            alt={name || 'Avatar'}
+            loading="lazy"
+            onLoad={() => setIsLoaded(true)}
+            onError={() => setHasError(true)}
+            style={{
+              ...contentStyle,
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              opacity: isLoaded ? 1 : 0,
+              transition: 'opacity 0.3s ease-in-out',
+              objectFit: 'cover',
+            }}
+          />
+        )}
       </div>
 
-      {/* 2. Actual Image (Lazy, Fades in natively using CSS opacity) */}
-      {image && !hasError && (
-        <img
-          ref={imgRef}
-          className="ermis-avatar__img"
-          src={image}
-          alt={name || 'Avatar'}
-          loading="lazy"
-          onLoad={() => setIsLoaded(true)}
-          onError={() => setHasError(true)}
-          style={{
-            ...contentStyle,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            opacity: isLoaded ? 1 : 0,
-            transition: 'opacity 0.3s ease-in-out',
-            objectFit: 'cover',
-          }}
+      {isLightboxOpen && image && !hasError && (
+        <MediaLightbox
+          items={[{ type: 'image', src: image, alt: name || 'Avatar' }]}
+          isOpen={isLightboxOpen}
+          onClose={() => setIsLightboxOpen(false)}
         />
       )}
-    </div>
+    </>
   );
 });
 

package/src/components/BannedOverlay.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export type BannedOverlayProps = {
+  isBlocked?: boolean;
+  blockedTitle: string;
+  bannedTitle: string;
+  blockedSubtitle: string;
+  bannedSubtitle: string;
+  onUnblock?: () => void;
+};
+
+export const BannedOverlay: React.FC<BannedOverlayProps> = React.memo(({
+  isBlocked,
+  blockedTitle,
+  bannedTitle,
+  blockedSubtitle,
+  bannedSubtitle,
+  onUnblock,
+}) => (
+  <div className="ermis-message-list__banned-overlay">
+    <div className="ermis-message-list__banned-overlay-icon">
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+      </svg>
+    </div>
+    <span className="ermis-message-list__banned-overlay-title">{isBlocked ? blockedTitle : bannedTitle}</span>
+    <span className="ermis-message-list__banned-overlay-subtitle">{isBlocked ? blockedSubtitle : bannedSubtitle}</span>
+    {isBlocked && onUnblock && (
+      <button
+        className="ermis-message-list__unblock-btn"
+        onClick={onUnblock}
+      >
+        Unblock
+      </button>
+    )}
+  </div>
+));
+
+BannedOverlay.displayName = 'BannedOverlay';

package/src/components/ChannelActions.tsx

@@ -0,0 +1,233 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import type { ChannelAction, ChannelActionLabels, ChannelActionIcons, ChannelActionsProps } from '../types';
+import { Dropdown } from './Dropdown';
+import { isDirectChannel, isGroupChannel, isTopicChannel } from '../channelTypeUtils';
+import { canManageChannel, CHANNEL_ROLES } from '../channelRoleUtils';
+
+/* ----------------------------------------------------------
+   SVG Icons for default actions
+   ---------------------------------------------------------- */
+const PinIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" /><path d="M9 15l-4.5 4.5" /><path d="M14.5 4l5.5 5.5" /></svg>);
+const UnpinIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" /><path d="M9 15l-4.5 4.5" /><path d="M14.5 4l5.5 5.5" /><line x1="3" y1="3" x2="21" y2="21" /></svg>);
+const BlockIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><line x1="4.93" y1="4.93" x2="19.07" y2="19.07" /></svg>);
+const LeaveIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" /></svg>);
+const TrashIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 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" /></svg>);
+const LockIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>);
+const UnlockIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 9.9-1" /></svg>);
+const CreateTopicIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>);
+const EditIcon = () => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>);
+const MoreIcon = () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg>);
+
+/* ----------------------------------------------------------
+   computeDefaultActions
+   Derives a list of ChannelAction[] based on channel type
+   and the current user's role. Currently actions only log
+   to console — real API calls will be wired later.
+   ---------------------------------------------------------- */
+export function computeDefaultActions(
+  channel: Channel,
+  currentUserId?: string,
+  options?: {
+    onAddTopic?: (channel: Channel) => void;
+    onEditTopic?: (channel: Channel) => void;
+    onToggleCloseTopic?: (channel: Channel, isClosed: boolean) => void;
+    isBlocked?: boolean;
+    actionLabels?: ChannelActionLabels;
+    actionIcons?: ChannelActionIcons;
+  },
+): ChannelAction[] {
+  const actions: ChannelAction[] = [];
+  if (!currentUserId) return actions;
+
+  const isDirect = isDirectChannel(channel);
+  const isTeamOrMeeting = isGroupChannel(channel);
+  const isTopic = isTopicChannel(channel);
+  const isClosed = channel.data?.is_closed_topic === true;
+
+  const ms = channel.state?.members?.[currentUserId] || channel.state?.membership;
+  const role = ms?.channel_role;
+  const isBlocked = options?.isBlocked !== undefined ? options.isBlocked : (ms as any)?.blocked;
+  const isPinned = channel.data?.is_pinned === true;
+
+  // Pin / Unpin — available for all channel types
+  const actionLabels = options?.actionLabels;
+
+  const pinLabel = isPinned
+    ? (isTopic ? (actionLabels?.unpinTopic || 'Unpin topic') : (actionLabels?.unpinChannel || 'Unpin channel'))
+    : (isTopic ? (actionLabels?.pinTopic || 'Pin topic') : (actionLabels?.pinChannel || 'Pin channel'));
+
+  const actionIcons = options?.actionIcons;
+
+  const pinIcon = isPinned
+    ? (actionIcons?.UnpinIcon || <UnpinIcon />)
+    : (actionIcons?.PinIcon || <PinIcon />);
+
+  actions.push({
+    id: isPinned ? 'unpin' : 'pin',
+    label: pinLabel,
+    icon: pinIcon,
+    onClick: async (ch) => {
+      try {
+        if (isPinned) {
+          await ch.unpin();
+        } else {
+          await ch.pin();
+        }
+      } catch (e) {
+        console.error('Error toggling pin state', e);
+      }
+    },
+  });
+
+  if (isDirect) {
+    // Direct channel: Block / Unblock
+    actions.push({
+      id: isBlocked ? 'unblock' : 'block',
+      label: isBlocked ? (actionLabels?.unblockUser || 'Unblock user') : (actionLabels?.blockUser || 'Block user'),
+      icon: isBlocked ? (actionIcons?.UnblockIcon || <BlockIcon />) : (actionIcons?.BlockIcon || <BlockIcon />),
+      isDanger: !isBlocked,
+      onClick: async (ch) => {
+        try {
+          if (isBlocked) {
+            await ch.unblockUser();
+          } else {
+            await ch.blockUser();
+          }
+        } catch (e) {
+          console.error('Error toggling block state', e);
+        }
+      },
+    });
+  } else if (isTopic) {
+    // Topic: Edit topic (owner & moder only)
+    if (canManageChannel(role)) {
+      actions.push({
+        id: 'edit_topic',
+        label: actionLabels?.editTopic || 'Edit topic',
+        icon: actionIcons?.EditTopicIcon || <EditIcon />,
+        onClick: (ch) => {
+          options?.onEditTopic?.(ch);
+        },
+      });
+    }
+    // Topic: Close / Reopen (owner & moder only)
+    if (canManageChannel(role)) {
+      actions.push({
+        id: isClosed ? 'reopen' : 'close',
+        label: isClosed ? (actionLabels?.reopenTopic || 'Reopen topic') : (actionLabels?.closeTopic || 'Close topic'),
+        icon: isClosed ? (actionIcons?.ReopenTopicIcon || <UnlockIcon />) : (actionIcons?.CloseTopicIcon || <LockIcon />),
+        isDanger: !isClosed,
+        onClick: (ch) => {
+          options?.onToggleCloseTopic?.(ch, isClosed);
+        },
+      });
+    }
+  } else if (isTeamOrMeeting) {
+    // Team channel: Create Topic (owner & moder, only if topics enabled)
+    const hasTopicsEnabled = Boolean(channel.data?.topics_enabled);
+    if (hasTopicsEnabled && canManageChannel(role) && options?.onAddTopic) {
+      actions.push({
+        id: 'create_topic',
+        label: actionLabels?.createTopic || 'Create topic',
+        icon: actionIcons?.CreateTopicIcon || <CreateTopicIcon />,
+        onClick: (ch) => { options.onAddTopic!(ch); },
+      });
+    }
+    if (role === CHANNEL_ROLES.OWNER) {
+      actions.push({
+        id: 'delete',
+        label: actionLabels?.deleteChannel || 'Delete channel',
+        icon: actionIcons?.DeleteChannelIcon || <TrashIcon />,
+        isDanger: true,
+        onClick: async (ch) => {
+          try {
+            await ch.delete();
+          } catch (e) {
+            console.error('Error deleting channel', e);
+          }
+        },
+      });
+    }
+    if (role === CHANNEL_ROLES.MODERATOR || role === CHANNEL_ROLES.MEMBER) {
+      actions.push({
+        id: 'leave',
+        label: actionLabels?.leaveChannel || 'Leave channel',
+        icon: actionIcons?.LeaveChannelIcon || <LeaveIcon />,
+        isDanger: true,
+        onClick: async (ch) => {
+          try {
+            await ch.removeMembers([currentUserId]);
+          } catch (e) {
+            console.error('Error leaving channel', e);
+          }
+        },
+      });
+    }
+  }
+
+  return actions;
+}
+
+/* ----------------------------------------------------------
+   DefaultChannelActions
+   The default UI component that renders the "more" trigger
+   button and the dropdown menu. Consumer can fully replace
+   this via ChannelActionsComponent prop.
+   ---------------------------------------------------------- */
+export const DefaultChannelActions: React.FC<ChannelActionsProps> = React.memo(({ channel, actions, onClose }) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null);
+
+  const handleActionsClick = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setAnchorRect(e.currentTarget.getBoundingClientRect());
+    setDropdownOpen(true);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setDropdownOpen(false);
+    setAnchorRect(null);
+    onClose();
+  }, [onClose]);
+
+  if (!actions || actions.length === 0) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`ermis-channel-list__actions-trigger ${dropdownOpen ? 'ermis-channel-list__actions-trigger--active' : ''}`}
+        onClick={handleActionsClick}
+        title="More actions"
+      >
+        <MoreIcon />
+      </button>
+      <Dropdown
+        isOpen={dropdownOpen}
+        anchorRect={anchorRect}
+        onClose={handleClose}
+        align="right"
+      >
+        <div className="ermis-dropdown__menu">
+          {actions.map((action) => (
+            <button
+              key={action.id}
+              className={`ermis-dropdown__item ${action.isDanger ? 'ermis-dropdown__item--danger' : ''}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleClose();
+                action.onClick(channel, e);
+              }}
+            >
+              {action.icon}
+              <span>{action.label}</span>
+            </button>
+          ))}
+        </div>
+      </Dropdown>
+    </>
+  );
+});
+
+DefaultChannelActions.displayName = 'DefaultChannelActions';