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

package/src/components/MessageRenderers.tsx

@@ -1,39 +1,25 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { preloadImage, isImagePreloaded } from '../utils';
 import type { FormatMessageResponse, Attachment, MessageLabel } from '@ermis-network/ermis-chat-sdk';
 import { parseSystemMessage, parseSignalMessage, CallType } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 import { buildUserMap } from '../utils';
-import type { AttachmentProps, MessageRendererProps, MessageBubbleProps } from '../types';
+import { MediaLightbox } from './MediaLightbox';
+import { getFileIcon } from './ChannelInfo/utils';
+import type { AttachmentProps, MessageRendererProps, MessageBubbleProps, MediaLightboxItem } from '../types';
 
 export type { AttachmentProps, MessageRendererProps, MessageBubbleProps } from '../types';
-
-/* ----------------------------------------------------------
-   Attachment type helpers
-   ---------------------------------------------------------- */
-function isImage(attachment: Attachment): boolean {
-  return !!(
-    attachment.type === 'image' ||
-    (!attachment.type && (attachment.mime_type?.startsWith('image/') || attachment.image_url))
-  );
-}
-
-function isVideo(attachment: Attachment): boolean {
-  return !!(attachment.type === 'video' || (!attachment.type && attachment.mime_type?.startsWith('video/')));
-}
-
-function isVoiceRecording(attachment: Attachment): boolean {
-  return attachment.type === 'voiceRecording';
-}
-
-function isLinkPreview(attachment: Attachment): boolean {
-  return attachment.type === 'linkPreview';
-}
+import {
+  isVoiceRecordingAttachment,
+  isLinkPreviewAttachment,
+  isImage,
+  isVideo
+} from '../messageTypeUtils';
 
 /* ----------------------------------------------------------
    Attachment renderers
    ---------------------------------------------------------- */
-const ImageAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) => {
+const ImageAttachment: React.FC<AttachmentProps> = React.memo(({ attachment, onClick }) => {
   const src = attachment.image_url || attachment.thumb_url || attachment.url;
   const thumbSrc = attachment.thumb_url;
   if (!src) return null;
@@ -51,8 +37,15 @@ const ImageAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
     }
   }, [loaded, src]);
 
+  const clickable = Boolean(onClick);
+
   return (
-    <div className="ermis-attachment-aspect-box" style={{ paddingBottom: '75%' }}>
+    <div
+      className={`ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3${clickable ? ' ermis-attachment--clickable' : ''}`}
+      onClick={onClick}
+      role={clickable ? 'button' : undefined}
+      tabIndex={clickable ? 0 : undefined}
+    >
       {/* Blur placeholder: use thumb if available, otherwise shimmer */}
       {!loaded && (
         thumbSrc && thumbSrc !== src ? (
@@ -74,16 +67,26 @@ const ImageAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
         loading="lazy"
         onLoad={() => setLoaded(true)}
       />
+      {clickable && (
+        <div className="ermis-attachment__overlay">
+          <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" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            <line x1="11" y1="8" x2="11" y2="14" />
+            <line x1="8" y1="11" x2="14" y2="11" />
+          </svg>
+        </div>
+      )}
     </div>
   );
 }, (prev, next) => {
   const prevSrc = prev.attachment.image_url || prev.attachment.thumb_url || prev.attachment.url;
   const nextSrc = next.attachment.image_url || next.attachment.thumb_url || next.attachment.url;
-  return prevSrc === nextSrc;
+  return prevSrc === nextSrc && prev.onClick === next.onClick;
 });
 (ImageAttachment as any).displayName = 'ImageAttachment';
 
-const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) => {
+const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment, onClick }) => {
   const src = attachment.asset_url || attachment.url;
   const posterSrc = attachment.image_url || attachment.thumb_url;
   const blurThumb = attachment.thumb_url;
@@ -103,8 +106,53 @@ const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
     }
   }, [loaded, posterSrc]);
 
+  const clickable = Boolean(onClick);
+
+  // When clickable (lightbox mode): show poster thumbnail + play icon overlay
+  if (clickable) {
+    return (
+      <div
+        className="ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3 ermis-attachment--clickable"
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+      >
+        {!loaded && (
+          blurThumb && blurThumb !== posterSrc ? (
+            <img className="ermis-attachment-blur-preview" src={blurThumb} alt="" aria-hidden />
+          ) : (
+            <div className="ermis-attachment-shimmer" />
+          )
+        )}
+        {posterSrc ? (
+          <img
+            ref={imgRef}
+            className={`ermis-attachment ermis-attachment--video-poster${loaded ? ' ermis-attachment--loaded' : ''}`}
+            src={posterSrc}
+            alt={attachment.file_name || 'video'}
+            loading="lazy"
+            onLoad={() => setLoaded(true)}
+          />
+        ) : (
+          <video
+            className={`ermis-attachment ermis-attachment--video${loaded ? ' ermis-attachment--loaded' : ''}`}
+            src={src}
+            preload="metadata"
+            onLoadedData={() => setLoaded(true)}
+          />
+        )}
+        <div className="ermis-attachment__overlay">
+          <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>
+    );
+  }
+
+  // Default inline video player (no lightbox)
   return (
-    <div className="ermis-attachment-aspect-box" style={{ paddingBottom: '75%' }}>
+    <div className="ermis-attachment-aspect-box ermis-attachment-aspect-box--4-3">
       {!loaded && (
         blurThumb && blurThumb !== posterSrc ? (
           <img
@@ -121,7 +169,7 @@ const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
         <img
           ref={imgRef}
           src={posterSrc}
-          style={{ display: 'none' }}
+          className="ermis-attachment--hidden-loader"
           onLoad={() => setLoaded(true)}
           alt="poster-loader"
         />
@@ -133,14 +181,14 @@ const VideoAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =
         controls
         preload="metadata"
         onLoadedData={() => {
-           if (!posterSrc) setLoaded(true);
+          if (!posterSrc) setLoaded(true);
         }}
       />
     </div>
   );
 }, (prev, next) => {
   return (prev.attachment.asset_url || prev.attachment.url) ===
-    (next.attachment.asset_url || next.attachment.url);
+    (next.attachment.asset_url || next.attachment.url) && prev.onClick === next.onClick;
 });
 (VideoAttachment as any).displayName = 'VideoAttachment';
 
@@ -148,16 +196,36 @@ const FileAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =>
   const url = attachment.url || attachment.asset_url;
   const name = attachment.file_name || attachment.title || 'File';
   const size = attachment.file_size;
+  const mimeType = attachment.mime_type || attachment.type || '';
+  const ext = name.split('.').pop()?.toUpperCase() || 'FILE';
+  const { client } = useChatClient();
+
+  const handleDownload = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!url) return;
+
+    try {
+      const blob = await client.downloadMedia(url);
+      const urlBlob = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = urlBlob;
+      a.download = name;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(urlBlob);
+    } catch {
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  }, [client, url, name]);
 
   return (
-    <a
-      className="ermis-attachment ermis-attachment--file"
-      href={url}
-      download={name}
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <span className="ermis-attachment__file-icon">⬇️</span>
+    <div className="ermis-attachment ermis-attachment--file">
+      <span className="ermis-attachment__file-icon">
+        {getFileIcon(mimeType, name)}
+        <span className="ermis-attachment__file-ext">{ext}</span>
+      </span>
       <span className="ermis-attachment__file-info">
         <span className="ermis-attachment__file-name">{name}</span>
         {size && (
@@ -166,7 +234,19 @@ const FileAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =>
           </span>
         )}
       </span>
-    </a>
+      <button
+        className="ermis-attachment__file-download"
+        onClick={handleDownload}
+        title="Download"
+        type="button"
+      >
+        <svg width="18" height="18" 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) => {
   return (prev.attachment.url || prev.attachment.asset_url) ===
@@ -226,7 +306,7 @@ const LinkPreviewAttachment: React.FC<AttachmentProps> = React.memo(({ attachmen
       rel="noopener noreferrer"
     >
       {image && (
-        <div style={{ position: 'relative', width: '100%', minHeight: '120px', backgroundColor: 'var(--ermis-bg-hover, #2a2a4a)', overflow: 'hidden' }}>
+        <div className="ermis-attachment__link-image-wrapper">
           {!loaded && <div className="ermis-attachment-shimmer" />}
           <img
             ref={imgRef}
@@ -235,7 +315,6 @@ const LinkPreviewAttachment: React.FC<AttachmentProps> = React.memo(({ attachmen
             alt={title || 'preview'}
             loading="lazy"
             onLoad={() => setLoaded(true)}
-            style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease', display: 'block', width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', top: 0, left: 0 }}
           />
         </div>
       )}
@@ -259,8 +338,8 @@ const LinkPreviewAttachment: React.FC<AttachmentProps> = React.memo(({ attachmen
 export const MessageAttachment: React.FC<AttachmentProps> = ({ attachment }) => {
   if (isImage(attachment)) return <ImageAttachment attachment={attachment} />;
   if (isVideo(attachment)) return <VideoAttachment attachment={attachment} />;
-  if (isVoiceRecording(attachment)) return <VoiceRecordingAttachment attachment={attachment} />;
-  if (isLinkPreview(attachment)) return <LinkPreviewAttachment attachment={attachment} />;
+  if (isVoiceRecordingAttachment(attachment)) return <VoiceRecordingAttachment attachment={attachment} />;
+  if (isLinkPreviewAttachment(attachment)) return <LinkPreviewAttachment attachment={attachment} />;
   return <FileAttachment attachment={attachment} />;
 };
 
@@ -269,9 +348,41 @@ export const AttachmentList: React.FC<{ attachments?: Attachment[] }> = React.me
 
   // Group by type
   const media = attachments.filter((a) => isImage(a) || isVideo(a));
-  const files = attachments.filter((a) => !isImage(a) && !isVideo(a) && !isVoiceRecording(a) && !isLinkPreview(a));
-  const voices = attachments.filter(isVoiceRecording);
-  const links = attachments.filter(isLinkPreview);
+  const files = attachments.filter((a) => !isImage(a) && !isVideo(a) && !isVoiceRecordingAttachment(a) && !isLinkPreviewAttachment(a));
+  const voices = attachments.filter(isVoiceRecordingAttachment);
+  const links = attachments.filter(isLinkPreviewAttachment);
+
+  // Lightbox state
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [lightboxIndex, setLightboxIndex] = useState(0);
+
+  // Build lightbox items from media attachments
+  const lightboxItems = useMemo<MediaLightboxItem[]>(() => {
+    return media.map(att => {
+      if (isImage(att)) {
+        return {
+          type: 'image' as const,
+          src: att.image_url || att.thumb_url || att.url || '',
+          alt: att.file_name || att.title,
+        };
+      }
+      return {
+        type: 'video' as const,
+        src: att.asset_url || att.url || '',
+        alt: att.file_name || att.title,
+        posterSrc: att.image_url || att.thumb_url,
+      };
+    });
+  }, [media]);
+
+  const openLightbox = useCallback((index: number) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+
+  const closeLightbox = useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
 
   const mediaGridClass = media.length === 1
     ? 'ermis-attachment-grid ermis-attachment-grid--single'
@@ -284,8 +395,8 @@ export const AttachmentList: React.FC<{ attachments?: Attachment[] }> = React.me
         <div className={mediaGridClass}>
           {media.map((att, i) => (
             isImage(att)
-              ? <ImageAttachment key={att.id || `img-${i}`} attachment={att} />
-              : <VideoAttachment key={att.id || `vid-${i}`} attachment={att} />
+              ? <ImageAttachment key={att.id || `img-${i}`} attachment={att} onClick={() => openLightbox(i)} />
+              : <VideoAttachment key={att.id || `vid-${i}`} attachment={att} onClick={() => openLightbox(i)} />
           ))}
         </div>
       )}
@@ -301,6 +412,16 @@ export const AttachmentList: React.FC<{ attachments?: Attachment[] }> = React.me
       {links.map((att, i) => (
         <LinkPreviewAttachment key={att.id || `link-${i}`} attachment={att} />
       ))}
+
+      {/* Media Lightbox */}
+      {lightboxItems.length > 0 && (
+        <MediaLightbox
+          items={lightboxItems}
+          initialIndex={lightboxIndex}
+          isOpen={lightboxOpen}
+          onClose={closeLightbox}
+        />
+      )}
     </div>
   );
 }, (prev, next) => {
@@ -427,7 +548,7 @@ export const RegularMessage: React.FC<MessageRendererProps> = React.memo(({ mess
     const isOnlyUrl = URL_REGEX_STRICT.test(text);
 
     return message.attachments.filter(att => {
-      if (isLinkPreview(att)) return isOnlyUrl;
+      if (isLinkPreviewAttachment(att)) return isOnlyUrl;
       return true;
     });
   }, [message.attachments, message.text]);
@@ -553,16 +674,15 @@ export const StickerMessage: React.FC<MessageRendererProps> = ({ message }) => {
 
   if (stickerUrl) {
     return (
-      <div style={{ position: 'relative', width: '120px', height: '120px', overflow: 'hidden' }}>
+      <div className="ermis-message-sticker-wrapper">
         {!loaded && <div className="ermis-attachment-shimmer" />}
         <img
           ref={imgRef}
-          className="ermis-message-sticker"
+          className={`ermis-message-sticker${loaded ? ' ermis-attachment--loaded' : ''}`}
           src={stickerUrl}
           alt="sticker"
           loading="lazy"
           onLoad={() => setLoaded(true)}
-          style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.3s ease', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'contain' }}
         />
       </div>
     );

package/src/components/PendingOverlay.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { AvatarProps } from '../types';
+
+export type PendingOverlayProps = {
+  channelImage?: string;
+  channelName?: string;
+  title: string;
+  subtitle: string;
+  acceptLabel: string;
+  rejectLabel: string;
+  onAccept: () => void;
+  onReject: () => void;
+  /** Label for the skip button (direct messaging channels) */
+  skipLabel?: string;
+  /** Handler for the skip action (direct messaging channels) */
+  onSkip?: () => void;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+};
+
+export const PendingOverlay: React.FC<PendingOverlayProps> = React.memo(({
+  channelImage,
+  channelName,
+  title,
+  subtitle,
+  acceptLabel,
+  rejectLabel,
+  onAccept,
+  onReject,
+  skipLabel,
+  onSkip,
+  AvatarComponent,
+}) => (
+  <div className="ermis-message-list__pending-overlay">
+    <div className="ermis-message-list__pending-card">
+      <AvatarComponent image={channelImage} name={channelName} size={64} className="ermis-message-list__pending-avatar" />
+      <span className="ermis-message-list__pending-overlay-title">{title}</span>
+      <div className="ermis-message-list__pending-channel-name">{channelName}</div>
+      <span className="ermis-message-list__pending-overlay-subtitle">{subtitle}</span>
+      <div className="ermis-message-list__pending-actions">
+        {onSkip ? (
+          <button className="ermis-message-list__reject-btn" onClick={onSkip}>{skipLabel || 'Skip'}</button>
+        ) : (
+          <button className="ermis-message-list__reject-btn" onClick={onReject}>{rejectLabel}</button>
+        )}
+        <button className="ermis-message-list__accept-btn" onClick={onAccept}>{acceptLabel}</button>
+      </div>
+    </div>
+  </div>
+));
+
+PendingOverlay.displayName = 'PendingOverlay';

package/src/components/PinnedMessages.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
+import { isStickerMessage } from '../messageTypeUtils';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import type { PinnedMessageItemProps, PinnedMessagesProps } from '../types';
@@ -25,7 +26,7 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
   }, [activeChannel?.state]);
 
   let previewText = message.text || '';
-  const isSticker = message.type === 'sticker';
+  const isSticker = isStickerMessage(message);
 
   if (!previewText && hasAttachments) {
     const firstAttach = message.attachments![0];

package/src/components/ReplyPreview.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
+import { isStickerMessage } from '../messageTypeUtils';
 import type { ReplyPreviewProps } from '../types';
 
 const MAX_PREVIEW_LENGTH = 120;
@@ -53,7 +54,7 @@ export const ReplyPreview: React.FC<ReplyPreviewProps> = React.memo(({
   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 isSticker = isStickerMessage(message);
   const attachmentSummary = hasAttachments ? getAttachmentSummary(message.attachments!) : '';
 
   // Build preview content

package/src/components/SkippedOverlay.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { AvatarProps } from '../types';
+
+export type SkippedOverlayProps = {
+  channelImage?: string;
+  channelName?: string;
+  title: string;
+  subtitle: string;
+  acceptLabel: string;
+  onAccept: () => void;
+  AvatarComponent: React.ComponentType<AvatarProps>;
+};
+
+export const SkippedOverlay: React.FC<SkippedOverlayProps> = React.memo(({
+  channelImage,
+  channelName,
+  title,
+  subtitle,
+  acceptLabel,
+  onAccept,
+  AvatarComponent,
+}) => (
+  <div className="ermis-message-list__pending-overlay">
+    <div className="ermis-message-list__pending-card">
+      <AvatarComponent image={channelImage} name={channelName} size={64} className="ermis-message-list__pending-avatar" />
+      <span className="ermis-message-list__pending-overlay-title">{title}</span>
+      <div className="ermis-message-list__pending-channel-name">{channelName}</div>
+      <span className="ermis-message-list__pending-overlay-subtitle">{subtitle}</span>
+      <div className="ermis-message-list__pending-actions">
+        <button className="ermis-message-list__accept-btn" onClick={onAccept}>{acceptLabel}</button>
+      </div>
+    </div>
+  </div>
+));
+
+SkippedOverlay.displayName = 'SkippedOverlay';

package/src/components/TopicModal.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useCallback } from 'react';
+import type { CreateTopicData, EditTopicData } from '@ermis-network/ermis-chat-sdk';
+import { Modal } from './Modal';
+import { useChatClient } from '../hooks/useChatClient';
+import type { TopicModalProps } from '../types';
+
+const DEFAULT_TOPIC_ICONS = ['💬', '🔥', '🚀', '⭐', '💡', '🎉', '📌', '📁', '🎨', '💻', '📈', '🤝'];
+
+export const TopicModal: React.FC<TopicModalProps> = React.memo(({
+  isOpen,
+  onClose,
+  onSuccess,
+  EmojiPickerComponent,
+  parentChannel,
+  topic,
+  title = topic ? 'Edit Topic' : 'Create Topic',
+  nameLabel = 'Topic Name',
+  namePlaceholder = 'Enter topic name',
+  emojiLabel = 'Topic icon',
+  descriptionLabel = 'Description',
+  descriptionPlaceholder = 'Enter topic description',
+  cancelButtonLabel = 'Cancel',
+  saveButtonLabel = topic ? 'Save' : 'Create',
+  savingButtonLabel = topic ? 'Saving...' : 'Creating...',
+}) => {
+  const { activeChannel, client } = useChatClient();
+  
+  const originalName = (topic?.data?.name as string) || '';
+  const originalImage = (topic?.data?.image as string) || '';
+  const originalEmoji = originalImage.startsWith('emoji://') ? originalImage.replace('emoji://', '') : '';
+  const originalDescription = (topic?.data?.description as string) || '';
+
+  const [name, setName] = useState(originalName);
+  const [emoji, setEmoji] = useState(originalEmoji);
+  const [description, setDescription] = useState(originalDescription);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const targetParent = parentChannel || activeChannel;
+
+  const handleSave = useCallback(async () => {
+    if (!name.trim() || !emoji) return;
+
+    // Resolve parent channel (owner of topics)
+    let editorParent = targetParent;
+    if (topic && topic.data?.parent_cid) {
+      editorParent = client.activeChannels[topic.data.parent_cid as string] || editorParent;
+    }
+    
+    if (!editorParent && !topic) return;
+
+    setIsSaving(true);
+    setError(null);
+
+    try {
+      if (topic) {
+        if (!editorParent) throw new Error("Parent channel not found");
+        
+        const payload: EditTopicData = {};
+        if (name.trim() !== originalName) payload.name = name.trim();
+        if (emoji !== originalEmoji) payload.image = emoji ? `emoji://${emoji}` : '';
+        if (description.trim() !== originalDescription) payload.description = description.trim();
+
+        if (Object.keys(payload).length > 0 && topic.cid) {
+          await editorParent.editTopic(topic.cid, payload);
+        }
+
+        if (onSuccess) {
+          onSuccess(topic);
+        } else {
+          onClose();
+        }
+      } else {
+        if (!editorParent) return;
+        const payload: CreateTopicData = {
+          name: name.trim(),
+        };
+
+        if (emoji) {
+          payload.image = `emoji://${emoji}`;
+        }
+        if (description.trim()) {
+          payload.description = description.trim();
+        }
+
+        await editorParent.createTopic(payload);
+
+        if (onSuccess) {
+          onSuccess(editorParent);
+        } else {
+          onClose();
+          setName('');
+          setEmoji('');
+          setDescription('');
+        }
+      }
+    } catch (err: any) {
+      setError(err?.message || (topic ? 'Failed to save topic' : 'Failed to create topic'));
+    } finally {
+      setIsSaving(false);
+    }
+  }, [targetParent, topic, name, emoji, description, originalName, originalEmoji, originalDescription, onSuccess, onClose, client.activeChannels]);
+
+  const isValid = name.trim().length > 0 && emoji.length > 0;
+
+  const footer = (
+    <div className="ermis-create-topic__footer">
+      <button className="ermis-create-topic__btn ermis-create-topic__btn--cancel" onClick={onClose} disabled={isSaving}>{cancelButtonLabel}</button>
+      <button className="ermis-create-topic__btn ermis-create-topic__btn--create" onClick={handleSave} disabled={isSaving || !isValid}>
+        {isSaving ? savingButtonLabel : saveButtonLabel}
+      </button>
+    </div>
+  );
+
+  return (
+    <Modal isOpen={isOpen} onClose={isSaving ? () => { } : onClose} title={title} maxWidth="400px" footer={footer}>
+      <div className="ermis-create-topic__body">
+        <div className="ermis-create-topic__live-preview">
+          <span className="ermis-create-topic__live-preview-emoji">{emoji || <span style={{opacity: 0.3}}>#</span>}</span>
+          <span className="ermis-create-topic__live-preview-name">{name || namePlaceholder}</span>
+        </div>
+
+        <div className="ermis-create-topic__field">
+          <label className="ermis-create-topic__label">{nameLabel} <span className="ermis-create-topic__required">*</span></label>
+          <input
+            className="ermis-create-topic__input"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={namePlaceholder}
+            disabled={isSaving}
+            maxLength={100}
+            autoFocus
+          />
+        </div>
+
+        <div className="ermis-create-topic__field">
+          <label className="ermis-create-topic__label">{emojiLabel} <span className="ermis-create-topic__required">*</span></label>
+
+          <div className="ermis-create-topic__emoji-picker">
+            {EmojiPickerComponent ? (
+              <EmojiPickerComponent onSelect={(e: any) => setEmoji(e.native || e.emoji || e.id || e)} />
+            ) : (
+              <div className="ermis-create-topic__default-icons">
+                {DEFAULT_TOPIC_ICONS.map(icon => (
+                  <button
+                    key={icon}
+                    type="button"
+                    className={`ermis-create-topic__default-icon ${icon === emoji ? 'ermis-create-topic__default-icon--active' : ''}`}
+                    onClick={() => setEmoji(icon)}
+                    disabled={isSaving}
+                  >
+                    {icon}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="ermis-create-topic__field">
+          <label className="ermis-create-topic__label">{descriptionLabel}</label>
+          <textarea
+            className="ermis-create-topic__input"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={descriptionPlaceholder}
+            disabled={isSaving}
+            rows={3}
+            maxLength={500}
+            style={{ resize: 'vertical' }}
+          />
+        </div>
+
+        {error && (
+          <div className="ermis-create-topic__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>
+  );
+});
+
+TopicModal.displayName = 'TopicModal';