stream-chat-react-native-core 5.38.1 → 5.39.0-beta.1

package/src/components/ThreadList/ThreadListItem.tsx

@@ -0,0 +1,268 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { Thread, ThreadState } from 'stream-chat';
+
+import {
+  TranslationContextValue,
+  useChatContext,
+  useTheme,
+  useTranslationContext,
+} from '../../contexts';
+import {
+  ThreadListItemProvider,
+  useThreadListItemContext,
+} from '../../contexts/threadsContext/ThreadListItemContext';
+import { useThreadsContext } from '../../contexts/threadsContext/ThreadsContext';
+import { useStateStore } from '../../hooks';
+import { MessageBubble } from '../../icons';
+import { getDateString } from '../../utils/i18n/getDateString';
+import { Avatar } from '../Avatar/Avatar';
+import { useChannelPreviewDisplayName } from '../ChannelPreview/hooks/useChannelPreviewDisplayName';
+import { MessageType } from '../MessageList/hooks/useMessageList';
+
+export type ThreadListItemProps = {
+  thread: Thread;
+  timestampTranslationKey?: string;
+};
+
+const styles = StyleSheet.create({
+  boldText: { fontSize: 14, fontWeight: '500' },
+  contentRow: {
+    flexDirection: 'row',
+    marginTop: 6,
+  },
+  contentTextWrapper: {
+    flex: 1,
+    marginLeft: 8,
+  },
+  dateText: { alignSelf: 'flex-end' },
+  headerRow: {
+    flexDirection: 'row',
+  },
+  infoRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  lastReplyText: { flex: 1, fontSize: 14, marginTop: 4 },
+  parentMessageText: { flex: 1, fontSize: 12 },
+  touchableWrapper: {
+    flex: 1,
+    paddingHorizontal: 8,
+    paddingVertical: 14,
+  },
+  unreadBubbleWrapper: {
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+    borderRadius: 50,
+    height: 22,
+    justifyContent: 'center',
+    width: 22,
+  },
+});
+
+export const attachmentTypeIconMap = {
+  audio: '🔈',
+  file: '📄',
+  image: '📷',
+  video: '🎥',
+  voiceRecording: '🎙️',
+} as const;
+
+const getTitleFromMessage = ({
+  currentUserId,
+  message,
+  t,
+}: {
+  t: TranslationContextValue['t'];
+  currentUserId?: string;
+  message?: MessageType | undefined;
+}) => {
+  const attachment = message?.attachments?.at(0);
+
+  const attachmentIcon = attachment
+    ? `${
+        attachmentTypeIconMap[(attachment.type as keyof typeof attachmentTypeIconMap) ?? 'file'] ??
+        attachmentTypeIconMap.file
+      } `
+    : '';
+
+  const messageBelongsToCurrentUserPrefix =
+    message?.user?.id === currentUserId ? `${t('You')}: ` : '';
+
+  if (message?.deleted_at && message.parent_id)
+    return `${messageBelongsToCurrentUserPrefix}${t('This reply was deleted')}.`;
+
+  if (message?.deleted_at && !message.parent_id)
+    return `${messageBelongsToCurrentUserPrefix}${t('The source message was deleted')}.`;
+
+  if (attachment?.type === 'voiceRecording')
+    return `${attachmentIcon}${messageBelongsToCurrentUserPrefix}${t('Voice message')}.`;
+
+  return `${attachmentIcon}${messageBelongsToCurrentUserPrefix}${
+    message?.text || attachment?.fallback || 'N/A'
+  }`;
+};
+
+export const ThreadListItemComponent = () => {
+  const {
+    channel,
+    dateString,
+    deletedAtDateString,
+    lastReply,
+    ownUnreadMessageCount,
+    parentMessage,
+    thread,
+  } = useThreadListItemContext();
+  const displayName = useChannelPreviewDisplayName(channel);
+  const { onThreadSelect } = useThreadsContext();
+  const { client } = useChatContext();
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      colors: { accent_red, text_low_emphasis, white },
+      threadListItem,
+    },
+  } = useTheme();
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        if (onThreadSelect) {
+          onThreadSelect({ thread: parentMessage as MessageType, threadInstance: thread }, channel);
+        }
+      }}
+      style={[styles.touchableWrapper, threadListItem.touchableWrapper]}
+      testID='thread-list-item'
+    >
+      <View style={[styles.headerRow, threadListItem.headerRow]}>
+        <MessageBubble />
+        <Text style={[styles.boldText, { color: text_low_emphasis }, threadListItem.boldText]}>
+          {displayName || 'N/A'}
+        </Text>
+      </View>
+      <View style={[styles.infoRow, threadListItem.infoRow]}>
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.parentMessageText,
+            { color: text_low_emphasis },
+            threadListItem.parentMessageText,
+          ]}
+        >
+          {t<string>('replied to')}: {getTitleFromMessage({ message: parentMessage, t })}
+        </Text>
+        {ownUnreadMessageCount > 0 && !deletedAtDateString ? (
+          <View
+            style={[
+              styles.unreadBubbleWrapper,
+              { backgroundColor: accent_red },
+              threadListItem.unreadBubbleWrapper,
+            ]}
+          >
+            <Text style={[{ color: white }, threadListItem.unreadBubbleText]}>
+              {ownUnreadMessageCount}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+      <View style={[styles.contentRow, threadListItem.contentRow]}>
+        <Avatar
+          image={lastReply?.user?.image as string}
+          online={lastReply?.user?.online}
+          size={40}
+        />
+        <View style={[styles.contentTextWrapper, threadListItem.contentTextWrapper]}>
+          <Text style={[styles.boldText, { color: text_low_emphasis }, threadListItem.boldText]}>
+            {lastReply?.user?.name}
+          </Text>
+          <View style={[styles.headerRow, threadListItem.headerRow]}>
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.lastReplyText,
+                { color: text_low_emphasis },
+                threadListItem.lastReplyText,
+              ]}
+            >
+              {deletedAtDateString
+                ? 'This thread was deleted.'
+                : getTitleFromMessage({
+                    currentUserId: client.userID,
+                    message: lastReply,
+                    t,
+                  })}
+            </Text>
+            <Text style={[styles.dateText, { color: text_low_emphasis }, threadListItem.dateText]}>
+              {deletedAtDateString ?? dateString}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export const ThreadListItem = (props: ThreadListItemProps) => {
+  const { client } = useChatContext();
+  const { t, tDateTimeParser } = useTranslationContext();
+  const { thread, timestampTranslationKey = 'timestamp/ThreadListItem' } = props;
+  const { ThreadListItem = ThreadListItemComponent } = useThreadsContext();
+
+  const selector = useCallback(
+    (nextValue: ThreadState) =>
+      [
+        nextValue.replies.at(-1),
+        (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
+        nextValue.parentMessage,
+        nextValue.channel,
+        nextValue.deletedAt,
+      ] as const,
+    [client],
+  );
+
+  const [lastReply, ownUnreadMessageCount, parentMessage, channel, deletedAt] = useStateStore(
+    thread.state,
+    selector,
+  );
+
+  const timestamp = lastReply?.created_at;
+
+  // TODO: Please rethink this, we have the same line of code in about 5 places in the SDK.
+  const dateString = useMemo(
+    () =>
+      getDateString({
+        date: timestamp,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey,
+      }),
+    [timestamp, t, tDateTimeParser, timestampTranslationKey],
+  );
+  const deletedAtDateString = useMemo(
+    () =>
+      getDateString({
+        date: deletedAt as Date | undefined,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey,
+      }),
+    [deletedAt, t, tDateTimeParser, timestampTranslationKey],
+  );
+
+  return (
+    <ThreadListItemProvider
+      value={{
+        channel,
+        dateString,
+        deletedAtDateString,
+        lastReply,
+        ownUnreadMessageCount,
+        parentMessage,
+        thread,
+      }}
+    >
+      <ThreadListItem />
+    </ThreadListItemProvider>
+  );
+};

package/src/components/ThreadList/ThreadListUnreadBanner.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+
+import { ThreadManagerState } from 'stream-chat';
+
+import { useChatContext, useTheme } from '../../contexts';
+import { useStateStore } from '../../hooks';
+import { Reload } from '../../icons';
+
+const styles = StyleSheet.create({
+  text: { alignSelf: 'flex-start', flex: 1, fontSize: 16 },
+  touchableWrapper: {
+    borderRadius: 16,
+    flexDirection: 'row',
+    marginHorizontal: 8,
+    marginVertical: 6,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+});
+
+const selector = (nextValue: ThreadManagerState) => [nextValue.unseenThreadIds] as const;
+
+export const ThreadListUnreadBanner = () => {
+  const { client } = useChatContext();
+  const {
+    theme: {
+      colors: { text_high_emphasis, white },
+      threadListUnreadBanner,
+    },
+  } = useTheme();
+  const [unseenThreadIds] = useStateStore(client.threads.state, selector);
+  if (!unseenThreadIds.length) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => client.threads.reload()}
+      style={[
+        styles.touchableWrapper,
+        { backgroundColor: text_high_emphasis },
+        threadListUnreadBanner.touchableWrapper,
+      ]}
+    >
+      <Text style={[styles.text, { color: white }, threadListUnreadBanner.text]}>
+        {unseenThreadIds.length} unread threads
+      </Text>
+      <Reload pathFill={white} />
+    </TouchableOpacity>
+  );
+};

package/src/components/index.ts

@@ -139,7 +139,6 @@ export * from './MessageList/hooks/useTypingString';
 export * from './MessageList/InlineDateSeparator';
 export * from './MessageList/InlineLoadingMoreIndicator';
 export * from './MessageList/InlineLoadingMoreRecentIndicator';
-export * from './MessageList/InlineLoadingMoreThreadIndicator';
 export * from './MessageList/InlineUnreadIndicator';
 export * from './MessageList/MessageList';
 export * from './MessageList/MessageSystem';
@@ -169,3 +168,4 @@ export * from './Spinner/Spinner';
 
 export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';
+export * from './ThreadList/ThreadList';

package/src/contexts/themeContext/utils/theme.ts

@@ -27,6 +27,8 @@ export const Colors = {
   static_black: '#000000',
   static_white: '#ffffff',
   targetedMessageBackground: '#FBF4DD', // dark mode = #302D22
+  text_high_emphasis: '#080707',
+  text_low_emphasis: '#7E828B',
   transparent: 'transparent',
   white: '#FFFFFF',
   white_smoke: '#F2F2F2',
@@ -637,6 +639,23 @@ export type Theme = {
       threadHeight?: number;
     };
   };
+  threadListItem: {
+    boldText: TextStyle;
+    contentRow: ViewStyle;
+    contentTextWrapper: ViewStyle;
+    dateText: TextStyle;
+    headerRow: ViewStyle;
+    infoRow: ViewStyle;
+    lastReplyText: TextStyle;
+    parentMessageText: TextStyle;
+    touchableWrapper: ViewStyle;
+    unreadBubbleText: TextStyle;
+    unreadBubbleWrapper: ViewStyle;
+  };
+  threadListUnreadBanner: {
+    text: TextStyle;
+    touchableWrapper: ViewStyle;
+  };
   typingIndicator: {
     container: ViewStyle;
     text: TextStyle & {
@@ -1241,6 +1260,23 @@ export const defaultTheme: Theme = {
       text: {},
     },
   },
+  threadListItem: {
+    boldText: {},
+    contentRow: {},
+    contentTextWrapper: {},
+    dateText: {},
+    headerRow: {},
+    infoRow: {},
+    lastReplyText: {},
+    parentMessageText: {},
+    touchableWrapper: {},
+    unreadBubbleText: {},
+    unreadBubbleWrapper: {},
+  },
+  threadListUnreadBanner: {
+    text: {},
+    touchableWrapper: {},
+  },
   typingIndicator: {
     container: {},
     text: {

package/src/contexts/threadContext/ThreadContext.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { ChannelState } from 'stream-chat';
+import { ChannelState, Thread } from 'stream-chat';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
@@ -9,6 +9,10 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+export type ThreadType<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = { thread: MessageType<StreamChatGenerics>; threadInstance: Thread };
+
 export type ThreadContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
@@ -20,12 +24,15 @@ export type ThreadContextValue<
   setThreadLoadingMore: React.Dispatch<React.SetStateAction<boolean>>;
   thread: MessageType<StreamChatGenerics> | null;
   threadHasMore: boolean;
-  threadLoadingMore: boolean;
   threadMessages: ChannelState<StreamChatGenerics>['threads'][string];
+  loadMoreRecentThread?: (opts: { limit?: number }) => Promise<void>;
   /**
    * Boolean to enable/disable parent message press
    */
   parentMessagePreventPress?: boolean;
+  threadInstance?: Thread | null;
+  threadLoadingMore?: boolean;
+  threadLoadingMoreRecent?: boolean;
 };
 
 export const ThreadContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as ThreadContextValue);

package/src/contexts/threadsContext/ThreadListItemContext.tsx

@@ -0,0 +1,41 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+import { Channel, Thread } from 'stream-chat';
+
+import { MessageType } from '../../components';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+export type ThreadListItemContextValue<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  channel: Channel<StreamChatGenerics>;
+  dateString: string | number | undefined;
+  deletedAtDateString: string | number | undefined;
+  lastReply: MessageType<StreamChatGenerics> | undefined;
+  ownUnreadMessageCount: number;
+  parentMessage: MessageType<StreamChatGenerics> | undefined;
+  thread: Thread<StreamChatGenerics>;
+};
+
+export const ThreadListItemContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ThreadListItemContextValue,
+);
+
+export const ThreadListItemProvider = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: ThreadListItemContextValue<StreamChatGenerics>;
+}>) => (
+  <ThreadListItemContext.Provider value={value as unknown as ThreadListItemContextValue}>
+    {children}
+  </ThreadListItemContext.Provider>
+);
+
+export const useThreadListItemContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() =>
+  useContext(ThreadListItemContext) as unknown as ThreadListItemContextValue<StreamChatGenerics>;

package/src/contexts/threadsContext/ThreadsContext.tsx

@@ -0,0 +1,62 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+import { FlatListProps } from 'react-native';
+
+import { Channel, Thread } from 'stream-chat';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { ThreadType } from '../threadContext/ThreadContext';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+export type ThreadsContextValue<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  isFocused: boolean;
+  isLoading: boolean;
+  isLoadingNext: boolean;
+  threads: Thread<StreamChatGenerics>[];
+  additionalFlatListProps?: Partial<FlatListProps<Thread>>;
+  loadMore?: () => Promise<void>;
+  onThreadSelect?: (thread: ThreadType, channel: Channel) => void;
+  ThreadListEmptyPlaceholder?: React.ComponentType;
+  ThreadListItem?: React.ComponentType;
+  ThreadListLoadingIndicator?: React.ComponentType;
+  ThreadListLoadingMoreIndicator?: React.ComponentType;
+  ThreadListUnreadBanner?: React.ComponentType;
+};
+
+export const ThreadsContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ThreadsContextValue,
+);
+
+export const ThreadsProvider = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: ThreadsContextValue<StreamChatGenerics>;
+}>) => (
+  <ThreadsContext.Provider value={value as unknown as ThreadsContextValue}>
+    {children}
+  </ThreadsContext.Provider>
+);
+
+export const useThreadsContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => {
+  const contextValue = useContext(
+    ThreadsContext,
+  ) as unknown as ThreadsContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      // TODO: Set correct link to docs page, should be the new ThreadList instead of Channel
+      `The useThreadsContext hook was called outside of the ThreadsContext provider. Make sure you have configured the ThreadList component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#channel`,
+    );
+  }
+
+  return contextValue;
+};

package/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useAppStateListener';
 export * from './useStreami18n';
 export * from './useViewport';
 export * from './useScreenDimensions';
+export * from './useStateStore';

package/src/hooks/useStateStore.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+import type { StateStore } from 'stream-chat';
+
+export function useStateStore<T extends Record<string, unknown>, O extends readonly unknown[]>(
+  store: StateStore<T>,
+  selector: (v: T) => O,
+): O;
+export function useStateStore<T extends Record<string, unknown>, O extends readonly unknown[]>(
+  store: StateStore<T> | undefined,
+  selector: (v: T) => O,
+): O | undefined;
+export function useStateStore<T extends Record<string, unknown>, O extends readonly unknown[]>(
+  store: StateStore<T> | undefined,
+  selector: (v: T) => O,
+) {
+  const [state, setState] = useState<O | undefined>(() => {
+    if (!store) return undefined;
+    return selector(store.getLatestValue());
+  });
+
+  useEffect(() => {
+    if (!store) return;
+
+    const unsubscribe = store.subscribeWithSelector(selector, setState);
+
+    return unsubscribe;
+  }, [store, selector]);
+
+  return state;
+}

package/src/i18n/en.json

@@ -38,12 +38,14 @@
   "Links are disabled": "Links are disabled",
   "Loading channels...": "Loading channels...",
   "Loading messages...": "Loading messages...",
+  "Loading threads...": "Loading threads...",
   "Loading...": "Loading...",
   "Message Reactions": "Message Reactions",
   "Message deleted": "Message deleted",
   "Message flagged": "Message flagged",
   "Mute User": "Mute User",
   "No chats here yet…": "No chats here yet…",
+  "No threads here yet": "No threads here yet",
   "Not supported": "Not supported",
   "Nothing yet...": "Nothing yet...",
   "Ok": "Ok",
@@ -67,6 +69,8 @@
   "Sending links is not allowed in this conversation": "Sending links is not allowed in this conversation",
   "Slow mode ON": "Slow mode ON",
   "The message has been reported to a moderator.": "The message has been reported to a moderator.",
+  "The source message was deleted": "The source message was deleted",
+  "This reply was deleted": "This reply was deleted",
   "Thread Reply": "Thread Reply",
   "Unban User": "Unban User",
   "Unblock User": "Unblock User",
@@ -75,8 +79,10 @@
   "Unpin from Conversation": "Unpin from Conversation",
   "Unread Messages": "Unread Messages",
   "Video": "Video",
+  "Voice message": "Voice message",
   "You": "You",
   "You can't send messages in this channel": "You can't send messages in this channel",
+  "replied to": "replied to",
   "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Yesterday]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Tomorrow]\", \"nextWeek\":\"dddd [at] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
   "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/InlineDateSeparator": "{{ timestamp |  timestampFormatter(calendar: true) }}",
@@ -84,6 +90,7 @@
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Yesterday]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Tomorrow]\", \"nextWeek\":\"dddd [at] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} and {{ nonSelfUserLength }} more are typing",
   "{{ index }} of {{ photoLength }}": "{{ index }} of {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} Replies",

package/src/i18n/es.json

@@ -38,12 +38,14 @@
   "Links are disabled": "Los enlaces están desactivados",
   "Loading channels...": "Cargando canales...",
   "Loading messages...": "Cargando mensajes...",
+  "Loading threads...": "Cargando hilos...",
   "Loading...": "Cargando...",
   "Message Reactions": "Reacciones al mensaje",
   "Message deleted": "Mensaje eliminado",
   "Message flagged": "Mensaje reportado",
   "Mute User": "Silenciar usuario",
   "No chats here yet…": "No hay chats aquí todavía...",
+  "No threads here yet": "Aún no hay hilos aquí",
   "Not supported": "No admitido",
   "Nothing yet...": "Aún no hay nada...",
   "Ok": "Aceptar",
@@ -67,6 +69,8 @@
   "Sending links is not allowed in this conversation": "No está permitido enviar enlaces en esta conversación",
   "Slow mode ON": "Modo lento ACTIVADO",
   "The message has been reported to a moderator.": "El mensaje ha sido reportado a un moderador.",
+  "The source message was deleted": "El mensaje original fue eliminado",
+  "This reply was deleted": "Esta respuesta fue eliminada",
   "Thread Reply": "Respuesta de hilo",
   "Unban User": "Desbloquear usuario",
   "Unblock User": "Usuario desconocido",
@@ -75,8 +79,10 @@
   "Unpin from Conversation": "Desmarcar de la conversación",
   "Unread Messages": "Mensajes no leídos",
   "Video": "Video",
+  "Voice message": "Mensaje de voz",
   "You": "Tú",
   "You can't send messages in this channel": "No puedes enviar mensajes en este canal",
+  "replied to": "respondió a",
   "timestamp/ChannelPreviewStatus": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ayer]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Mañana]\", \"nextWeek\":\"dddd [a las] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
   "timestamp/ImageGalleryHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/InlineDateSeparator": "{{ timestamp | timestampFormatter(calendar: true) }}",
@@ -84,6 +90,7 @@
   "timestamp/MessageSystem": "{{ timestamp | timestampFormatter(calendar: true) }}",
   "timestamp/MessageTimestamp": "{{ timestamp | timestampFormatter(format: LT) }}",
   "timestamp/StickyHeader": "{{ timestamp | timestampFormatter(calendar: true) }}",
+  "timestamp/ThreadListItem": "{{ timestamp | timestampFormatter(calendar: true; calendarFormats: {\"lastDay\":\"[Ayer]\", \"lastWeek\":\"dddd\", \"nextDay\":\"[Mañana]\", \"nextWeek\":\"dddd [a las] LT\", \"sameDay\":\"LT\", \"sameElse\":\"L\"}) }}",
   "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} y {{ nonSelfUserLength }} más están escribiendo",
   "{{ index }} of {{ photoLength }}": "{{ index }} de {{ photoLength }}",
   "{{ replyCount }} Replies": "{{ replyCount }} Respuestas",