@ermis-network/ermis-chat-react 1.0.0

package/src/components/PinnedMessages.tsx

@@ -0,0 +1,165 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useChatClient } from '../hooks/useChatClient';
+import { Avatar } from './Avatar';
+import { replaceMentionsForPreview, buildUserMap } from '../utils';
+import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+import type { PinnedMessageItemProps, PinnedMessagesProps } from '../types';
+
+/* ----------------------------------------------------------
+   Default PinnedMessageItem
+   ---------------------------------------------------------- */
+const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
+  message,
+  isOwnMessage,
+  onClickMessage,
+  onUnpin,
+  AvatarComponent,
+}) => {
+  const { activeChannel } = useChatClient();
+  const userName = message.user?.name || message.user_id || 'Unknown';
+  const userAvatar = message.user?.avatar;
+  const hasAttachments = message.attachments && message.attachments.length > 0;
+
+  const userMap = useMemo<Record<string, string>>(() => {
+    return buildUserMap(activeChannel?.state);
+  }, [activeChannel?.state]);
+
+  let previewText = message.text || '';
+  const isSticker = message.type === 'sticker';
+
+  if (!previewText && hasAttachments) {
+    const firstAttach = message.attachments![0];
+    previewText = firstAttach.title || `${firstAttach.type || 'file'}`;
+  } else if (isSticker) {
+    previewText = 'Sticker';
+  }
+
+  // Convert @userId → @UserName in preview text
+  if (previewText) {
+    previewText = replaceMentionsForPreview(previewText, message, userMap);
+  }
+
+  // Attachment icon prefix
+  let attachIcon = '';
+  if (hasAttachments) {
+    const type = message.attachments![0].type;
+    if (type === 'image') attachIcon = '📷 ';
+    else if (type === 'video') attachIcon = '🎥 ';
+    else if (type === 'audio') attachIcon = '🎵 ';
+    else attachIcon = '📄 ';
+  } else if (isSticker) {
+    attachIcon = '😀 ';
+  }
+
+  return (
+    <div
+      className={`ermis-pinned-messages__item ${isOwnMessage ? 'ermis-pinned-messages__item--own' : ''}`}
+      onClick={() => onClickMessage?.(message.id)}
+      role="button"
+      tabIndex={0}
+    >
+      <AvatarComponent image={userAvatar} name={userName} size={28} />
+      <div className="ermis-pinned-messages__item-content">
+        <span className="ermis-pinned-messages__item-user">{userName}</span>
+        <span className="ermis-pinned-messages__item-text">{attachIcon}{previewText || 'Attachment'}</span>
+      </div>
+      <button
+        className="ermis-pinned-messages__unpin-btn"
+        onClick={(e) => { e.stopPropagation(); onUnpin?.(message.id); }}
+        title="Unpin message"
+        aria-label="Unpin message"
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <line x1="2" y1="2" x2="22" y2="22" />
+          <path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z" />
+        </svg>
+      </button>
+    </div>
+  );
+});
+DefaultPinnedMessageItem.displayName = 'DefaultPinnedMessageItem';
+
+/* ----------------------------------------------------------
+   PinnedMessages component
+   ---------------------------------------------------------- */
+export const PinnedMessages: React.FC<PinnedMessagesProps> = React.memo(({
+  className,
+  AvatarComponent = Avatar,
+  PinnedMessageItemComponent = DefaultPinnedMessageItem,
+  onClickMessage,
+  maxCollapsed = 1,
+}) => {
+  const { activeChannel, client, messages } = useChatClient();
+  const [expanded, setExpanded] = useState(false);
+  const currentUserId = client.userID;
+
+  // Reset expanded state when switching channels
+  useEffect(() => {
+    setExpanded(false);
+  }, [activeChannel]);
+
+  const pinnedMessages = useMemo<FormatMessageResponse[]>(() => {
+    if (!activeChannel) return [];
+    const pinned = (activeChannel.state as any)?.pinnedMessages;
+    return Array.isArray(pinned) ? pinned : [];
+  }, [activeChannel, messages]);
+
+  const toggleExpanded = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  const handleUnpin = useCallback(async (messageId: string) => {
+    if (!activeChannel) return;
+    try {
+      await activeChannel.unpinMessage(messageId);
+    } catch (err) {
+      console.error('Failed to unpin message', err);
+    }
+  }, [activeChannel]);
+
+  if (pinnedMessages.length === 0) return null;
+
+  const displayedMessages = expanded
+    ? pinnedMessages
+    : pinnedMessages.slice(0, maxCollapsed);
+
+  const hasMore = pinnedMessages.length > maxCollapsed;
+
+  return (
+    <div className={`ermis-pinned-messages${expanded ? ' ermis-pinned-messages--expanded' : ''}${className ? ` ${className}` : ''}`}>
+      {/* Header bar */}
+      <div className="ermis-pinned-messages__header" onClick={toggleExpanded}>
+        <svg className="ermis-pinned-messages__icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z" />
+        </svg>
+        <span className="ermis-pinned-messages__label">
+          {pinnedMessages.length} pinned message{pinnedMessages.length > 1 ? 's' : ''}
+        </span>
+        {hasMore && (
+          <button
+            className="ermis-pinned-messages__toggle"
+            onClick={(e) => { e.stopPropagation(); toggleExpanded(); }}
+          >
+            {expanded ? 'Collapse' : 'See all'}
+          </button>
+        )}
+      </div>
+
+      {/* Pinned message list */}
+      <div className="ermis-pinned-messages__list">
+        {displayedMessages.map((msg) => (
+          <PinnedMessageItemComponent
+            key={msg.id}
+            message={msg}
+            isOwnMessage={msg.user_id === currentUserId || msg.user?.id === currentUserId}
+            onClickMessage={onClickMessage}
+            onUnpin={handleUnpin}
+            AvatarComponent={AvatarComponent}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+PinnedMessages.displayName = 'PinnedMessages';

package/src/components/QuotedMessagePreview.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import { useChatClient } from '../hooks/useChatClient';
+import { replaceMentionsForPreview, buildUserMap } from '../utils';
+import type { QuotedMessagePreviewProps } from '../types';
+
+export type { QuotedMessagePreviewProps } from '../types';
+
+const MAX_PREVIEW_LENGTH = 100;
+
+function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength).trimEnd() + '…';
+}
+
+export const QuotedMessagePreview: React.FC<QuotedMessagePreviewProps> = React.memo(({
+  quotedMessage,
+  isOwnMessage,
+  onClick,
+}) => {
+  const { activeChannel } = useChatClient();
+
+  const userMap = useMemo<Record<string, string>>(() => {
+    return buildUserMap(activeChannel?.state);
+  }, [activeChannel]);
+
+  const authorName = quotedMessage.user?.name || quotedMessage.user?.id || 'Unknown';
+  
+  const rawText = quotedMessage.text || '';
+  const formattedText = useMemo(() => replaceMentionsForPreview(rawText, quotedMessage as any, userMap), [rawText, quotedMessage, userMap]);
+  
+  const previewText = formattedText
+    ? truncateText(formattedText, MAX_PREVIEW_LENGTH)
+    : 'Attachment';
+
+  const handleClick = () => {
+    onClick(quotedMessage.id);
+  };
+
+  return (
+    <div
+      className={`ermis-quoted-message ${isOwnMessage ? 'ermis-quoted-message--own' : ''}`}
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') handleClick();
+      }}
+    >
+      <span className="ermis-quoted-message__author">{authorName}</span>
+      <span className="ermis-quoted-message__text">{previewText}</span>
+    </div>
+  );
+});
+
+QuotedMessagePreview.displayName = 'QuotedMessagePreview';

package/src/components/ReadReceipts.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import type { ReadReceiptsProps, ReadReceiptsTooltipProps } from '../types';
+import { Avatar } from './Avatar';
+import { formatReadTimestamp } from '../utils';
+
+export type { ReadReceiptsProps, ReadReceiptsTooltipProps } from '../types';
+
+/* ----------------------------------------------------------
+   Default Tooltip — shown on hover
+   ---------------------------------------------------------- */
+const DefaultReadReceiptsTooltip: React.FC<ReadReceiptsTooltipProps> = React.memo(({
+  readers,
+  AvatarComponent,
+}) => (
+  <div className="ermis-read-receipts__tooltip-wrapper">
+    <div className="ermis-read-receipts__tooltip">
+      {readers.map((reader) => (
+        <div key={reader.id} className="ermis-read-receipts__tooltip-item">
+          <AvatarComponent
+            image={reader.avatar}
+            name={reader.name || reader.id}
+            size={20}
+          />
+          <div className="ermis-read-receipts__tooltip-info">
+            <span className="ermis-read-receipts__tooltip-name">{reader.name || reader.id}</span>
+            <span className="ermis-read-receipts__tooltip-time">{formatReadTimestamp(reader.last_read)}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+));
+DefaultReadReceiptsTooltip.displayName = 'DefaultReadReceiptsTooltip';
+
+/* ----------------------------------------------------------
+   ReadReceipts — main component
+   ---------------------------------------------------------- */
+export const ReadReceipts: React.FC<ReadReceiptsProps> = React.memo(({
+  readers,
+  maxAvatars = 5,
+  AvatarComponent = Avatar,
+  TooltipComponent = DefaultReadReceiptsTooltip,
+  showTooltip = true,
+}) => {
+  // Only render when there are actual readers (avatar-based display)
+  // Sent/Sending/Error status icons are now rendered inline inside the message bubble
+  if (!readers || readers.length === 0) {
+    return null;
+  }
+
+  const visible = readers.slice(0, maxAvatars);
+  const overflow = readers.length - maxAvatars;
+
+  return (
+    <div className="ermis-read-receipts">
+      <div className="ermis-read-receipts__avatars">
+        {visible.map((reader) => (
+          <AvatarComponent
+            key={reader.id}
+            image={reader.avatar}
+            name={reader.name || reader.id}
+            size={16}
+            className="ermis-read-receipts__avatar"
+          />
+        ))}
+        {overflow > 0 && (
+          <span className="ermis-read-receipts__overflow">+{overflow}</span>
+        )}
+        {showTooltip && (
+          <TooltipComponent
+            readers={readers}
+            AvatarComponent={AvatarComponent}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
+
+ReadReceipts.displayName = 'ReadReceipts';

package/src/components/ReplyPreview.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import { useChatClient } from '../hooks/useChatClient';
+import { replaceMentionsForPreview, buildUserMap } from '../utils';
+import type { ReplyPreviewProps } from '../types';
+
+const MAX_PREVIEW_LENGTH = 120;
+
+function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength).trimEnd() + '…';
+}
+
+/** Get a human-readable summary of attachments */
+function getAttachmentSummary(attachments: any[]): string {
+  if (!attachments || attachments.length === 0) return '';
+
+  const types: Record<string, number> = {};
+  for (const att of attachments) {
+    const type = att.type || 'file';
+    types[type] = (types[type] || 0) + 1;
+  }
+
+  const labels: string[] = [];
+  const typeLabels: Record<string, string> = {
+    image: '🖼️ Image',
+    video: '🎬 Video',
+    audio: '🎵 Audio',
+    file: '📎 File',
+    voiceRecording: '🎤 Voice',
+  };
+
+  for (const [type, count] of Object.entries(types)) {
+    const label = typeLabels[type] || `📎 ${type}`;
+    labels.push(count > 1 ? `${label} (${count})` : label);
+  }
+
+  return labels.join(', ');
+}
+export const ReplyPreview: React.FC<ReplyPreviewProps> = React.memo(({
+  message,
+  onDismiss,
+  replyingToLabel = 'Replying to',
+}) => {
+  const { activeChannel } = useChatClient();
+
+  const userMap = useMemo<Record<string, string>>(() => {
+    return buildUserMap(activeChannel?.state);
+  }, [activeChannel]);
+
+  const userName = message.user?.name || message.user_id || 'Unknown';
+  
+  const rawText = message.text || '';
+  const formattedText = useMemo(() => replaceMentionsForPreview(rawText, message, userMap), [rawText, message, userMap]);
+  const hasText = !!formattedText.trim();
+  const hasAttachments = message.attachments && message.attachments.length > 0;
+  const isSticker = message.type === 'sticker';
+  const attachmentSummary = hasAttachments ? getAttachmentSummary(message.attachments!) : '';
+
+  // Build preview content
+  let previewContent: React.ReactNode = null;
+  if (isSticker) {
+    previewContent = (
+      <span className="ermis-message-input__reply-preview-text">
+        😀 Sticker
+      </span>
+    );
+  } else {
+    previewContent = (
+      <span className="ermis-message-input__reply-preview-text">
+        {hasText && truncateText(formattedText, MAX_PREVIEW_LENGTH)}
+        {hasText && hasAttachments && ' · '}
+        {hasAttachments && attachmentSummary}
+      </span>
+    );
+  }
+
+  return (
+    <div className="ermis-message-input__reply-preview">
+      <div className="ermis-message-input__reply-preview-body">
+        <span className="ermis-message-input__reply-preview-label">{replyingToLabel}</span>
+        <span className="ermis-message-input__reply-preview-user">{userName}</span>
+        {previewContent}
+      </div>
+      <button
+        className="ermis-message-input__reply-preview-dismiss"
+        onClick={onDismiss}
+        title="Cancel reply"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
+  );
+});
+
+ReplyPreview.displayName = 'ReplyPreview';

package/src/components/TypingIndicator.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useTypingIndicator, type TypingUser } from '../hooks/useTypingIndicator';
+
+export type TypingIndicatorProps = {
+  /** Custom render function for the typing text */
+  renderText?: (users: TypingUser[]) => React.ReactNode;
+};
+
+/**
+ * Displays a "X is typing..." indicator below the message list.
+ * Automatically subscribes to typing events via the useTypingIndicator hook.
+ */
+export const TypingIndicator: React.FC<TypingIndicatorProps> = React.memo(({ renderText }) => {
+  const { typingUsers } = useTypingIndicator();
+
+  const isActive = typingUsers.length > 0;
+
+  const text = isActive
+    ? (renderText ? renderText(typingUsers) : formatTypingText(typingUsers))
+    : null;
+
+  return (
+    <div className={`ermis-typing-indicator${isActive ? ' ermis-typing-indicator--active' : ''}`}>
+      {isActive && (
+        <>
+          <div className="ermis-typing-indicator__dots">
+            <span className="ermis-typing-indicator__dot" />
+            <span className="ermis-typing-indicator__dot" />
+            <span className="ermis-typing-indicator__dot" />
+          </div>
+          <span className="ermis-typing-indicator__text">{text}</span>
+        </>
+      )}
+    </div>
+  );
+});
+
+TypingIndicator.displayName = 'TypingIndicator';
+
+/**
+ * Format typing text based on number of users:
+ * - 1 user: "Alice is typing..."
+ * - 2 users: "Alice and Bob are typing..."
+ * - 3+ users: "Alice, Bob and 2 others are typing..."
+ */
+function formatTypingText(users: TypingUser[]): string {
+  const names = users.map((u) => u.name || u.id);
+
+  if (names.length === 1) {
+    return `${names[0]} is typing...`;
+  }
+  if (names.length === 2) {
+    return `${names[0]} and ${names[1]} are typing...`;
+  }
+  const remaining = names.length - 2;
+  return `${names[0]}, ${names[1]} and ${remaining} other${remaining > 1 ? 's' : ''} are typing...`;
+}