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

package/src/components/MessageQuickReactions.tsx

@@ -1,7 +1,16 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { EmojiPicker } from 'frimousse';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import { useChatClient } from '../hooks/useChatClient';
 
+const EmojiPickerRoot = EmojiPicker.Root as any;
+const EmojiPickerSearch = EmojiPicker.Search as any;
+const EmojiPickerViewport = EmojiPicker.Viewport as any;
+const EmojiPickerLoading = EmojiPicker.Loading as any;
+const EmojiPickerEmpty = EmojiPicker.Empty as any;
+const EmojiPickerList = EmojiPicker.List as any;
+
 const QUICK_REACTIONS = ['like', 'love', 'haha', 'sad', 'fire'];
 const EMOJI_MAP: Record<string, string> = {
   like: '👍',
@@ -15,9 +24,25 @@ export const MessageQuickReactions: React.FC<{
   message: FormatMessageResponse;
   isOwnMessage: boolean;
   disabled?: boolean;
-}> = React.memo(({ message, isOwnMessage, disabled }) => {
+  onAddReactionClick?: (e: React.MouseEvent, messageId: string) => void;
+}> = React.memo(({ message, isOwnMessage, disabled, onAddReactionClick }) => {
   const { activeChannel, client } = useChatClient();
   const currentUserId = client?.userID;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (isExpanded && containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsExpanded(false);
+      }
+    };
+    if (isExpanded) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isExpanded]);
 
   const handleReactionToggle = useCallback(
     async (type: string) => {
@@ -42,32 +67,134 @@ export const MessageQuickReactions: React.FC<{
   );
 
   return (
-    <div className={`ermis-message-quick-reactions ${isOwnMessage ? 'ermis-message-quick-reactions--own' : ''} ${disabled ? 'ermis-message-quick-reactions--disabled' : ''}`}>
-      {QUICK_REACTIONS.map((type) => {
-        const isOwn =
-          (message as any).own_reactions?.some((r: any) => r.type === type) ||
-          (message as any).latest_reactions?.some(
-            (r: any) => r.type === type && (r.user?.id === currentUserId || (r as any).user_id === currentUserId)
-          );
+    <motion.div 
+      ref={containerRef}
+      layout
+      transition={{ type: "spring", stiffness: 350, damping: 30 }}
+      className={`ermis-message-quick-reactions ${isOwnMessage ? 'ermis-message-quick-reactions--own' : ''} ${disabled ? 'ermis-message-quick-reactions--disabled' : ''} ${isExpanded ? 'ermis-message-quick-reactions--expanded' : ''}`}
+      style={{
+        overflow: 'hidden',
+        padding: isExpanded ? 0 : undefined,
+        width: isExpanded ? 350 : undefined,
+        height: isExpanded ? 368 : undefined,
+        borderRadius: isExpanded ? 16 : 20,
+        backgroundColor: isExpanded ? 'var(--ermis-bg-primary)' : undefined,
+        border: isExpanded ? '1px solid var(--ermis-border)' : undefined,
+        boxShadow: isExpanded ? '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)' : undefined,
+        zIndex: isExpanded ? 101 : 20,
+      }}
+    >
+      <AnimatePresence mode="popLayout">
+        {!isExpanded ? (
+          <motion.div
+            key="quick-reactions"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
+            style={{ display: 'flex', alignItems: 'center', gap: '2px' }}
+          >
+            {QUICK_REACTIONS.map((type) => {
+              const isOwn =
+                (message as any).own_reactions?.some((r: any) => r.type === type) ||
+                (message as any).latest_reactions?.some(
+                  (r: any) => r.type === type && (r.user?.id === currentUserId || (r as any).user_id === currentUserId)
+                );
 
-        return (
-          <button
-            key={type}
-            className={`ermis-message-quick-reactions__btn ${
-              isOwn ? 'ermis-message-quick-reactions__btn--active' : ''
-            }`}
-            title={type}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleReactionToggle(type);
-            }}
+              return (
+                <button
+                  key={type}
+                  className={`ermis-message-quick-reactions__btn ${
+                    isOwn ? 'ermis-message-quick-reactions__btn--active' : ''
+                  }`}
+                  title={type}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleReactionToggle(type);
+                  }}
+                >
+                  {EMOJI_MAP[type]}
+                </button>
+              );
+            })}
+            
+            <button
+              className="ermis-message-quick-reactions__btn ermis-message-quick-reactions__btn--more"
+              title="More reactions"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setIsExpanded(true);
+              }}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-zinc-500">
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+              </svg>
+            </button>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="full-picker"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            style={{ width: '100%', height: '100%' }}
+            onClick={(e) => e.stopPropagation()}
           >
-            {EMOJI_MAP[type]}
-          </button>
-        );
-      })}
-    </div>
+            <EmojiPickerRoot 
+              className="isolate flex h-full w-full flex-col bg-white dark:bg-[#1a1828]"
+              locale="vi"
+              onEmojiSelect={(emoji: any) => {
+                handleReactionToggle(emoji.emoji);
+                setIsExpanded(false);
+              }}
+            >
+              <EmojiPickerSearch className="z-10 mx-3 mt-3 appearance-none rounded-xl bg-zinc-100 px-3 py-2 text-sm dark:bg-zinc-800 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-primary/50" />
+              <EmojiPickerViewport className="relative flex-1 outline-hidden mt-2">
+                <EmojiPickerLoading className="absolute inset-0 flex items-center justify-center text-zinc-400 text-sm dark:text-zinc-500">
+                  Đang tải…
+                </EmojiPickerLoading>
+                <EmojiPickerEmpty className="absolute inset-0 flex items-center justify-center text-zinc-400 text-sm dark:text-zinc-500">
+                  Không tìm thấy emoji.
+                </EmojiPickerEmpty>
+                <EmojiPickerList
+                  className="select-none pb-1.5"
+                  components={{
+                    CategoryHeader: ({ category, ...props }: any) => (
+                      <div
+                        className="bg-white/90 px-3 pt-3 pb-1.5 font-semibold text-zinc-500 text-xs dark:bg-[#1a1828]/90 dark:text-zinc-400 backdrop-blur-md"
+                        {...props}
+                      >
+                        {category.label}
+                      </div>
+                    ),
+                    Row: ({ children, ...props }: any) => (
+                      <div className="scroll-my-1.5 px-2 flex justify-between" {...props}>
+                        {children as React.ReactNode}
+                      </div>
+                    ),
+                    Emoji: ({ emoji, ...props }: any) => {
+                      const { formAction, ...safeProps } = props;
+                      return (
+                        <button
+                          className="flex size-9 items-center justify-center rounded-lg text-xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors data-[active]:bg-zinc-100 dark:data-[active]:bg-zinc-800"
+                          {...safeProps}
+                        >
+                          {emoji.emoji}
+                        </button>
+                      );
+                    },
+                  }}
+                />
+              </EmojiPickerViewport>
+            </EmojiPickerRoot>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
   );
 });
 

package/src/components/MessageReactions.tsx

@@ -17,6 +17,7 @@ export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
   latestReactions,
   onClickReaction,
   disabled,
+  isOwnMessage,
 }) => {
   const { client } = useChatClient();
   const currentUserId = client?.userID;
@@ -24,7 +25,7 @@ export const MessageReactions: React.FC<MessageReactionsProps> = React.memo(({
   if (!reactionCounts || Object.keys(reactionCounts).length === 0) return null;
 
   return (
-    <div className={`ermis-message-reactions${disabled ? ' ermis-message-reactions--disabled' : ''}`}>
+    <div className={`ermis-message-reactions${disabled ? ' ermis-message-reactions--disabled' : ''}${isOwnMessage ? ' ermis-message-reactions--own' : ''}`}>
       {Object.entries(reactionCounts).map(([type, count]) => {
         const isOwn = 
           ownReactions?.some((r) => r.type === type) ||

package/src/components/MessageRenderers.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { preloadImage, isImagePreloaded } from '../utils';
+import { preloadImage, isImagePreloaded, formatTime } 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 { useDownloadHandler } from '../hooks/useDownloadHandler';
 import { buildUserMap } from '../utils';
 import { MediaLightbox } from './MediaLightbox';
 import { getFileIcon } from './ChannelInfo/utils';
@@ -198,27 +199,14 @@ const FileAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =>
   const size = attachment.file_size;
   const mimeType = attachment.mime_type || attachment.type || '';
   const ext = name.split('.').pop()?.toUpperCase() || 'FILE';
-  const { client } = useChatClient();
+
+  const { downloadFile } = useDownloadHandler();
 
   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]);
+    await downloadFile(url, name);
+  }, [downloadFile, url, name]);
 
   return (
     <div className="ermis-attachment ermis-attachment--file">
@@ -254,6 +242,87 @@ const FileAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) =>
 });
 (FileAttachment as any).displayName = 'FileAttachment';
 
+const PlayIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M8 5v14l11-7z" />
+  </svg>
+);
+
+const PauseIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+  </svg>
+);
+
+const MicIcon = () => (
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" />
+    <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+    <line x1="12" x2="12" y1="19" y2="22" />
+  </svg>
+);
+
+const CustomAudioPlayer: React.FC<{ src: string; durationLabel: string }> = ({ src, durationLabel }) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const audioRef = React.useRef<HTMLAudioElement>(null);
+
+  React.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const updateProgress = () => {
+      setProgress((audio.currentTime / audio.duration) * 100 || 0);
+    };
+    const onEnded = () => {
+      setIsPlaying(false);
+      setProgress(0);
+    };
+    audio.addEventListener('timeupdate', updateProgress);
+    audio.addEventListener('ended', onEnded);
+    return () => {
+      audio.removeEventListener('timeupdate', updateProgress);
+      audio.removeEventListener('ended', onEnded);
+    };
+  }, []);
+
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play().catch(e => console.error(e));
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, x / rect.width));
+    if (audioRef.current && audioRef.current.duration) {
+      audioRef.current.currentTime = percentage * audioRef.current.duration;
+      setProgress(percentage * 100);
+    }
+  };
+
+  return (
+    <div className="ermis-custom-audio-player">
+      <button className="ermis-custom-audio-play-btn" onClick={togglePlay} aria-label={isPlaying ? "Pause" : "Play"}>
+        {isPlaying ? <PauseIcon /> : <PlayIcon />}
+      </button>
+      <div className="ermis-custom-audio-progress-container">
+        <div className="ermis-custom-audio-progress-bg" onClick={handleSeek}>
+          <div className="ermis-custom-audio-progress-fill" style={{ width: `${progress}%` }} />
+          <div className="ermis-custom-audio-progress-thumb" style={{ left: `${progress}%` }} />
+        </div>
+      </div>
+      <span className="ermis-custom-audio-duration">{durationLabel}</span>
+      <audio ref={audioRef} src={src} preload="metadata" className="ermis-custom-audio-hidden" />
+    </div>
+  );
+};
+
 const VoiceRecordingAttachment: React.FC<AttachmentProps> = React.memo(({ attachment }) => {
   const src = attachment.asset_url || attachment.url;
   if (!src) return null;
@@ -263,13 +332,7 @@ const VoiceRecordingAttachment: React.FC<AttachmentProps> = React.memo(({ attach
   const secs = Math.round(durationSec % 60);
   const durationLabel = `${mins}:${secs.toString().padStart(2, '0')}`;
 
-  return (
-    <div className="ermis-attachment ermis-attachment--voice">
-      <span className="ermis-attachment__voice-icon">🎙️</span>
-      <audio src={src} controls preload="metadata" className="ermis-attachment__voice-player" />
-      <span className="ermis-attachment__voice-duration">{durationLabel}</span>
-    </div>
-  );
+  return <CustomAudioPlayer src={src} durationLabel={durationLabel} />;
 }, (prev, next) => {
   return (prev.attachment.asset_url || prev.attachment.url) ===
     (next.attachment.asset_url || next.attachment.url);
@@ -479,6 +542,7 @@ function renderTextWithMentions(
   text: string,
   message: FormatMessageResponse,
   userMap: Record<string, string>,
+  onMentionClick?: (userId: string) => void,
 ): React.ReactNode {
   const mentionedUsers: string[] = (message as any).mentioned_users ?? [];
   const mentionedAll: boolean = (message as any).mentioned_all ?? false;
@@ -489,17 +553,18 @@ function renderTextWithMentions(
   }
 
   // Build a list of patterns to replace: @userId → @userName
-  const replacements: { pattern: string; label: string }[] = [];
+  const replacements: { pattern: string; label: string; id: string }[] = [];
 
   for (const userId of mentionedUsers) {
     replacements.push({
       pattern: `@${userId}`,
       label: `@${userMap[userId] ?? userId}`,
+      id: userId,
     });
   }
 
   if (mentionedAll) {
-    replacements.push({ pattern: '@all', label: '@all' });
+    replacements.push({ pattern: '@all', label: '@all', id: 'all' });
   }
 
   // Build a regex that matches any of the mention patterns
@@ -511,15 +576,19 @@ function renderTextWithMentions(
   const parts = text.split(regex);
 
   // Map from pattern → label for quick lookup
-  const patternToLabel = new Map(replacements.map((r) => [r.pattern, r.label]));
+  const patternToLabel = new Map(replacements.map((r) => [r.pattern, r]));
 
   return parts.flatMap((part, i) => {
-    const label = patternToLabel.get(part);
-    if (label) {
+    const info = patternToLabel.get(part);
+    if (info) {
       // Mention — render as span, do NOT linkify
       return (
-        <span key={`mention-${i}`} className="ermis-mention">
-          {label}
+        <span 
+          key={`mention-${i}`} 
+          className={`ermis-mention${onMentionClick && info.id !== 'all' ? ' ermis-mention--clickable' : ''}`}
+          onClick={onMentionClick && info.id !== 'all' ? (e) => { e.stopPropagation(); onMentionClick(info.id); } : undefined}
+        >
+          {info.label}
         </span>
       );
     }
@@ -529,7 +598,7 @@ function renderTextWithMentions(
 }
 
 /** Regular message: text with @mentions + attachments */
-export const RegularMessage: React.FC<MessageRendererProps> = React.memo(({ message }) => {
+export const RegularMessage: React.FC<MessageRendererProps> = React.memo(({ message, onMentionClick }) => {
   const { activeChannel } = useChatClient();
 
   const userMap = useMemo<Record<string, string>>(() => {
@@ -537,7 +606,7 @@ export const RegularMessage: React.FC<MessageRendererProps> = React.memo(({ mess
   }, [activeChannel?.state]);
 
   const textContent = message.text
-    ? renderTextWithMentions(message.text, message, userMap)
+    ? renderTextWithMentions(message.text, message, userMap, onMentionClick)
     : null;
 
   const attachmentsToRender = useMemo(() => {
@@ -582,7 +651,7 @@ export const RegularMessage: React.FC<MessageRendererProps> = React.memo(({ mess
 RegularMessage.displayName = 'RegularMessage';
 
 /** System message: centered info text, parsed from raw format */
-export const SystemMessage: React.FC<MessageRendererProps> = ({ message }) => {
+export const SystemMessage: React.FC<MessageRendererProps> = ({ message, systemMessageTranslations }) => {
   const { activeChannel } = useChatClient();
 
   const userMap = useMemo<Record<string, string>>(() => {
@@ -590,8 +659,8 @@ export const SystemMessage: React.FC<MessageRendererProps> = ({ message }) => {
   }, [activeChannel?.state]);
 
   const parsedText = useMemo(
-    () => (message.text ? parseSystemMessage(message.text, userMap) : ''),
-    [message.text, userMap],
+    () => (message.text ? parseSystemMessage(message.text, userMap, systemMessageTranslations) : ''),
+    [message.text, userMap, systemMessageTranslations],
   );
 
   return (
@@ -602,11 +671,11 @@ export const SystemMessage: React.FC<MessageRendererProps> = ({ message }) => {
 };
 
 /** Signal message: call events */
-export const SignalMessage: React.FC<MessageRendererProps> = ({ message }) => {
+export const SignalMessage: React.FC<MessageRendererProps> = ({ message, signalMessageTranslations }) => {
   const { client } = useChatClient();
 
   const rawText = message.text ?? '';
-  const result = rawText ? parseSignalMessage(rawText, client.userID || '') : null;
+  const result = rawText ? parseSignalMessage(rawText, client.userID || '', signalMessageTranslations) : null;
 
   if (!result) {
     return (
@@ -642,6 +711,9 @@ export const SignalMessage: React.FC<MessageRendererProps> = ({ message }) => {
           <span className="ermis-signal-message__duration">{result.duration}</span>
         )}
       </div>
+      <span className="ermis-signal-message__time">
+        {formatTime(message.created_at)}
+      </span>
     </div>
   );
 };

package/src/components/Panel.tsx

@@ -1,19 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-export type PanelProps = {
-  /** Whether the panel is visible */
-  isOpen: boolean;
-  /** Called when user clicks the back button */
-  onClose: () => void;
-  /** Panel title shown in the header */
-  title?: string;
-  /** Panel body content */
-  children: React.ReactNode;
-  /** Optional header content (replaces default title + back button) */
-  headerContent?: React.ReactNode;
-  /** Additional CSS class name */
-  className?: string;
-};
+import type { PanelProps } from '../types';
 
 /**
  * Reusable sliding panel component.

package/src/components/PinnedMessages.tsx

@@ -15,6 +15,8 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
   onClickMessage,
   onUnpin,
   AvatarComponent,
+  unpinLabel = 'Unpin message',
+  stickerLabel = 'Sticker',
 }) => {
   const { activeChannel } = useChatClient();
   const userName = message.user?.name || message.user_id || 'Unknown';
@@ -32,7 +34,7 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
     const firstAttach = message.attachments![0];
     previewText = firstAttach.title || `${firstAttach.type || 'file'}`;
   } else if (isSticker) {
-    previewText = 'Sticker';
+    previewText = stickerLabel;
   }
 
   // Convert @userId → @UserName in preview text
@@ -67,8 +69,8 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
       <button
         className="ermis-pinned-messages__unpin-btn"
         onClick={(e) => { e.stopPropagation(); onUnpin?.(message.id); }}
-        title="Unpin message"
-        aria-label="Unpin message"
+        title={unpinLabel}
+        aria-label={unpinLabel}
       >
         <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" />
@@ -89,6 +91,11 @@ export const PinnedMessages: React.FC<PinnedMessagesProps> = React.memo(({
   PinnedMessageItemComponent = DefaultPinnedMessageItem,
   onClickMessage,
   maxCollapsed = 1,
+  pinnedMessagesLabel,
+  seeAllLabel = 'See all',
+  collapseLabel = 'Collapse',
+  unpinLabel = 'Unpin message',
+  stickerLabel = 'Sticker',
 }) => {
   const { activeChannel, client, messages } = useChatClient();
   const [expanded, setExpanded] = useState(false);
@@ -134,14 +141,17 @@ export const PinnedMessages: React.FC<PinnedMessagesProps> = React.memo(({
           <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' : ''}
+          {typeof pinnedMessagesLabel === 'function' 
+            ? pinnedMessagesLabel(pinnedMessages.length) 
+            : pinnedMessagesLabel || `${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'}
+            {expanded ? collapseLabel : seeAllLabel}
           </button>
         )}
       </div>
@@ -156,6 +166,8 @@ export const PinnedMessages: React.FC<PinnedMessagesProps> = React.memo(({
             onClickMessage={onClickMessage}
             onUnpin={handleUnpin}
             AvatarComponent={AvatarComponent}
+            unpinLabel={unpinLabel}
+            stickerLabel={stickerLabel}
           />
         ))}
       </div>

package/src/components/PreviewOverlay.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { PreviewOverlayProps } from '../types';
+
+export const PreviewOverlay: React.FC<PreviewOverlayProps> = ({
+  title = 'You are viewing a public channel.',
+  buttonLabel = 'Join Channel',
+  onJoin,
+  className = '',
+}) => {
+  return (
+    <div className={`ermis-preview-overlay ${className}`}>
+      <span className="ermis-preview-overlay__text">{title}</span>
+      <button
+        className="ermis-preview-overlay__button"
+        onClick={onJoin}
+        type="button"
+      >
+        {buttonLabel}
+      </button>
+    </div>
+  );
+};
+
+PreviewOverlay.displayName = 'PreviewOverlay';

package/src/components/ReadReceipts.tsx

@@ -41,6 +41,7 @@ export const ReadReceipts: React.FC<ReadReceiptsProps> = React.memo(({
   AvatarComponent = Avatar,
   TooltipComponent = DefaultReadReceiptsTooltip,
   showTooltip = true,
+  isOwnMessage,
 }) => {
   // Only render when there are actual readers (avatar-based display)
   // Sent/Sending/Error status icons are now rendered inline inside the message bubble
@@ -52,7 +53,7 @@ export const ReadReceipts: React.FC<ReadReceiptsProps> = React.memo(({
   const overflow = readers.length - maxAvatars;
 
   return (
-    <div className="ermis-read-receipts">
+    <div className={`ermis-read-receipts${isOwnMessage ? ' ermis-read-receipts--own' : ' ermis-read-receipts--other'}`}>
       <div className="ermis-read-receipts__avatars">
         {visible.map((reader) => (
           <AvatarComponent