@ermis-network/ermis-chat-react 1.0.0

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@ermis-network/ermis-chat-react",
+  "version": "1.0.0",
+  "description": "React UI components for Ermis Chat",
+  "author": "Ermis",
+  "homepage": "https://ermis.network/",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "/dist",
+    "/src"
+  ],
+  "dependencies": {
+    "@ermis-network/ermis-chat-sdk": "1.0.0",
+    "virtua": "^0.48.8"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup",
+    "dev": "tsup --watch"
+  }
+}

package/src/components/Avatar.tsx

@@ -0,0 +1,102 @@
+import React, { useMemo } from 'react';
+import type { AvatarProps } from '../types';
+
+export type { AvatarProps } from '../types';
+
+/**
+ * Extracts 1–2 initials from a name.
+ */
+function getInitials(name?: string): string {
+  if (!name) return '?';
+  if (name.startsWith('0x')) return '0x';
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return parts[0][0].toUpperCase();
+}
+
+/**
+ * Avatar component with image or initial fallback.
+ */
+export const Avatar: React.FC<AvatarProps> = React.memo(({
+  image,
+  name,
+  size = 36,
+  className,
+}) => {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const [hasError, setHasError] = React.useState(false);
+  const imgRef = React.useRef<HTMLImageElement>(null);
+
+  // Reset state if image URL changes
+  React.useEffect(() => {
+    if (image) {
+      setHasError(false);
+      if (imgRef.current?.complete) {
+        setIsLoaded(true);
+      } else {
+        setIsLoaded(false);
+      }
+    }
+  }, [image]);
+
+  const initials = useMemo(() => getInitials(name), [name]);
+
+  const wrapperStyle = useMemo<React.CSSProperties>(() => ({
+    width: size,
+    height: size,
+    minWidth: size,
+    position: 'relative',
+    borderRadius: '100%', /* Or var(--ermis-radius-full) */
+    overflow: 'hidden',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }), [size]);
+
+  const contentStyle = useMemo<React.CSSProperties>(() => ({
+    width: '100%',
+    height: '100%',
+    fontSize: size * 0.4,
+    lineHeight: 1,
+  }), [size]);
+
+  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}
+      >
+        {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>
+  );
+});
+
+Avatar.displayName = 'Avatar';

package/src/components/Channel.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useChatClient } from '../hooks/useChatClient';
+import { useBannedState } from '../hooks/useBannedState';
+import { useBlockedState } from '../hooks/useBlockedState';
+import { ForwardMessageModal } from './ForwardMessageModal';
+import type { ChannelProps } from '../types';
+
+export type { ChannelProps } from '../types';
+
+const DefaultEmpty = React.memo(() => (
+  <div className="ermis-channel__empty">Select a channel to start chatting</div>
+));
+DefaultEmpty.displayName = 'DefaultEmpty';
+
+/**
+ * Channel wrapper component.
+ *
+ * Customization:
+ * - `HeaderComponent` — replace default ChannelHeader with a fully custom component.
+ *   Receives `{ channel, name, image }` as props.
+ * - `EmptyStateIndicator` — custom component when no channel is selected.
+ */
+export const Channel: React.FC<ChannelProps> = React.memo(({
+  children,
+  className,
+  EmptyStateIndicator = DefaultEmpty,
+  HeaderComponent,
+  ForwardMessageModalComponent = ForwardMessageModal,
+}) => {
+  const { activeChannel, client, forwardingMessage, setForwardingMessage } = useChatClient();
+  const { isBanned } = useBannedState(activeChannel, client.userID);
+  const { isBlocked } = useBlockedState(activeChannel, client.userID);
+
+  // Force re-render when channel info is updated via WS
+  const [channelUpdateCount, setChannelUpdateCount] = useState(0);
+  useEffect(() => {
+
+    console.log('---activeChannel--', activeChannel)
+
+    if (!activeChannel) return;
+    const sub = activeChannel.on('channel.updated', () => setChannelUpdateCount((c) => c + 1));
+    return () => sub.unsubscribe();
+  }, [activeChannel]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const headerData = useMemo(() => {
+    if (!activeChannel || !HeaderComponent) return null;
+    return {
+      channel: activeChannel,
+      name: (activeChannel.data?.name || activeChannel.cid || '') as string,
+      image: activeChannel.data?.image as string | undefined,
+    };
+  }, [activeChannel, HeaderComponent, channelUpdateCount]);
+
+  if (!activeChannel) {
+    return <EmptyStateIndicator />;
+  }
+
+  const bannedClass = isBanned ? ' ermis-channel--banned' : '';
+  const blockedClass = isBlocked ? ' ermis-channel--blocked' : '';
+
+  return (
+    <div className={`ermis-channel${bannedClass}${blockedClass}${className ? ` ${className}` : ''}`}>
+      {HeaderComponent && headerData && <HeaderComponent {...headerData} />}
+      {children}
+      {forwardingMessage && (
+        <ForwardMessageModalComponent
+          message={forwardingMessage}
+          onDismiss={() => setForwardingMessage(null)}
+        />
+      )}
+    </div>
+  );
+});
+
+Channel.displayName = 'Channel';
+

package/src/components/ChannelHeader.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { useChatClient } from '../hooks/useChatClient';
+import { usePendingState } from '../hooks/usePendingState';
+import { useBannedState } from '../hooks/useBannedState';
+import { useBlockedState } from '../hooks/useBlockedState';
+import { Avatar } from './Avatar';
+import type { ChannelHeaderProps } from '../types';
+
+export type { ChannelHeaderProps } from '../types';
+
+/**
+ * ChannelHeader displays the active channel's avatar and name.
+ *
+ * Customization:
+ * - `title` / `image` — override the channel name and avatar
+ * - `subtitle` — add a subtitle line (e.g. member count)
+ * - `AvatarComponent` — replace the avatar
+ * - `renderTitle(channel)` — fully custom title rendering
+ * - `renderRight(channel)` — render content on the right side
+ *
+ * For a fully custom header, use `Channel`'s `HeaderComponent` prop instead.
+ */
+export const ChannelHeader: React.FC<ChannelHeaderProps> = React.memo(({
+  className,
+  AvatarComponent = Avatar,
+  title,
+  image,
+  subtitle,
+  renderRight,
+  renderTitle,
+}) => {
+  const { activeChannel, client } = useChatClient();
+  const { isPending } = usePendingState(activeChannel, client.userID);
+
+  const actionDisabled = isPending;
+
+  // Force re-render when channel.updated WS event fires
+  const [channelUpdateCount, setChannelUpdateCount] = useState(0);
+
+  useEffect(() => {
+    if (!activeChannel) return;
+    const sub = activeChannel.on('channel.updated', () => setChannelUpdateCount(c => c + 1));
+    return () => sub.unsubscribe();
+  }, [activeChannel]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const channelName = useMemo(() =>
+    title || activeChannel?.data?.name || activeChannel?.cid || '',
+    [title, activeChannel?.data?.name, activeChannel?.cid, channelUpdateCount],
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const channelImage = useMemo(() =>
+    image || (activeChannel?.data?.image as string | undefined),
+    [image, activeChannel?.data?.image, channelUpdateCount],
+  );
+
+  if (!activeChannel) return null;
+
+  return (
+    <div className={`ermis-channel-header${className ? ` ${className}` : ''}`}>
+      <AvatarComponent image={channelImage} name={channelName} size={32} />
+
+      <div className="ermis-channel-header__info">
+        {renderTitle ? (
+          renderTitle(activeChannel)
+        ) : (
+          <div className="ermis-channel-header__name">{channelName}</div>
+        )}
+        {subtitle && (
+          <div className="ermis-channel-header__subtitle">{subtitle}</div>
+        )}
+      </div>
+
+      {/* renderRight exposes actionDisabled for consumers to disable UI features natively */}
+      {renderRight && (
+        <div className="ermis-channel-header__actions">
+          {renderRight(activeChannel, actionDisabled)}
+        </div>
+      )}
+    </div>
+  );
+});
+
+ChannelHeader.displayName = 'ChannelHeader';

package/src/components/ChannelInfo/AddMemberModal.tsx

@@ -0,0 +1,204 @@
+import React, { useState, useEffect, useMemo, useCallback, useTransition } from 'react';
+import { useChatClient } from '../../hooks/useChatClient';
+import { Modal } from '../Modal';
+import { VList } from 'virtua';
+import type { AddMemberModalProps, AddMemberUserItemProps } from '../../types';
+
+/* ---------- Static styles hoisted outside render ---------- */
+const LIST_CONTAINER_STYLE: React.CSSProperties = { overflow: 'hidden', height: '400px' };
+const VLIST_STYLE: React.CSSProperties = { height: '100%' };
+const DISABLED_BTN_STYLE: React.CSSProperties = { opacity: 0.5, cursor: 'not-allowed' };
+
+/* ---------- Default user row ---------- */
+const DefaultUserItem: React.FC<AddMemberUserItemProps> = React.memo(({
+  user, isExisting, isAdding, onAdd, AvatarComponent,
+  addedLabel = 'Added', addingLabel = 'Adding...', addLabel = 'Add',
+}) => (
+  <div className="ermis-modal-user-item">
+    <AvatarComponent image={user.avatar} name={user.name || user.id} size={36} />
+    <div className="ermis-modal-user-info">
+      <span className="ermis-modal-user-name">{user.name || user.id}</span>
+    </div>
+    <button
+      className={`ermis-modal-add-btn ${isExisting ? 'ermis-modal-add-btn--disabled' : ''}`}
+      onClick={() => onAdd(user.id)}
+      disabled={isAdding || isExisting}
+      style={isExisting ? DISABLED_BTN_STYLE : undefined}
+    >
+      {isExisting ? addedLabel : (isAdding ? addingLabel : addLabel)}
+    </button>
+  </div>
+));
+DefaultUserItem.displayName = 'DefaultUserItem';
+
+/* ---------- Default search input ---------- */
+const DefaultSearchInput: React.FC<{ value: string; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; placeholder: string }> = ({ value, onChange, placeholder }) => (
+  <div className="ermis-modal-search">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="11" cy="11" r="8"></circle>
+      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+    </svg>
+    <input
+      type="text"
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      autoFocus
+    />
+  </div>
+);
+
+export const AddMemberModal: React.FC<AddMemberModalProps> = ({
+  channel,
+  currentMembers,
+  onClose,
+  AvatarComponent,
+  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 { client } = useChatClient();
+  const [initialUsers, setInitialUsers] = useState<any[]>([]);
+  const [remoteUsers, setRemoteUsers] = useState<any[]>([]);
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [isPendingFilter, startTransition] = useTransition();
+
+  const [loading, setLoading] = useState(true);
+  const [isSearching, setIsSearching] = useState(false);
+  const [addingUser, setAddingUser] = useState<string | null>(null);
+  const [justAdded, setJustAdded] = useState<Set<string>>(new Set());
+
+  const UserRow = UserItemComponent || DefaultUserItem;
+  const SearchInput = SearchInputComponent || DefaultSearchInput;
+
+  // Handle immediate input + deferred filter via transition
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setSearchInput(val);
+    startTransition(() => {
+      setSearch(val);
+    });
+  }, [startTransition]);
+
+  // 1. Fetch initial 100 users
+  useEffect(() => {
+    let active = true;
+    const fetchUsers = async () => {
+      if (!client) return;
+      try {
+        const response = await client.queryUsers('100', 1);
+        if (active && response.data) {
+          setInitialUsers(response.data);
+        }
+      } catch (err) {
+        console.error('Error fetching users:', err);
+      } finally {
+        if (active) setLoading(false);
+      }
+    };
+    fetchUsers();
+    return () => { active = false; };
+  }, [client]);
+
+  // 2. Local filter by name/email/phone
+  const localFilteredUsers = useMemo(() => {
+    if (!search.trim()) return initialUsers;
+    const term = search.toLowerCase().trim();
+    return initialUsers.filter(u => {
+      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);
+    });
+  }, [search, initialUsers]);
+
+  // 3. Remote search fallback (with race-condition guard)
+  useEffect(() => {
+    if (!search.trim() || localFilteredUsers.length > 0) {
+      setRemoteUsers([]);
+      setIsSearching(false);
+      return;
+    }
+
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      setIsSearching(true);
+      try {
+        const response = await client.searchUsers(1, 25, search.trim());
+        if (!cancelled && response.data) {
+          setRemoteUsers(response.data);
+        }
+      } catch (err) {
+        console.error('Error searching remote users:', err);
+      } finally {
+        if (!cancelled) setIsSearching(false);
+      }
+    }, 500);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [search, localFilteredUsers.length, client]);
+
+  // 4. Derived state
+  const usersToDisplay = (search.trim() && localFilteredUsers.length === 0) ? remoteUsers : localFilteredUsers;
+  const isListLoading = loading || isSearching || isPendingFilter;
+
+  const existingMemberIds = useMemo(() => {
+    return new Set(currentMembers.map((m: any) => m.user_id));
+  }, [currentMembers]);
+
+  const handleAdd = useCallback(async (userId: string) => {
+    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);
+    }
+  }, [channel]);
+
+  return (
+    <Modal isOpen onClose={onClose} title={title} maxWidth="480px">
+      <SearchInput
+        value={searchInput}
+        onChange={handleSearchChange}
+        placeholder={searchPlaceholder}
+      />
+
+      <div className="ermis-modal-user-list" style={LIST_CONTAINER_STYLE}>
+        {isListLoading ? (
+          <div className="ermis-modal-loading">{loadingText}</div>
+        ) : usersToDisplay.length === 0 ? (
+          <div className="ermis-modal-empty">{emptyText}</div>
+        ) : (
+          <VList style={VLIST_STYLE}>
+            {usersToDisplay.map(user => (
+              <UserRow
+                key={user.id}
+                user={user}
+                isExisting={existingMemberIds.has(user.id) || justAdded.has(user.id)}
+                isAdding={addingUser === user.id}
+                onAdd={handleAdd}
+                AvatarComponent={AvatarComponent}
+                addedLabel={addedLabel}
+                addingLabel={addingLabel}
+                addLabel={addLabel}
+              />
+            ))}
+          </VList>
+        )}
+      </div>
+    </Modal>
+  );
+};