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

package/src/components/PinnedMessages.tsx

@@ -1,7 +1,14 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { Avatar } from './Avatar';
-import { isStickerMessage } from '../messageTypeUtils';
+import {
+  ATTACHMENT_TYPES,
+  isImageAttachment,
+  isLinkPreviewAttachment,
+  isStickerMessage,
+  isVideoAttachment,
+  isVoiceRecordingAttachment,
+} from '../messageTypeUtils';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
 import type { FormatMessageResponse } from '@ermis-network/ermis-chat-sdk';
 import type { PinnedMessageItemProps, PinnedMessagesProps } from '../types';
@@ -17,6 +24,8 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
   AvatarComponent,
   unpinLabel = 'Unpin message',
   stickerLabel = 'Sticker',
+  attachmentLabel = 'Attachment',
+  unavailableMessageLabel = 'Message unavailable',
 }) => {
   const { activeChannel } = useChatClient();
   const userName = message.user?.name || message.user_id || 'Unknown';
@@ -30,9 +39,22 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
   let previewText = message.text || '';
   const isSticker = isStickerMessage(message);
 
-  if (!previewText && hasAttachments) {
+  const isUnavailable =
+    !previewText &&
+    ((message as any).content_type === 'mls' ||
+      Boolean((message as any).mls_ciphertext) ||
+      (message as any).e2ee_status === 'failed' ||
+      (message as any).e2ee_status === 'decrypting');
+
+  if (isUnavailable) {
+    previewText = unavailableMessageLabel;
+  } else if (!previewText && hasAttachments) {
     const firstAttach = message.attachments![0];
-    previewText = firstAttach.title || `${firstAttach.type || 'file'}`;
+    previewText =
+      (isLinkPreviewAttachment(firstAttach) && firstAttach.title) ||
+      firstAttach.title ||
+      firstAttach.file_name ||
+      attachmentLabel;
   } else if (isSticker) {
     previewText = stickerLabel;
   }
@@ -44,11 +66,13 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
 
   // Attachment icon prefix
   let attachIcon = '';
-  if (hasAttachments) {
-    const type = message.attachments![0].type;
-    if (type === 'image') attachIcon = '📷 ';
-    else if (type === 'video') attachIcon = '🎥 ';
-    else if (type === 'audio') attachIcon = '🎵 ';
+  if (!isUnavailable && hasAttachments) {
+    const firstAttach = message.attachments![0];
+    if (isImageAttachment(firstAttach)) attachIcon = '📷 ';
+    else if (isVideoAttachment(firstAttach)) attachIcon = '🎥 ';
+    else if (isVoiceRecordingAttachment(firstAttach) || firstAttach.type === ATTACHMENT_TYPES.AUDIO) {
+      attachIcon = '🎵 ';
+    }
     else attachIcon = '📄 ';
   } else if (isSticker) {
     attachIcon = '😀 ';
@@ -61,10 +85,10 @@ const DefaultPinnedMessageItem: React.FC<PinnedMessageItemProps> = React.memo(({
       role="button"
       tabIndex={0}
     >
-      <AvatarComponent image={userAvatar} name={userName} size={28} />
+      <AvatarComponent image={userAvatar} name={userName} size={38} />
       <div className="ermis-pinned-messages__item-content">
         <span className="ermis-pinned-messages__item-user">{userName}</span>
-        <span className="ermis-pinned-messages__item-text">{attachIcon}{previewText || 'Attachment'}</span>
+        <span className="ermis-pinned-messages__item-text">{attachIcon}{previewText || unavailableMessageLabel}</span>
       </div>
       <button
         className="ermis-pinned-messages__unpin-btn"
@@ -96,6 +120,8 @@ export const PinnedMessages: React.FC<PinnedMessagesProps> = React.memo(({
   collapseLabel = 'Collapse',
   unpinLabel = 'Unpin message',
   stickerLabel = 'Sticker',
+  attachmentLabel = 'Attachment',
+  unavailableMessageLabel = 'Message unavailable',
 }) => {
   const { activeChannel, client, messages } = useChatClient();
   const [expanded, setExpanded] = useState(false);
@@ -141,8 +167,8 @@ 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">
-          {typeof pinnedMessagesLabel === 'function' 
-            ? pinnedMessagesLabel(pinnedMessages.length) 
+          {typeof pinnedMessagesLabel === 'function'
+            ? pinnedMessagesLabel(pinnedMessages.length)
             : pinnedMessagesLabel || `${pinnedMessages.length} pinned message${pinnedMessages.length > 1 ? 's' : ''}`
           }
         </span>
@@ -168,6 +194,8 @@ export const PinnedMessages: React.FC<PinnedMessagesProps> = React.memo(({
             AvatarComponent={AvatarComponent}
             unpinLabel={unpinLabel}
             stickerLabel={stickerLabel}
+            attachmentLabel={attachmentLabel}
+            unavailableMessageLabel={unavailableMessageLabel}
           />
         ))}
       </div>

package/src/components/QuotedMessagePreview.tsx

@@ -2,6 +2,14 @@ import React, { useMemo } from 'react';
 import { useChatClient } from '../hooks/useChatClient';
 import { replaceMentionsForPreview, buildUserMap } from '../utils';
 import type { QuotedMessagePreviewProps } from '../types';
+import {
+  isImageAttachment,
+  isLinkPreviewAttachment,
+  isStickerMessage,
+  isVideoAttachment,
+  isVoiceRecordingAttachment,
+} from '../messageTypeUtils';
+import { isDeletedDisplayMessage } from '../messageTypeUtils';
 
 export type { QuotedMessagePreviewProps } from '../types';
 
@@ -12,10 +20,50 @@ function truncateText(text: string, maxLength: number): string {
   return text.slice(0, maxLength).trimEnd() + '…';
 }
 
+function getAttachmentPreview(
+  attachments: NonNullable<QuotedMessagePreviewProps['quotedMessage']['attachments']>,
+  attachmentLabel: string,
+): string {
+  const firstAttachment = attachments[0];
+  if (!firstAttachment) return attachmentLabel;
+
+  if (isLinkPreviewAttachment(firstAttachment) && firstAttachment.title) {
+    return firstAttachment.title;
+  }
+
+  if (firstAttachment.title || firstAttachment.file_name) {
+    return firstAttachment.title || firstAttachment.file_name || attachmentLabel;
+  }
+
+  if (isImageAttachment(firstAttachment)) return attachmentLabel;
+  if (isVideoAttachment(firstAttachment)) return attachmentLabel;
+  if (isVoiceRecordingAttachment(firstAttachment)) return attachmentLabel;
+
+  return attachmentLabel;
+}
+
+function hasUnavailableContent(quotedMessage: QuotedMessagePreviewProps['quotedMessage']): boolean {
+  const hasText = Boolean(quotedMessage.text?.trim());
+  if (hasText) return false;
+  if (isStickerMessage(quotedMessage)) return false;
+  if (quotedMessage.attachments?.length) return false;
+
+  return (
+    quotedMessage.content_type === 'mls' ||
+    Boolean(quotedMessage.mls_ciphertext) ||
+    quotedMessage.e2ee_status === 'failed' ||
+    quotedMessage.e2ee_status === 'decrypting'
+  );
+}
+
 export const QuotedMessagePreview: React.FC<QuotedMessagePreviewProps> = React.memo(({
   quotedMessage,
   isOwnMessage,
   onClick,
+  attachmentLabel = 'Attachment',
+  unavailableMessageLabel = 'Message unavailable',
+  stickerLabel = 'Sticker',
+  deletedMessageLabel = 'This message was deleted',
 }) => {
   const { activeChannel } = useChatClient();
 
@@ -25,12 +73,53 @@ export const QuotedMessagePreview: React.FC<QuotedMessagePreviewProps> = React.m
 
   const authorName = quotedMessage.user?.name || quotedMessage.user?.id || 'Unknown';
   
-  const rawText = quotedMessage.text || '';
-  const formattedText = useMemo(() => replaceMentionsForPreview(rawText, quotedMessage as any, userMap), [rawText, quotedMessage, userMap]);
-  
-  const previewText = formattedText
-    ? truncateText(formattedText, MAX_PREVIEW_LENGTH)
-    : 'Attachment';
+  const rawText = quotedMessage.text?.trim() || '';
+  const formattedText = useMemo(
+    () => replaceMentionsForPreview(rawText, quotedMessage, userMap),
+    [rawText, quotedMessage, userMap],
+  );
+
+  const preview = useMemo(() => {
+    if (formattedText) {
+      return {
+        text: truncateText(formattedText, MAX_PREVIEW_LENGTH),
+        unavailable: false,
+      };
+    }
+
+    if (isStickerMessage(quotedMessage)) {
+      return {
+        text: stickerLabel,
+        unavailable: false,
+      };
+    }
+
+    if (quotedMessage.attachments?.length) {
+      return {
+        text: getAttachmentPreview(quotedMessage.attachments, attachmentLabel),
+        unavailable: false,
+      };
+    }
+
+    if (isDeletedDisplayMessage(quotedMessage)) {
+      return {
+        text: deletedMessageLabel,
+        unavailable: true,
+      };
+    }
+
+    if (hasUnavailableContent(quotedMessage)) {
+      return {
+        text: unavailableMessageLabel,
+        unavailable: true,
+      };
+    }
+
+    return {
+      text: unavailableMessageLabel,
+      unavailable: true,
+    };
+  }, [attachmentLabel, formattedText, quotedMessage, stickerLabel, unavailableMessageLabel, deletedMessageLabel]);
 
   const handleClick = () => {
     onClick(quotedMessage.id);
@@ -38,7 +127,9 @@ export const QuotedMessagePreview: React.FC<QuotedMessagePreviewProps> = React.m
 
   return (
     <div
-      className={`ermis-quoted-message ${isOwnMessage ? 'ermis-quoted-message--own' : ''}`}
+      className={`ermis-quoted-message ${isOwnMessage ? 'ermis-quoted-message--own' : ''}${
+        preview.unavailable ? ' ermis-quoted-message--unavailable' : ''
+      }`}
       onClick={handleClick}
       role="button"
       tabIndex={0}
@@ -47,7 +138,7 @@ export const QuotedMessagePreview: React.FC<QuotedMessagePreviewProps> = React.m
       }}
     >
       <span className="ermis-quoted-message__author">{authorName}</span>
-      <span className="ermis-quoted-message__text">{previewText}</span>
+      <span className="ermis-quoted-message__text">{preview.text}</span>
     </div>
   );
 });

package/src/components/RecoveryPin/RecoveryPin.tsx

@@ -0,0 +1,279 @@
+import React, { useMemo, useState } from 'react';
+
+import { useRecoveryPin } from '../../hooks/useRecoveryPin';
+import type { RecoveryPinStatus } from '../../hooks/useRecoveryPin';
+
+export type RecoveryPinSetupProps = {
+  onComplete?: () => void;
+  minDigits?: number;
+};
+
+export type RecoveryPinRestoreProps = {
+  onComplete?: () => void;
+};
+
+export type RecoveryPinChangeProps = {
+  onComplete?: () => void;
+  minDigits?: number;
+};
+
+export type RecoveryStatusProps = {
+  status?: RecoveryPinStatus;
+  hasRecoveryKey?: boolean;
+  className?: string;
+};
+
+export type RecoveryGapProps = {
+  epoch?: number;
+  reason: string;
+  className?: string;
+};
+
+export type RecoveryGateProps = {
+  onSkip?: () => void;
+  className?: string;
+};
+
+export type RecoveryRestoreProgressProps = {
+  restoredEpochs: number;
+  totalEpochs: number;
+  gaps?: Array<{ epoch?: number; reason: string }>;
+  className?: string;
+};
+
+const MIN_PIN_DIGITS = 8;
+
+const pinError = (pin: string, minDigits = MIN_PIN_DIGITS): string | null => {
+  if (!/^\d+$/.test(pin)) return 'PIN must contain digits only.';
+  if (pin.length < minDigits) return `PIN must be at least ${minDigits} digits.`;
+  return null;
+};
+
+const bruteForceLabel = (digits: number): string => {
+  if (digits >= 10) return 'Strong';
+  if (digits >= 8) return 'Medium';
+  return 'Weak';
+};
+
+export const RecoveryPinSetup: React.FC<RecoveryPinSetupProps> = ({
+  onComplete,
+  minDigits = MIN_PIN_DIGITS,
+}) => {
+  const recovery = useRecoveryPin();
+  const [pin, setPin] = useState('');
+  const [confirmPin, setConfirmPin] = useState('');
+  const validation = pin ? pinError(pin, minDigits) : null;
+  const mismatch = confirmPin && pin !== confirmPin ? 'PIN confirmation does not match.' : null;
+  const canSubmit = !!pin && !!confirmPin && !validation && !mismatch && recovery.status !== 'working';
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    await recovery.setupRecoveryPin(pin);
+    onComplete?.();
+  };
+
+  return (
+    <form className="ermis-recovery-pin" onSubmit={submit}>
+      <div className="ermis-recovery-pin__header">
+        <h3>Recovery PIN</h3>
+        <span className="ermis-recovery-pin__badge">{bruteForceLabel(pin.length)}</span>
+      </div>
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="new-password"
+        type="password"
+        value={pin}
+        onChange={(event) => setPin(event.target.value)}
+        placeholder="Enter PIN"
+      />
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="new-password"
+        type="password"
+        value={confirmPin}
+        onChange={(event) => setConfirmPin(event.target.value)}
+        placeholder="Confirm PIN"
+      />
+      {(validation || mismatch || recovery.error) && (
+        <div className="ermis-recovery-pin__error">
+          {validation || mismatch || recovery.error?.message}
+        </div>
+      )}
+      <button className="ermis-recovery-pin__button" type="submit" disabled={!canSubmit}>
+        {recovery.status === 'working' ? 'Saving...' : 'Save PIN'}
+      </button>
+    </form>
+  );
+};
+
+export const RecoveryPinRestore: React.FC<RecoveryPinRestoreProps> = ({ onComplete }) => {
+  const recovery = useRecoveryPin();
+  const [pin, setPin] = useState('');
+  const validation = pin ? pinError(pin) : null;
+  const canSubmit = !!pin && !validation && recovery.status !== 'working';
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    await recovery.unlockRecoveryVault(pin);
+    onComplete?.();
+  };
+
+  return (
+    <form className="ermis-recovery-pin" onSubmit={submit}>
+      <div className="ermis-recovery-pin__header">
+        <h3>Unlock History</h3>
+      </div>
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="current-password"
+        type="password"
+        value={pin}
+        onChange={(event) => setPin(event.target.value)}
+        placeholder="Enter recovery PIN"
+      />
+      {(validation || recovery.error) && (
+        <div className="ermis-recovery-pin__error">{validation || recovery.error?.message}</div>
+      )}
+      <button className="ermis-recovery-pin__button" type="submit" disabled={!canSubmit}>
+        {recovery.status === 'working' ? 'Unlocking...' : 'Unlock'}
+      </button>
+    </form>
+  );
+};
+
+export const RecoveryPinChange: React.FC<RecoveryPinChangeProps> = ({
+  onComplete,
+  minDigits = MIN_PIN_DIGITS,
+}) => {
+  const recovery = useRecoveryPin();
+  const [oldPin, setOldPin] = useState('');
+  const [newPin, setNewPin] = useState('');
+  const validation = newPin ? pinError(newPin, minDigits) : null;
+  const canSubmit = !!oldPin && !!newPin && !validation && recovery.status !== 'working';
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    await recovery.changeRecoveryPin(oldPin, newPin);
+    onComplete?.();
+  };
+
+  return (
+    <form className="ermis-recovery-pin" onSubmit={submit}>
+      <div className="ermis-recovery-pin__header">
+        <h3>Change Recovery PIN</h3>
+        <span className="ermis-recovery-pin__badge">{bruteForceLabel(newPin.length)}</span>
+      </div>
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="current-password"
+        type="password"
+        value={oldPin}
+        onChange={(event) => setOldPin(event.target.value)}
+        placeholder="Current PIN"
+      />
+      <input
+        className="ermis-recovery-pin__input"
+        inputMode="numeric"
+        autoComplete="new-password"
+        type="password"
+        value={newPin}
+        onChange={(event) => setNewPin(event.target.value)}
+        placeholder="New PIN"
+      />
+      {(validation || recovery.error) && (
+        <div className="ermis-recovery-pin__error">{validation || recovery.error?.message}</div>
+      )}
+      <button className="ermis-recovery-pin__button" type="submit" disabled={!canSubmit}>
+        {recovery.status === 'working' ? 'Changing...' : 'Change PIN'}
+      </button>
+    </form>
+  );
+};
+
+export const RecoveryStatus: React.FC<RecoveryStatusProps> = ({
+  status,
+  hasRecoveryKey,
+  className,
+}) => {
+  const recovery = useRecoveryPin();
+  const resolvedStatus = status || recovery.status;
+  const resolvedHasKey = hasRecoveryKey ?? recovery.hasRecoveryKey;
+  const label = useMemo(() => {
+    if (resolvedStatus === 'working') return 'Recovery syncing';
+    if (resolvedStatus === 'error') return 'Recovery error';
+    if (recovery.recoveryStatus?.hasIncompleteRestore) return 'Recovery pending';
+    if ((recovery.recoveryStatus?.channelsWithPermanentGaps.length || 0) > 0) return 'Recovery has gaps';
+    return resolvedHasKey ? 'Recovery ready' : 'Recovery locked';
+  }, [recovery.recoveryStatus, resolvedHasKey, resolvedStatus]);
+
+  return (
+    <span className={`ermis-recovery-status ermis-recovery-status--${resolvedStatus}${className ? ` ${className}` : ''}`}>
+      {label}
+    </span>
+  );
+};
+
+export const RecoveryGap: React.FC<RecoveryGapProps> = ({ epoch, reason, className }) => (
+  <div className={`ermis-recovery-gap${className ? ` ${className}` : ''}`}>
+    {epoch !== undefined ? `Epoch ${epoch}: ` : ''}{reason}
+  </div>
+);
+
+export const RecoveryGate: React.FC<RecoveryGateProps> = ({ onSkip, className }) => {
+  const recovery = useRecoveryPin();
+  const [skipped, setSkipped] = useState(false);
+  const status = recovery.recoveryStatus;
+  if (skipped || !status) return null;
+
+  const skip = () => {
+    setSkipped(true);
+    onSkip?.();
+  };
+
+  if (!status.hasVault) {
+    return (
+      <div className={`ermis-recovery-gate${className ? ` ${className}` : ''}`} role="dialog" aria-modal="true">
+        <RecoveryPinSetup onComplete={recovery.refresh} />
+        <button className="ermis-recovery-pin__button ermis-recovery-pin__button--secondary" type="button" onClick={skip}>
+          Skip
+        </button>
+      </div>
+    );
+  }
+
+  if (!status.unlocked && status.hasIncompleteRestore) {
+    return (
+      <div className={`ermis-recovery-gate${className ? ` ${className}` : ''}`} role="dialog" aria-modal="true">
+        <RecoveryPinRestore onComplete={recovery.refresh} />
+        <button className="ermis-recovery-pin__button ermis-recovery-pin__button--secondary" type="button" onClick={skip}>
+          Skip
+        </button>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export const RecoveryRestoreProgress: React.FC<RecoveryRestoreProgressProps> = ({
+  restoredEpochs,
+  totalEpochs,
+  gaps = [],
+  className,
+}) => (
+  <div className={`ermis-recovery-progress${className ? ` ${className}` : ''}`}>
+    <div className="ermis-recovery-progress__summary">
+      {restoredEpochs}/{totalEpochs} epochs restored
+    </div>
+    {gaps.map((gap, index) => (
+      <RecoveryGap key={`${gap.epoch ?? 'gap'}-${index}`} epoch={gap.epoch} reason={gap.reason} />
+    ))}
+  </div>
+);

package/src/components/RecoveryPin/index.ts

@@ -0,0 +1,19 @@
+export {
+  RecoveryPinSetup,
+  RecoveryPinRestore,
+  RecoveryPinChange,
+  RecoveryStatus,
+  RecoveryGap,
+  RecoveryGate,
+  RecoveryRestoreProgress,
+} from './RecoveryPin';
+
+export type {
+  RecoveryPinSetupProps,
+  RecoveryPinRestoreProps,
+  RecoveryPinChangeProps,
+  RecoveryStatusProps,
+  RecoveryGapProps,
+  RecoveryGateProps,
+  RecoveryRestoreProgressProps,
+} from './RecoveryPin';

package/src/components/TopicList.tsx

@@ -58,6 +58,8 @@ export const TopicList: React.FC<TopicListProps> = React.memo(({
   videoMessageLabel,
   voiceRecordingMessageLabel,
   fileMessageLabel,
+  encryptedMessageLabel,
+  encryptedMessageUnavailableLabel,
   systemMessageTranslations,
   signalMessageTranslations,
 }) => {
@@ -119,15 +121,24 @@ export const TopicList: React.FC<TopicListProps> = React.memo(({
   }, [channel, generalTopicLabel]);
 
   const markChannelRead = useCallback((ch: Channel) => {
-    const ms = ch.state?.membership as Record<string, unknown> | undefined;
-    const chState = ch.state as unknown as Record<string, unknown> | undefined;
+    const client = ch.getClient();
+    const activeCh = client.activeChannels[ch.cid] || ch;
+    const ms = activeCh.state?.membership as Record<string, unknown> | undefined;
+    const chState = activeCh.state as unknown as Record<string, unknown> | undefined;
     const isBannedInChannel = Boolean(ms?.banned);
     const isPending = isPendingMember(ms?.channel_role as string);
     const isSkipped = isSkippedMember(ms?.channel_role as string);
 
-    if (!isBannedInChannel && !isPending && !isSkipped && (chState?.unreadCount as number) > 0) {
-      ch.markRead().catch(() => { });
-      if (chState) chState.unreadCount = 0;
+    if (!isBannedInChannel && !isPending && !isSkipped) {
+      if ((chState?.unreadCount as number) > 0) {
+        activeCh.markRead().catch(() => { });
+        if (chState) chState.unreadCount = 0;
+      }
+      
+      // Always clear the stale channel just in case to fix UI ghost badges
+      if (ch.state && (ch.state as any).unreadCount > 0) {
+        (ch.state as any).unreadCount = 0;
+      }
     }
   }, []);
 
@@ -173,6 +184,8 @@ export const TopicList: React.FC<TopicListProps> = React.memo(({
         videoMessageLabel={videoMessageLabel}
         voiceRecordingMessageLabel={voiceRecordingMessageLabel}
         fileMessageLabel={fileMessageLabel}
+        encryptedMessageLabel={encryptedMessageLabel}
+        encryptedMessageUnavailableLabel={encryptedMessageUnavailableLabel}
         systemMessageTranslations={systemMessageTranslations}
         signalMessageTranslations={signalMessageTranslations}
       />
@@ -203,6 +216,8 @@ export const TopicList: React.FC<TopicListProps> = React.memo(({
           videoMessageLabel={videoMessageLabel}
           voiceRecordingMessageLabel={voiceRecordingMessageLabel}
           fileMessageLabel={fileMessageLabel}
+          encryptedMessageLabel={encryptedMessageLabel}
+          encryptedMessageUnavailableLabel={encryptedMessageUnavailableLabel}
           systemMessageTranslations={systemMessageTranslations}
           signalMessageTranslations={signalMessageTranslations}
         />

package/src/components/TypingIndicator.tsx

@@ -29,16 +29,16 @@ export const TypingIndicator: React.FC<TypingIndicatorProps> = React.memo(({ typ
   }
 
   return (
-    <div className={`ermis-typing-indicator${isActive ? ' ermis-typing-indicator--active' : ''}`}>
+    <div className={`ermis-typing-indicator-wrapper`}>
       {isActive && (
-        <>
+        <div className="ermis-typing-indicator ermis-typing-indicator--active">
           <div className="ermis-typing-indicator__dots">
             <span className="ermis-typing-indicator__dot" />
             <span className="ermis-typing-indicator__dot" />
             <span className="ermis-typing-indicator__dot" />
           </div>
           <span className="ermis-typing-indicator__text">{text}</span>
-        </>
+        </div>
       )}
     </div>
   );