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

package/src/hooks/useDownloadHandler.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import { useChatClient } from './useChatClient';
+
+export const useDownloadHandler = () => {
+  const { client } = useChatClient();
+
+  const downloadFile = useCallback(async (url: string | undefined, filename?: string) => {
+    if (!url) return;
+
+    try {
+      const blob = await client.downloadMedia(url);
+      const urlBlob = window.URL.createObjectURL(blob);
+      
+      const a = document.createElement('a');
+      a.style.display = 'none';
+      a.href = urlBlob;
+      a.download = filename || 'file';
+      document.body.appendChild(a);
+      
+      a.click();
+      
+      // Cleanup after a delay to ensure the browser has started the download
+      setTimeout(() => {
+        if (document.body.contains(a)) {
+          document.body.removeChild(a);
+        }
+        window.URL.revokeObjectURL(urlBlob);
+      }, 1000);
+    } catch (err) {
+      console.warn('Download failed, falling back to new tab:', err);
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  }, [client]);
+
+  return { downloadFile };
+};

package/src/hooks/useDragAndDrop.ts

@@ -0,0 +1,79 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { isHeicFile, isVideoFile } from '@ermis-network/ermis-chat-sdk';
+
+export function useDragAndDrop(
+  onFilesDrop: (files: FileList) => void,
+  disabled: boolean = false
+) {
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounter = useRef(0);
+
+  const handleDragEnter = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    if (disabled) return;
+
+    dragCounter.current += 1;
+
+    // Only allow files
+    if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {
+      const hasFiles = Array.from(e.dataTransfer.items).some(
+        (item) => item.kind === 'file'
+      );
+      if (hasFiles) {
+        setIsDragging(true);
+      }
+    }
+  }, [disabled]);
+
+  const handleDragLeave = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    if (disabled) return;
+
+    dragCounter.current -= 1;
+    if (dragCounter.current === 0) {
+      setIsDragging(false);
+    }
+  }, [disabled]);
+
+  const handleDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    dragCounter.current = 0;
+    setIsDragging(false);
+
+    if (disabled) return;
+
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+      onFilesDrop(e.dataTransfer.files);
+    }
+  }, [disabled, onFilesDrop]);
+
+  useEffect(() => {
+    // Attach to the entire window so anywhere the user drags a file in the chat layout, it works
+    window.addEventListener('dragenter', handleDragEnter);
+    window.addEventListener('dragleave', handleDragLeave);
+    window.addEventListener('dragover', handleDragOver);
+    window.addEventListener('drop', handleDrop);
+
+    return () => {
+      window.removeEventListener('dragenter', handleDragEnter);
+      window.removeEventListener('dragleave', handleDragLeave);
+      window.removeEventListener('dragover', handleDragOver);
+      window.removeEventListener('drop', handleDrop);
+    };
+  }, [handleDragEnter, handleDragLeave, handleDragOver, handleDrop]);
+
+  return {
+    isDragging,
+  };
+}

package/src/hooks/useForwardMessage.ts

@@ -0,0 +1,112 @@
+import { useState, useMemo, useCallback } from 'react';
+import type { Channel, FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
+import { createForwardMessagePayload } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+import { removeAccents } from '../utils';
+import { isPendingMember, isSkippedMember } from '../channelRoleUtils';
+
+export function useForwardMessage(message: FormatMessageResponse, onDismiss: () => void) {
+  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);
+
+  /* ---------- Get channels from client state (include topics) ---------- */
+  const channels = useMemo(() => {
+    return (Object.values(client.activeChannels) as Channel[]).filter((ch) => {
+      const role = ch.state?.membership?.channel_role as string;
+      return !isPendingMember(role) && !isSkippedMember(role);
+    });
+  }, [client.activeChannels]);
+
+  /* ---------- Filter by search ---------- */
+  const filteredChannels = useMemo(() => {
+    if (!search.trim()) return channels;
+    const q = search.toLowerCase();
+    const cleanQ = removeAccents(q);
+    const isStrict = q !== cleanQ;
+
+    return channels.filter((ch) => {
+      const name = (ch.data?.name || ch.cid) as string;
+      const t = name.toLowerCase();
+      const cleanT = removeAccents(t);
+
+      const parentCid = ch.data?.parent_cid as string | undefined;
+      const parent = parentCid ? client.activeChannels[parentCid] : null;
+      const parentName = parent?.data?.name || '';
+      const pt = parentName.toLowerCase();
+      const cleanPT = removeAccents(pt);
+
+      if (isStrict) {
+        // Strict match when query has accents
+        return t.includes(q) || pt.includes(q);
+      } else {
+        // Broad match when query is accent-less
+        return cleanT.includes(cleanQ) || cleanPT.includes(cleanQ);
+      }
+    });
+  }, [channels, search, client.activeChannels]);
+
+  /* ---------- 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]);
+
+  return {
+    search,
+    setSearch,
+    selectedChannels,
+    toggleChannel,
+    sending,
+    results,
+    setResults,
+    filteredChannels,
+    handleSend,
+  };
+}

package/src/hooks/useInviteChannels.ts

@@ -0,0 +1,88 @@
+import { useEffect, useState, useMemo } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { useChatClient } from './useChatClient';
+import { isPendingMember } from '../channelRoleUtils';
+import { isTopicChannel } from '../channelTypeUtils';
+
+/**
+ * A hook that retrieves all pending invite channels from the SDK's local cache
+ * without triggering an extra API network query.
+ *
+ * Re-renders automatically when related events (e.g., invites, accepts, deletes) arrive.
+ */
+export function useInviteChannels(): Channel[] {
+  const { client } = useChatClient();
+  const [updateCount, setUpdateCount] = useState(0);
+
+  useEffect(() => {
+    if (!client) return;
+
+    const forceUpdate = () => setUpdateCount((c) => c + 1);
+
+    const handleEvent = (event: any) => {
+      // If a new channel is created or we are added to it, wait for SDK initialization
+      const isNewChannelEvent =
+        event.type === 'member.added' ||
+        event.type === 'notification.added_to_channel' ||
+        event.type === 'channel.created';
+
+      if (isNewChannelEvent) {
+        const cid =
+          event.channel?.cid ||
+          event.cid ||
+          (event.channel_type && event.channel_id ? `${event.channel_type}:${event.channel_id}` : null);
+
+        if (cid) {
+          console.log('[useInviteChannels] Received new channel event:', event.type, cid);
+          let attempts = 0;
+          const checkInitialized = setInterval(() => {
+            attempts++;
+            const channel = client.activeChannels[cid];
+            if ((channel && channel.initialized) || attempts > 30) {
+              console.log(
+                '[useInviteChannels] Channel initialized or timeout:',
+                cid,
+                'initialized:',
+                channel?.initialized,
+                'attempts:',
+                attempts,
+              );
+              clearInterval(checkInitialized);
+              forceUpdate();
+            }
+          }, 100);
+          return;
+        }
+      }
+      setTimeout(forceUpdate, 0);
+    };
+
+    const listeners = [
+      client.on('channels.queried', handleEvent),
+      client.on('notification.invite_accepted', handleEvent),
+      client.on('notification.invite_rejected', handleEvent),
+      client.on('notification.invite_messaging_skipped', handleEvent),
+      client.on('channel.created', handleEvent),
+      client.on('channel.deleted', handleEvent),
+      client.on('notification.channel_deleted', handleEvent),
+      client.on('member.added', handleEvent),
+      client.on('member.removed', handleEvent),
+      client.on('notification.added_to_channel' as any, handleEvent),
+      client.on('notification.invited' as any, handleEvent),
+    ];
+
+    return () => listeners.forEach((l) => l.unsubscribe());
+  }, [client]);
+
+  return useMemo(() => {
+    if (!client) return [];
+
+    return Object.values(client.activeChannels).filter((ch) => {
+      // Exclude topic channels from the invites list
+      if (isTopicChannel(ch)) return false;
+
+      const ms = ch.state?.membership as Record<string, unknown> | undefined;
+      return isPendingMember(ms?.channel_role as string);
+    });
+  }, [client, updateCount]);
+}

package/src/hooks/useInviteCount.ts

@@ -0,0 +1,104 @@
+import { useState, useEffect } from 'react';
+import { useChatClient } from './useChatClient';
+import { isPendingMember } from '../channelRoleUtils';
+import { isTopicChannel } from '../channelTypeUtils';
+
+export const useInviteCount = () => {
+  const { client } = useChatClient();
+  const [inviteCount, setInviteCount] = useState(0);
+
+  useEffect(() => {
+    if (!client || !client.user) return;
+
+    const countInvites = () => {
+      let count = 0;
+      const channels = Object.values(client.activeChannels);
+      const userId = client.user?.id;
+      if (!userId) return 0;
+      for (const channel of channels) {
+        // Exclude topic channels from the count
+        if (isTopicChannel(channel)) continue;
+
+        const membership = channel.state?.membership || channel.state?.members?.[userId];
+        if (isPendingMember(membership?.channel_role as string)) {
+          count++;
+        }
+      }
+      return count;
+    };
+
+    // Calculate initial count
+    setInviteCount(countInvites());
+
+    const handleEvent = (event: any) => {
+      if (
+        event.type === 'channel.created' &&
+        (event.user?.id === client.user?.id || event.user_id === client.user?.id)
+      ) {
+        return;
+      }
+
+      // If a new channel is created or we are added to it, wait for SDK initialization
+      const isNewChannelEvent =
+        event.type === 'member.added' ||
+        event.type === 'notification.added_to_channel' ||
+        event.type === 'channel.created';
+
+      if (isNewChannelEvent) {
+        const cid =
+          event.channel?.cid ||
+          event.cid ||
+          (event.channel_type && event.channel_id ? `${event.channel_type}:${event.channel_id}` : null);
+
+        if (cid) {
+          console.log('[useInviteCount] Received new channel event:', event.type, cid);
+          let attempts = 0;
+          const checkInitialized = setInterval(() => {
+            attempts++;
+            const channel = client.activeChannels[cid];
+            if ((channel && channel.initialized) || attempts > 30) {
+              console.log(
+                '[useInviteCount] Channel initialized or timeout:',
+                cid,
+                'initialized:',
+                channel?.initialized,
+                'attempts:',
+                attempts,
+              );
+              clearInterval(checkInitialized);
+              const newCount = countInvites();
+              console.log('[useInviteCount] New invite count:', newCount);
+              setInviteCount(newCount);
+            }
+          }, 100);
+          return;
+        }
+      }
+
+      // Delay slightly to ensure client.activeChannels is updated by SDK internal handlers first
+      setTimeout(() => {
+        setInviteCount(countInvites());
+      }, 0);
+    };
+
+    const listeners = [
+      client.on('channels.queried', handleEvent),
+      client.on('notification.invite_accepted', handleEvent),
+      client.on('notification.invite_rejected', handleEvent),
+      client.on('notification.invite_messaging_skipped', handleEvent),
+      client.on('channel.created', handleEvent),
+      client.on('channel.deleted', handleEvent),
+      client.on('notification.channel_deleted', handleEvent),
+      client.on('member.added', handleEvent),
+      client.on('member.removed', handleEvent),
+      client.on('notification.added_to_channel' as any, handleEvent),
+      client.on('notification.invited' as any, handleEvent),
+    ];
+
+    return () => {
+      listeners.forEach((l) => l.unsubscribe());
+    };
+  }, [client]);
+
+  return { inviteCount };
+};

package/src/hooks/useMentions.ts

@@ -151,7 +151,6 @@ export function useMentions({
 
     for (const m of members) {
       if (m.id === currentUserId) continue; // skip self
-      if (activeMentionIds.has(m.id)) continue; // skip already mentioned
       if (q && !m.name.toLowerCase().includes(q)) continue; // filter by query
       result.push(m);
     }

package/src/hooks/useMessageActions.ts

@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
 import { useChatClient } from './useChatClient';
 import { useChannelCapabilities } from './useChannelCapabilities';
+import { usePreviewState } from './usePreviewState';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
-import { isSignalMessage, isSystemMessage } from '../messageTypeUtils';
+import { isSignalMessage, isSystemMessage, isStickerMessage } from '../messageTypeUtils';
 
 export type MessageActionList = {
   canEdit: boolean;
@@ -25,6 +26,7 @@ export type MessageActionList = {
 export const useMessageActions = (message: FormatMessageResponse, isOwnMessage: boolean): MessageActionList => {
   const { activeChannel, client } = useChatClient();
   const { isGroupChannel: isTeam, isOwner, hasCapability } = useChannelCapabilities();
+  const { isPreviewMode } = usePreviewState(activeChannel, client?.userID);
 
   // Only depend on the specific message fields we actually read
   const messageType = message.type;
@@ -53,9 +55,10 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
 
     const isSystem = isSystemMessage(message);
     const isSignal = isSignalMessage(message);
+    const isSticker = isStickerMessage(message);
     const isPinned = isPinnedFlag;
 
-    const canEdit = !isSystem && !isSignal && isOwnMessage;
+    const canEdit = !isPreviewMode && !isSystem && !isSignal && !isSticker && isOwnMessage;
 
     // Delete for everyone:
     // + Team channel: only the owner can perform this action natively.
@@ -63,13 +66,13 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
     const canDeleteForEveryoneTeam = isTeam && isOwner;
     const canDeleteForEveryoneMessaging = !isTeam && isOwnMessage;
 
-    const canDelete = !isSystem && (canDeleteForEveryoneTeam || canDeleteForEveryoneMessaging);
-    const canDeleteForMe = !isSystem;
-    const canReply = !isSystem && !isSignal;
-    const canQuote = !isSystem && !isSignal;
-    const canForward = !isSystem && !isSignal;
-    const canPin = !isSystem && !isSignal;
-    const canCopy = !isSystem && !isSignal && Boolean(message.text?.trim());
+    const canDelete = !isPreviewMode && !isSystem && (canDeleteForEveryoneTeam || canDeleteForEveryoneMessaging);
+    const canDeleteForMe = !isPreviewMode && !isSystem;
+    const canReply = !isPreviewMode && !isSystem && !isSignal;
+    const canQuote = !isPreviewMode && !isSystem && !isSignal;
+    const canForward = !isPreviewMode && !isSystem && !isSignal;
+    const canPin = !isPreviewMode && !isSystem && !isSignal;
+    const canCopy = !isSystem && !isSignal && Boolean(message.text?.trim()); // Allow copy even in preview mode
 
     const hasCapEdit = hasCapability('update-own-message');
     const hasCapDelete = !isTeam || isOwner || (isOwnMessage && hasCapability('delete-own-message'));
@@ -97,5 +100,5 @@ export const useMessageActions = (message: FormatMessageResponse, isOwnMessage:
       hasCapReply,
       hasCapQuote,
     };
-  }, [activeChannel, isTeam, isOwner, hasCapability, messageType, message.text, isPinnedFlag, isOwnMessage]); // Use capabilities from hook
+  }, [activeChannel, isTeam, isOwner, hasCapability, messageType, message.text, isPinnedFlag, isOwnMessage, isPreviewMode]); // Use capabilities from hook
 };

package/src/hooks/usePendingState.ts

@@ -10,6 +10,7 @@ export function usePendingState(channel: Channel | null | undefined, currentUser
     const membership = channel?.state?.membership || channel?.state?.members?.[currentUserId || ''];
     return isPendingMember(membership?.channel_role as string);
   });
+  const [inviteUpdateCount, setInviteUpdateCount] = useState(0);
 
   useEffect(() => {
     if (!channel || !currentUserId) {
@@ -18,6 +19,10 @@ export function usePendingState(channel: Channel | null | undefined, currentUser
     }
 
     const checkPending = () => {
+      // Topics are accessible by default if the user is in the parent channel.
+      // We ignore the individual pending invite state for topics to avoid redundant overlays.
+      if (channel.type === 'topic') return false;
+
       const membership = channel.state?.membership || channel.state?.members?.[currentUserId];
       return isPendingMember(membership?.channel_role as string);
     };
@@ -40,29 +45,41 @@ export function usePendingState(channel: Channel | null | undefined, currentUser
       const eventMember = event.member as Record<string, unknown>;
       const eventUser = event.user as Record<string, unknown>;
       const eventUserId = eventMember?.user_id || (eventMember?.user as Record<string, unknown>)?.id || eventUser?.id;
-      if (eventUserId !== currentUserId) return; // Only react to own invite events
 
       const eventCid =
         event.cid ||
         (event.channel as Record<string, unknown>)?.cid ||
         (event.channel_id ? `${event.channel_type}:${event.channel_id}` : undefined);
-      if (eventCid === channel.cid) {
+
+      if (eventCid !== channel.cid) return; // Only react to events on this channel
+
+      // If this event is for the current user, update their membership state
+      if (eventUserId === currentUserId) {
         defensiveUpdateState(event);
-        setIsPending(checkPending());
       }
+
+      // Re-check pending state regardless of which user triggered the event.
+      // This handles both cases:
+      // - Current user accepts/rejects their own invite
+      // - Another user accepts an invite (hide pending-invitee box on inviter's side)
+      setIsPending(checkPending());
+      setInviteUpdateCount(c => c + 1);
     };
 
     const client = channel.getClient();
     const sub1 = client.on('notification.invite_accepted', handleInviteAction);
     const sub2 = client.on('notification.invite_rejected', handleInviteAction);
     const sub3 = client.on('notification.invite_messaging_skipped', handleInviteAction);
+    // Public channel join sends 'member.joined' instead of 'notification.invite_accepted'
+    const sub4 = client.on('member.joined', handleInviteAction);
 
     return () => {
       sub1.unsubscribe();
       sub2.unsubscribe();
       sub3.unsubscribe();
+      sub4.unsubscribe();
     };
   }, [channel, currentUserId]);
 
-  return { isPending };
+  return { isPending, inviteUpdateCount };
 }

package/src/hooks/usePreviewState.ts

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+import { isPublicGroupChannel } from '../channelTypeUtils';
+
+/**
+ * Hook that tracks whether the current user is previewing a public channel
+ * without being a member.
+ */
+export function usePreviewState(channel: Channel | null | undefined, currentUserId?: string) {
+  const [isPreviewMode, setIsPreviewMode] = useState<boolean>(() => {
+    if (!channel || !currentUserId || !isPublicGroupChannel(channel)) return false;
+    const membership = channel?.state?.membership || channel?.state?.members?.[currentUserId];
+    const isMembershipEmpty = !membership || Object.keys(membership).length === 0;
+    return isMembershipEmpty;
+  });
+
+  useEffect(() => {
+    if (!channel || !currentUserId || !isPublicGroupChannel(channel)) {
+      setIsPreviewMode(false);
+      return;
+    }
+
+    const checkPreviewMode = () => {
+      const membership = channel.state?.membership || channel.state?.members?.[currentUserId];
+      const isMembershipEmpty = !membership || Object.keys(membership).length === 0;
+      return isMembershipEmpty;
+    };
+
+    // Sync initial state
+    setIsPreviewMode(checkPreviewMode());
+
+    const defensiveUpdateState = (event: Record<string, unknown>) => {
+      if (event.member && channel.state && channel.state.membership !== undefined) {
+        channel.state.membership = {
+          ...channel.state.membership,
+          ...(event.member as Record<string, unknown>),
+        } as unknown as Record<string, unknown>;
+      }
+    };
+
+    const handleMembershipChange = (event: Record<string, unknown>) => {
+      const eventMember = event.member as Record<string, unknown>;
+      const eventUser = event.user as Record<string, unknown>;
+      const eventUserId = eventMember?.user_id || (eventMember?.user as Record<string, unknown>)?.id || eventUser?.id;
+
+      // Only react if the event concerns the current user
+      if (eventUserId !== currentUserId) return;
+
+      const eventCid =
+        event.cid ||
+        (event.channel as Record<string, unknown>)?.cid ||
+        (event.channel_id ? `${event.channel_type}:${event.channel_id}` : undefined);
+
+      if (eventCid === channel.cid) {
+        defensiveUpdateState(event);
+        setIsPreviewMode(checkPreviewMode());
+      }
+    };
+
+    const client = channel.getClient();
+    const sub1 = client.on('member.joined', handleMembershipChange);
+
+    return () => {
+      sub1.unsubscribe();
+    };
+  }, [channel, currentUserId]);
+
+  return { isPreviewMode };
+}

package/src/hooks/useStickerPicker.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { Channel } from '@ermis-network/ermis-chat-sdk';
+
+export type UseStickerPickerOptions = {
+  activeChannel?: Channel | null;
+  stickerIframeUrl?: string;
+};
+
+export function useStickerPicker({
+  activeChannel,
+  stickerIframeUrl = 'https://sticker.ermis.network',
+}: UseStickerPickerOptions) {
+  const [stickerPickerOpen, setStickerPickerOpen] = useState(false);
+
+  const toggleStickerPicker = useCallback(() => {
+    setStickerPickerOpen((prev) => !prev);
+  }, []);
+
+  const closeStickerPicker = useCallback(() => {
+    setStickerPickerOpen(false);
+  }, []);
+
+  const handleStickerSend = useCallback(
+    async (stickerUrl: string) => {
+      if (!activeChannel) return;
+      try {
+        await activeChannel.sendMessage({
+          text: '',
+          attachments: [],
+          sticker_url: stickerUrl,
+        });
+        setStickerPickerOpen(false);
+      } catch (error) {
+        console.error('Failed to send sticker', error);
+      }
+    },
+    [activeChannel],
+  );
+
+  useEffect(() => {
+    if (!stickerPickerOpen) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const stickerUrl = event.data?.data?.content?.url;
+      if (!stickerUrl || typeof stickerUrl !== 'string') return;
+      const fullUrl = `${stickerIframeUrl}/${stickerUrl}`;
+      handleStickerSend(fullUrl);
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [stickerPickerOpen, stickerIframeUrl, handleStickerSend]);
+
+  return {
+    stickerPickerOpen,
+    toggleStickerPicker,
+    closeStickerPicker,
+    handleStickerSend,
+  };
+}