@ermis-network/ermis-chat-react 1.0.0

package/src/components/ChannelInfo/EditChannelModal.tsx

@@ -0,0 +1,272 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { Modal } from '../Modal';
+import type { EditChannelModalProps, EditChannelData } from '../../types';
+
+const DEFAULT_MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export const EditChannelModal: React.FC<EditChannelModalProps> = React.memo(({
+  channel,
+  onClose,
+  onSave,
+  AvatarComponent,
+  title = 'Edit Channel',
+  nameLabel = 'Channel Name',
+  descriptionLabel = 'Description',
+  namePlaceholder = 'Enter channel name',
+  descriptionPlaceholder = 'Enter channel description',
+  publicLabel = 'Public Channel',
+  saveLabel = 'Save',
+  cancelLabel = 'Cancel',
+  savingLabel = 'Saving...',
+  changeAvatarLabel = 'Change Avatar',
+  imageAccept = 'image/*',
+  maxImageSize = DEFAULT_MAX_IMAGE_SIZE,
+  maxImageSizeError = 'Image must be less than 5MB',
+}) => {
+  // Original values from channel data
+  const originalName = (channel.data?.name as string) || '';
+  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';
+
+  // Form state
+  const [name, setName] = useState(originalName);
+  const [description, setDescription] = useState(originalDescription);
+  const [isPublic, setIsPublic] = useState(originalPublic);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Clean up object URL on unmount or when preview changes
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Validate it's an image
+    if (!file.type.startsWith('image/')) {
+      setError('Only image files are allowed');
+      return;
+    }
+
+    // Validate size
+    if (file.size > maxImageSize) {
+      setError(maxImageSizeError);
+      return;
+    }
+
+    setError(null);
+    // Revoke previous preview
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+    const url = URL.createObjectURL(file);
+    setPreviewUrl(url);
+    setSelectedFile(file);
+
+    // Reset input so same file can be re-selected
+    e.target.value = '';
+  }, [maxImageSize, maxImageSizeError, previewUrl]);
+
+  const handleAvatarClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  // Check if anything changed — only send changed fields
+  const buildPayload = useCallback((): EditChannelData | null => {
+    const payload: EditChannelData = {};
+    let hasChanges = false;
+
+    if (name.trim() !== originalName) {
+      payload.name = name.trim();
+      hasChanges = true;
+    }
+    if (description.trim() !== originalDescription) {
+      payload.description = description.trim();
+      hasChanges = true;
+    }
+    if (isTeamChannel && isPublic !== originalPublic) {
+      payload.public = isPublic;
+      hasChanges = true;
+    }
+    // Image is handled separately (upload first), but mark as changed
+    if (selectedFile) {
+      hasChanges = true;
+    }
+
+    return hasChanges ? payload : null;
+  }, [name, description, isPublic, selectedFile, originalName, originalDescription, originalPublic, isTeamChannel]);
+
+  const handleSave = useCallback(async () => {
+    const payload = buildPayload();
+    if (!payload && !selectedFile) {
+      onClose();
+      return;
+    }
+
+    setIsSaving(true);
+    setError(null);
+
+    try {
+      // If consumer provides custom save handler, delegate entirely
+      if (onSave) {
+        if (selectedFile) {
+          const response = await channel.sendFile(selectedFile, selectedFile.name, selectedFile.type);
+          (payload || {} as EditChannelData).image = response.file;
+        }
+        await onSave(payload || {});
+        onClose();
+        return;
+      }
+
+      // Default save logic
+      const finalPayload: EditChannelData = payload || {};
+
+      // Upload image if changed
+      if (selectedFile) {
+        const response = await channel.sendFile(selectedFile, selectedFile.name, selectedFile.type);
+        finalPayload.image = response.file;
+      }
+
+      // Only call update if there's something to update
+      if (Object.keys(finalPayload).length > 0) {
+        await channel.update(finalPayload as any);
+      }
+
+      onClose();
+    } catch (err: any) {
+      setError(err?.message || 'Failed to update channel');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [buildPayload, selectedFile, onSave, channel, onClose]);
+
+  // Determine displayed avatar image
+  const displayImage = previewUrl || originalImage || undefined;
+
+  const footerContent = (
+    <div className="ermis-channel-info__edit-footer-buttons">
+      <button
+        className="ermis-channel-info__edit-btn ermis-channel-info__edit-btn--cancel"
+        onClick={onClose}
+        disabled={isSaving}
+      >
+        {cancelLabel}
+      </button>
+      <button
+        className="ermis-channel-info__edit-btn ermis-channel-info__edit-btn--save"
+        onClick={handleSave}
+        disabled={isSaving}
+      >
+        {isSaving ? savingLabel : saveLabel}
+      </button>
+    </div>
+  );
+
+  return (
+    <Modal
+      isOpen={true}
+      onClose={isSaving ? () => {} : onClose}
+      title={title}
+      footer={footerContent}
+      maxWidth="420px"
+    >
+      <div className="ermis-channel-info__edit-body">
+        {/* Avatar section */}
+        <div className="ermis-channel-info__edit-avatar-section">
+          <div className="ermis-channel-info__edit-avatar-wrap" onClick={handleAvatarClick}>
+            <AvatarComponent image={displayImage} name={name || originalName} size={80} />
+            <div className="ermis-channel-info__edit-avatar-overlay">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <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" />
+                <circle cx="12" cy="13" r="4" />
+              </svg>
+            </div>
+          </div>
+          <button
+            className="ermis-channel-info__edit-avatar-btn"
+            onClick={handleAvatarClick}
+            type="button"
+            disabled={isSaving}
+          >
+            {changeAvatarLabel}
+          </button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={imageAccept}
+            onChange={handleFileSelect}
+            style={{ display: 'none' }}
+            aria-hidden="true"
+          />
+        </div>
+
+        {/* Name field */}
+        <div className="ermis-channel-info__edit-field">
+          <label className="ermis-channel-info__edit-label">{nameLabel}</label>
+          <input
+            className="ermis-channel-info__edit-input"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={namePlaceholder}
+            disabled={isSaving}
+            maxLength={100}
+          />
+        </div>
+
+        {/* Description field */}
+        <div className="ermis-channel-info__edit-field">
+          <label className="ermis-channel-info__edit-label">{descriptionLabel}</label>
+          <textarea
+            className="ermis-channel-info__edit-textarea"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={descriptionPlaceholder}
+            disabled={isSaving}
+            rows={3}
+            maxLength={500}
+          />
+        </div>
+
+        {/* Public toggle — only for team channels */}
+        {isTeamChannel && (
+          <div className="ermis-channel-info__edit-field ermis-channel-info__edit-field--toggle">
+            <label className="ermis-channel-info__edit-label">{publicLabel}</label>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={isPublic}
+              className={`ermis-channel-info__edit-toggle ${isPublic ? 'ermis-channel-info__edit-toggle--on' : ''}`}
+              onClick={() => setIsPublic(v => !v)}
+              disabled={isSaving}
+            >
+              <span className="ermis-channel-info__edit-toggle-thumb" />
+            </button>
+          </div>
+        )}
+
+        {/* Error */}
+        {error && (
+          <div className="ermis-channel-info__edit-error">
+            <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="10" />
+              <line x1="12" y1="8" x2="12" y2="12" />
+              <line x1="12" y1="16" x2="12.01" y2="16" />
+            </svg>
+            {error}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+});
+
+EditChannelModal.displayName = 'EditChannelModal';

package/src/components/ChannelInfo/FileListItem.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { formatFileSize, formatRelativeDate, getDisplayName } from '../../utils';
+import { getFileIcon } from './utils';
+import type { AttachmentItem } from '../../types';
+
+export const FileListItem: React.FC<{
+  item: AttachmentItem;
+  onClick: (url: string) => void;
+}> = React.memo(({ item, onClick }) => {
+  const displayName = getDisplayName(item.file_name);
+  const ext = item.file_name.split('.').pop()?.toUpperCase() || 'FILE';
+
+  return (
+    <div
+      className="ermis-channel-info__file-item"
+      onClick={() => onClick(item.url)}
+    >
+      <div className="ermis-channel-info__file-icon">
+        {getFileIcon(item.content_type, item.file_name)}
+        <span className="ermis-channel-info__file-ext">{ext}</span>
+      </div>
+      <div className="ermis-channel-info__file-info">
+        <span className="ermis-channel-info__file-name" title={item.file_name}>
+          {displayName}
+        </span>
+        <div className="ermis-channel-info__file-meta">
+          <span>{formatFileSize(item.content_length)}</span>
+          <span className="ermis-channel-info__file-meta-dot">·</span>
+          <span>{formatRelativeDate(item.created_at)}</span>
+        </div>
+      </div>
+      <button
+        className="ermis-channel-info__file-download"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick(item.url);
+        }}
+        aria-label="Download"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="7 10 12 15 17 10" />
+          <line x1="12" y1="15" x2="12" y2="3" />
+        </svg>
+      </button>
+    </div>
+  );
+}, (prev, next) => prev.item.id === next.item.id);
+(FileListItem as any).displayName = 'FileListItem';

package/src/components/ChannelInfo/LinkListItem.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useMemo } from 'react';
+import { formatRelativeDate, extractDomain, isImagePreloaded, preloadImage } from '../../utils';
+import type { AttachmentItem } from '../../types';
+
+export const LinkListItem: React.FC<{ item: AttachmentItem }> = React.memo(({ item }) => {
+  const displayUrl = item.og_scrape_url || item.title_link || item.url;
+  const domain = extractDomain(displayUrl);
+
+  // Preload link preview image if available
+  const imgSrc = item.image_url;
+  const alreadyCached = imgSrc ? isImagePreloaded(imgSrc) : true;
+  const [imgLoaded, setImgLoaded] = useState(alreadyCached);
+  const imgRef = React.useRef<HTMLImageElement>(null);
+
+  useMemo(() => { if (imgSrc) preloadImage(imgSrc); }, [imgSrc]);
+
+  React.useEffect(() => {
+    if (!imgLoaded && imgRef.current?.complete) {
+      setImgLoaded(true);
+    }
+  }, [imgLoaded, imgSrc]);
+
+  return (
+    <a
+      className="ermis-channel-info__link-item"
+      href={displayUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <div className="ermis-channel-info__link-icon">
+        {imgSrc ? (
+          <div style={{ width: '100%', height: '100%', position: 'relative' }}>
+            {!imgLoaded && <div className="ermis-channel-info__media-shimmer" style={{ borderRadius: '8px' }} />}
+            <img
+              ref={imgRef}
+              src={imgSrc}
+              alt=""
+              className="ermis-channel-info__link-preview-img"
+              loading="lazy"
+              onLoad={() => setImgLoaded(true)}
+              style={{ opacity: imgLoaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
+            />
+          </div>
+        ) : (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+            <polyline points="15 3 21 3 21 9" />
+            <line x1="10" y1="14" x2="21" y2="3" />
+          </svg>
+        )}
+      </div>
+      <div className="ermis-channel-info__link-content">
+        <span className="ermis-channel-info__link-title">
+          {item.title || item.file_name || domain}
+        </span>
+        <span className="ermis-channel-info__link-domain">{domain}</span>
+      </div>
+      <span className="ermis-channel-info__link-date">{formatRelativeDate(item.created_at)}</span>
+    </a>
+  );
+}, (prev, next) => prev.item.id === next.item.id);
+(LinkListItem as any).displayName = 'LinkListItem';

package/src/components/ChannelInfo/MediaGridItem.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useMemo } from 'react';
+import { preloadImage, isImagePreloaded } from '../../utils';
+import type { AttachmentItem } from '../../types';
+
+export const MediaGridItem: React.FC<{
+  item: AttachmentItem;
+  onClick: (url: string) => void;
+}> = React.memo(({ item, onClick }) => {
+  const src = item.thumb_url || item.url;
+  const alreadyCached = isImagePreloaded(src);
+  const [loaded, setLoaded] = useState(alreadyCached);
+  const imgRef = React.useRef<HTMLImageElement>(null);
+
+  // Trigger background preload (no-op if already cached)
+  useMemo(() => { preloadImage(src); }, [src]);
+
+  // Fallback checks for browser cache when JS preload didn't catch it
+  React.useEffect(() => {
+    if (!loaded && imgRef.current?.complete) {
+      setLoaded(true);
+    }
+  }, [loaded, src]);
+
+  const isVideo = item.attachment_type === 'video';
+
+  return (
+    <div
+      className="ermis-channel-info__media-item"
+      onClick={() => onClick(item.url)}
+      title={item.file_name}
+    >
+      {/* Shimmer placeholder while loading */}
+      {!loaded && <div className="ermis-channel-info__media-shimmer" />}
+
+      {isVideo ? (
+        <div className="ermis-channel-info__media-video-thumb">
+          {item.thumb_url ? (
+            <img
+              ref={imgRef}
+              src={item.thumb_url}
+              alt={item.file_name || 'video'}
+              loading="lazy"
+              onLoad={() => setLoaded(true)}
+              style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
+            />
+          ) : (
+            <video
+              src={item.url}
+              preload="metadata"
+              onLoadedData={() => setLoaded(true)}
+              style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
+            />
+          )}
+          <div className="ermis-channel-info__media-play-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <polygon points="5 3 19 12 5 21 5 3" />
+            </svg>
+          </div>
+        </div>
+      ) : (
+        <img
+          ref={imgRef}
+          src={src}
+          alt={item.file_name || 'media'}
+          loading="lazy"
+          onLoad={() => setLoaded(true)}
+          style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }}
+        />
+      )}
+    </div>
+  );
+}, (prev, next) => prev.item.id === next.item.id);
+(MediaGridItem as any).displayName = 'MediaGridItem';
+
+export const MediaRow = React.memo(({ row, onClick }: { row: AttachmentItem[], onClick: (url: string) => void }) => {
+  return (
+    <div className="ermis-channel-info__media-grid-row">
+      {row.map(item => (
+        <MediaGridItem key={item.id} item={item} onClick={onClick} />
+      ))}
+      {row.length < 3 && Array.from({ length: 3 - row.length }).map((_, i) => (
+        <div key={`empty-${i}`} className="ermis-channel-info__media-item ermis-channel-info__media-item--empty" />
+      ))}
+    </div>
+  );
+}, (prev, next) => {
+  if (prev.row.length !== next.row.length) return false;
+  return prev.row.every((item, i) => item.id === next.row[i].id);
+});
+(MediaRow as any).displayName = 'MediaRow';

package/src/components/ChannelInfo/MemberListItem.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { Dropdown } from '../Dropdown';
+import type { ChannelInfoMemberItemProps } from '../../types';
+
+export const MemberListItem = React.memo(({
+  member, AvatarComponent, 
+  onRemove, canRemove, 
+  onBan, canBan, 
+  onUnban, canUnban, 
+  onPromote, canPromote, 
+  onDemote, canDemote 
+}: ChannelInfoMemberItemProps) => {
+  const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null);
+  const isOpen = anchorRect !== null;
+
+  if (!member) return null;
+  const role = member.channel_role || 'member';
+  const hasActions = canRemove || canBan || canUnban || canPromote || canDemote;
+
+  return (
+    <div className="ermis-channel-info__member-item">
+      <AvatarComponent image={member.user?.avatar} name={member.user?.name || member.user?.id} size={36} />
+      <div className="ermis-channel-info__member-info">
+        <span className="ermis-channel-info__member-name">{member.user?.name || member.user?.id}</span>
+        <span className={`ermis-channel-info__member-role ermis-channel-info__member-role--${role.toLowerCase()}`}>
+          {role.charAt(0).toUpperCase() + role.slice(1)}
+        </span>
+      </div>
+      
+      {hasActions && (
+        <>
+          <button
+            className="ermis-channel-info__member-actions-btn"
+            onClick={(e) => {
+              e.stopPropagation();
+              setAnchorRect(e.currentTarget.getBoundingClientRect());
+            }}
+            aria-label="Member actions"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="12" r="1" />
+              <circle cx="12" cy="5" r="1" />
+              <circle cx="12" cy="19" r="1" />
+            </svg>
+          </button>
+          
+          <Dropdown
+            isOpen={isOpen}
+            anchorRect={anchorRect}
+            onClose={() => setAnchorRect(null)}
+            align="right"
+          >
+            <div className="ermis-dropdown__menu">
+              {canPromote && onPromote && (
+                <button className="ermis-dropdown__item" onClick={() => { onPromote(member.user?.id || member.user_id); setAnchorRect(null); }}>Promote to Moder</button>
+              )}
+              {canDemote && onDemote && (
+                <button className="ermis-dropdown__item" onClick={() => { onDemote(member.user?.id || member.user_id); setAnchorRect(null); }}>Demote to Member</button>
+              )}
+              {canBan && onBan && (
+                <button className="ermis-dropdown__item ermis-dropdown__item--danger" onClick={() => { onBan(member.user?.id || member.user_id); setAnchorRect(null); }}>Ban Member</button>
+              )}
+              {canUnban && onUnban && (
+                <button className="ermis-dropdown__item" onClick={() => { onUnban(member.user?.id || member.user_id); setAnchorRect(null); }}>Unban Member</button>
+              )}
+              {canRemove && onRemove && (
+                <button className="ermis-dropdown__item ermis-dropdown__item--danger" onClick={() => { onRemove(member.user?.id || member.user_id); setAnchorRect(null); }}>Remove from Channel</button>
+              )}
+            </div>
+          </Dropdown>
+        </>
+      )}
+    </div>
+  );
+}, (prev, next) => {
+  return prev.member?.user_id === next.member?.user_id &&
+         prev.member?.channel_role === next.member?.channel_role &&
+         prev.member?.banned === next.member?.banned &&
+         prev.canRemove === next.canRemove &&
+         prev.canBan === next.canBan &&
+         prev.canUnban === next.canUnban &&
+         prev.canPromote === next.canPromote &&
+         prev.canDemote === next.canDemote;
+});
+(MemberListItem as any).displayName = 'MemberListItem';