@ermis-network/ermis-chat-react 1.0.9 → 2.0.1

package/src/components/ForwardMessageModal.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { createForwardMessagePayload } from '@ermis-network/ermis-chat-sdk';
-import type { Channel } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
-import { Modal } from './Modal';
-import type { ForwardMessageModalProps, ForwardChannelItemProps, AvatarProps } from '../types';
+import { Modal as DefaultModal } from './Modal';
+import { useChatComponents } from '../context/ChatComponentsContext';
+import type { ForwardMessageModalProps, ForwardChannelItemProps } from '../types';
 import { isTopicChannel } from '../channelTypeUtils';
+import { useForwardMessage } from '../hooks/useForwardMessage';
 
 export type { ForwardMessageModalProps, ForwardChannelItemProps } from '../types';
 
@@ -18,12 +18,20 @@ const DefaultForwardChannelItem: React.FC<ForwardChannelItemProps> = React.memo(
   onToggle,
   AvatarComponent,
 }) => {
+  const { client } = useChatClient();
+  const isTopic = isTopicChannel(channel);
+  const parentCid = channel.data?.parent_cid as string | undefined;
+  const parent = parentCid ? client.activeChannels[parentCid] : null;
+  const parentName = parent?.data?.name || '';
+
   const name = (channel.data?.name || channel.cid) as string;
   const rawImage = channel.data?.image as string | undefined;
   // Parse emoji:// format → extract just the emoji for avatar fallback
   const isEmoji = rawImage?.startsWith('emoji://');
   const image = isEmoji ? undefined : rawImage;
-  const emojiIcon = isEmoji ? rawImage!.replace('emoji://', '') : undefined;
+
+  // Use # for topics without explicit emoji/image
+  const emojiIcon = isEmoji ? rawImage!.replace('emoji://', '') : (isTopic && !image ? '#' : undefined);
 
   return (
     <div
@@ -35,7 +43,12 @@ const DefaultForwardChannelItem: React.FC<ForwardChannelItemProps> = React.memo(
       ) : (
         <AvatarComponent image={image} name={name} size={36} />
       )}
-      <span className="ermis-forward-modal__channel-name">{name}</span>
+      <div className="ermis-forward-modal__channel-name-container">
+        {isTopic && parentName && (
+          <span className="ermis-forward-modal__channel-parent-name">{parentName}</span>
+        )}
+        <span className="ermis-forward-modal__channel-name">{name}</span>
+      </div>
       <div className={`ermis-forward-modal__checkbox ${selected ? 'ermis-forward-modal__checkbox--checked' : ''}`}>
         {selected && (
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
@@ -57,79 +70,21 @@ export const ForwardMessageModal: React.FC<ForwardMessageModalProps> = ({
   ChannelItemComponent = DefaultForwardChannelItem,
   SearchInputComponent,
 }) => {
-  const { client, activeChannel } = useChatClient();
-  const [selectedChannels, setSelectedChannels] = useState<Set<string>>(new Set());
-  const [search, setSearch] = useState('');
-  const [sending, setSending] = useState(false);
-  const [results, setResults] = useState<{ success: string[]; failed: string[] } | null>(null);
+  const { ModalComponent } = useChatComponents();
+  const Modal = ModalComponent || DefaultModal;
   const backdropRef = useRef<HTMLDivElement>(null);
-
-  /* ---------- Get channels from client state (exclude topics) ---------- */
-  const channels = useMemo(() => {
-    return (Object.values(client.activeChannels) as Channel[]).filter(
-      (ch) => !isTopicChannel(ch),
-    );
-  }, [client.activeChannels]);
-
-  /* ---------- Filter by search ---------- */
-  const filteredChannels = useMemo(() => {
-    if (!search.trim()) return channels;
-    const q = search.toLowerCase();
-    return channels.filter((ch) => {
-      const name = ((ch.data?.name || ch.cid) as string).toLowerCase();
-      return name.includes(q);
-    });
-  }, [channels, search]);
-
-  /* ---------- Toggle selection ---------- */
-  const toggleChannel = useCallback((channel: Channel) => {
-    setSelectedChannels((prev) => {
-      const next = new Set(prev);
-      if (next.has(channel.cid)) {
-        next.delete(channel.cid);
-      } else {
-        next.add(channel.cid);
-      }
-      return next;
-    });
-  }, []);
-
-  /* ---------- Send forward ---------- */
-  const handleSend = useCallback(async () => {
-    if (!activeChannel || selectedChannels.size === 0 || sending) return;
-    setSending(true);
-    const success: string[] = [];
-    const failed: string[] = [];
-
-    for (const cid of selectedChannels) {
-      const targetChannel = channels.find((c) => c.cid === cid);
-      if (!targetChannel) continue;
-      try {
-        const forwardPayload = createForwardMessagePayload(
-          message,
-          targetChannel.cid as string,
-          activeChannel.cid as string,
-        );
-
-        await activeChannel.forwardMessage(forwardPayload, {
-          type: targetChannel.type,
-          channelID: targetChannel.id!,
-        });
-        success.push((targetChannel.data?.name || targetChannel.cid) as string);
-      } catch (err) {
-        console.error(`Failed to forward to ${cid}`, err);
-        failed.push((targetChannel.data?.name || targetChannel.cid) as string);
-      }
-    }
-
-    setResults({ success, failed });
-    setSending(false);
-
-    // Auto-close after success (short delay)
-    if (failed.length === 0) {
-      setTimeout(() => onDismiss(), 1200);
-    }
-  }, [activeChannel, selectedChannels, channels, message, sending, onDismiss]);
+  const { client } = useChatClient();
+
+  const {
+    search,
+    setSearch,
+    selectedChannels,
+    toggleChannel,
+    sending,
+    results,
+    filteredChannels,
+    handleSend,
+  } = useForwardMessage(message, onDismiss);
 
   /* ---------- Keyboard / backdrop close ---------- */
   useEffect(() => {
@@ -145,9 +100,16 @@ export const ForwardMessageModal: React.FC<ForwardMessageModalProps> = ({
   }, [onDismiss]);
 
   /* ---------- Message preview ---------- */
-  const previewText = message.text
-    ? (message.text.length > 120 ? message.text.slice(0, 120) + '…' : message.text)
-    : '';
+  let previewText = message.text || '';
+  
+  if (previewText && message.mentioned_users && message.mentioned_users.length > 0) {
+    message.mentioned_users.forEach((userId) => {
+      const name = client.state.users[userId]?.name || userId;
+      previewText = previewText.replace(new RegExp(`@${userId}`, 'g'), `@${name}`);
+    });
+  }
+
+  previewText = previewText.length > 120 ? previewText.slice(0, 120) + '…' : previewText;
   const attachmentCount = message.attachments?.length ?? 0;
 
   const footer = (