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

package/src/components/VirtualMessageList.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
 import { VList as _VList, type VListHandle } from 'virtua';
 
 // Workaround for React 19 JSX element type mismatch with virtua's VList
@@ -21,6 +21,7 @@ import {
   defaultMessageRenderers,
   type MessageBubbleProps,
 } from './MessageRenderers';
+import { isStickerMessage } from '../messageTypeUtils';
 import { getDateKey, formatDateLabel, getMessageUserId, formatReadTimestamp } from '../utils';
 import { QuotedMessagePreview } from './QuotedMessagePreview';
 import { PinnedMessages } from './PinnedMessages';
@@ -44,6 +45,20 @@ const DefaultDateSeparator: React.FC<{ label: string }> = React.memo(({ label })
 ));
 (DefaultDateSeparator as any).displayName = 'DefaultDateSeparator';
 
+/** Time gap threshold in ms: messages more than 5 minutes apart get a time separator */
+const TIME_GAP_THRESHOLD_MS = 5 * 60 * 1000;
+
+function getTimestamp(date: Date | string | undefined): number {
+  if (!date) return 0;
+  return date instanceof Date ? date.getTime() : new Date(date).getTime();
+}
+
+function formatTimeSeparator(date: Date | string | undefined): string {
+  if (!date) return '';
+  const d = date instanceof Date ? date : new Date(date);
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
 const DefaultJumpToLatest = React.memo(({ onClick, label = '↓ Jump to latest' }: any) => (
   <button className="ermis-message-list__jump-latest" onClick={onClick}>
     {label}
@@ -153,6 +168,12 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   collapseLabel,
   unpinLabel,
   stickerLabel,
+  attachmentLabel = 'Attachment',
+  unavailableMessageLabel = 'Message unavailable',
+  encryptedMessageLabel,
+  encryptedMessageFailedLabel,
+  encryptedMessageDecryptingLabel,
+  encryptedMessageUnavailableLabel,
   typingIndicatorLabel,
   deletedMessageLabel = 'This message was deleted',
   systemMessageTranslations,
@@ -246,8 +267,6 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
         } as any);
       }
 
-      // Re-watch to get full fresh state from server
-      activeChannel.watch().catch(() => {});
     } catch (e: any) {
       console.error('Error accepting invite', e);
     }
@@ -273,11 +292,13 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     }
   }, [activeChannel, setActiveChannel]);
 
+  const elementsCountRef = useRef(0);
+
   const scrollToBottom = useCallback((smooth = false, attempts = 0) => {
     const handle = vlistRef.current;
     if (!handle) return;
 
-    const count = messagesRef.current.length;
+    const count = elementsCountRef.current;
     if (count === 0) return;
 
     // Ensure virtua has measured the viewport via ResizeObserver.
@@ -287,11 +308,26 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
       return;
     }
 
+    if (!smooth && handle.scrollSize > handle.viewportSize) {
+      handle.scrollTo(Math.max(0, handle.scrollSize - handle.viewportSize));
+    }
     handle.scrollToIndex(count - 1, { align: 'end', smooth });
   }, []);
 
   // Shared guard: skip scroll-triggered loads during jump transitions
   const jumpingRef = useRef(false);
+  const scrollLoadLockRef = useRef(false);
+  const scrollLoadLockTokenRef = useRef(0);
+  const holdScrollLoadLock = useCallback((duration = 750) => {
+    const token = scrollLoadLockTokenRef.current + 1;
+    scrollLoadLockTokenRef.current = token;
+    scrollLoadLockRef.current = true;
+    setTimeout(() => {
+      if (scrollLoadLockTokenRef.current === token) {
+        scrollLoadLockRef.current = false;
+      }
+    }, duration);
+  }, []);
 
   /* ---------- Hooks ---------- */
   const {
@@ -305,9 +341,23 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     vlistRef,
     messagesRef,
     jumpingRef,
+    scrollLoadLockRef,
     loadMoreLimit,
   });
 
+  const isNearBottom = useCallback(() => {
+    const handle = vlistRef.current;
+    if (!handle) return isAtBottomRef.current;
+
+    const { scrollOffset, scrollSize, viewportSize } = handle;
+    if (!Number.isFinite(scrollOffset) || !Number.isFinite(scrollSize) || !Number.isFinite(viewportSize)) {
+      return isAtBottomRef.current;
+    }
+    if (scrollSize <= viewportSize || viewportSize <= 0) return true;
+
+    return scrollSize - (scrollOffset + viewportSize) <= 160;
+  }, [isAtBottomRef]);
+
   const { highlightedId, scrollToMessage, jumpToLatest } = useScrollToMessage({
     vlistRef,
     messagesRef,
@@ -328,6 +378,8 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
 
   useChannelMessages({
     scrollToBottom,
+    isNearBottom,
+    holdScrollLoadLock,
     jumpingRef,
     isAtBottomRef,
     onChannelSwitch: useCallback(() => {
@@ -340,6 +392,34 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     containerRef,
   });
 
+  const lastAutoScrollKeyRef = useRef<string | null>(null);
+
+  useLayoutEffect(() => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage?.id || !currentUserId) return;
+
+    const key = `${activeChannel?.cid || ''}:${lastMessage.id}`;
+    if (lastAutoScrollKeyRef.current === key) return;
+
+    const isOwnLastMessage =
+      lastMessage.user_id === currentUserId || lastMessage.user?.id === currentUserId;
+    if (!isOwnLastMessage && !isAtBottomRef.current && !isNearBottom()) return;
+    if (!isOwnLastMessage && jumpingRef.current) return;
+    if (loadingMoreRef.current || loadingNewerRef.current) return;
+
+    lastAutoScrollKeyRef.current = key;
+    isAtBottomRef.current = true;
+    holdScrollLoadLock(750);
+
+    scrollToBottom(false);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => scrollToBottom(false));
+    });
+    setTimeout(() => scrollToBottom(false), 80);
+    setTimeout(() => scrollToBottom(false), 180);
+    setTimeout(() => scrollToBottom(false), 360);
+  }, [activeChannel?.cid, currentUserId, messages, scrollToBottom, isNearBottom, holdScrollLoadLock]);
+
   const hasOverlay = Boolean(isClosedTopic || isPending || isBanned || isBlocked || isSkipped);
   const prevOverlayRef = useRef(hasOverlay);
 
@@ -383,112 +463,245 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
 
   /* ---------- Memoized message elements ---------- */
   const messageElements = useMemo(() => {
-    return messages.map((message, index) => {
+    const elements: React.ReactNode[] = [];
+
+    // Pre-compute per-message data
+    type MsgEntry = {
+      message: typeof messages[0];
+      index: number;
+      isOwnMessage: boolean;
+      messageType: MessageLabel;
+      showDateSeparator: boolean;
+      isFirstInGroup: boolean;
+      isLastInGroup: boolean;
+      validReaders: Array<{ id: string; name?: string; avatar?: string; last_read?: Date | string }>;
+      hasReaders: boolean;
+    };
+    const entries: MsgEntry[] = messages.map((message, index) => {
       const isOwnMessage =
         message.user_id === currentUserId || message.user?.id === currentUserId;
-      const messageType = (message.type || 'regular') as MessageLabel;
+      const messageType = (
+        isStickerMessage(message) ? 'sticker' : (message.type || 'regular')
+      ) as MessageLabel;
 
       // Date separator
       const prevMsg = index > 0 ? messages[index - 1] : null;
       const showDateSeparator =
         !prevMsg || getDateKey(message.created_at) !== getDateKey(prevMsg.created_at);
-      const dateSeparator = showDateSeparator ? (
-        <DateSeparatorComponent label={formatDateLabel(message.created_at, dateLocale)} />
-      ) : null;
-
-      if (renderMessage) {
-        return (
-          <div key={message.id || `msg-${index}`}>
-            {dateSeparator}
-            <div>{renderMessage(message, isOwnMessage)}</div>
-          </div>
-        );
-      }
-
-      if (messageType === 'system') {
-        return (
-          <div key={message.id || `msg-${index}`}>
-            {dateSeparator}
-            <SystemMessageItemComponent
-              message={message}
-              isOwnMessage={isOwnMessage}
-              SystemRenderer={renderers.system}
-              systemMessageTranslations={systemMessageTranslations}
-            />
-          </div>
-        );
-      }
-
-      // Message grouping
       const prevType = (prevMsg?.type || 'regular') as MessageLabel;
-      const prevValidReaders = prevMsg?.id && readByMap[prevMsg.id] ? readByMap[prevMsg.id].filter(r => r.id !== getMessageUserId(prevMsg)) : [];
-      const prevHasReaders = showReadReceipts && prevValidReaders.length > 0;
-      
+      const prevTimeGap = prevMsg
+        ? Math.abs(getTimestamp(message.created_at) - getTimestamp(prevMsg.created_at)) > TIME_GAP_THRESHOLD_MS
+        : false;
       const isFirstInGroup =
         showDateSeparator ||
         !prevMsg ||
         prevType === 'system' ||
         prevType === 'signal' ||
         getMessageUserId(prevMsg) !== getMessageUserId(message) ||
-        prevHasReaders;
-
+        prevTimeGap;
       const nextMsg = index < messages.length - 1 ? messages[index + 1] : null;
       const nextType = (nextMsg?.type || 'regular') as MessageLabel;
       const nextShowDateSeparator = nextMsg
         ? getDateKey(nextMsg.created_at) !== getDateKey(message.created_at)
         : false;
-
       const validReaders = message.id && readByMap[message.id] ? readByMap[message.id].filter(r => r.id !== getMessageUserId(message)) : [];
       const hasReaders = showReadReceipts && validReaders.length > 0;
-
+      const nextTimeGap = nextMsg
+        ? Math.abs(getTimestamp(nextMsg.created_at) - getTimestamp(message.created_at)) > TIME_GAP_THRESHOLD_MS
+        : false;
       const isLastInGroup =
         !nextMsg ||
         nextShowDateSeparator ||
         nextType === 'system' ||
         nextType === 'signal' ||
         getMessageUserId(nextMsg) !== getMessageUserId(message) ||
-        hasReaders;
-
-      const MessageRenderer = renderers[messageType] || renderers.regular;
-
-      return (
-        <div key={message.id || `msg-${index}`}>
-          {dateSeparator}
-          <MessageItemComponent
-            message={message}
-            isOwnMessage={isOwnMessage}
-            isFirstInGroup={isFirstInGroup}
-            isLastInGroup={isLastInGroup}
-            isHighlighted={highlightedId === message.id}
-            AvatarComponent={AvatarComponent}
-            MessageBubble={MessageBubble}
-            MessageRenderer={MessageRenderer}
-            onClickQuote={scrollToMessage}
-            QuotedMessagePreviewComponent={QuotedMessagePreviewComponent}
-            MessageActionsBoxComponent={MessageActionsBoxComponent}
-            MessageReactionsComponent={MessageReactionsComponent}
-            deletedMessageLabel={deletedMessageLabel}
-            systemMessageTranslations={systemMessageTranslations}
-            signalMessageTranslations={signalMessageTranslations}
-            onMentionClick={onMentionClick}
-            onUserNameClick={onUserNameClick}
-            onAddReactionClick={onAddReactionClick}
-          />
-          {/* Read receipts — full width, right-aligned */}
-          {showReadReceipts && validReaders.length > 0 && (
-            <ReadReceiptsComponent
-              readers={validReaders}
-              maxAvatars={readReceiptsMaxAvatars}
-              AvatarComponent={AvatarComponent}
-              TooltipComponent={ReadReceiptsTooltipComponent}
-              isOwnMessage={isOwnMessage}
-              isLastInGroup={isLastInGroup}
-              status={message.status}
+        nextTimeGap;
+      return { message, index, isOwnMessage, messageType, showDateSeparator, isFirstInGroup, isLastInGroup, validReaders, hasReaders };
+    });
+
+    // Build groups: consecutive regular messages from same user
+    let i = 0;
+    while (i < entries.length) {
+      const entry = entries[i];
+
+      // Date separator before any message
+      if (entry.showDateSeparator) {
+        elements.push(
+          <div key={`date-${getDateKey(entry.message.created_at)}`}>
+            <DateSeparatorComponent label={formatDateLabel(entry.message.created_at, dateLocale)} />
+          </div>
+        );
+      }
+
+      // Custom renderMessage
+      if (renderMessage) {
+        elements.push(
+          <div key={entry.message.id || `msg-${entry.index}`}>
+            <div>{renderMessage(entry.message, entry.isOwnMessage)}</div>
+          </div>
+        );
+        i++;
+        continue;
+      }
+
+      // System messages — standalone
+      if (entry.messageType === 'system') {
+        elements.push(
+          <div key={entry.message.id || `msg-${entry.index}`}>
+            <SystemMessageItemComponent
+              message={entry.message}
+              isOwnMessage={entry.isOwnMessage}
+              SystemRenderer={renderers.system}
+              systemMessageTranslations={systemMessageTranslations}
             />
-          )}
+          </div>
+        );
+        i++;
+        continue;
+      }
+
+      // Collect consecutive regular/signal messages from the same user into a group
+      // Break group on: different user, system message, date separator, or time gap > 5min
+      const groupEntries: MsgEntry[] = [entry];
+      let j = i + 1;
+      while (j < entries.length) {
+        const nextEntry = entries[j];
+        const prevEntry = entries[j - 1];
+        const timeGap = Math.abs(
+          getTimestamp(nextEntry.message.created_at) - getTimestamp(prevEntry.message.created_at)
+        );
+        // Break group if: different user, system message, date separator, or time gap
+        if (
+          nextEntry.showDateSeparator ||
+          nextEntry.messageType === 'system' ||
+          getMessageUserId(nextEntry.message) !== getMessageUserId(entry.message) ||
+          timeGap > TIME_GAP_THRESHOLD_MS
+        ) {
+          break;
+        }
+        groupEntries.push(nextEntry);
+        j++;
+      }
+
+      const isOwn = entry.isOwnMessage;
+      const userName = entry.message.user?.name || entry.message.user_id;
+      const userAvatar = entry.message.user?.avatar;
+      const groupKey = `group-${entry.message.id || `g-${entry.index}`}`;
+
+      // Check if we need a time separator BEFORE this group
+      // (when previous group was from same user but time gap split them)
+      if (i > 0) {
+        const prevEntry = entries[i - 1];
+        const timeGap = Math.abs(
+          getTimestamp(entry.message.created_at) - getTimestamp(prevEntry.message.created_at)
+        );
+        if (
+          !entry.showDateSeparator &&
+          prevEntry.messageType !== 'system' &&
+          getMessageUserId(prevEntry.message) === getMessageUserId(entry.message) &&
+          timeGap > TIME_GAP_THRESHOLD_MS
+        ) {
+          elements.push(
+            <div key={`timesep-${entry.message.id}`}>
+              <div className="ermis-message-list__time-separator">
+                <span className="ermis-message-list__time-separator-label">
+                  {formatTimeSeparator(entry.message.created_at)}
+                </span>
+              </div>
+            </div>
+          );
+        }
+      }
+
+      // Render group wrapper with sticky avatar
+      elements.push(
+        <div key={groupKey}>
+          <div className={`ermis-message-group ${isOwn ? 'ermis-message-group--own' : 'ermis-message-group--other'}`}>
+            {/* Avatar column — sticky for scroll tracking */}
+            {!isOwn && (
+              <div className="ermis-message-group__avatar-col">
+                <AvatarComponent image={userAvatar} name={userName} size={36} />
+              </div>
+            )}
+            {/* Messages column */}
+            <div className="ermis-message-group__messages-col">
+              {groupEntries.map((ge) => {
+                const MessageRenderer = renderers[ge.messageType] || renderers.regular;
+                return (
+                  <React.Fragment key={ge.message.id || `msg-${ge.index}`}>
+                    {/* Date separators within group (if needed for mid-group entries) */}
+                    {ge !== entry && ge.showDateSeparator && (
+                      <DateSeparatorComponent label={formatDateLabel(ge.message.created_at, dateLocale)} />
+                    )}
+                    <MessageItemComponent
+                      message={ge.message}
+                      isOwnMessage={ge.isOwnMessage}
+                      isFirstInGroup={ge.isFirstInGroup}
+                      isLastInGroup={ge.isLastInGroup}
+                      isHighlighted={highlightedId === ge.message.id}
+                      AvatarComponent={AvatarComponent}
+                      MessageBubble={MessageBubble}
+                      MessageRenderer={MessageRenderer}
+                      onClickQuote={scrollToMessage}
+                      QuotedMessagePreviewComponent={QuotedMessagePreviewComponent}
+                      MessageActionsBoxComponent={MessageActionsBoxComponent}
+                      MessageReactionsComponent={MessageReactionsComponent}
+                      deletedMessageLabel={deletedMessageLabel}
+                      attachmentLabel={attachmentLabel}
+                      unavailableMessageLabel={unavailableMessageLabel}
+                      stickerLabel={stickerLabel}
+                      encryptedMessageLabel={encryptedMessageLabel}
+                      encryptedMessageFailedLabel={encryptedMessageFailedLabel}
+                      encryptedMessageDecryptingLabel={encryptedMessageDecryptingLabel}
+                      systemMessageTranslations={systemMessageTranslations}
+                      signalMessageTranslations={signalMessageTranslations}
+                      onMentionClick={onMentionClick}
+                      onUserNameClick={onUserNameClick}
+                      onAddReactionClick={onAddReactionClick}
+                      hideAvatar
+                    />
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          </div>
+          {/* Read receipts — consolidated: merge all readers in this group into one row */}
+          {(() => {
+            if (!showReadReceipts) return null;
+            const allReaders: Array<{ id: string; name?: string; avatar?: string; last_read?: Date | string }> = [];
+            const seen = new Set<string>();
+            for (const ge of groupEntries) {
+              for (const r of ge.validReaders) {
+                if (!seen.has(r.id)) {
+                  seen.add(r.id);
+                  allReaders.push(r);
+                }
+              }
+            }
+            if (allReaders.length === 0) return null;
+            const lastEntry = groupEntries[groupEntries.length - 1];
+            return (
+              <ReadReceiptsComponent
+                key={`receipt-${lastEntry.message.id}`}
+                readers={allReaders}
+                maxAvatars={readReceiptsMaxAvatars}
+                AvatarComponent={AvatarComponent}
+                TooltipComponent={ReadReceiptsTooltipComponent}
+                isOwnMessage={lastEntry.isOwnMessage}
+                isLastInGroup={lastEntry.isLastInGroup}
+                status={lastEntry.message.status}
+              />
+            );
+          })()}
         </div>
       );
-    });
+
+      i = j;
+    }
+
+
+    elementsCountRef.current = elements.length;
+    return elements;
   }, [
     messages,
     currentUserId,
@@ -513,6 +726,9 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
     onMentionClick,
     onUserNameClick,
     onAddReactionClick,
+    encryptedMessageLabel,
+    encryptedMessageFailedLabel,
+    encryptedMessageDecryptingLabel,
   ]);
 
   if (isBanned || isBlocked) {
@@ -574,52 +790,56 @@ export const VirtualMessageList: React.FC<MessageListProps> = React.memo(({
   }
 
   return (
-    <div ref={containerRef} className={`ermis-message-list${className ? ` ${className}` : ''}`}>
-      {showPinnedMessages && (
-        <PinnedMessagesComponent
-          onClickMessage={scrollToMessage}
-          AvatarComponent={AvatarComponent}
-          pinnedMessagesLabel={pinnedMessagesLabel}
-          seeAllLabel={seeAllLabel}
-          collapseLabel={collapseLabel}
-          unpinLabel={unpinLabel}
-          stickerLabel={stickerLabel}
-        />
-      )}
-
-      {messages.length === 0 && (
-        EmptyStateIndicator === DefaultEmpty
-          ? <DefaultEmpty title={emptyTitle} subtitle={emptySubtitle} />
-          : <EmptyStateIndicator />
-      )}
-
-      {pendingInviteeName && (
-        <PendingInviteeNotificationComponent
-          inviteeName={pendingInviteeName}
-          label={typeof pendingInviteeLabel === 'function' ? pendingInviteeLabel(pendingInviteeName) : pendingInviteeLabel}
-        />
-      )}
-
-      <VList
-        key={activeChannel?.cid || 'empty'}
-        ref={vlistRef}
-        shift={shiftMode}
-        onScroll={handleScroll}
-        className="ermis-message-list__vlist"
-      >
-        {messageElements}
-      </VList>
-
-      {/* Typing indicator */}
-      {showTypingIndicator && <TypingIndicatorComponent typingIndicatorLabel={typingIndicatorLabel} />}
+    <>
+      <div ref={containerRef} className={`ermis-message-list${className ? ` ${className}` : ''}`}>
+        {showPinnedMessages && (
+          <PinnedMessagesComponent
+            onClickMessage={scrollToMessage}
+            AvatarComponent={AvatarComponent}
+            pinnedMessagesLabel={pinnedMessagesLabel}
+            seeAllLabel={seeAllLabel}
+            collapseLabel={collapseLabel}
+            unpinLabel={unpinLabel}
+            stickerLabel={stickerLabel}
+            attachmentLabel={attachmentLabel}
+            unavailableMessageLabel={unavailableMessageLabel}
+          />
+        )}
+
+        {messages.length === 0 && (
+          EmptyStateIndicator === DefaultEmpty
+            ? <DefaultEmpty title={emptyTitle} subtitle={emptySubtitle} />
+            : <EmptyStateIndicator />
+        )}
+
+        {pendingInviteeName && (
+          <PendingInviteeNotificationComponent
+            inviteeName={pendingInviteeName}
+            label={typeof pendingInviteeLabel === 'function' ? pendingInviteeLabel(pendingInviteeName) : pendingInviteeLabel}
+          />
+        )}
+
+        <VList
+          key={activeChannel?.cid || 'empty'}
+          ref={vlistRef}
+          shift={shiftMode}
+          onScroll={handleScroll}
+          className="ermis-message-list__vlist"
+        >
+          {messageElements}
+        </VList>
+
+        {/* Jump to latest button */}
+        {hasNewer && (
+          JumpToLatestButton === DefaultJumpToLatest
+            ? <DefaultJumpToLatest onClick={jumpToLatest} label={jumpToLatestLabel} />
+            : <JumpToLatestButton onClick={jumpToLatest} />
+        )}
+      </div>
 
-      {/* Jump to latest button */}
-      {hasNewer && (
-        JumpToLatestButton === DefaultJumpToLatest
-          ? <DefaultJumpToLatest onClick={jumpToLatest} label={jumpToLatestLabel} />
-          : <JumpToLatestButton onClick={jumpToLatest} />
-      )}
-    </div>
+      {/* Typing indicator — outside message list, flows between messages and input */}
+      {showTypingIndicator && <TypingIndicatorComponent typingIndicatorLabel={typingIndicatorLabel} />}
+    </>
   );
 });
 

package/src/context/ChatProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useCallback, useRef } from 'react';
+import React, { createContext, useState, useCallback, useRef, useMemo } from 'react';
 import type { Channel, FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import type { Theme, ChatContextValue, ChatProviderProps, ReadStateEntry } from '../types';
 import { ErmisCallProvider } from '../components/ErmisCallProvider';
@@ -40,6 +40,10 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   const activeChannel = activeChannelRaw;
   const activeChannelCidRef = useRef<string | null>(null);
 
+  // In-memory draft storage — Map<cid, { html: string; files: any[] }>
+  // O(1) lookup/insert/delete, bounded by number of visited channels per session
+  const draftsRef = useRef<Map<string, { html: string; files: any[] }>>(new Map());
+
   const setActiveChannel = useCallback((channel: Channel | null) => {
     const newCid = channel?.cid || null;
     if (activeChannelCidRef.current === newCid) return;
@@ -59,6 +63,25 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     }
   }, [activeChannel]);
 
+  /** Save a draft message (innerHTML and files) for a specific channel */
+  const setDraft = useCallback((cid: string, draft: { html: string; files: any[] }) => {
+    if ((draft.html && draft.html.trim()) || (draft.files && draft.files.length > 0)) {
+      draftsRef.current.set(cid, draft);
+    } else {
+      draftsRef.current.delete(cid);
+    }
+  }, []);
+
+  /** Retrieve the saved draft for a specific channel */
+  const getDraft = useCallback((cid: string): { html: string; files: any[] } | undefined => {
+    return draftsRef.current.get(cid);
+  }, []);
+
+  /** Clear all saved drafts (e.g. on logout) */
+  const clearAllDrafts = useCallback(() => {
+    draftsRef.current.clear();
+  }, []);
+
   const value: ChatContextValue = {
     client,
     activeChannel,
@@ -79,6 +102,9 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     jumpToMessageId,
     setJumpToMessageId,
     enableCall,
+    setDraft,
+    getDraft,
+    clearAllDrafts,
   };
 
   const CallUIView = CallUIComponent ? <CallUIComponent /> : (